/* Layout: oyun başlatıcısı (launcher) — tek koyu sinematik görünüm, HUD köşe işaretleri, perde geçişli üç görünüm */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --ink:#0A0912; --s1:#14121F; --s2:#1C1930; --s3:#25213B; --line:#2D294466; --line2:#2D2944;
  --fg:#EEEAE2; --dim:#9A97A8; --faint:#5D5B6C;
  --red:#FF3B4E; --red2:#FF6170; --gold:#FFB627; --violet:#7B5CFF; --ok:#3DDC97;
  --display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gx:max(16px, env(safe-area-inset-left, 0px)); --gxr:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.7,0,.15,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ink);color:var(--fg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gx);padding-right:var(--gxr)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.dim{color:var(--dim)}
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:3;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- Header ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:linear-gradient(var(--ink),color-mix(in srgb,var(--ink) 70%,transparent));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.brand svg{width:30px;height:30px;flex-shrink:0}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.04em;text-transform:uppercase}
.brand small{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--faint);margin-top:3px}
header nav{display:flex;gap:2px}
header nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--dim);padding:10px 16px;position:relative;transition:color .3s}
header nav a i{font-style:normal;color:var(--faint);margin-right:8px;transition:color .3s}
header nav a:hover{color:var(--fg)}
header nav a.on{color:var(--fg)}
header nav a.on i{color:var(--red)}
header nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
header nav a.on::after{transform:scaleX(1);transform-origin:left}
.hright{display:flex;align-items:center;gap:10px;justify-self:end}
.snd{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line2);position:relative;overflow:hidden;transition:border-color .3s}
.snd:hover{border-color:var(--dim)}
.snd .eq{display:flex;gap:2px;align-items:end;height:12px}
.snd .eq i{width:2px;height:4px;background:var(--fg);animation:eq 1.1s ease-in-out infinite}
.snd .eq i:nth-child(2){animation-delay:-.35s}.snd .eq i:nth-child(3){animation-delay:-.7s}.snd .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.snd[aria-pressed="false"] .eq i{animation:none;height:2px;background:var(--faint)}
.snd svg{width:16px;height:16px}
.snd[aria-pressed="false"] svg{opacity:.3}
@media (max-width:420px){#musBtn{display:none}}
.login{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;position:relative;overflow:hidden;white-space:nowrap}
.login svg{width:16px;height:16px}
.login span{position:relative;z-index:1}
.login::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .45s var(--ease)}
.login:hover::before{transform:none}
.login:hover{color:#fff}
.login:hover svg{position:relative;z-index:1}
.chip{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 4px;border:1px solid var(--line2);text-align:left}
.chip:hover{border-color:var(--dim)}
.av{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;background:var(--s3);font-family:var(--display);font-weight:800;font-size:16px;overflow:hidden;position:relative}
.av img{width:100%;height:100%;object-fit:cover}
.chip .cn{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.chip .cn b{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .cn small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.vf{color:var(--ok)} .pv{color:var(--gold)}
@media (max-width:820px){.bar{grid-template-columns:1fr auto}header nav{display:none}.brand small{display:none}}
@media (max-width:420px){.login .lt{display:none}.login{padding:0 12px}.chip .cn{display:none}.chip{padding:0 4px}}

/* ---------- Views ---------- */
main{position:relative;z-index:2}
.view{display:none}
.view.on{display:block}
#pgflash{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,59,78,.55),rgba(120,20,80,.18) 45%,transparent 75%)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;background:radial-gradient(60% 70% at 72% 50%,#3a0d16 0%,#120a12 45%,var(--ink) 80%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,7,11,.75) 30%,transparent 60%),linear-gradient(0deg,var(--ink),transparent 30%)}
.hero .wrap{position:relative;padding-block:clamp(56px,10vw,120px) 40px;min-height:min(820px,calc(100svh - 68px));display:flex;flex-direction:column}
.corner{position:absolute;width:18px;height:18px;border-color:var(--dim);border-style:solid;opacity:.6}
.corner.tl{top:20px;left:var(--gx);border-width:1px 0 0 1px}.corner.tr{top:20px;right:var(--gxr);border-width:1px 1px 0 0}
.corner.bl{bottom:20px;left:var(--gx);border-width:0 0 1px 1px}.corner.br{bottom:20px;right:var(--gxr);border-width:0 1px 1px 0}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--dim);flex-wrap:wrap}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.eyebrow .sep{width:28px;height:1px;background:var(--line2)}
h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.015em;margin:28px 0 30px;font-size:clamp(76px,14.5vw,210px)}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:inline-block}
h1 .o{color:transparent;-webkit-text-stroke:2px var(--red);text-shadow:6px 6px 0 rgba(255,59,78,.22);position:relative;animation:glitch 6s infinite}
h1 .o em{font-style:normal;color:var(--gold);-webkit-text-stroke:0}
@keyframes glitch{0%,91%,100%{text-shadow:6px 6px 0 rgba(255,59,78,.22)}92%{text-shadow:-6px 0 0 var(--violet),6px 0 0 var(--gold)}94%{text-shadow:6px 0 0 var(--violet),-6px 0 0 var(--gold)}96%{text-shadow:6px 6px 0 rgba(255,59,78,.22)}}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--dim);max-width:46ch;margin:0 0 36px}
.lead b{color:var(--fg);font-weight:600}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 28px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
.btn .bl{position:relative;display:block;overflow:hidden;height:1.2em;line-height:1.2em}
.btn .bl span{display:block;transition:transform .5s var(--ease)}
.btn .bl span+span{position:absolute;top:100%;left:0}
.btn:hover .bl span{transform:translateY(-100%)}
.btn svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.p{background:var(--red);color:#fff}
.btn.p::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn.p:hover::before{transform:none}
.btn.g{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.g:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn.w{background:var(--fg);color:var(--ink)}
.hud{margin-top:auto;padding-top:56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hud>div{padding:18px 20px 0 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.hud>div+div{padding-left:20px;border-left:1px solid var(--line)}
.hud b{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hud b small{font-size:.55em;color:var(--dim);margin-left:4px}
.hud .mono{color:var(--faint)}
.scrollcue{display:flex;align-items:center;gap:10px;color:var(--faint)}
.scrollcue i{width:1px;height:34px;background:var(--line2);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--fg);animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
@media (max-width:820px){.hud{grid-template-columns:1fr 1fr}.hud>div:nth-child(3){padding-left:0;border-left:0}.hud>div:nth-child(n+3){padding-top:18px}.scrollcue{display:none}.hero::after{background:linear-gradient(0deg,var(--ink) 5%,rgba(7,7,11,.5) 55%,rgba(7,7,11,.3))}}

/* ---------- Marquee ---------- */
.marq{background:var(--gold);color:var(--ink);overflow:hidden;white-space:nowrap;padding-block:16px;user-select:none;border-block:2px solid var(--ink)}
.marq .track{display:inline-flex;will-change:transform}
.marq span{font-family:var(--display);font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1;text-transform:uppercase;padding-right:40px;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marq span:nth-child(3n+2){color:var(--ink);-webkit-text-stroke:0}
.marq span::after{content:"✦";margin-left:40px;color:var(--red);-webkit-text-stroke:0}

/* ---------- Sections ---------- */
section.band{padding-block:clamp(72px,9vw,128px)}
.sh{display:grid;grid-template-columns:1fr minmax(0,420px);gap:28px;align-items:end;margin-bottom:48px}
@media (max-width:820px){.sh{grid-template-columns:1fr}}
.sh .mono{color:var(--red);display:flex;gap:12px;align-items:center}
.sh .mono::before{content:"";width:24px;height:1px;background:currentColor}
h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,7vw,104px);line-height:.85;margin:14px 0 0;letter-spacing:-.01em;text-wrap:balance}
h2 .o{color:transparent;-webkit-text-stroke:1px var(--fg)}
h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:34px;line-height:.95;margin:0;letter-spacing:.01em}
.sub{color:var(--dim);margin:0;max-width:48ch}

/* Featured */
.feat{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
@media (max-width:900px){.feat{grid-template-columns:1fr}}
.panel{background:var(--s1);border:1px solid var(--line);position:relative}
.fgame{display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-align:left;width:100%}
.poster{position:relative;aspect-ratio:16/8;max-width:100%;overflow:hidden;border-bottom:1px solid var(--line)}
.poster canvas{width:100%;height:100%;display:block;transition:transform 1.2s var(--ease)}
.fgame:hover .poster canvas,.card:hover .poster canvas{transform:scale(1.06)}
.poster .tag{position:absolute;top:16px;left:16px;display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--ink) 80%,transparent);padding:7px 10px;backdrop-filter:blur(6px)}
.poster .tag.live i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.poster .num{position:absolute;right:16px;bottom:12px;font-family:var(--display);font-weight:900;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(238,234,226,.5)}
.fbody{padding:26px;display:flex;flex-direction:column;gap:12px}
.fbody p{margin:0;color:var(--dim)}
.metas{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.metas span{border:1px solid var(--line2);padding:6px 10px;color:var(--dim)}
.season{display:flex;flex-direction:column}
.season .top{padding:24px 26px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cd div{background:var(--s2);padding:12px 6px 10px;text-align:center;display:flex;flex-direction:column;gap:4px}
.cd b{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold)}
.cd small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.mini{padding:10px 0;flex:1}
.mrow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 26px}
.mrow .rk{font-family:var(--display);font-weight:800;font-size:22px;color:var(--faint)}
.mrow .nm{display:flex;align-items:center;gap:10px;min-width:0}
.mrow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mrow .pt{font-family:var(--display);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
.empty{padding:26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--dim)}
.empty b{color:var(--fg);font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);position:relative;border-top:1px solid var(--line)}
.steps .rail{position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--red);transform-origin:left}
.steps>div.st{padding:32px 32px 0 0;display:flex;flex-direction:column;gap:14px;min-width:0}
.steps>div.st+div.st{padding-left:32px;border-left:1px solid var(--line)}
.steps .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold)}
.steps h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:.95;margin:0}
.steps p{margin:0;color:var(--dim)}
@media (max-width:820px){.steps{grid-template-columns:1fr}.steps>div.st+div.st{padding-left:0;border-left:0;border-top:1px solid var(--line)}.steps>div.st{padding-bottom:28px}}

/* Game grid */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.games{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-align:left;overflow:hidden;width:100%;transition:border-color .4s}
.card:hover{border-color:var(--line2)}
.card .fbody{flex:1}
.card .go{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.card .go b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.card .go svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.card:hover .go svg{transform:translateX(5px)}
.card[disabled]{cursor:default}
.card[disabled] .poster canvas{filter:grayscale(.85) brightness(.6)}

/* Leaderboard */
.lbgrid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media (max-width:960px){.lbgrid{grid-template-columns:1fr}}
.lrow{display:grid;grid-template-columns:64px 1fr 110px 120px;gap:12px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.lrow:last-child{border-bottom:0}
.lrow.head{color:var(--faint);padding-block:12px}
.lrow .rk{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;color:var(--faint)}
.lrow.r1 .rk{color:var(--gold)}
.lrow .nm{display:flex;gap:12px;align-items:center;min-width:0}
.lrow .nm div{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.lrow .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .nm small{color:var(--faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.lrow .pt{font-family:var(--display);font-weight:700;font-size:24px;text-align:right}
.lrow.me{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 12%,transparent),transparent)}
.role{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
@media (max-width:600px){.lrow{grid-template-columns:40px 1fr 90px;padding-inline:16px}.lrow>:nth-child(3){display:none}}
.rolecard{padding:28px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.rolecard::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.rolecard p{margin:0;color:var(--dim);font-size:15px}
.badge{width:84px;height:96px}

/* Footer */
footer{border-top:1px solid var(--line);position:relative;z-index:2;padding-block:48px 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
.fbig{font-family:var(--display);font-weight:900;font-size:clamp(44px,6vw,80px);line-height:.85;text-transform:uppercase}
.fbig span{color:var(--red)}
footer h5{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--dim);transition:color .3s}
footer a:hover{color:var(--fg)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:13px}

/* ---------- Curtain transition ---------- */
#curtain{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden}
#curtain .pn{position:absolute;inset:0;background:linear-gradient(104deg,var(--red) 0 24%,var(--ink) 24% 48%,var(--gold) 48% 72%,var(--violet) 72% 100%);clip-path:inset(100% 0 0 0)}
#curtain .tt span{background:var(--ink);padding:0 .14em;color:var(--fg);text-shadow:-5px 0 0 var(--red),5px 0 0 var(--violet)}
#curtain .ix span{background:var(--ink);padding:5px 12px;color:var(--gold)}
#curtain .edge{position:absolute;left:0;right:0;top:100%;height:1px;background:var(--red);box-shadow:0 0 30px 2px var(--red)}
#curtain .ct{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:0 16px}
#curtain .ix{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--red);overflow:hidden}
#curtain .ix span,#curtain .tt span{display:block}
#curtain .tt{overflow:hidden;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.85;font-size:clamp(64px,13vw,190px);padding-bottom:.04em}
#curtain .bar2{width:min(260px,60vw);height:1px;background:var(--line2);position:relative;overflow:hidden}
#curtain .bar2 i{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}

/* ---------- Preloader ---------- */
#pre{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center}
#pre .in{display:flex;flex-direction:column;align-items:center;gap:22px;grid-area:1/1;opacity:0}
#pre .rv{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:16px}
#pre .rvm{width:64px;height:64px}
#pre .rvw{font-family:var(--display);font-weight:900;font-size:clamp(52px,10vw,104px);letter-spacing:.14em;padding-left:.14em;line-height:1;overflow:hidden}
#pre .rvw span{display:inline-block}
#pre .rvg{color:var(--violet);letter-spacing:.5em;padding-left:.5em}
#pre svg{width:56px;height:56px}
#pre .pc{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
#pre .pl{width:200px;height:1px;background:var(--line2);position:relative}
#pre .pl i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}


/* ---------- RAVONİA açılışı ---------- */
#pre{background:var(--rv-bg,#000);overflow:hidden}
#embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#pre .rvwrap{width:min(860px,92vw,112vh);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:-3vh}
#pre .rvwrap img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
#pre .rvem{position:relative;width:100%}
#pre .rvem img{filter:drop-shadow(0 0 34px color-mix(in srgb,var(--rv-glow,#E5262E) 40%,transparent))}
#pre .rvshine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 130% 0/300% 100% no-repeat;-webkit-mask:url(../img/2baece8599.webp) center/100% 100% no-repeat;mask:url(../img/2baece8599.webp) center/100% 100% no-repeat;mix-blend-mode:screen}
#pre .rvgm{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--rv-glow,#E5262E) 60%,transparent))}
#pre .rvglow{position:absolute;left:50%;top:40%;width:110vmin;height:110vmin;margin:-55vmin 0 0 -55vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rv-glow,#E5262E) 30%,transparent),transparent 60%);opacity:0;z-index:1;pointer-events:none}
#pre .rvflare{position:absolute;top:40%;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--rv-glow,#E5262E) 44%,#fff 50%,var(--rv-glow,#E5262E) 56%,transparent);box-shadow:0 0 50px 8px color-mix(in srgb,var(--rv-glow,#E5262E) 50%,transparent);opacity:0;z-index:1;pointer-events:none}
#pre .rvflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#fff,rgba(255,59,78,.6) 45%,transparent 75%);opacity:0;pointer-events:none;z-index:3}
#pre .rvgate{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding-bottom:calc(16vh + env(safe-area-inset-bottom,0px));color:#fff}
#pre .rvgate .ring{position:absolute;left:50%;top:40%;width:130px;height:130px;margin:-65px 0 0 -65px;border:1px solid color-mix(in srgb,var(--rv-glow,#E5262E) 70%,#fff);border-radius:50%}
#pre .rvgate::before{content:"";position:absolute;left:50%;top:40%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--rv-glow,#E5262E);box-shadow:0 0 30px 6px var(--rv-glow,#E5262E)}
#pre .rvgate .mono{font-size:13px;letter-spacing:.42em;padding-left:.42em}
#pre .rvgate small{color:#666;font-size:10px;letter-spacing:.3em}
#pre .rvskip{position:absolute;right:calc(var(--gxr) + 8px);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:6;color:#777;border:1px solid #333;padding:10px 16px}
#pre .rvskip:hover{color:#fff;border-color:#777}
.rvfoot{display:block;width:180px;height:auto;margin-top:6px;opacity:.9}

/* ---------- Kahraman Kartları ---------- */
#arena{position:fixed;inset:0;z-index:76;background:radial-gradient(120% 80% at 50% 62%,#221a3d 0%,#0A0912 72%);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#arena .atable{position:absolute;inset:0;perspective:900px;display:grid;place-items:center;pointer-events:none}
#arena .felt{width:min(1150px,150vw);height:min(660px,92vh);border-radius:50%;transform:rotateX(58deg);background:radial-gradient(closest-side,#2c1d4a 0%,#1b1333 58%,#100c1f 76%,transparent 77%);box-shadow:inset 0 0 0 3px rgba(255,182,39,.28),inset 0 0 140px rgba(123,92,255,.3);position:relative}
#arena .felt::before{content:"";position:absolute;inset:16%;border-radius:50%;border:2px dashed rgba(255,182,39,.22)}
#arena .felt::after{content:"MARVEL TÜRKİYE";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:min(9vw,90px);color:rgba(255,255,255,.04);letter-spacing:.08em}
.atop{position:absolute;top:0;left:0;right:0;z-index:8;background:linear-gradient(#0A0912,rgba(10,9,18,0));display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gxr) 12px var(--gx);pointer-events:none}
.atop>*{pointer-events:auto}
.ascore{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--dim)}
.ascore b{font-family:var(--display);font-size:32px;color:var(--fg);font-weight:800;letter-spacing:0;vertical-align:middle}
.ascore .vs{color:var(--red);font-weight:700}
.board{position:absolute;inset:0;perspective:1400px;z-index:2}
.fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.amsg{position:absolute;left:0;right:0;top:40%;z-index:7;text-align:center;pointer-events:none;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(38px,8vw,100px);line-height:.9;opacity:0;text-shadow:0 6px 40px rgba(0,0,0,.8);padding:0 16px}
.amsg small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--fg);margin-top:12px;font-weight:500;text-shadow:none}
.ahint{position:absolute;left:0;right:0;bottom:calc(var(--ch,200px) * 1.02 + 18px + env(safe-area-inset-bottom,0px));text-align:center;z-index:5;color:var(--gold);pointer-events:none;opacity:0}
.hc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform-style:preserve-3d;will-change:transform}
.hc.sel{cursor:pointer}
.hc .in{position:absolute;inset:0;transform-style:preserve-3d}
.hc .face,.hc .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--cw)*.07);overflow:hidden}
.hc .back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#1c1930 0 8px,#241f3d 8px 16px);border:2px solid var(--gold);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hc .back svg,.pile .pb svg{width:46%}
.hc .face{background:linear-gradient(170deg,color-mix(in srgb,var(--c) 34%,#14121F),#0d0b16 62%);border:2px solid var(--rc);display:flex;flex-direction:column;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.hc .face.leg{border-color:transparent;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 34%,#14121F),#0d0b16 62%) padding-box,linear-gradient(135deg,#FF3B4E,#FFB627,#7B5CFF) border-box}
.hc .art{height:42%;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1);background:#07060c}
.hc .art svg{width:100%;height:100%;display:block}
.hc .hd{padding:5% 8% 2%;display:flex;flex-direction:column;gap:1px}
.hc .hd b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:calc(var(--cw)*.125);line-height:.92;color:var(--fg)}
.hc .hd b.long{font-size:calc(var(--cw)*.1)}
.hc .rar{font-family:var(--mono);font-size:calc(var(--cw)*.052);letter-spacing:.14em;text-transform:uppercase;color:var(--rc)}
.hc ul{list-style:none;margin:0;padding:0 5% 5%;display:grid;gap:1px;flex:1;align-content:end}
.hc li{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:calc(var(--cw)*.055);padding:1.2% 5%;border-radius:3px;color:var(--dim);transition:background .2s}
.hc li b{font-family:var(--display);font-size:calc(var(--cw)*.092);color:var(--fg);font-weight:800;line-height:1.05}
.hc li.hl{background:color-mix(in srgb,var(--gold) 26%,transparent);color:var(--fg)}
.hc li.hl b{color:var(--gold)}
.hc.pick li{cursor:pointer;background:rgba(255,255,255,.05);margin-bottom:1px}
.hc.pick li:hover{background:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--fg)}
.hc.glow .face{box-shadow:0 0 0 2px var(--gold),0 0 50px color-mix(in srgb,var(--c) 80%,transparent),0 0 120px color-mix(in srgb,var(--c) 40%,transparent)}
.pile{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform-origin:50% 50%}
.pile .pb{position:absolute;inset:0;border-radius:calc(var(--cw)*.07);background:repeating-linear-gradient(45deg,#1c1930 0 8px,#241f3d 8px 16px);border:2px solid var(--gold);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.pile .pb:first-child{transform:translate(5px,5px) rotate(4deg);opacity:.7}
.pile b{position:absolute;right:-10px;top:-10px;min-width:38px;height:38px;padding:0 6px;display:grid;place-items:center;background:var(--red);color:#fff;font-family:var(--display);font-size:22px;border-radius:19px;z-index:2}
.pile span{position:absolute;left:0;right:0;bottom:-26px;text-align:center;color:var(--dim)}
.fxp{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px;border-radius:50%;box-shadow:0 0 10px currentColor}
.fxsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fxflash{position:absolute;inset:0;mix-blend-mode:screen}
.fxring{position:absolute;width:100px;height:100px;margin:-50px;border-radius:50%;border:6px solid}
.fxorb{position:absolute;width:60px;height:60px;margin:-30px;border-radius:50%;filter:blur(1px)}
.fxbeam{position:absolute;height:18px;margin-top:-9px;border-radius:9px;background:linear-gradient(90deg,#fff,#fff 70%,var(--c));box-shadow:0 0 30px 10px var(--c),0 0 80px 20px var(--c)}
.fxportal{position:absolute;width:220px;height:220px;margin:-110px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--c) 0 6deg,transparent 6deg 14deg);-webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);filter:drop-shadow(0 0 16px var(--c)) brightness(1.4)}
.fxhex{position:absolute;width:180px;height:180px;margin:-90px;border-radius:50%;background:radial-gradient(circle,transparent 40%,color-mix(in srgb,var(--c) 50%,transparent) 70%,transparent 72%);border:3px solid var(--c);box-shadow:0 0 40px var(--c),inset 0 0 40px var(--c)}
.fxslash{position:absolute;width:7px;border-radius:4px;background:linear-gradient(#fff,var(--c));box-shadow:0 0 18px 4px var(--c)}
.fxvig{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 25%,color-mix(in srgb,var(--c) 45%,transparent) 75%,#000 100%)}
.aend{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(6,5,10,.82);backdrop-filter:blur(6px);padding:0 16px}
.aend b{font-family:var(--display);font-weight:900;font-size:clamp(64px,14vw,150px);line-height:.85;text-transform:uppercase}
.aend p{color:var(--dim);margin:0}
.aend p strong{color:var(--gold)}
.aend .rowb{justify-content:center;margin-top:12px}
/* ---------- Cursor ---------- */
#cur,#curd{position:fixed;left:0;top:0;pointer-events:none;z-index:120;border-radius:50%;display:none}
#cur{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(238,234,226,.55);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
#curd{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--fg)}
#cur.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(238,234,226,.07);border-color:rgba(238,234,226,.9)}
#cur.down{width:24px;height:24px;margin:-12px 0 0 -12px}
@media (hover:hover) and (pointer:fine){#cur,#curd{display:block}}

/* ---------- Modal ---------- */
#modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px var(--gxr) 20px var(--gx);background:rgba(4,4,7,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mbox{width:min(780px,100%);max-height:calc(100% - 16px);overflow:auto;background:var(--s1);border:1px solid var(--line2);position:relative;overscroll-behavior:contain}
.mtop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--s1);z-index:2}
.mtop .mono{color:var(--dim)}
.x{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line2);transition:border-color .3s,transform .5s var(--ease)}
.x:hover{border-color:var(--fg);transform:rotate(90deg)}
.mbody{padding:28px 24px 32px}
.handle{display:none}
.ghud{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.ghud span{background:var(--s2);padding:8px 12px;color:var(--dim)}
.ghud b{color:var(--fg);font-weight:500}
.clues{display:grid;gap:6px;margin:0 0 24px;padding:0;list-style:none}
.clues li{background:var(--s2);padding:14px 16px;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline;position:relative;overflow:hidden}
.clues li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red)}
.clues li .mono{color:var(--faint)}
.clues li.lock{color:var(--faint)}
.clues li.lock::before{background:var(--line2)}
.guess{display:flex;gap:8px;flex-wrap:wrap}
.field{flex:1;min-width:0;background:var(--ink);border:1px solid var(--line2);color:var(--fg);height:56px;padding:0 18px;font:inherit;font-size:17px;transition:border-color .3s}
.field:focus{border-color:var(--fg);outline:none}
.rowb{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ghost{height:42px;padding:0 16px;border:1px solid var(--line2);font-weight:600;font-size:14px;color:var(--dim);position:relative;overflow:hidden;transition:color .3s,border-color .3s}
.ghost:hover:not([disabled]){color:var(--fg);border-color:var(--dim)}
.ghost[disabled]{opacity:.4;cursor:default}
.fb{min-height:26px;margin-top:16px;font-weight:600}
.fb.ok{color:var(--ok)} .fb.no{color:var(--red2)}
.timer{height:2px;background:var(--s3);margin-bottom:26px;overflow:hidden}
.timer i{display:block;height:100%;background:var(--fg);transform-origin:left}
.timer.hot i{background:var(--red)}
.q{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,44px);line-height:.98;text-transform:uppercase;margin:0 0 26px;text-wrap:balance}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.opt{background:var(--s2);border:1px solid transparent;padding:18px;text-align:left;font-weight:600;font-size:16px;display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;transition:border-color .3s,background .3s}
.opt:hover:not([disabled]){border-color:var(--line2);background:var(--s3)}
.opt .mono{color:var(--faint)}
.opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--s2))}
.opt.wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--s2))}
.end{text-align:center;padding:8px 0 4px;display:flex;flex-direction:column;align-items:center;gap:10px}
.end .big{font-family:var(--display);font-weight:900;font-size:clamp(96px,16vw,150px);line-height:.85;font-variant-numeric:tabular-nums}
.end p{color:var(--dim);margin:0}
.end .rowb{justify-content:center;margin-top:18px}
/* Login modal */
.lg{display:grid;gap:22px}
.lg .lh{display:flex;gap:16px;align-items:center}
.lg .lh svg{width:44px;height:44px;flex-shrink:0}
.lg ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lg li{background:var(--s2);padding:12px 16px;display:flex;gap:12px;align-items:center;color:var(--dim)}
.lg li svg{flex-shrink:0;color:var(--ok)}
.lg .note{border:1px dashed var(--line2);padding:14px 16px;color:var(--dim);font-size:14px}
.lg .note b{color:var(--gold)}

#toast{position:fixed;right:var(--gxr);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;width:min(360px,calc(100% - 32px));background:var(--s2);border:1px solid var(--line2);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 24px 60px rgba(0,0,0,.55)}
#toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
#toast p{margin:0;font-size:14px;color:var(--dim)}
#toast b{display:block;color:var(--fg);margin-bottom:2px}

/* Ripple */
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none;z-index:0}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- Mobile ---------- */
.tabbar{display:none}
.swipehint{display:none;align-items:center;justify-content:center;gap:12px;color:var(--faint);padding-block:28px 0}
.swipehint i{width:28px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.swipehint i::after{content:"";position:absolute;inset:0;background:var(--fg);animation:sw 2s var(--ease) infinite}
@keyframes sw{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (max-width:820px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--s1) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line2);padding:0 var(--gxr) env(safe-area-inset-bottom,0px) var(--gx)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0 10px;text-decoration:none;color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;transition:color .3s}
  .tabbar svg{width:22px;height:22px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
  .tabbar a.on{color:var(--fg)}
  .tabbar a.on svg{transform:translateY(-2px);color:var(--red)}
  .tabbar a::before{content:"";position:absolute;top:-1px;left:32%;right:32%;height:2px;background:var(--red);transform:scaleX(0);transition:transform .5s var(--ease)}
  .tabbar a.on::before{transform:scaleX(1)}
  footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ctas .btn{flex:1;justify-content:center;padding:0 18px}
  .swipehint{display:flex}
  .card,.fgame,.opt{-webkit-tap-highlight-color:transparent}
  .card:active,.fgame:active{transform:scale(.985);transition:transform .2s}
  #modal{place-items:end center;padding:0}
  .mbox{width:100%;max-height:92%;border-bottom:0;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .mtop{border-radius:18px 18px 0 0;padding-top:26px;touch-action:none}
  .handle{display:block;position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line2)}
  .mbody{padding:22px 18px 28px}
  .opt{padding:18px 16px;font-size:17px}
  .corner{display:none}
}

/* =================== ÇİZGİ ROMAN DOKUSU (mürekkep, halftone, kağıt) =================== */
:root{--inkc:#07060b;--paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");--dots:radial-gradient(rgba(255,255,255,.07) 1.1px,transparent 1.3px)}
html,body{margin:0}
body{background:var(--ink) var(--paper)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(255,59,78,.22) 1.4px,transparent 1.6px) 0 0/9px 9px;-webkit-mask:linear-gradient(105deg,transparent 35%,#000 75%);mask:linear-gradient(105deg,transparent 35%,#000 75%);mix-blend-mode:screen}
.panel{border:3px solid var(--inkc);border-radius:6px;box-shadow:8px 8px 0 var(--inkc),inset 0 0 0 1px rgba(255,255,255,.07);background-color:var(--s1);background-image:var(--dots),var(--paper);background-size:8px 8px,auto}
.panel:hover{box-shadow:10px 10px 0 var(--inkc),inset 0 0 0 1px rgba(255,182,39,.25)}
.poster{border-bottom:3px solid var(--inkc)}
.poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(0,0,0,.55) 1.3px,transparent 1.5px) 0 0/7px 7px;-webkit-mask:linear-gradient(to bottom,transparent 40%,#000);mask:linear-gradient(to bottom,transparent 40%,#000)}
.poster .tag{border:2px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc);background:var(--gold);color:var(--inkc);font-weight:700}
.poster .tag.live{background:var(--ok)}
.poster .tag.live i{background:var(--inkc)}
.btn{border:3px solid var(--inkc);box-shadow:5px 5px 0 var(--inkc);border-radius:4px;transition:box-shadow .15s,translate .15s}
.btn:active{box-shadow:1px 1px 0 var(--inkc);translate:4px 4px}
.btn.g{background:var(--s2);box-shadow:5px 5px 0 var(--inkc),inset 0 0 0 1px var(--line2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{height:46px;padding:0 18px;font-size:16px}
.login{border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);border-radius:4px}
.ghost{border:2px solid var(--line2);border-radius:4px;background:var(--s2)}
h2{text-shadow:5px 5px 0 var(--inkc)}
h1 .ln>span:not(.o){text-shadow:7px 7px 0 var(--inkc),0 0 60px rgba(255,59,78,.25)}
h3{text-shadow:3px 3px 0 var(--inkc)}
.marq{border-block:3px solid var(--inkc);background-image:radial-gradient(rgba(0,0,0,.18) 1.5px,transparent 1.7px);background-size:8px 8px}
.sh .mono{background:var(--inkc);padding:6px 10px;display:inline-flex;border-radius:3px}
.mbox{border:3px solid var(--inkc);box-shadow:10px 10px 0 var(--inkc);background-image:var(--dots),var(--paper);background-size:8px 8px,auto}
.mtop{border-bottom:3px solid var(--inkc)}
.opt{border:2px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc)}
.clues li{border:2px solid var(--inkc)}
.field{border:3px solid var(--inkc);box-shadow:inset 3px 3px 0 rgba(0,0,0,.4);border-radius:4px}
.field:focus{border-color:var(--gold)}
.hud b{text-shadow:3px 3px 0 var(--inkc)}
.cd div{border:2px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc)}
#toast{border:3px solid var(--inkc);box-shadow:8px 8px 0 var(--inkc)}
.av{border:2px solid var(--inkc);position:relative}
.av img{position:absolute;inset:0}
header{border-bottom:3px solid var(--inkc)}
.tabbar{border-top:3px solid var(--inkc)!important}
/* TÜRKİYE elektrik */
h1 .o{display:inline-block;position:relative}
h1 .o.zz{animation:none!important;color:#eaf6ff;-webkit-text-stroke:2px #fff;text-shadow:0 0 6px #fff,0 0 18px #5AB4FF,0 0 40px #5AB4FF,-4px 0 0 var(--red),4px 0 0 var(--violet);transform:translateX(var(--zx,0));filter:brightness(1.6)}
h1 .o.zo{opacity:.25;text-shadow:none;filter:brightness(.6)}
h1 .o svg.arc{position:absolute;inset:-10% -2%;width:104%;height:120%;pointer-events:none;overflow:visible}
/* Ses paneli */
.sndwrap{position:relative}
.sndpop{position:absolute;right:0;top:calc(100% + 12px);width:250px;background:var(--s1);border:3px solid var(--inkc);box-shadow:8px 8px 0 var(--inkc);padding:16px;display:grid;gap:10px;z-index:70;border-radius:6px}
.sndpop .vr{display:grid;grid-template-columns:70px 1fr 34px;gap:10px;align-items:center}
.sndpop output{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:right}
.sndpop input[type=range]{width:100%;accent-color:var(--red)}
html:not(.music-on) .snd .eq i{animation:none;height:3px;background:var(--faint)}
/* Kartlar (yeni) */
.hc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform-style:preserve-3d;will-change:transform}
.hc .in{position:absolute;inset:0;transform-style:preserve-3d}
.hc .face,.hc .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--cw)*.072);overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.hc .face img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.hc .back{transform:rotateY(180deg)}
.cbk{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8%;border-radius:inherit;background:radial-gradient(rgba(255,182,39,.16) 1.4px,transparent 1.6px) 0 0/9px 9px,repeating-linear-gradient(45deg,#1c1930 0 9px,#241f3d 9px 18px);border:calc(var(--cw,180px)*.04) solid #07060b;box-shadow:inset 0 0 0 3px var(--gold)}
.cbk svg{width:42%}
.cbk span{font-family:Bangers,var(--display);letter-spacing:.08em;color:var(--gold);font-size:calc(var(--cw,180px)*.075);text-shadow:2px 2px 0 #07060b}
.hc .srs{position:absolute;left:5%;right:5%;top:var(--sy0);height:calc(var(--sdy)*5);display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}
.hc .sr{pointer-events:none;border-radius:4px;border:0;background:transparent;transition:background .2s,box-shadow .2s}
.hc .sr.hl{background:rgba(255,182,39,.22);box-shadow:inset 0 0 0 2px var(--gold)}
.hc .sr.on{background:rgba(255,59,78,.28);box-shadow:inset 0 0 0 3px var(--red)}
.hc.selectable{cursor:pointer}
.hc.picked .sr{pointer-events:auto;cursor:pointer}
.hc.picked .sr:hover{background:rgba(255,255,255,.12)}
.hc.picked{filter:drop-shadow(0 0 22px rgba(255,182,39,.55))}
.hc.glow{filter:drop-shadow(0 0 28px var(--gold)) drop-shadow(0 0 60px rgba(255,59,78,.6))}
.mypile{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch)}
.mypile .cbk{box-shadow:inset 0 0 0 3px var(--gold),6px 6px 0 #07060b}
.mypile b{position:absolute;right:-12px;top:-12px;min-width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:#fff;font-family:Bangers,var(--display);font-size:26px;border-radius:22px;border:3px solid #07060b;z-index:2}
.seat{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--s1);border:3px solid var(--inkc);box-shadow:5px 5px 0 var(--inkc);padding:6px 12px 6px 6px;border-radius:30px;white-space:nowrap;transition:box-shadow .3s}
.seat .sn{display:flex;flex-direction:column;line-height:1.15}
.seat .sn b{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.seat .sn small{font-size:10px;color:var(--dim);letter-spacing:.06em}
.seat .sb{display:flex;gap:3px;margin-left:4px}
.seat .sb i{width:12px;height:17px;border-radius:2px;background:var(--gold);border:2px solid var(--inkc)}
.seat.turn{box-shadow:5px 5px 0 var(--inkc),0 0 0 3px var(--gold),0 0 30px rgba(255,182,39,.6)}
.seat.ready .stt{color:var(--ok)}
.seat.out{opacity:.4;filter:grayscale(1)}
.seat.mine{left:auto;top:auto;right:calc(var(--gxr) + 4px);bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:none!important}
@media (max-width:600px){.seat .sb{display:none}.seat .sn b{max-width:76px;font-size:12px}.seat{padding:4px 10px 4px 4px;gap:6px}.seat.mine{display:none}}
#abar{position:absolute;left:50%;bottom:calc(var(--ch,250px) + 40px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,calc(100% - 24px))}
#abar .stp{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
#abar .stb{background:var(--s2);border:3px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc);border-radius:6px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .2s}
#abar .stb span{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim)}
#abar .stb b{font-family:Bangers,var(--display);font-size:24px;line-height:1;color:var(--fg)}
#abar .stb.on{background:var(--red)} #abar .stb.on span{color:#fff}
#abar .stb:hover{background:var(--s3)}
#abar .cfr{display:flex;gap:10px}
.cword{position:absolute;left:0;top:0;width:220px;height:130px;display:grid;place-items:center;pointer-events:none;z-index:8}
.cword svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(5px 5px 0 #07060b)}
.cword span{position:relative;font-family:Bangers,Impact,sans-serif;font-size:42px;color:var(--c);-webkit-text-stroke:2px #07060b;text-shadow:3px 3px 0 #07060b;letter-spacing:.03em;white-space:nowrap}
.fxarrow{position:absolute;left:0;top:0;width:90px;height:6px;margin:-3px 0 0 -90px;background:linear-gradient(90deg,transparent,#fff 30%,#fff);border-radius:3px;box-shadow:0 0 14px var(--c)}
.fxarrow::after{content:"";position:absolute;right:-12px;top:-7px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.fxp.fire{width:12px;height:12px;margin:-6px;filter:blur(1px)}
.amsg .mt{display:inline-block;font-family:Bangers,var(--display);color:var(--mc);-webkit-text-stroke:3px #07060b;text-shadow:7px 7px 0 #07060b;letter-spacing:.03em}
.amsg small{color:#fff;background:#07060b;display:inline-block;padding:6px 12px;margin-top:14px}
/* Lobi */
#lobby{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:70px var(--gxr) 24px var(--gx);overflow:auto}
.lpanel{width:min(560px,100%);background:var(--s1);border:3px solid var(--inkc);box-shadow:10px 10px 0 var(--inkc);border-radius:8px;padding:26px;display:grid;gap:16px;background-image:var(--dots),var(--paper);background-size:8px 8px,auto}
.lpanel .lt{font-family:Bangers,var(--display);font-size:clamp(40px,7vw,60px);letter-spacing:.02em;margin:0;line-height:.9;text-shadow:5px 5px 0 var(--inkc)}
.lbtns{display:grid;gap:10px}
.lbtn{text-align:left;background:var(--s2);border:3px solid var(--inkc);box-shadow:5px 5px 0 var(--inkc);border-radius:6px;padding:14px 16px;display:grid;gap:3px;transition:transform .2s,background .2s}
.lbtn:hover{background:var(--s3);transform:translate(-2px,-2px)}
.lbtn b{font-family:Bangers,var(--display);font-size:28px;letter-spacing:.03em;color:var(--gold);line-height:1}
.lbtn span{color:var(--dim);font-size:14px}
.lme{display:flex;align-items:center;gap:12px}
.lme small{display:block}
.lnote{margin:0;color:var(--gold);font-size:14px}
.rules summary{cursor:pointer;color:var(--dim)} .rules p{color:var(--dim);font-size:14px;margin:10px 0 0}
.code{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code b{font-family:Bangers,var(--display);font-size:64px;letter-spacing:.14em;color:var(--gold);text-shadow:5px 5px 0 var(--inkc);line-height:1}
.code-in{font-family:Bangers,var(--display);font-size:32px;letter-spacing:.2em}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plist li{display:flex;align-items:center;gap:12px;background:var(--s2);border:2px solid var(--inkc);border-radius:30px;padding:6px 10px 6px 6px}
.plist li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist li .mono{color:var(--dim)}
.plist li.bot{opacity:.85}
.plist li.empty{justify-content:center;color:var(--faint);border-style:dashed;min-height:52px}
.x.sm{width:30px;height:30px;font-size:18px}
.rank{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;width:min(460px,100%)}
.rank li{display:flex;align-items:center;gap:12px;background:var(--s1);border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);border-radius:8px;padding:8px 14px 8px 8px}
.rank li .rk{font-family:Bangers,var(--display);font-size:28px;width:26px;text-align:center;color:var(--gold)}
.rank li .nm{flex:1;text-align:left;font-weight:600}
.rank li b{font-family:Bangers,var(--display);font-size:24px;color:var(--gold)}
.rank li.me{background:color-mix(in srgb,var(--red) 22%,var(--s1))}
.aend b.big2,.aend>b{font-family:Bangers,var(--display);-webkit-text-stroke:3px #07060b;text-shadow:8px 8px 0 #07060b}
.or{text-align:center}
.steps2{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--dim)} .steps2 b{color:var(--fg)} .steps2 code{display:block;margin-top:6px;background:var(--ink);padding:8px 10px;border-radius:4px;color:var(--gold);font-size:12px;word-break:break-all}
/* Yüksek mi Düşük mü / Hafıza */
.hl2{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.hlc{aspect-ratio:360/504;width:100%;max-width:210px;justify-self:center;perspective:900px}
.hlc img{width:100%;height:100%;display:block;border-radius:10px;box-shadow:6px 6px 0 #07060b}
.hlq{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hlq b{font-family:Bangers,var(--display);font-size:30px;letter-spacing:.03em}
.hcflip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.hcflip .f,.hcflip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden}
.hcflip .b{transform:rotateY(180deg)}
.hcflip .b img{width:100%;height:100%;display:block}
.hcflip .f .cbk,.mc .cbk{--cw:110px}
@media (max-width:560px){.hl2{grid-template-columns:1fr 1fr}.hlq{grid-column:1/-1;order:-1}}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mc{aspect-ratio:360/504;perspective:800px;padding:0;border:0;background:none}
.mc.ok{filter:drop-shadow(0 0 12px var(--ok))}
@media (max-width:560px){.mem{gap:6px}}

h1 .o{animation:none!important}
.hc .face{border:0!important;background:#07060b!important;display:block!important}
.hc .face.leg{background:#07060b!important}


/* =================== ÇİZGİ ROMAN ANA MENÜ + FONTLAR =================== */
:root{--display:"Bangers","Luckiest Guy",Impact,"Arial Black",sans-serif;--body:"Comic Relief","Patrick Hand","Comic Sans MS","Chalkboard SE",system-ui,sans-serif;--mono:"Comic Relief","Patrick Hand","Comic Sans MS",system-ui,sans-serif}
html{font-synthesis:none}
body{font-weight:700;letter-spacing:.005em}
.mono{font-weight:700;letter-spacing:.14em}
h1,h2,h3,h4,.btn,.lbtn b,.hud b,.cd b,.fbig,.brand b,.amsg .mt,.code b,.rank li b,.lrow .rk,.lrow .pt,.mrow .rk,.mrow .pt,.end .big,.q,header nav a,.tabbar a,.steps h4{font-family:var(--display)!important;font-weight:400!important;letter-spacing:.03em}
header nav a{font-size:20px;letter-spacing:.06em}
header nav a i{font-family:var(--body);font-size:12px}
.brand b{font-size:26px;letter-spacing:.04em}
.sub,.lead,p{font-family:var(--body)}
h2{font-size:clamp(56px,8vw,118px);letter-spacing:.02em;text-shadow:3px 3px 0 var(--inkc),6px 6px 0 var(--inkc),9px 9px 0 rgba(255,59,78,.55)}
h2 .o{color:var(--gold);-webkit-text-stroke:0}
/* --- sayfa ızgarası --- */
.hero.comic{border-bottom:0;overflow:visible;isolation:auto}
.hero.comic::before,.hero.comic::after{display:none}
.hero.comic .wrap{min-height:0;display:block;padding-block:26px 44px}
.cpage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px}
.cp{position:relative;border:5px solid var(--inkc);background:var(--s1);box-shadow:9px 9px 0 var(--inkc);overflow:hidden;border-radius:4px}
.cp-main{grid-row:1/3;min-height:min(660px,80vh);padding:clamp(22px,3.4vw,46px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;transform:rotate(-.5deg);isolation:isolate}
.cp-main #gl{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.cp-main .speed{position:absolute;inset:0;z-index:-2;pointer-events:none;background:repeating-conic-gradient(from 0deg at 72% 38%,rgba(255,255,255,.07) 0 1.6deg,transparent 1.6deg 6deg);-webkit-mask:radial-gradient(circle at 72% 38%,transparent 18%,#000 60%);mask:radial-gradient(circle at 72% 38%,transparent 18%,#000 60%)}
.cp-main .dots2{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(0,0,0,.6) 1.6px,transparent 1.8px) 0 0/9px 9px;-webkit-mask:linear-gradient(to top,#000 10%,transparent 65%);mask:linear-gradient(to top,#000 10%,transparent 65%)}
.cap{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--gold);color:var(--inkc)!important;font-family:var(--display);font-weight:400;letter-spacing:.07em;font-size:18px;padding:6px 14px;border:4px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);text-transform:uppercase}
.cap .dot{background:var(--inkc)!important;box-shadow:0 0 0 3px rgba(7,6,11,.25)!important}
.cp>.cap.tl{position:absolute;top:-4px;left:-4px;z-index:3}
.comic h1{font-family:var(--display);font-weight:400;font-size:clamp(66px,11vw,190px);line-height:.92;margin:0;letter-spacing:.015em}
.comic h1 .ln{overflow:visible;padding:0}
.comic h1 .ln>span:not(.o){color:#fff;-webkit-text-stroke:4px var(--inkc);paint-order:stroke fill;text-shadow:2px 2px 0 var(--inkc),4px 4px 0 var(--inkc),6px 6px 0 var(--inkc),8px 8px 0 var(--inkc),10px 10px 0 var(--inkc),0 0 60px rgba(255,59,78,.35)}
.comic h1 .o{color:var(--gold)!important;-webkit-text-stroke:4px var(--inkc)!important;paint-order:stroke fill;text-shadow:2px 2px 0 var(--red),4px 4px 0 var(--red),6px 6px 0 var(--red),8px 8px 0 var(--inkc),10px 10px 0 var(--inkc),12px 12px 0 var(--inkc)!important;transform:rotate(-2deg) translateX(.12em)}
.comic h1 .o em{color:var(--red);font-style:normal}
.comic h1 .o.zz{color:#eaf6ff!important;text-shadow:0 0 6px #fff,0 0 22px #5AB4FF,0 0 50px #5AB4FF,6px 6px 0 var(--inkc)!important;filter:brightness(1.4)}
.comic h1 .o.zo{opacity:.35}
.balloon{position:relative;align-self:flex-start;max-width:min(540px,100%);background:#fffdf4;color:var(--inkc)!important;font-family:var(--body);font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.4;padding:16px 22px;border:4px solid var(--inkc);border-radius:28px;box-shadow:6px 6px 0 var(--inkc);transform:rotate(.8deg);margin:6px 0 4px!important}
.balloon b{color:var(--red)!important}
.balloon::after{content:"";position:absolute;left:46px;top:-22px;width:30px;height:26px;background:#fffdf4;border-left:4px solid var(--inkc);border-top:4px solid var(--inkc);transform:skewX(-28deg) rotate(10deg);clip-path:polygon(0 0,100% 0,0 100%)}
.burst{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,36px);width:clamp(110px,13vw,170px);aspect-ratio:1;display:grid;place-items:center;text-align:center;z-index:2;filter:drop-shadow(6px 6px 0 var(--inkc));animation:bpulse 2.4s ease-in-out infinite}
.burst::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:polygon(50% 0,59% 18%,79% 6%,76% 28%,98% 26%,84% 43%,100% 58%,79% 64%,88% 85%,66% 79%,58% 100%,47% 82%,30% 97%,29% 76%,6% 82%,17% 62%,0 48%,20% 38%,9% 17%,31% 21%,36% 2%)}
.burst::after{content:"";position:absolute;inset:9%;background:var(--gold);clip-path:polygon(50% 0,59% 18%,79% 6%,76% 28%,98% 26%,84% 43%,100% 58%,79% 64%,88% 85%,66% 79%,58% 100%,47% 82%,30% 97%,29% 76%,6% 82%,17% 62%,0 48%,20% 38%,9% 17%,31% 21%,36% 2%)}
.burst span{position:relative;z-index:1;font-family:var(--display);font-size:clamp(24px,3vw,38px);line-height:.85;color:var(--inkc);transform:rotate(-12deg)}
@keyframes bpulse{0%,100%{transform:rotate(8deg) scale(1)}50%{transform:rotate(4deg) scale(1.07)}}
.cp-feat{padding:0;text-align:left;cursor:pointer;transform:rotate(.7deg);transition:transform .25s,box-shadow .25s;min-height:260px;display:block;width:100%}
.cp-feat:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:13px 13px 0 var(--inkc)}
.cp-feat canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cp-feat .cpt{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 14px;background:var(--inkc);font-family:var(--display);font-size:clamp(28px,3vw,40px);line-height:.9;color:#fff;letter-spacing:.03em}
.cp-feat .cpt small{display:block;font-family:var(--body);font-size:14px;color:var(--gold);letter-spacing:.02em;margin-top:6px}
.cp-feat .pow{position:absolute;right:14px;top:14px;background:var(--red);color:#fff;font-family:var(--display);font-size:26px;padding:4px 14px;border:4px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);transform:rotate(8deg)}
.cp-cd{padding:58px 20px 20px;background:var(--red);background-image:radial-gradient(rgba(0,0,0,.28) 1.6px,transparent 1.8px);background-size:9px 9px;transform:rotate(-.8deg);display:flex;flex-direction:column;gap:8px;justify-content:center}
.cp-cd #hCd{font-family:var(--display);font-weight:400;font-size:clamp(46px,5vw,72px);line-height:.9;color:#fff;-webkit-text-stroke:3px var(--inkc);paint-order:stroke fill;text-shadow:5px 5px 0 var(--inkc)}
.cp-cd #hCd small{font-size:.5em;margin:0 6px 0 2px;color:var(--gold)}
.cp-cd .mono{color:#fff;font-size:12px}
.cp-hud{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);background:var(--gold);transform:rotate(.25deg)}
.cp-hud>div{padding:14px 20px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--inkc)}
.cp-hud>div+div{border-left:4px solid var(--inkc)}
.cp-hud .mono{color:var(--inkc)!important;font-size:12px}
.cp-hud b{font-family:var(--display);font-size:42px;line-height:1;color:var(--inkc)}
.cp-hud b small{font-family:var(--body);font-size:14px;margin-left:5px}
.comic .ctas .btn{height:62px;font-size:24px}
@media (max-width:600px){.hide-m{display:none}.burst{top:auto;bottom:auto;top:58px;right:8px;width:84px}.comic .ctas .btn{height:54px;font-size:19px;padding:0 14px}.cap{font-size:15px}.cp-main{padding-top:20px}}
@media (max-width:900px){.cpage{grid-template-columns:1fr}.cp-main{grid-row:auto;min-height:540px}.cp-feat{min-height:220px}.cp-hud{grid-template-columns:1fr}.cp-hud>div+div{border-left:0;border-top:4px solid var(--inkc)}.burst{width:96px}}
/* bölüm başlıkları ve kartlar: çizgi roman */
.sh .mono{background:var(--gold);color:var(--inkc)!important;font-family:var(--display);font-size:18px;font-weight:400;letter-spacing:.08em;border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc)}
.sh .mono::before{display:none}
.panel h3{font-size:38px;letter-spacing:.03em}
.card:nth-child(odd){transform:rotate(-.6deg)} .card:nth-child(even){transform:rotate(.6deg)}
.card:hover{transform:rotate(0) translate(-3px,-3px)}
.steps h4{font-size:36px}
.marq span{font-family:var(--display)!important;font-weight:400!important;letter-spacing:.03em}
/* ---------- 3D masa ---------- */
#arena{background:radial-gradient(ellipse 70% 45% at 50% -5%,rgba(255,214,150,.2),transparent 70%),radial-gradient(130% 95% at 50% 75%,#2a1d44 0%,#0b0913 72%)!important}
#arena::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/8px 8px;-webkit-mask:radial-gradient(ellipse at 50% 60%,transparent 40%,#000 90%);mask:radial-gradient(ellipse at 50% 60%,transparent 40%,#000 90%)}
#arena .atable{perspective:1050px;perspective-origin:50% 18%;z-index:0}
#arena .felt{width:min(1260px,165vw)!important;height:min(740px,98vh)!important;border-radius:50%!important;transform-style:preserve-3d;
  background:radial-gradient(closest-side,rgba(255,240,200,.2),transparent 62%),radial-gradient(rgba(0,0,0,.28) 1px,transparent 1.3px) 0 0/7px 7px,radial-gradient(closest-side,#4a2475 0%,#341a58 50%,#221038 78%,#170b27 100%)!important;
  box-shadow:inset 0 0 0 9px #d39a46,inset 0 0 0 13px #07060b,inset 0 0 100px 40px rgba(0,0,0,.55),
    0 0 0 16px #7a4320,0 0 0 21px #4a2410,0 0 0 25px #07060b,0 22px 0 22px #34190a,0 26px 0 25px #07060b,0 90px 110px 50px rgba(0,0,0,.8)!important}
#arena .felt::before{inset:15%!important;border:3px dashed rgba(255,182,39,.35)!important;box-shadow:0 0 0 18px rgba(255,182,39,.04),0 0 60px rgba(123,92,255,.25) inset}
#arena .felt::after{content:"MARVEL TÜRKİYE"!important;font-family:var(--display)!important;font-weight:400!important;font-size:min(10vw,108px)!important;color:rgba(255,182,39,.1)!important;letter-spacing:.08em!important;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#arena .felt i.shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg at 50% 50%,transparent 0 70%,rgba(255,255,255,.08) 78%,transparent 86%);pointer-events:none}
.hc .face{box-shadow:0 18px 30px rgba(0,0,0,.55),0 4px 0 #07060b!important}
/* ---------- Ravo rehber ---------- */
.ravobtn{position:fixed;left:calc(var(--gx) + 4px);top:calc(env(safe-area-inset-top,0px) + 86px);z-index:65;width:64px;height:64px;border-radius:50%;background:var(--gold);border:4px solid var(--inkc);box-shadow:5px 5px 0 var(--inkc);display:grid;place-items:center;transition:transform .2s}
.ravobtn:hover{transform:translate(-2px,-2px) rotate(-6deg)}
.ravobtn svg{width:40px;height:40px}
.ravotip{position:fixed;left:calc(var(--gx) + 78px);top:calc(env(safe-area-inset-top,0px) + 98px);z-index:65;background:#fffdf4;color:var(--inkc);font-family:var(--body);font-weight:700;font-size:15px;padding:10px 14px;border:3px solid var(--inkc);border-radius:18px;box-shadow:4px 4px 0 var(--inkc);transform-origin:0% 0%;white-space:nowrap}
.ravo{position:fixed;left:calc(var(--gx) + 4px);top:calc(env(safe-area-inset-top,0px) + 164px);z-index:66;width:min(380px,calc(100% - 32px));height:min(540px,calc(100% - 250px));display:flex;flex-direction:column;background:var(--s1);border:4px solid var(--inkc);box-shadow:9px 9px 0 var(--inkc);border-radius:10px;overflow:hidden;background-image:var(--dots),var(--paper);background-size:8px 8px,auto}
.rv-top{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--red);border-bottom:4px solid var(--inkc)}
.rv-top b{font-family:var(--display);font-size:26px;letter-spacing:.06em;line-height:1;color:#fff;text-shadow:2px 2px 0 var(--inkc)}
.rv-top small{display:block;color:#fff;font-size:12px}
.rv-top .x{margin-left:auto;background:var(--inkc);color:#fff;border-color:var(--inkc)}
.rv-av{width:42px;height:42px;border-radius:50%;background:var(--gold);border:3px solid var(--inkc);display:grid;place-items:center;flex-shrink:0}
.rv-av svg{width:30px;height:30px}
.rv-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.rv-m{max-width:86%;padding:10px 14px;border:3px solid var(--inkc);border-radius:16px;font-size:15px;line-height:1.4;box-shadow:3px 3px 0 var(--inkc)}
.rv-m.bot{align-self:flex-start;background:#fffdf4;color:var(--inkc);border-bottom-left-radius:4px}
.rv-m.me{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:4px}
.rv-acts{display:flex;flex-wrap:wrap;gap:6px}
.rv-acts button{background:var(--gold);color:var(--inkc);font-family:var(--display);font-size:16px;letter-spacing:.04em;padding:6px 12px;border:3px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc);border-radius:6px}
.rv-acts button:hover{background:#ffc94d;transform:translate(-1px,-1px)}
.dots{display:inline-flex;gap:4px} .dots i{width:7px;height:7px;border-radius:50%;background:var(--inkc);animation:dt 1s infinite} .dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
@keyframes dt{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.rv-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px;scrollbar-width:none}
.rv-chips button{flex-shrink:0;background:var(--s2);color:var(--fg);border:2px solid var(--inkc);border-radius:14px;padding:6px 10px;font-size:13px;font-weight:700}
.rv-in{display:flex;gap:8px;padding:10px 12px 12px;border-top:3px solid var(--inkc);background:var(--s2)}
.rv-in input{flex:1;min-width:0;background:var(--ink);border:3px solid var(--inkc);color:var(--fg);border-radius:8px;padding:10px 12px;font:inherit;font-size:15px}
.rv-in input:focus{outline:none;border-color:var(--gold)}
.rv-in button{background:var(--red);color:#fff;font-family:var(--display);font-size:20px;padding:0 16px;border:3px solid var(--inkc);border-radius:8px;box-shadow:3px 3px 0 var(--inkc)}
@media (max-width:820px){.ravobtn{top:calc(env(safe-area-inset-top,0px) + 78px);width:56px;height:56px}.ravo{top:calc(env(safe-area-inset-top,0px) + 146px);height:min(480px,calc(100% - 230px))}.ravotip{top:calc(env(safe-area-inset-top,0px) + 90px);left:calc(var(--gx) + 70px)}#toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
#arena:not([hidden])~.ravobtn,#arena:not([hidden])~.ravo{display:none}


/* =================== v5: çizgi roman geçişler, sayfalar, oyun ayarları, 3D rakip elleri =================== */
@keyframes prefail{to{visibility:hidden}}
/* sayfa geçişi: çizgi roman paneli */
#curtain .pn{background:radial-gradient(rgba(7,6,11,.28) 2.2px,transparent 2.5px) 0 0/13px 13px,repeating-conic-gradient(from 0deg at 50% 50%,#FFB627 0 5deg,#FFC94D 5deg 10deg)!important}
#curtain .edge{height:10px!important;background:#07060b!important;box-shadow:0 0 0 3px #FF3B4E!important}
#curtain .ct{isolation:isolate}
#curtain .ct::before{content:"";position:absolute;left:50%;top:50%;width:min(980px,96vw);aspect-ratio:2.1/1;transform:translate(-50%,-50%) rotate(-4deg);z-index:-1;background:#FF3B4E;clip-path:polygon(50% 0,57% 16%,70% 4%,72% 22%,88% 12%,84% 32%,100% 30%,90% 46%,100% 60%,84% 64%,92% 84%,74% 78%,70% 98%,58% 84%,48% 100%,40% 82%,26% 96%,24% 76%,6% 86%,12% 64%,0 56%,10% 44%,0 28%,18% 30%,12% 10%,30% 20%,34% 2%,44% 18%);filter:drop-shadow(10px 10px 0 #07060b)}
#curtain .ct::after{content:"";position:absolute;left:50%;top:50%;width:min(860px,86vw);aspect-ratio:2.1/1;transform:translate(-50%,-50%) rotate(-4deg);z-index:-1;background:radial-gradient(rgba(7,6,11,.25) 2px,transparent 2.3px) 0 0/10px 10px;clip-path:polygon(50% 0,57% 16%,70% 4%,72% 22%,88% 12%,84% 32%,100% 30%,90% 46%,100% 60%,84% 64%,92% 84%,74% 78%,70% 98%,58% 84%,48% 100%,40% 82%,26% 96%,24% 76%,6% 86%,12% 64%,0 56%,10% 44%,0 28%,18% 30%,12% 10%,30% 20%,34% 2%,44% 18%)}
#curtain .tt{font-family:var(--display)!important;font-weight:400!important;overflow:visible!important}
#curtain .tt span{background:none!important;color:#fff!important;-webkit-text-stroke:6px #07060b;paint-order:stroke fill;text-shadow:3px 3px 0 #07060b,6px 6px 0 #07060b,9px 9px 0 #07060b,12px 12px 0 #07060b!important;transform:rotate(-4deg);letter-spacing:.02em}
#curtain .ix span{background:#07060b!important;color:#FFB627!important;font-family:var(--display);font-size:24px;letter-spacing:.12em;padding:6px 16px!important;border:3px solid #fff;transform:rotate(-4deg)}
#curtain .bar2{height:8px!important;border:3px solid #07060b;background:#fff!important;width:min(300px,60vw)!important}
#curtain .bar2 i{background:#FF3B4E!important}
/* sıralama sayfası */
.lb{border:5px solid var(--inkc)!important;box-shadow:10px 10px 0 var(--inkc)!important;overflow:hidden}
.lrow{border-bottom:3px solid var(--inkc)!important;font-family:var(--body)}
.lrow.head{background:var(--inkc);color:var(--gold)!important;font-family:var(--display)!important;font-size:18px;letter-spacing:.08em}
.lrow .rk{font-size:40px!important;color:#fff!important;-webkit-text-stroke:2px var(--inkc);text-shadow:3px 3px 0 var(--inkc)}
.lrow.r1{background:radial-gradient(rgba(7,6,11,.18) 1.6px,transparent 1.8px) 0 0/9px 9px,var(--gold)!important;color:var(--inkc)}
.lrow.r1 .rk,.lrow.r1 .pt,.lrow.r1 b{color:var(--inkc)!important;-webkit-text-stroke:0;text-shadow:none}
.lrow.r1 small{color:rgba(7,6,11,.7)!important}
.lrow .pt{font-size:32px!important;text-shadow:3px 3px 0 var(--inkc)}
.lrow:not(.head):hover{background:var(--s2)}
.role{background:var(--red)!important;color:#fff!important;border:3px solid var(--inkc)!important;font-family:var(--display);font-size:15px!important;letter-spacing:.06em!important;box-shadow:3px 3px 0 var(--inkc);transform:rotate(-3deg)}
.rolecard{border:5px solid var(--inkc)!important;background:radial-gradient(rgba(7,6,11,.18) 1.6px,transparent 1.8px) 0 0/9px 9px,var(--gold)!important;color:var(--inkc);transform:rotate(1deg)}
.rolecard h3,.rolecard p{color:var(--inkc)!important;text-shadow:none!important}
.rolecard::before{display:none}
.empty b{font-family:var(--display);font-size:32px!important;letter-spacing:.03em}
.mini .mrow{border-bottom:3px solid var(--inkc)}
.season .top{background:var(--red);border-bottom:4px solid var(--inkc)!important}
.season .top .mono{color:#fff!important}
/* adımlar, alt bilgi, sekme çubuğu */
.steps{border-top:5px solid var(--inkc)!important}
.steps>div.st{background:var(--s1);border:4px solid var(--inkc);box-shadow:7px 7px 0 var(--inkc);padding:24px!important;border-radius:4px}
.steps>div.st+div.st{border-left:4px solid var(--inkc)!important}
.steps{gap:16px;border-top:0!important}
.steps .n{background:var(--gold);color:var(--inkc)!important;align-self:flex-start;padding:4px 10px;border:3px solid var(--inkc);font-family:var(--display);font-size:16px!important;letter-spacing:.08em}
.steps .rail{display:none}
footer{border-top:5px solid var(--inkc)!important;background:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.4px) 0 0/8px 8px,var(--s1)}
.fbig{color:#fff;-webkit-text-stroke:3px var(--inkc);paint-order:stroke fill;text-shadow:6px 6px 0 var(--inkc)}
.fbig span{color:var(--gold)!important}
footer h5{font-family:var(--display)!important;font-size:20px!important;color:var(--gold)!important;letter-spacing:.08em}
.tabbar a{font-size:15px!important}
.modal .q,.q{text-shadow:4px 4px 0 var(--inkc)}
.ghud span{border:2px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc);border-radius:4px}
.end .big{color:var(--gold);-webkit-text-stroke:4px var(--inkc);paint-order:stroke fill;text-shadow:8px 8px 0 var(--inkc)}
/* oyun ayarları */
.sets{display:grid;gap:8px;border:3px dashed var(--line2);border-radius:8px;padding:12px}
.set{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.set>span{font-weight:700;font-size:15px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{font-family:var(--display);font-size:17px;letter-spacing:.04em;padding:5px 12px;background:var(--s2);color:var(--fg);border:3px solid var(--inkc);border-radius:6px;box-shadow:2px 2px 0 var(--inkc)}
.seg button.on{background:var(--gold);color:var(--inkc)}
.seg button:disabled{cursor:default;opacity:.85}
.seg button:disabled:not(.on){opacity:.4}
/* rakiplerin elleri: masaya yatmış 3D kartlar */
.seat .ofan{position:absolute;left:50%;top:calc(100% + 6px);width:0;height:0;perspective:520px;pointer-events:none}
.ohc{position:absolute;left:-23px;top:0;width:46px;height:64px;transform-origin:50% 0;display:block;filter:drop-shadow(0 6px 4px rgba(0,0,0,.5));transition:transform .4s}
.ohc .cbk{--cw:46px;border-width:2px;transform:rotateX(38deg);transform-origin:50% 0;border-radius:6px;gap:0}
.ohc .cbk span{display:none}
.seat.turn .ohc{animation:ohb .9s ease-in-out infinite alternate}
.seat.turn .ohc:nth-child(2){animation-delay:.15s}.seat.turn .ohc:nth-child(3){animation-delay:.3s}.seat.turn .ohc:nth-child(4){animation-delay:.45s}
@keyframes ohb{to{margin-top:-6px}}
@media (max-width:600px){.ohc{width:34px;height:47px;left:-17px}.ohc .cbk{--cw:34px}}
/* hamle süresi */
#atimer{position:absolute;left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9;width:min(320px,60vw);height:14px;border:3px solid var(--inkc);background:var(--s2);border-radius:8px;overflow:hidden;box-shadow:3px 3px 0 var(--inkc)}
#atimer i{position:absolute;inset:0;background:linear-gradient(90deg,var(--red),var(--gold));transform-origin:left}
#atimer::after{content:attr(data-s);position:absolute;right:-64px;top:-6px;font-family:var(--display);font-size:20px;color:var(--gold)}
@media (max-width:600px){#atimer{top:auto;bottom:calc(var(--ch,150px) + 34px + env(safe-area-inset-bottom,0px))}}

#curtain .ix{overflow:visible!important;padding:6px}
@media (max-width:600px){#curtain .tt{font-size:clamp(50px,15vw,90px)!important}#curtain .tt span{-webkit-text-stroke:4px #07060b}}


/* =================== v6: oyunlar sayfası tam çizgi roman =================== */
#v-oyunlar .games{gap:28px}
.card{background:#fffdf4!important;color:var(--inkc)!important;border:5px solid var(--inkc)!important;box-shadow:10px 10px 0 var(--inkc)!important;border-radius:4px!important;overflow:visible!important}
.card:hover{box-shadow:14px 14px 0 var(--inkc)!important}
.card .poster{border-bottom:5px solid var(--inkc)!important;overflow:hidden}
.card .poster::after{display:none}
.card .poster canvas{transform:none}
.card .tag{font-family:var(--display)!important;font-size:17px!important;letter-spacing:.06em!important;background:var(--gold)!important;color:var(--inkc)!important;border:3px solid var(--inkc)!important;box-shadow:3px 3px 0 var(--inkc)!important;transform:rotate(-3deg);top:12px!important;left:12px!important}
.card .tag.live{background:#3DDC97!important}
.card .tag.live i{display:none}
.card .num{font-family:var(--display)!important;font-weight:400!important;font-size:80px!important;color:#fff!important;-webkit-text-stroke:4px var(--inkc)!important;paint-order:stroke fill;text-shadow:5px 5px 0 var(--inkc);right:12px!important;bottom:2px!important}
.card .fbody{background:radial-gradient(rgba(7,6,11,.07) 1.2px,transparent 1.4px) 0 0/8px 8px,#fffdf4!important;color:var(--inkc)!important;padding:16px 20px 20px!important;gap:14px!important}
.card h3{color:var(--inkc)!important;font-size:42px!important;line-height:.9;text-shadow:3px 3px 0 var(--gold)!important}
.card .fbody p{position:relative;background:#fff;border:3px solid var(--inkc);border-radius:18px;padding:10px 14px;color:var(--inkc)!important;font-size:15px!important;line-height:1.35;box-shadow:3px 3px 0 var(--inkc);margin-top:8px!important}
.card .fbody p::before{content:"";position:absolute;left:26px;top:-15px;width:22px;height:16px;background:#fff;border-left:3px solid var(--inkc);border-top:3px solid var(--inkc);transform:skewX(-30deg);clip-path:polygon(0 0,100% 0,0 100%)}
.card .go{border-top:3px dashed rgba(7,6,11,.3)!important}
.card .go .mono{color:rgba(7,6,11,.7)!important;font-size:12px}
.card .go b{background:var(--red);color:#fff!important;padding:8px 18px;border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);transform:rotate(-3deg);font-size:24px!important;transition:transform .2s}
.card:hover .go b{transform:rotate(2deg) scale(1.08)}
.card .go b svg{width:18px;height:18px}
#v-oyunlar .sh{position:relative}
.gburst{position:absolute;left:min(430px,58%);top:-26px;width:150px;aspect-ratio:1;display:grid;place-items:center;filter:drop-shadow(6px 6px 0 var(--inkc));animation:bpulse 2.4s ease-in-out infinite;z-index:2}
.gburst::before{content:"";position:absolute;inset:0;background:var(--gold);clip-path:polygon(50% 0,59% 18%,79% 6%,76% 28%,98% 26%,84% 43%,100% 58%,79% 64%,88% 85%,66% 79%,58% 100%,47% 82%,30% 97%,29% 76%,6% 82%,17% 62%,0 48%,20% 38%,9% 17%,31% 21%,36% 2%)}
.gburst span{position:relative;font-family:var(--display);font-size:34px;line-height:.85;color:var(--inkc);text-align:center;transform:rotate(-10deg)}
@media (max-width:820px){.gburst{width:104px;top:-30px;left:auto;right:0}.gburst span{font-size:24px}}
#v-oyunlar .band,#v-siralama .band{background:radial-gradient(rgba(255,255,255,.035) 1.4px,transparent 1.6px) 0 0/10px 10px}

.hc .sr.no{background:rgba(7,6,11,.55)}
#abar .stb:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(1)}
.hc .bonus{position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(-6deg);z-index:5;background:var(--ok);color:var(--inkc);font-family:var(--display);font-size:16px;letter-spacing:.04em;padding:4px 10px;border:3px solid var(--inkc);box-shadow:3px 3px 0 var(--inkc);white-space:nowrap}


/* =================== v7: sohbet, izleyici, hover düzeltmeleri =================== */
.card:hover,.cp-feat:hover{transform:none!important}
.card:nth-child(odd),.card:nth-child(even){transform:none!important}
.card:hover{box-shadow:10px 10px 0 var(--red)!important}
.cp-feat:hover{box-shadow:9px 9px 0 var(--red)!important}
.sh .ln{overflow:visible!important}
.achatT{position:absolute;left:14px;right:auto;top:calc(56px + env(safe-area-inset-top,0px));z-index:10;width:48px;height:48px;border-radius:50%;background:var(--gold);border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);font-size:22px;display:grid;place-items:center}
.achatT span{position:absolute;right:-6px;top:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--red);color:#fff;font-family:var(--display);font-size:14px;display:grid;place-items:center;border:2px solid var(--inkc)}
.achat{position:absolute;left:14px;right:auto;top:calc(112px + env(safe-area-inset-top,0px));z-index:11;width:min(320px,calc(100% - 32px));height:min(380px,50vh);display:flex;flex-direction:column;background:var(--s1);border:4px solid var(--inkc);box-shadow:8px 8px 0 var(--inkc);border-radius:10px;overflow:hidden}
.achatLog{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:14px;overscroll-behavior:contain}
.cl b{color:var(--gold);margin-right:4px}
.cl.me b{color:var(--red2)}
.cl.sys{color:var(--dim);font-style:italic;font-size:13px}
.cl .ce{font-size:22px}
.achatE{display:flex;gap:4px;padding:6px 8px;border-top:3px solid var(--inkc);background:var(--s2);overflow-x:auto}
.achatE button{font-size:20px;min-width:36px;height:34px;border-radius:8px;background:var(--s1);border:2px solid var(--inkc);font-family:var(--display);color:var(--gold)}
.achatE button:hover{transform:translateY(-2px)}
.achatF{display:flex;gap:6px;padding:8px;border-top:3px solid var(--inkc)}
.achatF input{flex:1;min-width:0;background:var(--ink);border:2px solid var(--inkc);color:var(--fg);border-radius:6px;padding:8px;font:inherit;font-size:14px}
.achatF button{background:var(--red);color:#fff;font-family:var(--display);font-size:16px;padding:0 10px;border:2px solid var(--inkc);border-radius:6px}
.emopop{position:absolute;z-index:12;font-size:34px;pointer-events:none;transform:translateX(-50%);filter:drop-shadow(3px 3px 0 #07060b)}
#specbar{position:absolute;left:50%;bottom:calc(var(--ch,250px) + 24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--s1);border:3px solid var(--inkc);box-shadow:4px 4px 0 var(--inkc);border-radius:20px;padding:6px 10px;max-width:calc(100% - 24px)}
#specbar button{font-family:var(--display);font-size:16px;padding:3px 10px;background:var(--s2);border:2px solid var(--inkc);border-radius:12px;color:var(--fg)}
#specbar button.on{background:var(--gold);color:var(--inkc)}
.seat.left{opacity:.5}
.seat.left .stt{color:var(--red2)!important}
.hc.spc{pointer-events:none;opacity:.92}
@media (max-width:600px){.achatT{top:auto;bottom:calc(var(--ch,150px) + 30px + env(safe-area-inset-bottom,0px));left:10px;right:auto;width:42px;height:42px;font-size:19px}.achat{top:auto;bottom:calc(var(--ch,150px) + 80px + env(safe-area-inset-bottom,0px));left:10px;right:10px;width:auto;height:min(320px,42vh)}}

/* kapak görseli */
.cp-main .kapak{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:#07051a}
.cp-main .kapak::before{content:"";position:absolute;inset:-4%;background:url(../img/fb80f1f68a.webp) 50% 18%/cover no-repeat;animation:kapakZoom 26s ease-in-out infinite alternate;filter:saturate(1.15) contrast(1.05)}
.cp-main .kapak::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,20,.85) 0%,rgba(5,3,20,.25) 30%,transparent 55%)}
.cp-main #gl{opacity:.25;mix-blend-mode:screen}.cp-main .speed{opacity:.35}.cp-main .dots2{opacity:.6}
@keyframes kapakZoom{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1%)}}
@media (max-width:600px){.cp-main .kapak::before{background-position:50% 30%}}

/* =================== v8: level, günlük ödül, çekiliş, admin =================== */
.hbtn{width:40px;height:40px;display:grid;place-items:center;border:3px solid var(--inkc);background:var(--s2);border-radius:6px;font-size:20px;position:relative;box-shadow:3px 3px 0 var(--inkc)}
.hbtn.ready{background:var(--gold);animation:gift 1.4s ease-in-out infinite}
.hbtn.ready::after{content:"!";position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--display);font-size:13px;display:grid;place-items:center;border:2px solid var(--inkc)}
@keyframes gift{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}}
.lvl{display:flex;flex-direction:column;gap:2px;margin-left:6px;min-width:44px}
.lvl b{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.04em;line-height:1}
.lvl i{display:block;height:5px;border-radius:3px;background:var(--s3);overflow:hidden;position:relative}
.lvl i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,var(--red),var(--gold))}
.lvup{position:fixed;left:50%;top:40%;z-index:200;transform:translate(-50%,-50%);pointer-events:none;text-align:center;display:grid;place-items:center;width:300px;aspect-ratio:1}
.lvup::before{content:"";position:absolute;inset:0;background:var(--gold);clip-path:polygon(50% 0,59% 18%,79% 6%,76% 28%,98% 26%,84% 43%,100% 58%,79% 64%,88% 85%,66% 79%,58% 100%,47% 82%,30% 97%,29% 76%,6% 82%,17% 62%,0 48%,20% 38%,9% 17%,31% 21%,36% 2%);filter:drop-shadow(8px 8px 0 #07060b)}
.lvup span,.lvup b{position:relative;font-family:var(--display);color:#07060b;line-height:.85}
.lvup span{font-size:40px}.lvup b{font-size:96px;color:#fff;-webkit-text-stroke:4px #07060b;paint-order:stroke fill}
.daily{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.chest{position:relative;width:150px;height:120px;margin:10px 0}
.chest .box{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(#8a4b1f,#5c2f11);border:4px solid var(--inkc);border-radius:6px;box-shadow:5px 5px 0 var(--inkc)}
.chest .box::after{content:"";position:absolute;left:50%;top:-4px;width:22px;height:30px;margin-left:-11px;background:var(--gold);border:3px solid var(--inkc);border-radius:4px}
.chest .lid{position:absolute;left:-4px;right:-4px;bottom:62px;height:46px;background:linear-gradient(#a85d27,#7a4019);border:4px solid var(--inkc);border-radius:30px 30px 6px 6px;transform-origin:10% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1);z-index:2}
.chest .glow{position:absolute;left:50%;top:40%;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);opacity:0;transition:all .5s}
.chest.open .lid{transform:rotate(-38deg) translateY(-8px)}
.chest.open .glow{opacity:1;box-shadow:0 0 60px 40px rgba(255,182,39,.6)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%}
.days span{display:flex;flex-direction:column;gap:2px;background:var(--s2);border:3px solid var(--inkc);border-radius:6px;padding:6px 2px;font-family:var(--display);font-size:18px;color:var(--gold)}
.days span b{font-family:var(--body);font-size:10px;color:var(--dim)}
.days span.got{background:var(--ok);color:var(--inkc)} .days span.got b{color:var(--inkc)}
.days span.now{background:var(--gold);color:var(--inkc);transform:scale(1.08)} .days span.now b{color:var(--inkc)}
.extras{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:28px}
@media (max-width:900px){.extras{grid-template-columns:1fr}}
.xpanel{background:var(--s1);border:5px solid var(--inkc);box-shadow:9px 9px 0 var(--inkc);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:14px}
.xpanel h3{margin:0}
#raffles{display:grid;gap:12px}
.rf{background:#fffdf4;color:var(--inkc);border:4px solid var(--inkc);box-shadow:5px 5px 0 var(--inkc);border-radius:6px;padding:14px;display:grid;gap:8px}
.rf.done{background:var(--s2);color:var(--fg)}
.rfh{display:flex;gap:10px;align-items:center}
.rfh b{font-family:var(--display);font-size:26px;letter-spacing:.03em}
.rf p{margin:0;font-weight:700}
.rfm{color:rgba(7,6,11,.6)}
.rf.done .rfm{color:var(--dim)}
.rfw{font-size:17px}
.rfw b{color:var(--gold);font-family:var(--display);font-size:22px}
.draw{text-align:center;display:grid;gap:12px;padding:20px 0}
.reel{font-family:var(--display);font-size:clamp(40px,8vw,72px);color:#fff;-webkit-text-stroke:3px var(--inkc);paint-order:stroke fill;text-shadow:5px 5px 0 var(--inkc);background:var(--red);border:5px solid var(--inkc);border-radius:10px;padding:16px;box-shadow:8px 8px 0 var(--inkc)}
.reel.win{background:var(--gold);color:var(--inkc);-webkit-text-stroke:0;text-shadow:none}
.adm{display:grid;gap:14px}
.tabs2{display:flex;gap:6px;flex-wrap:wrap}
.tabs2 button{font-family:var(--display);font-size:18px;padding:6px 14px;background:var(--s2);border:3px solid var(--inkc);border-radius:6px;box-shadow:3px 3px 0 var(--inkc)}
.tabs2 button.on{background:var(--gold);color:var(--inkc)}
.admf{display:grid;gap:8px}
.lvlbig{display:flex;align-items:center;gap:14px}
.lvlbig b{font-family:var(--display);font-size:64px;line-height:.8;color:var(--gold);-webkit-text-stroke:3px var(--inkc);paint-order:stroke fill;text-shadow:5px 5px 0 var(--inkc)}
.lvlbig .bar{flex:1;height:18px;border:3px solid var(--inkc);border-radius:9px;background:var(--s2);overflow:hidden;position:relative}
.lvlbig .bar i{position:absolute;inset:0;width:var(--p);background:linear-gradient(90deg,var(--red),var(--gold))}
/* şans çarkı */
.wheelbox .days span b{font-size:11px}
.wheel{position:relative;width:min(400px,88vw);aspect-ratio:1;margin:6px auto;filter:drop-shadow(8px 8px 0 #07060b)}
.wrot{position:absolute;inset:0;will-change:transform}
.wsvg{width:100%;height:100%;display:block}
.wsvg .wt{font:400 30px Bangers,Impact,sans-serif;fill:#fff;stroke:#07060b;stroke-width:5px;paint-order:stroke;letter-spacing:1px}
.wsvg .wt.leg{font-size:21px;fill:var(--gold)}
.wsvg .ws{font:400 13px Bangers,Impact,sans-serif;fill:#fff;stroke:#07060b;stroke-width:4px;paint-order:stroke;letter-spacing:2px}
.wsvg .wbulb{fill:#fff6c8;stroke:#07060b;stroke-width:2;animation:wb 1s steps(2) infinite}
.wsvg .wbulb:nth-of-type(2n){animation-delay:.5s}
@keyframes wb{50%{fill:#ffb627}}
.wpin{position:absolute;left:50%;top:-14px;width:34px;height:44px;margin-left:-17px;z-index:3;background:var(--red,#FF3B4E);clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%);filter:drop-shadow(0 3px 0 #07060b);transform-origin:50% 20%}
.wpin::after{content:"";position:absolute;inset:4px 4px 12px;background:#fff;opacity:.35;clip-path:inherit}
.whub{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:6px solid #07060b;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--gold) 45%,#d48a00);font:400 clamp(18px,5vw,26px) Bangers,Impact,sans-serif;letter-spacing:1px;color:#07060b;cursor:pointer;box-shadow:0 6px 0 #07060b;z-index:4;transition:transform .15s}
.whub:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.07)}
.whub:not(:disabled){animation:hubp 1.2s ease-in-out infinite}
@keyframes hubp{50%{box-shadow:0 6px 0 #07060b,0 0 0 12px rgba(255,182,39,.35)}}
.whub:disabled{filter:grayscale(.7);cursor:default}.whub .cdt{font-size:clamp(10px,3.4vw,15px);letter-spacing:0;line-height:1.15;display:block;padding:0 6px}
.wheel.won .wsvg{animation:wwon .25s steps(2) 6}
@keyframes wwon{50%{filter:brightness(1.6)}}
/* kart paketi */
.pack{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pack h3{font:400 clamp(30px,7vw,46px) Bangers,Impact,sans-serif;letter-spacing:2px;color:var(--gold);-webkit-text-stroke:2px #07060b;text-shadow:4px 4px 0 #07060b;margin:0}
.prow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;perspective:1100px}
.pc{position:relative;width:min(170px,40vw);aspect-ratio:5/7;cursor:pointer}
.pc .pin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform:rotateY(180deg)}
.pc.open .pin{transform:rotateY(0)}
.pc .pf,.pc .pb{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden}
.pc .pf img{width:100%;height:100%;display:block}
.pc .pb{transform:rotateY(180deg);background:repeating-conic-gradient(from 0deg,#FF3B4E 0 10deg,#c01f33 10deg 20deg);border:5px solid #07060b;display:grid;place-items:center;box-shadow:6px 6px 0 #07060b}
.pc .pb span{font:400 70px Bangers,Impact,sans-serif;color:#fff;-webkit-text-stroke:3px #07060b;animation:pq 1s ease-in-out infinite}
@keyframes pq{50%{transform:scale(1.15) rotate(-6deg)}}
.pc:not(.open):hover .pin{transform:rotateY(180deg) translateY(-8px) rotateZ(-3deg)}
.pc em{position:absolute;top:-12px;right:-10px;z-index:3;font:400 20px Bangers,Impact,sans-serif;font-style:normal;background:var(--gold);color:#07060b;border:3px solid #07060b;padding:2px 8px;transform:rotate(8deg) scale(0);transition:transform .4s .45s cubic-bezier(.3,1.8,.5,1)}
.pc em.dup{background:#fff}
.pc.open em{transform:rotate(8deg) scale(1)}
.pc.open.r-e{animation:leg 1.6s ease-in-out infinite .6s}
.pc.open.r-a .pf{box-shadow:0 0 30px 6px rgba(255,182,39,.6)}
@keyframes leg{0%,100%{filter:drop-shadow(0 0 10px #FF3B4E)}50%{filter:drop-shadow(0 0 28px #ffb627)}}
/* koleksiyon */
.coll{display:grid;gap:14px}
.chead{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.chead b{font:400 44px Bangers,Impact,sans-serif;color:var(--gold);grid-row:1/3}
.chead b small{font-size:22px;color:var(--fg)}
.chead .bar{height:12px;border:3px solid #07060b;background:#1b1528;border-radius:8px;overflow:hidden}
.chead .bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,var(--red,#FF3B4E),var(--gold))}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:52vh;overflow:auto;padding:6px 4px 10px}
.ck{position:relative;aspect-ratio:5/7;border:0;padding:0;background:none;cursor:pointer;border-radius:8px;transition:transform .2s}
.ck img{width:100%;height:100%;display:block;border-radius:8px}
.ck:hover{transform:translateY(-4px) rotate(-2deg)}
.ck i{position:absolute;left:4px;bottom:4px;font-size:10px;background:#07060b;color:#fff;padding:1px 5px;border-radius:4px;font-style:normal}
.ck s{position:absolute;top:-8px;right:-6px;text-decoration:none;font-size:18px;color:var(--gold);-webkit-text-stroke:1.5px #07060b;opacity:0;transform:scale(0);transition:.3s cubic-bezier(.3,1.8,.5,1)}
.ck.on{outline:4px solid var(--gold);outline-offset:2px}
.ck.on s{opacity:1;transform:scale(1.3)}
.ck.lock{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#15111f 0 8px,#1c1729 8px 16px);border:3px dashed #3a3150;cursor:default}
.ck.lock span{font:400 36px Bangers,Impact,sans-serif;color:#3a3150}
.ck.lock i{background:none;color:#5b5075;left:0;right:0;text-align:center}
.ck.r-e:not(.lock) img{box-shadow:0 0 14px rgba(255,59,78,.7)}
.vitrin{display:flex;gap:10px;justify-content:center;margin:8px 0;perspective:800px}
.vitrin img{width:min(96px,26vw);border-radius:8px;box-shadow:4px 4px 0 #07060b;transform:rotateY(-8deg)}
.vitrin img:nth-child(2){transform:translateY(-8px) scale(1.06)}
.vitrin img:nth-child(3){transform:rotateY(8deg)}
.vitrin img.r-e{box-shadow:4px 4px 0 #07060b,0 0 18px rgba(255,59,78,.7)}
.accol{display:grid;gap:8px;border:3px solid #07060b;background:rgba(255,255,255,.03);padding:12px;border-radius:10px}

@media (prefers-reduced-motion:reduce){.cp-main .kapak::before{animation:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.brand .brandlogo{width:44px;height:44px;flex-shrink:0;filter:drop-shadow(2px 2px 0 #07060b);transition:transform .3s}.brand:hover .brandlogo{transform:rotate(-8deg) scale(1.06)}.cbk .cblogo{width:46%;filter:drop-shadow(2px 2px 0 #07060b)}.brand .brandlogo{width:44px;height:44px;flex-shrink:0;filter:drop-shadow(2px 2px 0 #07060b);transition:transform .3s}.brand:hover .brandlogo{transform:rotate(-8deg) scale(1.06)}.cbk .cblogo{width:46%;filter:drop-shadow(2px 2px 0 #07060b)}@media (max-width:600px){.brand .brandlogo{width:38px;height:38px}}

/* ---- */


/* ---------- v9: çerez onayı, düello, mobil arena ---------- */
#ckBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;width:min(580px,calc(100% - 32px));background:var(--s1);border:3px solid var(--inkc);box-shadow:6px 6px 0 var(--inkc);border-radius:12px;padding:14px 16px;display:grid;gap:10px}
#ckBar p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.5}
#ckBar .ckd{display:none;font-size:12.5px;color:var(--faint);line-height:1.6;border-top:2px dashed var(--line2);padding-top:9px}
#ckBar.det .ckd{display:block}
.ckrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ckrow .btn{height:40px;font-size:14px;padding:0 18px}
.ckmore{background:none;border:0;color:var(--gold);font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 2px}
.cklink{background:none;border:0;color:var(--gold);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:2px 0}
/* yeni oyun kartı */
.realcard{display:grid;gap:8px;justify-items:center;padding:26px 18px;border:3px solid var(--inkc);background:var(--s2);box-shadow:5px 5px 0 var(--inkc);border-radius:10px;text-align:center}
.realcard b{font-family:var(--display);font-size:clamp(26px,6vw,44px);letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
/* düello (Yüksek mi Düşük online) */
.duel{display:grid;gap:14px}
.duel .code{font-family:var(--display);font-size:56px;letter-spacing:.22em;text-align:center;color:var(--gold);line-height:1}
.duel .ocode{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:center}
.oppbar{display:grid;gap:6px}
.oppbar .ob{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.oppbar .obar{height:12px;background:var(--s3);border:2px solid var(--inkc);border-radius:7px;overflow:hidden}
.oppbar .obar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));width:0%;transition:width .45s var(--ease)}
.hlbust{opacity:.35;filter:grayscale(1)}
.hlbust button{pointer-events:none!important;opacity:.5}
.hlme{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
/* kart istatistikleri */
.cgstats{display:grid;gap:10px}
.cgstats .cgrow{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border:2px solid var(--inkc);background:rgba(255,255,255,.03);border-radius:8px;font-size:14px}
.cgstats .cgrk{font-family:var(--display);font-size:20px;color:var(--gold)}
.cgstats .cgbar{height:8px;background:var(--s3);border-radius:4px;overflow:hidden;margin-top:5px}
.cgstats .cgbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}
/* mobil arena iyileştirmeleri */
@media (max-width:820px){
  #abar{width:calc(100% - 20px)}
  #abar .stb{min-height:54px;padding:10px 2px}
  #abar .stb b{font-size:20px}
  #abar .btn{min-height:50px}
  .achat{left:10px;right:10px;width:auto;max-width:none}
  .hc{touch-action:manipulation}
  .seat .sn b{font-size:13px}
}
@media (max-width:600px){
  .ravobtn{top:calc(env(safe-area-inset-top,0px) + 74px)}
  #ckBar{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* çerez banner'ı açıkken Ravo paneli alta değmesin */
body.ckbar .ravo{height:min(520px,calc(100% - 310px))}
@media (max-width:820px){body.ckbar .ravo{height:min(400px,calc(100% - 390px))}}
/* yasal metin modalı */
.legal-doc{display:grid;gap:12px;font-size:14.5px;line-height:1.65;color:var(--dim)}
.legal-doc h4{color:var(--fg);font-family:var(--display);font-size:20px;letter-spacing:.05em;margin:6px 0 0}
.legal-doc p{margin:0}
.legal-doc ul{margin:0;padding-left:18px;display:grid;gap:6px}
.legal-doc b{color:var(--fg)}


/* ---- */


  .popen{position:relative}
  .pk.big{cursor:default}
  .pkz{position:absolute;left:-4px;right:-4px;top:-4px;height:34%;z-index:4;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12));border-bottom:3px dashed rgba(255,255,255,.55);transition:transform .3s ease,opacity .35s}
  .pkz::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 8px,transparent 8px 15px)}
  .zipt{position:absolute;left:50%;bottom:-14px;width:38px;height:26px;margin-left:-19px;background:#ffd34d;border:3px solid var(--inkc);border-radius:8px;box-shadow:2px 2px 0 var(--inkc);cursor:grab;touch-action:none;display:grid;place-items:center;font-size:12px}
  .pkz.drag{transition:none}
  .pkz.off{transform:translateY(-135%) rotate(-16deg);opacity:0;pointer-events:none}
  .pkmouth{position:absolute;left:10%;right:10%;top:14%;height:26%;border-radius:50%;background:radial-gradient(ellipse at center,#000 55%,rgba(0,0,0,.6) 78%,transparent);opacity:0;transition:opacity .45s;z-index:1;pointer-events:none}
  .pkmouth.on{opacity:1}
  .pk.gone{opacity:0;transform:scale(.6) translateY(26px);transition:all .55s ease;pointer-events:none}
  .pk.tap{cursor:pointer;animation:pkfloat 2s ease-in-out infinite}
  .prow{position:relative;z-index:2}
  .pc{transition:transform .6s cubic-bezier(.2,.8,.3,1.15),opacity .3s}
  


/* ---- */


/* ============ MOBIL: DUZENLI + KOMPAKT ============ */
@media (max-width:820px){
  html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
  /* ---- genel sikistirma ---- */
  .wrap{padding-inline:14px}
  section{padding-block:44px 36px}
  .view{padding-top:8px}
  /* ---- header ---- */
  header .bar{padding-block:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .chip{height:34px;padding:0 10px 0 3px;gap:7px}
  .av{width:26px;height:26px;font-size:13px}
  .login{height:34px;padding:0 12px;font-size:12.5px;gap:7px}
  .hbtn{width:34px;height:34px}
  .snd{width:34px;height:34px}
  /* ---- alt menu: daha ince ---- */
TABBAR_CSS_GONE  /* ---- tabbar incelt ---- */
  .tabbar a{padding:8px 0 7px!important;gap:3px}
  .tabbar svg{width:20px;height:20px}
  /* ---- hero ---- */
  .hero .wrap{min-height:0;padding-block:36px 26px}
  .hero::before{content:"";position:absolute;inset:auto 0 0;height:100px;z-index:-1;
    background:linear-gradient(0deg,var(--ink),transparent);pointer-events:none}
  .eyebrow{font-size:12px;gap:10px}
  h1{font-size:clamp(52px,16.5vw,84px);letter-spacing:-.02em;margin:20px 0 22px}
  h1 .o{text-shadow:4px 4px 0 rgba(255,59,78,.25)}
  .lead{font-size:15px;margin-bottom:22px}
  /* ---- butonlar: kucuk ve duzgun ---- */
  .btn{height:44px;padding:0 18px;font-size:15px;gap:10px}
  .btn:active{transform:translateY(2px)}
  .btn{transition:transform .15s}
  .ghost,.hbtn,.snd{transition:transform .15s}
  .ghost:active,.hbtn:active{transform:scale(.94)}
  .ctas{gap:10px}
  /* ---- kartlar / oyun grid ---- */
  .games{gap:14px}
  .card{transition:transform .18s var(--ease),border-color .3s;position:relative}
  .card:active{transform:scale(.98)}
  .card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 48%,transparent 60%)}
  .card:active::after{opacity:1}
  .card .go b{font-size:15px}
  .card .go{padding-top:12px}
  /* ---- bolum basliklari ---- */
  .sec h2,.vhead h2{font-size:clamp(26px,8vw,40px)!important}
  /* ---- leaderboard ---- */
  .lrow{padding:10px 12px;gap:8px}
  .lrow .rk{font-size:20px}
  .lrow .pt{font-size:17px}
  .lrow .nm b{font-size:13px}
  .lrow .nm small{font-size:9.5px}
  .lbgrid{gap:14px}
  /* ---- modal: oyun bazli renk seridi ---- */
  .mbox{max-height:calc(100svh - 16px);border-radius:12px;position:relative}
  .mbox::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:6;
    background:var(--red);transition:background .4s}
  .mbox[data-g="02"]::before{background:var(--gold)}
  .mbox[data-g="03"]::before{background:#4aa3ff}
  .mbox[data-g="04"]::before{background:#39d98a}
  .mbox[data-g="05"]::before{background:#b06bff}
  .mbox[data-g="06"]::before{background:#ff8a3c}
  .mbox .handle{transition:background .4s}
  .mbox[data-g="02"] .handle{background:var(--gold)}
  .mbox[data-g="03"] .handle{background:#4aa3ff}
  .mbox[data-g="04"] .handle{background:#39d98a}
  .mbox[data-g="05"] .handle{background:#b06bff}
  .mbox[data-g="06"] .handle{background:#ff8a3c}
  .mbox .lg{padding:14px 12px}
  .mbox h3,.mbox .mtitle{font-size:20px}
  /* ---- koleksiyon: 3 sutun kompakt ---- */
  .colGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .colGrid .card,.colGrid> *{min-width:0}
  /* ---- kaydiricilar ---- */
  .rwk,.rwt,.tabs2,.gc-e{scrollbar-width:none;-ms-overflow-style:none}
  .rwk::-webkit-scrollbar,.rwt::-webkit-scrollbar,.tabs2::-webkit-scrollbar,.gc-e::-webkit-scrollbar{display:none}
  /* ---- input: iOS zoom engeli + kompakt ---- */
  input,select,textarea{font-size:16px}
  .field{padding:10px 12px;font-size:15px}
  /* ---- footer mobil ---- */
  footer{padding-block:32px 28px}
  .fbig{font-size:clamp(34px,11vw,52px)}
  .fgrid{gap:22px}
}
@media (max-width:420px){
  h1{font-size:clamp(46px,18vw,64px)}
  .btn{height:40px;font-size:14px;padding:0 14px}
  .colGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .games{gap:10px}
}
@media (max-width:820px) and (max-height:500px){
  /* yatay telefon: alt menuyi gizle, icerik alanini ac */
    body{padding-bottom:0}
}
@media (max-width:820px){
  .ravo{left:8px;width:min(340px,calc(100% - 16px));top:calc(env(safe-area-inset-top,0px) + 132px);
    height:min(430px,calc(100% - 200px));border-width:3px;box-shadow:6px 6px 0 var(--inkc,#1a1a22)}
  .rv-top{padding:9px 10px;gap:8px;border-bottom-width:3px}
  .rv-top b{font-size:19px;letter-spacing:.04em}
  .rv-top small{font-size:10px}
  .rv-av{width:32px;height:32px;border-width:2px}
  .rv-av svg{width:22px;height:22px}
  .rv-log{padding:10px;gap:7px}
  .rv-m{font-size:13px;padding:8px 11px;max-width:92%;border-width:2px;box-shadow:2px 2px 0 var(--inkc,#1a1a22);overflow-wrap:anywhere}
  .rv-acts{gap:5px}
  .rv-acts button{font-size:12px;padding:4px 9px;border-width:2px;box-shadow:2px 2px 0 var(--inkc,#1a1a22)}
  .rv-chips{padding:0 8px 6px;gap:5px}
  .rv-chips button{font-size:11px;padding:4px 8px;border-width:2px}
  .rv-in{padding:7px 8px 9px;gap:6px}
  .rv-in input{font-size:16px;padding:8px 10px;border-width:2px}
  .rv-in button{font-size:15px;padding:0 12px;border-width:2px;box-shadow:2px 2px 0 var(--inkc,#1a1a22)}
  .ravobtn{width:48px;height:48px;border-width:3px;box-shadow:3px 3px 0 var(--inkc,#1a1a22)}
  .ravobtn svg{width:30px;height:30px}
  .ravotip{font-size:12px;padding:7px 10px;border-width:2px;box-shadow:3px 3px 0 var(--inkc,#1a1a22)}
}