/* ============================================================
   TacticsPRO Broadcast — Panel ve kimlik ekranları
   ============================================================ */
:root{
  --bg:#0b0d10; --bg2:#12151a; --panel:rgba(22,24,28,.86); --cizgi:rgba(255,255,255,.12);
  --txt:#f2f2f5; --dim:#9a9aa2; --mavi:#0a84ff; --sari:#ffd60a; --turuncu:#ff9f0a;
  --kirmizi:#ff453a; --yesil:#30d158; --mor:#bf5af2; --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5}
a{color:var(--mavi);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- KİMLİK EKRANLARI ---------- */
.kimlik{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1100px 620px at 50% -10%, rgba(10,90,190,.35), #06080b)}
.kimlik-kart{width:100%;max-width:430px;padding:32px;border-radius:22px;
  background:linear-gradient(160deg, rgba(38,42,52,.9), rgba(16,18,24,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.kimlik-kart.genis{max-width:560px}
.marka{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.marka .logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;
  background:linear-gradient(135deg,#0a84ff,#0040a8);box-shadow:0 8px 24px rgba(10,132,255,.4)}
.marka b{font-size:1.12rem;letter-spacing:-.2px;display:block}
.marka span{font-size:.68rem;color:var(--dim);letter-spacing:.15em;font-weight:700}
h1.bs{font-size:1.35rem;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
p.alt{font-size:.85rem;color:var(--dim);margin-bottom:22px;line-height:1.55}

/* ---------- FORM ---------- */
label.et{display:block;font-size:.66rem;font-weight:800;letter-spacing:.13em;color:var(--dim);
  margin:15px 0 6px;text-transform:uppercase}
.gir,select.gir,textarea.gir{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--cizgi);
  color:var(--txt);border-radius:12px;padding:12px 14px;font-size:.9rem;outline:none;
  font-family:inherit;transition:border-color .18s, background .18s}
.gir:focus{border-color:var(--mavi);background:rgba(10,132,255,.09)}
.gir::placeholder{color:#6b6b74}
select.gir option{background:#1c1e22}
textarea.gir{resize:vertical;min-height:80px}
.dgm{border:none;border-radius:12px;padding:13px 18px;font-size:.9rem;font-weight:800;cursor:pointer;
  color:#fff;font-family:inherit;transition:transform .14s,filter .2s;display:inline-block;text-align:center}
.dgm:active{transform:scale(.97)}
.dgm:hover{text-decoration:none;filter:brightness(1.08)}
.dgm.tam{width:100%;margin-top:18px}
.dgm.bir{background:linear-gradient(135deg,#0a84ff,#0060df);box-shadow:0 8px 24px rgba(10,132,255,.35)}
.dgm.sari{background:linear-gradient(135deg,#ffd60a,#ff9f0a);color:#1a1200}
.dgm.yes{background:linear-gradient(135deg,#30d158,#1f9d46)}
.dgm.kir{background:linear-gradient(135deg,#ff453a,#c62b22)}
.dgm.sade{background:rgba(255,255,255,.09);border:1px solid var(--cizgi)}
.dgm.kucuk{padding:8px 13px;font-size:.75rem;border-radius:10px}
.dgm[disabled]{filter:grayscale(.7) brightness(.6);cursor:not-allowed}

.uyari{border-radius:12px;padding:12px 15px;font-size:.83rem;margin:14px 0;line-height:1.5}
.uyari.hata{background:rgba(255,69,58,.12);border:1px solid rgba(255,69,58,.4);color:#ff9c94}
.uyari.ok{background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.4);color:#7ee89b}
.uyari.bilgi{background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.4);color:#8cc4ff}
.uyari.sari{background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.4);color:#ffc46b}

/* ---------- PANEL DÜZENİ ---------- */
.duzen{display:flex;min-height:100vh}
.yan{width:238px;flex:0 0 238px;background:var(--bg2);border-right:1px solid var(--cizgi);
  padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.yan .marka{padding:0 8px 18px;margin-bottom:14px;border-bottom:1px solid var(--cizgi)}
.yan .grp{font-size:.62rem;font-weight:800;letter-spacing:.14em;color:#5f5f68;
  padding:16px 10px 7px;text-transform:uppercase}
.yan a.mnu{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  color:#c9c9d1;font-size:.87rem;font-weight:600;margin-bottom:2px;transition:background .16s}
.yan a.mnu:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.yan a.mnu.aktif{background:var(--mavi);color:#fff;box-shadow:0 4px 14px rgba(10,132,255,.35)}
.yan a.mnu .rz{margin-left:auto;background:var(--kirmizi);color:#fff;font-size:.62rem;font-weight:800;
  border-radius:20px;padding:1px 7px}
.ana{flex:1;min-width:0;display:flex;flex-direction:column}
.ust{height:58px;display:flex;align-items:center;gap:12px;padding:0 22px;
  border-bottom:1px solid var(--cizgi);background:rgba(14,16,20,.7);position:sticky;top:0;z-index:20;
  backdrop-filter:blur(16px)}
.ust h2{font-size:1rem;font-weight:700}
.ust .bosluk{flex:1}
.ust .kim{font-size:.78rem;color:var(--dim);text-align:right;line-height:1.3}
.ust .kim b{display:block;color:var(--txt);font-size:.83rem}
.icerik{padding:22px;flex:1}

/* ---------- ROZETLER ---------- */
.rozet{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.08em;
  padding:4px 9px;border-radius:7px;white-space:nowrap}
.rozet.gri{background:rgba(255,255,255,.1);color:var(--dim);border:1px solid var(--cizgi)}
.rozet.mavi{background:rgba(10,132,255,.18);color:#7cbcff;border:1px solid rgba(10,132,255,.4)}
.rozet.sari{background:linear-gradient(135deg,#ffd60a,#ff9f0a);color:#1a1200}
.rozet.yes{background:rgba(48,209,88,.18);color:#7ee89b;border:1px solid rgba(48,209,88,.4)}
.rozet.kir{background:rgba(255,69,58,.18);color:#ff9c94;border:1px solid rgba(255,69,58,.4)}
.rozet.tur{background:rgba(255,159,10,.18);color:#ffc46b;border:1px solid rgba(255,159,10,.4)}
.rozet.mor{background:linear-gradient(135deg,#bf5af2,#7d2fd1);color:#fff}

/* ---------- KART / IZGARA ---------- */
.izgara{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin-bottom:22px}
.kart{background:var(--panel);border:1px solid var(--cizgi);border-radius:var(--r);padding:17px}
.kart .sayi{font-size:1.85rem;font-weight:800;line-height:1}
.kart .etk{font-size:.65rem;color:var(--dim);font-weight:700;letter-spacing:.1em;margin-top:5px;
  text-transform:uppercase}
.kutu{background:var(--panel);border:1px solid var(--cizgi);border-radius:var(--r);
  overflow:hidden;margin-bottom:20px}
.kutu-bas{padding:14px 17px;border-bottom:1px solid var(--cizgi);display:flex;align-items:center;gap:11px}
.kutu-bas h3{font-size:.92rem;font-weight:700}
.kutu-bas .bosluk{flex:1}
.kutu-govde{padding:17px}

/* ---------- TABLO ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:left;font-size:.63rem;font-weight:800;letter-spacing:.11em;color:var(--dim);
  padding:11px 14px;border-bottom:1px solid var(--cizgi);text-transform:uppercase;white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.03)}
.tbl .sag{text-align:right;white-space:nowrap}
.tbl .kucukmetin{font-size:.72rem;color:var(--dim);margin-top:2px}
.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem}
.bos{padding:44px;text-align:center;color:#5f5f68;font-size:.85rem}

/* ---------- ARAÇ ÇUBUĞU / FORM IZGARASI ---------- */
.arac{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.arac .gir{width:auto;min-width:210px;flex:0 1 auto;padding:9px 13px;font-size:.83rem}
.arac select.gir{min-width:150px}
.fizgara{display:grid;gap:0 16px;grid-template-columns:1fr 1fr}
.fizgara .tam2{grid-column:1 / -1}
@media (max-width:760px){
  .fizgara{grid-template-columns:1fr}
  .yan{position:fixed;left:-238px;z-index:60;transition:left .25s;box-shadow:0 0 60px rgba(0,0,0,.7)}
  .yan.acik{left:0}
  .menu-dgm{display:inline-flex !important}
  .icerik{padding:15px}
  .tbl{font-size:.8rem}
}
.menu-dgm{display:none;background:rgba(255,255,255,.1);border:1px solid var(--cizgi);color:#fff;
  border-radius:10px;padding:7px 11px;cursor:pointer;font-size:1rem;line-height:1}

/* ---------- KOPYALANABİLİR KUTU ---------- */
.kopya-kutu{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.35);
  border:1px dashed rgba(255,214,10,.5);border-radius:11px;padding:11px 13px;margin:11px 0}
.kopya-kutu code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:#ffd60a;word-break:break-all;user-select:all}