/* ============================================================
   GKS Ads Güvenliği — Admin Paneli Stilleri v3.0
   ============================================================ */
:root {
    --arka: #0b1020; --arka2: #121a30; --kart: #182238; --kart2: #1f2b45;
    --kenar: #2a3752; --metin: #e6e9f0; --metin2: #9aa5bd; --vurgu: #4f8cff;
    --yesil: #22c55e; --turuncu: #f59e0b; --kirmizi: #ef4444; --mavi: #3b82f6;
    --gri: #64748b; --radius: 12px; --golge: 0 4px 20px rgba(0,0,0,.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--arka); color: var(--metin); font-size: 15px; line-height: 1.5;
}
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Üst bar ---------- */
.ust-bar {
    position: sticky; top: 0; z-index: 100; display: flex;
    align-items: center; justify-content: space-between;
    background: var(--arka2); border-bottom: 1px solid var(--kenar);
    padding: 0 20px; height: 60px;
}
.ust-sol { display: flex; align-items: center; gap: 14px; }
.ust-sag { display: flex; align-items: center; gap: 14px; }
.logo { font-weight: 700; font-size: 17px; }
.surum { font-size: 11px; color: var(--metin2); background: var(--kart); padding: 2px 8px; border-radius: 20px; }
.menu-toggle { display: none; background: none; border: none; color: var(--metin); font-size: 22px; cursor: pointer; }
.site-secici select, .kullanici, .cikis {
    background: var(--kart); color: var(--metin); border: 1px solid var(--kenar);
    border-radius: 8px; padding: 6px 12px; font-size: 13px;
}
.cikis { color: var(--kirmizi); }
.cikis:hover { background: rgba(239,68,68,.12); text-decoration: none; }

/* ---------- Ana kap ---------- */
.ana-kap { display: flex; min-height: calc(100vh - 60px); }
.sidebar { width: 240px; background: var(--arka2); border-right: 1px solid var(--kenar); padding: 16px 0; flex-shrink: 0; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav a { padding: 12px 22px; color: var(--metin2); border-left: 3px solid transparent; font-size: 14px; }
.sidebar nav a:hover { background: var(--kart); color: var(--metin); text-decoration: none; }
.sidebar nav a.aktif { color: var(--vurgu); border-left-color: var(--vurgu); background: var(--kart); }
.icerik { flex: 1; padding: 26px; overflow-x: auto; }
.sayfa-baslik { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.sayfa-baslik h1 { font-size: 24px; }
.site-etiket { background: var(--kart); border: 1px solid var(--kenar); padding: 4px 12px; border-radius: 20px; font-size: 13px; color: var(--metin2); }

/* ---------- İstatistik kartları ---------- */
.kart-izgara { display: grid; gap: 16px; margin-bottom: 24px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kart { background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--radius); padding: 18px; box-shadow: var(--golge); }
.kart .etiket { font-size: 12px; color: var(--metin2); text-transform: uppercase; letter-spacing: .5px; }
.kart .deger { font-size: 30px; font-weight: 700; margin-top: 6px; }
.kart.yesil .deger { color: var(--yesil); }
.kart.turuncu .deger { color: var(--turuncu); }
.kart.kirmizi .deger { color: var(--kirmizi); }
.kart.mavi .deger { color: var(--mavi); }
.kart .alt { font-size: 12px; color: var(--metin2); margin-top: 4px; }

/* ---------- Paneller / tablolar ---------- */
.panel { background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--radius); padding: 20px; margin-bottom: 22px; box-shadow: var(--golge); }
.panel-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.panel-baslik h2 { font-size: 17px; }
.tablo-kap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--kenar); }
th { color: var(--metin2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tr:hover td { background: var(--kart2); }
.kucuk { font-size: 13px; }
.ip-adres { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

/* ---------- Rozetler ---------- */
.rozket { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.rozket-yesil { background: rgba(34,197,94,.15); color: var(--yesil); }
.rozket-turuncu { background: rgba(245,158,11,.15); color: var(--turuncu); }
.rozket-kirmizi { background: rgba(239,68,68,.15); color: var(--kirmizi); }
.kat-yesil { color: var(--yesil); }
.kat-kirmizi { color: var(--kirmizi); }
.kat-mavi { color: var(--mavi); }
.kat-gri { color: var(--gri); }

/* ---------- Risk çubuğu ---------- */
.risk-cubuk { width: 90px; height: 8px; background: var(--kart2); border-radius: 6px; overflow: hidden; display: inline-block; vertical-align: middle; }
.risk-cubuk span { display: block; height: 100%; border-radius: 6px; }
.risk-dusuk { background: var(--yesil); }
.risk-orta { background: var(--turuncu); }
.risk-yuksek { background: var(--kirmizi); }

/* ---------- Açıklama balonu (neden/durum/risk) ---------- */
.bilgi-balondur { position: relative; cursor: help; border-bottom: 1px dotted currentColor; }
.bilgi-balondur .balon {
    display: none; position: absolute; z-index: 200; left: 0; top: 130%;
    min-width: 240px; max-width: 340px; background: #0a0f1e; color: var(--metin);
    border: 1px solid var(--vurgu); border-radius: 10px; padding: 12px 14px;
    font-size: 13px; font-weight: 400; line-height: 1.6; box-shadow: var(--golge);
    white-space: normal; text-align: left;
}
.bilgi-balondur:hover .balon, .bilgi-balondur.acik .balon { display: block; }
.bilgi-balondur .balon b { color: var(--vurgu); }
.bilgi-balondur .balon .neden-madde { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--kenar); }

/* ---------- Butonlar ---------- */
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--kenar); background: var(--kart2); color: var(--metin); font-size: 13px; cursor: pointer; transition: .15s; }
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn-birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.btn-yesil { background: var(--yesil); border-color: var(--yesil); color: #06210f; }
.btn-turuncu { background: var(--turuncu); border-color: var(--turuncu); color: #2a1a00; }
.btn-kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.btn-kucuk { padding: 4px 10px; font-size: 12px; }
.btn-grup { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Filtreler ---------- */
.filtreler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtre { padding: 6px 14px; border-radius: 20px; font-size: 13px; background: var(--kart2); border: 1px solid var(--kenar); color: var(--metin2); }
.filtre.aktif { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }

/* ---------- Mesajlar ---------- */
.mesaj-basari, .mesaj-hata { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.mesaj-basari { background: rgba(34,197,94,.12); color: var(--yesil); border: 1px solid rgba(34,197,94,.3); }
.mesaj-hata { background: rgba(239,68,68,.12); color: var(--kirmizi); border: 1px solid rgba(239,68,68,.3); }

/* ---------- Formlar ---------- */
.form-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan label { font-size: 13px; color: var(--metin2); }
.alan input, .alan select, .alan textarea { background: var(--kart2); border: 1px solid var(--kenar); color: var(--metin); padding: 9px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--vurgu); }
.alan .yardim { font-size: 11px; color: var(--gri); }

/* ---------- Kod bloğu / snippet ---------- */
.kod-blok { position: relative; background: #0a0f1e; border: 1px solid var(--kenar); border-radius: var(--radius); padding: 18px; overflow-x: auto; }
.kod-blok pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: #a5d6ff; white-space: pre; line-height: 1.6; }
.kod-blok .kopyala-btn { position: absolute; top: 10px; right: 10px; }

/* ---------- Canlı akış ---------- */
.akis-satir { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--kenar); font-size: 13px; }
.akis-satir:hover { background: var(--kart2); }
.akis-zaman { color: var(--metin2); font-size: 12px; min-width: 70px; }
.akis-ip { font-family: ui-monospace, monospace; }

/* ---------- Harita ---------- */
#harita { height: 60vh; min-height: 420px; border-radius: var(--radius); z-index: 1; }
.harita-kontroller { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- Boş / yükleniyor ---------- */
.bos { text-align: center; padding: 40px; color: var(--metin2); }
.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--kenar); border-top-color: var(--vurgu); border-radius: 50%; animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Giriş sayfası ---------- */
.giris-kap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, #1a2745 0%, var(--arka) 60%); padding: 20px; }
.giris-kart { background: var(--kart); border: 1px solid var(--kenar); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: var(--golge); }
.giris-kart h1 { font-size: 22px; margin-bottom: 6px; text-align: center; }
.giris-kart .alt { text-align: center; color: var(--metin2); font-size: 13px; margin-bottom: 26px; }
.giris-kart .alan { margin-bottom: 16px; }
.giris-kart .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .menu-toggle { display: block; }
    .sidebar { position: fixed; left: -250px; top: 60px; bottom: 0; z-index: 90; transition: left .2s; height: calc(100vh - 60px); }
    .sidebar.acik { left: 0; }
    .icerik { padding: 16px; }
    .kart-izgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}