/* ===========================================================
   CAFE TAKİP — "KONSOL SALONU" TEMASI (PlayStation Cafe)
   login.html ve index.html bu dosyayı birlikte kullanır.
=========================================================== */
:root{
  /* Zemin tonları — koyu lacivert/indigo, kahve değil */
  --ink-950:#0a0e1f;
  --ink-900:#11162c;
  --ink-800:#1a2140;
  --ink-700:#252e54;
  --ink-600:#34406e;

  /* Açık yüzey/metin tonları — önceki temadan çok daha açık */
  --mist-100:#eef1fb;
  --mist-200:#d7defa;
  --mist-muted:#9aa3d1;

  /* PlayStation mavisi + neon mor/magenta vurgu */
  --ps-blue-500:#2f7bf6;
  --ps-blue-400:#5b9bff;
  --neon-violet-500:#8b5cf6;
  --neon-violet-400:#a78bfa;
  --neon-magenta:#e84fd9;

  /* Durum renkleri (boş/dolu/uyarı) */
  --state-free:#34406e;
  --state-occupied:#2f7bf6;
  --state-warning:#ff3d6e;
  --state-warning-glow:#ff5b8a;

  --radius:14px;
  --shadow-card:0 4px 20px rgba(0,0,0,.45);

  /* ===== Zone vurgu renkleri (varsayılan: Gamer) =====
     body.zone-social ve body.zone-kids bu değişkenleri ezerek
     tüm arayüzün vurgu rengini (butonlar, başlıklar, glow efektleri) değiştirir. */
  --zone-accent:var(--ps-blue-500);
  --zone-accent-light:var(--ps-blue-400);
  --zone-accent-2:var(--neon-violet-500);
  --zone-accent-2-light:var(--neon-violet-400);
  --zone-glow:rgba(91,155,255,.35);
}

/* ----- Social teması: sıcak yeşil kumaş + ahşap kahve, "oyun kulübü" hissi ----- */
body.zone-social{
  --zone-accent:#1f9d6e;
  --zone-accent-light:#3ecb94;
  --zone-accent-2:#c9912f;
  --zone-accent-2-light:#e0ad52;
  --zone-glow:rgba(31,157,110,.35);
  --ink-950:#0a1410;
  --ink-900:#10211a;
  --ink-800:#172e24;
  --ink-700:#213d31;
  --ink-600:#2e4f41;
}

/* ----- Kids teması: canlı, sıcak, çok renkli — "top havuzu" hissi ----- */
body.zone-kids{
  --zone-accent:#ff7a3d;
  --zone-accent-light:#ffa067;
  --zone-accent-2:#ff4f9a;
  --zone-accent-2-light:#ff7fb8;
  --zone-glow:rgba(255,122,61,.35);
  --ink-950:#1a0e14;
  --ink-900:#26141d;
  --ink-800:#341c28;
  --ink-700:#442636;
  --ink-600:#583247;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--ink-950);
  color:var(--mist-100);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* ===== Zone arka plan katmanı =====
   #app'in arkasında sabit, tüm ekranı kaplayan bir resim katmanı.
   Üstüne okunabilirlik için koyu bir gradient/overlay biner.
   JS (applyZoneTheme) bu katmanın background-image'ini günceller. */
#zone-bg-layer{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .4s ease;
}
#zone-bg-layer::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,31,.55) 0%, var(--ink-950) 92%);
  background-color:var(--ink-950);
  opacity:.88;
}
body.zone-social #zone-bg-layer::after{ background:linear-gradient(180deg, rgba(10,20,16,.55) 0%, var(--ink-950) 92%); }
body.zone-kids #zone-bg-layer::after{ background:linear-gradient(180deg, rgba(26,14,20,.55) 0%, var(--ink-950) 92%); }
#app, .screen{ position:relative; z-index:1; }

input,textarea{user-select:text;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--ink-700);border-radius:8px;}

.hidden{display:none !important;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:10px;font-weight:700;font-size:15px;
  transition:transform .08s, opacity .15s, box-shadow .15s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--zone-accent),var(--zone-accent-2));color:#fff;box-shadow:0 0 0 rgba(91,155,255,0);}
.btn-primary:hover{box-shadow:0 0 22px var(--zone-glow);}
.btn-block{width:100%;margin-top:6px;}
.btn-ghost{background:var(--ink-800);color:var(--mist-100);border:1px solid var(--ink-700);}
.btn-danger{background:var(--state-warning);color:#fff;}
.btn-sage{background:#22c55e;color:#06250f;}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:8px;}

.error-msg{
  background:rgba(255,61,110,.12);border:1px solid var(--state-warning);
  color:#ffd6e1;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;text-align:left;
}

.toast-area{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{background:var(--ink-800);border:1px solid var(--ink-700);padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-card);animation:toastIn .2s ease-out;color:var(--mist-100);}
.toast.success{border-color:#22c55e;}
.toast.error{border-color:var(--state-warning);}
@keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}