/*
 * NT CentraCall yönetim paneli — görünüm.
 *
 * Yerleşim ve bileşenler Alba Pro panelinden (alba_sunucu_v2/panel.php):
 * yan menü + bölüm başlıkları + sayaçlar, üst çubukta arama ve otomatik
 * yenileme, KPI kutucukları, kartlar ve tablolar, telefonda katlanan menü.
 * Renkler uygulamanın markası (koyu lacivert + mavi #00A3E0) — Alba'daki
 * gerekçeyle: panel ile uygulama aynı ürün gibi dursun.
 *
 * Satır içi betik YOK (CSP script-src 'self'); davranışlar panel.js'te.
 */
:root {
    --zemin:#07111a; --yuzey:#0d1a25; --yuzey2:#112231; --cizgi:#1c3142;
    --yazi:#e6eef5; --sonuk:#8ba1b3; --marka:#00a3e0; --marka2:#3e9fd1;
    --yesil:#34d399; --kirmizi:#f87171; --sari:#fbbf24; --mavi:#60a5fa; --mor:#a78bfa;
    --golge:0 10px 30px rgba(0,0,0,.45);
    /* Temaya göre değişen öteki renkler (açık tema aşağıda yalnız değişkenleri yeniden tanımlıyor). */
    --yan-zemin:rgba(13,26,37,.94); --ust-zemin:rgba(7,17,26,.74); --menu-baslik:#5d7385; --menu-yazi:#b6c6d3;
    --alt-yazi:#c9d6e0; --kod-zemin:#030a10; --etiket:#a8bccb; --girdi-cizgi:#274257; --girdi-zemin:#050d14;
    --sade-yazi:#d5e2ec; --sade-hover-cizgi:#35536a; --sade-hover-yazi:#fff;
    --hover:rgba(255,255,255,.022); --hover2:rgba(255,255,255,.03);
    --rozet-mavi:#7fd3f5; --rozet-yesil:#8ee6bf; --rozet-sari:#fcd77a;
    --uyari-yazi:#fde2a0; --tamam-yazi:#b6f0d6; --hata-yazi:#fecaca; --not-yazi:#bfe8f8;
    --harita-zemin:#0b1620; --etiket-zemin:rgba(13,26,37,.85); --yan-solma:rgba(13,26,37,.96); --marka-ustu:#02131d;
    /* Tarayıcının kendi denetimleri (tarih seçici, açılır liste, kaydırma çubuğu) de koyu. */
    color-scheme: dark;
}
/* Açık tema (2026-09-21 kullanıcı isteği: "panelde uygulamada olduğu gibi açık tema seçeneği olsun"). Seçim üst
   çubukta (Sistem / Koyu / Açık), çerezde; "sistem" tarayıcının açık/koyu tercihini izliyor. Bu iki blok AYNI. */
:root[data-tema="acik"] {
    --zemin:#f3f6f9; --yuzey:#ffffff; --yuzey2:#eef3f7; --cizgi:#d5e0e8;
    --yazi:#10202c; --sonuk:#5b7082; --marka:#0086b8; --marka2:#1f6f96;
    --yesil:#059669; --kirmizi:#dc2626; --sari:#b45309; --mavi:#2563eb; --mor:#7c3aed;
    --golge:0 8px 24px rgba(16,32,44,.08);
    --yan-zemin:rgba(255,255,255,.96); --ust-zemin:rgba(243,246,249,.86); --menu-baslik:#7d8f9e; --menu-yazi:#35495a;
    --alt-yazi:#35495a; --kod-zemin:#eef3f7; --etiket:#4a5f70; --girdi-cizgi:#c9d6e0; --girdi-zemin:#ffffff;
    --sade-yazi:#1d3342; --sade-hover-cizgi:#9fb3c3; --sade-hover-yazi:#0b1a24;
    --hover:rgba(0,0,0,.03); --hover2:rgba(0,0,0,.02);
    --rozet-mavi:#036d96; --rozet-yesil:#047857; --rozet-sari:#92400e;
    --uyari-yazi:#7c4a03; --tamam-yazi:#065f46; --hata-yazi:#991b1b; --not-yazi:#075985;
    --harita-zemin:#e8eef3; --etiket-zemin:rgba(255,255,255,.9); --yan-solma:rgba(255,255,255,.96); --marka-ustu:#ffffff;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root[data-tema="sistem"] {
        --zemin:#f3f6f9; --yuzey:#ffffff; --yuzey2:#eef3f7; --cizgi:#d5e0e8;
        --yazi:#10202c; --sonuk:#5b7082; --marka:#0086b8; --marka2:#1f6f96;
        --yesil:#059669; --kirmizi:#dc2626; --sari:#b45309; --mavi:#2563eb; --mor:#7c3aed;
        --golge:0 8px 24px rgba(16,32,44,.08);
        --yan-zemin:rgba(255,255,255,.96); --ust-zemin:rgba(243,246,249,.86); --menu-baslik:#7d8f9e; --menu-yazi:#35495a;
        --alt-yazi:#35495a; --kod-zemin:#eef3f7; --etiket:#4a5f70; --girdi-cizgi:#c9d6e0; --girdi-zemin:#ffffff;
        --sade-yazi:#1d3342; --sade-hover-cizgi:#9fb3c3; --sade-hover-yazi:#0b1a24;
        --hover:rgba(0,0,0,.03); --hover2:rgba(0,0,0,.02);
        --rozet-mavi:#036d96; --rozet-yesil:#047857; --rozet-sari:#92400e;
        --uyari-yazi:#7c4a03; --tamam-yazi:#065f46; --hata-yazi:#991b1b; --not-yazi:#075985;
        --harita-zemin:#e8eef3; --etiket-zemin:rgba(255,255,255,.9); --yan-solma:rgba(255,255,255,.96); --marka-ustu:#ffffff;
        color-scheme: light;
    }
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.8; }
* { box-sizing:border-box; }
html, body { height:100%; }
body {
    margin:0; background:
        radial-gradient(1100px 600px at 100% -10%, rgba(0,163,224,.08), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(62,159,209,.06), transparent 60%),
        var(--zemin);
    color:var(--yazi); font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--marka); }

/* ---------------------------------------------------------- kabuk */
.kabuk { display:flex; min-height:100vh; }
.yan {
    width:246px; flex:0 0 246px; background:var(--yan-zemin);
    border-right:1px solid var(--cizgi); display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh; backdrop-filter:blur(6px);
}
.marka-blok { padding:18px 18px 12px; display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--yazi); }
.marka-im { width:40px; height:40px; flex:0 0 40px; object-fit:contain; display:block; }
.marka-ad { font-weight:800; letter-spacing:.3px; }
.marka-alt { color:var(--sonuk); font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; }

.menu { padding:6px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
/* Kaydırırken hangi bölümde olduğun görünsün: başlık menünün tepesine yapışıyor. */
.menu-baslik {
    color:var(--menu-baslik); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; padding:12px 10px 5px;
    position:sticky; top:0; background:var(--yan-zemin); z-index:1;
}
.menu a {
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px;
    color:var(--menu-yazi); text-decoration:none; font-weight:600; font-size:14px;
    border:1px solid transparent; position:relative; transition:.14s;
}
.menu a svg { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.menu a:hover { background:var(--yuzey2); color:var(--yazi); }
.menu a.aktif {
    background:linear-gradient(90deg,rgba(0,163,224,.18),rgba(0,163,224,.04));
    color:var(--marka); border-color:rgba(0,163,224,.30);
}
.menu a.aktif svg { opacity:1; }
.menu a.aktif::before {
    content:""; position:absolute; left:-10px; top:9px; bottom:9px; width:3px;
    border-radius:0 3px 3px 0; background:var(--marka);
}
.menu .sayac {
    margin-left:auto; background:var(--kirmizi); color:#1a0000; font-size:11px;
    font-weight:800; padding:1px 7px; border-radius:20px;
}
.menu .sayac.mavi { background:var(--marka); color:var(--marka-ustu); }
.menu .sayac.sari { background:var(--sari); color:#1d1300; }
.yan-alt { margin-top:auto; padding:12px 14px; border-top:1px solid var(--cizgi); color:var(--sonuk); font-size:12px; }
.yan-alt form { margin:0; }
.yan-alt button.bag { display:inline-flex; align-items:center; gap:7px; color:var(--alt-yazi); font-weight:600; }
.yan-alt button.bag svg { width:16px; height:16px; }
.yan-alt button.bag:hover { color:var(--kirmizi); }

.icerik { flex:1; min-width:0; display:flex; flex-direction:column; }
.tepe {
    height:62px; display:flex; align-items:center; gap:14px; padding:0 24px;
    border-bottom:1px solid var(--cizgi); background:var(--ust-zemin);
    position:sticky; top:0; z-index:5; backdrop-filter:blur(8px);
}
.tepe .yol { color:var(--sonuk); font-size:13px; white-space:nowrap; }
.tepe .yol b { color:var(--yazi); }
.tepe form { margin:0; }
.tepe input[name="q"] { width:300px; padding:7px 12px; font-size:13px; }
.tepe .sag { margin-left:auto; display:flex; align-items:center; gap:10px; }
.cip {
    display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:20px;
    background:var(--yuzey); border:1px solid var(--cizgi); color:var(--sonuk); font-size:12.5px;
    text-decoration:none; white-space:nowrap;
}
a.cip:hover { border-color:rgba(0,163,224,.45); color:var(--yazi); }
.cip.secili { background:rgba(0,163,224,.16); border-color:rgba(0,163,224,.45); color:var(--marka); font-weight:600; }
.cip.alarm { color:#1a0000; background:var(--kirmizi); border-color:var(--kirmizi); font-weight:800; }
.cip select { width:auto; padding:2px 6px; font-size:12.5px; background:transparent; border:0; color:inherit; cursor:pointer; box-shadow:none; }
.cip select:focus { box-shadow:none; }
.cip b { min-width:18px; text-align:right; }
.nokta { width:8px; height:8px; border-radius:50%; background:var(--sonuk); display:inline-block; flex:0 0 8px; }
.nokta.yesil { background:var(--yesil); box-shadow:0 0 0 3px rgba(52,211,153,.16); }
.nokta.kirmizi { background:var(--kirmizi); box-shadow:0 0 0 3px rgba(248,113,113,.16); }
.nokta.sari { background:var(--sari); box-shadow:0 0 0 3px rgba(251,191,36,.16); }
.nokta.mavi { background:var(--marka); box-shadow:0 0 0 3px rgba(0,163,224,.16); }
.govde { padding:22px 24px 46px; max-width:1320px; width:100%; }

/* ---------------------------------------------------------- başlıklar */
h1 { font-size:22px; margin:2px 0 4px; letter-spacing:-.2px; }
h2 { font-size:14px; letter-spacing:.4px; text-transform:uppercase; color:var(--sonuk); margin:26px 0 12px; }
h3 { font-size:15px; margin:0 0 10px; }
.kucuk { color:var(--sonuk); font-size:12.5px; }
.sonuk { color:var(--sonuk); }
code, .mono { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; }
code { background:var(--kod-zemin); border:1px solid var(--cizgi); padding:2px 6px; border-radius:6px; font-size:12.5px; }
.baslik-satiri { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.baslik-satiri h1 { margin:0; }
.baslik-satiri p { margin:4px 0 0; }

/* ---------------------------------------------------------- kartlar */
.kart, .tablo-sar, .govde > .uyari {
    background:var(--yuzey); border:1px solid var(--cizgi); border-radius:16px; box-shadow:var(--golge);
}
.kart { padding:18px 18px 20px; margin:0 0 18px; }
.kart > :last-child { margin-bottom:0; }
.kart-baslik { display:flex; align-items:center; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
.kart-baslik h3 { margin:0; }
.kart-baslik .sag, .kart-baslik .kucuk { margin-left:auto; }
.kart.dar { max-width:520px; }
.kart.orta { max-width:760px; }
.kart.vurgu { border-color:rgba(0,163,224,.4); }
.kart.alarm { border-color:rgba(248,113,113,.55); background:linear-gradient(180deg,rgba(248,113,113,.08),var(--yuzey) 60%); }

/* ---------------------------------------------------------- kpi */
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:13px; margin:14px 0 18px; }
.kpi .kutucuk {
    background:linear-gradient(180deg,var(--yuzey2),var(--yuzey));
    border:1px solid var(--cizgi); border-radius:16px; padding:16px 16px 14px;
    position:relative; overflow:hidden; color:var(--yazi); text-decoration:none; display:block;
}
a.kutucuk:hover { border-color:rgba(0,163,224,.45); }
.kpi .kutucuk::after {
    content:""; position:absolute; right:-26px; top:-26px; width:82px; height:82px;
    border-radius:50%; background:rgba(0,163,224,.07);
}
.kpi .im {
    width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
    background:rgba(0,163,224,.13); color:var(--marka); margin-bottom:11px;
}
.kpi .im svg { width:18px; height:18px; }
.kpi .im.mavi { background:rgba(96,165,250,.13); color:var(--mavi); }
.kpi .im.yesil { background:rgba(52,211,153,.13); color:var(--yesil); }
.kpi .im.kirmizi { background:rgba(248,113,113,.13); color:var(--kirmizi); }
.kpi .im.sari { background:rgba(251,191,36,.13); color:var(--sari); }
.kpi .im.mor { background:rgba(167,139,250,.13); color:var(--mor); }
.kpi .sayi { font-size:27px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.kpi .etiket { color:var(--sonuk); font-size:12.5px; margin-top:2px; }

/* ---------------------------------------------------------- tablo */
.tablo-sar { overflow-x:auto; margin:0 0 18px; }
.tablo-sar > table, .kart table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.8px; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--cizgi); vertical-align:middle; }
th {
    color:var(--sonuk); font-weight:600; font-size:11.5px; letter-spacing:.7px;
    text-transform:uppercase; background:var(--yuzey2); white-space:nowrap;
}
tr:last-child td { border-bottom:0; }
.tablo-sar tr:hover td, .kart table tr:hover td { background:var(--hover); }
td form { display:inline; margin:0; }
td.sag, th.sag { text-align:right; }
td.kisa { white-space:nowrap; }
tr.pasif td { color:var(--sonuk); }
.tablo-bos { padding:26px 16px; text-align:center; color:var(--sonuk); }

/* ---------------------------------------------------------- form */
label { display:block; margin:12px 0 6px; color:var(--etiket); font-size:12px; font-weight:600; letter-spacing:.3px; }
label small { display:block; font-weight:400; color:var(--sonuk); letter-spacing:0; margin-top:3px; }
input, select, textarea {
    width:100%; padding:10px 12px; border-radius:11px; border:1px solid var(--girdi-cizgi);
    background:var(--girdi-zemin); color:var(--yazi); font-size:14px; font-family:inherit; transition:.14s;
}
input[type="checkbox"], input[type="radio"] { width:auto; padding:0; accent-color:var(--marka); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--marka); box-shadow:0 0 0 3px rgba(0,163,224,.16); }
input[readonly] { color:var(--sonuk); }
textarea { resize:vertical; }
label.onay { display:flex; align-items:center; gap:9px; color:var(--yazi); font-weight:500; font-size:13.5px; letter-spacing:0; }
button, a.dugme {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    margin-top:14px; padding:10px 18px; border:0; border-radius:11px; cursor:pointer;
    background:linear-gradient(135deg,var(--marka),var(--marka2)); color:var(--marka-ustu);
    font-weight:700; font-size:13.5px; font-family:inherit; transition:.14s; text-decoration:none;
    box-shadow:0 6px 16px rgba(0,163,224,.18); white-space:nowrap;
}
button svg, a.dugme svg { width:16px; height:16px; }
button:hover, a.dugme:hover { filter:brightness(1.08); transform:translateY(-1px); }
button.sade, a.dugme.sade { background:var(--yuzey2); color:var(--sade-yazi); border:1px solid var(--cizgi); box-shadow:none; }
button.sade:hover, a.dugme.sade:hover { border-color:var(--sade-hover-cizgi); color:var(--sade-hover-yazi); }
button.tehlike, a.dugme.tehlike { background:rgba(248,113,113,.12); color:var(--kirmizi); border:1px solid rgba(248,113,113,.4); box-shadow:none; }
button.tehlike:hover { background:rgba(248,113,113,.2); }
button.kucuk, a.dugme.kucuk { padding:6px 11px; font-size:12.5px; border-radius:9px; }
button.bag { background:none; border:0; box-shadow:none; padding:0; margin:0; color:var(--marka); font-weight:600; }
button.bag:hover { transform:none; text-decoration:underline; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
td button, td a.dugme, .eylemler button, .eylemler a.dugme, .satir-ici button, .kart-baslik button, .kart-baslik a.dugme, .baslik-satiri a.dugme, .baslik-satiri button { margin-top:0; }
.eylemler { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.eylemler form { margin:0; }
.satir-ici { display:inline; margin:0; }
/* Metinden anons: "Dinle" önizlemesi */
.onizleme { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 4px; }
.onizleme button { margin-top:0; }
.onizleme [data-onizleme-durum] { flex:1 1 220px; }
.onizleme [data-onizleme-durum].hata-metni { color:var(--kirmizi); }
.onizleme audio { width:100%; max-width:420px; height:36px; }
/* Sütunlardaki etiketler farklı satır sayısında olsa bile kutular aynı hizada bitsin */
.satir { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.satir > div { flex:1; min-width:190px; }
.satir > div.dar { flex:0 0 150px; min-width:120px; }
.ikili { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.uclu { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ikili > .kart, .uclu > .kart { margin-bottom:0; }
.bolum-arasi { height:18px; }

/* Süzgeç çubuğu: kart değil, düz */
.suzgec { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.suzgec input, .suzgec select { width:auto; min-width:180px; padding:8px 11px; font-size:13.5px; }
.suzgec input[type="search"], .suzgec input[name="q"] { min-width:260px; }
.suzgec button { margin-top:0; padding:8px 14px; }

/* ---------------------------------------------------------- tanım listesi */
.alanlar { display:grid; grid-template-columns:180px 1fr; gap:9px 16px; margin:0; }
.alanlar dt { color:var(--sonuk); font-size:13px; }
.alanlar dd { margin:0; overflow-wrap:anywhere; }
.alanlar dd small { display:block; color:var(--sonuk); }

/* ---------------------------------------------------------- sekmeler */
.sekmeler { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; border-bottom:1px solid var(--cizgi); padding-bottom:10px; }
.sekmeler a { padding:7px 13px; border-radius:10px; color:var(--menu-yazi); text-decoration:none; font-weight:600; font-size:13.5px; border:1px solid transparent; }
.sekmeler a:hover { background:var(--yuzey2); color:var(--yazi); }
.sekmeler a.aktif { background:rgba(0,163,224,.14); color:var(--marka); border-color:rgba(0,163,224,.3); }
.sekmeler .sayac { margin-left:6px; font-size:11px; background:var(--yuzey2); border-radius:20px; padding:0 7px; color:var(--sonuk); }

/* ---------------------------------------------------------- rozet / uyarı / bilgi */
.rozet {
    display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px;
    font-size:11.5px; font-weight:700; letter-spacing:.2px; border:1px solid transparent; white-space:nowrap;
}
.rozet.mavi, .rozet.acik { background:rgba(0,163,224,.13); color:var(--rozet-mavi); border-color:rgba(0,163,224,.28); }
.rozet.yesil { background:rgba(52,211,153,.12); color:var(--rozet-yesil); border-color:rgba(52,211,153,.24); }
.rozet.kirmizi { background:rgba(248,113,113,.12); color:var(--kirmizi); border-color:rgba(248,113,113,.28); }
.rozet.sari { background:rgba(251,191,36,.12); color:var(--rozet-sari); border-color:rgba(251,191,36,.26); }
.rozet.mor { background:rgba(167,139,250,.13); color:var(--mor); border-color:rgba(167,139,250,.26); }
.rozet.sonuk { background:rgba(139,161,179,.1); color:var(--sonuk); border-color:rgba(139,161,179,.2); }
.kirmizi { color:var(--kirmizi); }
.yesil { color:var(--yesil); }
.sari { color:var(--sari); }
/* Uyarı kutusu blok: içindeki <b> ayrı flex öğesi olup dar ekranda sütunlara bölünmesin (Alba dersi) */
.uyari, .bilgi {
    display:block; position:relative; padding:13px 15px 13px 46px; border-radius:14px; font-size:13.5px; margin:0 0 18px;
}
.uyari { background:linear-gradient(90deg,rgba(251,191,36,.1),rgba(251,191,36,.03)); border:1px solid rgba(251,191,36,.3); color:var(--uyari-yazi); }
.uyari::before, .bilgi::before {
    content:"!"; position:absolute; left:15px; top:13px; width:20px; height:20px; border-radius:50%;
    font-weight:900; font-size:13px; display:grid; place-items:center;
}
.uyari::before { background:var(--sari); color:#1d1300; }
.bilgi.tamam { background:linear-gradient(90deg,rgba(52,211,153,.12),rgba(52,211,153,.03)); border:1px solid rgba(52,211,153,.32); color:var(--tamam-yazi); }
.bilgi.tamam::before { content:"✓"; background:var(--yesil); color:#022016; }
.bilgi.hata { background:linear-gradient(90deg,rgba(248,113,113,.13),rgba(248,113,113,.03)); border:1px solid rgba(248,113,113,.36); color:var(--hata-yazi); }
.bilgi.hata::before { background:var(--kirmizi); color:#1a0000; }
.bilgi.uyari { background:linear-gradient(90deg,rgba(251,191,36,.1),rgba(251,191,36,.03)); border:1px solid rgba(251,191,36,.3); color:var(--uyari-yazi); }
.bilgi.uyari::before { background:var(--sari); color:#1d1300; }
.bilgi.not { background:linear-gradient(90deg,rgba(0,163,224,.1),rgba(0,163,224,.02)); border:1px solid rgba(0,163,224,.3); color:var(--not-yazi); }
.bilgi.not::before { content:"i"; background:var(--marka); color:var(--marka-ustu); font-style:italic; }
.bos { text-align:center; color:var(--sonuk); padding:34px 18px; }
.bos svg { width:38px; height:38px; opacity:.55; display:block; margin:0 auto 10px; }
.bos p { margin:4px 0; }

/* ---------------------------------------------------------- grafik */
.cubuk-liste { display:flex; flex-direction:column; gap:11px; }
.cubuk-satir { display:grid; grid-template-columns:150px 1fr 52px; align-items:center; gap:12px; font-size:13px; }
.cubuk-satir > div:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cubuk-yol { height:9px; border-radius:20px; background:var(--girdi-zemin); border:1px solid var(--cizgi); overflow:hidden; }
.cubuk-dolu { height:100%; border-radius:20px; background:linear-gradient(90deg,var(--marka2),var(--marka)); }
.cubuk-dolu.yesil { background:linear-gradient(90deg,#10b981,var(--yesil)); }
.cubuk-dolu.kirmizi { background:linear-gradient(90deg,#ef4444,var(--kirmizi)); }
.cubuk-dolu.sari { background:linear-gradient(90deg,#f59e0b,var(--sari)); }
.cubuk-satir .deger { text-align:right; color:var(--sonuk); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- iş listesi (Özet "Bugün") */
.is-listesi { list-style:none; margin:0; padding:0; }
.is-listesi li { display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--cizgi); }
.is-listesi li:last-child { border-bottom:0; }
.is-listesi .im { width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; background:rgba(0,163,224,.12); color:var(--marka); }
.is-listesi .im svg { width:16px; height:16px; }
.is-listesi .im.kirmizi { background:rgba(248,113,113,.13); color:var(--kirmizi); }
.is-listesi .im.sari { background:rgba(251,191,36,.13); color:var(--sari); }
.is-listesi .im.yesil { background:rgba(52,211,153,.13); color:var(--yesil); }
.is-listesi .metin { flex:1; min-width:0; }
.is-listesi .metin small { display:block; color:var(--sonuk); }

/* ---------------------------------------------------------- büyük kod */
.kod-buyuk { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:34px; font-weight:800; letter-spacing:6px; color:var(--marka); }
.parola { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; padding:3px 8px; border-radius:6px; background:var(--kod-zemin); border:1px solid var(--cizgi); user-select:all; }

/* ---------------------------------------------------------- harita */
.harita { height:560px; border-radius:16px; border:1px solid var(--cizgi); overflow:hidden; margin:0 0 18px; background:var(--harita-zemin); }
.harita.kucuk { height:320px; }
.leaflet-container { background:var(--harita-zemin); font-family:inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--yuzey); color:var(--yazi); border:1px solid var(--cizgi); }
.leaflet-popup-content a { color:var(--marka); }
.leaflet-control-attribution { background:var(--etiket-zemin) !important; color:var(--sonuk) !important; }
.leaflet-control-attribution a { color:var(--marka2) !important; }

/* ---------------------------------------------------------- sayfalama */
.sayfalama { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 18px; color:var(--sonuk); font-size:13px; }
.sayfalama a, .sayfalama span.aktif { padding:5px 11px; border-radius:9px; border:1px solid var(--cizgi); color:var(--yazi); text-decoration:none; background:var(--yuzey); }
.sayfalama span.aktif { border-color:rgba(0,163,224,.45); color:var(--marka); }

/* ---------------------------------------------------------- ayar katmanı formu */
.ayar-satiri { display:grid; grid-template-columns:minmax(200px,1.1fr) 170px minmax(200px,1.4fr) 110px; gap:10px 14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--cizgi); }
.ayar-satiri:last-child { border-bottom:0; }
.ayar-satiri label { margin:0; }
.ayar-satiri .ad b { display:block; font-size:13.5px; color:var(--yazi); }
.ayar-satiri .ad small { color:var(--sonuk); font-size:12px; }
.ayar-satiri .kaynak { font-size:12px; color:var(--sonuk); }

/* ---------------------------------------------------------- zaman çizelgesi */
.cizelge { list-style:none; margin:0; padding:0 0 0 16px; border-left:2px solid var(--cizgi); }
.cizelge li { position:relative; padding:0 0 14px 14px; }
.cizelge li::before { content:""; position:absolute; left:-23px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--yuzey2); border:2px solid var(--marka); }
.cizelge li.kirmizi::before { border-color:var(--kirmizi); }
.cizelge li small { color:var(--sonuk); display:block; }

/* ---------------------------------------------------------- giriş */
.giris-sar { min-height:100vh; display:grid; place-items:center; padding:20px; }
.giris-ic { width:100%; max-width:410px; }
.giris-kart {
    width:100%; background:var(--yuzey); border:1px solid var(--cizgi);
    border-radius:20px; padding:30px 28px; box-shadow:var(--golge);
}
.giris-kart .marka-im { width:64px; height:64px; margin:0 auto 16px; }
.giris-kart h1 { text-align:center; font-size:19px; margin:0 0 4px; }
.giris-kart .kucuk { text-align:center; display:block; margin-bottom:10px; }
.giris-kart button { width:100%; margin-top:18px; padding:12px; }

/* Telefon menüsü açma düğmesi (büyük ekranda gizli) */
.menu-kutu { display:none; }
.menu-dugme {
    display:none; align-items:center; gap:9px; margin:0 12px 8px; padding:9px 12px;
    border:1px solid var(--cizgi); border-radius:12px; background:var(--hover2);
    color:var(--yazi); font-weight:700; font-size:13.5px; cursor:pointer; user-select:none;
}
.menu-dugme .simdiki { color:var(--marka); font-weight:600; }
.menu-kutu:checked ~ .menu-dugme { border-color:rgba(0,163,224,.45); }

/* Kısa ekranda menü sıkışıyor (Alba: 720 px dizüstünde son sayfalar "kayboluyordu") */
@media (max-height: 880px) {
    .marka-blok { padding:12px 16px 8px; }
    .marka-im { width:34px; height:34px; flex:0 0 34px; }
    .menu { padding:4px 10px; gap:1px; }
    .menu-baslik { padding:8px 10px 3px; }
    .menu a { padding:6px 12px; font-size:13.5px; border-radius:9px; }
    .yan-alt { padding:9px 14px; }
}
/* Kısa ekranda başlıklar GİZLENMİYOR, küçülüyor: menü zaten kaydırılabilir ve başlıksız liste
   (Özet'ten Sisteme 30+ satır) okunmuyordu — kullanıcı 2026-09-23'te "kategoriler kayboldu" dedi. */
@media (max-height: 720px) {
    .menu-baslik { padding:7px 10px 2px; font-size:10px; letter-spacing:1px; }
    .menu a { padding:5px 12px; font-size:13px; }
}
.yan { position:sticky; }
.yan::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:22px;
    background:linear-gradient(to bottom, transparent, var(--yan-solma)); pointer-events:none;
}

@media (max-width:1100px) { .uclu { grid-template-columns:1fr 1fr; } .ayar-satiri { grid-template-columns:1fr 150px; } }
@media (max-width:980px) { .ikili, .uclu { grid-template-columns:1fr; } }
@media (max-width:820px) {
    .kabuk { flex-direction:column; }
    .yan {
        width:100%; flex:none; height:auto; position:sticky; top:0; z-index:6;
        border-right:0; border-bottom:1px solid var(--cizgi);
    }
    .yan::after { display:none; }
    .marka-blok { padding:8px 12px; }
    .marka-im { width:30px; height:30px; flex:0 0 30px; }
    .marka-alt { display:none; }
    .menu-dugme { display:flex; }
    .menu { display:none; flex-direction:row; flex-wrap:wrap; overflow:visible; padding:6px 8px 8px; gap:6px; }
    .menu-kutu:checked ~ .menu { display:flex; }
    .menu-baslik, .yan-alt { display:none; }
    .menu a { white-space:nowrap; padding:9px 12px; font-size:13.5px; }
    .menu a.aktif::before { display:none; }
    .kart-baslik .sag, .kart-baslik .kucuk { margin-left:0; }
    .kart table { display:block; overflow-x:auto; white-space:nowrap; }
    .tepe { height:auto; padding:8px 12px; flex-wrap:wrap; gap:8px; position:static; backdrop-filter:none; }
    .tepe .yol { display:none; }
    .tepe form { order:2; flex:1 1 100%; }
    .tepe input[name="q"] { width:100%; }
    .tepe .sag { order:1; margin-left:0; flex-wrap:wrap; gap:6px; }
    .govde { padding:14px 12px 40px; }
    h1 { font-size:19px; }
    .kpi { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
    .kpi .kutucuk { padding:12px 12px 10px; }
    .kpi .sayi { font-size:22px; }
    .satir > div, .satir > div.dar { min-width:100%; flex:1 1 100%; }
    .kart { padding:14px; }
    th, td { padding:9px 10px; }
    input, select, textarea { font-size:16px; }
    .alanlar { grid-template-columns:1fr; gap:2px; }
    .alanlar dd { margin-bottom:10px; }
    .ayar-satiri { grid-template-columns:1fr; }
    .harita { height:420px; }
    .suzgec input, .suzgec select, .suzgec input[name="q"] { min-width:0; width:100%; }
    .cubuk-satir { grid-template-columns:100px 1fr 42px; }
}
@media (max-width:420px) {
    .kpi { grid-template-columns:1fr 1fr; }
    .govde { padding:12px 10px 36px; }
}
/* ---------------------------------------------------------- küçük parçalar */
/* data-goster ile gizlenen alan: bileşen kendi display'ini koysa da gizli kalsın */
[hidden] { display:none !important; }
.ozet-eylemler { display:flex; gap:8px; flex-wrap:wrap; }
.suzgec label.onay { margin:0; white-space:nowrap; }
.suzgec input[type="checkbox"] { min-width:0; }
.nokta.mor { background:var(--mor); box-shadow:0 0 0 3px rgba(167,139,250,.16); }
pre.notlar, pre.kod {
    white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 12px; padding:10px 12px; border-radius:11px;
    background:var(--girdi-zemin); border:1px solid var(--cizgi); font-size:13px;
}
pre.notlar { font-family:inherit; }
pre.kod { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; max-height:420px; overflow:auto; }
.leaflet-tooltip.bolge-etiket { background:var(--etiket-zemin); color:var(--yazi); border:1px solid rgba(167,139,250,.5); box-shadow:none; font-size:12px; }
.leaflet-tooltip.bolge-etiket::before { display:none; }
/* Kroki yerleştirme tutamakları (1 sol üst, 2 sağ üst, 3 sol alt) — krokiler.py */
.kroki-tutamak { background:#00a3e0; color:#fff; border:2px solid #07111a; border-radius:50%; font:700 12px/20px system-ui, sans-serif; text-align:center; box-shadow:0 0 0 2px rgba(255,255,255,.6); cursor:grab; }
.kroki-katman { max-width:none !important; max-height:none !important; }
.toplu-cubuk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:10px 12px;
    background:rgba(0,163,224,.05); border:1px solid rgba(0,163,224,.2); border-radius:12px; }
.toplu-cubuk select { width:auto; min-width:200px; padding:7px 10px; }
.toplu-cubuk button { margin-top:0; }
.toplu-cubuk input[name="metin"] { flex:1 1 260px; width:auto; padding:7px 10px; }
.kart-ici-tablo { margin:0 -18px; }
.kart-ici-tablo table { border-top:1px solid var(--cizgi); }
.iki-sutun-liste { columns:2; column-gap:24px; }
@media (max-width:820px) { .iki-sutun-liste { columns:1; } .kart-ici-tablo { margin:0 -14px; } }

/* Yatay kaymanın asıl sebebi: esnek kutuların alt sınırı "içerik kadar" */
.kabuk, .yan, .icerik, .menu, .tepe, .govde, .tablo-sar { min-width:0; }
html, body { max-width:100%; overflow-x:hidden; }

/* ------------------------------------------------- iki adımlı doğrulama */
.yedek-kodlar { list-style:none; margin:12px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; }
.yedek-kodlar li { background:var(--yuzey2); border:1px solid var(--cizgi); border-radius:9px; padding:8px 10px; text-align:center; }
.yedek-kodlar code { font-size:14px; letter-spacing:.5px; }

/* ---------------------------------------------------------- kurulum QR'ı */
.qr-alani { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.qr-kutu { background:#fff; border-radius:14px; padding:6px; line-height:0; justify-self:start; }
.qr-kutu svg { display:block; }
@media (max-width:720px) { .qr-alani { grid-template-columns:1fr; } .qr-kutu { justify-self:center; } }

/* Dahili formları: gelişmiş seçenekler, kodek kutuları, parola girdisi */
.form-bolum { margin-top:16px; padding-top:10px; border-top:1px solid var(--cizgi); }
details.form-bolum > summary { cursor:pointer; color:var(--etiket); font-size:13px; font-weight:600; padding:4px 0; }
.alan-etiketi { display:block; margin:12px 0 6px; color:var(--etiket); font-size:12px; font-weight:600; letter-spacing:.3px; }
.kodek-secimi { display:flex; flex-wrap:wrap; gap:6px 18px; }
.kodek-secimi label.onay { margin:0; }
.parola-girdi { display:flex; gap:6px; align-items:center; margin-top:6px; }
.parola-girdi input { flex:1; min-width:0; margin:0; }
.parola-girdi button { flex:none; }

/* Telefon tanımları giriş sayfası: adımlar, tür açıklamaları, etiketli seçim */
.adimlar { margin:4px 0 10px; padding-left:20px; }
.adimlar li { margin:0 0 6px; line-height:1.5; }
.tanim-listesi { margin:0; }
.tanim-listesi dt { font-weight:600; margin-top:8px; }
.tanim-listesi dt:first-child { margin-top:0; }
.tanim-listesi dd { margin:2px 0 0; color:var(--sonuk, inherit); line-height:1.45; }
.suzgec.etiketli { align-items:flex-end; }
.suzgec.etiketli > label { display:flex; flex-direction:column; gap:4px; margin:0; font-size:12.5px; }

/* güvenlik çitleri: kapsam/alıcı seçimi, çokgen köşe tutamağı */
.secim-listesi { display:flex; flex-wrap:wrap; gap:6px 18px; margin:4px 0; }
.secim-listesi label.onay { margin:0; }
.cit-kose { width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--kirmizi); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.cit-kose.serbest { border-color:var(--yesil); }

/* Kurulum → Uygulamayı indir */
.indir-satiri { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:6px 0 4px; }
.indir-satiri .eylemler { margin-top:0; }
.indir-satiri .rozet { margin-left:4px; }
code.kirp { word-break:break-all; }
.kart-baslik h3 svg { width:18px; height:18px; vertical-align:-3px; margin-right:6px; }
.tema-secim select { width:auto; padding:2px 6px; border-radius:8px; font-size:12.5px; }
/* Aranabilir seçim listesi (panel.js data-secim-listesi): seçilenler yerinde, ötekiler "ara ve ekle"den. */
[data-secim-oge][hidden], [data-secim-listesi][hidden] { display:none !important; }
.secim-ekle { position:relative; margin:6px 0 8px; max-width:440px; }
.secim-acilir { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; background:var(--yuzey);
    border:1px solid var(--cizgi); border-radius:11px; box-shadow:var(--golge); max-height:280px; overflow:auto; padding:4px; }
.secim-acilir button { display:block; width:100%; text-align:left; background:transparent; color:var(--yazi); border:0;
    box-shadow:none; padding:7px 10px; border-radius:8px; font-weight:500; white-space:normal; }
.secim-acilir button:hover, .secim-acilir button:focus { background:var(--yuzey2); }
.secim-acilir span { display:block; padding:7px 10px; }

/* ---------------------------------------------------------- web telefon (2026-09-30 web telefon; web_telefon.html/.js) */
/* Solda telefon (dar sütun), sağda son çağrılar + dahili bilgisi; dar ekranda alt alta. */
.wt-duzen { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:18px; align-items:start; }
.wt-duzen.tek { grid-template-columns:minmax(0,760px); }
.wt-duzen .kart { margin-bottom:18px; }
.wt-gizli { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wt-durum { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px; background:var(--yuzey2); border:1px solid var(--cizgi); font-weight:600; font-size:13.5px; }
.wt-durum.hata { color:var(--kirmizi); border-color:rgba(248,113,113,.4); }
.wt-telefon .wt-hata { margin:12px 0 0; }
.wt-gelen { margin:14px 0 0; padding:14px; border-radius:14px; text-align:center; border:1px solid rgba(52,211,153,.45);
    background:linear-gradient(180deg,rgba(52,211,153,.13),rgba(52,211,153,.02)); animation:wt-nabiz 1.4s ease-in-out infinite; }
@keyframes wt-nabiz { 50% { box-shadow:0 0 0 6px rgba(52,211,153,.12); } }
.wt-gelen-baslik { color:var(--yesil); font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.wt-arayan { font-size:19px; font-weight:700; margin:4px 0 0; overflow-wrap:anywhere; }
.wt-cagri { text-align:center; margin:14px 0 0; }
.wt-cagri-durum { color:var(--sonuk); font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.wt-karsi { font-size:18px; font-weight:700; overflow-wrap:anywhere; }
.wt-sure { color:var(--marka); font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:15px; font-variant-numeric:tabular-nums; min-height:1.3em; }
input.wt-numara { margin-top:14px; padding:12px; text-align:center; font-size:26px; font-weight:700; letter-spacing:1.5px; font-variant-numeric:tabular-nums; }
input.wt-numara[readonly] { color:var(--yazi); background:var(--yuzey2); }
.wt-tuslar { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:12px 0 0; }
.wt-telefon button.wt-tus { flex-direction:column; gap:1px; margin:0; padding:9px 0 7px; border-radius:14px; background:var(--yuzey2);
    color:var(--yazi); border:1px solid var(--cizgi); box-shadow:none; font-size:22px; font-weight:700; line-height:1.1; }
.wt-tus small { min-height:12px; color:var(--sonuk); font-size:9.5px; font-weight:600; letter-spacing:1.4px; }
.wt-telefon button.wt-tus:hover { border-color:var(--sade-hover-cizgi); filter:none; transform:none; }
.wt-telefon button.wt-tus:active, .wt-telefon button.wt-tus.basili { background:rgba(0,163,224,.16); border-color:rgba(0,163,224,.45); }
.wt-eylemler { display:flex; gap:9px; margin-top:12px; }
.wt-eylemler button { flex:1; margin-top:0; padding:12px 10px; }
.wt-telefon button:focus-visible { outline:2px solid var(--marka); outline-offset:2px; }
.wt-telefon button.wt-yesil { background:linear-gradient(135deg,#10b981,var(--yesil)); color:#022016; box-shadow:0 6px 16px rgba(16,185,129,.2); }
.wt-telefon button.wt-kirmizi { background:linear-gradient(135deg,#ef4444,var(--kirmizi)); color:#fff; box-shadow:0 6px 16px rgba(239,68,68,.2); }
.wt-telefon button.sade.basili { background:rgba(251,191,36,.14); color:var(--sari); border-color:rgba(251,191,36,.45); }
.wt-hizli { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--cizgi); }
.wt-hizli button { flex:1; margin-top:0; }
.wt-gecmis { list-style:none; margin:0; padding:0; }
.wt-gecmis li { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--cizgi); }
.wt-gecmis li:last-child { border-bottom:0; }
.wt-gecmis .yon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:9px; font-weight:800;
    background:rgba(0,163,224,.12); color:var(--marka); }
.wt-gecmis .yon.gelen { background:rgba(52,211,153,.12); color:var(--yesil); }
.wt-gecmis .yon.kacan { background:rgba(248,113,113,.12); color:var(--kirmizi); }
.wt-gecmis .metin { flex:1; min-width:0; overflow-wrap:anywhere; }
.wt-gecmis .metin small { display:block; color:var(--sonuk); }
.wt-gecmis button { margin-top:0; }
.wt-notlar { margin:12px 0 0; padding-left:18px; }
.wt-duzen .alanlar { grid-template-columns:minmax(80px,max-content) minmax(0,1fr); }
.wt-notlar li { margin:0 0 5px; }
@media (prefers-reduced-motion: reduce) { .wt-gelen { animation:none; } }
@media (max-width:980px) { .wt-duzen { grid-template-columns:minmax(0,1fr); } .wt-telefon { max-width:460px; } }

/* ---------------------------------------------------- ayrı pencere (taban.html `sade`; 2026-09-30, web telefon) */
.sade-sar { max-width:560px; margin:0 auto; padding:14px 14px 28px; }
.sade-sar .wt-duzen { grid-template-columns:minmax(0,1fr); }
.wt-baslik-sag { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }