:root{--ink:#e8eef7;--bg:#061018;--pan:#101c2e;--pan2:#0c1726;--ac:#8ec5ff;--ac2:#d7ebff;--hl:#e6b325;--ln:#2c415c;--mut:#b7c4d6;--sw:270px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:18px/1.75 Georgia,"Times New Roman",serif;background-color:#061018;background-image:radial-gradient(900px 520px at 100% 0%,rgba(230,179,37,.16),transparent 58%),linear-gradient(165deg,rgba(6,16,24,.55),rgba(6,16,24,.82)),url("kepek/hatter.jpg");background-repeat:no-repeat,no-repeat,no-repeat;background-size:auto,auto,cover;background-position:center top,center,center top;background-attachment:scroll,scroll,fixed}
h1,h2,h3,h4,.brand,nav a,button,th,.tag,.num,caption{font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:0 0 .45em;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.2;margin:1.6em 0 .45em}
h3{font-size:1.35rem;margin:1.15em 0 .35em}
h4{font-size:1.12rem;margin:1em 0 .3em}
a{color:var(--ac);text-underline-offset:3px}
a:hover{color:var(--hl)}
:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.side{background:rgba(7,14,24,.94);color:#fff;padding:18px 20px;border-bottom:1px solid var(--ln)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:1.45rem;font-weight:800}
.brand:hover{color:var(--hl)}
.brand small{display:block;font-size:.78rem;font-weight:400;color:#c5d2e6;letter-spacing:.02em}
button.burger{display:none;width:48px;height:48px;min-height:48px;padding:0;margin:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:transparent;border:1px solid var(--ln);border-radius:8px}
button.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
button.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
button.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
button.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
nav a{color:#fff;text-decoration:none;padding:9px 13px;border:1px solid transparent;font-size:1.02rem;border-radius:4px}
nav a:hover{background:var(--hl);color:#1a1404}
nav a[aria-current]{border-color:var(--hl);color:var(--hl)}
.main{min-width:0;display:flex;flex-direction:column;align-items:center}
main{width:min(1040px,calc(100% - 32px));margin:16px auto;padding:26px 18px 18px;background:rgba(8,16,28,.78);border:1px solid rgba(140,170,210,.16);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
@media(max-width:999px){
.side{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.brand{flex:1}
button.burger{display:inline-flex}
nav{display:none;flex:1 0 100%;flex-direction:column;margin-top:8px}
nav.is-open{display:flex}
}
@media(min-width:1000px){body{display:grid;grid-template-columns:var(--sw) 1fr}.side{position:sticky;top:0;height:100vh;padding:28px 22px;border-bottom:0;border-right:1px solid var(--ln)}nav{flex-direction:column;margin-top:32px}.brand{flex-direction:column;align-items:flex-start}main{width:min(1040px,calc(100% - 64px));margin:28px auto 20px;padding:42px 46px 28px}}
.lead{font-size:1.22rem;border-left:6px solid var(--hl);padding-left:16px;max-width:46rem;color:#f3f7fc}
p,li,dd{max-width:48rem}
.hero{display:grid;gap:22px;margin-bottom:12px;align-items:end}
@media(min-width:860px){.hero{grid-template-columns:1.15fr .85fr}}
.herofig{margin:0}
.herofig img,.shot,.wide{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--ln)}
.wide{margin:8px 0 18px}
.num{background:linear-gradient(160deg,#122033,#0b1522);color:#fff;padding:18px 18px 16px;border-radius:14px;border:1px solid var(--ln)}
.num b{display:block;font-size:2.6rem;color:var(--hl);line-height:1}
.panel{background:rgba(16,28,46,.9);border:1px solid var(--ln);border-radius:14px;padding:18px 18px 8px;margin:18px 0}
.grid{display:grid;gap:16px}
@media(min-width:760px){.grid.g3{grid-template-columns:repeat(3,1fr)}.grid.g2{grid-template-columns:1fr 1fr}}
.card{background:var(--pan);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.card h3{margin-top:0}
.pad{padding:14px 16px 16px}
.card img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.tbl{overflow-x:auto;margin:18px 0}
table{border-collapse:collapse;width:100%;background:var(--pan2);font-size:1.02rem;line-height:1.5}
th,td{border:1px solid var(--ln);padding:11px 13px;text-align:left;vertical-align:top}
thead th{background:#0d1b2e;color:#fff}
tfoot td{background:#15263c;color:var(--mut)}
caption{text-align:left;font-weight:700;padding:0 0 8px;color:#fff}
th[data-s]{cursor:pointer}
th[data-s]:hover{background:#1a3354}
button,.btn{font-size:1.02rem;font-weight:700;cursor:pointer;border-radius:8px;padding:11px 18px;border:1px solid #8d7012;background:var(--hl);color:#1c1503;min-height:46px;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:#f2cb55;color:#1c1503}
button.t{all:unset;cursor:pointer;color:var(--hl);border-bottom:1px dotted var(--hl);font:inherit}
button.t:hover{color:#fff}
button.t:focus-visible{outline:3px solid var(--hl)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.tag{padding:8px 14px;border:1px solid var(--ln);border-radius:30px;background:#0d1a2b;color:var(--ink);font-size:.98rem;min-height:42px}
.tag[aria-pressed=true]{background:var(--hl);color:#1c1503;border-color:var(--hl)}
label{display:block;font-weight:700;margin:12px 0 4px;font-family:"Trebuchet MS",sans-serif}
input,select{font:inherit;font-size:1.05rem;padding:10px 12px;border:1px solid var(--ln);border-radius:8px;width:100%;max-width:300px;background:#0b1524;color:var(--ink)}
.out{font-size:1.35rem;font-weight:800;font-family:"Trebuchet MS",sans-serif;margin-top:12px;color:var(--hl)}
details{background:var(--pan2);border:1px solid var(--ln);border-radius:10px;margin:10px 0}
summary{cursor:pointer;font-weight:700;padding:13px 16px;font-family:"Trebuchet MS",sans-serif;font-size:1.05rem}
summary:hover{color:var(--hl)}
details>div{padding:0 16px 14px}
dt{font-weight:700;font-family:"Trebuchet MS",sans-serif;margin-top:16px;font-size:1.12rem;color:#fff}
dd{margin:4px 0 0;color:var(--mut)}
dialog{border:1px solid var(--hl);border-radius:14px;max-width:min(32rem,92vw);padding:22px;background:#101c2e;color:var(--ink)}
dialog::backdrop{background:rgba(4,8,14,.72)}
footer{width:min(1040px,calc(100% - 32px));background:rgba(5,10,18,.92);margin:8px auto 24px;padding:26px 20px 30px;border:1px solid var(--ln);border-radius:18px;color:var(--mut)}
@media(min-width:1000px){footer{width:min(1040px,calc(100% - 64px));padding:30px 40px 36px}}
.fcols{display:grid;gap:18px}
@media(min-width:760px){.fcols{grid-template-columns:repeat(3,1fr)}}
footer h2{font-size:1.05rem;margin:0 0 6px;color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:4px 0}
footer a{color:var(--ac)}
address{font-style:normal}
.disc{border-top:1px solid var(--ln);padding-top:14px;margin-top:18px;max-width:64rem;color:#d5deea}
.hide{display:none}
.note{color:var(--mut);font-size:.98rem}
@media(max-width:999px){body{background-attachment:scroll,scroll,scroll}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body{background-attachment:scroll,scroll,scroll}}