/* Agah Aydınlatma — scroll-lit experience.
   JS yalnızca özel değişkenleri (--lit, --day, --lv, --p, --dp) yazar; görsel iş CSS'te. */
:root{
  --amber:#ffb547;--ink:#f4eadb;--mute:#c2b19a;--line:rgba(255,235,205,.18);--card:rgba(255,235,205,.05);
  --accent:#ffb547;--accent-ink:#1b1206;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body.day{--ink:#1f160c;--mute:#5a4733;--line:rgba(40,25,10,.25);--card:rgba(40,25,10,.05);--accent:#8a4f00}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070605;color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:color .35s}
h1,h2,h3,.wm-a,.dawn p{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
body.day :focus-visible{outline-color:#8a4f00}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 14px;z-index:99;border-radius:8px}.skip:focus{left:8px}
[hidden]{display:none!important}

/* ---------- dünya: sabit ışık katmanı ---------- */
.world{position:fixed;inset:0;z-index:-1;pointer-events:none;--lit:0;--day:0;
  background:color-mix(in oklab,color-mix(in oklab,#070605,#2d1f12 calc(var(--lit)*100%)),#f4e8d3 calc(var(--day)*100%))}
.glow{position:absolute;inset:0;
  background:radial-gradient(120vmax 90vmax at 50% -8%,rgba(255,170,70,calc(.05 + var(--lit)*.38)),transparent 70%)}
.vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,transparent 25%,#000 120%);
  opacity:calc((1 - var(--lit))*.8*(1 - var(--day)))}

/* ---------- üst çubuk ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-left));
  background:linear-gradient(#070605e0,#07060500);color:#f4eadb}
body.day .top{background:linear-gradient(#f4e8d3ee,#f4e8d300);color:#1f160c}
.wm{display:flex;align-items:baseline;gap:6px;text-decoration:none;min-height:44px;align-items:center}
.wm-dot{width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 16px 4px rgba(255,181,71,.7);margin-right:2px;cursor:pointer}
.wm-a{font-size:1.5rem;line-height:1}
.wm-b{font-size:.62rem;letter-spacing:.32em;opacity:.8;font-weight:600}
.top nav{display:flex;gap:4px;align-items:center;font-size:.9rem}
.top nav a{text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;opacity:.85}
.top nav a:hover{opacity:1}
.top nav .pill{border:1px solid currentColor;border-radius:99px;padding:0 16px;opacity:1}
@media(max-width:760px){.top nav a:not(.pill){display:none}}

/* ---------- ışık göstergesi ---------- */
.meter{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:15;display:flex;gap:10px;align-items:center;
  background:rgba(10,8,6,.78);color:#f4eadb;border:1px solid rgba(255,235,205,.18);padding:7px 14px;border-radius:99px;font-size:.74rem;backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap}
.meter-bar{width:56px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.meter-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ff9d2e,#fff0c8)}
@media(min-width:900px){.meter{left:24px;transform:none;bottom:24px}}

/* ---------- ortak ---------- */
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--accent);margin:0 0 .8em;font-weight:600}
.ph{color:var(--accent);font-size:.85rem;margin:1em 0 0}
.sec{padding:96px 22px;max-width:1040px;margin:auto;scroll-margin-top:60px}
.sec h2,.chap h2{font-size:clamp(1.9rem,6.2vw,3rem);line-height:1.12;margin:0 0 .5em}
.sub{color:var(--mute);max-width:40em}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:99px;text-decoration:none;font-weight:600;border:1px solid var(--line);transition:transform .2s,box-shadow .3s}
.btn.primary{background:var(--amber);color:#1b1206;border-color:transparent;box-shadow:0 10px 34px rgba(255,150,40,.35)}
.btn:hover{transform:translateY(-2px)}
.btn[aria-disabled=true]{opacity:.8;cursor:not-allowed}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{overflow-x:clip;position:relative;min-height:100svh;padding:330px 22px 110px;text-align:center;max-width:900px;margin:auto}
.hero h1{font-size:clamp(2.4rem,9.5vw,4.8rem);line-height:1.05;margin:.1em 0 .4em}
.warm{color:var(--amber);text-shadow:0 0 36px rgba(255,160,50,.45)}
.lead{color:var(--mute);max-width:32em;margin:0 auto 2em;font-size:1.08rem}
.scroll-cue{display:inline-flex;min-height:44px;align-items:center;gap:8px;text-decoration:none;color:var(--mute);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
.hero-lamp{position:absolute;left:50%;top:0;width:220px;height:300px;transform:translateX(-50%);
  --bulb:#7a5220;--cone:.22;--halo:.35}
.hero-lamp[data-lamp=on]{--bulb:#ffd58a;--cone:.85;--halo:1}
.lamp-svg{position:absolute;inset:0;width:100%;height:100%;transform-origin:110px 0;animation:sway 7s ease-in-out infinite}
.wire{stroke:#8a7a66;stroke-width:2}.shade{fill:#241a10;stroke:#5a4630;stroke-width:1.5}.rim{fill:#0c0804}
.bulb{fill:var(--bulb);transition:fill .5s;filter:drop-shadow(0 0 calc(24px*var(--halo)) rgba(255,170,60,var(--halo)))}
.beam{position:absolute;left:50%;top:150px;width:min(560px,130vw);height:520px;transform:translateX(-50%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(rgba(255,185,90,.55),transparent 85%);opacity:var(--cone);transition:opacity .6s;filter:blur(8px);pointer-events:none}
.pull-wrap{position:absolute;left:calc(50% + 70px);top:146px;display:flex;flex-direction:column;align-items:center}
.pull{background:none;border:0;width:48px;height:104px;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:inherit;transition:transform .25s}
.pull-cord{width:2px;flex:1;background:#8a7a66}
.pull-knob{width:20px;height:20px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px rgba(255,181,71,.8)}
.pull:active{transform:translateY(10px)}
.pull-hint{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:4px;white-space:nowrap}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

/* ---------- bölümler (sahne) ---------- */
.chap{position:relative;padding:90px 22px;scroll-margin-top:40px}
.chap-in{max-width:1080px;margin:auto;display:grid;gap:36px;align-items:center}
@media(min-width:900px){.chap-in{grid-template-columns:1fr 1.15fr;gap:64px}.chap.flip .copy{order:2}}
.copy{position:relative}
.num{position:absolute;top:-1em;left:-4px;margin:0;font-family:var(--serif);font-size:clamp(4.5rem,16vw,8.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,200,120,.22);pointer-events:none;
  transform:translateY(calc((var(--p,.5) - .5)*-90px));z-index:-0}
.copy>*{position:relative}.copy>.num{position:absolute}
.copy p{color:var(--mute)}.copy h2{color:var(--ink)}
.chips{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:10px}
.chips li{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px 16px;color:var(--mute);font-size:.94rem}
.chips b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.08rem;font-weight:500}

/* ışıkla açılan fotoğraf */
.scene{margin:0;position:relative;--lv:0;--boost:0;
  --r:calc(var(--r0) + (var(--r1) - var(--r0))*var(--lv))}
.scene-img{position:relative;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:4/5;border:1px solid var(--line);
  -webkit-mask-image:none;touch-action:pan-y}
.scene.wide .scene-img{aspect-ratio:16/10}
.scene.tall .scene-img{aspect-ratio:4/5}
@media(min-width:900px){.scene:not(.tall):not(.wide) .scene-img{aspect-ratio:5/4}}
.scene-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(circle at var(--tx) var(--ty),#000 calc(var(--r)*.42),rgba(0,0,0,.1) var(--r));
  mask-image:radial-gradient(circle at var(--tx) var(--ty),#000 calc(var(--r)*.42),rgba(0,0,0,.1) var(--r))}
.scene-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:hsl(var(--ch,34) var(--cs,100%) 52%/calc(var(--ta,0)*.32));mix-blend-mode:color}
.pool{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--tx) var(--ty),hsl(var(--ch,36) var(--cs,100%) 66%/.55),transparent 46%);mix-blend-mode:screen;opacity:calc(var(--lv)*.8)}
figcaption{margin-top:12px}
figcaption small{display:block;color:var(--mute);font-size:.76rem;line-height:1.45;margin-top:6px}
.boost{display:flex;align-items:center;gap:14px;color:var(--mute);font-size:.88rem}
input[type=range]{flex:1;min-width:120px;height:36px;accent-color:var(--amber);background:transparent}
body.day input[type=range]{accent-color:#8a4f00}
.cct{margin-top:1.4em;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.cct label{display:flex;justify-content:space-between;gap:12px;color:var(--ink);font-weight:600;font-size:.94rem}
.cct input{width:100%;margin-top:6px}
.cct output{color:var(--accent);font-variant-numeric:tabular-nums}
.cct-help{font-size:.8rem;margin:.3em 0 0}

/* ---------- gün doğuyor ---------- */
.dawn{height:230vh;position:relative}
.dawn-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 24px;text-align:center}
.dawn p{grid-area:1/1;margin:0;font-size:clamp(1.9rem,7.4vw,4rem);line-height:1.15;max-width:15em}
.dawn-a{color:#f4eadb;opacity:clamp(0,calc(1 - (var(--dp,0) - .08)*5),1);transform:translateY(calc(var(--dp,0)*-40px))}
.dawn-b{color:var(--ink);opacity:clamp(0,calc((var(--dp,0) - .55)*5),1);transform:translateY(calc((1 - var(--dp,0))*30px))}
.dawn-b em{color:var(--accent);font-style:italic}
.js .dawn-b{opacity:clamp(0,calc((var(--dp,0) - .55)*5),1)}

/* ---------- konsept sahneler ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 16px}
.tabs button{min-height:46px;padding:0 18px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--amber);color:#1b1206;border-color:transparent;font-weight:600}
.stage{border-radius:24px;overflow:hidden;background:#100c08;border:1px solid rgba(255,235,205,.15);color:#f4eadb}
.panel svg{display:block;width:100%;height:auto}
.panel .bg{fill:#100c08}.rail{fill:#4a3b2a}.head{fill:#3a2d1f;stroke:#6c5538}.plinth{fill:#2a2018}.obj{fill:#6b5a47}
.cone{fill:rgba(255,196,110,0);transition:fill .6s;filter:blur(3px)}
.stage[data-on=true] .cone{fill:rgba(255,196,110,.5)}
.stage[data-on=true] .obj{fill:#f2d9a8}
.obj{transition:fill .6s}
.stage-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid rgba(255,235,205,.12)}
.tag{font-size:.78rem;color:#c2b19a}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;padding:5px 18px 5px 5px;border-radius:99px;border:1px solid rgba(255,235,205,.25);background:#0a0806;color:#f4eadb;font:inherit;cursor:pointer}
.knob{width:36px;height:36px;border-radius:50%;background:#4b4034;transition:.3s}
.switch[aria-checked=true] .knob{background:var(--amber);box-shadow:0 0 18px var(--amber)}
.real{margin-top:28px;padding:20px 22px;border:1px dashed var(--line);border-radius:18px}
.real h3{margin:0 0 .3em;font-size:1.25rem}.real p{margin:0;color:var(--mute)}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:24px 0 0;display:grid;gap:12px}
@media(min-width:760px){.steps ol{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--card);color:var(--mute);font-size:.94rem}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--serif);color:var(--accent);font-size:1.4rem}
.steps b{display:block;color:var(--ink);margin-bottom:4px}
.about p{max-width:38em;color:var(--mute);font-size:1.08rem}.about strong{color:var(--ink)}
.contact{text-align:center}.contact .sub{margin:0 auto 1.6em}.contact .actions{justify-content:center}.note{max-width:36em;margin:26px auto 0}
footer{padding:28px 22px calc(90px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--mute);font-size:.85rem;max-width:1040px;margin:auto}
.foot-top{display:flex;justify-content:space-between;gap:12px}
.foot-top a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.credits{margin-top:6px}.credits summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.credits ul{padding-left:18px;line-height:1.55}.credits a{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .num,.dawn-a,.dawn-b{transform:none!important}
}