/* Landing — yalnız ana sayfa. Arka planda WebGL petek (landing.js): giriş → üç kovan (kaydırdıkça kamera gezer) → alt bölümler. */
.top{position:fixed;left:0;right:0}

/* Petek sahnesi: sayfanın arkasında sabit. WebGL yoksa temaya göre önceden alınmış görüntü. */
.comb-sky{position:fixed;inset:0;z-index:-1}
[data-theme=dark] .comb-sky{background:radial-gradient(70% 60% at 50% 45%,#120c05 0%,#000 72%)}
[data-theme=light] .comb-sky{background:radial-gradient(70% 60% at 50% 45%,#fbf8f0 0%,var(--bg) 72%)}
#comb3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.comb-sky.no-gl #comb3d{display:none}
.comb-sky.no-gl{background-size:cover;background-position:center}
[data-theme=dark] .comb-sky.no-gl{background-image:url(/assets/comb-dark.webp)}
[data-theme=light] .comb-sky.no-gl{background-image:url(/assets/comb-light.webp)}
.comb-sky.hover{cursor:pointer}
body[data-page=home] .ambient{display:none}

.stage{position:relative;min-height:max(100svh,640px);display:flex;align-items:center;justify-content:center;padding:100px 0 96px;isolation:isolate;pointer-events:none}
.stage a,.stage form{pointer-events:auto}

/* Metin bloğu: tam ortada; arkasında petek ışığı */
.copy{position:relative;z-index:5;width:min(860px,92vw);text-align:center}
.copy::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 72%,transparent),color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent);pointer-events:none}
/* Amblem: başlığın üstünde, temaya göre (karanlıkta fildişi, aydınlıkta siyah; ikisi de bal sarısı çizgili) */
.copy .emblem{width:clamp(116px,12vw,184px);aspect-ratio:1;margin:0 auto 18px;animation:fade .9s both}
.copy .emblem img{width:100%;height:100%;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--honey) 25%,transparent))}
.copy .emblem .logo-l{display:none}[data-theme=light] .copy .emblem .logo-d{display:none}[data-theme=light] .copy .emblem .logo-l{display:block}
.copy h1{font-size:clamp(50px,7.6vw,120px);line-height:.93;letter-spacing:-.045em;font-weight:800;font-variation-settings:"opsz" 96}
.copy h1 .ln{display:block;overflow:hidden;padding-bottom:.07em}
.copy h1 .ln span{display:block;animation:rise 1.1s var(--ease) both}
.copy h1 .ln:nth-child(2) span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(108%)}}
.copy p{margin:22px auto 0;color:var(--dim);font-size:clamp(17px,1.4vw,20px);max-width:40ch;animation:fade .9s .4s both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.join{margin:30px auto 0;display:flex;gap:10px;padding:10px;border-radius:24px;width:max-content;animation:fade .9s .55s both}
.code{display:flex;gap:8px}
.code input{width:58px;height:64px;text-align:center;font-size:30px;font-weight:800;text-transform:uppercase;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--fill) 70%,transparent);caret-color:var(--honey)}
.code input:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 4px color-mix(in srgb,var(--honey) 25%,transparent)}
.join .btn{height:64px}
.join-err{min-height:1.4em;margin-top:12px;font-size:15px;font-weight:650;color:var(--stream)}
.join-err:empty{min-height:0;margin:0}
.hint{margin-top:16px;font-size:15px;color:var(--dim);animation:fade .9s .65s both}
.hint a{color:var(--honey-text);font-weight:650}
.scroll-cue{position:absolute;z-index:5;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:650;color:var(--text);white-space:nowrap;animation:fo 1s 1.2s both;background:var(--glass-strong);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.scroll-cue i{width:14px;height:16px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--honey);opacity:.8}
.motion .scroll-cue i{animation:cue 2.4s var(--ease) infinite}
@keyframes cue{50%{transform:translateY(6px);opacity:.4}}

/* ---------- Kovanlar: petek solda (sahnede), panel sağda; telefonda petek üstte, panel altta ---------- */
.chap{min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:110px max(28px,calc((100vw - 1240px)/2 + 28px)) 60px;pointer-events:none}
.panel{pointer-events:auto;width:min(460px,100%);padding:38px 38px 36px;border-radius:var(--r-lg);background:var(--glass-strong);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.motion .panel{opacity:.15;transform:translateY(24px)}
.motion .chap.in .panel{opacity:1;transform:none}
.kicker{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--k)}
.kicker .mark{width:12px;height:14px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--k)}
.panel h2{font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin-top:12px}
.panel .txt{margin-top:14px;font-size:18px;color:var(--dim);max-width:40ch}
.panel .subs{list-style:none;padding:0}
.panel .count{text-align:left;margin-top:22px;font-size:15.5px;font-weight:680}
.panel .count.soon{display:inline-flex;padding:8px 15px;border-radius:999px;background:color-mix(in srgb,var(--k) 15%,transparent);color:var(--k)}
.panel > .btn{display:flex;width:max-content;margin-top:24px}

/* Petek gözündeki oyunun kartı */
.ptag{position:fixed;z-index:30;left:0;top:0;min-width:210px;padding:14px 16px;border-radius:18px;opacity:0;pointer-events:none;transform:translate3d(-999px,-999px,0);transition:opacity .25s}
.ptag.show{opacity:1;pointer-events:auto}
.ptag .pc{font-size:13px;font-weight:650;color:var(--k,var(--dim))}
.ptag .pn{display:block;font-size:22px;font-weight:780;letter-spacing:-.02em;margin-top:2px}
.ptag .pp{display:block;font-size:14px;color:var(--dim);margin-top:2px}
.ptag .pgo{margin-top:12px;height:40px;padding:0 16px;border-radius:12px;font-size:15px}

/* ---------- Bölümler ---------- */
section.block{padding:120px 0 0}
.subs{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.subs li{padding:9px 13px;border-radius:12px;background:color-mix(in srgb,var(--fill) 55%,transparent);border:1px solid var(--line);font-weight:640;font-size:15px}
.subs li.soon{color:var(--dim);font-weight:560}
.h2{font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.035em;font-weight:800;max-width:16ch}
.lead{margin-top:16px;color:var(--dim);font-size:19px;max-width:52ch}

.lobby{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.steps{list-style:none;padding:0;margin-top:36px;display:grid;gap:26px;counter-reset:s}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:18px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:50px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--honey);color:var(--on);font-weight:800;font-size:20px}
.steps h3{font-size:21px;font-weight:720}
.steps p{color:var(--dim);margin-top:4px;max-width:40ch}
.hive{border-radius:32px;padding:26px 26px 30px}
.hive-head{display:flex;align-items:center;justify-content:space-between}
.room{font-size:14px;color:var(--dim)}
.room strong{display:block;font-size:28px;color:var(--text);letter-spacing:.1em;font-weight:800}
.live{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb,var(--stream) 16%,transparent);color:var(--stream);font-weight:700;font-size:14px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--stream);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.comb{margin:28px auto 6px;display:grid;grid-template-columns:repeat(6,60px);grid-auto-rows:52px;justify-content:center;column-gap:6px;padding-right:33px}
.comb .c{width:60px;height:69px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--fill-2);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--on)}
.comb .c:nth-child(12n+7),.comb .c:nth-child(12n+8),.comb .c:nth-child(12n+9),.comb .c:nth-child(12n+10),.comb .c:nth-child(12n+11),.comb .c:nth-child(12n+12){margin-left:33px}
.comb .c.host{background:var(--honey)}
.comb .c.on{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.2);opacity:0}}
.feed{margin-top:18px;display:flex;justify-content:space-between;align-items:end;gap:16px}
.feed ul{list-style:none;padding:0;font-size:14.5px;color:var(--dim);min-height:66px}
.feed li b{color:var(--text);font-weight:650}
.feed li{animation:fade .4s both}
.count{text-align:right;font-size:14px;color:var(--dim)}
.count strong{display:block;font-size:32px;color:var(--text);font-weight:800;line-height:1}

.apps{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.app{display:flex;gap:16px;align-items:center;padding:18px;border-radius:24px;transition:transform .25s var(--ease)}
.app:hover{transform:translateY(-3px)}
.app img{width:64px;height:64px;border-radius:16px}
.app h3{font-size:18px;font-weight:720}
.app p{font-size:14.5px;color:var(--dim)}
.more{display:inline-block;margin-top:22px;color:var(--honey-text);font-weight:650}

@media (max-width:1100px){
  .lobby{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .chap{align-items:flex-end;justify-content:center;padding:48svh 14px 40px;min-height:110svh}
  .panel{padding:26px 22px;border-radius:var(--r-md)}
}
@media (max-width:900px){
  .copy .emblem{margin-bottom:12px}
  .copy h1{font-size:clamp(46px,13vw,72px)}
  .join{width:100%;flex-direction:column;border-radius:22px}
  .code input{flex:1;width:0;min-width:0}
  section.block{padding-top:84px}
  .comb{grid-template-columns:repeat(5,48px);grid-auto-rows:42px;padding-right:27px}
  .comb .c{width:48px;height:55px;font-size:12px}
  .comb .c:nth-child(n){margin-left:0}
  .comb .c:nth-child(10n+6),.comb .c:nth-child(10n+7),.comb .c:nth-child(10n+8),.comb .c:nth-child(10n+9),.comb .c:nth-child(10n+10){margin-left:27px}
}
@keyframes fo{from{opacity:0}}
@media (max-height:760px){.copy .emblem{width:100px;margin-bottom:10px}.copy h1{font-size:clamp(46px,6.4vw,96px)}}