*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#fff}
body{font-family:Inter,system-ui,sans-serif}#scene,.shade,#stars{position:fixed;inset:0;width:100%;height:100%}
#scene{background:center/cover;transform:scale(1.03);transition:opacity 1s;animation:drift 24s ease-in-out infinite alternate}
.shade{background:linear-gradient(#0003,#0000 45%,#0007);pointer-events:none}#stars{pointer-events:none;opacity:0}.night #stars{opacity:.55}
header{position:fixed;z-index:5;top:0;left:0;right:0;padding:34px 40px;display:flex;justify-content:space-between}
.brand{display:flex;gap:24px;align-items:center;font-size:13px;letter-spacing:.38em;text-shadow:0 2px 12px #000}.brand b{width:34px;height:1px;background:#fffc}
nav{display:flex;gap:24px}nav button{border:0;background:none;color:#fffc;cursor:pointer;min-width:50px;font-size:27px;text-shadow:0 2px 10px #000}
nav small{display:block;font-size:10px;letter-spacing:.12em;margin-top:7px}nav button.on{color:#fff;transform:translateY(-2px)}
main{position:fixed;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px}
.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.65}h1{font:400 clamp(39px,4.1vw,68px)/1.05 Georgia,serif;letter-spacing:-.025em;margin:14px 0 0;text-shadow:0 3px 25px #0008}
#clock{font-size:clamp(25px,2.4vw,38px);font-weight:300;letter-spacing:.26em;margin:34px 0 20px}main i{width:min(340px,60vw);height:1px;background:#fff5}
.stay{font-size:11px;letter-spacing:.38em}.visit{position:fixed;z-index:4;left:34px;bottom:31px;padding:16px 22px;border:1px solid #fff2;background:#05070870;backdrop-filter:blur(10px);border-radius:6px;font-size:10px;letter-spacing:.16em}
.visit strong{display:block;font-size:17px;font-weight:300;letter-spacing:.22em;margin:9px 0 0 20px}.quote{position:fixed;z-index:4;right:38px;bottom:33px;text-align:right;font:italic 12px/1.9 Georgia,serif;letter-spacing:.08em;text-shadow:0 2px 12px #000}
.quote i{display:inline-block;width:35px;height:1px;background:#fffa}#next{position:fixed;z-index:6;right:38px;top:132px;width:38px;height:38px;border-radius:50%;border:1px solid #fff4;background:#0003;color:#fff;font-size:19px;cursor:pointer}
#toast{position:fixed;z-index:10;left:50%;bottom:110px;transform:translate(-50%,15px);opacity:0;padding:9px 14px;border-radius:20px;background:#0008;backdrop-filter:blur(10px);font-size:11px;letter-spacing:.1em;transition:.4s}#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes drift{to{transform:scale(1.06) translate(.3%,-.2%)}}@media(max-width:720px){header{padding:24px 19px}.brand{font-size:10px;gap:12px}.brand b{width:20px}nav{gap:6px}nav button{min-width:33px;font-size:21px}nav small{display:none}
main{padding-bottom:145px}h1{font-size:clamp(38px,11vw,54px)}.eyebrow{display:none}#clock{font-size:22px}.visit{left:18px;bottom:20px;padding:12px}.quote{right:18px;bottom:22px;font-size:10px;max-width:42vw}#next{right:20px;top:80px}}

.madeby{font-size:10px;letter-spacing:.12em;text-transform:none;color:#ffffffa8}.madeby b{font-weight:500;color:#ffffffe8}
.mixer-toggle{position:fixed;z-index:7;right:38px;top:180px;width:40px;height:40px;border-radius:50%;border:1px solid #fff4;background:#0004;color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(10px)}
.mixer{position:fixed;z-index:8;right:38px;top:230px;width:330px;max-height:calc(100vh - 260px);overflow:auto;padding:16px 17px 15px;border:1px solid #fff3;border-radius:10px;background:#050708d4;backdrop-filter:blur(18px);box-shadow:0 14px 45px #0007;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.22s}
.mixer.open{opacity:1;transform:none;pointer-events:auto}.mixer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:9px;letter-spacing:.25em;color:#fffd}
.mixer-head button{border:0;background:none;color:#fff;font-size:20px;cursor:pointer}
.transport{display:flex;gap:12px;align-items:center;padding:11px 0 14px;border-bottom:1px solid #fff2}.master-play{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid #fff5;background:#ffffff14;color:#fff;font-size:16px;cursor:pointer}
.timer-box{min-width:0;flex:1}.timer-options{display:flex;gap:4px;flex-wrap:wrap}.timer-options button{border:1px solid #fff2;background:#ffffff08;color:#fffb;border-radius:12px;padding:4px 7px;font-size:8px;cursor:pointer}.timer-options button.selected{background:#ffffff22;border-color:#fff6;color:#fff}
#countdown{margin-top:6px;font-size:9px;color:#fffa;font-variant-numeric:tabular-nums}
.sound-section{padding-top:13px}.section-title{font-size:8px;letter-spacing:.22em;color:#ffffff82;margin-bottom:8px}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sound-pick{min-height:32px;border:1px solid #fff2;background:#ffffff08;color:#fffc;border-radius:7px;padding:7px 8px;font-size:10px;text-align:left;cursor:pointer;transition:.15s}.sound-pick.on{background:#ffffff20;border-color:#fff6;color:#fff}.sound-pick:hover{background:#ffffff16}
.active-title{margin-top:17px;padding-top:13px;border-top:1px solid #fff2}.empty-mix{font-size:9px;color:#ffffff65;padding:6px 0}
.mix-row{display:grid;grid-template-columns:86px 1fr 25px;gap:8px;align-items:center;padding:7px 0}.mix-row label{font-size:9px;color:#fffd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mix-row output{font-size:8px;text-align:right;color:#fffa;font-variant-numeric:tabular-nums}.mix-row input{width:100%;height:2px;accent-color:white;cursor:pointer}
@media(max-width:720px){.mixer-toggle{right:20px;top:126px}.mixer{right:18px;top:174px;width:min(330px,calc(100vw - 36px));max-height:calc(100vh - 195px)}}

/* v9 Living Scenes */
.madeby{font-size:13px!important;letter-spacing:.11em!important;color:#ffffffe0!important;text-shadow:0 1px 4px #000,0 2px 12px #000c}
.madeby b{font-size:14px;font-weight:600!important;color:#fff!important;text-shadow:0 1px 5px #000,0 2px 14px #000d}

#sceneFx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#sceneFx>div{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
#sceneFx .on{opacity:1}

/* Ortam: sıcak iç mekân ışığı. Screen blend yalnız parlak bölgeleri nazikçe yükseltir. */
.fx-light{background:
 radial-gradient(ellipse at 62% 38%,rgba(255,203,116,.23),transparent 28%),
 radial-gradient(ellipse at 32% 48%,rgba(255,184,92,.12),transparent 34%),
 linear-gradient(rgba(255,184,91,.055),rgba(255,155,70,.035));
 mix-blend-mode:screen;filter:saturate(1.08)}

/* Yağmur: ince diyagonal çizgiler iki hız katmanıyla hareket eder. */
.fx-rain{background-image:
 repeating-linear-gradient(104deg,transparent 0 18px,rgba(220,235,255,.16) 19px,transparent 20px 42px),
 repeating-linear-gradient(103deg,transparent 0 39px,rgba(230,242,255,.09) 40px,transparent 41px 73px);
 background-size:180px 260px,240px 330px;animation:rainMove .85s linear infinite}
@keyframes rainMove{to{background-position:-36px 260px,-24px 330px}}

/* Rüzgâr: çok seyrek, yumuşak parçacıklar. */
.fx-wind i{position:absolute;width:34px;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffffff45,transparent);left:-50px;animation:windPass 7s linear infinite}
.fx-wind i:nth-child(1){top:18%;animation-delay:-1s}.fx-wind i:nth-child(2){top:31%;animation-delay:-4s;animation-duration:9s}.fx-wind i:nth-child(3){top:47%;animation-delay:-6s}.fx-wind i:nth-child(4){top:62%;animation-delay:-2s;animation-duration:10s}.fx-wind i:nth-child(5){top:74%;animation-delay:-7s;animation-duration:8s}.fx-wind i:nth-child(6){top:85%;animation-delay:-3s;animation-duration:11s}
@keyframes windPass{0%{transform:translateX(-5vw) translateY(0) rotate(-3deg);opacity:0}15%{opacity:.5}80%{opacity:.25}100%{transform:translateX(112vw) translateY(-28px) rotate(4deg);opacity:0}}

/* Dalgalar: alt bölümde sakin ışık yansıması. */
.fx-waves{top:48%!important;background:
 repeating-radial-gradient(ellipse at 50% 100%,transparent 0 16px,rgba(220,240,255,.09) 18px,transparent 21px 44px);
 filter:blur(1px);animation:waveGlow 5.5s ease-in-out infinite alternate}
@keyframes waveGlow{from{transform:translateX(-1.5%) scaleX(1.02);opacity:.28}to{transform:translateX(1.5%) scaleX(.99);opacity:.62}}

/* Ateş: alt köşelerden çok hafif sıcak titreşim. */
.fx-fire{background:
 radial-gradient(ellipse at 25% 100%,rgba(255,112,31,.24),transparent 38%),
 radial-gradient(ellipse at 76% 100%,rgba(255,173,60,.12),transparent 30%);
 mix-blend-mode:screen;animation:fireFlicker 2.2s ease-in-out infinite alternate}
@keyframes fireFlicker{0%{filter:brightness(.85);transform:scale(1)}35%{filter:brightness(1.08);transform:scale(1.005)}70%{filter:brightness(.94)}100%{filter:brightness(1.13);transform:scale(1.01)}}

@media(prefers-reduced-motion:reduce){.fx-rain,.fx-waves,.fx-fire,.fx-wind i{animation:none!important}}

/* v11 — Camp video; navigation appearance intentionally remains v9 */
.camp-video{
 position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
 opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease;
 background:#090705
}
body.camp-active .camp-video{opacity:1;visibility:visible}
body.camp-active #scene{opacity:0!important}
body.camp-active #sceneFx{opacity:0!important}
body.camp-active #campMode{color:#fff;transform:translateY(-2px)}
.madeby,.madeby b{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}

/* v12.2 runtime hardening */
.camp-video{z-index:2!important}
body.camp-active .shade{opacity:0}
body:not([data-scene-type]) nav button[data-s]{display:none}
body[data-scene-type="ambient"] nav button[data-s]:not([data-s="ambient"]),
body[data-scene-type="rain"] nav button[data-s]:not([data-s="rain"]),
body[data-scene-type="wind"] nav button[data-s]:not([data-s="wind"]),
body[data-scene-type="waves"] nav button[data-s]:not([data-s="waves"]){display:none!important}