/* ===========================================================================
   {PROJE ADI} / {tek cümlelik iş tanımı}

   Earth Dreams tasarım dili (bkz. ~/.claude/skills/earth-dreams-design).
   Soğuk nötr zemin (#070809) üstünde sıcak mürekkep (#ede9e0), 1px hairline
   sistem, 2px radius, bölüm başına --accent. Tipografi kuralı (Refik, Slack
   15 Eyl 2026): Foundry Gridnik konuşan her şey, GT Pressura Mono Text ölçen
   her şey.

   DEĞİŞTİR: yalnızca --act1..3 (ve gerekirse --epi). Zemin, mürekkep ve
   hairline'a dokunma.
   =========================================================================== */

/* Stüdyo fontları (lisanslı, git'e girmez). Tam set bu skill'in fonts/ klasöründe;
   projeye `cp -r ~/.claude/skills/earth-dreams-design/fonts .` ile kopyala, .gitignore'a ekle.
   Gridnik: Light 300, Regular 400, Medium 500, Bold 700. Pressura Mono Text: tek kesim, 350. */
@font-face{font-family:"Foundry Gridnik"; src:url("fonts/FoundryGridnik-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"Foundry Gridnik"; src:url("fonts/FoundryGridnik-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Foundry Gridnik"; src:url("fonts/FoundryGridnik-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Foundry Gridnik"; src:url("fonts/FoundryGridnik-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"GT Pressura Mono"; src:url("fonts/GTPressuraMono-Text.woff2") format("woff2"); font-weight:300 500; font-style:normal; font-display:swap}

:root{
  --bg:#070809; --bg-2:#0c0e10; --bg-3:#121517;
  --ink:#ede9e0; --ink-2:#a9aba6; --ink-3:#6f7371;
  --line:#1c2022; --line-2:#262b2e;

  /* DEĞİŞTİR: act accent'leri konudan gelir. Kaynak: teal / turuncu / altın. */
  --act1:#63d3c9; --act2:#ff7a4a; --act3:#ddb16b; --epi:#f1f4f6;
  --accent:var(--act1);

  --serif:"Foundry Gridnik", "Helvetica Neue", Arial, sans-serif;  /* display rolü */
  --sans:"Foundry Gridnik", "Helvetica Neue", Arial, sans-serif;
  --mono:"GT Pressura Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --max:1180px; --pad:clamp(18px, 4vw, 48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

*{box-sizing:border-box; font-synthesis:style} /* Gridnik italik kesimi yok: eğik voice satırları için sentetik italik açık, sentetik bold kapalı */
html{scroll-behavior:smooth; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
canvas{display:block}
img{max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
section, .ch, .panel{scroll-margin-top:57px}

/* ---- temel yardımcılar ---- */
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.eyebrow{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.eyebrow b{color:var(--ink); font-weight:500}
.eyebrow i{width:26px; height:1px; background:var(--ink-3); display:inline-block}

/* ---- üst bar ---- */
.bar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:56px; gap:16px}
.bar .brand{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.bar .brand span{color:var(--ink-3)}
.tc{font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums; letter-spacing:.06em; color:var(--ink); display:flex; align-items:baseline; gap:10px}
.tc small{font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase}
.tc .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; transform:translateY(-2px)}
.bar .right{text-align:right; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:760px){ .bar .right{display:none} .bar .brand span{display:none} .bar .wrap{grid-template-columns:1fr auto} }

/* ---- hero ---- */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(28px,4vw,56px); border-bottom:1px solid var(--line)}
.hero .top{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,5vw,72px); align-items:end; margin-bottom:clamp(22px,3vw,40px)}
.hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(50px,8vw,124px); line-height:.95; letter-spacing:-.01em; margin:14px 0 0}
.hero h1 em{font-style:italic; color:var(--ink-2)}
.hero .question{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(24px,2.6vw,38px); line-height:1.15; letter-spacing:-.015em; color:var(--ink-2); margin:22px 0 0; max-width:18em; text-wrap:balance}
.hero .question::before{content:"– "; color:var(--ink-3)} /* en dash önek; em dash kullanılmaz */
.hero .lede{font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--ink-2); max-width:36em}
.hero .lede b{color:var(--ink); font-weight:500}
.hero .lede .wall{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px}
.hero .meta div{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.hero .meta div b{display:block; color:var(--ink); font-weight:500; margin-top:2px}
@media (max-width:900px){ .hero .top{grid-template-columns:1fr} }

/* ---- bölüm başlığı (5/7 head) ---- */
.sec{padding:clamp(48px,7vw,96px) 0; border-bottom:1px solid var(--line)}
.sec .head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); align-items:end; margin-bottom:28px}
.sec h2{font-family:var(--serif); font-weight:300; font-size:clamp(32px,4vw,54px); line-height:1.02; letter-spacing:-.006em}
.sec .head p{color:var(--ink-2); max-width:62ch; font-size:17px}
.sec .head p b{color:var(--ink); font-weight:500}
@media (max-width:900px){ .sec .head{grid-template-columns:1fr} }

/* ---- act & chapter ---- */
.act{padding-top:clamp(56px,8vw,110px)}
.act-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,40px); align-items:end; padding-bottom:26px; border-bottom:1px solid var(--line-2)}
.act-head .num{font-family:var(--serif); font-size:clamp(64px,9vw,128px); line-height:.8; font-weight:300; color:var(--accent); letter-spacing:-.012em}
.act-head h2{font-family:var(--serif); font-size:clamp(34px,4.6vw,64px); line-height:1; font-weight:300; letter-spacing:-.006em}
.act-head h2 em{font-style:italic; color:var(--ink-2)}
.act-head .sub{display:flex; gap:22px; flex-wrap:wrap; margin-top:12px}
.act-head .sub span{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.act-head .sub span b{color:var(--accent); font-weight:500}
.act-head .thesis{grid-column:1 / -1; color:var(--ink-2); max-width:62ch; font-size:17px}
.act-head .feel{grid-column:1 / -1; margin-top:-6px; font-size:14px; color:var(--ink-2); max-width:62ch}
.act-head .feel span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.act-head .feel b{color:var(--accent); font-weight:500}

.ch{padding:clamp(44px,6vw,84px) 0; border-bottom:1px solid var(--line)}
.ch .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px); align-items:start}
.act[data-side="right"] .ch .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.act[data-side="right"] .ch .wrap .vis{order:2}
.vis{position:sticky; top:76px}
.vis .pig{position:relative; aspect-ratio:4/5; width:100%; background:var(--bg-2); border:1px solid var(--line); overflow:hidden}
.vis .pig canvas, .vis .pig img{width:100%; height:100%; object-fit:cover; display:block}
.vis .pig .tag{position:absolute; left:10px; top:10px; display:flex; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:rgba(7,8,9,.72); padding:4px 8px; border-radius:2px}
.vis .pig .tag b{color:var(--ink); font-weight:500}
.vis .pig .mode{position:absolute; right:10px; bottom:10px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:rgba(7,8,9,.72); padding:4px 8px; border-radius:2px}
.arrive{margin-top:22px; padding-left:clamp(16px,2vw,24px); border-left:1px dashed var(--line-2); color:var(--ink-3); font-size:14.5px; line-height:1.55; max-width:62ch}
.arrive b{color:var(--ink-2); font-weight:500; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px}

.txt .kicker{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap}
.txt .kicker .n{font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--accent)}
.txt .kicker .hour{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums}
.txt .kicker .time{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.txt .kicker .where{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.txt h3{font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-.015em; margin:10px 0 6px}
.txt .title{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(17px,1.5vw,20px); color:var(--ink-2)}
.txt p.body{color:var(--ink-2); max-width:62ch; font-size:17px}
.txt p.body + p.body{margin-top:14px}
.txt p.body b{color:var(--ink); font-weight:500}

.voice{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(28px,3.4vw,46px); line-height:1.12; letter-spacing:-.015em; margin:28px 0 26px; color:var(--ink); text-wrap:balance; position:relative; padding-left:clamp(16px,2vw,24px)}
.voice::before{content:""; position:absolute; left:0; top:.2em; bottom:.15em; width:2px; background:var(--accent)}

/* chapter metin kategorileri: script · why · data */
.txt .script, .txt .why, .txt .data{max-width:62ch}
.txt .script h4, .txt .why h4, .txt .data h4{margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.txt .script{margin-top:24px; padding-left:clamp(16px,2vw,24px); border-left:2px solid var(--accent)}
.txt .script h4{color:var(--accent)}
.txt .script p{color:var(--ink); font-size:17.5px; line-height:1.55}
.txt .script p i{color:var(--ink-3)}
.txt .why{margin-top:30px}
.txt .why h4{color:var(--ink-3); margin-bottom:10px}
.txt .data{margin-top:28px; background:var(--bg-2); border:1px solid var(--line); padding:16px 20px 4px}
.txt .data h4{color:var(--accent); margin-bottom:2px}
.txt .data dl{margin:0}
.txt .data .row{display:grid; grid-template-columns:84px minmax(0,1fr); gap:14px; padding:11px 0; border-top:1px solid var(--line)}
.txt .data .row:first-child{border-top:0}
.txt .data dt{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:3px}
.txt .data dd{margin:0; color:var(--ink-2); font-size:15px; line-height:1.55}
.txt .data dd b{color:var(--ink); font-weight:500}
@media (max-width:480px){ .txt .data .row{grid-template-columns:1fr; gap:3px} }

.room{margin-top:26px; padding:18px 20px; background:var(--bg-2); border:1px solid var(--line)}
.room h4{margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
.room p{color:var(--ink-2); font-size:15.5px}
.room p b{color:var(--ink); font-weight:500}

@media (max-width:900px){
  .ch .wrap, .act[data-side="right"] .ch .wrap{grid-template-columns:1fr}
  .act[data-side="right"] .ch .wrap .vis{order:0}
  .vis{position:static}
  .vis .pig{aspect-ratio:16/10}
}

/* ---- çip & etiket ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.chips .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); width:100%; margin-bottom:-2px}
.chip{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); border:1px solid var(--line-2); padding:4px 8px; border-radius:2px; overflow-wrap:anywhere; max-width:100%}
.chip.ext{border-style:dashed}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tags span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); padding:4px 8px; border-radius:2px}
.tags span.pass{border-color:var(--accent); color:var(--accent)}
.tags .lbl{border:0; padding:4px 0; color:var(--ink-3)}

/* ---- görsel figürleri ---- */
img[data-img]{background:var(--bg-2)}
.band{margin:0 0 clamp(22px,3vw,34px); grid-column:1 / -1}
.band img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block; border:1px solid var(--line); background:var(--bg-2)}
.band figcaption{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.band figcaption b{color:var(--ink-2); font-weight:500}
@media (max-width:760px){ .band img{aspect-ratio:16/10} }

.concepts{grid-column:1 / -1; margin:-14px 0 clamp(22px,3vw,34px)}
.concepts .lbl{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.concepts .lbl b{color:var(--accent); font-weight:500}
.concepts .grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0}
.concepts[data-n="2"] .grid, .concepts[data-n="4"] .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.concepts figure{margin:0; min-width:0}
.concepts img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border:1px solid var(--line); background:var(--bg-2); cursor:zoom-in; transition:border-color .2s}
.concepts img:hover{border-color:var(--ink-3)}
@media (max-width:760px){ .concepts .grid, .concepts[data-n="2"] .grid, .concepts[data-n="4"] .grid{grid-template-columns:1fr} }

.strip5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:22px}
.strip5 a{display:block; text-decoration:none; color:inherit}
.strip5 figure{margin:0}
.strip5 img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border:1px solid var(--line); background:var(--bg-2)}
.strip5 a:hover img{border-color:var(--ink-3)}
.strip5 figcaption{margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); line-height:1.4}
.strip5 figcaption b{color:var(--ink-2); font-weight:500; display:block}
@media (max-width:900px){ .strip5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .strip5{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- hairline kutu gridleri ---- */
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px}
.three > div{border:1px solid var(--line); padding:18px 18px 20px; background:var(--bg-2)}
.three h4{margin:0 0 8px; font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; line-height:1.1}
.three p{font-size:14.5px; color:var(--ink-2)}
.three .src{margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.spec{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px}
.spec > div{border:1px solid var(--line); padding:18px; background:var(--bg-2)}
.spec h4{margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.spec ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.spec li{font-size:15px; color:var(--ink-2); display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline}
.spec li b{color:var(--ink); font-weight:500; font-size:14px}
.spec li i{font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.pipe{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:40px}
.pipe > div{border:1px solid var(--line); padding:16px 18px; background:var(--bg-2); position:relative}
.pipe > div + div::before{content:"→"; position:absolute; left:-13px; top:14px; color:var(--ink-3); font-family:var(--mono); background:var(--bg); padding:0 2px}
.pipe h4{margin:0 0 6px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.pipe p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.pipe p b{color:var(--ink); font-weight:500}
@media (max-width:900px){ .three, .spec{grid-template-columns:1fr} .pipe{grid-template-columns:1fr 1fr} .pipe > div + div::before{display:none} }
@media (max-width:560px){ .pipe{grid-template-columns:1fr} }

/* ---- sayılar & beat listesi ---- */
.numbers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px}
.numbers div{border:1px solid var(--line); padding:14px 16px; background:var(--bg-2)}
.numbers b{display:block; font-family:var(--mono); font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.numbers span{font-size:13.5px; color:var(--ink-2); line-height:1.45; display:block; margin-top:4px}
.numbers i{font-style:normal; display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:560px){ .numbers{grid-template-columns:1fr} }
.beats{display:grid; gap:0}
.beat{display:grid; grid-template-columns:64px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line)}
.beat:last-child{border-bottom:1px solid var(--line)}
.beat .t{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums; padding-top:3px}
.beat p{color:var(--ink-2); font-size:15.5px}
.beat p b{color:var(--ink); font-weight:500}

/* ---- kapak deck: full-bleed paneller ---- */
.panels{display:grid; border-top:1px solid var(--line)}
.panel{position:relative; min-height:min(88vh,900px); display:grid; align-items:end; overflow:hidden; background:#000; border-bottom:1px solid var(--line)}
.panel > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:.92; transform:scale(1.05); transition:transform 2.2s var(--ease)}
.panel.rv-in > img{transform:scale(1)}
.panel .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(7,8,9,.985) 0%, rgba(7,8,9,.9) 24%, rgba(7,8,9,.62) 46%, rgba(7,8,9,.22) 66%, rgba(7,8,9,.03) 84%, rgba(7,8,9,0) 100%)}
.panel .big{position:absolute; right:var(--pad); top:clamp(18px,3vw,40px); font-family:var(--mono); font-size:clamp(64px,11vw,150px); line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.055); pointer-events:none; user-select:none}
.panel .txt{position:relative; width:100%; padding-top:clamp(140px,26vh,260px); padding-bottom:clamp(76px,9vw,112px); display:grid; grid-template-columns:min(760px,100%); justify-content:start; text-shadow:0 1px 18px rgba(0,0,0,.55)}
.panel[data-side="right"] .txt{justify-content:end}
.panel .n{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.panel .n span{color:var(--ink-3)}
.panel h3{margin:12px 0 18px; font-family:var(--serif); font-weight:300; font-size:clamp(36px,4.8vw,66px); line-height:.98; letter-spacing:-.012em; color:var(--ink)}
.panel p{max-width:58ch; font-size:clamp(16px,1.25vw,18.5px); line-height:1.6; color:var(--ink-2)}
.panel .src{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.panel .src a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.panel .src a:hover{color:var(--ink)}
.panel .inset{position:absolute; right:var(--pad); top:9%; width:min(30vw,460px); margin:0; z-index:1; border:1px solid var(--line-2); background:#000; box-shadow:0 30px 80px rgba(0,0,0,.55)}
@media (max-width:760px){
  .panel{min-height:0; display:block}
  .panel > img{position:relative; display:block; aspect-ratio:4/5; height:auto; transform:none; opacity:1}
  .panel .shade{inset:0 0 auto 0; aspect-ratio:4/5; height:auto}
  .panel .big, .panel .inset{display:none}
  .panel .txt{padding-top:0; margin-top:-96px; padding-bottom:44px}
  .panel[data-side="right"] .txt{justify-content:start}
  .panel h3{font-size:clamp(32px,9vw,44px)}
}

/* ---- footer ---- */
footer{padding:36px 0 64px}
footer .wrap{display:grid; grid-template-columns:1fr 1fr; gap:32px}
footer h4{margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
footer p, footer li{font-size:13.5px; color:var(--ink-3); line-height:1.6}
footer ul{margin:0; padding-left:16px}
footer li b{color:var(--ink-2); font-weight:500}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr} }

/* ---- hareket & navigasyon ---- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .75s ease, transform .75s var(--ease)}
.rv.rv-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} .panel > img{transition:none} }

.snav{position:fixed; right:18px; bottom:18px; z-index:30; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border:1px solid var(--line-2); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:3px}
.snav .lab{display:flex; align-items:baseline; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:6px; max-width:300px; white-space:nowrap; overflow:hidden}
.snav .lab b{color:var(--ink); font-weight:500}
.snav .lab i{font-style:normal}
.snav .lab span{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis}
.snav button{font-family:var(--mono); font-size:14px; line-height:1; width:32px; height:32px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); border-radius:2px; transition:border-color .2s, color .2s}
.snav button:hover{border-color:var(--ink-3)}
.snav button:disabled{opacity:.35; cursor:default}
@media (max-width:640px){ .snav{right:12px; left:12px; bottom:12px; justify-content:space-between} .snav .lab{max-width:none; flex:1} }

/* ---- chart bloğu (charts.js ile) ---- */
.chart{margin-top:28px}
.chart .ct{display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px}
.chart .ct h4{margin:0; font-size:15px; font-weight:500; color:var(--ink)}
.chart .ct span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.chart .plot{position:relative}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .tip{position:absolute; pointer-events:none; background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink); font-family:var(--mono); font-size:12px; padding:5px 8px; border-radius:2px; transform:translate(-50%,-100%); white-space:nowrap; display:none}
.chart .tip b{color:var(--ink); font-weight:500}
.chart .cap{margin-top:8px; font-size:13.5px; color:var(--ink-3); line-height:1.5; max-width:62ch}
.chart .cap b{color:var(--ink-2); font-weight:500}
.chart details{margin-top:6px}
.chart summary{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); cursor:pointer; list-style:none; display:inline-block; border-bottom:1px solid var(--line-2)}
.chart summary::-webkit-details-marker{display:none}
.chart .tbl{max-height:240px; overflow:auto; margin-top:8px; border:1px solid var(--line)}
.chart table{border-collapse:collapse; width:100%; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums}
.chart td,.chart th{padding:4px 10px; border-bottom:1px solid var(--line); text-align:right; color:var(--ink-2)}
.chart th{color:var(--ink-3); font-weight:400; position:sticky; top:0; background:var(--bg-2)}
.chart td:first-child,.chart th:first-child{text-align:left}

/* ---- zaman çizelgesi (score): yatay kaydıran SVG şerit + legend ---- */
.score{padding:clamp(36px,5vw,64px) 0; border-bottom:1px solid var(--line)}
.score .head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.score h2{font-size:clamp(22px,2.2vw,28px); font-weight:500; letter-spacing:-.01em}
.score .head p{color:var(--ink-2); max-width:52ch; font-size:15.5px}
.score .clock{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.score .strip{overflow-x:auto; padding-bottom:6px}
.score .strip > div{min-width:820px}
.score svg{display:block; width:100%; height:auto}
.score .legend{display:flex; gap:22px; flex-wrap:wrap; margin-top:10px}
.score .legend span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.score .legend i{width:14px; height:3px; display:inline-block; border-radius:2px}

/* ---- metin blokları: wall text, alıntı, anahtar/değer satırları, kapanış ---- */
.wall-text{border:1px solid var(--line); background:var(--bg-2); padding:22px 24px; margin-bottom:22px}
.wall-text .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.wall-text p{font-family:var(--serif); font-weight:300; font-size:clamp(19px,1.9vw,25px); line-height:1.4; color:var(--ink); max-width:70ch; margin:0}
.quote{font-family:var(--serif); font-weight:300; font-size:clamp(18px,1.6vw,22px); line-height:1.5; color:var(--ink-2); max-width:62ch}
.quote p + p{margin-top:16px}
.quote b{color:var(--ink); font-weight:400}
.premise{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.premise h3{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.premise p{color:var(--ink-2); font-size:16.5px}
.premise p b{color:var(--ink); font-weight:500}
@media (max-width:820px){ .premise{grid-template-columns:1fr} }
.layers{display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line-2)}
.layer{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line)}
.layer .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:4px}
.layer .k b{display:block; color:var(--ink); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:none; font-family:var(--sans); margin-top:2px}
.layer p{color:var(--ink-2); font-size:15.5px}
.layer p b{color:var(--ink); font-weight:500}
@media (max-width:900px){ .layer{grid-template-columns:1fr; gap:6px} }
.beat .t{font-size:13px; letter-spacing:.06em; color:var(--ink-3)}
.beat h4{margin:0 0 4px; font-size:16px; font-weight:500}
.final{margin-top:34px}
.final .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.final .setup{font-family:var(--serif); font-weight:300; font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); line-height:1.5; margin-bottom:12px; max-width:34em}
.final .line{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(26px,3vw,40px); line-height:1.15; letter-spacing:-.015em; text-wrap:balance}
.final .alt{margin-top:18px; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(19px,2vw,24px); color:var(--ink-2); line-height:1.3}
.final .alt small{display:block; font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.final .notes{margin-top:30px; padding-top:22px; border-top:1px solid var(--line)}
.final .notes small{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.final .notes ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.final .notes li{font-size:14px; line-height:1.55; color:var(--ink-2); padding-left:16px; position:relative}
.final .notes li::before{content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.final .notes li b{color:var(--ink); font-weight:500}
.epi{--accent:var(--epi)}
.cond{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.cond span{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; border:1px solid var(--line-2); padding:5px 9px; border-radius:2px; color:var(--ink-2)}
.cond span b{color:var(--ink); font-weight:500; margin-right:6px}

/* ---- tablo ---- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line)}
table.pal-t{border-collapse:collapse; width:100%; min-width:860px; font-size:14px}
.pal-t th{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:400; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-2); background:var(--bg-2)}
.pal-t td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
.pal-t td:first-child{font-family:var(--mono); font-size:12.5px; color:var(--ink); white-space:nowrap}
.pal-t td small{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em}
.pal-t tr.grp td{background:var(--bg-2); color:var(--ink-3); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding-top:14px}
.samples{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px}
.samples > div{border:1px solid var(--line); padding:16px 18px}
.samples h4{margin:0 0 8px; font-size:14.5px; font-weight:500}
.samples h4 span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); margin-left:8px}
.samples p{font-size:14px; color:var(--ink-2); line-height:1.55}
.samples code{font-family:var(--mono); font-size:12.5px; color:var(--ink)}
@media (max-width:900px){ .samples{grid-template-columns:1fr} }

/* ---- figür + metin (5/7), fotoğraf üstü caption ---- */
.ctrl{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); align-items:start; margin:40px 0}
.ctrl figure{margin:0}
.ctrl img{width:100%; display:block; border:1px solid var(--line); background:var(--bg-2)}
.ctrl figcaption{margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ctrl h3{font-size:clamp(22px,2.2vw,28px); font-weight:500; letter-spacing:-.01em; margin-bottom:12px}
.ctrl p{color:var(--ink-2); font-size:16px; max-width:62ch}
.ctrl p + p{margin-top:12px}
.ctrl p b{color:var(--ink); font-weight:500}
@media (max-width:900px){ .ctrl{grid-template-columns:1fr} }
.photo{position:relative; border:1px solid var(--line); overflow:hidden; aspect-ratio:16/9; background:#000}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo .cap{position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:rgba(7,8,9,.7); padding:5px 9px}

/* ---- mono log (HUD / terminal satırları, tek tek belirir) ---- */
.log{font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--ink-2); text-shadow:0 0 12px rgba(0,0,0,.9)}
.log div{opacity:0; transform:translateY(4px); transition:opacity .5s ease, transform .5s ease}
.log div.on{opacity:1; transform:none}
.log div .t{color:var(--ink-3); margin-right:10px}
.log div .ok{color:var(--accent)}
.log div.big{color:var(--ink); font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px}
.prog{height:2px; background:rgba(255,255,255,.08); position:relative; margin-top:10px}
.prog i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent)}

/* ---- ses / video çerçevesi ---- */
.frame{position:relative; border:1px solid var(--line-2); background:#000; aspect-ratio:16/9; min-height:420px; overflow:hidden}
.frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; display:block}
.frame .poster{position:absolute; inset:0; display:block; color:inherit; text-decoration:none}
.frame [hidden]{display:none}
.frame .cta{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(7,8,9,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--line-2); padding:10px 16px 10px 10px; border-radius:2px}
.frame .cta .ring{width:34px; height:34px; border-radius:50%; border:1px solid var(--ink-3); display:grid; place-items:center; font-size:11px; color:var(--accent); padding-left:2px}
.frame .poster:hover .cta{border-color:var(--ink-3); background:rgba(7,8,9,.75)}
.frame .corner{position:absolute; left:14px; bottom:12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.under{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.under a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2)}
.under a:hover{border-color:var(--ink-3)}
@media (max-width:760px){ .frame{aspect-ratio:4/5; min-height:0} .frame .cta .lbl{display:none} .frame .cta{padding:10px} }

/* ---- lightbox (template.html'deki JS body'ye ekler) ---- */
.lb{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.94); display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:100%; object-fit:contain; border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .cap{position:absolute; left:24px; right:24px; bottom:18px; text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
@media (max-width:760px){ .lb{padding:12px} }