:root{--deep:#0A1A4A;--sh:#0A1A4A;--hdr:#F4F6FBee;--dot:#0A1A4A14}
html[data-theme=dark]{color-scheme:dark;--paper:#0A1020;--white:#131B33;--ink:#E8EDFF;--ink2:#A9B4D8;--blue:#4F8CFF;--sky:#1B2850;--amber:#FFB020;--stamp:#FF6B73;--ok:#3DD598;--line:#ffffff24;--deep:#050912;--sh:#4F8CFF;--hdr:#0A1020ee;--dot:#ffffff0d}
html[data-theme=sunrise]{--paper:#FFF3E3;--white:#FFFBF6;--ink:#2B1B4A;--ink2:#6A4F7D;--blue:#E8503A;--sky:#FFD9BE;--amber:#FFC23D;--stamp:#C2255C;--ok:#1E9E6A;--line:#2B1B4A22;--deep:#2B1B4A;--sh:#2B1B4A;--hdr:#FFF3E3ee;--dot:#2B1B4A12}
/* app.html değişkenleri */
html[data-theme]{--bg:var(--paper);--panel:var(--white);--panel2:var(--white);--text:var(--ink);--muted:var(--ink2);--v:var(--blue)}
.pri,.tab.on,.seg button.on{background:var(--deep)!important;color:#fff!important}
.hot,.sticker,.btn.amber,.btn.pri.amber,.band,.prem{--ink:#0A1A4A;--ink2:#31407A;--sh:#0A1A4A;--text:#0A1A4A}
.hot{color:#0A1A4A}
html.tt,html.tt *{transition:background-color .6s,color .6s,border-color .6s,box-shadow .6s!important}
/* gökyüzü */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky>*{position:absolute;opacity:0;transition:opacity 1s}
.cloud{height:46px;width:150px;border-radius:50px;background:#fff;filter:blur(.5px);animation:drift 70s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud:before{width:60px;height:60px;left:22px;top:-26px}.cloud:after{width:44px;height:44px;left:72px;top:-16px}
.c1{top:110px;left:-200px}.c2{top:260px;left:-200px;animation-duration:95s;animation-delay:-40s;transform:scale(.7)}.c3{top:470px;left:-200px;animation-duration:120s;animation-delay:-70s;transform:scale(1.2)}
@keyframes drift{to{translate:calc(100vw + 400px) 0}}
html:not([data-theme]) .cloud,html[data-theme=light] .cloud{opacity:.8}
.sun{left:50%;bottom:-170px;width:340px;height:340px;margin-left:-170px;border-radius:50%;background:radial-gradient(circle,#FFE08A 0 40%,#FF9A5A 70%,#FF6B6B 100%);box-shadow:0 0 120px 60px #FF9A5A66}
.sun:before{content:"";position:absolute;inset:-60px;border-radius:50%;background:repeating-conic-gradient(#FFD16633 0 6deg,transparent 6deg 18deg);animation:spin 40s linear infinite;mask:radial-gradient(circle,transparent 52%,#000 53%,transparent 75%);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%,transparent 75%)}
@keyframes spin{to{rotate:360deg}}
html[data-theme=sunrise] .sun{opacity:1;animation:rise 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{translate:0 260px}}
.glow{inset:0;background:linear-gradient(180deg,#FFB38A 0,#FFD9B0 28%,transparent 65%)}
html[data-theme=sunrise] .glow{opacity:.75}
.moon{top:64px;right:2%;width:84px;height:84px;border-radius:50%;box-shadow:inset -22px -6px 0 0 #FFF3C4,0 0 40px 6px #FFF3C455;rotate:-20deg}
html[data-theme=dark] .moon{opacity:1;animation:bob 8s ease-in-out infinite}@keyframes bob{50%{translate:0 10px}}
.star{width:3px;height:3px;border-radius:50%;background:#fff;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.15;scale:.5}}
html[data-theme=dark] .stars{opacity:1}.stars{inset:0}.stars .star{opacity:1}
.shoot{top:12%;left:60%;width:120px;height:2px;background:linear-gradient(90deg,#fff,transparent);rotate:200deg;animation:sh 7s linear infinite;opacity:0}
html[data-theme=dark] .shoot{opacity:1}@keyframes sh{0%{translate:0 0;opacity:0}3%{opacity:1}12%{translate:-380px 160px;opacity:0}100%{opacity:0}}
/* tema düğmesi */
.tsw{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:4px;padding:5px;border:2px solid var(--ink);border-radius:99px;background:var(--white);box-shadow:3px 3px 0 var(--sh)}
.tsw button{width:38px;height:38px;border:0;border-radius:50%;background:none;font-size:19px;cursor:pointer;transition:transform .2s,background .2s;color:var(--ink)}
.tsw button:hover{transform:scale(1.15) rotate(-8deg)}.tsw button[aria-pressed=true]{background:var(--amber)}
.tsc{display:none}
@media(max-width:700px){.tsw{display:none}.tsc{display:grid;place-items:center;position:fixed;left:10px;bottom:86px;z-index:60;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-size:19px;cursor:pointer;opacity:.7;padding:0;box-shadow:2px 2px 0 var(--sh)}}
/* 3B telefon */
.stage{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
/* radar */
.miss .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.radar{position:relative;width:min(360px,80vw);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle,#2B62F022,transparent 70%);border:2px solid #ffffff44;overflow:hidden}
.radar i{position:absolute;border:1px solid #ffffff2e;border-radius:50%;inset:var(--s)}.radar i:nth-child(1){--s:16%}.radar i:nth-child(2){--s:32%}.radar i:nth-child(3){--s:46%}
.radar:before,.radar:after{content:"";position:absolute;background:#ffffff22}.radar:before{left:50%;top:0;bottom:0;width:1px}.radar:after{top:50%;left:0;right:0;height:1px}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 285deg,#FFB61E55 345deg,#FFB61Ecc 360deg);animation:spin 6s linear infinite}
.radar b{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 #FFB61E,0 0 14px 4px #FFB61E88;opacity:0;animation:blip 6s linear infinite;animation-delay:var(--d)}
@keyframes blip{0%{opacity:1;scale:1.5}6%{box-shadow:0 0 0 18px #FFB61E00,0 0 14px 4px #FFB61E88}60%{opacity:.25;scale:1}100%{opacity:0}}
.rcap{text-align:center;color:#B7C4F5;font-size:13px;margin-top:14px}
@media(max-width:820px){.miss .wrap{grid-template-columns:1fr}}
/* mektup */
.letter{padding:96px 0 40px;text-align:center}
.letter h2{max-width:14em;margin:0 auto 10px}.letter p{color:var(--ink2);margin:0 auto 40px;max-width:30em}
.env{position:relative;width:min(340px,86vw);height:220px;margin:150px auto 40px;cursor:pointer;perspective:900px}
.env .back{z-index:0;position:absolute;inset:0;background:var(--amber);border:2px solid var(--ink);border-radius:10px}
.env .pl{position:absolute;left:6%;right:6%;top:6%;height:88%;background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:16px 18px;text-align:left;z-index:2;transition:transform .9s cubic-bezier(.2,.9,.3,1.1) .35s;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.35;color:var(--ink)}
.env .pl b{font:800 19px var(--head);letter-spacing:-.02em}.env .pl em{margin-top:auto;align-self:flex-end;border:2px solid var(--stamp);color:var(--stamp);padding:0 8px;border-radius:5px;font:800 12px var(--head);font-style:normal;rotate:-8deg}
.env .fr{z-index:3;position:absolute;inset:0;background:var(--amber);border:2px solid var(--ink);border-radius:10px;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);filter:brightness(.96)}
.env .fl{position:absolute;left:0;right:0;top:0;height:56%;background:var(--amber);border:2px solid var(--ink);border-radius:10px 10px 0 0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .5s ease-in;filter:brightness(.9);z-index:3}
.env.open .fl{transform:rotateX(180deg);z-index:1}.env.open .pl{transform:translateY(-120px)}
.env:not(.open){animation:wob 2.4s ease-in-out infinite}@keyframes wob{50%{rotate:-1.5deg;translate:0 -4px}}
#cv{position:fixed;inset:0;pointer-events:none;z-index:80}
/* yol */
.yol{margin-top:18px}.yol svg{width:100%;height:auto;overflow:visible}
.yol .tr{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 9}
.yol .pg{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1)}
.yol .nd{fill:var(--white);stroke:var(--ink);stroke-width:2.5;transition:fill .4s,r .4s}.yol .nd.on{fill:var(--amber)}
.yol text{font:700 11px var(--body);fill:var(--ink2);text-anchor:middle}
.yol .wk{fill:var(--blue);stroke:var(--white);stroke-width:3;transition:cx 1s cubic-bezier(.2,.9,.3,1),cy 1s cubic-bezier(.2,.9,.3,1)}
/* konuşan jüri */
.av{font-size:0!important;position:relative;background:linear-gradient(#2a1d12 0 30%,transparent 30%),radial-gradient(circle at 34% 50%,#0A1A4A 0 3px,transparent 3.5px),radial-gradient(circle at 66% 50%,#0A1A4A 0 3px,transparent 3.5px),#FFD7B5!important;border:2px solid var(--ink);overflow:hidden}
.av:after{content:"";position:absolute;left:50%;top:66%;width:20px;height:5px;margin-left:-10px;border-radius:0 0 14px 14px;background:#B23A48}
.av.talk:after{animation:mouth .22s ease-in-out infinite alternate}@keyframes mouth{to{height:14px;top:62%}}
.av.talk{animation:tk .6s infinite alternate}
@media(prefers-reduced-motion:reduce){.cloud,.sun:before,.sweep,.radar b,.star,.shoot,.env:not(.open){animation:none!important}.stage{transform:none!important}}