/* Donanım hızlandırma kapalıyken de akıcı: tam ekran canvas/filtre/blur yok, boştayken sıfır animasyon döngüsü.
   Tüm hareketler transform/opacity üzerinden (GPU dostu). */
:root{--gold:#e6c27a;--cream:#f6ead2;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.3,1.45,.5,1)}
*{box-sizing:border-box}
html,body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;background:#0a0907;color:#efe9df;overflow:hidden;touch-action:none;overscroll-behavior:none}
body{font:400 14px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:transparent}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{-webkit-touch-callout:none}

/* --- arka plan --- */
#bg{position:fixed;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:0;transition:opacity 2.4s ease;will-change:transform;pointer-events:none}
body.vid #bg{opacity:1}
.veil{position:fixed;inset:0;pointer-events:none;background:radial-gradient(60vmax 38vmax at 50% 46%,rgba(230,194,122,.13),transparent 70%),radial-gradient(ellipse at 50% 45%,rgba(10,9,7,.3),rgba(10,9,7,.8) 75%),linear-gradient(rgba(10,9,7,.42),rgba(10,9,7,.42))}
.orb{position:fixed;width:70vmax;height:70vmax;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(230,194,122,.2),transparent);animation:dr 30s ease-in-out infinite alternate}
.o1{left:-25vmax;top:-30vmax}.o2{right:-30vmax;bottom:-35vmax;animation-duration:38s;animation-direction:alternate-reverse}
@keyframes dr{to{transform:translate(10vmax,8vmax)}}

/* --- dev yazı --- */
.stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,28px);padding:0 4vw 12vh}
h1{position:relative;margin:0;display:flex;justify-content:center;font:400 min(16vw,36vh)/.92 Anton,Impact,"Arial Narrow",sans-serif;letter-spacing:.05em;padding-left:.05em}
h1::before{content:"";position:absolute;inset:-25% -6%;z-index:-1;background:radial-gradient(closest-side,rgba(230,194,122,.2),transparent)}
.br{display:none;flex-basis:100%;height:0}
.l{display:inline-block;color:color-mix(in srgb,#fff1cf calc(var(--h,0)*100%),#e9d3a4);opacity:0}
body.go .l{opacity:1;animation:rise 1.55s var(--spring) both;animation-delay:calc(var(--i)*85ms + 150ms)}
@keyframes rise{0%{opacity:0;translate:0 70%;rotate:-7deg;scale:.86}35%{opacity:1}}
.tag{position:fixed;left:0;right:0;top:56%;margin:0;min-height:1.6em;text-align:center;font-size:clamp(11px,1.25vw,14px);letter-spacing:.38em;text-transform:uppercase;color:rgba(239,233,223,.6);opacity:0;pointer-events:none}
body.go .tag{opacity:1;animation:tagIn 1.6s var(--ease) 1.3s both}
.tag u{display:inline-block;width:2px;height:1.05em;margin-left:6px;vertical-align:-3px;background:var(--gold);animation:bl .9s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
@keyframes tagIn{from{opacity:0;translate:0 8px}}

/* --- atmosfer katmanları (hepsi yalnızca transform/opacity) --- */
.sheen{position:fixed;top:-10%;bottom:-10%;left:0;width:55vw;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,236,190,.16) 50%,transparent 70%);translate:-120% 0;transform:skewX(-12deg)}
body.go .sheen{animation:sheen 2.4s cubic-bezier(.5,0,.2,1) 1.15s 1 both}
@keyframes sheen{0%{opacity:0;translate:-120% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;translate:260% 0}}
.motes{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.m{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#fff5df,rgba(230,194,122,.85) 55%,transparent 72%);opacity:0;animation:mote var(--d,16s) linear var(--w,0s) infinite;will-change:transform,opacity}
@keyframes mote{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:var(--o,.7)}80%{opacity:var(--o,.7)}100%{opacity:0;transform:translate3d(var(--x,20px),-105vh,0)}}

/* --- alt menü --- */
.dock{position:fixed;left:50%;bottom:max(28px,5vh);translate:-50% 0;z-index:20;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:6px;width:max-content;max-width:min(94vw,1200px);border-radius:26px;background:rgba(14,12,9,.62);border:1px solid rgba(239,233,223,.1);opacity:0;transition:opacity 1.4s ease 1.6s,translate 1.4s var(--ease) 1.6s}
body:not(.go) .dock{translate:-50% 18px}body.go .dock{opacity:1}
.dock a{--c:#fff;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 15px;border-radius:99px;color:rgba(239,233,223,.7);text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:color .5s var(--ease)}
.dock a span{display:none}
.ic{width:20px;height:20px;flex:none;fill:currentColor;transition:transform .6s var(--spring),color .5s var(--ease),filter .5s var(--ease)}
.dock a:hover,.dock a:focus-visible{color:#fff}
.dock a:hover .ic,.dock a:focus-visible .ic{color:var(--c);transform:translateY(-2px) scale(1.14);filter:drop-shadow(0 0 7px var(--c))}
.dock a:active .ic{transform:scale(.92);transition-duration:.15s}
.pill{position:absolute;left:0;top:0;z-index:0;border-radius:99px;background:rgba(239,233,223,.11);opacity:0;pointer-events:none;transition:transform .6s var(--ease),width .6s var(--ease),height .6s var(--ease),opacity .4s}
.cap{position:fixed;left:50%;bottom:calc(max(28px,5vh) + 66px);translate:-50% 6px;z-index:21;margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cc,#fff);opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .4s ease,translate .6s var(--ease)}
.cap.on{opacity:.95;translate:-50% 0}
@media(min-width:1200px){.dock a span{display:inline}.cap{display:none}}

/* --- ses düğmesi --- */
.snd{position:fixed;z-index:30;top:max(20px,env(safe-area-inset-top));right:max(4vw,env(safe-area-inset-right));display:flex;align-items:center;height:42px;border-radius:99px;background:rgba(14,12,9,.62);border:1px solid rgba(239,233,223,.12);transition:border-color .5s}
.snd:hover,.snd.open{border-color:rgba(239,233,223,.3)}
#sb{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:color .4s}#sb:hover{color:var(--gold)}#sb svg{width:18px;height:18px}
#sb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);opacity:0;pointer-events:none}
.snd.hint #sb::after{animation:hint 2.2s var(--ease) infinite}
@keyframes hint{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}
.w1,.w2,.x{transition:opacity .4s}.x{opacity:0}
.snd[data-lv="0"] .w1,.snd[data-lv="0"] .w2,.snd[data-lv="1"] .w2{opacity:0}.snd[data-lv="0"] .x{opacity:1}
.vol{width:0;overflow:hidden;opacity:0;visibility:hidden;transition:width .7s var(--ease),padding .7s var(--ease),opacity .5s,visibility 0s .7s}
.snd.open .vol{width:134px;padding:0 16px 0 2px;opacity:1;visibility:visible;transition:width .7s var(--ease),padding .7s var(--ease),opacity .5s,visibility 0s}
#vr{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;background:transparent;cursor:pointer}
#vr::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(239,233,223,.2) var(--p,50%))}
#vr::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:var(--cream)}
#vr::-moz-range-track{height:3px;border-radius:3px;background:rgba(239,233,223,.2)}#vr::-moz-range-progress{height:3px;background:var(--gold)}#vr::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--cream)}

/* --- tık efektleri --- */
#fx{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.p{position:absolute;border-radius:50%}
.p.t{background:radial-gradient(circle,#fff5df,#e6c27a 60%,transparent 72%);box-shadow:0 0 8px rgba(230,194,122,.6)}
.rip{position:absolute;width:84px;height:84px;border-radius:50%;border:1.5px solid rgba(246,234,210,.6);background:radial-gradient(closest-side,rgba(230,194,122,.16),transparent 72%);will-change:transform,opacity}
.sp{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle,#fff,var(--sc,#f6ddaa) 60%,transparent 74%);will-change:transform,opacity}

/* videoText: harfler saydam, videoyu gösterir (video yoksa düz renk kalır) */
body.vt.vid .stage{background:#34312c;mix-blend-mode:multiply}
body.vt.vid .l{color:#fff}
body.vt.vid h1::before{display:none}
body.vt.vid .veil{background:radial-gradient(ellipse at 50% 45%,rgba(10,9,7,0),rgba(10,9,7,.55) 80%)}
/* giriş animasyonu bittikten sonra harflerde hiçbir animasyon kalmaz */
body.done .l{animation:none}

body.go .dock a{animation:rise2 1s var(--ease) both;animation-delay:calc(var(--n,0)*70ms + 1.7s)}
@keyframes rise2{from{opacity:0;translate:0 14px}}

/* =========================================================
   MOBİL (dikey telefon) — ayrı tasarım:
   3 satırlık dev WEB/MAS/TER + 3x3 cam karo sosyal ızgarası
   Yazı boyutu JS ile ekrana tam oturacak şekilde hesaplanır.
   ========================================================= */
@media(max-width:640px){
  h1{font-size:34vw;line-height:.84;letter-spacing:.03em;flex-wrap:wrap;align-content:center}
  .br{display:block}
  .stage{padding:44px 0 calc(300px + env(safe-area-inset-bottom))}
  .tag{letter-spacing:.3em;font-size:11px;color:rgba(239,233,223,.7)}
  .snd{top:max(14px,env(safe-area-inset-top));right:14px;height:44px}#sb{width:42px;height:42px}
  .pill,.cap{display:none}
  .dock{left:0;right:0;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));translate:0 0;margin:0 auto;width:min(92vw,430px);max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0;background:none;border:0;border-radius:0}
  body:not(.go) .dock{translate:0 18px}
  .dock a{flex-direction:column;gap:7px;height:66px;padding:0;border-radius:20px;background:linear-gradient(160deg,rgba(32,28,22,.72),rgba(14,12,9,.7));border:1px solid rgba(239,233,223,.1);color:rgba(239,233,223,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .45s var(--spring),border-color .35s,background .35s,color .35s}
  .dock a span{display:block;font-size:9.5px;letter-spacing:.2em;padding-left:.2em;line-height:1}
  .ic{width:25px;height:25px;color:var(--c);filter:none!important;transform:none!important}
  .dock a:active,.dock a.hot{transform:scale(.93) translateY(1px);border-color:color-mix(in srgb,var(--c) 70%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,rgba(14,12,9,.8)),rgba(14,12,9,.78));color:#fff}
  .dock a.hot .ic,.dock a:active .ic{filter:drop-shadow(0 0 9px var(--c))!important}
  body.go .dock a{animation:tile .9s var(--spring) both;animation-delay:calc(var(--n,0)*55ms + 1.55s)}
}
@keyframes tile{from{opacity:0;translate:0 26px;scale:.86}}
@media(max-width:640px) and (max-height:700px){.dock a{height:56px;gap:5px}.ic{width:22px;height:22px}.dock{gap:7px}}
@media(max-width:360px){.tag{letter-spacing:.2em}}
@media(hover:none){.cap{display:none}}
@media(max-height:480px) and (orientation:landscape){.dock a{padding:8px 12px}.stage{padding-bottom:16vh}}
body.lite .motes,body.lite .sheen{display:none}
@media(prefers-reduced-motion:reduce){.motes,.sheen{display:none}.orb{animation:none}}