/* Layout: sayfanın sonuna kadar sabit tek 3D sahne; metin bölümleri üzerinden kayar. Bilinçli tek tema, anatomide zemin açılır. */
:root{
  --bg:#22211f; --fg:#f3f0ec; --muted:#a19b94; --panel:rgba(44,42,40,.92); --rule:rgba(243,240,236,.14);
  --red:#ff5a4e; --orange:#ff9a3c; --green:#3ddc97; --blue:#4f8cff; --purple:#b07cff;
  --f-display:"Barlow","DIN Alternate","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--f-display);font-size:17px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
h1,h2,h3{margin:0;font-weight:700;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.pad{padding-inline:clamp(16px,3.2vw,48px)}
#gl{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main,footer{position:relative;z-index:2}

.nav{position:fixed;top:0;left:0;right:0;z-index:10;padding-top:env(safe-area-inset-top,0px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.logo{font-weight:800;font-size:1.45rem;text-decoration:none;letter-spacing:-.02em}
.logo i{font-style:normal;color:var(--red)}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;opacity:.8}
.nav ul a:hover{opacity:1}
.pill{background:var(--red);color:#1d1b1a!important;opacity:1!important;padding:8px 14px;border-radius:6px;font-weight:500}


.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-block:132px 72px}
.hero h1{font-size:clamp(3rem,7.4vw,6.8rem);max-width:6.5em}
.hero h1 .dot{color:var(--red)}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500;max-width:22em;margin:22px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  padding:13px 18px;border-radius:6px;text-decoration:none;border:1px solid var(--rule);background:var(--panel);transition:transform .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--muted)}
.btn.primary{background:var(--red);border-color:var(--red);color:#1d1b1a}
@media (max-width:760px){.hero{padding-bottom:96px}}

/* service sections: tall, with sticky content */
.svc{height:170vh}
.svc-in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-block:100px 92px}
.svc .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--c);display:block;margin-bottom:14px}
.svc h2{font-size:clamp(2.4rem,5.4vw,4.8rem);color:var(--c)}
.svc .sub{font-weight:500;font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:21em;margin:14px 0 0}
.svc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.svc ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--rule);min-width:min(280px,100%);display:grid;gap:8px}
.svc li{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em}
.svc li::before{content:"→";margin-right:12px;color:var(--c)}
.spec{background:var(--panel);border-radius:10px;padding:16px 18px;font-family:var(--f-mono);font-size:.8rem;min-width:min(290px,100%);margin:0 0 52px;
  display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.spec dt{color:var(--muted)}.spec dd{margin:0;color:var(--c);text-align:right;font-variant-numeric:tabular-nums}
.spec .cap{grid-column:1/-1;color:var(--muted);opacity:.6;font-size:.68rem;margin-top:6px}
@media (max-width:760px){.spec{display:none}.svc-in{background:linear-gradient(var(--bg) 0,transparent 38%,transparent 70%,var(--bg) 100%)}}

/* anatomy */
#anatomi{height:330vh}
.an-in{position:sticky;top:0;height:100svh;overflow:hidden}
.an-head{position:absolute;top:96px;left:0;right:0}
.an-head h2{font-size:clamp(2.2rem,4.6vw,4.2rem)}
.an-head p{font-weight:500;max-width:24em;margin:14px 0 0}
#leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lbl{position:absolute;font-family:var(--f-mono);font-size:.8rem;white-space:nowrap;display:flex;flex-direction:column;line-height:1.35}
.lbl small{font-size:.68rem;opacity:.6}
.lbl.L{left:clamp(16px,3.2vw,48px)}
.lbl.R{right:clamp(16px,3.2vw,48px);text-align:right;align-items:flex-end}
@media (max-width:760px){.lbl{font-size:.68rem}.lbl small{display:none}}

.block{padding-block:clamp(96px,14vw,180px)}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-top h2{font-size:clamp(2.4rem,6vw,5rem)}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.plist li{display:grid;grid-template-columns:1fr auto auto;gap:8px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);transition:padding .3s,color .3s}
.plist li:hover{padding-left:14px;color:var(--pc)}
.plist h3{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:600}
@media (max-width:760px){.plist li{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:28px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats strong{display:block;font-size:clamp(2.6rem,6vw,4.8rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stats strong sup{font-size:.4em;color:var(--red);vertical-align:top;margin-left:4px}
.stats span{color:var(--muted);font-weight:500}
.contact h2{font-size:clamp(2.8rem,8vw,7rem);max-width:9em}
.contact h2 i{font-style:normal;color:var(--red)}
.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media (max-width:760px){.cinfo{grid-template-columns:1fr}}
.cinfo div{border-top:1px solid var(--rule);padding-top:12px}
.cinfo b{display:block;font-weight:600;font-size:1.2rem;margin-top:4px}
footer .pad{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:28px 96px;border-top:1px solid var(--rule)}

.ruler{position:fixed;z-index:9;right:clamp(16px,3.2vw,48px);bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100% - 32px));height:34px;border-radius:8px;
  background:#2c2a28 repeating-linear-gradient(90deg,rgba(243,240,236,.28) 0 1px,transparent 1px 9px) center/calc(100% - 28px) 10px no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ruler::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(243,240,236,.5) 0 1px,transparent 1px 45px) center/calc(100% - 28px) 16px no-repeat}
.ruler i{position:absolute;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--red);left:14px;z-index:1}
.ruler span{position:absolute;right:-2px;top:-20px;font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}

.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}
.split.in .c{animation:cin .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 18ms)}
@keyframes cin{from{opacity:0;transform:translateX(.45em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.split.in .c{animation:none}}


.lede{margin:10px 0 0;font-weight:500;color:var(--muted)}.lede b{color:var(--fg);font-weight:700}
.mini{font-size:1.1rem;font-weight:600;margin:64px 0 18px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--muted)}
.matrix-wrap{overflow-x:auto;background:var(--panel);border-radius:12px;padding:8px 6px}
.matrix{width:100%;min-width:620px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.matrix th{font-family:var(--f-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:10px 12px}
.matrix th .d{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;background:var(--c)}
.matrix td{padding:4px 6px}
.matrix td.y{font-weight:700;font-size:1.15rem;padding-left:12px;width:70px}
.matrix td.sum{font-family:var(--f-mono);color:var(--muted);text-align:right;padding-right:14px;font-size:.8rem}
.cell{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;transition:background .2s}
.cell:hover,.cell:focus-visible{background:rgba(243,240,236,.07)}
.cell b{font-weight:600;min-width:2ch;text-align:right}
.cell i{display:block;height:6px;border-radius:3px;background:var(--c);opacity:.85}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;background:var(--panel);border-radius:12px;overflow:hidden;transition:transform .25s}
.card:hover,.card:focus-visible{transform:translateY(-4px)}
.card .ph{aspect-ratio:4/3;max-width:100%;position:relative;background:#1b1a19;overflow:hidden}
.card .ph canvas{width:100%;height:100%;display:block}
.card .bd{padding:14px 16px 18px;display:grid;gap:6px}
.card h4{margin:0;font-size:1.2rem;font-weight:600;line-height:1.15}
.chip-c{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.post-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:10px;padding:22px 22px 24px;border-top:2px solid var(--c);background:var(--panel);border-radius:0 0 12px 12px;transition:transform .25s}
.post-card:hover,.post-card:focus-visible{transform:translateY(-4px)}
.post-card h4{margin:0;font-size:1.35rem;font-weight:600;line-height:1.15;text-wrap:balance}
.post-card p{margin:0;color:var(--muted);font-weight:500}

/* full-screen views */
.view{--bg:#22211f;--fg:#f3f0ec;--muted:#a19b94;--rule:rgba(243,240,236,.14);position:fixed;inset:0;z-index:30;background:var(--bg);color:var(--fg);overflow-y:auto;overscroll-behavior:contain}
.vbar{position:sticky;top:0;z-index:2;background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) 16px;border-bottom:1px solid var(--rule)}
.vbody{padding-block:36px 120px;max-width:1280px;margin:0 auto}
.vbody h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.ctrls{display:grid;gap:14px;margin:28px 0 8px;position:sticky;top:73px;z-index:1;background:var(--bg);padding-block:12px}
.ctrl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctrl-row .lab{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;width:72px}
.search{flex:1;min-width:220px;font:inherit;font-size:1rem;padding:12px 14px;border-radius:8px;border:1px solid var(--rule);background:#2a2826;color:var(--fg)}
.sel{font:inherit;font-size:.9rem;padding:11px 12px;border-radius:8px;border:1px solid var(--rule);background:#2a2826;color:var(--fg)}
.chip{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;padding:7px 11px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip .d{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}
.chip small{color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--fg);color:#1d1b1a;border-color:var(--fg)}
.chip[aria-pressed="true"] small{color:#55504a}
.rcount{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);margin:14px 0 8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.linkbtn{all:unset;cursor:pointer;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.ygroup h2{font-size:1.6rem;font-weight:700;display:flex;align-items:baseline;gap:12px;padding:30px 0 10px;border-bottom:1px solid var(--rule)}
.ygroup h2 span{font-family:var(--f-mono);font-size:.75rem;font-weight:400;color:var(--muted)}
details.prow{border-bottom:1px solid var(--rule)}
details.prow summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:120px minmax(0,1fr) 150px 170px 130px 18px;gap:14px;align-items:center;padding:14px 4px}
details.prow summary::-webkit-details-marker{display:none}
details.prow summary:hover{background:rgba(243,240,236,.04)}
.prow .ref{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.prow .nm{font-weight:600;font-size:1.05rem;min-width:0}
.prow .cat{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c);display:flex;gap:8px;align-items:center}
.prow .cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.prow .loc,.prow .sc{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.prow .chev{transition:transform .2s;color:var(--muted)}
details.prow[open] .chev{transform:rotate(90deg)}
.pdet{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;padding:4px 4px 26px 138px}
.pdet p{margin:0;max-width:60ch}
.pdet dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-family:var(--f-mono);font-size:.78rem}
.pdet dt{color:var(--muted)}.pdet dd{margin:0}
@media (max-width:860px){
  details.prow summary{grid-template-columns:minmax(0,1fr) 18px;gap:4px 12px}
  .prow .ref,.prow .cat,.prow .loc,.prow .sc{grid-column:1}
  .prow .nm{grid-column:1;grid-row:1}.prow .chev{grid-column:2;grid-row:1}
  .prow .ref{display:none}
  .pdet{grid-template-columns:1fr;padding-left:4px}
  .ctrls{position:static}
}
.more{display:flex;justify-content:center;margin-top:28px}
.empty{padding:48px 0;color:var(--muted)}
.article{max-width:68ch;margin:0 auto}
.article h1{font-size:clamp(2.2rem,5vw,3.8rem);margin:14px 0 18px}
.article .meta{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.article .body{font-size:1.15rem;line-height:1.7;font-weight:400;margin-top:34px}
.article .body p{margin:0 0 1.1em}
.article .body h3{font-size:1.5rem;margin:1.6em 0 .5em;font-weight:700}
.article .body ul{padding-left:1.2em;margin:0 0 1.1em}
.article .note{margin-top:48px;padding-top:16px;border-top:1px solid var(--rule)}
.blogtop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
body.view-open{overflow:hidden}
[hidden]{display:none!important}


.prow .med{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;display:flex;gap:6px;justify-content:flex-end}
.badge{border:1px solid var(--rule);border-radius:4px;padding:2px 6px;color:var(--muted);white-space:nowrap}
.badge.b3d{border-color:var(--c);color:var(--c)}
details.prow summary{grid-template-columns:120px minmax(0,1fr) 140px 160px 130px 92px 18px}
@media (max-width:860px){details.prow summary{grid-template-columns:minmax(0,1fr) 18px}.prow .med{grid-column:1;justify-content:flex-start}}
.open-proj{margin-top:14px}
.pv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.pv-head h1{font-size:clamp(2rem,4.6vw,3.6rem)}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.pv-grid{grid-template-columns:1fr}}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:6px;border:1px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer}
.tab[aria-selected="true"]{background:var(--fg);color:#1d1b1a;border-color:var(--fg)}
.tab:disabled{opacity:.35;cursor:not-allowed}
.stage-box{position:relative;aspect-ratio:16/10;max-width:100%;background:#1a1918;border-radius:12px;overflow:hidden}
.stage-box canvas{width:100%;height:100%;display:block}
.stage-box .hint{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:.68rem;color:var(--muted);pointer-events:none}
.stage-box .ph-note{position:absolute;right:14px;top:12px;font-family:var(--f-mono);font-size:.66rem;color:var(--muted);background:rgba(0,0,0,.4);padding:4px 8px;border-radius:4px}
#pv3d{cursor:grab;touch-action:none}#pv3d:active{cursor:grabbing}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.thumbs button{all:unset;cursor:pointer;flex:0 0 96px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;outline:2px solid transparent;outline-offset:2px;background:#1a1918}
.thumbs button[aria-current="true"]{outline-color:var(--c)}
.thumbs canvas{width:100%;height:100%;display:block}
.pv-side{background:var(--panel);border-radius:12px;padding:20px 22px;display:grid;gap:16px}
.pv-side p{margin:0}
.pv-side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-family:var(--f-mono);font-size:.8rem}
.pv-side dt{color:var(--muted)}.pv-side dd{margin:0;text-align:right}
.pv-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}


.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.head-col{position:sticky;top:90px;display:grid;gap:18px}
@media (max-width:900px){.head-col{position:static}}
.head-box{position:relative;aspect-ratio:1;max-width:100%;background:radial-gradient(circle at 50% 45%,#2f2c29,#1c1b1a 70%);border-radius:16px;overflow:hidden}
.head-box canvas{width:100%;height:100%;display:block}
.ph-note2{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}
.stats2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats2 div{border-top:1px solid var(--rule);padding-top:10px}
.stats2 strong{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stats2 span{color:var(--muted);font-weight:500;font-size:.9rem}
.cv h2{font-size:clamp(2.6rem,6vw,5rem);margin-top:10px}
.cv .role{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:12px 0 0}
.cv .bio{font-size:1.18rem;font-weight:500;max-width:36em;margin:22px 0 0}
.cv-block{margin-top:40px}
.cv-block h3{font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.cv-block.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:560px){.cv-block.two{grid-template-columns:1fr}}
.tl{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:0 0 18px 20px;position:relative}
.tl li::before{content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.tl .yr{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);padding-top:3px}
.tl b{display:block;font-weight:600;font-size:1.1rem}
.tl div span{color:var(--muted);font-weight:500}
@media (max-width:560px){.tl li{grid-template-columns:1fr;gap:2px}}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--f-mono);font-size:.74rem;border:1px solid var(--rule);border-radius:999px;padding:6px 11px}
.plain{margin:0;padding-left:1.1em;display:grid;gap:4px;font-weight:500}
.contact2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:900px){.contact2{grid-template-columns:1fr}}
.contact2 h2{font-size:clamp(2.6rem,6.4vw,5.6rem);margin-top:10px}
.contact2 h2 i{font-style:normal;color:var(--red)}
.cinfo2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
@media (max-width:560px){.cinfo2{grid-template-columns:1fr}}
.cinfo2 div{border-top:1px solid var(--rule);padding-top:12px;display:grid;gap:4px;justify-items:start}
.cinfo2 b{font-weight:600;font-size:1.15rem;user-select:all}
.copy{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(--rule);color:var(--muted);border-radius:4px;padding:3px 8px;cursor:pointer}
.cform{background:var(--panel);border-radius:14px;padding:24px;display:grid;gap:14px}
.cform label{display:grid;gap:6px;min-width:0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform select,.cform textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-family:var(--f-display);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--fg);background:#1f1e1c;border:1px solid var(--rule);border-radius:8px;padding:11px 12px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--red);outline-offset:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.fnote{margin:0;font-family:var(--f-mono);font-size:.75rem;color:var(--muted);min-height:1.2em}

/* ---- multi-page additions ---- */
.chip{text-decoration:none}
.chip[aria-current="true"]{background:var(--fg);color:#1d1b1a;border-color:var(--fg)}
.chip[aria-current="true"] small{color:#55504a}
.page .nav{background:var(--bg);border-bottom:1px solid var(--rule)}
.page main{padding-top:76px}
.nav ul a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.page .vbody{padding-block:48px 120px}
.ctrls{top:76px}
.back{display:inline-block;margin-bottom:18px;text-decoration:none}
.back:hover{color:var(--fg)}
.go{margin-top:24px;border-color:var(--c);color:var(--fg)}
.go span{color:var(--c)}
.cat-h{font-size:clamp(2rem,4vw,3rem);margin:80px 0 0;scroll-margin-top:90px}
#katalog{scroll-margin-top:80px}
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:48px 0 36px}
@media (max-width:860px){.hub{grid-template-columns:1fr}}
.hub a{display:grid;gap:8px;padding:22px;background:var(--panel);border-radius:12px;text-decoration:none;transition:transform .25s}
.hub a:hover,.hub a:focus-visible{transform:translateY(-4px)}
.hub b{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1}
.hub span:last-child{color:var(--muted);font-weight:500}
#cta h2{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:10em}
#cta h2 i{font-style:normal;color:var(--red)}
.post-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--fg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.ch1{font-size:clamp(2.6rem,6.4vw,5.6rem);margin-top:10px}
.ch1 i{font-style:normal;color:var(--red)}
.hub{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hub{grid-template-columns:1fr}}
.prep{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:p}
@media (max-width:900px){.prep{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.prep{grid-template-columns:1fr}}
.prep li{border-top:1px solid var(--rule);padding-top:14px;display:grid;gap:6px;align-content:start;counter-increment:p}
.prep li::before{content:counter(p,decimal-leading-zero);font-family:var(--f-mono);font-size:.72rem;color:var(--red)}
.prep b{font-weight:600;font-size:1.1rem}
.prep span{color:var(--muted);font-weight:500}

/* header: solid when scrolled, mobile menu */
.nav{transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.solid{background:var(--bg);border-bottom-color:var(--rule)}
.nav-in{gap:14px}.nav-in .logo{margin-right:auto}
.menu-btn{display:none;width:42px;height:38px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform .2s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1320px){.nav ul li:not(:last-child){display:none}.menu-btn{display:flex}}
.mnav{background:var(--bg);border-top:1px solid var(--rule);max-height:calc(100svh - 76px);overflow:auto}
.mnav:not([hidden]){animation:mdown .25s cubic-bezier(.2,.8,.2,1)}
@keyframes mdown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav-in{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;padding-block:22px 34px}
@media (max-width:560px){.mnav-in{grid-template-columns:1fr}}
.mnav h3{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.mnav ul{list-style:none;margin:0;padding:0;display:block}
.nav .mnav ul li{display:block}
.nav .mnav a{display:block;font-family:var(--f-display);font-size:1.7rem;font-weight:600;text-transform:none;letter-spacing:-.01em;text-decoration:none;padding:6px 0;opacity:1}
.nav .mnav a:hover,.nav .mnav a[aria-current="page"]{color:var(--red);text-decoration:none}
.ruler{transition:opacity .3s}
.ruler.off{opacity:0;pointer-events:none}