/* ============================================================
   MİNİK SİBER KAHRAMANLAR — Kahraman Arcade
   Dijital Güvenlik Oyun Atölyesi · ana stil
   Saf CSS · dış bağımlılık yok
   ============================================================ */

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:#070619;color:#f3f0ff;font-family:"Segoe UI",system-ui,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}

:root{
  --bg-950:#070619; --bg-900:#0c0b26; --line:#2a2760; --line-soft:#221f52;
  --ink:#f3f0ff; --ink-dim:#c3bde8; --ink-mute:#8b86c0;
  --cyan:#2fd0ff; --blue:#3b7bff; --violet:#a06bff; --green:#5bff9a; --gold:#ffc23e;
  --orange:#ff8a3a; --red:#ff4d6d; --pink:#ff5ad0; --tr-red:#e30a17;
  --c1:#2ec7ff; --c2:#6dff5a; --c3:#ffc23e; --c4:#b46bff; --c5:#ff4d6d;
  --disp:"Arial Rounded MT Bold","Arial Black","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI",system-ui,Roboto,sans-serif;
}

/* ---------- VEHA ---------- */
.veha{display:block;width:100%;height:auto;overflow:visible}
.veha-body{animation:vhFloat 5.5s ease-in-out infinite;transform-origin:120px 200px}
.veha-ring{animation:vhRing 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.veha-blink{animation:vhBlink 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.veha-wave{animation:vhWave 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.veha-ant{animation:vhAnt 1.9s ease-in-out infinite}
.veha-look{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
@keyframes vhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes vhRing{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.05)}}
@keyframes vhBlink{0%,88%,100%{transform:scaleY(1)}92%,96%{transform:scaleY(.08)}}
@keyframes vhWave{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(16deg)}}
@keyframes vhAnt{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* ---------- BRAND LOGO ---------- */
.brand-logo{display:inline-grid;grid-template-columns:auto auto;grid-template-areas:"star mini" "star siber" "kah kah";align-items:center;gap:0 10px;line-height:.92}
.bl-star{grid-area:star;align-self:center}
.bl-mini{grid-area:mini;font:800 .8em/1 "Arial Narrow",system-ui,sans-serif;letter-spacing:.28em;color:#ff6a72}
.bl-siber{grid-area:siber;font:900 2.1em/.9 "Arial Black","Segoe UI",system-ui,sans-serif;letter-spacing:.02em;background:linear-gradient(180deg,#dff2ff,#7cc4ff 42%,#2f7bff 60%,#bfe6ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #0b2a5e) drop-shadow(0 0 14px rgba(47,123,255,.5))}
.bl-kah{grid-area:kah;margin-top:.12em;font:800 .82em/1 "Arial Narrow","Segoe UI",system-ui,sans-serif;letter-spacing:.24em;background:linear-gradient(180deg,#fff,#c9d8f2);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- ARCADE ---------- */
.arc{position:relative;min-height:100vh;color:var(--ink);font-family:var(--body);overflow-x:hidden;
  background:
   radial-gradient(700px 500px at 12% 6%,rgba(160,107,255,.28),transparent 60%),
   radial-gradient(700px 500px at 92% 4%,rgba(47,208,255,.24),transparent 60%),
   radial-gradient(760px 560px at 84% 96%,rgba(255,90,208,.2),transparent 60%),
   radial-gradient(760px 560px at 6% 92%,rgba(91,255,154,.16),transparent 60%),
   linear-gradient(180deg,#0a0921,#070619)}
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none}
.floaty{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.floaty span{position:absolute;font-size:22px;opacity:.5;animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(20px) rotate(0)}100%{transform:translateY(-60px) rotate(40deg)}}
.wrap{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,36px)}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;flex-wrap:wrap}
.score{display:inline-flex;align-items:center;gap:9px;background:rgba(20,18,54,.7);border:2px solid var(--line);border-radius:999px;padding:8px 15px;font:800 13px/1 var(--body);color:var(--gold)}
.score .g{width:15px;height:19px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,4vw,40px);align-items:center;padding:clamp(14px,3vw,34px) 0 30px;min-height:78vh}
.badge{display:inline-block;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px;box-shadow:0 8px 20px rgba(160,107,255,.4);transform:rotate(-2deg)}
.hero h1{font-family:var(--disp);font-weight:900;line-height:.94;font-size:clamp(38px,8vw,80px);margin:16px 0 0;text-wrap:balance;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.hero h1 .p1{color:#fff}
.hero h1 .p2{background:linear-gradient(90deg,#ffd76a,#ff8a3a);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;transform:rotate(-1.5deg)}
.hero .sub{margin:18px 0 0;max-width:46ch;color:var(--ink-dim);font-size:clamp(15px,1.7vw,17px);line-height:1.6}
.big-cta{display:inline-flex;align-items:center;gap:10px;margin-top:24px;cursor:pointer;border:0;font:900 18px/1 var(--disp);letter-spacing:.02em;color:#241000;
  background:linear-gradient(180deg,#ffe27a,#ffb02e);padding:18px 30px;border-radius:18px;box-shadow:0 12px 0 #b9791a,0 20px 34px rgba(255,176,46,.4);transition:transform .1s,box-shadow .1s}
.big-cta:active{transform:translateY(8px);box-shadow:0 4px 0 #b9791a,0 10px 20px rgba(255,176,46,.4)}
.big-cta:focus-visible,.play:focus-visible,.hero-card:focus-visible{outline:3px solid #fff;outline-offset:4px}

.stage{position:relative;display:grid;place-items:center}
.stage .glowpad{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,208,255,.35),transparent 62%);filter:blur(4px)}
.stage .veha{width:min(340px,82%);position:relative;z-index:2}
.speech{position:absolute;top:2%;right:-2%;z-index:3;max-width:210px;background:#fff;color:#1a1440;border-radius:16px;padding:12px 14px;font:700 13.5px/1.4 var(--body);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.speech::after{content:"";position:absolute;left:22px;bottom:-11px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.speech b{color:var(--violet)}

.section{padding:30px 0 6px}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sh h2{font-family:var(--disp);font-weight:900;font-size:clamp(24px,4vw,38px);margin:0;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.sh .em{font-size:30px}
.sh .line{flex:1;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--violet),transparent)}

/* hero select cards */
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.hero-card{cursor:pointer;border:3px solid var(--hc);border-radius:22px;padding:16px 12px 14px;text-align:center;background:linear-gradient(180deg,rgba(22,20,58,.9),rgba(14,12,40,.9));
  box-shadow:0 10px 0 rgba(0,0,0,.25);transition:transform .14s,box-shadow .14s;position:relative}
.hero-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 16px 0 rgba(0,0,0,.22),0 0 26px color-mix(in srgb,var(--hc) 40%,transparent)}
.hero-card.sel{transform:translateY(-4px) scale(1.02)}
.hero-card.sel::after{content:"✓ SEÇİLDİ";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--hc);color:#0a0820;font:800 10px/1 var(--body);letter-spacing:.08em;padding:6px 10px;border-radius:999px}
.hero-card .av{width:122px;aspect-ratio:3/5;margin:0 auto 4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.hero-card .hn{font:800 15px/1.1 var(--body);color:#fff}
.hero-card .hr{font:700 11px/1 var(--body);color:var(--hc);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}

/* game tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;perspective:1000px}
.tile{position:relative;border:3px solid color-mix(in srgb,var(--acc) 60%,var(--line));border-radius:24px;padding:20px 18px 18px;
  background:linear-gradient(180deg,rgba(24,21,62,.94),rgba(13,11,38,.94));box-shadow:0 12px 0 rgba(0,0,0,.28);transition:transform .12s,box-shadow .12s;transform-style:preserve-3d;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(200px 120px at 50% -10%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%);pointer-events:none}
.tile .ribbon{position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--acc);color:#0a0820;font:800 10px/1 var(--body);letter-spacing:.1em;padding:6px 40px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.tile .no{font:900 14px/1 var(--body);color:color-mix(in srgb,var(--acc) 80%,#fff);opacity:.8}
.tile .ic{width:74px;height:74px;margin:8px 0 6px;display:grid;place-items:center;border-radius:20px;background:color-mix(in srgb,var(--acc) 18%,#0c0a2a);border:2px solid color-mix(in srgb,var(--acc) 50%,transparent)}
.tile .ic svg{width:42px;height:42px}
.tile h3{margin:6px 0 2px;font:800 18px/1.1 var(--body);color:#fff}
.tile .tag{font:700 12px/1.3 var(--body);color:var(--acc)}
.tile .gemrow{display:flex;align-items:center;gap:8px;margin:12px 0 14px;color:var(--ink-dim);font-size:12px;font-weight:700}
.tile .gemrow .g{width:16px;height:20px}
.play{width:100%;cursor:pointer;border:0;font:900 15px/1 var(--disp);color:#0a0820;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 75%,#fff),var(--acc));padding:13px;border-radius:14px;box-shadow:0 6px 0 color-mix(in srgb,var(--acc) 55%,#000);transition:transform .1s,box-shadow .1s}
.play:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--acc) 55%,#000)}

/* progress crystals */
.progress{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:rgba(20,18,54,.6);border:2px dashed var(--line);border-radius:22px;padding:18px}
.progress .lbl{font:800 14px/1 var(--body);color:var(--ink-dim)}
.progress .gems{display:flex;gap:10px}
.progress .gslot{width:38px;height:48px;display:grid;place-items:center;border-radius:12px;background:rgba(10,8,32,.7);border:2px solid var(--line);opacity:.5;transition:opacity .3s,border-color .3s,box-shadow .3s}
.progress .gslot.on{opacity:1;border-color:currentColor;box-shadow:0 0 16px color-mix(in srgb,currentColor 55%,transparent)}
.progress .gslot svg{width:22px;height:28px;filter:drop-shadow(0 0 8px currentColor)}

/* values */
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.vbadge{display:flex;align-items:center;gap:10px;border:2px solid color-mix(in srgb,var(--vc) 55%,var(--line));border-radius:16px;padding:12px 14px;background:rgba(18,16,50,.7)}
.vbadge .vi{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--vc) 22%,transparent);color:var(--vc)}
.vbadge b{font-size:15px;color:#fff}
.vbadge small{display:block;color:var(--ink-dim);font-size:11.5px;margin-top:2px}

.footer{text-align:center;color:var(--ink-mute);font:700 13px/1.7 var(--body);padding:34px 16px 44px}
.footer .big{color:#fff;font-family:var(--disp);font-size:clamp(18px,3vw,26px);display:block;margin-bottom:8px}

@media (max-width:820px){.hero{grid-template-columns:1fr}.stage{order:-1}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.05s!important}
  .floaty{display:none}
}

/* ---------- KİLİTLİ GÖREV (önceki bitmeden açılmaz) ---------- */
.tile.locked{filter:grayscale(.45) brightness(.72)}
.tile.locked .ribbon{background:#4a4a5e;color:#d2d2e6}
.tile.locked .play{background:linear-gradient(180deg,#3a3a4e,#2a2a34);box-shadow:0 6px 0 #191921;color:#b4b4c8;cursor:not-allowed}
.tile.locked .play:active{transform:none;box-shadow:0 6px 0 #191921}

/* ---------- WEB/TABLET DOKUNMA: diyalog + tıklanabilirler BUTON gibi ----------
   (metin seçilmesin/imleç gelmesin, tablette mavi dokunma-highlight'ı olmasın) */
.dlg,.veha-bubble,.tap-hint,.choicebtn,.gbtn,.play,.big-cta,.node,.back,.hero-card,.tile,button,a.gbtn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.dlg,.tap-hint,.choicebtn,.gbtn,.play,.big-cta,.node,.hero-card{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
.dlg{cursor:pointer}