/* Netin2 ana sayfa. Palet oyun içi panellerle aynı (play.css / lobby.css). Dış kaynak yok, sistem fontları. */
:root{
  color-scheme:dark;
  --bg-0:#162016;--bg-1:#172017;--bg-2:#182119;--bg-input:#0e1710;--bg-hover:#232b1c;
  --line:#2c3628;--line-2:#778262;--line-3:#aa9564;--line-4:#b7a473;
  --text:#eee2c3;--text-strong:#f3e4b6;--text-2:#ecdca9;--muted:#aeb8a3;
  --gold:#d6bc70;--gold-2:#e1cc97;--gold-3:#ffe771;--gold-edge:#f2e2ad;--on-gold:#182119;
  --error:#ffc8ac;--seal:#9e3a2d;
  --serif:Georgia,"Times New Roman","Noto Serif",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:3px;--r-card:6px;--bar-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100dvh;color:var(--text);font:16px/1.6 var(--sans);
  background:radial-gradient(880px 520px at 18% -8%,#212b1f 0%,rgba(33,43,31,0) 72%) no-repeat,var(--bg-0);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* Atlama bağlantısı */
.skip{position:absolute;left:16px;top:-120px;z-index:30;padding:10px 14px;background:var(--gold);color:var(--on-gold);border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Üst bar */
.bar{position:sticky;top:0;z-index:20;background:var(--bg-0);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--bar-h)}
.mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text-strong);text-decoration:none;font:400 22px/1 var(--serif);letter-spacing:-.01em;border-radius:var(--r)}
.mark .two{color:var(--gold)}
.seal{width:26px;height:26px;flex:none;transform:rotate(-5deg)}

/* Butonlar */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--r);font:600 15px/1 var(--sans);color:var(--text);background:transparent;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .08s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn-outline{border-color:var(--gold);color:var(--gold-2)}
.btn-outline:hover{background:var(--bg-hover);border-color:var(--gold-2);color:var(--gold-3)}
.btn-ghost{border-color:var(--line-2);color:var(--text-2)}
.btn-ghost:hover{border-color:var(--line-4);color:var(--text-strong)}
.btn-block{width:100%}
.btn-lg{min-height:48px;padding:0 24px;font-size:16px}
.btn-play{
  min-height:48px;padding:0 28px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);border-color:var(--gold);color:var(--on-gold);box-shadow:inset 0 1px 0 var(--gold-edge);
}
.btn-play:hover{background:var(--gold-3);border-color:var(--gold-3)}
.btn-link{min-height:44px;padding:12px 4px;border:0;background:none;color:var(--gold-2);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:var(--r)}
.btn-link:hover{color:var(--gold-3)}
:is(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--gold-3);outline-offset:2px}

/* Üst düzen: kahraman + kart */
.top{display:grid;gap:40px;padding:40px 0 56px}
.hero{max-width:60ch;min-width:0}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0 0 20px;font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:7px;height:7px;flex:none;background:var(--gold);transform:rotate(45deg)}
.tag{padding:3px 8px;border:1px solid var(--line-2);border-radius:2px;font-size:11px;letter-spacing:.12em;color:var(--text-2)}
h1{margin:0 0 20px;font:400 clamp(2.25rem,1.4rem + 4.8vw,4.25rem)/1.05 var(--serif);color:var(--text-strong);letter-spacing:-.015em;text-wrap:balance}
.lede{margin:0 0 28px;max-width:34em;font-size:17px;line-height:1.65;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.fine{margin:16px 0 0;font-size:14px;color:var(--muted)}

/* Kart */
.account{min-width:0;scroll-margin-top:calc(var(--bar-h) + 16px)}
.card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-card);padding:20px 20px 24px}
.card.attn{animation:attn .9s var(--ease)}
@keyframes attn{from{box-shadow:0 0 0 0 var(--gold-3)}to{box-shadow:0 0 0 12px rgba(255,231,113,0)}}

.tabs{display:grid;grid-template-columns:1fr 1fr;margin:-4px 0 20px;border-bottom:1px solid var(--line)}
.tabs [role=tab]{
  appearance:none;min-height:48px;margin-bottom:-1px;padding:12px 8px;background:none;border:0;border-bottom:2px solid transparent;
  border-radius:var(--r) var(--r) 0 0;font:400 19px/1.2 var(--serif);color:var(--muted);cursor:pointer;
  transition:color .15s var(--ease),border-color .15s var(--ease);
}
.tabs [role=tab]:hover{color:var(--text-2)}
.tabs [role=tab][aria-selected=true]{color:var(--gold-3);border-bottom-color:var(--gold)}

.notice{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--gold-2)}
.notice:empty{margin:0;min-height:0}
.notice-error{color:var(--error)}

.field{margin:0 0 16px}
.field label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--text-2)}
.field input{
  display:block;width:100%;min-height:48px;padding:11px 14px;background:var(--bg-input);color:var(--text-strong);
  border:1px solid var(--line-2);border-radius:var(--r);font:16px/1.4 var(--sans);transition:border-color .15s var(--ease);
}
.field input:hover{border-color:var(--line-3)}
.field input:focus-visible{outline-offset:1px;border-color:var(--gold)}
.field input[aria-invalid=true]{border-color:var(--error)}
.pw{position:relative}
.pw input{padding-right:88px}
.pw-toggle{
  position:absolute;top:2px;right:2px;bottom:2px;min-width:76px;padding:0 12px;border:0;border-radius:2px;background:transparent;
  color:var(--muted);font:600 13px/1 var(--sans);letter-spacing:.04em;cursor:pointer;transition:color .15s var(--ease);
}
.pw-toggle:hover{color:var(--gold-2)}
.hint{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.field-error{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--error)}
.field-error:empty{display:none}
.rule{height:3px;margin-top:10px;background:var(--line);border-radius:2px;overflow:hidden}
.rule-bar{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .15s var(--ease)}
.rule-text{margin-top:6px;font-variant-numeric:tabular-nums}
.rule-text.ok{color:var(--gold-2)}
.panel .btn-block{margin-top:6px}
.panel .fine{margin-top:12px;font-size:13px}

/* Girişli durum */
.welcome .eyebrow{margin-bottom:8px}
.welcome-name{margin:0 0 6px;font:400 28px/1.15 var(--serif);color:var(--text-strong);overflow-wrap:anywhere}
.welcome-sub{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.chars{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line)}
.chars:empty{display:none}
.chars li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.chars strong{font:400 17px/1.3 var(--serif);color:var(--text-strong);overflow-wrap:anywhere}
.chars span{color:var(--muted);white-space:nowrap}
.welcome-actions{display:grid;gap:10px}
.welcome-actions .btn-block{margin-top:0}

/* Özellikler */
.about{padding:8px 0 64px}
.about h2{margin:0 0 8px;font:400 clamp(1.5rem,1.2rem + 1.4vw,2rem)/1.2 var(--serif);color:var(--text-strong)}
.features{margin:0;display:grid}
.feature{padding:20px 0;border-top:1px solid var(--line)}
.feature:last-child{border-bottom:1px solid var(--line)}
.feature dt{display:flex;align-items:center;gap:12px;font:400 21px/1.2 var(--serif);color:var(--text-2)}
.feature dt svg{width:22px;height:22px;flex:none;color:var(--gold)}
.feature dd{margin:8px 0 0 34px;max-width:46ch;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* Alt bilgi */
.foot{border-top:1px solid var(--line);padding:24px 0 max(24px,env(safe-area-inset-bottom));font-size:13px;color:var(--muted)}
.foot-in{display:grid;gap:8px}
.foot p{margin:0}
.foot-mark{font:400 17px/1.2 var(--serif);color:var(--text-2)}
.foot-mark span{margin-left:6px;font:13px/1.2 var(--sans);color:var(--muted)}
.foot-status{display:inline-flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.foot-status[data-state=up] .dot{background:var(--gold)}
.foot-status[data-state=wait] .dot{background:var(--error)}

/* Açılış hareketi: kahraman bloğu tek seferlik, tek hareket (DESIGN.md) */
.hero{animation:rise .32s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(min-width:640px){
  .wrap{width:min(1120px,100% - 48px)}
  .card{padding:28px 32px 32px}
  .top{padding:56px 0 64px}
  .btn-play{min-height:52px;padding:0 34px;font-size:16px}
}
@media(min-width:900px){
  .top{grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start;padding:80px 0 88px}
  .hero{padding-top:8px}
  .about{padding:16px 0 88px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-bottom:1px solid var(--line)}
  .feature{padding:28px 0}
  .feature:last-child{border-bottom:0}
  .foot-in{grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px}
}
@media(min-width:1100px){
  .top{grid-template-columns:minmax(0,1fr) 440px;gap:96px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}