/* ============================================================
   Dostlar Mekanı — canlı TeamSpeak durumu
   Tema: gece kulübü / retro tabela. Sıcak amber + soğuk tuş
   neon ikilisi, tıpkı bir mekânın kapısındaki iki renkli
   tabela gibi. Sinyal: en tepede asılı, titreşerek yanan
   "DOSTLAR MEKANI" tabelası + kapı üstü AÇIK/KAPALI plakası.
   ============================================================ */

:root{
  --bg-deep:     #150F22;
  --bg-panel:    #1F1733;
  --bg-panel-2:  #291F45;
  --line:        #392C5C;

  --amber:       #F5A93F;
  --amber-soft:  #F9C878;
  --teal:        #46E0C4;
  --teal-soft:   #9DF3E4;

  --ok:          #57E389;
  --off:         #FF6B6B;

  --text-main:   #F6F1E7;
  --text-muted:  #9B92B8;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --font-display: 'Bungee', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
}

body{
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(245,169,63,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 10%, rgba(70,224,196,0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 90%, rgba(70,224,196,0.06), transparent 60%);
  overflow-x:hidden;
}

.haze{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  z-index: 1;
}

.stage{
  position:relative;
  z-index:2;
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 20px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- Tabela (hero) ---------- */

.sign-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.chain{
  width:2px;
  height:34px;
  background: linear-gradient(var(--line), transparent);
  margin-bottom: 4px;
  opacity:.7;
}

.sign{
  margin:0;
  font-family: var(--font-display);
  line-height: 1.05;
  display:flex;
  flex-direction:column;
  gap: 2px;
  animation: flicker-in 1.6s ease-out both;
}

.sign-line1, .sign-line2{
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing: 0.04em;
}

.sign-line1{
  color: var(--amber-soft);
  text-shadow:
    0 0 6px rgba(245,169,63,0.9),
    0 0 18px rgba(245,169,63,0.55),
    0 0 46px rgba(245,169,63,0.35);
}

.sign-line2{
  color: var(--teal-soft);
  text-shadow:
    0 0 6px rgba(70,224,196,0.9),
    0 0 18px rgba(70,224,196,0.55),
    0 0 46px rgba(70,224,196,0.35);
}

@keyframes flicker-in{
  0%   { opacity: 0; filter: brightness(0.3); }
  8%   { opacity: 1; filter: brightness(1.6); }
  10%  { opacity: 0.4; filter: brightness(0.4); }
  14%  { opacity: 1; filter: brightness(1.3); }
  17%  { opacity: 0.6; }
  21%  { opacity: 1; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce){
  .sign{ animation: none; }
}

.plate{
  margin-top: 22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plate-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .3s ease, box-shadow .3s ease;
}

.plate-dot.is-on{
  background: var(--ok);
  box-shadow: 0 0 10px rgba(87,227,137,0.9);
  animation: pulse 2s ease-in-out infinite;
}

.plate-dot.is-off{
  background: var(--off);
  box-shadow: 0 0 10px rgba(255,107,107,0.8);
}

@keyframes pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.45; }
}

/* ---------- Sayaçlar ---------- */

.counter-row{
  display:flex;
  gap: 14px;
  margin-top: 40px;
  width:100%;
  flex-wrap: wrap;
  justify-content:center;
}

.counter-card{
  flex: 1 1 160px;
  max-width: 220px;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align:center;
}

.counter-card--ghost{
  opacity: 0.85;
}

.counter-num{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--amber-soft);
}

.counter-card--ghost .counter-num{ color: var(--teal-soft); }

.counter-label{
  display:block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Odalar / kanallar ---------- */

.rooms{
  width:100%;
  margin-top: 44px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rooms-empty{
  text-align:center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.room{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.room-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.room-name{
  font-weight: 700;
  font-size: 0.98rem;
}

.room-count{
  margin-left:auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-panel-2);
  border-radius: 999px;
  padding: 3px 10px;
}

.room-people{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  margin-top: 12px;
}

.person{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  font-size: 0.85rem;
}

.person-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--teal);
}

.person.is-away .person-dot{ background: var(--text-muted); }
.person.is-away{ color: var(--text-muted); }

/* ---------- Alt bilgi ---------- */

.foot{
  margin-top: 48px;
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.foot-dot{ opacity:.5; }

.foot-connect{
  color: var(--teal-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(157,243,228,0.5);
}

.foot-connect:hover{ color: var(--teal); }

/* ---------- Odaklanma / erişilebilirlik ---------- */

a:focus-visible, .foot-connect:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 480px){
  .stage{ padding-top: 44px; }
  .counter-row{ gap:10px; }
}