/* HapiPanel — koyu tema, marka rengi yesil (&a) + beyaz.
   Mobil once tasarlandi; genis ekranda alt gezinme yan panele doner. */

:root {
  --zemin:      #0c110e;
  --zemin-2:    #131a15;
  --kart:       #161e19;
  --kart-ust:   #1b241d;
  --cizgi:      #26332a;
  --yazi:       #e6efe8;
  --yazi-soluk: #8ba394;
  --yesil:      #55ff55;
  --yesil-koyu: #35c94a;
  --sari:       #f5c451;
  --kirmizi:    #ff5f56;
  --mavi:       #56b6ff;
  --mor:        #c084fc;
  --yuvarlak:   14px;
  --ust-guvenli: env(safe-area-inset-top, 0px);
  --alt-guvenli: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--zemin);
  color: var(--yazi);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

.gizli { display: none !important; }

/* ---------------- Giriş ---------------- */
.giris {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, #16241a 0%, var(--zemin) 60%);
}
.giris-kart {
  width: 100%; max-width: 340px; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 20px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.giris-alt { color: var(--yazi-soluk); font-size: 13px; margin-top: -8px; }

.marka { font-weight: 800; letter-spacing: -0.02em; font-size: 19px; }
.marka span { color: var(--yesil); }
.marka.buyuk { font-size: 30px; }

/* ---------------- Üst bar ---------------- */
.ustbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(var(--ust-guvenli) + 12px) 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(12,17,14,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cizgi);
}
.ustbar-sag { display: flex; align-items: center; gap: 10px; }
.ag-sayi {
  display: flex; align-items: center; gap: 7px;
  background: var(--kart); border: 1px solid var(--cizgi);
  padding: 5px 11px; border-radius: 999px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.nokta {
  width: 7px; height: 7px; border-radius: 50%; background: var(--yesil);
  box-shadow: 0 0 0 0 rgba(85,255,85,.6); animation: nabiz 2.4s infinite;
}
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(85,255,85,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(85,255,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(85,255,85,0); }
}
.ag-sayi.kopuk .nokta { background: var(--kirmizi); animation: none; }

/* ---------------- Gövde / sayfalar ---------------- */
.govde {
  padding: 16px 16px calc(84px + var(--alt-guvenli));
  max-width: 1180px; margin: 0 auto;
}
.sayfa { animation: belir .22s ease; }
@keyframes belir { from { opacity: 0; transform: translateY(6px); } }

.izgara {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.kart.genis { grid-column: 1 / -1; }
.izgara + .liste, .kart + .kart { margin-top: 12px; }

.kart-baslik {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--yazi-soluk);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.baslik-sag { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kart-alt { font-size: 12px; color: var(--yazi-soluk); }
.buyuk-sayi {
  font-size: 32px; font-weight: 750; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.olcek {
  height: 5px; background: var(--zemin-2); border-radius: 99px;
  overflow: hidden;
}
.olcek-dolu {
  height: 100%; background: linear-gradient(90deg, var(--yesil-koyu), var(--yesil));
  border-radius: 99px; transition: width .5s ease; width: 0;
}

/* ---------------- Sunucu kartları ---------------- */
.sunucu-izgara { display: grid; gap: 8px; }
.sunucu {
  display: flex; align-items: center; gap: 11px;
  background: var(--kart-ust); border: 1px solid var(--cizgi);
  border-radius: 11px; padding: 11px 12px;
}
.sunucu-isim { font-weight: 600; font-size: 14px; }
.sunucu-alt { font-size: 11.5px; color: var(--yazi-soluk); }
.sunucu-sayi {
  margin-left: auto; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.durum-lamba {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--yesil);
}
.durum-lamba.kapali { background: var(--kirmizi); }

/* ---------------- Grafik ---------------- */
.grafik-sarmal { height: 140px; position: relative; }
#grafik { width: 100%; height: 100%; display: block; }

/* ---------------- Kademeler ---------------- */
.kademeler { display: flex; flex-wrap: wrap; gap: 7px; }
.kademe {
  background: var(--kart-ust); border: 1px solid var(--cizgi);
  border-radius: 9px; padding: 7px 11px; font-size: 13px;
  display: flex; gap: 7px; align-items: baseline; cursor: pointer;
}
.kademe b { font-variant-numeric: tabular-nums; }
.kademe .isimler {
  display: none; font-size: 11.5px; color: var(--yazi-soluk);
  width: 100%; margin-top: 4px;
}
.kademe.acik { flex-wrap: wrap; }
.kademe.acik .isimler { display: block; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------------- Sekmeler ---------------- */
.sekme-satir {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; margin-bottom: 10px;
}
.sekme-satir::-webkit-scrollbar { display: none; }
.sekme {
  flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13px;
  background: var(--kart); border: 1px solid var(--cizgi);
  color: var(--yazi-soluk); cursor: pointer; font-weight: 500;
  white-space: nowrap;
}
.sekme.etkin {
  background: rgba(85,255,85,.12); border-color: rgba(85,255,85,.4);
  color: var(--yesil);
}

/* ---------------- Sohbet ---------------- */
.sohbet-kutu {
  background: #0a0d0b; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 10px 12px;
  height: calc(100vh - 340px); min-height: 220px;
  overflow-y: auto; overflow-x: hidden;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.6;
  overscroll-behavior: contain;
}
.satir { word-wrap: break-word; padding: 1px 0; }
.satir .saat { color: #4d5f53; margin-right: 7px; font-size: 11px; }
.satir.giris .metin { color: var(--yesil-koyu); }
.satir.cikis .metin { color: #b06b6b; }
.satir.sistem .metin { color: var(--yazi-soluk); font-style: italic; }
.bos-durum {
  color: var(--yazi-soluk); text-align: center; padding: 30px 10px;
  font-size: 13px; font-family: inherit;
}

.yazma-alan {
  margin-top: 10px; background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 10px; display: flex;
  flex-direction: column; gap: 8px;
}
.kip-satir { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kip-secim input { display: none; }
.kip-secim span {
  display: block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--kart-ust); border: 1px solid var(--cizgi);
  color: var(--yazi-soluk); cursor: pointer;
}
.kip-secim input:checked + span {
  background: rgba(85,255,85,.13); border-color: rgba(85,255,85,.4);
  color: var(--yesil);
}
.oyuncu-giris { flex: 1; min-width: 120px; }
.yazma-satir { display: flex; gap: 8px; }
.yazma-satir input { flex: 1; }

.onizleme {
  background: #0a0d0b; border: 1px solid var(--cizgi); border-radius: 9px;
  padding: 9px 11px; font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; word-wrap: break-word; min-height: 34px;
}
.onizleme .bekle { color: var(--yazi-soluk); font-style: italic; }
.onizleme.soluk { color: var(--yazi-soluk); max-height: 130px; overflow-y: auto; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.onizleme .hata-metni { color: var(--kirmizi); }

/* ---------------- Form öğeleri ---------------- */
input[type=text], input[type=password], select, textarea {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 11px 13px; color: var(--yazi);
  font-size: 15px; font-family: inherit; width: 100%;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(85,255,85,.5);
  box-shadow: 0 0 0 3px rgba(85,255,85,.09);
}
input::placeholder { color: #5d7266; }

.dugme {
  border: 1px solid var(--cizgi); background: var(--kart-ust);
  color: var(--yazi); border-radius: 10px; padding: 11px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .06s;
}
.dugme:active { transform: scale(.975); }
.dugme:hover { filter: brightness(1.14); }
.dugme:disabled { opacity: .45; cursor: default; }
.dugme.birincil {
  background: linear-gradient(180deg, var(--yesil), var(--yesil-koyu));
  color: #06140a; border-color: transparent;
}
.dugme.tehlike {
  background: linear-gradient(180deg, #ff6b62, #d63b32);
  color: #fff; border-color: transparent;
}
.dugme.sade { background: transparent; }
.dugme.tam { width: 100%; }
.dugme.kucuk { padding: 4px 10px; font-size: 12px; font-weight: 500; }
.dugme.ikon { padding: 6px 10px; font-size: 16px; }

.alan { display: flex; flex-direction: column; gap: 6px; }
.alan label {
  font-size: 12px; color: var(--yazi-soluk); font-weight: 600;
  display: flex; gap: 8px; align-items: baseline;
}
.ipucu { font-weight: 400; color: #5d7266; font-size: 11.5px; }
.ipucu.blok { margin-top: 2px; }
.secim-satir { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--yazi-soluk);
}
.onay { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.onay input { width: 16px; height: 16px; accent-color: var(--yesil-koyu); }

.hata { color: var(--kirmizi); font-size: 13px; min-height: 18px; }

/* ---------------- Listeler ---------------- */
.liste { display: flex; flex-direction: column; gap: 10px; }
.liste.sik { gap: 6px; }
.oge {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.oge-ust {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--yazi-soluk);
}
.rozet {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
  background: var(--kart-ust); border: 1px solid var(--cizgi);
}
.rozet.iyi   { color: var(--yesil); border-color: rgba(85,255,85,.35);
               background: rgba(85,255,85,.1); }
.rozet.kotu  { color: var(--kirmizi); border-color: rgba(255,95,86,.35);
               background: rgba(255,95,86,.1); }
.rozet.uyari { color: var(--sari); border-color: rgba(245,196,81,.35);
               background: rgba(245,196,81,.1); }
.rozet.acik  { color: var(--mavi); border-color: rgba(86,182,255,.35);
               background: rgba(86,182,255,.1); }
.soru { font-weight: 600; font-size: 14px; }
.cevap { font-size: 13.5px; color: #c2d4c7; }
.oge-dugmeler { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }

.cikti {
  background: #0a0d0b; border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 10px 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto; color: #bcd0c2;
}

/* ---------------- Alt gezinme ---------------- */
.altbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(12,17,14,.93); backdrop-filter: blur(16px);
  border-top: 1px solid var(--cizgi);
  padding-bottom: var(--alt-guvenli);
}
.gez {
  background: none; border: none; color: var(--yazi-soluk);
  padding: 9px 2px 8px; font-size: 10.5px; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; font-weight: 500;
}
.gez-ikon { font-size: 18px; line-height: 1; }
.gez.etkin { color: var(--yesil); }

/* ---------------- Pencere ---------------- */
.ortu {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.62);
  display: grid; place-items: end center; backdrop-filter: blur(3px);
}
.pencere {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 20px 20px 0 0; padding: 18px;
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(18px + var(--alt-guvenli));
  animation: yukari .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes yukari { from { transform: translateY(30px); opacity: .5; } }
.pencere-baslik { font-weight: 700; font-size: 17px; }
.pencere-dugmeler { display: flex; gap: 8px; align-items: center; }
.bosluk { flex: 1; }

/* ---------------- Bildirim ---------------- */
.bildirim {
  position: fixed; left: 50%; transform: translate(-50%, 20px);
  bottom: calc(90px + var(--alt-guvenli)); z-index: 80;
  background: var(--kart-ust); border: 1px solid var(--cizgi);
  color: var(--yazi); padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s; max-width: 88vw; text-align: center;
}
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }
.bildirim.hatali { border-color: rgba(255,95,86,.5); color: #ffb3ae; }

/* ---------------- Geniş ekran ---------------- */
@media (min-width: 780px) {
  .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kart.genis { grid-column: span 2; }
  #sunucu-kartlari-sarmal { grid-column: 1 / -1; }
  .sunucu-izgara { grid-template-columns: repeat(2, 1fr); }
  .govde { padding-left: 96px; padding-right: 24px; }
  .ustbar { padding-left: 96px; }

  .altbar {
    top: 0; right: auto; width: 80px; bottom: 0;
    grid-template-columns: 1fr; grid-auto-rows: min-content;
    align-content: center; gap: 6px;
    border-top: none; border-right: 1px solid var(--cizgi);
    padding-bottom: 0;
  }
  .gez { padding: 13px 4px; font-size: 11px; border-radius: 12px; margin: 0 8px; }
  .gez.etkin { background: rgba(85,255,85,.1); }
  .sohbet-kutu { height: calc(100vh - 300px); }
  .ortu { place-items: center; }
  .pencere { border-radius: 20px; }
}

@media (min-width: 1100px) {
  .sunucu-izgara { grid-template-columns: repeat(4, 1fr); }
}

/* İki faktör kurulum QR'ı — beyaz zemin şart, okuyucular kontrast istiyor. */
.qr-kutu {
  background: #fff; border-radius: 12px; padding: 12px;
  display: flex; justify-content: center;
}
.qr-kutu img { width: 100%; max-width: 220px; height: auto; display: block; }