/* DPC Sunucu Paneli - arayüz stilleri */
:root{
  --bg:#0b0e13;
  --bg2:#111621;
  --panel:#151b28;
  --panel2:#1b2231;
  --line:#232c3d;
  --line2:#2e3a50;
  --txt:#e6ecf5;
  --txt2:#94a3b8;
  --txt3:#64748b;
  --acc:#ff4438;
  --acc2:#ff6a4d;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --r:10px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Sayfanin temel zemini <html> uzerinde durur, <body> saydamdir.
   Sebep: sekmeye gore degisen atmosfer katmani (.atmos) body'nin ALTINDA
   (z-index:-2) cizilir. Zemin body'de kalsaydi katmanlar zeminin arkasinda
   kalip hic gorunmezdi. */
html{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,68,56,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(56,120,255,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body{
  background:transparent;
  color:var(--txt);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  min-height:100vh;
}
a{color:var(--acc2);text-decoration:none}
button{font-family:inherit}

/* ---------------- GİRİŞ EKRANI ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:32px;box-shadow:var(--shadow);
}
.login-card h1{margin:0 0 4px;font-size:22px;letter-spacing:.3px}
.login-card .sub{color:var(--txt2);margin:0 0 24px;font-size:13px}
.brand-mark{
  width:46px;height:46px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--acc),#8b1a12);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;
  box-shadow:0 6px 20px rgba(255,68,56,.35);
}

/* ---------------- FORM ---------------- */
label{display:block;font-size:12px;color:var(--txt2);margin:0 0 6px;font-weight:600;letter-spacing:.2px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 12px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--r);color:var(--txt);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,68,56,.15)}
/* ---------------- KAYDIRICI (range) ----------------
   accent-color tek basina yetmiyor: Opera, eski Edge ve bazi
   Chromium surumlerinde varsayilan (cirkin) gorunum kaliyordu.
   Bu yuzden iz ve tutamak ayri ayri, her motor icin yaziliyor. */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;background:transparent;cursor:pointer;
  accent-color:var(--acc);margin:0;padding:0;display:block
}
input[type=range]:focus{outline:none}
/* --- WebKit / Blink (Chrome, Edge, Opera, Safari) --- */
input[type=range]::-webkit-slider-runnable-track{
  height:7px;border-radius:99px;border:1px solid var(--line2);
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc) var(--dolu,0%),#1e293b var(--dolu,0%),#1e293b 100%)
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-6.5px;border-radius:50%;
  background:#fff;border:2px solid var(--acc);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform .12s ease,box-shadow .12s ease
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 0 5px rgba(230,57,70,.18)}
/* --- Firefox --- */
input[type=range]::-moz-range-track{
  height:7px;border-radius:99px;background:#1e293b;border:1px solid var(--line2)
}
input[type=range]::-moz-range-progress{height:7px;border-radius:99px;background:var(--acc)}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--acc);
  box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .12s ease
}
input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}

/* Kaydirici + elle giris satiri: kaydirici genis, kutu dar */
/* Kaydirak + elle sayi kutusu. Kutunun ustunde "ADET" etiketi oldugu icin
   satiri alttan hizaliyoruz; kaydiragi da kutunun ortasina denk getiriyoruz. */
.rangerow{display:flex;align-items:flex-end;gap:14px}
.rangerow .rr-sl{flex:1;min-width:0;padding-bottom:9px}
.rangerow .rr-num{width:96px;flex:none}
.rangerow .rr-num input{text-align:center;font-weight:700;font-size:15px;padding:9px 8px}
.rangerow .rr-num label{display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--txt3);margin-bottom:5px;text-align:center;font-weight:700}
@media(max-width:560px){.rangerow{flex-direction:column;align-items:stretch;gap:10px}.rangerow .rr-num{width:100%}}
.field{margin-bottom:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.hint{font-size:12px;color:var(--txt3);margin-top:6px}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 16px;border-radius:var(--r);border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);cursor:pointer;font-size:14px;font-weight:600;
  transition:.15s;
}
.btn:hover{background:#232c3d;border-color:#3a4761}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* ============ DUGME RENK DUZENI ============
   Dunyada yerlesik anlamlar kullaniliyor. Bir dugmenin rengi ne
   yaptigini soyler; marka rengi bu anlamin onune gecmez.

     MAVI   (btn-primary) : ana islem — Kaydet, Olustur, Ayarlari Ac, Giris
     YESIL  (btn-ok)      : baslat / katil — "git, calistir"
     KIRMIZI(btn-bad)     : GERI ALINAMAZ — Durdur, Sil, Kapat
     SARI   (btn-warn)    : dikkat — Yeniden Baslat, sunucuyu kesintiye ugratir
     GRI    (btn)         : notr — Iptal, Geri, Otomatik Bul
     MARKA  (btn-brand)   : yalnizca pazarlama vurgusu gereken tek dugme

   NEDEN "Ayarlari Ac" ARTIK KIRMIZI DEGIL:
   kirmizi her arayuzde "tehlike / sil" demektir. Ayar acan bir dugmede
   kirmizi, kullaniciya yanlislikla bir sey silecekmis hissi verir. */

.btn-primary{background:#2563eb;border-color:transparent;color:#fff}
.btn-primary:hover{background:#3b82f6}
.btn-ok{background:#15803d;border-color:transparent;color:#fff}
.btn-ok:hover{background:#16a34a}
.btn-bad{background:#b91c1c;border-color:transparent;color:#fff}
.btn-bad:hover{background:#dc2626}
.btn-warn{background:#b45309;border-color:transparent;color:#fff}
.btn-warn:hover{background:#d97706}
.btn-brand{background:linear-gradient(135deg,var(--acc),#d92e23);border-color:transparent;color:#fff}
.btn-brand:hover{background:linear-gradient(135deg,var(--acc2),var(--acc))}
.btn-sm{padding:6px 10px;font-size:12.5px}
.btn-block{width:100%}
.btn.kaydedildi{background:#15803d !important;border-color:transparent;color:#fff}

/* ---- Bolum basina kaydet dugmesi (Yonetim > Ayarlar) ---- */
.secsave{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--line)}
.secsave .ss-msg{font-size:12px;color:var(--txt3)}

/* ---- Kaydedilmemis degisiklik cubugu ---- */
.ayarbar{
  position:sticky;bottom:12px;z-index:40;margin-top:20px;
  display:none;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-radius:14px;
  background:rgba(180,83,9,.16);border:1px solid rgba(245,158,11,.45);
  backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(0,0,0,.4)
}
.ayarbar.gorunur{display:flex}
.ayarbar .ab-msg{flex:1;min-width:180px;font-size:13.5px;color:#fcd34d;font-weight:600}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:8px 0}
.switch input{display:none}
.switch .track{width:40px;height:22px;border-radius:20px;background:#2b3448;position:relative;transition:.2s;flex:none}
.switch .track:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8494ad;transition:.2s}
.switch input:checked + .track{background:rgba(255,68,56,.35)}
.switch input:checked + .track:after{left:21px;background:var(--acc)}
.switch span.lbl{font-size:13.5px;color:var(--txt)}

/* ---------------- ÜST BAR ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px 20px;background:rgba(11,14,19,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.tb-sol{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tb-sol #srvName{font-size:14.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-kumanda{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Sadece telefondaki ☰ menusunde gorunen dugmeler (genis ekranda ust cubukta duruyorlar) */
.menuOnly{display:none}
.tb-hesap{position:relative;display:flex;align-items:center;gap:8px}
.tb-menubtn{display:none;font-size:17px;line-height:1;padding:8px 12px}
.tb-menu{display:flex;align-items:center;gap:8px}
.tb-kisa{display:none}
.topbar .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.topbar .logo i{
  width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--acc),#8b1a12);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#fff
}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;border:1px solid var(--line2);background:var(--panel)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--txt3)}
.pill.on{border-color:rgba(34,197,94,.4);color:#86efac}
.pill.on .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pill.off{border-color:rgba(239,68,68,.35);color:#fca5a5}
.pill.off .dot{background:var(--bad)}
.who{font-size:13px;color:var(--txt2)}

/* ---------------- YERLEŞİM ---------------- */
.layout{display:flex;gap:20px;padding:20px;max-width:1400px;margin:0 auto;align-items:flex-start}
.tabs{width:210px;flex:none;position:sticky;top:74px}
.tabs button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;margin-bottom:6px;
  background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--txt2);
  cursor:pointer;font-size:14px;font-weight:600;transition:.15s;
}
.tabs button:hover{background:var(--panel);color:var(--txt)}
.tabs button.active{background:var(--panel);border-color:var(--line2);color:var(--txt);box-shadow:inset 3px 0 0 var(--acc)}
.tabs .ico{font-size:15px;width:18px;text-align:center}
/* Alttaki "Kaydet" cubugu yapiskan (sticky) durur. Sayfanin en altina
   inildiginde son kartin uzerine binmesin diye asagida bos pay birakiyoruz. */
.content{flex:1;min-width:0;padding-bottom:96px}
@media(max-width:860px){
  .layout{flex-direction:column;padding:12px}
  .tabs{width:100%;position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
  .tabs button{width:auto;white-space:nowrap;margin:0}
}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}
.card h2{margin:0 0 4px;font-size:16px}
.card .desc{color:var(--txt2);font-size:13px;margin:0 0 18px}
.sec-title{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3);font-weight:700;margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec-title:first-child{margin-top:0}

/* ---------------- ARAÇ / PİST LİSTESİ ---------------- */
.search{margin-bottom:12px}
.picker{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.picker::-webkit-scrollbar{width:10px}
.picker::-webkit-scrollbar-thumb{background:#2b3448;border-radius:8px}
.row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:none}
.row:hover{background:var(--panel2)}
.row.sel{background:rgba(255,68,56,.10)}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm small{color:var(--txt3);font-size:11.5px}
.row .cnt{width:64px;flex:none}
.row .cnt input{padding:5px 8px;text-align:center;font-size:13px}
.chk{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.row.sel .chk{background:var(--acc);border-color:var(--acc)}
.thumb{width:56px;height:34px;flex:none;border-radius:6px;object-fit:cover;background:var(--panel2);border:1px solid var(--line)}

/* ---- ÇİZGİ HARİTASI (outline.png) OLAN PİSTLER ----
   Bazı haritalarda gerçek fotoğraf yoktur; yalnızca siyah zemin üzerine
   beyaz çizgi haritası bulunur. 56x34 piksellik bir kutuda bu tamamen
   SİYAH görünür — "pist görselleri bozuk" şikâyetinin sebebi buydu.
   Çözüm: kutuya haritanın adından üretilen renkli bir zemin koyup
   çizimi "screen" karışımıyla üstüne basıyoruz. Siyah zemin kaybolur,
   yalnızca yol çizgisi parlayarak görünür. */
.thumbkutu{width:56px;height:34px;flex:none;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel2);display:block}
.thumbkutu .thumb{width:100%;height:100%;border:0;border-radius:0;display:block}
.thumbkutu.cizim .thumb{
  mix-blend-mode:screen;
  filter:brightness(2.1) contrast(1.35) saturate(0);
  object-fit:contain;padding:2px
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line2);font-size:12.5px}
.chip b{font-weight:600}
.chip button{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:15px;line-height:1;padding:0}
.chip button:hover{color:var(--acc)}

.track-preview{display:flex;gap:16px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px;
  min-width:0;flex-wrap:wrap}
.track-preview img{width:180px;height:110px;object-fit:cover;border-radius:8px;background:var(--panel2);flex:none;max-width:100%}
/* min-width:0 olmadan uzun harita kimligi kutuyu ekrandan tasiriyordu */
.track-preview .info{flex:1 1 190px;min-width:0;overflow-wrap:anywhere}
.track-preview .info b{display:block;font-size:16px;margin-bottom:4px;overflow-wrap:anywhere}
.track-preview .info span{color:var(--txt2);font-size:13px;overflow-wrap:anywhere}

/* ---------------- KONSOL ---------------- */
.console{
  background:#05070b;border:1px solid var(--line);border-radius:var(--r);padding:14px;
  height:460px;overflow-y:auto;font:12.5px/1.6 Consolas,"Courier New",monospace;white-space:pre-wrap;word-break:break-word;
}
.console .ln{display:flex;gap:8px;align-items:flex-start;padding:1px 6px;border-radius:5px}
.console .ln:hover{background:rgba(255,255,255,.045)}
.console .t{color:#3f4c60;flex:none;font-variant-numeric:tabular-nums}
.console .lv{flex:none;width:52px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.4px;
  border-radius:4px;padding:1px 0;line-height:1.5;margin-top:1px}
.console .m{flex:1;min-width:0}
.console .m i{font-style:normal}
.console .m .n{color:#f0abfc}
.console .m .ip{color:#5eead4;font-weight:600}
.console .m .q{color:#fde68a}
.console .m .p{color:#94a3b8}

.console .lvl-out  .lv{background:#1e293b;color:#94a3b8}
.console .lvl-out  .m{color:#cbd5e1}
.console .lvl-sys  .lv{background:#0c4a6e;color:#7dd3fc}
.console .lvl-sys  .m{color:#7dd3fc}
.console .lvl-err  .lv{background:#7f1d1d;color:#fecaca}
.console .lvl-err  .m{color:#fca5a5;font-weight:600}
.console .lvl-err  {background:rgba(239,68,68,.09)}
.console .lvl-warn .lv{background:#78350f;color:#fde68a}
.console .lvl-warn .m{color:#fbbf24}
.console .lvl-warn {background:rgba(245,158,11,.07)}
.console .lvl-join .lv{background:#14532d;color:#86efac}
.console .lvl-join .m{color:#4ade80}
.console .lvl-left .lv{background:#3f2a12;color:#fdba74}
.console .lvl-left .m{color:#fb923c}
.console .lvl-dim  .lv{background:#181f2c;color:#4b5768}
.console .lvl-dim  .m{color:#64748b}

.console-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.console-bar input[type=text]{flex:1;min-width:160px;margin:0}
.loglegend{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.loglegend span{font-size:10.5px;font-weight:700;letter-spacing:.4px;border-radius:4px;padding:2px 7px}

/* ---------------- KAYDET ÇUBUĞU ---------------- */
.savebar{
  position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;background:rgba(17,22,33,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;margin-top:8px;box-shadow:0 -6px 24px rgba(0,0,0,.35)
}
.savebar .msg{font-size:13px;color:var(--txt2);flex:1;min-width:160px}

/* ---------------- UYARILAR ---------------- */
.alert{padding:12px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:16px;border:1px solid}
.alert.err{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fca5a5}
.alert.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#86efac}
.alert.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fcd34d}
.alert.info{background:rgba(56,120,255,.10);border-color:rgba(56,120,255,.3);color:#93c5fd}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--txt3);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line2);color:var(--txt2)}
.tag.admin{background:rgba(255,68,56,.15);border-color:rgba(255,68,56,.4);color:#fca5a5}

.rangeval{float:right;color:var(--txt);font-weight:700;font-size:12px}
.loading{padding:60px;text-align:center;color:var(--txt3)}
.hidden{display:none !important}

/* ================= LOGO ================= */
.logo-badge{display:block;margin:0 auto 18px;width:120px;height:auto;filter:drop-shadow(0 6px 20px rgba(120,170,255,.20))}
.topbar .logo img{height:34px;width:auto;display:block}
.topbar .logo b{font-weight:800;letter-spacing:.4px;font-size:15px}
.topbar .logo small{display:block;font-size:10.5px;color:var(--txt3);letter-spacing:1.4px;text-transform:uppercase;margin-top:-2px}

/* ================= SUNUCU SEÇİCİ ================= */
.srvpick{display:flex;align-items:center;gap:8px}
.srvpick select{width:auto;min-width:190px;max-width:320px;padding:7px 10px;font-weight:600;font-size:13px}

/* ================= YÖNETİCİ ŞERİDİ ================= */
.adminbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px;background:rgba(245,158,11,.12);border-bottom:1px solid rgba(245,158,11,.3);
  color:#fcd34d;font-size:13px;font-weight:600
}
.adminbar a{color:#fcd34d;text-decoration:underline}

/* ================= SUNUCU KARTLARI (ADMIN) ================= */
.srvgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.srv{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .15s
}
.srv:hover{border-color:var(--line2)}
.srv.on{border-color:rgba(34,197,94,.35);box-shadow:0 0 0 1px rgba(34,197,94,.12)}
.srv.arch{opacity:.72}
.srv .head{display:flex;align-items:flex-start;gap:10px}
.srv .head b{font-size:15px;line-height:1.3;flex:1;min-width:0;word-break:break-word}
.srv .meta{display:flex;flex-wrap:wrap;gap:6px}
.srv .kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.srv .kv:last-of-type{border-bottom:none}
.srv .kv span{color:var(--txt3)}
.srv .kv b{font-weight:600;text-align:right;word-break:break-word}
.srv .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;border:1px solid var(--line2);background:var(--bg2);color:var(--txt2)}
.badge.on{border-color:rgba(34,197,94,.4);color:#86efac;background:rgba(34,197,94,.10)}
.badge.off{border-color:var(--line2);color:var(--txt3)}
.badge.arch{border-color:rgba(148,163,184,.35);color:#cbd5e1}
.badge.warn{border-color:rgba(245,158,11,.4);color:#fcd34d;background:rgba(245,158,11,.08)}
.badge.ext{border-color:rgba(56,120,255,.45);color:#93c5fd;background:rgba(56,120,255,.10)}

/* ================= İSTATİSTİK ================= */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat b{display:block;font-size:24px;line-height:1.1;font-weight:800}
.stat span{font-size:11.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:.7px;font-weight:700}

/* ================= MODAL ================= */
.modal{position:fixed;inset:0;background:rgba(3,5,9,.72);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal .box{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:22px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px;font-size:17px}
.modal .sub{color:var(--txt2);font-size:13px;margin:0 0 18px}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.checklist{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.checklist label{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;margin:0;font-size:13.5px;color:var(--txt);font-weight:500}
.checklist label:last-child{border-bottom:none}
.checklist input{width:16px;height:16px;accent-color:var(--acc)}
.checklist label.off{opacity:.45}
.checklist label.off input{cursor:not-allowed}
.checklist .empty{padding:16px;color:var(--txt3);text-align:center;font-size:13px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1;min-width:180px}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12px;color:var(--txt2);word-break:break-all}

/* ================= GÖRÜNÜM GEÇİŞİ ================= */
.view{display:none}
.view.on{display:block}
.page-title{font-size:22px;font-weight:800;margin:0 0 4px}
.page-sub{color:var(--txt2);font-size:13.5px;margin:0 0 20px}

/* ================= MÜŞTERİ SUNUCU KARTLARI ================= */
.mysrv{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.mycard{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:14px;transition:.15s;position:relative;overflow:hidden
}
.mycard:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--acc),transparent)}
.mycard.on:before{background:linear-gradient(90deg,var(--ok),transparent)}
.mycard:hover{border-color:var(--line2);transform:translateY(-2px)}
.mycard h3{margin:0;font-size:17px;line-height:1.3;word-break:break-word}
.mycard .lines{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--txt2)}
.mycard .lines b{color:var(--txt);font-weight:600}
.mycard .btns{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.mycard .btns .btn{flex:1;min-width:110px}

/* ================= OYUN MODU KARTLARI ================= */
.modes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mode{
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:20px;cursor:pointer;
  text-align:center;transition:.15s
}
.mode:hover{border-color:var(--line2);background:var(--panel2)}
.mode.sel{border-color:var(--acc);background:rgba(255,68,56,.08)}
.mode .ic{font-size:38px;line-height:1;margin-bottom:10px}
.mode b{display:block;font-size:16px;margin-bottom:6px}
.mode small{display:block;color:var(--txt2);font-size:12.5px;line-height:1.5}
.mode .cur{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:800;
  background:var(--acc);color:#fff;letter-spacing:.5px}

/* ================= ZORLUK ================= */
.levels{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:20px}
.level{background:var(--bg2);border:2px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-align:center;transition:.15s}
.level:hover{border-color:var(--line2)}
.level.sel{border-color:var(--acc);background:rgba(255,68,56,.08)}
.level b{display:block;font-size:15px;margin-bottom:4px}
.level small{color:var(--txt2);font-size:12px}

/* ================= ARAÇ SATIRI EK ================= */
.row .skin{width:150px;flex:none}
.row .skin select{padding:5px 8px;font-size:12px;width:100%}
.row .skin .warnTxt{display:block;margin-top:3px;font-size:10px;line-height:1.2;color:#f0b429}
@media(max-width:700px){.row .skin{display:none}}
.picked{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);margin-bottom:14px}
.picked .row{cursor:default}
.picked .row:hover{background:transparent}
.cap{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;margin-bottom:12px}
.cap .n{font-weight:800;font-size:17px}
.cap .box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;gap:8px;align-items:center}
.cap .box span{color:var(--txt3);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.cap .box.bad{border-color:rgba(239,68,68,.4);color:#fca5a5}

.traffic-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:18px}
.traffic-card h4{margin:0 0 4px;font-size:15px}
.traffic-card p{margin:0 0 14px;color:var(--txt2);font-size:13px}

/* ================= ÖDEME ŞERİDİ ================= */
.billbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 20px;font-size:13.5px;font-weight:600;border-bottom:1px solid
}
.billbar.soon{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fcd34d}
.billbar.due{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.45);color:#fcd34d}
.billbar.overdue{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fca5a5}

/* ================= SİHİRBAZ ================= */
.wizbox{
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,68,56,.10),rgba(56,120,255,.06));
  border:1px solid var(--line2);border-radius:14px;padding:18px;margin-bottom:20px
}
.wizbox b{display:block;font-size:15px;margin-bottom:4px}
.wizbox p{margin:0;color:var(--txt2);font-size:13px;max-width:560px}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.steps .step{
  padding:6px 14px;border-radius:99px;font-size:12px;font-weight:700;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt3)
}
.steps .step.on{background:rgba(255,68,56,.15);border-color:var(--acc);color:#fff}
.steps .step.done{border-color:rgba(34,197,94,.4);color:#86efac}
#mWizard .modes{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#mWizard .mode{padding:16px}
#mWizard .mode .ic{font-size:30px;margin-bottom:6px}
.rec{display:inline-block;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:800;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#86efac;margin-left:6px}
.noai{display:inline-block;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;
  background:rgba(148,163,184,.12);border:1px solid var(--line2);color:var(--txt3);margin-left:6px}

/* ================= ÖDEME TABLOSU (ADMIN) ================= */
.paystate{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;border:1px solid}
.paystate.ok{border-color:rgba(34,197,94,.4);color:#86efac;background:rgba(34,197,94,.1)}
.paystate.soon,.paystate.due{border-color:rgba(245,158,11,.45);color:#fcd34d;background:rgba(245,158,11,.1)}
.paystate.overdue{border-color:rgba(239,68,68,.45);color:#fca5a5;background:rgba(239,68,68,.12)}
.paystate.off{border-color:var(--line2);color:var(--txt3)}
.locked-note{padding:14px;border-radius:var(--r);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#fca5a5;font-size:13.5px;margin-bottom:16px}

/* ================= ÖDEME MODALI (ekran ortası) ================= */
.billbox{text-align:center}
.billbox .bigicon{font-size:54px;line-height:1;margin-bottom:12px}
.billbox h3{font-size:20px;margin-bottom:8px}
.billbox .sub{font-size:14px;line-height:1.6}
.billbox .foot{justify-content:center}
.billinfo{
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  padding:14px 18px;margin:16px 0 4px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap
}
.billinfo div{text-align:center}
.billinfo b{display:block;font-size:17px;font-weight:800}
.billinfo span{font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.modal.overdue .box{border-color:rgba(239,68,68,.5);box-shadow:0 0 0 1px rgba(239,68,68,.2),var(--shadow)}
.modal.soon .box,.modal.due .box{border-color:rgba(245,158,11,.5)}

/* ================= SİHİRBAZ ÖZET ================= */
.wzsummary{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:6px}
.wzsummary .r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.wzsummary .r:last-child{border-bottom:none}
.wzsummary .r span{color:var(--txt3)}
.wzsummary .r b{text-align:right;word-break:break-word}
.wzsummary .ttl{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--txt2)}

/* --- CSP hava uyarisi --- */
.hint.warnhint{color:#fbbf24}

/* ---------------- SUNUCUYA KATIL ---------------- */
.joinrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-join{
  background:linear-gradient(135deg,#16a34a,#22c55e);border-color:#16a34a;color:#fff;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center
}
.btn-join:hover{background:linear-gradient(135deg,#15803d,#16a34a);color:#fff}
.joinbox{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
.joinbox>div{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.joinbox>div:last-child{border-bottom:none}
.joinbox span{color:var(--txt3);flex:none}
.joinbox b{text-align:right;word-break:break-all}
.joinbox b.brk{font-family:Consolas,monospace;font-size:11.5px;color:var(--txt2)}
.srv .joinmini{font-size:12px}

/* ---------------- DUYURULAR ---------------- */
.duyuru{
  display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:12px;
  border:1px solid var(--line2);background:var(--panel2);margin-bottom:10px
}
.duyuru .di{font-size:20px;line-height:1.2;flex:none}
.duyuru .dc{flex:1;min-width:0}
.duyuru b{display:block;font-size:14px;margin-bottom:3px}
.duyuru p{margin:0;font-size:13px;color:var(--txt2);white-space:pre-wrap;line-height:1.55}
.duyuru small{display:block;margin-top:6px;font-size:11.5px;color:var(--txt3)}
.duyuru.tip-uyari{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
.duyuru.tip-bakim{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08)}
.duyuru.tip-kampanya{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
.duyuru.tip-bilgi{border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.07)}
.duyuru .dx{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
.duyuru .dx:hover{color:var(--txt)}

/* ---------------- ÇALIŞMA SÜRESİ ---------------- */
/* NOT: eski .upbox izgarasi kaldirildi — yeni calisma suresi bolumu
   kendi duzenini kuruyor (.upsay + .upgraf). Ikisi birlikte oldugunda
   kutular alt alta diziliyor ve grafik ezilmis gorunuyordu. */
.upbar{grid-column:1/-1;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.upbar .bar{height:9px;border-radius:99px;background:#1e293b;overflow:hidden;margin:9px 0 7px}
.upbar .bar i{display:block;height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:99px}
.upbar .lg{font-size:12px;color:var(--txt2)}
.mycard .okpct{color:#4ade80}

/* ---------------- YÖNETİCİ: DUYURULAR ---------------- */
.dylist{display:flex;flex-direction:column;gap:10px}
.dyrow{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.dyrow.off{opacity:.55}
.dyrow .di{font-size:20px;flex:none;line-height:1.3}
.dyrow .dc{flex:1;min-width:0}
.dyrow .dc b{display:block;font-size:14px;margin-bottom:3px}
.dyrow .dc p{margin:0;font-size:12.5px;color:var(--txt2);white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dyrow .dm{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dyrow .acts{display:flex;gap:6px;flex:none;flex-wrap:wrap}
.badge.yayinda{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.4)}
.badge.bekliyor{background:rgba(56,189,248,.14);color:#38bdf8;border-color:rgba(56,189,248,.4)}
.badge.bitti{background:rgba(148,163,184,.14);color:#94a3b8}
.badge.kapali{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.35)}
.dypreview{background:var(--bg2);border:1px dashed var(--line2);border-radius:12px;padding:14px 16px;margin-top:6px}
.upcell{font-size:11.5px;color:var(--txt3);white-space:nowrap}
.upcell b{color:#4ade80}

/* ---------------- TRAFİK YOĞUNLUĞU ---------------- */
.sub-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--txt3);margin:18px 0 10px}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.levels .lv{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 10px;
  text-align:center;cursor:pointer;transition:.14s}
.levels .lv:hover{border-color:var(--line2);transform:translateY(-1px)}
.levels .lv.sel{border-color:var(--acc);background:rgba(239,68,68,.12);box-shadow:0 0 0 1px var(--acc) inset}
.levels .lv .ic{font-size:22px;line-height:1;margin-bottom:5px}
.levels .lv b{display:block;font-size:13px}
details.adv{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:0 14px}
details.adv summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:600;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:'▸ ';color:var(--txt3)}
details.adv[open] summary::before{content:'▾ '}
details.adv[open]{padding-bottom:14px}
details.adv .checklist{max-height:240px}
.field.edited label::after{content:' • elle ayarlandı';color:#fbbf24;font-weight:600;font-size:11px}

/* ---------------- CSP EK AYARLARI ÖNİZLEME ---------------- */
.cspview{background:#05070b;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin-top:12px;font-size:11.5px;line-height:1.6;max-height:320px;overflow:auto;
  white-space:pre-wrap;word-break:break-word;color:#cbd5e1}

/* ---------------- GİZLENEN İÇERİK ---------------- */
.picker .row.contentoff{opacity:.45;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(239,68,68,.06) 8px,rgba(239,68,68,.06) 16px)}
.picker .row.contentoff .nm b::after{content:' · MÜŞTERİDEN GİZLİ';color:#f87171;font-size:10px;font-weight:700;letter-spacing:.4px}

/* ---------------- İNDİRMELER ---------------- */
.dl{display:flex;flex-direction:column;gap:9px}
.dlrow{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2)}
.dlrow .di{font-size:19px;flex:none}
.dlrow .dc{flex:1;min-width:0}
.dlrow .dc b{display:block;font-size:13.5px}
.dlrow .dc small{color:var(--txt3);font-size:11.5px}
.dlrow .btn{flex:none;text-decoration:none}
.picker .row .nm{min-width:0;overflow:hidden}

/* ================= YÖNETİCİ: İÇERİK KARTLARI ================= */
.cntlist{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow-y:auto;
  padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.crow{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;transition:.12s}
.crow:hover{border-color:var(--line2)}
.crow.off{opacity:.55;border-style:dashed;border-color:rgba(239,68,68,.45)}

.chead{display:flex;gap:12px;align-items:center}
.cthumb{width:56px;height:34px;object-fit:cover;border-radius:7px;background:var(--bg2);flex:none}
/* Yönetim panelinde de çizgi haritaları renkli zemin üzerine basılır */
.cthumbkutu{width:56px;height:34px;flex:none;border-radius:7px;overflow:hidden;background:var(--bg2)}
.cthumbkutu .cthumb{width:100%;height:100%;border-radius:0}
.cthumbkutu.cizim .cthumb{mix-blend-mode:screen;filter:brightness(2.1) contrast(1.35) saturate(0);
  object-fit:contain;padding:2px}
.cinfo{flex:1;min-width:0}
.cinfo>b{display:block;font-size:13.5px;line-height:1.3;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.ctag{font-size:10.5px;line-height:1.6;padding:1px 7px;border-radius:99px;
  background:#1e293b;color:#94a3b8;border:1px solid var(--line);white-space:nowrap}
.ctag.id{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--txt3);background:transparent}
.ctag.ok{background:rgba(34,197,94,.14);color:#4ade80;border-color:rgba(34,197,94,.35)}
.ctag.bad{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.35)}
.ctag.warn{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.35)}
.ctag.dim{opacity:.65}
.cpath{margin-top:4px;font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--txt3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
.cacts{display:flex;gap:7px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
.cmodes{display:flex;gap:3px}
.cmodes .btn{padding:5px 8px;font-size:13px;line-height:1}

/* --- varyasyon satiri --- */
.clay{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line)}
.claylbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--txt3);flex:none;padding-top:5px;white-space:nowrap}
.claychips{flex:1;display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.clayright{flex:none;display:flex;gap:7px;align-items:center}
.claysel{width:190px;font-size:12px;margin:0}

.chip{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:4px 9px;min-width:62px;transition:.12s;color:var(--txt)}
.chip:hover{border-color:var(--line2);transform:translateY(-1px)}
.chip .cn{font-size:11.5px;font-weight:600;line-height:1.2;max-width:120px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .cm{font-size:9.5px;color:var(--txt3);line-height:1.2}
.chip.def{border-color:var(--acc);background:rgba(239,68,68,.12)}
.chip.def .cn::after{content:' ★';color:var(--acc)}
.chip.off{opacity:.45;border-style:dashed}
.chip.off .cn{text-decoration:line-through}
.chip.off .cm::before{content:'gizli · '}

@media (max-width:900px){
  .chead{flex-wrap:wrap}
  .cacts{width:100%;justify-content:flex-start}
  .clay{flex-direction:column;gap:8px}
  .clayright{width:100%}
  .claysel{flex:1;width:auto}
}

/* ================= İNDİRME / ROZET PENCERESİ ================= */
.segbtns{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.segbtns button{flex:1;min-width:120px;padding:9px 12px;border-radius:10px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2);font-size:13px;font-weight:600;
  font-family:inherit;transition:.12s}
.segbtns button:hover{border-color:var(--line2);color:var(--txt)}
.segbtns button.on{background:rgba(239,68,68,.14);border-color:var(--acc);color:var(--txt)}

.uploadbox{border:2px dashed var(--line2);border-radius:12px;padding:18px;text-align:center;
  background:var(--bg2);transition:.12s}
.uploadbox.drag{border-color:var(--acc);background:rgba(239,68,68,.08)}
.uploadbox .ub-ic{font-size:26px;line-height:1;margin-bottom:6px}
.uploadbox .btn{margin-top:10px}
/* Dosya yukleme cubugu. DIKKAT: bu kural yalnizca .uploadbox icinde
   gecerlidir — aksi halde musteri panelindeki "Sunucu sagligi" kutusunu
   (ayni .upbar sinifi) 8 piksele ezip gorunmez yapiyordu. */
.uploadbox .upbar{height:8px;border-radius:99px;background:#1e293b;overflow:hidden;margin:12px 0 6px;
  padding:0;border:none;grid-column:auto}
.uploadbox .upbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#16a34a,#4ade80);
  border-radius:99px;transition:width .2s}

/* ================= MÜŞTERİ: İÇERİK ROZETLERİ ================= */
.crozet{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  letter-spacing:.3px;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:middle;
  border:1px solid transparent;white-space:nowrap}
.crozet.upd{background:rgba(56,189,248,.16);color:#38bdf8;border-color:rgba(56,189,248,.4)}
.crozet.req{background:rgba(239,68,68,.16);color:#f87171;border-color:rgba(239,68,68,.4)}
.crozet.rec{background:rgba(245,158,11,.16);color:#fbbf24;border-color:rgba(245,158,11,.4)}
.crozet.new{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.4)}
a.crozet:hover{filter:brightness(1.25)}
.dlrow .rz{margin-left:0}

/* Icerigi olmayan indirme bolumunu gizle */
section[data-panel].bosGizle:not(.hidden){display:none}


/* ================= HAFIF ANIMASYONLAR =================
   Hepsi transform/opacity uzerinden calisir — bunlar GPU'da islenir,
   sayfa yeniden hesaplanmaz. Dusuk guclu makinelerde de akicidir.
   Hareket azaltma tercihi olan kullanicilarda tamamen kapanir. */

/* Gorseller belirerek gelsin (bos kare yerine yumusak gecis) */
img.lazy { opacity: 0; transition: opacity .28s ease; background: var(--bg2); }
img.lazy.geldi, img.lazy.yok { opacity: 1; }

/* Satirlar ve kartlar uzerine gelince hafifce kalksin */
.row, .dlrow, .mycard, .lv, .cntlist .row {
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.row:hover, .dlrow:hover { transform: translateY(-1px); }
.lv { will-change: transform; }
.lv:hover { transform: translateY(-2px); }

/* Dugmeler basilinca hafif icine cоksun */
.btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.97); }

/* Sekme degisiminde icerik yumusak girsin */
section[data-panel]:not(.hidden) { animation: panelGir .22s ease both; }
@keyframes panelGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Modal acilisi */
.modal:not(.hidden) .box { animation: modalGir .18s ease both; }
@keyframes modalGir { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* Bildirimler */
.toast { animation: toastGir .2s ease both; }
@keyframes toastGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Kullanici hareket azaltma istediyse HICBIR animasyon calismasin */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ================= AI HATLARI — KOMPAKT TABLO ================= */
.aitablo{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.aitablo .ai-h,.aitablo .ai-r{display:grid;grid-template-columns:1.1fr 1fr 1.8fr;gap:12px;padding:9px 14px;align-items:center}
.aitablo .ai-h{background:rgba(255,255,255,.03);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt3);font-weight:700}
.aitablo .ai-r{border-top:1px solid var(--line);font-size:13px}
.aitablo .ai-r.kotu{background:rgba(239,68,68,.06)}
.aitablo .ai-ad{font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aitablo .ai-hr{color:var(--txt2);font-size:12px;font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aitablo .ai-df b{display:block;font-size:12.5px}
.aitablo .ai-df b.kirmizi{color:#f87171}
.aitablo .ai-df small{display:block;color:var(--txt3);font-size:10.5px;font-family:ui-monospace,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
  .aitablo .ai-h{display:none}
  .aitablo .ai-r{grid-template-columns:1fr;gap:3px}
}


/* ================= SUNUCU KARTI (yeni tasarim) ================= */
.mycard{position:relative;overflow:hidden;isolation:isolate}
/* Kart arka plani. Alt katman: sunucu adindan uretilen renk gecisi
   (JS yaziyor) — boylece harita gorseli olmayan kartlar da bos kalmaz.
   Ust katman: varsa haritanin kendi gorseli. */
.mc-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9}
.mc-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(1)}
/* Karartma perdesi: ust kisim acik (gorsel gorunsun), asagi indikce
   koyu (yazi ve dugmeler net okunsun). */
.mycard::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,17,26,.38) 0%,rgba(13,17,26,.84) 52%,rgba(13,17,26,.96) 100%)}
.mycard.on{border-color:rgba(34,197,94,.35)}

.mc-ust{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mc-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#64748b}
.mc-dot.on{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:nabiz 2.4s ease-out infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.mc-durum{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--txt3)}
.mycard.on .mc-durum{color:#4ade80}

.mycard h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.2px}
.mc-harita{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--txt2);margin-bottom:14px}
.mc-harita .ik{opacity:.7}
.mc-harita b{color:var(--txt);font-weight:600}
.mc-mod{margin-left:2px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt2)}

.mc-say{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-bottom:14px}
.mc-say div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:9px 10px;text-align:center}
.mc-say b{display:block;font-size:18px;font-weight:800;margin-bottom:4px}
.mc-say span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);font-weight:600}

/* ================= ÇALIŞMA SÜRESİ GRAFİĞİ ================= */
.upsay{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.upsay .u{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.upsay .u b{display:block;font-size:21px;font-weight:800;margin-bottom:5px;line-height:1.2}
.upsay .u span{font-size:12px;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.upsay .u.good b{color:#4ade80}
.upsay .u.live b{color:#38bdf8}
/* Henuz olcum yoksa kutu duruyor ama soluk — duzen bozulmuyor */
.upsay .u.sonuc-yok b{color:var(--txt3)}
.upsay .u.sonuc-yok{opacity:.72}

.upgraf{margin-top:4px}
.ug-bar{display:flex;gap:2px;align-items:flex-end;height:38px}
.ug-g{flex:1;min-width:3px;border-radius:2px;background:#334155;height:100%;
  transition:transform .12s ease,filter .12s ease}
.ug-g:hover{transform:scaleY(1.12);filter:brightness(1.3)}
.ug-g.tam{background:#22c55e}
.ug-g.kismi{background:#eab308}
.ug-g.kesinti{background:#ef4444}
.ug-g.bakim{background:#3b82f6}
.ug-g.yok{background:#2a3444}
/* Grafik altindaki satirlar. Hepsi TAM GENISLIK ve blok akisinda —
   yanlarina baska bir yazi gelemez (once ipucu metni lejantin uzerine
   biniyordu). */
.ug-alt{display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;clear:both;margin-top:9px;font-size:12.5px;color:var(--txt2)}
.ug-alt span{min-width:0}
.ug-alt .ug-orta{color:var(--txt2);text-align:center}
.ug-lejant{display:flex;gap:8px 18px;flex-wrap:wrap;width:100%;clear:both;
  margin-top:12px;font-size:12px;color:var(--txt2)}
.ug-lejant span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ug-lejant i{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block}
.upgraf + .hint{display:block;width:100%;clear:both;margin-top:12px;line-height:1.55}

/* Kart icindeki mini surum */
.upgraf.mini{margin:0 0 14px}
.upgraf.mini .ug-bar{height:16px;gap:1.5px}
.upgraf.mini .ug-g{border-radius:1.5px}

/* ---- Sunucu kartindaki 30 gunluk durum seridi ----
   Onceki halinde yalnizca isimsiz gri kareler vardi; ne anlama geldigi
   belli degildi. Simdi ustunde baslik + ozet, altinda tarih araligi var. */
.mc-durumbar{margin:2px 0 14px}
.md-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.md-etiket{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--txt3)}
.md-oran{font-size:12px;font-weight:700}
.md-oran.iyi{color:#4ade80}
.md-oran.orta{color:#fbbf24}
.md-oran.kotu{color:#f87171}
.md-oran.bekle{color:var(--txt3);font-weight:600}
.md-bar{display:flex;gap:2px;align-items:stretch;height:22px}
.md-bar .ug-g{flex:1;min-width:2px;border-radius:3px;height:100%}
.md-alt{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--txt3)}

/* ================= ÖDEMELERİM ================= */
.odkart{position:relative;overflow:hidden}
.odkart .odbas{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.odkart .odikon{font-size:30px;line-height:1}
.odkart .odbas b{display:block;font-size:18px;font-weight:800;margin-bottom:3px}
.odkart .odbas small{color:var(--txt2);font-size:13px;line-height:1.5}
.odkart.ok{border-color:rgba(34,197,94,.3)}
.odkart.soon,.odkart.due{border-color:rgba(245,158,11,.35)}
.odkart.overdue{border-color:rgba(239,68,68,.4)}
.odsayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.odsayilar div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.odsayilar b{display:block;font-size:19px;font-weight:800;margin-bottom:5px;line-height:1.2}
.odsayilar span{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);font-weight:600}

.odiban{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
.odiban-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);margin-bottom:7px;font-weight:700}
.odiban-n{font-family:ui-monospace,Consolas,monospace;font-size:16px;font-weight:700;letter-spacing:.5px;
  word-break:break-all;margin-bottom:6px}
.odiban-a{font-size:12.5px;color:var(--txt2);margin-bottom:10px}
.odbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.odtalep{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
.odtalep-i{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg2);text-decoration:none;color:var(--txt);font-size:13.5px;
  transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
.odtalep-i:hover{transform:translateY(-2px);border-color:var(--acc);background:rgba(255,255,255,.045)}
.odtalep-i .ik{font-size:19px;line-height:1}
.odtalep-i b{flex:1;font-weight:600}
.odtalep-i .ok2{color:var(--txt3);font-size:16px}

.odgecmis{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2);margin-top:10px}
.odgecmis .og-h,.odgecmis .og-r{display:grid;grid-template-columns:1.1fr 1.2fr .8fr;gap:12px;padding:11px 15px}
.odgecmis .og-h{background:rgba(255,255,255,.03);font-size:12px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--txt2);font-weight:700}
.odgecmis .og-r{border-top:1px solid var(--line);font-size:13px}
.odgecmis .og-r span:first-child{color:#4ade80;font-weight:600}
@media(max-width:640px){
  .odgecmis .og-h{display:none}
  .odgecmis .og-r{grid-template-columns:1fr;gap:3px}
}

/* Indirme satirinda icerigin kendi gorseli */
.dlrow .dlthumb{width:64px;height:38px;object-fit:cover;border-radius:8px;flex:none;
  border:1px solid var(--line);background:var(--bg2)}


/* ============ SEKMEYE GORE ARKA PLAN ATMOSFERI ============
   Her sekmenin kendi hafif arka plani var. Hepsi TEK bir sabit
   katmanda cizilir (position:fixed) ve yalnizca opaklik degisir —
   bu yuzden sayfa kaydirinca yeniden cizim olmaz, performansi
   etkilemez. Gorseller CSS gradient/SVG, ek dosya indirilmez. */
/* ==================================================================
   SEKME TEMALARI
   ==================================================================
   Her sekmenin kendi kimligi var. Uc katman birlikte calisir:

     1. TAM EKRAN ATMOSFER (.atmos)  — sayfanin arkasindaki genel hava.
        Pist'te secili haritanin gorseli, Hava'da bulutlar, Araclar'da
        asfalt seritleri...
     2. KART SERIDI (.card[data-panel]::before) — kartin ustunde o
        sekmenin renginde ince bir cizgi ve yumusak isik.
     3. KOSE FILIGRANI (.card[data-panel]::after) — sekmenin simgesi,
        cok soluk, dev boyutta. Bakinca hangi bolumde oldugunuzu
        aninda anlarsiniz.

   Hepsi CSS ile cizilir; ek gorsel indirilmez, JavaScript her karede
   calismaz. Sekme degisince yalnizca saydamliklar degisir. */

.atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.atmos .kat{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.atmos .kat.on{opacity:1}

/* ---- PIST: secili haritanin kendi gorseli ---- */
.atmos .harita{background-size:cover;background-position:center 35%;
  filter:blur(16px) saturate(1.15) brightness(1.25);transform:scale(1.12)}
/* Uzerine perde: ust taraf acik (gorsel gorunsun), asagi indikce koyu
   (yazilar okunsun). */
.atmos .haritaKarart{background:
  linear-gradient(180deg,rgba(10,14,22,.42) 0%,rgba(10,14,22,.80) 45%,rgba(10,14,22,.94) 100%)}

/* ---- HAVA & ZAMAN: bulutlar + gunes isigi ---- */
.atmos .bulut{
  background:
    radial-gradient(38% 26% at 16% 16%, rgba(203,220,240,.20), transparent 70%),
    radial-gradient(30% 20% at 30% 24%, rgba(203,220,240,.16), transparent 70%),
    radial-gradient(34% 22% at 74% 12%, rgba(186,208,232,.17), transparent 70%),
    radial-gradient(26% 18% at 60% 26%, rgba(186,208,232,.12), transparent 70%),
    radial-gradient(60% 34% at 45% 82%, rgba(90,130,180,.13), transparent 74%),
    linear-gradient(180deg, rgba(56,120,200,.10), transparent 55%);
  animation:bulutKay 80s ease-in-out infinite alternate
}
.atmos .gunes{
  background:radial-gradient(24% 20% at 82% 10%, rgba(255,214,140,.26), transparent 70%);
  animation:gunesNefes 12s ease-in-out infinite alternate
}
/* Gece: ayni katman aya doner — daha kucuk, soguk, keskin */
.atmos .gunes.ay{
  background:
    radial-gradient(7% 6% at 80% 12%, rgba(226,238,255,.55), transparent 72%),
    radial-gradient(20% 17% at 80% 12%, rgba(150,180,230,.16), transparent 72%)
}
/* Gece bulutlari daha koyu ve ayin isigini alir */
.atmos .bulut.gece{filter:brightness(.55) saturate(.7)}
/* Gece yildizlari — sabit noktalar, cok hafif yanip soner */
.atmos .yildiz{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 27% 8%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 41% 20%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 58% 11%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.5px 1.5px at 69% 24%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.2px 1.2px at 88% 17%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.3px 1.3px at 34% 33%, rgba(255,255,255,.4),  transparent),
    radial-gradient(1.1px 1.1px at 75% 38%, rgba(255,255,255,.35), transparent);
  animation:yildizParilti 7s ease-in-out infinite alternate
}
/* Gece sehir isiklari: ufuk cizgisinde sicak bir parilti */
.atmos .sehir{
  background:
    radial-gradient(120% 22% at 50% 104%, rgba(255,170,90,.16), transparent 70%),
    radial-gradient(40% 12% at 18% 100%,  rgba(255,150,70,.12), transparent 72%),
    radial-gradient(40% 12% at 82% 100%,  rgba(120,170,255,.10), transparent 72%)
}
@keyframes bulutKay{from{transform:translate3d(-3%,0,0) scale(1.02)}to{transform:translate3d(3%,1%,0) scale(1.06)}}
@keyframes gunesNefes{from{opacity:.75}to{opacity:1}}
@keyframes yildizParilti{from{opacity:.55}to{opacity:1}}

/* ---- Saat hizli secim dugmeleri (Şafak / Öğle / Gün batımı / Gece) ---- */
.saatHizli{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 7px}
.saatHizli .sh{
  flex:0 0 auto;padding:7px 12px;border-radius:99px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--txt2);
  background:var(--bg2);border:1px solid var(--line);
  transition:background .15s,border-color .15s,color .15s,transform .12s
}
.saatHizli .sh:hover{background:var(--bg3,rgba(255,255,255,.05));color:var(--txt);transform:translateY(-1px)}
.saatHizli .sh.sel{
  background:rgba(37,99,235,.20);border-color:rgba(96,165,250,.55);color:#fff
}

/* ---- ARACLAR: asfalt ve serit cizgileri ---- */
.atmos .asfalt{
  background:
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.045) 0 3px, transparent 3px 34px, transparent 34px 210px),
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.018) 0 1px, transparent 1px 90px),
    radial-gradient(70% 50% at 50% 0%, rgba(230,57,70,.13), transparent 70%),
    linear-gradient(180deg, rgba(30,36,48,.5), transparent 60%)
}
/* ---- OYUN MODU: yaris baslangic isiklari ---- */
.atmos .mod{
  background:
    radial-gradient(20% 16% at 18% 10%, rgba(239,68,68,.22), transparent 70%),
    radial-gradient(20% 16% at 32% 10%, rgba(245,158,11,.16), transparent 70%),
    radial-gradient(20% 16% at 68% 10%, rgba(34,197,94,.16), transparent 70%),
    radial-gradient(20% 16% at 82% 10%, rgba(56,189,248,.14), transparent 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(230,57,70,.08), transparent 72%)
}
/* ---- ZORLUK: uyari seritleri ---- */
.atmos .zorluk{
  background:
    repeating-linear-gradient(45deg,
      rgba(245,158,11,.055) 0 22px, transparent 22px 44px),
    radial-gradient(70% 45% at 50% 0%, rgba(245,158,11,.14), transparent 72%)
}
/* ---- KONSOL: terminal tarama cizgileri ---- */
.atmos .konsol{
  background:
    repeating-linear-gradient(0deg, rgba(34,197,94,.035) 0 1px, transparent 1px 4px),
    radial-gradient(70% 50% at 50% 100%, rgba(34,197,94,.13), transparent 70%)
}
/* ---- INDIRMELER ---- */
.atmos .indir{background:
  radial-gradient(60% 45% at 50% 0%, rgba(56,189,248,.15), transparent 72%),
  repeating-linear-gradient(180deg, rgba(56,189,248,.03) 0 2px, transparent 2px 26px)}
/* ---- ODEMELERIM ---- */
.atmos .odeme{background:radial-gradient(60% 48% at 50% 0%, rgba(34,197,94,.14), transparent 72%)}
/* ---- SUNUCULARIM ---- */
.atmos .liste{background:
  radial-gradient(72% 52% at 50% -8%, rgba(230,57,70,.14), transparent 70%),
  radial-gradient(50% 40% at 90% 100%, rgba(56,120,255,.09), transparent 70%)}

@media (prefers-reduced-motion: reduce){
  .atmos .kat{transition:none}
  .atmos .bulut,.atmos .gunes,.atmos .yildiz{animation:none}
}

/* ------------------------------------------------------------------
   KART SERIDI + KOSE FILIGRANI
   Her bolum karti kendi renginde bir ust cizgi ve dev, cok soluk bir
   simge tasir. Sekmenin hangisi oldugu bir bakista anlasilir. */
.card[data-panel]{position:relative;overflow:hidden}
.card[data-panel]::before{
  content:'';position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg, var(--tema-isik, transparent), transparent);
}
.card[data-panel]::after{
  content:var(--tema-ikon,'');position:absolute;right:16px;top:-6px;
  font-size:96px;line-height:1;opacity:.06;pointer-events:none;user-select:none;
  filter:grayscale(.35)
}
.card[data-panel] > *{position:relative;z-index:1}

[data-panel="mod"]       {--tema-ikon:'🎮';--tema-isik:rgba(239,68,68,.10)}
[data-panel="araclar"]   {--tema-ikon:'🏎';--tema-isik:rgba(230,57,70,.09)}
[data-panel="pist"]      {--tema-ikon:'🗺';--tema-isik:rgba(56,189,248,.10)}
[data-panel="hava"]      {--tema-ikon:'⛅';--tema-isik:rgba(148,178,214,.12)}
[data-panel="zorluk"]    {--tema-ikon:'⚙';--tema-isik:rgba(245,158,11,.10)}
[data-panel="ayarlar"]   {--tema-ikon:'🖥';--tema-isik:rgba(148,163,184,.09)}
[data-panel="indirmeler"]{--tema-ikon:'⬇';--tema-isik:rgba(56,189,248,.10)}
[data-panel="konsol"]    {--tema-ikon:'📜';--tema-isik:rgba(34,197,94,.10)}
[data-panel="gelismis"]  {--tema-ikon:'🧪';--tema-isik:rgba(168,85,247,.10)}

@media(max-width:700px){
  /* Telefonda filigran yer kaplamasin */
  .card[data-panel]::after{font-size:64px;opacity:.045;right:6px}
}

/* Es zamanli yonetici uyarisi */
.eszaman{margin-bottom:16px;border-left:3px solid #f0b429}
.eszaman small{display:block;margin-top:6px;color:var(--txt3);font-size:12px}

/* ================= YENİ MÜŞTERİYE SUNUCU KURMA ================= */
.yenisrv{
  margin:14px 0;padding:14px 16px;border-radius:12px;
  background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.32)
}
.yenisrv .hint{margin-top:4px}
/* Yeni sunucu kuruluyorsa mevcut sunucu listesi ikinci plana duser */
.checklist.sonuk{opacity:.45;pointer-events:none}


/* ==================================================================
   TELEFON VE TABLET DÜZENİ
   ==================================================================
   Musterilerin cogu panele telefondan bakiyor. Buradaki kurallar
   masaustu duzenini bozmadan, dar ekranda kullanilabilir hale getirir.

   Uc kirilma noktasi:
     <= 960px  tablet   : yan menu ustte yatay serit olur
     <= 700px  telefon  : ust cubuk iki satira ayrilir, hesap menusu
                          tek dugmeye toplanir, kartlar tek sutun
     <= 420px  kucuk    : yazi boyutlari ve bosluklar kisilir
   ------------------------------------------------------------------ */

@media(max-width:960px){
  .layout{flex-direction:column;padding:14px;gap:14px}

  /* Yan menu -> ustte kaydirilabilir yatay serit */
  .tabs{
    width:100%;flex:none;position:sticky;top:56px;z-index:30;
    display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;
    padding:8px 2px;margin:0 -2px;
    background:rgba(11,14,19,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    width:auto;white-space:nowrap;margin:0;flex:none;
    padding:9px 14px;border-radius:99px;background:var(--bg2);
    border:1px solid var(--line)
  }
  .tabs button.active{box-shadow:none;background:rgba(37,99,235,.18);
    border-color:rgba(37,99,235,.55);color:#fff}
  .content{padding-bottom:120px}
}

@media(max-width:700px){
  /* ---- Ust cubuk: iki satir ---- */
  .topbar{flex-wrap:wrap;padding:9px 12px;gap:8px}
  .tb-sol{order:1;flex:1;gap:9px}
  .tb-hesap{order:2}
  /* Kumanda satiri: durum rozeti tam satir, dugmeler esit 3 sutun.
     Boylece yazilar birbirinin ustune binmez. */
  .tb-kumanda{order:3;width:100%;gap:7px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    padding-top:8px;border-top:1px solid var(--line)}
  .tb-kumanda:empty,.topbar .tb-kumanda.bos{display:none}
  .topbar .logo img{height:26px}
  .tb-uzun{display:none}
  .tb-kisa{display:inline}
  /* "Yeniden Baslat" telefonda ust cubuktan cikar, ☰ menusunde durur */
  .tb-kumanda #btnRestart{display:none !important}
  /* Kumanda dugmeleri parmakla basilir, yazilari tek satir */
  .tb-kumanda .btn{width:100%;min-width:0;padding:10px 6px;font-size:12.5px;
    white-space:nowrap;justify-content:center;gap:5px}
  .tb-kumanda .pill{grid-column:1/-1;justify-self:start;padding:7px 11px}
  .tb-sol #srvName{font-size:13.5px}

  /* Hesap menusu acilir kutu olur */
  .tb-menubtn{display:inline-flex}
  .tb-menu .menuOnly{display:inline-flex}
  .tb-menu{
    display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;
    flex-direction:column;align-items:stretch;gap:8px;min-width:190px;
    padding:12px;border-radius:14px;
    background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow)
  }
  .tb-menu.acik{display:flex}
  .tb-menu .who{padding:2px 4px 8px;border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--txt2)}
  .tb-menu .btn{justify-content:flex-start}

  .tabs{top:auto;position:static}

  /* ---- Kartlar ve icerik ---- */
  .card{padding:15px;border-radius:13px;margin-bottom:14px}
  .card h2{font-size:15.5px}
  .page-title{font-size:22px}
  .mysrv{grid-template-columns:1fr !important}
  .mycard{padding:16px}
  .mycard h3{font-size:17px}
  .mc-say{grid-template-columns:repeat(2,1fr)}
  .mycard .btns .btn{min-width:0;flex:1 1 46%}

  /* Parmakla basilabilir dugme yuksekligi (Apple/Google onerisi 44px) */
  .btn{padding:11px 14px;min-height:42px}
  .btn-sm{padding:8px 11px;min-height:36px;font-size:12.5px}
  input,select,textarea{font-size:16px}  /* iOS otomatik yakinlastirmasin */

  /* Kaydet cubugu tam genislik */
  .savebar{position:sticky;bottom:0;border-radius:12px;padding:12px;gap:8px}
  .savebar .msg{flex:1 1 100%;margin-bottom:2px}
  .savebar .btn{flex:1 1 46%}
  .upsay{grid-template-columns:repeat(2,1fr)}
  .odsayilar{grid-template-columns:repeat(2,1fr)}

  /* ---- Alttaki ayar/sayac kutulari telefonda gereginden buyuktu ---- */
  /* Kapasite kutulari: her biri tam satir kaplamasin, ikili dizilsin */
  .cap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:12.5px}
  .cap .box{padding:8px 10px;justify-content:space-between;gap:6px;min-width:0}
  .cap .box span{font-size:10px;letter-spacing:.3px}
  .cap .n{font-size:15px}
  /* Mod / zorluk kutulari telefonda ikili dizilsin, daha derli toplu olsun */
  .modes,#mWizard .modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mode,#mWizard .mode{padding:12px 10px}
  .mode .bigicon,.mode .ico{font-size:22px}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .level{padding:11px 9px}
  .picker{max-height:300px}
  .hint{font-size:11.5px}

  /* Modaller telefonda alttan acilan yaprak gibi */
  .modal .box{max-height:92vh;border-radius:16px 16px 0 0;margin-top:auto;width:100%}
  .modal{align-items:flex-end;padding:0}
  .modal .foot{position:sticky;bottom:0;background:var(--panel);
    padding-top:12px;margin-top:14px;border-top:1px solid var(--line)}
  .modal .foot .btn{flex:1}
}

@media(max-width:420px){
  .layout{padding:10px}
  .card{padding:13px}
  .mc-say{gap:6px}
  .mc-say b{font-size:16px}
  .mc-say span{font-size:10px}
  .upsay{grid-template-columns:1fr}
  .tabs button{padding:8px 12px;font-size:13px}
}

/* ---- YONETIM PANELI: dar ekran ----
   Yonetim paneli veri yogun; telefonda tablo satirlarini karta
   ceviriyoruz ki yatay kaydirma gerekmesin. */
@media(max-width:820px){
  .adminbar{padding:8px 12px;font-size:12px}
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .srvgrid{grid-template-columns:1fr !important}
  .acts{flex-wrap:wrap}
  .acts .btn{flex:1 1 auto}
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar .grow{flex:1 1 100%}
  .secsave{flex-direction:column;align-items:stretch}
  .secsave .btn{width:100%}
  .ayarbar{bottom:8px;padding:12px}
  .ayarbar .btn{width:100%}
  /* Tablo satirlari -> kart */
  .tbl .th{display:none}
  .tbl .tr{grid-template-columns:1fr !important;gap:6px;
    padding:12px;border-radius:10px;margin-bottom:8px;background:var(--bg2)}
  .tbl .tr > *{display:flex;justify-content:space-between;gap:10px}
}

/* ============ TRAFİK GÜVENLİK NOTU ============
   "Araçlar önümde beliriyor" sorununun panelde görünen yüzü.
   Seçilen yol hızının kaç saniyelik tepki süresi verdiğini gösterir. */
.guvenlikNot{
  margin-top:12px;padding:13px 15px;border-radius:12px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28)
}
.guvenlikNot .gn-bas{font-size:13.5px;color:#86efac;font-weight:600}
.guvenlikNot .gn-bas b{color:#4ade80}
.guvenlikNot .gn-sat{display:flex;gap:18px;flex-wrap:wrap;margin:9px 0 7px}
.guvenlikNot .gn-sat span{font-size:12.5px;color:var(--txt2)}
.guvenlikNot .gn-sat b{color:var(--txt);font-weight:700}
.guvenlikNot .gn-alt{font-size:12px;color:var(--txt3)}
@media(max-width:700px){
  .guvenlikNot .gn-sat{gap:10px}
  .guvenlikNot .gn-sat span{flex:1 1 45%}
}

/* Araçlar sekmesi — arkada rastgele bir aracın çok bulanık görüntüsü.
   Blur yüksek tutuldu: hangi araç olduğu seçilmesin, sadece ortam hissi versin. */
.atmos .aracFoto{
  background-size:cover;background-position:center 45%;
  filter:blur(42px) saturate(1.1) brightness(.85);
  transform:scale(1.25);opacity:0
}
.atmos .aracFoto.on{opacity:.55}

/* ==================================================================
   MÜŞTERİ KONSOLU — anlamlı olay listesi
   ==================================================================
   Yönetici ham kaydı görür (.ln satırları). Müşteri, sunucuda
   çevrilmiş olayları görür: kim girdi, ne yazıldı, sunucu ne yaptı.
   Teknik gürültü (dosya yolları, portlar, Steam kopmaları) hiç
   gönderilmez. */
#console.musteri{font-family:inherit;font-size:13.5px;line-height:1.5}
.olay{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 10px;border-radius:9px;margin-bottom:3px;
  border-left:3px solid transparent
}
.olay:hover{background:rgba(255,255,255,.03)}
.olay .ol-t{color:var(--txt3);font-size:11.5px;font-variant-numeric:tabular-nums;
  flex:none;padding-top:2px;min-width:56px}
.olay .ol-ik{flex:none;font-size:14px;line-height:1.4}
.olay .ol-m{flex:1;min-width:0;color:var(--txt);word-break:break-word}
.olay .ol-m small{display:block;color:var(--txt3);font-size:11.5px;margin-top:2px}
.olay .ol-tk{color:var(--txt3);font-size:11.5px;font-weight:700}

.olay.chat   {border-left-color:#38bdf8;background:rgba(56,189,248,.05)}
.olay.chat .ol-m{color:#bae6fd}
.olay.giris  {border-left-color:#22c55e}
.olay.cikis  {border-left-color:#64748b}
.olay.katilim{border-left-color:#475569}
.olay.basari {border-left-color:#22c55e;background:rgba(34,197,94,.06)}
.olay.basari .ol-m{color:#86efac;font-weight:600}
.olay.sistem {border-left-color:#e63946}
.olay.panel  {border-left-color:#a855f7;background:rgba(168,85,247,.05)}
.olay.olay   {border-left-color:#f59e0b}
.olay.uyari  {border-left-color:#ef4444;background:rgba(239,68,68,.07)}
.olay.uyari .ol-m{color:#fca5a5}
/* v2.9.1 — yeni olay turleri */
.olay.tur    {border-left-color:#f472b6;background:rgba(244,114,182,.05)}
.olay.tur .ol-m{color:#fbcfe8}
.olay.hava   {border-left-color:#60a5fa;background:rgba(96,165,250,.05)}
.olay.hava .ol-m{color:#bfdbfe}
.olay.trafik {border-left-color:#facc15;background:rgba(250,204,21,.05)}
.olay.trafik .ol-m{color:#fef08a}

@media(max-width:700px){
  .olay{gap:7px;padding:6px 8px}
  .olay .ol-t{min-width:0;font-size:10.5px}
}

/* Yeniden başlatma bekleme süresi — düğme kilitliyken geri sayım gösterir */
.btn.bekliyor{opacity:.75;cursor:not-allowed;background:#4b5563;border-color:transparent}
.btn.bekliyor:hover{background:#4b5563}

/* ==================================================================
   HAVA & ZAMAN — SEÇİME GÖRE DEĞİŞEN ARKA PLAN
   ==================================================================
   Seçilen hava durumu ve saate göre gökyüzü rengi ve efektler değişir.
   Tamamı CSS; ek görsel indirilmez. Efektler sadece bu sekmede açık. */

/* Gökyüzü rengi — JS saate göre gradyanı yazar */
.atmos .gokyuzu{transition:background .6s ease,opacity .6s ease}

/* ==================================================================
   YAĞMUR
   ------------------------------------------------------------------
   ESKİ HÂLİ repeating-linear-gradient kullanıyordu: ekranı boydan
   boya kesen KESİNTİSİZ EĞİK ÇİZGİLER çiziyordu. Yağmura değil,
   ekran bozulmasına benziyordu.

   YENİ HÂLİ kar efektiyle aynı mantıkta: her damla ayrı bir
   radial-gradient — ama yuvarlak değil, UZUN VE İNCE (1px × 20px).
   Yani gerçek damla izleri; aralarında boşluk var, tam da yağmurun
   göründüğü gibi.

   İki grup var:
     yakın  (parlak, iri, hızlı)  → 320px'lik döşeme
     uzak   (soluk, ince, yavaş)  → 260px'lik döşeme
   Aynı sürede farklı yol aldıkları için derinlik hissi oluşuyor;
   her grup kendi döşeme boyu kadar kaydığı için döngü dikişsiz.
   skewX ile hafif rüzgâr eğimi verildi (scale, kenarda boşluk
   kalmasın diye).
   ================================================================== */
.atmos .yagmur{
  background-image:
    /* --- yakın damlalar --- */
    radial-gradient(1.1px 21px at 11% 14%, rgba(203,226,252,.50), transparent),
    radial-gradient(1.2px 25px at 38% 61%, rgba(203,226,252,.44), transparent),
    radial-gradient(1.1px 19px at 64% 27%, rgba(203,226,252,.48), transparent),
    radial-gradient(1.2px 23px at 88% 78%, rgba(203,226,252,.42), transparent),
    /* --- uzak damlalar --- */
    radial-gradient(.9px 14px at 23% 39%, rgba(196,219,246,.26), transparent),
    radial-gradient(.9px 12px at 49% 84%, rgba(196,219,246,.22), transparent),
    radial-gradient(.9px 15px at 74% 12%, rgba(196,219,246,.25), transparent),
    radial-gradient(.9px 13px at 95% 53%, rgba(196,219,246,.21), transparent);
  background-size:
    320px 320px, 320px 320px, 320px 320px, 320px 320px,
    260px 260px, 260px 260px, 260px 260px, 260px 260px;
  transform:skewX(-9deg) scale(1.18);
  animation:yagmurAk .62s linear infinite
}
@keyframes yagmurAk{
  to{
    background-position:
      -30px 320px, -30px 320px, -30px 320px, -30px 320px,
      -18px 260px, -18px 260px, -18px 260px, -18px 260px;
  }
}

/* Kar — yavaş, iri, savrulan taneler */
.atmos .kar{
  background:
    radial-gradient(2.4px 2.4px at 12% 10%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px   at 42% 26%, rgba(255,255,255,.7),  transparent),
    radial-gradient(2.8px 2.8px at 68% 6%,  rgba(255,255,255,.8),  transparent),
    radial-gradient(1.8px 1.8px at 86% 34%, rgba(255,255,255,.6),  transparent),
    radial-gradient(2.2px 2.2px at 28% 62%, rgba(255,255,255,.7),  transparent),
    radial-gradient(2px 2px   at 76% 74%, rgba(255,255,255,.65), transparent);
  background-size:340px 340px;
  animation:karYag 14s linear infinite
}
@keyframes karYag{ to { background-position:60px 340px } }

/* Sis / kapalı hava — alçak yatay perdeler */
.atmos .sis{
  background:
    linear-gradient(180deg, rgba(180,195,215,.10) 0%, transparent 42%),
    radial-gradient(90% 34% at 50% 74%, rgba(190,205,225,.16), transparent 72%),
    radial-gradient(70% 24% at 22% 88%, rgba(190,205,225,.12), transparent 72%);
  animation:sisKay 26s ease-in-out infinite alternate
}
@keyframes sisKay{ from{transform:translate3d(-2%,0,0)} to{transform:translate3d(2%,-1%,0)} }

@media (prefers-reduced-motion: reduce){
  .atmos .yagmur,.atmos .kar,.atmos .sis{animation:none}
}

/* Şu an oynayan kutusu — oyuncu varken yeşil vurgulanır */
.stat.canli{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.07)}
.stat.canli b{color:#4ade80}

/* ============ TRAFİK YOĞUNLUK DURUMU ============
   Müşteriye "yeterli aracın yok" demek yerine ne elde ettiğini söyler,
   daha iyisi mümkünse yolunu gösterir (yüksek kapasiteli varyasyon). */
.yogunlukDurum:empty{display:none}
.yogunlukDurum{
  margin-top:12px;padding:13px 15px;border-radius:12px;
  background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.3)
}
.yogunlukDurum .yd-ust{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--txt2)}
.yogunlukDurum .yd-ust b{color:var(--txt)}
.yogunlukDurum .yd-rozet{
  flex:none;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px
}
.yogunlukDurum .yd-rozet.iyi{background:rgba(34,197,94,.2);color:#4ade80}
.yogunlukDurum .yd-rozet.orta{background:rgba(56,189,248,.2);color:#7dd3fc}
.yogunlukDurum .yd-alt{margin:8px 0 10px;font-size:12.5px;color:var(--txt3);line-height:1.55}
.yogunlukDurum .yd-alt b{color:var(--txt2)}

/* ============ ÇALIŞMA SÜRESİ — ZAMAN ARALIĞI SEÇİCİSİ ============ */
.upbaslik{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.upbaslik .sub-title{font-size:12px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--txt3);font-weight:700}
.uparalik{display:flex;gap:4px;flex-wrap:wrap}
.upar{
  padding:5px 11px;border-radius:99px;cursor:pointer;font-size:12px;font-weight:600;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2);
  font-family:inherit;transition:.12s
}
.upar:hover{border-color:var(--line2);color:var(--txt)}
.upar.sel{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.6);color:#fff}
@media(max-width:700px){
  .upbaslik{gap:8px}
  .upar{padding:6px 10px;font-size:11.5px;min-height:32px}
}

/* ============ HAZIR MESAJ ŞABLONLARI (yönetim) ============ */
.msgrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.msgrow .msg-ik{width:56px;flex:none;text-align:center;font-size:16px}
.msgrow .msg-ad{width:210px;flex:none}
.msgrow .msg-ms{flex:1;min-width:0;font-size:13px}
.msgrow .msg-sil{flex:none;padding:8px 11px}
@media(max-width:820px){
  .msgrow{flex-wrap:wrap}
  .msgrow .msg-ik{width:52px}
  .msgrow .msg-ad{flex:1;width:auto;min-width:120px}
  .msgrow .msg-ms{flex:1 1 100%}
}

/* ============ GERİ BİLDİRİM ============ */
/* DPC logosu artık tıklanabilir — her yerden ana sayfaya döner */
.logoBtn{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;
  border-radius:8px;transition:.15s}
.logoBtn:hover{opacity:.82;transform:translateY(-1px)}
.logoBtn:active{transform:scale(.97)}
.logoBtn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.gbkart{background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;margin-bottom:9px}
.gbkart .gb-ust{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2);margin-bottom:6px}
.gbkart .gb-ust b{color:var(--txt)}
.gbkart .gb-ust span{margin-left:auto;color:var(--txt3);font-size:11.5px}
.gbkart .gb-metin{font-size:13px;color:var(--txt2);line-height:1.5}
.gbkart .gb-cevap{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:13px;color:#86efac;line-height:1.5}
.gbkart .gb-cevap b{color:#4ade80}

/* Yönetim panelindeki geri bildirim listesi */
.gblist .gbk{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:10px}
.gblist .gbk.yeni{border-color:rgba(37,99,235,.55);background:rgba(37,99,235,.07)}
.gblist .gbk-ust{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.gblist .gbk-ust .kim{font-weight:700}
.gblist .gbk-ust .ne{color:var(--txt3);font-size:12px}
.gblist .gbk-ust .zaman{margin-left:auto;color:var(--txt3);font-size:12px}
.gblist .gbk-metin{font-size:13.5px;line-height:1.6;color:var(--txt);
  white-space:pre-wrap;word-break:break-word}
.gblist .gbk-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.gblist .gbk-cevap{margin-top:10px;padding:10px 12px;border-radius:9px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:13px;color:#86efac}
.gbrozet{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;border-radius:99px;background:var(--acc);color:#fff;font-size:11px;font-weight:800;margin-left:6px}

/* ==================================================================
   AI HATLARI — SORUN KUTULARI
   ------------------------------------------------------------------
   Bir sorun onlarca sunucuyu etkileyebiliyor. Eskiden butun adlar
   kalin kirmizi metinle alt alta basiliyor, ekranin yarisi okunmaz
   bir kirmizi blok oluyordu. Artik adlar KAPALI duruyor; acilinca
   sade, kucuk etiketler halinde ve kaydirilabilir bir kutuda cikar.
   ================================================================== */
.aiSorun .as-bas{font-weight:600;line-height:1.5}
.aiSorun .as-det{margin-top:9px}
.aiSorun .as-det > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--txt2);user-select:none;transition:background .15s,color .15s
}
.aiSorun .as-det > summary::-webkit-details-marker{display:none}
.aiSorun .as-det > summary::before{content:'▸';font-size:11px;opacity:.8}
.aiSorun .as-det[open] > summary::before{content:'▾'}
.aiSorun .as-det > summary:hover{background:rgba(255,255,255,.11);color:var(--txt)}
.aiSorun .as-bulut{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
  max-height:190px;overflow-y:auto;padding:2px 2px 4px
}
.aiSorun .as-et{
  font-size:11.5px;font-weight:500;line-height:1.35;
  padding:4px 9px;border-radius:7px;white-space:nowrap;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10);
  color:var(--txt2)
}
.aiSorun .as-et.dim{opacity:.7;font-style:italic}

/* ==================================================================
   MUSTERI KARTLARI (yonetim paneli)
   ------------------------------------------------------------------
   Dar tablo yerine kart duzeni: her musterinin sunuculari, odeme
   durumu ve son girisi bir bakista goruluyor.
   ================================================================== */
.mustGrid{
  display:grid;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))
}
.mkart{
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;display:flex;flex-direction:column;gap:13px;
  transition:border-color .18s,transform .18s,box-shadow .18s;
  position:relative;overflow:hidden
}
.mkart::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,rgba(34,197,94,.9),rgba(34,197,94,.15))
}
.mkart.pasif::before{background:linear-gradient(180deg,rgba(148,163,184,.7),rgba(148,163,184,.1))}
.mkart.gecikmis::before{background:linear-gradient(180deg,rgba(239,68,68,.95),rgba(239,68,68,.2))}
.mkart:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.mkart.pasif{opacity:.72}

.mk-ust{display:flex;align-items:center;gap:12px}
.mk-av{
  width:42px;height:42px;flex:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)
}
.mk-bilgi{flex:1;min-width:0}
.mk-bilgi > b{display:block;font-size:15.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.mk-kul{font-size:12px;color:var(--txt3);font-family:ui-monospace,Consolas,monospace}
.mk-not{font-size:12px;color:var(--txt3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}

.mk-sunucular{display:flex;flex-wrap:wrap;gap:6px}
.mk-srv{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-size:11.5px;font-weight:500;padding:4px 9px;border-radius:7px;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.mk-srv .nokta{width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--txt3);box-shadow:none}
.mk-srv.acik{color:#bbf7d0;border-color:rgba(34,197,94,.30);background:rgba(34,197,94,.10)}
.mk-srv.acik .nokta{background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.8)}
.mk-srv.dim{opacity:.65;font-style:italic}
.mk-bos{font-size:12px;color:var(--txt3);font-style:italic}

.mk-serit{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mk-kutu{
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:9px 11px;min-width:0
}
.mk-kutu .mk-etiket{display:block;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--txt3);font-weight:700;margin-bottom:3px}
.mk-kutu > b{display:block;font-size:13px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kutu > small{display:block;font-size:10.5px;color:var(--txt3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Odeme durumuna gore renk */
.mk-kutu.odeme.ok > b{color:#86efac}
.mk-kutu.odeme.soon > b{color:#fcd34d}
.mk-kutu.odeme.due > b{color:#fdba74}
.mk-kutu.odeme.overdue{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30)}
.mk-kutu.odeme.overdue > b{color:#fca5a5}
.mk-kutu.odeme.off > b{color:var(--txt3);font-weight:500}

/* Dugme satiri: ikili duzen, SILME dugmesi dar kalsin ki yanlislikla
   basilmasin (tam genislik kirmizi bir dugme davetiye cikariyordu). */
.mk-btn{display:flex;flex-wrap:wrap;gap:7px}
.mk-btn .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}
.mk-btn .btn-bad{flex:0 0 46px;padding-left:0;padding-right:0}

@media(max-width:820px){
  .mustGrid{grid-template-columns:1fr;gap:11px}
  .mkart{padding:13px 14px;gap:11px}
  .mk-serit{grid-template-columns:1fr}
}

/* ==================================================================
   HAZIR MESAJ DUZENLEYICI (Ayarlar -> Hazir Mesajlar)
   ------------------------------------------------------------------
   Her mesaj bir kart. Ustte simge ve dugme yazisi (musterinin gordugu),
   altta gonderilecek metin ve CANLI ONIZLEME — {ad}/{sunucu} yerine
   ornek degerler konarak.
   ================================================================== */
#a_mesajList{display:flex;flex-direction:column;gap:11px;margin:10px 0 12px}
.msgkart{
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;display:flex;flex-direction:column;gap:11px;
  transition:border-color .18s
}
.msgkart:focus-within{border-color:rgba(96,165,250,.5)}
.mkt-ust{display:flex;align-items:flex-end;gap:10px}
.mkt-alan{flex:1;min-width:0}
.mkt-alan > label{
  display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  font-weight:700;color:var(--txt3);margin-bottom:5px
}
.mkt-alan input,.mkt-alan textarea{width:100%}
.msgkart .msg-ik{
  width:56px;flex:none;text-align:center;font-size:21px;line-height:1;
  padding:8px 4px;height:40px
}
.msgkart .msg-ms{resize:vertical;min-height:52px;font-size:13.5px;line-height:1.5}
.msgkart .mkt-sil{flex:none;height:40px;width:40px;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.mkt-onizle{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:10px;
  background:rgba(37,211,102,.06);border:1px solid rgba(37,211,102,.22)
}
.mkt-dugme{
  flex:none;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;
  background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.4);color:#86efac;
  white-space:nowrap
}
.mkt-balon{
  flex:1;min-width:140px;font-size:12.5px;line-height:1.5;color:var(--txt2);
  padding:7px 11px;border-radius:10px 10px 10px 3px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)
}
@media(max-width:700px){
  .mkt-ust{flex-wrap:wrap}
  .msgkart .msg-ik{width:52px}
  .mkt-onizle{flex-direction:column;gap:7px}
  .mkt-balon{width:100%;border-radius:10px}
}

/* Icerik indirmelerinde satirin solundaki kucuk gorsel */
.dlrow .di-gorsel{
  width:48px;height:34px;flex:none;border-radius:7px;overflow:hidden;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:17px;padding:0
}
.dlrow .di-gorsel img{width:100%;height:100%;object-fit:cover;display:block}

/* ==================================================================
   KOD DUZENLEYICI  (extra_cfg.yml)
   ------------------------------------------------------------------
   Visual Studio Code benzeri gorunum, sifir bagimlilik ile:
   metin kutusunun yazisi SEFFAF, arkasindaki <pre> ayni yaziyi
   renkli basiyor. Ikisi ayni yazi tipi, ayni olcu ve ayni kaydirma
   konumunda oldugu icin harfler tam ust uste oturur.
   ================================================================== */
.modal .box.kod{
  max-width:1180px;width:96vw;padding:0;overflow:hidden;
  display:flex;flex-direction:column;max-height:92vh;
  background:#12141a;border:1px solid #2b303c
}
.kod-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;background:#1b1f2a;border-bottom:1px solid #2b303c
}
.kod-sol{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.kod-sag{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kod-nokta{width:11px;height:11px;border-radius:50%;flex:none}
.kod-nokta.k1{background:#ff5f57}.kod-nokta.k2{background:#febc2e}.kod-nokta.k3{background:#28c840}
.kod-sol > b{font-size:13.5px;margin-left:5px;white-space:nowrap}
.kod-yol{
  font-size:11.5px;color:#7d8798;font-family:ui-monospace,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left
}
.kod-durum{font-size:12px;color:#6b7688;font-weight:600}
.kod-durum.degisti{color:#fbbf24}

.kod-alan{
  flex:1;min-height:260px;display:flex;overflow:hidden;
  background:#0f1116;font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  font-size:13px;line-height:1.55
}
.kod-satir{
  flex:none;width:52px;padding:14px 10px 14px 0;text-align:right;
  color:#4c5566;background:#12151c;border-right:1px solid #232833;
  overflow:hidden;white-space:pre;user-select:none;
  font-family:inherit;font-size:inherit;line-height:inherit
}
.kod-yazi{position:relative;flex:1;min-width:0}
.kod-boya,.kod-yazi textarea{
  position:absolute;inset:0;margin:0;padding:14px 16px;border:0;
  font-family:inherit;font-size:inherit;line-height:inherit;
  white-space:pre;overflow:auto;tab-size:2;
  background:transparent;letter-spacing:normal;word-spacing:normal;
  /* ==================================================================
     IKI KATMAN BIREBIR AYNI GENISLIKTE OLMALI
     ------------------------------------------------------------------
     BULUNAN HATA (2.9.16): "tikladigim yerle yazdigi yerin alakasi yok".
     Ustteki renkli katman <pre>, alttaki gorunmez katman <textarea>.
     Ikisi ayni yazi tipini kullaniyor ama:
       - <pre> icinde BAG YAZILARI (ligature) aciktir; Cascadia Code /
         Fira Code gibi yazi tiplerinde "//" ve "->" tek karaktere
         birlesir ve satir KISALIR. Textarea'da birlesmez.
       - Kalin (font-weight) yazilan parcalar, yazi tipinin kalin
         kesimi yoksa tarayici tarafindan SISIRILIR ve genisler.
     Ikisi de satirin geri kalanini kaydiriyor; imlec bir yere,
     gordugunuz harf baska yere denk geliyordu.
     Cozum: her iki katmanda da bag yazilari ve kerning KAPALI,
     renklendirmede kalinlik YOK.
     ================================================================== */
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"clig" 0,"calt" 0,"dlig" 0;
  font-kerning:none;
  font-variant:none;
  text-rendering:optimizeSpeed
}
.kod-boya{color:#cfd6e4;pointer-events:none;overflow:hidden}
.kod-yazi textarea{
  color:transparent;caret-color:#7dd3fc;resize:none;outline:none;
  -webkit-text-fill-color:transparent
}
.kod-yazi textarea::selection{background:rgba(56,120,255,.35);-webkit-text-fill-color:transparent}

/* ---- YAML renkleri (VS Code "Dark+" tonlari) ----
   DIKKAT: burada YALNIZCA renk verilir. Kalinlik, egiklik, alt cizgi,
   harf araligi gibi GENISLIGI degistiren hicbir sey konmaz — yoksa
   renkli katman ile yazi katmani kayar. */
.kod-boya *{font-weight:inherit;font-style:normal;text-decoration:none;letter-spacing:inherit}
.y-anahtar{color:#9cdcfe}                    /* Anahtar adi */
.y-iki{color:#d4d4d4}                        /* iki nokta */
.y-tire{color:#c586c0}                       /* liste tiresi (KALIN OLMAZ — genislik kayar) */
.y-metin{color:#ce9178}                      /* duz deger */
.y-tirnak{color:#ce9178}                     /* tirnakli metin */
.y-sayi{color:#b5cea8}                       /* sayi */
.y-mantik{color:#569cd6}                     /* true / false / null (KALIN OLMAZ) */
.y-baglanti{color:#4ec9b0}                   /* alt cizgi de yok: bazi tarayicilarda genislik ekliyor */
.y-dizi{color:#dcdcaa}
.y-yorum{color:#6a9955;font-style:normal}    /* # aciklama */

.kod-alt{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:9px 14px;background:#1b1f2a;border-top:1px solid #2b303c;
  font-size:11.5px;color:#7d8798
}
.kod-ipucu b{color:#9cdcfe}

/* Gelismis sekmesindeki kisa ozet kutusu */
.ycKisa{
  margin-top:10px;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.6;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2)
}
.ycKisa code{font-size:11.5px;color:var(--txt3);word-break:break-all}
.ycKisa .yk-ok{color:#86efac;font-weight:700}
.ycKisa .yk-yok{color:#fcd34d;font-weight:700}

@media(max-width:820px){
  .modal .box.kod{width:100vw;max-width:100vw;max-height:96vh;border-radius:0}
  .kod-bar{padding:9px 11px;gap:8px}
  .kod-sol > b{font-size:12.5px}
  .kod-yol{display:none}
  .kod-alan{font-size:12px}
  .kod-satir{width:40px;padding-right:7px}
  .kod-boya,.kod-yazi textarea{padding:11px 12px}
  .kod-ipucu{display:none}
}

/* ==================================================================
   TELEFONDA TASMA KORUMASI  (Araclar / Pist listeleri)
   ------------------------------------------------------------------
   SORUN: harita onizleme kutusu (180px resim + kisaltilamayan uzun
   harita kimligi) 360px ekrana sigmiyordu. Tarayici bunu gorunce
   sayfayi genisletiyor (innerWidth 360 -> 402), bu yuzden TUM arayuz
   kayiyor — "geniş olunca UI bozuluyor" sikayeti tam olarak buydu.

   COZUM: dar ekranda onizleme dikey diziliyor, uzun metinler
   kirilabiliyor ve liste satirlari kucultulebilir hale getiriliyor.
   ================================================================== */
@media(max-width:700px){
  .track-preview{flex-direction:column;align-items:stretch;gap:11px;padding:11px}
  .track-preview img{width:100%;height:148px}
  .track-preview .info{flex:1 1 auto}
  .track-preview .info b{font-size:15px}

  /* Liste satirlari: metin sutunu kucultulebilir olsun ki tasmasin */
  .picker{max-height:290px}
  .picker .row{gap:9px;padding:9px 11px}
  .picker .row .nm{min-width:0;flex:1 1 auto;overflow:hidden}
  .picker .row .nm b,.picker .row .nm small{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%
  }
  .picker .row .thumb,.picker .row .thumbkutu{flex:none}
  .picker .row .btn{flex:none;white-space:nowrap}

  /* Arac kartlari ve secili liste */
  .row,.crow,.dlrow{min-width:0}
  .row > *,.crow > *{min-width:0}

  /* Son care: hicbir sey ekrani genisletemesin */
  html,body{max-width:100%;overflow-x:hidden}
  .layout,.content,.card{max-width:100%;min-width:0}
}

/* ==================================================================
   ÜST KUMANDA — YENİ TASARIM
   ------------------------------------------------------------------
   Baslat / Yeniden / Durdur / Katil dugmeleri eskiden birbirinden
   kopuk, duz gri kutulardi; sunucunun ACIK mi KAPALI mi oldugu
   anlasilmiyordu. Artik:
     - Durum rozeti canli: calisiyorsa yesil nabiz atar
     - Dugmeler tek bir "kumanda paneli" icinde toplandi
     - Her dugmenin dunyaca kabul goren rengi var
       (yesil = baslat, sari = yeniden, kirmizi = durdur, mavi = katil)
     - Basildiginda hafif bir dalga ve cokme animasyonu olur
   Animasyonlar tamamen CSS; telefonu yormaz ve "animasyonlari azalt"
   ayari acikken kendiliginden durur.
   ================================================================== */
.tb-kumanda{
  padding:4px;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
/* Kapsül boşsa görünmez: eskiden yalnızca rengi siliniyordu, kutu
   yerinde kaldığı için üst çubukta uzun ince bir çizgi gibi duruyordu. */
.tb-kumanda:empty,.tb-kumanda.bos{display:none !important}
/* :has destekleyen tarayıcılarda JS'e gerek kalmadan da gizlenir */
.tb-kumanda:not(:has(> :not(.hidden))){display:none}

/* ---- Durum rozeti ---- */
.topbar .pill{
  padding:7px 14px;background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.10);
  transition:color .3s,border-color .3s,background .3s
}
.topbar .pill.on{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.38)}
.topbar .pill.off{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.30)}
.topbar .pill.on .dot{animation:nabiz 2s ease-in-out infinite}
@keyframes nabiz{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55);opacity:1}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0);opacity:.75}
}
/* Baslarken/dururken rozet titresir */
.topbar .pill.gecis .dot{animation:gecisDon .9s linear infinite;background:#fbbf24}
@keyframes gecisDon{
  0%{transform:scale(.7);opacity:.6}
  50%{transform:scale(1.15);opacity:1}
  100%{transform:scale(.7);opacity:.6}
}

/* ---- Kumanda dugmeleri ---- */
.tb-kumanda .btn{
  position:relative;overflow:hidden;border-radius:99px;
  font-weight:700;letter-spacing:.1px;
  transition:transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, filter .2s
}
.tb-kumanda .btn:hover:not(:disabled){transform:translateY(-1.5px)}
.tb-kumanda .btn:active:not(:disabled){transform:translateY(0) scale(.96)}
.tb-kumanda .btn:disabled{filter:grayscale(.6) opacity(.45);transform:none}
/* Basildiginda merkezden yayilan dalga */
.tb-kumanda .btn::after{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);opacity:0;
  pointer-events:none
}
.tb-kumanda .btn:active:not(:disabled)::after{animation:dalga .5s ease-out}
@keyframes dalga{
  from{transform:translate(-50%,-50%) scale(0);opacity:.5}
  to{transform:translate(-50%,-50%) scale(22);opacity:0}
}
/* Renk tonlari — dunyaca kabul goren anlamlar */
.tb-kumanda .btn-ok:not(:disabled){box-shadow:0 0 0 1px rgba(34,197,94,.30) inset}
.tb-kumanda .btn-ok:hover:not(:disabled){box-shadow:0 5px 16px rgba(34,197,94,.30)}
.tb-kumanda .btn-warn:hover:not(:disabled){box-shadow:0 5px 16px rgba(245,158,11,.28)}
.tb-kumanda .btn-bad:hover:not(:disabled){box-shadow:0 5px 16px rgba(239,68,68,.28)}
.tb-kumanda .btn-join{
  background:linear-gradient(140deg,#2563eb,#1d4ed8);border-color:rgba(96,165,250,.45);color:#fff
}
.tb-kumanda .btn-join:hover{box-shadow:0 5px 18px rgba(37,99,235,.42)}
/* Sunucu calisirken "Katil" dugmesi hafifce parlar */
.tb-kumanda .btn-join.canli::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  animation:parla 3.4s ease-in-out infinite
}
@keyframes parla{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* Islem suruyorken dugme icinde donen halka */
.tb-kumanda .btn.mesgul{color:transparent!important;pointer-events:none}
.tb-kumanda .btn.mesgul::before{
  content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;
  animation:donuyor .7s linear infinite
}
@keyframes donuyor{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .topbar .pill.on .dot,.topbar .pill.gecis .dot,
  .tb-kumanda .btn-join.canli::before{animation:none}
  .tb-kumanda .btn:hover:not(:disabled),.tb-kumanda .btn:active:not(:disabled){transform:none}
}

@media(max-width:700px){
  /* Telefonda kumanda paneli tam genislikte bir serit olur */
  .tb-kumanda{border-radius:14px;padding:8px;gap:7px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
  .tb-kumanda .pill{grid-column:1/-1;justify-self:stretch;justify-content:center;
    background:rgba(0,0,0,.32)}
  .tb-kumanda .btn{border-radius:11px;font-size:12.5px}
}

/* ==================================================================
   HAVA EFEKTLERI — SIDDET KADEMELERI  (v2.9.1)
   ------------------------------------------------------------------
   Panel havanin turunu VE siddetini biliyor (CSP numarasindan ya da
   hava dosyasi adindan). Ayni efekt uc kademede cizilir:
     .s1 hafif   .s2 normal   .s3 yogun
   Hepsi CSS; JavaScript her karede calismaz. "Animasyonlari azalt"
   ayari acikken tamami durur.
   ================================================================== */

/* ---- YAĞMUR ŞİDDETİ ----
   Damla deseni aynı kalıyor; değişen tek şey döşeme sıklığı, hız ve
   eğim. Küçük döşeme = daha çok damla = daha yoğun yağmur. */

/* s1 — çiseleme: seyrek, ince, yavaş, neredeyse dik */
.atmos .yagmur.s1{
  background-size:
    440px 440px, 440px 440px, 440px 440px, 440px 440px,
    380px 380px, 380px 380px, 380px 380px, 380px 380px;
  transform:skewX(-5deg) scale(1.12);
  animation-duration:1.05s;opacity:.62
}
@keyframes yagmurAkS1{
  to{ background-position:
      -22px 440px, -22px 440px, -22px 440px, -22px 440px,
      -13px 380px, -13px 380px, -13px 380px, -13px 380px; }
}
.atmos .yagmur.s1{animation-name:yagmurAkS1}

/* s2 — normal yağmur (temel ayarlar) */
.atmos .yagmur.s2{animation-duration:.62s;opacity:.9}

/* s3 — sağanak: sık, kalın, hızlı, belirgin rüzgâr eğimi */
.atmos .yagmur.s3{
  background-image:
    radial-gradient(1.5px 30px at 7% 11%,  rgba(214,233,255,.62), transparent),
    radial-gradient(1.6px 34px at 30% 58%, rgba(214,233,255,.56), transparent),
    radial-gradient(1.5px 28px at 52% 24%, rgba(214,233,255,.60), transparent),
    radial-gradient(1.6px 32px at 79% 71%, rgba(214,233,255,.54), transparent),
    radial-gradient(1.1px 20px at 18% 36%, rgba(205,226,250,.34), transparent),
    radial-gradient(1.1px 18px at 42% 88%, rgba(205,226,250,.30), transparent),
    radial-gradient(1.1px 21px at 67% 9%,  rgba(205,226,250,.33), transparent),
    radial-gradient(1.1px 19px at 92% 47%, rgba(205,226,250,.29), transparent);
  background-size:
    190px 190px, 190px 190px, 190px 190px, 190px 190px,
    150px 150px, 150px 150px, 150px 150px, 150px 150px;
  transform:skewX(-15deg) scale(1.3);
  animation:yagmurAkS3 .34s linear infinite
}
@keyframes yagmurAkS3{
  to{ background-position:
      -46px 190px, -46px 190px, -46px 190px, -46px 190px,
      -30px 150px, -30px 150px, -30px 150px, -30px 150px; }
}

/* Islak asfalt parlamasi — yagmurda yerden yansiyan isik */
.atmos .islak{
  background:
    radial-gradient(120% 26% at 50% 104%, rgba(150,190,240,.16), transparent 70%),
    radial-gradient(50% 14% at 24% 100%, rgba(255,220,150,.10), transparent 74%),
    radial-gradient(50% 14% at 76% 100%, rgba(150,200,255,.10), transparent 74%);
  animation:islakParla 5s ease-in-out infinite alternate
}
@keyframes islakParla{from{opacity:.55}to{opacity:.95}}

/* Simsek — seyrek ve cok kisa; goz yormaz */
.atmos .simsek{
  background:linear-gradient(180deg, rgba(220,235,255,.5), transparent 55%);
  opacity:0;animation:simsekCak 9s ease-out infinite
}
@keyframes simsekCak{
  0%,92%,100%{opacity:0}
  93%{opacity:.34}
  94%{opacity:.06}
  95%{opacity:.26}
  97%{opacity:0}
}

/* ---- KAR: siddete gore tane sayisi ve hiz ---- */
.atmos .kar.s1{background-size:460px 460px;animation-duration:20s;opacity:.65}
.atmos .kar.s2{background-size:340px 340px;animation-duration:14s}
.atmos .kar.s3{
  background:
    radial-gradient(2.6px 2.6px at 8% 12%,  rgba(255,255,255,.9), transparent),
    radial-gradient(2.2px 2.2px at 23% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(3px 3px     at 37% 8%,  rgba(255,255,255,.85),transparent),
    radial-gradient(2px 2px     at 52% 40%, rgba(255,255,255,.7), transparent),
    radial-gradient(2.8px 2.8px at 66% 18%, rgba(255,255,255,.85),transparent),
    radial-gradient(2.2px 2.2px at 79% 52%, rgba(255,255,255,.75),transparent),
    radial-gradient(2.4px 2.4px at 91% 26%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px     at 15% 66%, rgba(255,255,255,.7), transparent),
    radial-gradient(2.6px 2.6px at 44% 78%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.2px 2.2px at 72% 88%, rgba(255,255,255,.75),transparent);
  background-size:280px 280px;animation-duration:9s
}

/* ---- SIS: siddete gore perde yogunlugu ---- */
.atmos .sis.s1{opacity:.5}
.atmos .sis.s2{opacity:.8}
.atmos .sis.s3{
  background:
    linear-gradient(180deg, rgba(185,200,220,.16) 0%, transparent 50%),
    radial-gradient(96% 42% at 50% 72%, rgba(195,210,230,.24), transparent 74%),
    radial-gradient(78% 30% at 20% 90%, rgba(195,210,230,.18), transparent 74%),
    radial-gradient(78% 30% at 80% 86%, rgba(195,210,230,.16), transparent 74%)
}

/* ---- BULUT: siddete gore kalinlik ve renk ---- */
.atmos .bulut.s1{filter:brightness(1.05)}
.atmos .bulut.s2{filter:brightness(.95) saturate(.95)}
.atmos .bulut.s3{filter:brightness(.8) saturate(.85) contrast(1.05)}
.atmos .bulut.koyu{filter:brightness(.62) saturate(.75) contrast(1.08)}
.atmos .bulut.gece.koyu{filter:brightness(.42) saturate(.6)}

/* ---- GUNES: acik havada belirgin bir kursun ve isin halkasi ---- */
.atmos .gunes.parlak{
  background:
    radial-gradient(6% 5%  at 80% 11%, rgba(255,244,214,.85), transparent 70%),
    radial-gradient(16% 13% at 80% 11%, rgba(255,226,150,.34), transparent 72%),
    radial-gradient(34% 28% at 80% 11%, rgba(255,214,140,.18), transparent 74%)
}

@media (prefers-reduced-motion: reduce){
  .atmos .islak,.atmos .simsek{animation:none}
  .atmos .simsek{opacity:0}
}

/* ==================================================================
   ON KONTROL PENCERESI — "SUNUCU NEDEN ACILMIYOR?"
   ------------------------------------------------------------------
   Musteri konsoldaki ingilizce hatayi okumak zorunda kalmasin diye,
   sunucu baslamadan once bulunan sorunlar burada TURKCE anlatilir.
   ================================================================== */
.kontrolBas{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.kontrolBas .kb-ikon{
  font-size:30px;line-height:1;flex:none;width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.28)
}
.kontrolBas h3{margin:0 0 3px;font-size:17px}
.kontrolBas .desc{margin:0;font-size:12.5px}

.kkKart{
  background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--line2);
  border-radius:11px;padding:13px 15px;margin-bottom:10px
}
.kkKart.hata{border-left-color:#ef4444;background:rgba(239,68,68,.05)}
.kkKart.uyari{border-left-color:#f59e0b;background:rgba(245,158,11,.05)}
.kkKart.iyi{border-left-color:#22c55e;background:rgba(34,197,94,.05)}
.kkKart .kk-ust{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.kkKart .kk-ust b{font-size:14.5px}
.kk-rozet{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 8px;
  border-radius:5px;background:rgba(239,68,68,.18);color:#fca5a5
}
.kkKart.uyari .kk-rozet{background:rgba(245,158,11,.18);color:#fcd34d}
.kk-rozet.ok{background:rgba(34,197,94,.18);color:#86efac}
.kk-metin{font-size:13px;line-height:1.65;color:var(--txt2)}
.kk-metin b{color:var(--txt)}
.kk-metin code{
  font-size:11.5px;padding:1px 6px;border-radius:5px;
  background:rgba(0,0,0,.32);color:#9cdcfe
}
.kk-btn{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.kk-detay{margin-top:9px;font-size:11.5px}
.kk-detay > summary{cursor:pointer;color:var(--txt3);user-select:none}
.kk-detay code{
  display:block;margin-top:6px;padding:8px 10px;border-radius:7px;
  background:rgba(0,0,0,.35);color:#8fa3bf;word-break:break-all;line-height:1.55
}
@media(max-width:700px){
  .kontrolBas .kb-ikon{width:44px;height:44px;font-size:24px}
  .kkKart{padding:11px 12px}
  .kk-btn .btn{flex:1 1 100%}
}

/* ==================================================================
   KONSOL DURUM SERIDI
   ------------------------------------------------------------------
   Konsolun ustunde sunucunun o anki hali. Musteri "sunucum ne
   durumda" sorusunu konsolu okumadan cevaplasin diye.
   ================================================================== */
.konsolDurum{
  display:flex;gap:9px;flex-wrap:wrap;align-items:stretch;margin:0 0 12px
}
.kd-kutu{
  flex:0 0 auto;min-width:104px;padding:8px 13px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line);
  transition:border-color .3s,background .3s
}
.kd-kutu span{
  display:block;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--txt3);font-weight:700;margin-bottom:2px
}
.kd-kutu b{font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums}
.kd-kutu.acik{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07)}
.kd-kutu.acik b{color:#4ade80}
.kd-kutu.kapali{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.05)}
.kd-kutu.kapali b{color:#fca5a5}
/* Son olay — yeni satir gelince kisa bir vurgu */
.kd-akis{
  flex:1 1 220px;min-width:0;display:flex;align-items:center;
  padding:8px 14px;border-radius:10px;font-size:12.5px;color:var(--txt2);
  background:rgba(0,0,0,.22);border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.kd-akis.yeni{animation:akisVurgu 1.1s ease-out}
@keyframes akisVurgu{
  0%{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.4);color:#e0f2fe}
  100%{background:rgba(0,0,0,.22);border-color:var(--line);color:var(--txt2)}
}
@media (prefers-reduced-motion: reduce){ .kd-akis.yeni{animation:none} }
@media(max-width:700px){
  .konsolDurum{gap:7px}
  .kd-kutu{flex:1 1 calc(50% - 4px);min-width:0;padding:7px 10px}
  .kd-kutu b{font-size:13.5px}
  .kd-akis{flex:1 1 100%;font-size:11.5px;padding:7px 11px}
}

/* ==================================================================
   HATA COZUMLERI REHBERI (musteri)
   ------------------------------------------------------------------
   Musteri bir hata gordugunde ne yapacagini panelden ogrenir.
   Adimlar numarali, ekran goruntuleri tiklaninca buyur.
   ================================================================== */
.rehberBas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.rehberBas h3{margin:0 0 3px;font-size:18px}
.rehberBas .desc{margin:0;font-size:12.5px}
#rh_ara{margin-bottom:12px}
.rehberListe{max-height:52vh;overflow-y:auto;padding-right:3px}
.rh-bos{padding:26px 14px;text-align:center;color:var(--txt3);font-size:13px}

.rh-madde{
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  margin-bottom:9px;overflow:hidden;transition:border-color .18s
}
.rh-madde[open]{border-color:var(--line2)}
.rh-madde > summary{
  cursor:pointer;list-style:none;padding:12px 15px;user-select:none;
  display:flex;flex-direction:column;gap:3px;position:relative;padding-right:38px
}
.rh-madde > summary::-webkit-details-marker{display:none}
.rh-madde > summary::after{
  content:'▾';position:absolute;right:15px;top:13px;color:var(--txt3);
  transition:transform .2s
}
.rh-madde[open] > summary::after{transform:rotate(180deg)}
.rh-madde > summary:hover{background:rgba(255,255,255,.03)}
.rh-madde > summary b{font-size:14.5px}
.rh-madde > summary small{color:var(--txt3);font-size:12px;line-height:1.5}

.rh-govde{padding:2px 15px 15px;border-top:1px solid var(--line)}
.rh-govde p{margin:9px 0;font-size:13.5px;line-height:1.7;color:var(--txt2)}
.rh-govde a{color:#7dd3fc}
.rh-adim{margin:9px 0;padding-left:20px}
.rh-adim li{
  font-size:13.5px;line-height:1.7;color:var(--txt2);margin-bottom:5px;
  padding-left:4px
}
.rh-adim li::marker{color:#60a5fa;font-weight:800}
.rh-gorsel{
  display:block;margin:11px 0;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:rgba(0,0,0,.25);
  transition:border-color .18s,transform .18s
}
.rh-gorsel:hover{border-color:rgba(96,165,250,.5);transform:scale(1.005)}
.rh-gorsel img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.rh-etiketler{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0 4px}
.rh-etiketler span{
  font-size:11px;padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--txt3)
}
.rehberDestek{
  margin-top:14px;padding:13px 15px;border-radius:11px;
  background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.22);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.rh-d-metin{flex:1;min-width:160px;font-size:13px;color:var(--txt2)}
.rh-d-btn{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){
  .rehberListe{max-height:56vh}
  .rh-madde > summary{padding:11px 13px;padding-right:34px}
  .rh-govde{padding:2px 13px 13px}
  .rehberDestek{flex-direction:column;align-items:stretch}
  .rh-d-btn .btn{flex:1}
}

/* ==================================================================
   REHBER ICE AKTARMA ONIZLEMESI (yonetim paneli)
   ================================================================== */
#rh_yapistir{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.6}
#rh_onizleme{margin-top:14px}
.rhOnizle{
  background:var(--bg2);border:1px solid var(--line);border-left:3px solid #60a5fa;
  border-radius:11px;padding:13px 14px;margin-bottom:11px
}
.rho-bas{display:flex;gap:9px;align-items:center;margin-bottom:9px}
.rho-baslik{flex:1;font-weight:700;font-size:14.5px}
.rho-bas .btn{flex:none;width:38px;padding:0;height:38px;
  display:flex;align-items:center;justify-content:center}
.rho-icerik{
  width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  line-height:1.65;resize:vertical
}
.rho-gorseller{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rho-gorseller img{
  width:112px;height:70px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:rgba(0,0,0,.3)
}
.rho-gorseller img.bozuk{
  object-fit:contain;opacity:.35;border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.08)
}
.rho-kodlar{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.rho-kodlar > label{
  display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  font-weight:700;color:var(--txt3);margin-bottom:7px
}
.rho-secim{display:flex;gap:7px;flex-wrap:wrap}
.rho-kod{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:99px;font-size:12px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.09);
  color:var(--txt2);transition:background .15s,border-color .15s
}
.rho-kod:hover{background:rgba(255,255,255,.06)}
.rho-kod input{margin:0;width:14px;height:14px}
.rho-kod:has(input:checked){
  background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.45);color:#fff
}
@media(max-width:820px){
  .rho-gorseller img{width:calc(50% - 4px);height:82px}
}

/* Acilamayan ekran goruntusu: kirik simge yerine sade bir baglanti */
.rh-gorsel.yok{
  display:inline-block;width:auto;padding:9px 14px;font-size:12.5px;color:#7dd3fc;
  background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.25)
}
.rh-gorsel.yok:hover{transform:none;background:rgba(56,189,248,.12)}

/* Hizli saat secimi: arka planin degistigi belli olsun diye kisa bir vurgu */
.atmos.vurgu{animation:atmosVurgu .9s ease-out}
@keyframes atmosVurgu{
  0%{filter:brightness(1.35) saturate(1.2)}
  100%{filter:none}
}
@media (prefers-reduced-motion: reduce){ .atmos.vurgu{animation:none} }

/* ==================================================================
   MUSTERI KARTI — v2.9.4 EKLERI
   ------------------------------------------------------------------
   Panel sifresi, toplu sunucu kumandasi ve tiklanabilir sunucu adlari.
   ================================================================== */

/* Sunucu adi artik bir dugme: tiklayinca ayarlarina gider */
.mk-srv.tikla{
  cursor:pointer;font-family:inherit;text-align:left;
  transition:background .15s,border-color .15s,transform .12s
}
.mk-srv.tikla:hover{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);
  color:var(--txt);transform:translateY(-1px)
}
.mk-srv.acik.tikla:hover{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.5)}

/* ---- Panel sifresi ---- */
.mk-sifre{
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px
}
.mk-sifre .mk-etiket{
  font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--txt3);font-weight:700
}
.mk-sifre-kutu{display:flex;align-items:center;gap:6px}
.mk-sifre-kutu code{
  flex:1;min-width:0;font-size:13px;letter-spacing:.5px;
  padding:6px 10px;border-radius:7px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);
  color:#86efac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace
}
.mk-sifre-kutu code.gizli{color:var(--txt3);letter-spacing:2px}
.mk-sifre-kutu .btn{flex:none;width:34px;padding:0;height:32px;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.mk-sifre-yok{font-size:11.5px;color:var(--txt3);line-height:1.5}
.mk-sifre-uret{align-self:flex-start;font-size:11.5px}

/* ---- Toplu sunucu kumandasi ---- */
.mk-toplu{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)
}
/* Bilgi satiri tam genislik, dugmeler altinda yan yana */
.mk-toplu-bilgi{grid-column:1/-1;font-size:12px;color:var(--txt2);line-height:1.4}
.mk-toplu-bilgi b{color:#4ade80}
.mk-toplu .btn{width:100%;font-size:11.5px;justify-content:center}
.mk-toplu .btn:disabled{opacity:.4;cursor:not-allowed}

@media(max-width:820px){
  .mk-toplu{grid-template-columns:1fr}
}

/* ================= CANLI DURUM KARTI (üst çubuktaki nokta) =================
   Nokta artık bir düğme: üstüne gelince hafifçe büyür, basılınca
   sunucunun o anki hali tek ekranda açılır. */
.pill#statusPill{cursor:pointer;font-family:inherit}
.pill#statusPill:hover{border-color:var(--acc);transform:translateY(-1px)}
.pill#statusPill:active{transform:translateY(0)}
.pill#statusPill:hover .dot{transform:scale(1.35)}
.pill#statusPill .dot{transition:transform .18s}

.durumKart{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px}
.dk-satir{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;background:var(--panel2,rgba(255,255,255,.03));
  border:1px solid var(--line)
}
.dk-satir + .dk-satir{margin-top:6px}
.dk-ikon{font-size:15px;text-align:center}
.dk-ad{color:var(--txt2);font-size:13px}
.dk-deger{font-size:13.5px;text-align:right;word-break:break-all}
.dk-satir.iyi .dk-deger{color:#86efac}
.dk-satir.kotu .dk-deger{color:#fca5a5}

@media(max-width:820px){
  .dk-satir{grid-template-columns:24px 1fr;row-gap:2px}
  .dk-deger{grid-column:2;text-align:left}
}

/* ================= ŞİFRE KURALLARI =================
   Kural kutunun altında anında görünür; yanlışsa kutu kırmızı çerçeveye
   döner, doğruysa yeşil onay çıkar. Müşteri kaydettikten sonra değil,
   yazarken öğrenir. */
.sf-satir{display:flex;gap:8px;align-items:stretch}
.sf-satir input{flex:1;min-width:0}
.sf-satir .btn{flex:none;padding:0 12px}
.sf-etiket{
  display:inline-block;margin-left:7px;padding:2px 8px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;vertical-align:middle
}
.sf-etiket.zorunlu{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.32)}
.sf-etiket.onerilir{background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.32)}
.sf-durum{margin-top:6px;font-size:12.5px;font-weight:600;min-height:17px}
.sf-durum.iyi{color:#86efac}
.sf-durum.uyari{color:#fcd34d}
.sf-durum.kotu{color:#fca5a5}
input.gecersiz{border-color:rgba(239,68,68,.55) !important;background:rgba(239,68,68,.06)}

/* ================= CANLI YÖNETİM =================
   Sunucu açıkken müdahale edilen sekme. Kutular ızgara halinde
   dizilir, telefonda alt alta iner. */
.cy-bas{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.canli-nokta{
  width:7px;height:7px;border-radius:50%;background:var(--ok);margin-left:6px;
  box-shadow:0 0 7px var(--ok);animation:nabiz 2s ease-in-out infinite
}

.cy-ozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin:14px 0}
.cy-oz{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line)
}
.cy-oz > span{font-size:18px}
.cy-oz small{display:block;font-size:11px;color:var(--txt3,var(--txt2));margin-bottom:2px}
.cy-oz b{font-size:14.5px}

.cy-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cy-kutu{
  padding:15px;border-radius:14px;
  background:var(--panel2,rgba(255,255,255,.025));border:1px solid var(--line)
}
.cy-kutu h3{margin:0 0 3px;font-size:15px}
.cy-kutu .mini{color:var(--txt2);font-size:12px;margin-bottom:9px}
.cy-etiket{display:block;margin:12px 0 6px;font-size:12.5px;font-weight:700;color:var(--txt2)}
.cy-satir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cy-satir input[type=text],.cy-satir input[type=time]{flex:1;min-width:120px}
.cy-satir input[type=range]{flex:1;min-width:110px}

.cy-cipler{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.cy-cipler .cip{
  padding:7px 12px;border-radius:99px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--txt2);background:var(--bg2);border:1px solid var(--line);
  transition:background .15s,border-color .15s,color .15s,transform .12s
}
.cy-cipler .cip:hover{color:var(--txt);transform:translateY(-1px);border-color:var(--line2)}
.cy-cipler .cip.sec{background:rgba(37,99,235,.22);border-color:rgba(96,165,250,.55);color:#fff}

.cy-oyuncular{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.cy-oyuncu{
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;
  padding:8px 11px;border-radius:11px;cursor:pointer;text-align:left;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  font-family:inherit;font-size:13px;transition:.15s
}
.cy-oyuncu:hover{border-color:var(--line2)}
.cy-oyuncu.sec{background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.55)}
.cy-av{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#334155,#1e293b);font-weight:800;font-size:12px;color:#e2e8f0
}
.cy-adi{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-arac{font-size:11.5px;color:var(--txt3,var(--txt2));white-space:nowrap}
.cy-bos{padding:16px;text-align:center;color:var(--txt2);font-size:13px}

.cy-islemler{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.cy-secili{font-size:13px;margin-bottom:8px}
.cy-btnler{display:flex;gap:7px;flex-wrap:wrap}

.cy-banlar{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.cy-ban{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-radius:12px;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.22)
}
.cy-ban-sol{display:flex;flex-direction:column;gap:2px;min-width:0}
.cy-ban-sol code{font-size:11.5px;color:var(--txt2);word-break:break-all}
.cy-ban-sag{display:flex;gap:7px;flex-wrap:wrap}

@media(max-width:820px){
  .cy-izgara{grid-template-columns:1fr}
  .cy-ozet{grid-template-columns:repeat(2,1fr)}
  .cy-satir input[type=text],.cy-satir input[type=time]{min-width:0;width:100%;flex:1 1 100%}
  .cy-satir .btn{width:100%}
  .cy-ban{flex-direction:column;align-items:stretch}
  .cy-ban-sag .btn{flex:1}
}

/* ================= YÖNETİCİ: YASAKLAR ================= */
.ban-ekle{
  padding:15px;border-radius:14px;margin:14px 0;
  background:var(--panel2,rgba(255,255,255,.025));border:1px solid var(--line)
}
.ban-ekle h3{margin:0 0 3px;font-size:15px}
.ban-ekle .mini{color:var(--txt2);font-size:12px;margin-bottom:10px}
.ban-satir{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ban-satir input{flex:1 1 160px;min-width:0}
.ban-satir select{flex:0 0 auto}
.banListe{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* CGNAT uyarisi — IP yasaginin neden ise yaramadigini anlatir */
.ban-uyari{
  margin:2px 0 12px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.65;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.4);color:#fde68a
}
.ban-uyari b{color:#fcd34d}
.ban-uyari ul{margin:7px 0 7px 18px;padding:0}
.ban-uyari li{margin:3px 0}
.ban-grup{margin-bottom:14px}
.ban-grup h4{margin:0 0 7px;font-size:13.5px;color:var(--txt2)}
.ban-sat{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 13px;border-radius:11px;margin-bottom:6px;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.20)
}
.ban-sat code{display:block;font-size:11.5px;color:var(--txt2);word-break:break-all}
.ban-sag{display:flex;gap:7px;flex-wrap:wrap}
.ban-bos{padding:16px;text-align:center;color:var(--txt2);font-size:13px}

@media(max-width:820px){
  .ban-satir input,.ban-satir select,.ban-satir .btn{flex:1 1 100%;width:100%}
  .ban-sat{flex-direction:column;align-items:stretch}
  .ban-sag .btn{flex:1}
}

/* ================= CANLI YÖNETİM: SAAT ÇUBUĞU =================
   Saat kutusuna elle yazmak yerine kaydırma çubuğu. Arkası seçilen
   vakte göre gökyüzü gibi renk değiştirir. */
.cy-saatKutu{
  padding:14px;border-radius:13px;margin:4px 0 2px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#1e293b,#0f172a);
  transition:background .5s ease
}
.cy-saatKutu[data-vakit="gece"]{background:linear-gradient(160deg,#0b1220,#020617)}
.cy-saatKutu[data-vakit="safak"]{background:linear-gradient(160deg,#7c3f5d,#1e2438)}
.cy-saatKutu[data-vakit="sabah"]{background:linear-gradient(160deg,#3b6fa8,#152238)}
.cy-saatKutu[data-vakit="ogle"]{background:linear-gradient(160deg,#2f7fc4,#123056)}
.cy-saatKutu[data-vakit="ikindi"]{background:linear-gradient(160deg,#b5713a,#2a2030)}
.cy-saatKutu[data-vakit="aksam"]{background:linear-gradient(160deg,#8e4a5c,#161a2e)}

.cy-saatUst{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.cy-saatIkon{font-size:22px;line-height:1}
.cy-saatBuyuk{
  font-size:30px;font-weight:800;letter-spacing:.5px;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.45)
}
.cy-saatAd{font-size:13px;font-weight:700;color:rgba(255,255,255,.72)}
.cy-saatCubuk{width:100%;display:block}
.cy-saatCetvel{
  display:flex;justify-content:space-between;margin:2px 2px 12px;
  font-size:10.5px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums
}
.cy-saatKutu .btn{width:100%}

/* ---- Oyun içi duyuru: Türkçe harf önizlemesi ---- */
.cy-onizle{
  margin:9px 0 4px;padding:10px 12px;border-radius:11px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.26)
}
.cy-onizle-et{
  display:block;font-size:11px;font-weight:800;letter-spacing:.3px;
  color:#fcd34d;margin-bottom:5px
}
.cy-onizle code{
  display:block;font-size:13px;color:var(--txt);word-break:break-word;margin-bottom:5px
}
.cy-onizle .mini{color:var(--txt2);font-size:11.5px;margin:0}

/* ================= ÖDEME: GERİ AL / ERTELE ================= */
.pay-islem{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pay-islem .btn{flex:0 0 auto}

.er-simdi{
  padding:11px 13px;border-radius:11px;margin:10px 0 14px;
  background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line)
}
.er-simdi > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.er-simdi span{color:var(--txt2);font-size:12.5px}
.er-simdi b{font-size:15px;font-variant-numeric:tabular-nums}
.er-uyari{
  display:block !important;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font-size:12.5px;color:#fcd34d;line-height:1.5
}
.er-cipler{display:flex;gap:7px;flex-wrap:wrap;margin:-4px 0 12px}
.er-cip{
  padding:6px 12px;border-radius:99px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--txt2);background:var(--bg2);border:1px solid var(--line);
  font-family:inherit;transition:.15s
}
.er-cip:hover{color:var(--txt);border-color:var(--line2);transform:translateY(-1px)}

/* ================= DOSYA DOĞRULAMASI (CHECKSUM) ================= */
.cksKutu{
  padding:14px;border-radius:13px;margin:10px 0 18px;
  background:var(--panel2,rgba(255,255,255,.025));border:1px solid var(--line)
}
.cks-secim{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.cks-secim label{
  display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:11px;
  cursor:pointer;background:var(--bg2);border:1px solid var(--line);transition:.15s
}
.cks-secim label:hover{border-color:var(--line2)}
.cks-secim input{margin-top:2px;flex:none}
.cks-secim input:checked + span b{color:var(--acc,#60a5fa)}
.cks-secim span{display:flex;flex-direction:column;gap:3px}
.cks-secim b{font-size:13.5px}
.cks-secim small{font-size:11.5px;color:var(--txt2);line-height:1.45}

/* Mod seçicide "hazır mı" ipucu */
.hint-ok{color:#86efac !important}
.hint-uyari{color:#fcd34d !important}

/* ---- Müşteri kartı: şu an panelde mi? ---- */
.mk-kutu.canli{
  border-color:rgba(34,197,94,.35) !important;
  background:rgba(34,197,94,.07) !important
}
.mk-online{color:#86efac}
.mk-kutu.canli .mk-etiket{color:#86efac}

/* ---- Araç seçerken satırda çıkan ufak uyarı balonu ---- */
.row.uyarili{position:relative}
.satirUyari{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  padding:5px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  pointer-events:none;white-space:nowrap;z-index:3;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  animation:uyariGel .22s ease-out;transition:opacity .6s
}
.satirUyari.bilgi{background:rgba(59,130,246,.92);color:#fff}
.satirUyari.gerekli{background:rgba(239,68,68,.92);color:#fff}
.satirUyari.gider{opacity:0}
@keyframes uyariGel{
  from{opacity:0;transform:translateY(-50%) translateX(8px)}
  to{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* ================= REHBER: MÜŞTERİ GÖRÜNÜMÜ ================= */
.rh-baslik{margin:14px 0 6px;font-size:14.5px;font-weight:800;color:var(--txt)}
.rh-madde{margin:6px 0 6px 18px;padding:0}
.rh-madde li{margin:4px 0;line-height:1.55}
.rh-not{
  margin:9px 0;padding:10px 13px;border-radius:11px;font-size:13px;line-height:1.55
}
.rh-not.dikkat{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.28);color:#fde68a}
.rh-not.bilgi{background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.28);color:#bfdbfe}
.rh-git{
  display:inline-block;padding:3px 10px;margin:0 2px;border-radius:99px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;
  background:rgba(37,99,235,.22);border:1px solid rgba(96,165,250,.5);color:#dbeafe
}
.rh-git:hover{background:rgba(37,99,235,.35)}
.rh-galeri{margin:10px 0}
.rh-galeri.coklu{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.rh-galeri figure{margin:0}
.rh-galeri figcaption{margin-top:5px;font-size:11.5px;color:var(--txt2);text-align:center}
.rh-gorsel img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.rh-gorsel.yok{display:inline-block;font-size:12.5px;color:var(--txt2)}

/* ================= REHBER: YÖNETİCİ DÜZENLEYİCİ ================= */
.rho-arac{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 6px}
.rho-abtn{
  padding:5px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2);transition:.15s
}
.rho-abtn:hover{color:var(--txt);border-color:var(--line2);background:var(--panel)}
.rho-gorselKutu{margin-top:10px}
.rho-gorseller{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-top:7px}
.rho-gkart{
  padding:8px;border-radius:11px;background:var(--bg2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px
}
.rho-gkart img{width:100%;height:82px;object-fit:cover;border-radius:7px;background:#0b1220}
.rho-gkart img.bozuk{outline:2px solid rgba(239,68,68,.5)}
.rho-galt{font-size:12px;padding:5px 8px}
.rho-gbtn{display:flex;gap:5px}
.rho-gbtn .btn{flex:1;padding:3px 0;font-size:12px}

/* ---- Oyun Modları: şablon sunucu satırı ---- */
.pk-sablon{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-6px 0 12px;padding:9px 13px;border-radius:0 0 12px 12px;
  border:1px solid var(--line);border-top:none
}
.pk-sablon.var{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.24)}
.pk-sablon.yok{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.24)}
.pk-set{font-size:12px;font-weight:800;flex:none}
.pk-sablon.var .pk-set{color:#86efac}
.pk-sablon.yok .pk-set{color:#fcd34d}
.pk-sablonSec{flex:1 1 220px;min-width:0;font-size:12.5px;padding:6px 9px}
.pk-sablon small{flex:1 1 100%;font-size:11.5px;color:var(--txt2);line-height:1.45}
@media(max-width:820px){ .pk-sablon{flex-direction:column;align-items:stretch} }

/* ================= ÜST ÇUBUK TAŞMA ONARIMI =================
   1440px gibi orta genişliklerde "← Sunucularım" düğmesi sıkışıp iki
   satıra bölünüyor, altındaki durum rozetiyle iç içe giriyordu.
   Çözüm: üst çubuktaki hiçbir düğme satır kırmaz; kumanda ortada
   esner; hesap menüsü 1180px altında ☰ düğmesine toplanır. */
.topbar .btn,
.topbar .pill,
.topbar a.btn{white-space:nowrap;flex:none}
/* Sol taraf boşluğu yer: kumanda ve hesap menüsü sağa yaslanır.
   Kapsüle margin-left:auto vermiyoruz — kapsül gizlendiğinde hesap
   menüsü logonun dibine yapışıyordu. */
.tb-sol{flex:1 1 auto;min-width:0}
.tb-sol #btnBack{flex:none}
.tb-kumanda{flex:0 0 auto;min-width:0}
.tb-hesap{flex:0 0 auto;min-width:0}

@media(max-width:1600px) and (min-width:701px){
  /* Hesap düğmeleri ☰ menüsüne toplanır — üst çubuk nefes alır.
     1600px'e kadar toplanıyor: müşteri panelinde 6 düğme + kumanda +
     sunucu adı yan yana ancak çok geniş ekranda sığıyor. */
  .tb-menubtn{display:inline-flex}
  .tb-menu{
    display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;
    flex-direction:column;align-items:stretch;gap:8px;min-width:200px;
    padding:12px;border-radius:14px;
    background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow)
  }
  .tb-menu.acik{display:flex}
  .tb-menu .who{padding:2px 4px 8px;border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--txt2)}
  .tb-menu .btn{justify-content:flex-start;width:100%}
  .tb-menu .menuOnly{display:inline-flex}
}

/* 1024px altında kumanda yazıları kısalır, düğmeler daralmaz */
@media(max-width:1024px) and (min-width:701px){
  .tb-uzun{display:none}
  .tb-kisa{display:inline}
  .tb-sol #srvName{max-width:190px}
}

/* ---- İçerik güncelleme uyarısı: gövde + düğmeler ---- */
.rzKutu{display:flex;flex-direction:column;gap:9px}
.rz-govde{line-height:1.55}
.rz-dugmeler{display:flex;gap:7px;flex-wrap:wrap}
.rz-gider{opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
@media(max-width:820px){ .rz-dugmeler .btn{flex:1} }

/* ---- Giriş ekranı görseli kontrolü ---- */
.lkKutu{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.lk-bas{font-size:12.5px;color:var(--txt2);margin-bottom:3px}
.lk-sat{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;
  padding:8px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  font-size:12.5px
}
.lk-sat small{grid-column:1/-1;font-size:11.5px;color:var(--txt2)}
.lk-sat.iyi{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.06)}
.lk-sat.iyi span{color:#86efac}
.lk-sat.kotu{border-color:rgba(245,158,11,.30);background:rgba(245,158,11,.06)}
.lk-sat.kotu span{color:#fcd34d}
.lk-sat.yok span{color:var(--txt3,var(--txt2))}

/* ================= KİRALAMA TALEPLERİ ================= */
.tlListe{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.tl-kart{
  padding:16px 18px;border-radius:14px;
  background:var(--panel2,rgba(255,255,255,.025));border:1px solid var(--line);
  transition:border-color .2s
}
.tl-kart.okunmadi{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.06)}
.tl-kart.tamam{opacity:.62}
.tl-bas{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.tl-kim{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.tl-kim b{font-size:15.5px}
.tl-tur{
  padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2)
}
.tl-sag{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tl-durum{padding:3px 11px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.4px}
.tl-durum.yeni{background:rgba(59,130,246,.20);color:#93c5fd;border:1px solid rgba(59,130,246,.4)}
.tl-durum.goruldu{background:rgba(245,158,11,.16);color:#fcd34d;border:1px solid rgba(245,158,11,.34)}
.tl-durum.tamam{background:rgba(34,197,94,.16);color:#86efac;border:1px solid rgba(34,197,94,.34)}
.tl-tarih{font-size:11.5px;color:var(--txt3,var(--txt2))}
.tl-mesaj{
  margin-top:11px;padding:11px 13px;border-radius:10px;font-size:14px;line-height:1.6;
  background:rgba(0,0,0,.22);border:1px solid var(--line);white-space:pre-wrap
}
.tl-iletisim{margin-top:10px;font-size:13.5px;color:var(--txt2)}
.tl-dugmeler{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tl-bos{padding:34px;text-align:center;color:var(--txt2);font-size:14px}
@media(max-width:820px){
  .tl-sag{align-items:flex-start;flex-direction:row;gap:10px}
  .tl-dugmeler .btn{flex:1}
}

/* ==================================================================
   REHBER — YENİ BİÇİMLENDİRME (2.9.9)
   Yönetici artık yazı boyutu, renk, alıntı, açılır kutu ve görsel
   boyutu kullanabiliyor. Aşağıdaki sınıflar hem müşteri panelinde
   hem yönetimdeki canlı önizlemede kullanılır.
   ================================================================== */

/* --- başlık kademeleri --- */
.rh-baslik.rh-h1{font-size:19px;margin:18px 0 8px;letter-spacing:-.2px}
.rh-baslik.rh-h2{font-size:15.5px;margin:15px 0 6px}
.rh-baslik.rh-h3{font-size:13.5px;margin:12px 0 5px;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px}

/* --- yazı boyutu / hizası --- */
.rh-cokbuyuk{font-size:1.55em;font-weight:800;line-height:1.25}
.rh-buyuk{font-size:1.22em;font-weight:700}
.rh-kucuk{font-size:.85em;color:var(--txt2)}
.rh-orta{display:block;text-align:center}

/* --- renkler (sabit liste — serbest CSS yok) --- */
.rh-r-kirmizi{color:#f87171}
.rh-r-yesil{color:#4ade80}
.rh-r-sari{color:#facc15}
.rh-r-mavi{color:#60a5fa}
.rh-r-mor{color:#c4b5fd}
.rh-r-gri{color:var(--txt2)}

.rh-govde mark{background:rgba(250,204,21,.28);color:#fef9c3;padding:0 3px;border-radius:3px}
.rh-govde u{text-underline-offset:3px}
.rh-govde s{opacity:.7}

/* --- alıntı / ayırıcı / açılır kutu --- */
.rh-alinti{
  margin:10px 0;padding:8px 12px;border-left:3px solid var(--line2);
  background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;
  color:var(--txt2);font-style:italic
}
hr.rh-ayirac{border:none;border-top:1px solid var(--line);margin:16px 0}
.rh-acilir{
  margin:8px 0;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.02);overflow:hidden
}
.rh-acilir>summary{
  cursor:pointer;padding:9px 12px;font-weight:700;font-size:13px;
  list-style:none;user-select:none
}
.rh-acilir>summary::-webkit-details-marker{display:none}
.rh-acilir>summary::before{content:'▸ ';color:var(--txt2)}
.rh-acilir[open]>summary::before{content:'▾ '}
.rh-acilir>summary:hover{background:rgba(255,255,255,.03)}
.rh-acilir>div{padding:0 12px 11px;font-size:13px;color:var(--txt2)}

/* --- görsel boyutları --- */
.rh-galeri.boy-kucuk{max-width:280px}
.rh-galeri.boy-orta{max-width:520px}
.rh-galeri.boy-buyuk{max-width:100%}
.rh-gorsel.boy-kucuk img{max-height:180px}
.rh-gorsel.boy-orta img{max-height:320px}
.rh-gorsel.boy-buyuk img{max-height:none}

/* ==================================================================
   REHBER DÜZENLEYİCİ (yönetim paneli)
   ================================================================== */
.rho-agrup{
  align-self:center;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--txt3,var(--txt2));opacity:.75;
  padding:0 3px 0 8px;border-left:1px solid var(--line);margin-left:3px
}
.rho-arac .rho-agrup:first-child{border-left:none;margin-left:0;padding-left:0}
.rho-abtn.rho-renk{
  width:22px;height:22px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.25)
}
.rho-abtn.rho-renk:hover{transform:scale(1.12)}

/* canlı önizleme */
.rho-canli{
  margin:10px 0 4px;border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.02);overflow:hidden
}
.rho-canliBas{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:7px 11px;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--txt2)
}
.rho-canliGovde{padding:12px 14px;min-height:40px;font-size:13px}
.rho-canliGovde:empty::after{content:'Yazmaya başlayın — müşterinin göreceği hâli burada görünecek.';color:var(--txt2);font-size:12px}

/* yazım kılavuzu */
.rho-kilavuz{padding:10px 14px 14px;border-top:1px solid var(--line)}
.rho-ktab{width:100%;border-collapse:collapse;font-size:12px}
.rho-ktab th{
  text-align:left;padding:9px 6px 4px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--txt2);border-bottom:1px solid var(--line)
}
.rho-ktab td{padding:4px 6px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.04)}
.rho-ktab td:first-child{width:190px;white-space:nowrap}
.rho-ktab code{font-size:11.5px}

/* görsel kartı: boyut düğmeleri */
.rho-gboy{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.rho-gboy>span{font-size:10.5px;color:var(--txt2);margin-right:2px}
.rho-gboy .btn{padding:2px 7px;font-size:11px}
.rho-gboy .btn.secili{background:var(--acc,#6366f1);color:#fff;border-color:transparent}
.rho-gbtn{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}

/* Harita önceliği (Yönetim > İçerik) */
.concelik{display:flex;align-items:center;gap:4px}
.concelik .concnum{
  width:52px;padding:4px 6px;text-align:center;font-weight:700;font-size:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--txt)
}
.concelik .concnum::-webkit-outer-spin-button,
.concelik .concnum::-webkit-inner-spin-button{opacity:.4}

/* ==================================================================
   KURULUM SİHİRBAZI — HARİTA KAPASİTESİ KUTUSU (2.9.11)
   ------------------------------------------------------------------
   Eskiden yan yana iki kaydırak ve iki paragraf yazı vardı; hangisini
   oynatınca ne olduğu ancak okuyarak anlaşılıyordu. Artık haritanın
   bütün yerleri tek çubukta görünüyor.
   ================================================================== */
.kapasite{
  margin-top:16px;padding:14px 16px 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:14px
}
.kp-ust{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.kp-baslik{font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--txt2);text-transform:uppercase}
.kp-toplam{font-size:13px;color:var(--txt2)}
.kp-toplam b{font-size:19px;color:var(--txt);margin-right:3px}

/* --- çubuk --- */
.kp-bar{
  display:flex;height:26px;border-radius:9px;overflow:hidden;
  background:#0d1424;border:1px solid var(--line2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)
}
.kp-dilim{transition:width .28s cubic-bezier(.4,0,.2,1);min-width:0}
.kp-dilim.oyuncu{background:linear-gradient(180deg,#60a5fa,#3b82f6)}
.kp-dilim.trafik{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.kp-dilim.bos{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)
}

/* --- lejant --- */
.kp-lejant{display:flex;flex-wrap:wrap;gap:6px 16px;margin:9px 0 2px;font-size:12.5px;color:var(--txt2)}
.kp-lg{display:inline-flex;align-items:center;gap:6px}
.kp-lg.gizli{display:none}
.kp-lg b{color:var(--txt);font-size:14px}
.kp-lg i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.kp-lg i.oyuncu{background:#3b82f6}
.kp-lg i.trafik{background:#f59e0b}
.kp-lg i.bos{background:#334155}

/* --- ana ayar (trafik) --- */
.kp-ayar{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.kp-ayarUst{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.kp-ayarUst label{font-size:14px;font-weight:700;color:var(--txt);margin:0}
.kp-sayac{display:flex;align-items:center;gap:2px;background:#0d1424;border:1px solid var(--line2);border-radius:10px;padding:2px}
.kp-btn{
  width:32px;height:30px;border:none;border-radius:8px;background:transparent;
  color:var(--txt2);font-size:19px;font-weight:700;line-height:1;cursor:pointer;
  transition:background .12s,color .12s
}
.kp-btn:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.kp-btn:active{background:rgba(255,255,255,.14)}
.kp-deger{min-width:38px;text-align:center;font-size:17px;font-weight:800;color:var(--txt)}

/* --- hızlı seçim --- */
.kp-hizli{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kp-hb{
  padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt2);
  transition:all .12s
}
.kp-hb:hover{background:rgba(255,255,255,.09);color:var(--txt);border-color:var(--line2)}
.kp-hb.sec{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.55);color:#fcd34d}

/* --- gelişmiş (oyuncu slotu) --- */
.kp-gelismis{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.kp-gelismis>summary{
  cursor:pointer;list-style:none;padding:8px 0;font-size:12.5px;font-weight:700;
  color:var(--txt3,var(--txt2));user-select:none
}
.kp-gelismis>summary::-webkit-details-marker{display:none}
.kp-gelismis>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.kp-gelismis[open]>summary::before{content:'▾ '}
.kp-gelismis>summary:hover{color:var(--txt)}
.kp-gelismis .hint{margin-bottom:10px}

/* --- seçili araç bandı --- */
.wz-secilibar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;margin:0;
  background:rgba(34,197,94,.10);border-bottom:1px solid rgba(34,197,94,.22)
}
.wz-secilibar b{font-size:13px;color:#86efac}
.wz-secilibar span{font-size:12px;color:var(--txt2);flex:1;min-width:120px}

@media(max-width:560px){
  .kapasite{padding:12px 12px 4px}
  .kp-ayarUst{flex-wrap:wrap}
  .kp-hb{padding:5px 10px;font-size:12px}
}
.kp-doldur{
  display:inline-block;margin-top:9px;padding:6px 12px;border-radius:9px;
  background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.4);
  color:#93c5fd;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .12s
}
.kp-doldur:hover{background:rgba(59,130,246,.24);color:#bfdbfe}
.kp-doldur.gizli{display:none}

/* Canlı yönetim: hava geçişi sürerken çipin üstünde nabız gibi işaret.
   AssettoServer havayı 1 sn'lik döngüsünde değiştiriyor; o boşlukta
   "hiçbir şey olmuyor" hissi vermesin diye. */
.cip.geciyor{position:relative}
.cip.geciyor::after{
  content:'';position:absolute;right:6px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:#fbbf24;
  animation:cipNabiz 1s ease-in-out infinite
}
.cip.geciyor{padding-right:20px}
@keyframes cipNabiz{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.cip.geciyor::after{animation:none;opacity:.9}}

/* ==================================================================
   LOGO KARTVİZİTİ  (2.9.11)
   ------------------------------------------------------------------
   Sayfanın altına kalıcı bir footer koymak üst/alt dengesini bozuyor
   ve mobilde yer yiyordu. Onun yerine marka bilgisi logonun üstüne
   gelince açılan küçük bir kartta duruyor: normalde görünmez, yer
   kaplamaz, tasarımı hiç etkilemez.

   En alttaki imza satırı bir easter egg: kart 0,9 saniye açık
   kaldıktan sonra usulca beliriyor. Hemen geçen biri hiç görmez.
   ================================================================== */
.logoSar{position:relative;display:flex;align-items:center}
.logoKart{
  position:absolute;top:calc(100% + 10px);left:0;z-index:60;
  min-width:250px;padding:12px 14px 10px;
  background:rgba(14,19,29,.97);border:1px solid var(--line2);border-radius:13px;
  box-shadow:0 14px 38px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  pointer-events:none
}
.logoSar:hover .logoKart,.logoSar:focus-within .logoKart{
  opacity:1;visibility:visible;transform:none
}
.logoKart .lk-ad{
  font-size:15px;font-weight:900;letter-spacing:1.4px;
  background:linear-gradient(90deg,#a78bfa,#60a5fa);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.logoKart .lk-alt{font-size:11.5px;color:var(--txt2);margin-top:3px;line-height:1.45}
.logoKart .lk-cizgi{height:1px;background:var(--line);margin:9px 0 8px}
.logoKart .lk-satir{
  display:flex;justify-content:space-between;gap:14px;
  font-size:11.5px;color:var(--txt3,var(--txt2));padding:2px 0
}
.logoKart .lk-satir b{color:var(--txt);font-weight:700}

/* --- gizli imza --- */
.logoKart .lk-imza{
  margin-top:9px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.08);
  font-size:10px;letter-spacing:2.6px;text-align:right;
  color:rgba(255,255,255,.20);font-weight:600;
  opacity:0
}
.logoSar:hover .lk-imza,.logoSar:focus-within .lk-imza{
  animation:imzaBelir 1.1s ease .85s forwards
}
@keyframes imzaBelir{
  from{opacity:0;letter-spacing:6px}
  to  {opacity:1;letter-spacing:2.6px}
}
/* Üstüne gelirse biraz daha okunur olsun — merak edip bakan görsün */
.logoKart .lk-imza:hover{color:rgba(167,139,250,.75);transition:color .3s}

@media(max-width:700px){
  /* Telefonda "hover" yok; kart dokununca da açılmasın diye kapalı */
  .logoKart{display:none}
}
@media (prefers-reduced-motion: reduce){
  .logoKart{transition:none}
  .logoSar:hover .lk-imza,.logoSar:focus-within .lk-imza{animation:none;opacity:1}
}
/* Talep kartı: numara doğrulama rozeti */
.tl-tur.tl-ok{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.3)}
.tl-tur.tl-suphe{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(245,158,11,.3)}

/* ==================================================================
   SİHİRBAZ — HARİTA VARYASYONU (2.9.13)
   ------------------------------------------------------------------
   Aynı haritanın 32 ve 40 slotluk varyasyonları olabiliyor. Sihirbaz
   eskiden sessizce ilkini alıyor, müşteri "40 slotluk pistte neden
   14 trafik" diye haklı olarak şaşırıyordu. Artık hangi varyasyonun
   kaç araç aldığı ekranda yazıyor ve tek tıkla değişiyor.
   ================================================================== */
.wz-varBas{margin:12px 0 8px;font-size:12.5px;color:var(--txt2)}
.wz-varBas b{color:var(--txt)}
.wz-varlar{display:flex;flex-wrap:wrap;gap:8px}
.wz-var{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 13px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:all .13s
}
.wz-var:hover{background:rgba(255,255,255,.07);border-color:var(--line2)}
.wz-var.sel{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.55)}
.wz-var b{font-size:13px;color:var(--txt)}
.wz-varSlot{
  font-size:12px;font-weight:800;color:#93c5fd;
  background:rgba(59,130,246,.16);padding:2px 8px;border-radius:99px
}
.wz-var.sel .wz-varSlot{background:rgba(59,130,246,.3);color:#dbeafe}
.wz-varAi{font-size:11.5px;color:#fcd34d}
.wz-varEn{
  font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#86efac;background:rgba(34,197,94,.15);padding:2px 7px;border-radius:99px
}

/* ==================================================================
   GİRİŞ EKRANI GÖRSELİ TEŞHİSİ (2.9.14)
   Üç aşama ayrı bloklarda: adres · sunucu · ne yapmalı.
   ================================================================== */
.lk-blok{
  margin-top:10px;padding:10px 12px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--line)
}
.lk-blok.son{background:rgba(96,165,250,.07);border-color:rgba(96,165,250,.28)}
.lk-baslik{
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--txt2);margin-bottom:8px
}
.lk-sat.orta{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.08)}
.lk-sat.orta span{color:#93c5fd}
.lk-sat b a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.lk-sat b a:hover{color:#93c5fd}
.lk-sat small a{color:#93c5fd}
.lk-yap{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--txt)}
.lk-yap div{line-height:1.55}

/* ==================================================================
   KURULUM SIHIRBAZI 2.9.14 — KUTU IZGARASI, TIKLANIR ADIMLAR
   ------------------------------------------------------------------
   1) Harita ve varyasyon secimi artik "kutu kutu": her secenek kendi
      onizleme fotografiyla bir kart.
   2) Adim rozetleri tiklanabilir; tamamlanan ✓, eksik olan ! aliyor.
   3) 4. adimda sunucu adi/sifre en ustte ve vurgulu.
   ================================================================== */

/* --- Kaydirilabilir izgara kabi (eski .picker'in yerine) --- */
.wz-izgara{
  max-height:340px;overflow-y:auto;padding:10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)
}
.wz-izgara::-webkit-scrollbar{width:10px}
.wz-izgara::-webkit-scrollbar-thumb{background:#2b3448;border-radius:8px}
.wz-izgaraNot{font-size:12px;color:var(--txt3);margin:0 2px 10px}
.wz-izgaraBos{padding:22px 12px;text-align:center;color:var(--txt3);font-size:13px}

/* --- Harita kartlari --- */
.wz-hgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.wz-hkart{
  cursor:pointer;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:border-color .13s,transform .13s,background .13s
}
.wz-hkart:hover{background:rgba(255,255,255,.06);border-color:var(--line2);transform:translateY(-2px)}
.wz-hkart.sel{border-color:rgba(34,197,94,.75);background:rgba(34,197,94,.10);
  box-shadow:0 0 0 1px rgba(34,197,94,.35) inset}

.wz-hres{position:relative;aspect-ratio:16/10;background:#161c28;overflow:hidden;display:block}
.wz-hres img{width:100%;height:100%;object-fit:cover;display:block}
.wz-hres img.cizim,.wz-hres.cizim img{object-fit:contain;padding:6px}
.wz-honay{
  position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  background:#22c55e;color:#06240f;font-size:13px;font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.45)
}
.wz-hrozet{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.wz-hetiket{
  padding:2px 7px;border-radius:99px;font-size:9.5px;font-weight:900;letter-spacing:.4px;
  background:rgba(15,20,30,.82);border:1px solid var(--line2);color:var(--txt2);
  backdrop-filter:blur(3px)
}
.wz-hetiket.sec{border-color:rgba(34,197,94,.6);color:#86efac}
.wz-hetiket.one{border-color:rgba(250,204,21,.55);color:#fde047}
.wz-hetiket.onr{border-color:rgba(34,197,94,.45);color:#86efac}

.wz-halt{padding:8px 9px 9px}
.wz-halt b{display:block;font-size:12.5px;color:var(--txt);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-halt small{display:block;margin-top:3px;font-size:11px;color:var(--txt3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Varyasyon kartlari (biraz daha buyuk, tam boyut gorsel) --- */
.wz-vgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));margin-top:4px}
.wz-vkart{
  cursor:pointer;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:border-color .13s,transform .13s,background .13s
}
.wz-vkart:hover{background:rgba(255,255,255,.06);border-color:var(--line2);transform:translateY(-2px)}
.wz-vkart.sel{border-color:rgba(96,165,250,.8);background:rgba(96,165,250,.12);
  box-shadow:0 0 0 1px rgba(96,165,250,.4) inset}
.wz-vkart .wz-hres{aspect-ratio:16/9}
.wz-vgenis{
  position:absolute;bottom:6px;right:6px;padding:3px 8px;border-radius:99px;
  font-size:9.5px;font-weight:900;letter-spacing:.4px;
  background:rgba(250,204,21,.9);color:#3b2c00
}
.wz-vslot{
  display:inline-block;padding:1px 8px;border-radius:99px;font-weight:800;font-size:11px;
  background:rgba(148,163,184,.16);border:1px solid var(--line2);color:var(--txt2)
}
.wz-vkart.sel .wz-vslot{background:rgba(59,130,246,.3);border-color:rgba(96,165,250,.5);color:#dbeafe}

/* --- Tiklanir adim rozetleri --- */
.steps .step.tiklanir{cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .13s,background .13s,color .13s}
.steps .step.tiklanir:hover{background:rgba(255,255,255,.07);border-color:var(--line2);color:var(--txt)}
.steps .step .stepNo{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:99px;font-size:10.5px;font-weight:900;
  background:rgba(148,163,184,.18);color:var(--txt2)
}
.steps .step.on .stepNo{background:var(--acc);color:#fff}
.steps .step.done .stepNo{background:rgba(34,197,94,.28);color:#86efac}
.steps .step .stepIs{font-size:11px;font-weight:900;color:#86efac}
.steps .step .stepIs.uy{color:#fcd34d}
.steps .step.eksik{border-color:rgba(245,158,11,.45);color:#fcd34d}
.steps .step.eksik .stepNo{background:rgba(245,158,11,.22);color:#fcd34d}

/* --- 4. adim: sunucu bilgileri vurgusu --- */
.wz-onemli{
  border:1px solid rgba(255,68,56,.38);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,68,56,.09),rgba(255,68,56,.03));
  padding:14px 14px 4px;margin:0 0 18px
}
.wz-onemliBas{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.wz-onemliIk{
  flex:none;width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:19px;
  background:rgba(255,68,56,.16);border:1px solid rgba(255,68,56,.35)
}
.wz-onemliBas b{display:block;font-size:14.5px;color:var(--txt)}
.wz-onemliBas small{display:block;margin-top:2px;font-size:11.5px;color:var(--txt3)}
.wz-buyukAlan input{font-size:15px;padding:11px 12px}
.wz-buyukAlan label{font-size:12.5px}
.wz-zorunlu{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-size:9.5px;font-weight:900;letter-spacing:.3px;
  background:rgba(255,68,56,.16);border:1px solid rgba(255,68,56,.4);color:#fca5a5
}
.wz-istege{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:99px;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;
  background:rgba(148,163,184,.12);border:1px solid var(--line2);color:var(--txt3)
}

@media (max-width:560px){
  .wz-hgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .wz-vgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
  .wz-izgara{max-height:60vh;padding:8px}
  .steps .step.tiklanir{padding:6px 11px;font-size:11.5px}
  .wz-onemli{padding:12px 11px 2px}
}
.wz-sifreSat{display:flex;gap:8px;align-items:stretch}
.wz-sifreSat input{flex:1;min-width:0}
.wz-zar{flex:none;padding:0 13px;font-size:16px;line-height:1}

/* ==================================================================
   SUNUCU ACIKLAMASI EDITORU (Content Manager) — 2.9.15
   ================================================================== */
.acKutu{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px;margin-bottom:6px}
.acArac{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;position:relative}
.acBtn{
  min-width:32px;height:30px;padding:0 9px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--txt);
  font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center
}
.acBtn:hover{background:rgba(255,255,255,.1);border-color:var(--txt3)}
.acRenkMenu{
  position:absolute;top:34px;left:0;z-index:40;min-width:170px;padding:6px;
  border-radius:10px;background:#0f1521;border:1px solid var(--line2);
  box-shadow:0 12px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:3px
}
.acRenkBtn{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;
  background:transparent;border:0;color:var(--txt);font-size:12.5px;text-align:left;width:100%
}
.acRenkBtn:hover{background:rgba(255,255,255,.08)}
.acRenkBtn i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.25);flex:none}

.acAlan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acYari{min-width:0;display:flex;flex-direction:column}
.acEtiket{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--txt3);margin-bottom:5px}
.acEtiket small{font-weight:600;letter-spacing:0;text-transform:none}
.acYari textarea{
  width:100%;flex:1;min-height:220px;resize:vertical;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.55
}
.acOnizle{
  flex:1;min-height:220px;overflow:auto;padding:12px 14px;border-radius:10px;
  background:#101319;border:1px solid var(--line2);
  color:#dfe5ee;font-size:13px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word
}
/* Content Manager baglantilari KENDI rengiyle cizer; [color=..] icinde
   olsalar bile mavi/altcizgili gorunurler. Onizleme de oyle yapiyor. */
.acOnizle a{color:#7dd3fc;text-decoration:underline}
.acOnizle .acBos{color:var(--txt3);font-style:italic;white-space:normal}
/* Content Manager gorseli KENDI boyutunda, kendi satirinda gosterir
   ([img=...] icindeki yazi ekranda GORUNMEZ, sadece ipucu olur).
   Onizleme de birebir oyle davraniyor. */
.acImg{max-width:100%;height:auto;border-radius:4px;display:block;margin:4px 0}
.acImgSar{display:block}
.acImgYok{
  display:block;margin:4px 0;padding:14px;border-radius:6px;text-align:center;
  background:rgba(148,163,184,.08);border:1px dashed var(--line2);
  color:var(--txt3);font-size:11.5px;white-space:normal
}
.acAlt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.acSay{font-size:11.5px;color:var(--txt3);margin-left:auto}
.acSay.uzun{color:#fca5a5;font-weight:700}

.lk-kesit{
  margin-top:7px;padding:8px 10px;border-radius:8px;overflow-x:auto;
  background:#0d1017;border:1px solid var(--line2);
  font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.5;
  color:#cbd5e1;white-space:pre
}

@media (max-width:820px){
  .acAlan{grid-template-columns:1fr}
  .acYari textarea,.acOnizle{min-height:170px}
}
.lk-kesitSar{margin-top:7px}
.lk-kesitSar summary{
  cursor:pointer;font-size:11.5px;font-weight:700;color:var(--txt3);
  padding:3px 0;list-style:none;user-select:none
}
.lk-kesitSar summary::-webkit-details-marker{display:none}
.lk-kesitSar summary::before{content:'▸ ';color:var(--txt3)}
.lk-kesitSar[open] summary::before{content:'▾ '}
.lk-kesitSar summary:hover{color:var(--txt2)}

/* ---- Ham extra_cfg.yml goruntuleyici ---- */
.dg-yol{font-size:11.5px;color:var(--txt3);margin:2px 0 6px;word-break:break-all}
.dg-kutu{
  max-height:420px;overflow:auto;border-radius:9px;
  background:#0d1017;border:1px solid var(--line2);
  font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.6
}
.dg-sat{display:flex;gap:0;white-space:pre}
.dg-sat i{
  flex:none;width:46px;padding:0 9px 0 0;text-align:right;font-style:normal;
  color:#48505f;background:#101420;border-right:1px solid var(--line2);user-select:none
}
.dg-sat span{padding:0 10px;color:#cbd5e1;flex:1;min-width:0}
.dg-sat.vur{background:rgba(34,197,94,.12)}
.dg-sat.vur span{color:#86efac;font-weight:700}
.dg-sat.ay{background:rgba(239,68,68,.18)}
.dg-sat.ay span{color:#fca5a5;font-weight:800}
.dg-sat.olu span{color:#4b5563;text-decoration:line-through}
.lk-dosyaBtn{color:#7dd3fc;text-decoration:underline;cursor:pointer}

/* ==================================================================
   İŞLEM KAYDI (2.9.16)
   ------------------------------------------------------------------
   Sade ama detaylı: üstte tür filtreleri + gün seçimi, altta zaman
   çizgisi. Ayar değişiklikleri "eski → yeni" tablosu olarak açılır.
   ================================================================== */
.ky-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.ky-cipler{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 320px;min-width:0}
.ky-sag{display:flex;gap:7px;align-items:center;flex-wrap:nowrap;flex:0 1 auto}
.ky-sec{width:auto;min-width:120px}
.ky-ara{width:190px;min-width:120px;max-width:100%}
.ky-cip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt2)
}
.ky-cip:hover{background:rgba(255,255,255,.09);border-color:var(--line2)}
.ky-cip i{font-style:normal;font-size:11px;opacity:.75}
.ky-cip.sel{background:rgba(255,68,56,.16);border-color:var(--acc);color:#fff}
.ky-cip.kirmizi.sel{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.6)}
.ky-cip.yesil.sel{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55)}

.ky-ozet{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.ky-kutu{
  flex:1 1 130px;padding:10px 12px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line)
}
.ky-kutu b{display:block;font-size:20px;line-height:1.1;color:var(--txt)}
.ky-kutu span{display:block;margin-top:2px;font-size:11.5px;color:var(--txt3)}
.ky-not{flex:1 1 100%;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.55}
.ky-not.iyi{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.3);color:#86efac}
.ky-not.kotu{background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.32);color:#fca5a5}

.ky-gun{
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--txt3);margin:14px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line)
}
.ky-gun:first-child{margin-top:0}
.ky-sat{
  display:flex;gap:11px;padding:9px 11px;border-radius:10px;margin-bottom:6px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  border-left:3px solid var(--line2)
}
.ky-sat.kirmizi{border-left-color:#ef4444;background:rgba(239,68,68,.06)}
.ky-sat.sari{border-left-color:#fbbf24}
.ky-sat.mavi{border-left-color:#60a5fa}
.ky-sat.yesil{border-left-color:#4ade80}
.ky-sat.mor{border-left-color:#c084fc}
.ky-ik{flex:none;font-size:16px;line-height:1.3;width:22px;text-align:center}
.ky-govde{flex:1;min-width:0}
.ky-ust{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ky-ust b{font-size:13px;color:var(--txt);font-weight:700}
.ky-zaman{margin-left:auto;font-size:11px;color:var(--txt3);white-space:nowrap}
.ky-kim{font-size:11.5px;color:var(--txt3);margin-top:2px}
.ky-kay{
  display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:800;
  background:rgba(148,163,184,.14);border:1px solid var(--line2);color:var(--txt3)
}
.ky-kay.sunucu{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fca5a5}
.ky-kay.yonetici{background:rgba(96,165,250,.15);border-color:rgba(96,165,250,.4);color:#bfdbfe}
.ky-kay.musteri{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);color:#86efac}
.ky-detay{font-size:12px;color:var(--txt2);margin-top:5px;line-height:1.5}
.ky-fark{margin-top:7px}
.ky-fark summary{
  cursor:pointer;font-size:11.5px;font-weight:700;color:#7dd3fc;
  list-style:none;user-select:none;padding:2px 0
}
.ky-fark summary::-webkit-details-marker{display:none}
.ky-fark summary::before{content:'▸ '}
.ky-fark[open] summary::before{content:'▾ '}
.ky-fark table{width:100%;border-collapse:collapse;margin-top:5px;font-size:11.5px}
.ky-fark td{padding:3px 7px;border-top:1px solid var(--line);vertical-align:top}
.ky-fark td:first-child{color:var(--txt3);white-space:nowrap;width:1%}
.ky-fark td.e{color:#fca5a5;word-break:break-word}
.ky-fark td.ok{color:var(--txt3);width:1%;text-align:center}
.ky-fark td.y{color:#86efac;font-weight:600;word-break:break-word}
.ky-farkNot td{color:var(--txt3);font-style:italic}
.ky-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

@media(max-width:640px){
  .ky-ara{width:100%}
  .ky-sag{width:100%}
  .ky-sec{flex:1}
  .ky-kutu{flex:1 1 100px;padding:8px 10px}
  .ky-kutu b{font-size:17px}
  .ky-zaman{margin-left:0}
}

/* ==================================================================
   MÜŞTERİ PAKETLERİ (Kafe / Bireysel / …) — 2.9.18
   ================================================================== */

/* ---- Yönetim: paket kartları ---- */
.planUyari{
  padding:12px 14px;border-radius:11px;margin-bottom:16px;font-size:12.5px;line-height:1.65;
  background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.3);color:#bfdbfe
}
.planUyari b{color:#dbeafe}
.planListe{display:flex;flex-direction:column;gap:10px}
.planKart{
  border-radius:13px;overflow:hidden;background:var(--bg2);
  border:1px solid var(--line);border-left:4px solid var(--pl-renk,#94a3b8)
}
.planKart.acik{border-color:var(--line2);border-left-color:var(--pl-renk,#94a3b8)}
.pk-bas{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;user-select:none}
.pk-bas:hover{background:rgba(255,255,255,.03)}
.pk-ikon{font-size:22px;line-height:1;flex:none}
.pk-ad{flex:1;min-width:0}
.pk-ad b{display:block;font-size:15px;color:var(--txt)}
.pk-ad small{display:block;margin-top:2px;font-size:11.5px;color:var(--txt3)}
.pk-vars{
  flex:none;padding:2px 9px;border-radius:99px;font-size:9.5px;font-weight:900;letter-spacing:.4px;
  background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);color:#86efac
}
.pk-ok{flex:none;color:var(--txt3);font-size:13px}
.pk-govde{padding:4px 15px 15px;border-top:1px solid var(--line)}
.pk-bolum{padding:14px 0;border-bottom:1px dashed var(--line)}
.pk-bolum:last-child{border-bottom:0}
.pk-baslik{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3);margin-bottom:4px}
.pk-not{font-size:12px;color:var(--txt3);line-height:1.6;margin-bottom:10px}
.pk-not b{color:var(--txt2)}
.pk-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pk-alan{margin:0}
.pk-alan.kisa{max-width:130px}
.pk-alan.genis{grid-column:1/-1}
.pk-alan input[type=color]{height:38px;padding:3px;cursor:pointer}

.pk-yetkiler{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pk-yetki{
  display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  padding:9px 11px;border-radius:9px;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.22)
}
.pk-yetki.acik{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.28)}
.pk-yetki input{margin-top:2px;flex:none}
.pk-yetki b{display:block;font-size:12.5px;color:var(--txt)}
.pk-yetki small{display:block;margin-top:1px;font-size:11px;color:var(--txt3);line-height:1.45}

.pk-icerik{margin-top:12px;padding:11px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid var(--line)}
.pk-icerikUst{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.pk-icerikUst b{font-size:13px}
.pk-icerikUst label{display:inline-flex;gap:5px;align-items:center;cursor:pointer;color:var(--txt2)}
.pk-say{margin-left:auto;font-size:11.5px;color:var(--txt3)}
.pk-ara{margin-top:9px;width:100%}
.pk-secim{
  display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  max-height:230px;overflow-y:auto;margin-top:8px;padding-right:4px
}
.pk-oge{
  display:flex;gap:7px;align-items:center;cursor:pointer;padding:5px 8px;border-radius:7px;
  font-size:12px;background:rgba(255,255,255,.03);border:1px solid transparent
}
.pk-oge:hover{background:rgba(255,255,255,.07)}
.pk-oge.sel{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#86efac}
.pk-oge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-bos{margin-top:9px;font-size:12px;color:var(--txt3)}
.pk-hizli{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.pk-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px}
.pk-id{font-size:11px;color:var(--txt3);margin-left:auto}

.planAlt{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px}
.planDurum{font-size:12px;color:var(--txt3)}
.planDurum.iyi{color:#86efac;font-weight:700}
.planDurum.kotu{color:#fca5a5;font-weight:700}

/* ---- Müşteri kartında paket seçimi ---- */
.planSec{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.planSecKart{
  cursor:pointer;padding:11px;border-radius:11px;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-top:3px solid var(--pl-renk,#94a3b8);transition:background .12s,border-color .12s
}
.planSecKart:hover{background:rgba(255,255,255,.07)}
.planSecKart.sel{background:rgba(255,255,255,.09);border-color:var(--pl-renk,#94a3b8);
  box-shadow:0 0 0 1px var(--pl-renk,#94a3b8) inset}
.ps-ikon{display:block;font-size:22px;line-height:1;margin-bottom:5px}
.planSecKart b{display:block;font-size:13px;color:var(--txt)}
.planSecKart small{display:block;margin-top:3px;font-size:10.5px;color:var(--txt3);line-height:1.4}
.planOzelSar{margin:14px 0 4px;padding:11px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.planOzelSar summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--txt2);list-style:none;user-select:none}
.planOzelSar summary::-webkit-details-marker{display:none}
.planOzelSar summary::before{content:'▸ '}
.planOzelSar[open] summary::before{content:'▾ '}

.muKota{margin:10px 0 2px;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.muKota.bitti{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07)}
.mk-bar{height:6px;border-radius:99px;background:rgba(148,163,184,.2);overflow:hidden}
.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,#4ade80,#fbbf24 70%,#ef4444);border-radius:99px}
.mk-yazi{margin-top:6px;font-size:12px;color:var(--txt2)}
.mk-kilit{color:#fca5a5;font-weight:700}

/* ---- Müşteri listesi: paket rozeti + kota çubuğu ---- */
.mk-plan{
  flex:none;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:800;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid var(--pl-renk,#94a3b8);color:var(--pl-renk,#94a3b8)
}
.mk-kota{display:flex;align-items:center;gap:9px;margin:8px 0 0;font-size:11px;color:var(--txt3)}
.mk-kota .mk-kbar{flex:1;height:5px;border-radius:99px;background:rgba(148,163,184,.18);overflow:hidden;min-width:60px}
.mk-kota .mk-kbar i{display:block;height:100%;background:#4ade80;border-radius:99px}
.mk-kota.azaldi .mk-kbar i{background:#fbbf24}
.mk-kota.bitti .mk-kbar i{background:#ef4444}
.mk-kota.bitti span{color:#fca5a5;font-weight:700}

/* ---- Müşteri panelindeki paket şeridi ---- */
.paketSerit{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-radius:11px;margin-bottom:14px;font-size:12.5px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-left:3px solid var(--pl-renk,#94a3b8)
}
.paketSerit.azaldi{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35)}
.paketSerit.bitti{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.4)}
.ps-rozet{
  padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--pl-renk,#94a3b8);color:var(--pl-renk,#94a3b8)
}
.ps-bar{flex:0 1 160px;height:6px;border-radius:99px;background:rgba(148,163,184,.2);overflow:hidden;min-width:80px}
.ps-bar i{display:block;height:100%;background:#4ade80;border-radius:99px}
.paketSerit.azaldi .ps-bar i{background:#fbbf24}
.paketSerit.bitti .ps-bar i{background:#ef4444}
.ps-metin{font-weight:700;color:var(--txt2)}
.ps-not{font-size:11.5px;color:var(--txt3)}
.ps-not b{color:#fca5a5}
.ps-uyari{flex:1 1 100%;font-size:12px;color:#fca5a5;font-weight:700}

@media(max-width:640px){
  .pk-grid{grid-template-columns:1fr}
  .pk-yetkiler{grid-template-columns:1fr}
  .pk-secim{grid-template-columns:1fr 1fr;max-height:190px}
  .planSec{grid-template-columns:1fr 1fr}
  .paketSerit{gap:8px;padding:9px 11px}
  .ps-bar{flex:1 1 100%}
}

/* ==================================================================
   2.9.19 — PAKET SİSTEMİ ARAYÜZÜ
   ------------------------------------------------------------------
   1) Yönetim panelindeki paket düzenleyici (çipli basit ayarlar)
   2) Müşteri panelindeki kilitli sekme perdesi
   3) Yükseltme penceresi
   ================================================================== */

/* --- 1a) Yeni paket ekleme kartı --------------------------------- */
.planKart.plYeni{
  border-style:dashed;border-color:var(--line2);background:transparent;
  padding:16px 18px;display:block;transition:border-color .2s,box-shadow .2s;
}
.planKart.plYeni.parla{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18)}
.ply-bas{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ply-bas>span{font-size:24px}
.ply-bas b{display:block;font-size:14.5px}
.ply-bas small{display:block;color:var(--txt3);font-size:12px;margin-top:2px}
.ply-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ply-sab{
  text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;cursor:pointer;color:var(--txt);transition:border-color .15s,transform .1s;
}
.ply-sab:hover{border-color:#a78bfa;transform:translateY(-1px)}
.ply-ikon{font-size:18px;display:block;margin-bottom:5px}
.ply-sab b{display:block;font-size:13px}
.ply-sab small{display:block;color:var(--txt3);font-size:11px;margin-top:3px;line-height:1.35}

/* --- 1b) Kart başlığındaki ek rozetler --------------------------- */
.pk-musAd{
  display:block;font-size:11px;color:#a78bfa;font-weight:600;margin-top:1px;
}
.pk-kapali{
  font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 7px;border-radius:6px;
  background:rgba(148,163,184,.16);color:var(--txt3);
}

/* --- 1c) Çipli ayar satırı (süre / kapasite) --------------------- */
.pk-cipSatir{
  border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:10px;
  background:var(--panel2);
}
.pk-cipEt{
  font-size:12.5px;font-weight:700;color:var(--txt2);margin-bottom:9px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.pk-cipDeger{
  margin-left:auto;font-size:12px;font-weight:800;color:var(--pl-renk,#a78bfa);
  background:rgba(148,163,184,.12);padding:2px 9px;border-radius:99px;
}
.pk-cipler{display:flex;flex-wrap:wrap;gap:6px}
.pk-cip{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--txt2);cursor:pointer;
  transition:all .13s;line-height:1.25;
}
.pk-cip:hover{border-color:var(--pl-renk,#a78bfa);color:var(--txt)}
.pk-cip.sel{
  background:var(--pl-renk,#a78bfa);border-color:var(--pl-renk,#a78bfa);
  color:#0b1020;font-weight:800;
}
.pk-cip.bos{border-style:dashed}
.pk-cip b{display:block;font-size:12.5px}
.pk-cip i{display:block;font-style:normal;font-size:10.5px;opacity:.7;margin-top:2px}
.pk-cipElle{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.pk-cipElle label{font-size:11.5px;color:var(--txt3)}
.pk-cipElle input{
  width:88px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;color:var(--txt);font-size:12.5px;
}
.pk-cipElle span{font-size:11.5px;color:var(--txt3)}
.pk-cipNot{font-size:11.5px;color:var(--txt3);margin-top:9px;line-height:1.45}
.pk-cipNot b{color:var(--txt2)}

/* --- 1d) 24 saatlik görsel şerit --------------------------------- */
.pk-saatSerit{display:flex;gap:2px;margin-top:11px;height:26px}
.pk-saatSerit i{
  flex:1;border-radius:3px;position:relative;font-style:normal;
  display:flex;align-items:flex-end;justify-content:center;
}
.pk-saatSerit i.ac{background:rgba(74,222,128,.32)}
.pk-saatSerit i.kapali{background:rgba(148,163,184,.13)}
.pk-saatSerit u{
  text-decoration:none;font-size:9px;color:var(--txt3);position:absolute;bottom:-13px;
}
.pk-saat{padding-bottom:22px}

/* --- 1e) Müşteri önizlemesi -------------------------------------- */
.pk-onizleme{margin-top:12px}
.pk-onzEt{font-size:11px;color:var(--txt3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.pk-onzKart{
  display:flex;gap:11px;align-items:center;padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--pl-renk) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--pl-renk) 40%,transparent);
}
.pk-onzIkon{font-size:22px}
.pk-onzKart b{font-size:13.5px}
.pk-onzKart small{display:block;color:var(--txt2);font-size:11.5px;margin-top:2px;line-height:1.4}
.pk-onzFiyat{
  margin-left:8px;font-size:11px;font-weight:800;color:var(--pl-renk);
  background:rgba(255,255,255,.06);padding:2px 8px;border-radius:99px;
}

/* --- 1f) Merdiven bilgisi ---------------------------------------- */
.pk-merdiven{
  margin-top:11px;font-size:12px;color:var(--txt2);line-height:1.7;
  padding:9px 12px;border-radius:10px;background:rgba(148,163,184,.08);
}
.pk-merdiven.ust{background:rgba(250,204,21,.09);color:#fde68a}
.pk-ustEtiket{
  display:inline-block;margin-left:6px;padding:2px 9px;border-radius:99px;
  background:rgba(167,139,250,.16);color:#c4b5fd;font-weight:700;font-size:11.5px;
}

/* --- 1g) Müşteri kartındaki paket seçiminde ikinci ad ------------ */
.ps-mus{
  display:block;font-style:normal;font-size:10.5px;color:#a78bfa;
  font-weight:600;margin-top:2px;
}

/* --- 2) Kilitli sekme -------------------------------------------- */
#tabs button.paketKapali{opacity:.62}
#tabs button.paketKapali:hover{opacity:.9}
.kilitRoz{margin-left:5px;font-size:11px}
section[data-panel].kilitli > *:not(.kilitPerde){display:none !important}
.kilitPerde{display:flex;justify-content:center;padding:26px 12px}
.kilit-kutu{
  max-width:460px;width:100%;text-align:center;padding:28px 24px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:16px;
}
.kilit-ikon{font-size:38px;line-height:1;margin-bottom:10px;opacity:.9}
.kilit-kutu h3{margin:0 0 8px;font-size:16.5px}
.kilit-kutu p{margin:0;color:var(--txt2);font-size:13px;line-height:1.6}
.kilit-liste{
  list-style:none;padding:0;margin:16px 0 0;text-align:left;
  display:grid;gap:7px;
}
.kilit-liste li{
  font-size:12.5px;color:var(--txt2);padding-left:22px;position:relative;line-height:1.5;
}
.kilit-liste li::before{content:'✓';position:absolute;left:0;color:#4ade80;font-weight:800}
.kilit-liste b{color:var(--txt)}
.kilit-btn{margin-top:18px}

/* --- 3) Yükseltme şeridi düğmesi + penceresi --------------------- */
.ps-yukselt{
  margin-left:auto;background:linear-gradient(135deg,#a78bfa,#6366f1);border:0;
  color:#fff;font-weight:800;font-size:12px;padding:7px 14px;border-radius:9px;
  cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(99,102,241,.35);
  transition:transform .12s,box-shadow .12s;
}
.ps-yukselt:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.5)}
.yu-box{max-width:640px}
.yu-su{font-size:12.5px;color:var(--txt2);margin-bottom:6px}
.yu-neden{
  font-size:12.5px;color:#c4b5fd;background:rgba(167,139,250,.1);
  padding:8px 11px;border-radius:9px;margin-bottom:12px;
}
.yu-liste{display:grid;gap:10px;margin:12px 0}
.yu-kart{
  border:1px solid var(--line);border-radius:13px;padding:14px 15px;cursor:pointer;
  background:var(--panel2);transition:border-color .15s,background .15s;
}
.yu-kart:hover{border-color:var(--pl-renk,#a78bfa)}
.yu-kart.sel{
  border-color:var(--pl-renk,#a78bfa);
  background:color-mix(in srgb,var(--pl-renk) 9%,var(--panel2));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pl-renk) 28%,transparent);
}
.yu-bas{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.yu-ikon{font-size:20px}
.yu-bas b{font-size:14.5px}
.yu-fiyat{
  margin-left:auto;font-size:12px;font-weight:800;color:var(--pl-renk,#a78bfa);
  background:rgba(255,255,255,.06);padding:3px 10px;border-radius:99px;
}
.yu-ac{margin:7px 0 0;font-size:12.5px;color:var(--txt2);line-height:1.5}
.yu-kaz{list-style:none;padding:0;margin:11px 0 0;display:grid;gap:6px}
.yu-kaz li{font-size:12.5px;color:var(--txt2);padding-left:21px;position:relative;line-height:1.5}
.yu-kaz li::before{content:'✓';position:absolute;left:0;color:#4ade80;font-weight:800}
.yu-kaz b{color:var(--txt)}
.yu-notAlan{display:block;margin-top:12px}
.yu-notAlan span{display:block;font-size:12px;color:var(--txt3);margin-bottom:5px}
.yu-notAlan textarea{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;color:var(--txt);font-size:13px;font-family:inherit;resize:vertical;
}
.yu-alert{margin-top:12px;font-size:12.5px;line-height:1.5}
.yu-alert.ok{color:#86efac;background:rgba(74,222,128,.1);padding:11px 13px;border-radius:10px}
.yu-alert.err{color:#fca5a5;background:rgba(239,68,68,.1);padding:11px 13px;border-radius:10px}
.yu-wa{margin-top:9px;display:inline-block}

@media(max-width:640px){
  .ply-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .pk-cipDeger{margin-left:0}
  .ps-yukselt{margin-left:0;flex:1 1 100%;text-align:center}
  .kilit-kutu{padding:22px 16px}
}

/* ==================================================================
   2.9.20 — MÜŞTERİ TALEPLERİ (mesajlaşma) — müşteri tarafı
   ================================================================== */
.tlBox{max-width:760px;width:100%;display:flex;flex-direction:column;max-height:88vh;position:relative}
.tl-bas{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;padding-right:34px}
.tl-bas>div{flex:1;min-width:0}
.tl-bas h3{margin:0}
.tl-bas .sub{margin:4px 0 0}
.tl-kapat{
  position:absolute;top:14px;right:14px;
  background:transparent;border:0;color:var(--txt3);font-size:18px;
  cursor:pointer;line-height:1;padding:4px 7px;border-radius:8px;flex:none;
}
.tl-kapat:hover{background:rgba(255,255,255,.08);color:var(--txt)}

/* Menüdeki rozet */
.tlRozet{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:6px;border-radius:99px;background:#ef4444;color:#fff;
  font-size:11px;font-weight:800;line-height:1;
}
#btnTalep.tlVar{border-color:rgba(239,68,68,.5)}

.tl-yeniBtn{width:100%;margin-bottom:14px}
.tl-liste{display:grid;gap:10px;overflow-y:auto}
.tl-bos{
  text-align:center;padding:30px 18px;color:var(--txt2);font-size:13.5px;line-height:1.6;
  border:1px dashed var(--line2);border-radius:14px;
}
.tl-bos small{display:block;margin-top:8px;color:var(--txt3);font-size:12.5px}

.tl-kart{
  border:1px solid var(--line);border-left:3px solid var(--tl-renk,#94a3b8);
  border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--panel2);
  transition:border-color .15s,transform .1s;
}
.tl-kart:hover{border-color:var(--tl-renk,#94a3b8);transform:translateY(-1px)}
.tl-kart.yeni{background:color-mix(in srgb,var(--tl-renk) 8%,var(--panel2))}
.tl-kart.kapali{opacity:.7}
.tlk-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tlk-ikon{font-size:16px;flex:none}
.tlk-baslik{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlk-rozet{
  flex:none;background:#ef4444;color:#fff;font-size:10.5px;font-weight:800;
  padding:2px 8px;border-radius:99px;
}
.tlk-alt{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--txt3)}
.tlk-durum{font-weight:700}
.tlk-durum.d-acik{color:#fca5a5}
.tlk-durum.d-yanitlandi{color:#93c5fd}
.tlk-durum.d-beklemede{color:#fcd34d}
.tlk-durum.d-kapali{color:var(--txt3)}
.tlk-onizle{
  margin-top:7px;font-size:12.5px;color:var(--txt2);line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

.tl-geri{
  background:transparent;border:0;color:var(--txt2);font-size:12.5px;cursor:pointer;
  padding:4px 0;margin-bottom:10px;font-weight:600;
}
.tl-geri:hover{color:var(--txt)}

/* Tür seçimi */
.tl-turler{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tl-tur{
  text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;cursor:pointer;color:var(--txt);transition:all .13s;
}
.tl-tur:hover{border-color:var(--tl-renk,#94a3b8)}
.tl-tur.sel{
  border-color:var(--tl-renk,#94a3b8);
  background:color-mix(in srgb,var(--tl-renk) 12%,var(--panel2));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tl-renk) 25%,transparent);
}
.tlt-ikon{font-size:17px;display:block;margin-bottom:4px}
.tl-tur b{display:block;font-size:12.5px}
.tl-tur small{display:block;color:var(--txt3);font-size:11px;margin-top:3px;line-height:1.35}
.tl-ekGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* Konuşma */
.tl-sohbetBas{
  border-left:3px solid var(--tl-renk,#94a3b8);padding:10px 13px;border-radius:10px;
  background:var(--panel2);margin-bottom:12px;
}
.tls-baslik{display:flex;gap:8px;align-items:center;font-size:14px}
.tls-bilgi{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--txt3)}
.tls-ek{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--txt2)}
.tls-ek i{font-style:normal;color:var(--txt3)}
.tl-sohbet{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:4px 2px 10px;min-height:160px;max-height:46vh;
}
.tlm{max-width:82%;padding:10px 13px;border-radius:13px;font-size:13px;line-height:1.55}
.tlm.sizden{align-self:flex-end;background:#1e3a8a;border-bottom-right-radius:4px}
.tlm.bizden{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.tlm-bas{font-size:10.5px;opacity:.65;margin-bottom:4px;font-weight:700}
.tlm-metin{white-space:pre-wrap;word-break:break-word}
.tl-yazma{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.tl-yazma textarea{
  flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;color:var(--txt);font-size:13px;font-family:inherit;resize:vertical;
}
.tl-kapaliNot{flex:1 1 100%;font-size:11.5px;color:var(--txt3);margin-bottom:4px}
.yu-dugmeler{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

@media(max-width:640px){
  .tl-turler{grid-template-columns:1fr 1fr}
  .tlm{max-width:92%}
  .tl-sohbet{max-height:40vh}
  .tl-yazma textarea{min-width:0}
}

/* ==================================================================
   2.9.20 — MÜŞTERİ TALEPLERİ — yönetim paneli
   ================================================================== */

/* İki listeyi ayıran üst şerit */
.tpSekme{display:flex;gap:6px;margin:16px 0 14px;border-bottom:1px solid var(--line);padding-bottom:0}
.tps{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--txt3);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .15s,border-color .15s;
}
.tps:hover{color:var(--txt2)}
.tps.sel{color:var(--txt);border-bottom-color:#3b82f6}
.tps-sayi{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;
}

/* Tür çipleri */
.mt-filtre{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mt-cip{
  background:var(--panel2);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .13s;
}
.mt-cip:hover{border-color:var(--tl-renk,#94a3b8);color:var(--txt)}
.mt-cip.sel{background:var(--tl-renk,#3b82f6);border-color:var(--tl-renk,#3b82f6);color:#0b1020}
.mt-cip i{font-style:normal;opacity:.7;margin-left:4px;font-weight:800}

/* Sol liste + sağ konuşma */
.mt-govde{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:14px;align-items:start}
.mt-liste{display:grid;gap:8px;max-height:62vh;overflow-y:auto;padding-right:4px;min-width:0}
.mt-liste>*{min-width:0}
.mt-sohbet{min-width:0}
.mt-bos{
  padding:26px 16px;text-align:center;color:var(--txt3);font-size:13px;
  border:1px dashed var(--line2);border-radius:12px;
}
.mt-kart{
  border:1px solid var(--line);border-left:3px solid var(--tl-renk,#94a3b8);border-radius:11px;
  padding:10px 12px;cursor:pointer;background:var(--panel2);transition:border-color .13s;
}
.mt-kart:hover{border-color:var(--tl-renk,#94a3b8)}
.mt-kart.sel{background:color-mix(in srgb,var(--tl-renk) 12%,var(--panel2));border-color:var(--tl-renk)}
.mt-kart.yeni{box-shadow:inset 0 0 0 1px rgba(239,68,68,.3)}
.mtk-ust{display:flex;align-items:center;gap:7px}
.mtk-ikon{flex:none;font-size:14px}
.mtk-ust b{flex:1;min-width:0;font-size:12.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtk-rozet{
  flex:none;background:#ef4444;color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.mtk-kisi{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11.5px;color:var(--txt2);flex-wrap:wrap}
.mtk-durum{font-weight:700;font-size:11px}
.mtk-durum.d-acik{color:#fca5a5}
.mtk-durum.d-yanitlandi{color:#93c5fd}
.mtk-durum.d-beklemede{color:#fcd34d}
.mtk-durum.d-kapali{color:var(--txt3)}
.mtk-son{
  margin-top:5px;font-size:11.5px;color:var(--txt3);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* Canlı durum noktası */
.mt-nokta{
  width:8px;height:8px;border-radius:99px;display:inline-block;flex:none;background:#475569;
}
.mt-nokta.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.mt-nokta.yakin{background:#facc15}
.mt-nokta.off{background:#475569}

/* Konuşma paneli */
.mt-sohbet{
  border:1px solid var(--line);border-radius:14px;background:var(--panel2);
  display:flex;flex-direction:column;min-height:340px;max-height:62vh;overflow:hidden;
}
.mts-bas{
  padding:13px 15px;border-bottom:1px solid var(--line);
  border-left:3px solid var(--tl-renk,#94a3b8);background:rgba(255,255,255,.02);flex:none;
}
.mts-satir1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mts-ikon{font-size:17px}
.mts-satir1 b{flex:1;min-width:120px;font-size:14.5px}
.mts-durum{
  background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  padding:5px 9px;color:var(--txt);font-size:12px;width:auto;flex:none;
}
.mts-kisi{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap;font-size:12.5px}
.mts-kad{color:var(--txt3);font-size:11.5px}
.mts-cevrim{font-size:11.5px}
.mts-cevrim.on{color:#86efac;font-weight:700}
.mts-cevrim.off{color:var(--txt3)}
.mts-musteri{margin-left:auto;flex:none}
.mts-bilgi{display:flex;gap:13px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--txt3)}
.mts-ek{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--txt2)}
.mts-ek i{font-style:normal;color:var(--txt3);text-transform:capitalize}
.mts-teknik{margin-top:8px}
.mts-teknik summary{font-size:11.5px;color:var(--txt3);cursor:pointer}
.mts-teknik code{
  display:block;margin-top:6px;font-size:11px;color:var(--txt3);word-break:break-all;
  background:var(--panel);padding:7px 9px;border-radius:7px;
}

.mts-akis{flex:1;overflow-y:auto;padding:14px 15px;display:flex;flex-direction:column;gap:10px}
.mtm{max-width:78%;padding:9px 13px;border-radius:13px;font-size:13px;line-height:1.55}
.mtm.bizden{align-self:flex-end;background:#1e3a8a;border-bottom-right-radius:4px}
.mtm.musteriden{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.mtm-bas{font-size:10.5px;opacity:.65;margin-bottom:4px;font-weight:700}
.mtm-metin{white-space:pre-wrap;word-break:break-word}

.mts-yazma{border-top:1px solid var(--line);padding:11px 14px;flex:none;background:rgba(0,0,0,.12)}
.mts-hazir{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.mts-kalip{
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  padding:5px 11px;font-size:11.5px;color:var(--txt2);cursor:pointer;transition:all .13s;
}
.mts-kalip:hover{border-color:#3b82f6;color:var(--txt)}
.mts-yazma textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;color:var(--txt);font-size:13px;font-family:inherit;resize:vertical;
}
.mts-alt{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.mts-alt .hint{flex:1;min-width:160px;margin:0}

@media(max-width:900px){
  .mt-govde{grid-template-columns:1fr}
  .mt-liste{max-height:none}
  .mt-sohbet{max-height:none}
  .mts-musteri{margin-left:0}
}

/* ==================================================================
   2.9.21 — DPC LAUNCHER YÖNETİM EKRANI
   ================================================================== */
.lcSekme{margin-top:14px}
.lc-kapali{
  padding:18px;border:1px dashed rgba(245,158,11,.5);border-radius:12px;
  background:rgba(245,158,11,.08);color:#fde68a;font-size:13px;line-height:1.6;
}

/* Üst durum şeridi */
.lc-durum{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px;align-items:stretch}
.lcd-kutu{
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:10px 15px;text-align:center;min-width:86px;
}
.lcd-kutu b{display:block;font-size:19px;line-height:1.2}
.lcd-kutu small{display:block;font-size:11px;color:var(--txt3);margin-top:2px}
.lcd-not{flex:1 1 100%;font-size:12px;color:var(--txt3);line-height:1.6}
.lcd-uyari{color:#fcd34d}

.lc-liste{display:grid;gap:12px;margin-top:14px}
.lc-bos{
  padding:28px 18px;text-align:center;color:var(--txt3);font-size:13px;
  border:1px dashed var(--line2);border-radius:12px;line-height:1.6;
}

/* Ortak kart */
.lc-kart{border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:var(--panel2)}
.lc-kart.pasif{opacity:.55}
.lck-ust{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lck-ust b{font-size:14.5px}
.lck-avatar{width:26px;height:26px;border-radius:99px;object-fit:cover}
.lck-sehir{font-size:12px;color:var(--txt3)}
.lck-rozet{
  font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:3px 8px;border-radius:6px;
  background:rgba(148,163,184,.16);color:var(--txt2);text-transform:uppercase;
}
.lck-rozet.zorunlu{background:rgba(239,68,68,.16);color:#fca5a5}
.lck-rozet.kapali{background:rgba(148,163,184,.12);color:var(--txt3)}
.lck-rozet.beta{background:rgba(245,158,11,.16);color:#fcd34d}
.lck-sayi{margin-left:auto;font-size:11.5px;color:var(--txt3)}
.lck-satir{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--txt2)}
.lck-satir code{background:rgba(148,163,184,.14);padding:1px 6px;border-radius:5px;font-size:11.5px}
.lck-sha{margin-top:7px;font-size:11px;color:var(--txt3);word-break:break-all}
.lck-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}

/* Kafe anahtarı */
.lck-anahtar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.lck-anahtar code{
  background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.3);
  padding:6px 12px;border-radius:8px;font-size:14px;font-weight:700;letter-spacing:1px;color:#93c5fd;
}
.lck-hesaplar{display:grid;gap:6px;margin-top:11px}
.lck-hesap{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12.5px;
}
.lckh-ad{font-weight:700}
.lckh-koltuk{font-size:11px;color:var(--txt3);background:rgba(148,163,184,.14);padding:2px 7px;border-radius:5px}
.lckh-sifre{margin-left:auto;font-size:11.5px;color:var(--txt3)}
.lckh-sifre code{background:rgba(148,163,184,.14);padding:1px 6px;border-radius:4px}
.lck-makineler{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.lckm{font-size:11px;color:var(--txt3);background:var(--panel);border:1px solid var(--line);padding:3px 8px;border-radius:99px}
.lckm.on{color:#86efac;border-color:rgba(34,197,94,.35)}

/* Sunucu grupları */
.lc-grup{border:1px solid var(--line);border-left:3px solid var(--g-renk,#3B87D6);border-radius:13px;padding:13px 15px;background:var(--panel2)}
.lcg-bas{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lcg-bas b{font-size:14px}
.lcg-bas small{color:var(--txt3);font-size:11.5px}
.lcg-kapsam{font-size:11px;color:var(--txt2)}
.lcg-say{margin-left:auto;font-size:11.5px;color:var(--txt3)}
.lcg-liste{display:grid;gap:5px}
.lcs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 11px;
}
.lcs.pasif{opacity:.5}
.lcs-nokta{width:8px;height:8px;border-radius:99px;flex:none;background:#475569}
.lcs-nokta.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.lcs-nokta.off{background:#ef4444}
.lcs-ad{font-weight:700;min-width:130px}
.lcs-port{color:var(--txt3);font-size:11.5px}
.lcs-pist{color:var(--txt2);font-size:11.5px;flex:1;min-width:120px}
.lcs-doluluk{font-size:11.5px;color:var(--txt2);font-weight:700}
.lcs-etiket{font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;background:rgba(139,92,246,.18);color:#c4b5fd}
.lcs-etiket.one{background:rgba(245,158,11,.18);color:#fcd34d}
.lcg-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* Yükleme çubuğu */
.lc-yukleme{
  border:1px solid rgba(59,130,246,.4);background:rgba(59,130,246,.1);
  border-radius:12px;padding:13px 15px;font-size:13px;
}
.lcy-yuzde{font-weight:800;color:#93c5fd;margin-left:6px}
.lcy-bar{height:6px;border-radius:99px;background:rgba(148,163,184,.2);overflow:hidden;margin:9px 0 6px}
.lcy-bar i{display:block;height:100%;width:0;background:#3b82f6;border-radius:99px;transition:width .2s}
.lc-yukleme small{color:var(--txt3);font-size:11.5px}

/* Form penceresi */
.lcf-box{max-width:620px}
.lcf-govde{max-height:64vh;overflow-y:auto;padding-right:4px;display:grid;gap:12px}
.lcf-anahtar{margin:2px 0}
.lcf-anahtar .lbl small{display:block;font-size:11px;color:var(--txt3);margin-top:2px;font-weight:400}
.lcf-box .foot .grow{flex:1}

@media(max-width:640px){
  .lcd-kutu{flex:1 1 42%;min-width:0}
  .lcs-ad{min-width:0;flex:1 1 100%}
  .lckh-sifre{margin-left:0}
}

/* ==================================================================
   2.9.20 — HATA ÇÖZÜMLERİ: ZENGİN METİN EDİTÖRÜ
   ------------------------------------------------------------------
   Yönetici ne görüyorsa müşteri de onu görsün diye editörün içindeki
   biçimler, müşteri panelindeki .rh-govde ile aynı görünür.
   ================================================================== */
.rhDuzen{
  border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel2);margin-bottom:18px;
}
.rhd-ust{display:flex;gap:12px;flex-wrap:wrap}
.rhd-baslik{flex:1;min-width:220px}
.rhd-sira{width:96px;flex:none}
.rhd-dugmeler{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.rhd-durum{font-size:12px;color:var(--txt3)}

/* Araç çubuğu */
.rhe-cubuk{
  display:flex;flex-wrap:wrap;gap:4px;padding:8px;border:1px solid var(--line);
  border-bottom:0;border-radius:10px 10px 0 0;background:var(--panel);
}
.rhe-btn{
  background:transparent;border:1px solid transparent;border-radius:7px;
  padding:5px 9px;font-size:12.5px;color:var(--txt2);cursor:pointer;
  line-height:1.2;transition:all .12s;
}
.rhe-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:var(--line2)}
.rhe-btn:active{background:rgba(255,255,255,.16)}
.rhe-btn.kalin{font-weight:900}
.rhe-btn.egik{font-style:italic}
.rhe-btn.alti{text-decoration:underline}
.rhe-btn.ustu{text-decoration:line-through}
.rhe-ayrac{width:1px;background:var(--line2);margin:3px 4px;align-self:stretch}

/* Yazı alanı */
.rhe-alan{
  border:1px solid var(--line);border-radius:0 0 10px 10px;background:var(--panel);
  padding:14px 16px;min-height:220px;max-height:60vh;overflow-y:auto;
  color:var(--txt);font-size:14px;line-height:1.65;outline:none;
}
.rhe-alan:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.16)}
.rhe-alan p{margin:0 0 10px}
.rhe-alan h2{font-size:18px;margin:16px 0 8px}
.rhe-alan h3{font-size:15.5px;margin:14px 0 7px}
.rhe-alan ul,.rhe-alan ol{margin:0 0 10px;padding-left:24px}
.rhe-alan li{margin-bottom:5px}
.rhe-alan a{color:#60a5fa}
.rhe-alan img{max-width:100%;border-radius:9px;margin:4px 0}
.rhe-alan hr{border:0;border-top:1px solid var(--line2);margin:14px 0}
.rhe-alan code{
  background:rgba(148,163,184,.16);padding:2px 6px;border-radius:5px;
  font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
}
.rhe-alan blockquote{
  margin:0 0 10px;padding:8px 14px;border-left:3px solid var(--line2);color:var(--txt2);
}

/* Renkli kutular — hem editörde hem müşteri panelinde aynı */
.rhe-alan .rh-uyari,.rh-govde .rh-uyari{
  background:rgba(245,158,11,.12);border-left:3px solid #f59e0b;
  padding:10px 14px;border-radius:9px;margin:0 0 10px;color:#fde68a;
}
.rhe-alan .rh-bilgi,.rh-govde .rh-bilgi{
  background:rgba(59,130,246,.12);border-left:3px solid #3b82f6;
  padding:10px 14px;border-radius:9px;margin:0 0 10px;color:#bfdbfe;
}
.rhe-alan .rh-basari,.rh-govde .rh-basari{
  background:rgba(34,197,94,.12);border-left:3px solid #22c55e;
  padding:10px 14px;border-radius:9px;margin:0 0 10px;color:#bbf7d0;
}

/* Müşteri tarafında HTML çözümler — editörle aynı görünsün */
.rh-govde h2{font-size:17px;margin:16px 0 8px}
.rh-govde h3{font-size:15px;margin:14px 0 7px}
.rh-govde img{max-width:100%;border-radius:9px;margin:6px 0}
.rh-govde table{border-collapse:collapse;width:100%;margin:0 0 10px;font-size:13px}
.rh-govde th,.rh-govde td{border:1px solid var(--line2);padding:7px 10px;text-align:left}
.rh-govde th{background:rgba(148,163,184,.1);font-weight:700}

@media(max-width:640px){
  .rhe-btn{padding:6px 8px;font-size:12px}
  .rhd-sira{width:100%}
}

/* Talebe cevap geldi şeridi + menü düğmesindeki nokta */
.tlBildirim{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;cursor:pointer;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.4);
  border-radius:12px;padding:11px 14px;margin-bottom:14px;
}
.tlBildirim:hover{background:rgba(59,130,246,.18)}
.tlb-ikon{font-size:18px}
.tlb-yazi{flex:1;min-width:160px;font-size:13px;color:var(--txt2)}
.tlb-yazi b{color:var(--txt)}
.tlb-btn{flex:none}
.tb-menubtn{position:relative}
.tb-menubtn.tlNokta::after{
  content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;
  border-radius:99px;background:#ef4444;box-shadow:0 0 0 2px var(--panel);
}
.tl-baglanti{
  background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);border-radius:7px;
  padding:3px 9px;font-size:12px;font-weight:700;color:#93c5fd;cursor:pointer;
}
.tl-baglanti:hover{background:rgba(59,130,246,.25);color:#bfdbfe}

/* ==================================================================
   2.9.22 — MODLAR VE BAĞLANTILAR
   ================================================================== */
.lc-mod{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--panel2);
}
.lc-mod.pasif{opacity:.55}
.lc-mod.sel{border-color:#3b82f6;background:rgba(59,130,246,.08)}
.lcm-sec{flex:none;display:flex;align-items:center}
.lcm-onizle{
  width:56px;height:38px;border-radius:8px;object-fit:cover;flex:none;
  background:var(--panel);border:1px solid var(--line);
}
.lcm-onizle.bos{display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.5}
.lcm-orta{flex:1;min-width:170px}
.lcm-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lcm-ust b{font-size:13.5px}
.lcm-surum{font-size:11px;color:var(--txt3)}
.lcm-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--txt3)}
.lcm-klasor{background:rgba(148,163,184,.16);padding:2px 7px;border-radius:5px;color:var(--txt2);font-size:11.5px}
.lcm-kaynak{font-weight:700;font-size:11px}
.lcm-kaynak.dogrudan{color:#86efac}
.lcm-kaynak.dis{color:#93c5fd}
.lcm-kaynak.yok{color:#fca5a5}
.lcm-dugmeler{display:flex;gap:6px;flex-wrap:wrap;flex:none}

/* Toplu işlem şeridi */
.lc-modToplu{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.4);
  border-radius:11px;padding:9px 13px;margin-top:12px;font-size:13px;
}
.lc-modToplu .grow{flex:1}

/* İçe aktarma penceresi */
.lcia-secim{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lcia-metin{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--txt);font-size:12px;font-family:ui-monospace,Consolas,monospace;resize:vertical;
}
.lcia-sonuc{margin-top:11px;font-size:12.5px;line-height:1.5}
.lcia-sonuc.ok{color:#86efac;background:rgba(74,222,128,.1);padding:11px 13px;border-radius:10px}
.lcia-sonuc.err{color:#fca5a5;background:rgba(239,68,68,.1);padding:11px 13px;border-radius:10px}
.lcia-sonuc small{color:var(--txt3)}

/* Bağlantılar ekranı */
.lc-baglantiForm{display:grid;gap:12px;max-width:640px;margin-top:14px}
.lcb-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.lcb-onizle{margin-top:6px}
.lcb-onizleBas{font-size:11.5px;color:var(--txt3);margin-bottom:6px}
.lcb-onizleBas code{background:rgba(148,163,184,.16);padding:2px 7px;border-radius:5px}
.lcb-onizle pre{
  margin:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:12px;color:var(--txt2);overflow-x:auto;
}

@media(max-width:640px){
  .lcm-dugmeler{flex:1 1 100%}
  .lcm-dugmeler .btn{flex:1}
}

/* --- Oyun koprusu: anahtar penceresi ve baslik --- */
.lc-anahtar{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.5px;
  word-break:break-all;background:var(--bg2,rgba(255,255,255,.04));border:1px solid var(--line2);
  border-radius:10px;padding:12px 14px;margin:10px 0;user-select:all}
.lc-baslik{margin:22px 0 10px;font-size:14px;color:var(--txt2);text-transform:uppercase;letter-spacing:.6px}

/* --- Kafe: acik masalar tablosu --- */
.lck-masalar{margin:12px 0 4px}
.lckm-bas{font-size:12px;color:var(--txt2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.lckm-bas small{margin-left:8px;text-transform:none;letter-spacing:0;opacity:.85}
.lckm-tablo{width:100%;border-collapse:collapse;font-size:13px}
.lckm-tablo th{text-align:left;font-weight:600;color:var(--txt2);font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line2)}
.lckm-tablo td{padding:7px 8px;border-bottom:1px solid var(--line)}
.lckm-tablo tr.off{opacity:.5}
.lckm-nokta{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  background:#64748b;vertical-align:middle}
.lckm-tablo tr.on .lckm-nokta{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
@media (max-width:620px){
  .lckm-tablo th:nth-child(3),.lckm-tablo td:nth-child(3){display:none}
}

/* ==================================================================
   BOLUM SERIDI  (Kafe Paneli / Ana VDS)
   ================================================================== */
.bolumSerit{display:flex;gap:12px;padding:14px 20px 0;max-width:1500px;margin:0 auto;flex-wrap:wrap}
.bolumSerit .bs{position:relative;flex:1 1 240px;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:12px 16px;border-radius:14px;border:1px solid var(--line2);
  background:var(--panel);color:var(--txt2);cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,color .15s}
.bolumSerit .bs:hover{border-color:var(--line);color:var(--txt)}
.bolumSerit .bs.sel{border-color:var(--acc,#3B87D6);color:var(--txt);
  background:linear-gradient(180deg,rgba(59,135,214,.14),transparent)}
.bolumSerit .bs-ico{font-size:18px;line-height:1}
.bolumSerit .bs-ad{font-weight:700;font-size:15px}
.bolumSerit .bs small{font-size:11.5px;opacity:.75;line-height:1.35}
.bolumSerit .bs-nokta{position:absolute;top:12px;right:14px;width:9px;height:9px;border-radius:50%;background:transparent}
.bolumSerit .bs-nokta.iyi{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.bolumSerit .bs-nokta.kotu{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}

/* ==================================================================
   ANA VDS EKRANI
   ================================================================== */
.ana-ajan{border:1px solid var(--line2);border-radius:14px;padding:14px;margin-bottom:16px;background:var(--panel2,rgba(255,255,255,.02))}
.ana-ajanBas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ana-ajanBas b{font-size:15px}
.ana-et{font-size:11px;padding:2px 8px;border-radius:999px;letter-spacing:.4px}
.ana-et.iyi{background:rgba(34,197,94,.16);color:#4ade80}
.ana-et.kotu{background:rgba(239,68,68,.16);color:#f87171}
.ana-ip{font-size:11.5px;color:var(--txt2);font-family:ui-monospace,Menlo,Consolas,monospace}
.ana-uyari{font-size:12.5px;color:#fbbf24;background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:9px 12px;margin-bottom:10px;line-height:1.5}

.ana-srv{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--panel)}
.ana-srv.kapali{opacity:.72}
.ana-srvUst{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ana-srvAd{font-weight:600}
.ana-srvPort{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--txt2)}
.ana-srvPist{font-size:12.5px;color:var(--txt2);flex:1 1 120px}
.ana-srvDoluluk{font-size:12.5px;font-weight:600}
.ana-dugmeler{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ana-altSatir{margin-top:6px}

.ana-oyuncular{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:5px}
.ana-oyuncular.bos{color:var(--txt2);font-size:12.5px;font-style:italic}
.ana-oyuncu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;padding:3px 0}
.ana-oAd{font-weight:600;min-width:120px}
.ana-oArac{color:var(--txt2);font-size:12px}
.ana-oGuid{color:var(--txt2);font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;flex:1 1 auto}

.ana-konsol{background:#0b0f16;color:#cbd5e1;border:1px solid var(--line2);border-radius:10px;
  padding:12px;max-height:56vh;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin:0}
.modal .box.genis{max-width:900px}

.ana-yetkiler{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ana-yetki{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);
  color:var(--txt2);opacity:.65}
.ana-yetki.acik{border-color:rgba(34,197,94,.4);color:#4ade80;opacity:1}

@media (max-width:620px){
  .bolumSerit{padding:12px 14px 0}
  .bolumSerit .bs{flex:1 1 100%}
  .ana-oAd{min-width:0}
}

/* --- extra_cfg.yml sorun listesi --- */
.ycDurum{padding:9px 12px;border-radius:9px;font-size:13px;margin:8px 0 6px;line-height:1.5}
.ycDurum.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac}
.ycDurum.uyari{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.32);color:#fbbf24}
.ycDurum.kotu{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.34);color:#fca5a5}
.ycDurum small{opacity:.75}
.ycSorunListe{list-style:none;margin:0 0 8px;padding:0;max-height:210px;overflow:auto;
  display:flex;flex-direction:column;gap:6px}
.ycSorunListe li{padding:8px 10px;border-radius:8px;border-left:3px solid var(--line2);
  background:rgba(255,255,255,.03);font-size:12.5px;line-height:1.5}
.ycSorunListe li.hata{border-left-color:#ef4444}
.ycSorunListe li.uyari{border-left-color:#f59e0b}
.ycSatirNo{background:rgba(255,255,255,.07);border:1px solid var(--line2);color:var(--txt);
  border-radius:6px;padding:1px 7px;font-size:11.5px;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.ycSatirNo:hover{background:rgba(255,255,255,.14)}
.ycSorunMetin{color:var(--txt2);margin-top:3px}
.ycSorunKod{display:block;margin-top:4px;font-size:11.5px;opacity:.8;word-break:break-all;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.btn.btn-warn{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.4);color:#fbbf24}
.btn.btn-warn:hover{background:rgba(245,158,11,.26)}

/* ===== 2.9.26 — Ana VDS yasakli/yonetici listeleri ===== */
.ana-liste{border:1px solid var(--cizgi,#243043);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--kutu2,#141c28)}
.ana-listeBas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ana-listeBas .ana-ip{font-size:11px;opacity:.6;font-family:ui-monospace,Consolas,monospace}
.ana-listeArac{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.ana-listeKutu{max-height:280px;overflow:auto;border:1px solid var(--cizgi,#243043);border-radius:8px}
.ana-listeSatir{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--cizgi,#243043)}
.ana-listeSatir:last-child{border-bottom:0}
.ana-listeSatir code{flex:1;font-size:13px;letter-spacing:.4px}

/* ===== 2.9.26 — Launcher surumu ===== */
.lc-kart.lcs-yayin{border-color:#2e7d52;box-shadow:inset 3px 0 0 #2e7d52}
.lck-rozet.yayinda{background:#1f5c3d;color:#b9f0d0}

/* ===== 2.9.27 — Bölüm seçim ekranı ===== */
.bolumSecim{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,18,.86);backdrop-filter:blur(6px);padding:20px}
.bolumSecim.hidden{display:none}
body.bsc-acik{overflow:hidden}
.bsc-kutu{width:100%;max-width:720px;background:var(--kutu,#111722);border:1px solid var(--cizgi,#243043);
  border-radius:16px;padding:26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.bsc-kutu h2{margin:0 0 4px;font-size:22px}
.bsc-kartlar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 6px}
.bsc-kart{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  background:var(--kutu2,#141c28);border:1px solid var(--cizgi,#243043);border-radius:14px;
  padding:20px 18px;cursor:pointer;color:inherit;transition:border-color .15s,transform .15s}
.bsc-kart:hover{border-color:#3B87D6;transform:translateY(-2px)}
.bsc-kart .bsc-ico{font-size:30px;line-height:1}
.bsc-kart b{font-size:17px}
.bsc-kart small{opacity:.7;font-size:12px;line-height:1.45}
.bsc-hatirla{margin-top:14px}
@media (max-width:640px){ .bsc-kartlar{grid-template-columns:1fr} }

/* ===== 2.9.27 — Crew yönetimi ===== */
.lcs-crew .lcs-ad{min-width:140px}

/* ===== 2.9.27 — AssettoServer eklentileri ===== */
.ekGovde{max-height:min(60vh,560px);overflow:auto;padding:12px 14px;display:grid;gap:10px}
.ekKart{border:1px solid var(--cizgi,#243043);border-radius:12px;padding:12px 14px;background:var(--kutu2,#141c28)}
.ekKart.acik{border-color:#2e7d52;box-shadow:inset 3px 0 0 #2e7d52}
.ekKart.eksik{border-color:#8a3b3b;box-shadow:inset 3px 0 0 #8a3b3b}
.ekUst{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ekUst b{font-size:15px}
.ekRozet{font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:#1d2635;color:#9fb2c8;border:1px solid var(--cizgi,#243043)}
.ekRozet.acik{background:#1f5c3d;color:#b9f0d0;border-color:#2e7d52}
.ekRozet.patreon{background:#5a2438;color:#ffc4da;border-color:#8a3b5c}
.ekRozet.kotu{background:#5a2424;color:#ffc4c4;border-color:#8a3b3b}
.ekAciklama{font-size:12.5px;opacity:.8;margin-top:6px;line-height:1.5}
.ekAciklama.kotu{opacity:1;color:#ffb4b4}
.ekDugmeler{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ekAyarNot{padding:12px 14px;font-size:12.5px;opacity:.85;line-height:1.55;border-bottom:1px solid var(--cizgi,#243043)}
.ekAyarMetin{width:100%;min-height:320px;border:0;outline:0;resize:vertical;padding:14px;
  font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:13px;line-height:1.6;
  background:#0c1118;color:#d6e2f0}

/* ===== 2.9.27 — VIP / Patreon ===== */
.lcd-kutu.uyari b{color:#ffcf6b}
.bolumSerit .bs-sor{opacity:.75}
.bolumSerit .bs-sor:hover{opacity:1}

/* ===== 2.9.28 ===== */
.lck-rozet.beta{background:#3a2a5c;color:#d8c4ff;border-color:#5a3f8c}
#anaTabs button .ico{margin-right:8px}

/* ===== 2.9.32 — Müşteriye birden fazla sunucu kurma ===== */
.mu-yeniSatir{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--cizgi,#243043)}
.mu-yeniSatir:last-child{border-bottom:0}
.mu-yeniNo{flex:0 0 26px;height:26px;margin-top:26px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;background:#1d2635;border:1px solid var(--cizgi,#243043);font-size:12px;opacity:.8}
.mu-yeniAlanlar{flex:1;min-width:0;margin:0}
.muy-sil{flex:0 0 auto;margin-top:26px}
.muy-sil.hidden{display:none}
.mu-yeniArac{display:flex;align-items:center;gap:12px;margin:10px 0 4px;flex-wrap:wrap}
@media (max-width:640px){
  .mu-yeniSatir{flex-wrap:wrap}
  .mu-yeniNo{margin-top:0}
  .muy-sil{margin-top:0}
}