/* ══════════════════════════════════════════════════════════════════
   tiklasor — tasarim sistemi
   Tek dosya, derleme adimi yok, dis bagimlilik yok.
   Kamu kurumlarina sunulacak bir panel: netlik ve ciddiyet oncelikli.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* marka — logodan turetildi (#182B43 lacivert); tonlar ayni renk tonundan */
  --marka:        #182b43;   /* logonun tam rengi: butonlar, aktif durumlar */
  --marka-koyu:   #0f1c2c;   /* uzerine gelince */
  --marka-orta:   #879bb5;   /* ikincil vurgular */
  --marka-acik:   #f0f3f7;   /* aktif menu / rozet zemini */
  --marka-cizgi:  #dbe1e9;   /* marka tonlu kenarlik */
  --lacivert:     #0d1929;   /* giris ekrani zemini */

  /* zemin ve metin */
  --zemin:        #f6f8fa;
  --kart:         #ffffff;
  --metin:        #12161c;
  --metin-orta:   #464f5a;
  --soluk:        #87919e;
  --kenar:        #e7ebef;
  --kenar-koyu:   #d3d9e0;

  /* durum */
  --basari:       #047857;  --basari-bg: #ecfdf5;
  --uyari:        #b45309;  --uyari-bg:  #fffbeb;
  --hata:         #be123c;  --hata-bg:   #fff1f2;
  --bilgi:        #0369a1;  --bilgi-bg:  #f0f9ff;

  /* platformlar */
  --yt: #d92d20; --yt-bg: #fef3f2;
  --gn: #1570ef; --gn-bg: #eff8ff;
  --tw: #101828; --tw-bg: #f2f4f7;
  --ig: #b42ecb; --ig-bg: #fdf4ff;
  --fb: #1849a9; --fb-bg: #eff8ff;
  --tk: #0b0b12; --tk-bg: #ecfeff;

  --r-s: 7px; --r-m: 11px; --r-l: 15px;
  --g1: 0 1px 2px rgba(16,24,40,.05);
  --g2: 0 2px 10px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --g3: 0 16px 40px rgba(16,24,40,.13);
  --yan: 252px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 640; letter-spacing: -.02em; }
h1 { font-size: 23px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0; }
code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
       background: #f2f3f7; padding: 1px 5px; border-radius: 4px; }

/* ─────────────────────────────────────────────────────── yerlesim */

.kabuk { display: flex; min-height: 100vh; }

.yan {
  width: var(--yan); flex-shrink: 0;
  background: var(--kart); border-right: 1px solid var(--kenar);
  padding: 18px 13px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

/* marka */
.marka { display: flex; align-items: center; padding: 2px 8px 4px; }
/* Tam logo (simge + yazi) tek gorsel; SVG'nin kendi ic boslugu var */
.marka .logo { height: 40px; width: auto; display: block; }

/* aktif musteri secici */
.musteri-secici {
  margin: 16px 0 6px; padding: 9px 11px;
  border: 1px solid var(--kenar); border-radius: var(--r-m);
  background: #fbfbfd; display: block; transition: border-color .12s, background .12s;
}
.musteri-secici:hover { border-color: var(--marka-orta); background: var(--marka-acik); }
.musteri-secici .baslik {
  font-size: 10px; font-weight: 620; letter-spacing: .09em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 3px;
}
.musteri-secici .isim {
  font-size: 13.5px; font-weight: 600; display: flex;
  align-items: center; justify-content: space-between; gap: 8px;
}
.musteri-secici .isim span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.musteri-secici .ok { color: var(--soluk); font-size: 11px; flex-shrink: 0; }

.menu-baslik {
  font-size: 10px; font-weight: 640; text-transform: uppercase;
  letter-spacing: .09em; color: var(--soluk); padding: 18px 10px 6px;
}
.menu-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-s); margin-bottom: 1px;
  color: var(--metin-orta); font-size: 14px; font-weight: 520;
  transition: background .12s, color .12s;
}
.menu-oge:hover { background: #f2f3f7; color: var(--metin); }
.menu-oge.aktif { background: var(--marka-acik); color: var(--marka-koyu); font-weight: 600; }
.menu-oge .ikon { display: grid; place-items: center; width: 20px; flex-shrink: 0; }
.menu-oge .ik { opacity: .62; transition: opacity .12s; }
.menu-oge:hover .ik { opacity: .85; }
.menu-oge.aktif .ik { opacity: 1; }
.ik { display: block; }
.menu-oge .rozet {
  margin-left: auto; background: var(--marka); color: #fff;
  font-size: 10.5px; font-weight: 640; padding: 1px 6px; border-radius: 20px;
}

.yan-alt { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--kenar); }
.kisi { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--marka); color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 650;
}
.kisi .ad { font-size: 13px; font-weight: 580; }
.kisi .rol { font-size: 11px; color: var(--soluk); }

.icerik { flex: 1; min-width: 0; padding: 26px 34px 64px; }
.dar { max-width: 760px; }

.ust {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.ust .alt-yazi { color: var(--soluk); font-size: 13.5px; margin-top: 4px; }

/* ─────────────────────────────────────────────────────── kart */

.kart { background: var(--kart); border: 1px solid var(--kenar);
        border-radius: var(--r-m); box-shadow: var(--g1); }
.kart-ic { padding: 18px 20px; }
.kart-bas { padding: 14px 20px; border-bottom: 1px solid var(--kenar);
            display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kart-alt { padding: 14px 20px; border-top: 1px solid var(--kenar); background: #fbfbfd;
            border-radius: 0 0 var(--r-m) var(--r-m); }

.izgara { display: grid; gap: 16px; }
/* min-width:0 SART. Grid ve flex cocuklari varsayilan olarak icerigin
   dogal genisliginden dar olamaz (min-width:auto). Icinde genis bir tablo
   olan kart bu yuzden kolonu tasirip sayfayi yatay kaydiriyordu. */
.izgara > *, .yigin > * { min-width: 0; }
.tablo-sar { min-width: 0; }
/* Satir ici style ile yazilmis grid tanimlari medya sorgulariyla EZILEMEZ.
   Bu yuzden hepsi sinifa cevrildi - mobilde tek kolona duserler. */
.iz-genis { grid-template-columns: 1.5fr 1fr; }   /* icerik + yan panel */
.iz-yan   { grid-template-columns: 1fr 320px; }   /* icerik + sabit yan */
.ust-hizali { align-items: start; }
.iz4 { grid-template-columns: repeat(4, 1fr); }
.iz3 { grid-template-columns: repeat(3, 1fr); }
.iz2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1180px) { .iz4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .iz4,.iz3,.iz2 { grid-template-columns: 1fr; } }

.olcum { padding: 16px 18px; }
.olcum .etiket { font-size: 12.5px; color: var(--soluk); font-weight: 550; }
.olcum .deger { font-size: 28px; font-weight: 670; letter-spacing: -.035em;
                margin-top: 5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.olcum .not { font-size: 12px; color: var(--soluk); margin-top: 4px; }
.olcum.vurgu .deger { color: var(--marka); }
.olcum.dikkat .deger { color: var(--uyari); }
.olcum.risk .deger { color: var(--hata); }

/* ─────────────────────────────────────────────────────── buton */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-s);
  border: 1px solid var(--kenar-koyu); background: var(--kart); color: var(--metin);
  font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: #f7f8fb; border-color: #bfc5d2; }
.btn.ana { background: var(--marka); border-color: var(--marka); color: #fff;
           box-shadow: 0 1px 3px rgba(24,43,67,.26); }
.btn.ana:hover { background: var(--marka-koyu); border-color: var(--marka-koyu); }
.btn.tehlike { color: var(--hata); border-color: #f5c2ce; background: var(--hata-bg); }
.btn.tehlike:hover { background: #ffe4e9; }
.btn.kucuk { padding: 5px 10px; font-size: 12.5px; }
.btn.genis { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────── form */

.alan { margin-bottom: 16px; }
.alan > label { display: block; font-size: 13px; font-weight: 580;
                margin-bottom: 6px; color: var(--metin); }
.alan .ipucu { font-size: 12.5px; color: var(--soluk); margin-top: 5px; line-height: 1.5; }

/* DIKKAT: `input[type=text]` yazmiyoruz. type ozniteligi HIC YOKSA
   o secici eslesmez ve alan tamamen bicimsiz kalir (genislik yok, kenarlik
   yok, odak halkasi yok). Bunun yerine bicimlenmemesi gerekenleri disliyoruz. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),
select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--kenar-koyu); border-radius: var(--r-s);
  background: var(--kart); color: var(--metin); font: inherit; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marka);
  box-shadow: 0 0 0 3px rgba(24,43,67,.14);
}
input::placeholder, textarea::placeholder { color: #aeb7c2; }
textarea { resize: vertical; min-height: 76px; }
.satirli { display: flex; gap: 12px; } .satirli > * { flex: 1; }
@media (max-width: 640px) { .satirli { flex-direction: column; gap: 0; } }

.secim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 9px; }
.secim { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
         border: 1px solid var(--kenar-koyu); border-radius: var(--r-s);
         cursor: pointer; font-size: 13.5px; font-weight: 530;
         transition: border-color .12s, background .12s; }
.secim:hover { border-color: #bfc5d2; background: #fafbfd; }
.secim input { width: 15px; height: 15px; accent-color: var(--marka); cursor: pointer; }
.secim:has(input:checked) { border-color: var(--marka); background: var(--marka-acik); }
.secim.kilitli { opacity: .5; cursor: not-allowed; background: #f6f7fa; }
.secim .kilit { margin-left: auto; font-size: 11px; color: var(--soluk); }

.anahtar { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; }
.anahtar input { width: 16px; height: 16px; accent-color: var(--marka); }

/* ─────────────────────────────────────────────────────── rozet */

.rz { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
      border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rz.youtube{color:var(--yt);background:var(--yt-bg)} .rz.google_news{color:var(--gn);background:var(--gn-bg)}
.rz.twitter{color:var(--tw);background:var(--tw-bg)} .rz.instagram{color:var(--ig);background:var(--ig-bg)}
.rz.facebook{color:var(--fb);background:var(--fb-bg)}
.rz.tiktok{color:var(--tk);background:var(--tk-bg)}
.rz.gri{color:var(--metin-orta);background:#f0f1f5} .rz.yesil{color:var(--basari);background:var(--basari-bg)}
.rz.sari{color:var(--uyari);background:var(--uyari-bg)} .rz.kirmizi{color:var(--hata);background:var(--hata-bg)}
.rz.mor{color:var(--marka-koyu);background:var(--marka-acik)} .rz.mavi{color:var(--bilgi);background:var(--bilgi-bg)}
.rz.buyuk { padding: 4px 11px; font-size: 12.5px; }

.nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nokta.canli { animation: nabiz 1.4s ease-in-out infinite; }
@keyframes nabiz { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ─────────────────────────────────────────────────────── sonuc */

.sonuc { display: flex; gap: 14px; padding: 15px 18px;
         border-bottom: 1px solid var(--kenar); transition: background .1s; }
.sonuc:last-child { border-bottom: none; }
.sonuc:hover { background: #fbfcfe; }
.sonuc.okunmamis::before { content:""; width:3px; margin:-15px 0 -15px -18px;
                           background: var(--marka); flex-shrink:0; border-radius:0 2px 2px 0; }
.sonuc .gorsel { width: 108px; height: 64px; border-radius: 8px; object-fit: cover;
                 flex-shrink: 0; background: #eef0f4; border: 1px solid var(--kenar); }
.sonuc .govde { flex: 1; min-width: 0; }
.sonuc .ustsatir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                   font-size: 12.5px; color: var(--soluk); margin-bottom: 5px; }
.sonuc .baslik { font-weight: 600; font-size: 14.5px; line-height: 1.4;
                 display: block; margin-bottom: 6px; }
.sonuc .baslik:hover { color: var(--marka); }
.sonuc .islemler { display: flex; align-items: flex-start; gap: 4px; flex-shrink: 0; }

.eslesme { font-size: 13px; line-height: 1.6; color: var(--metin-orta);
           padding: 7px 11px; background: #f7f8fb; border-radius: 7px;
           border-left: 2px solid var(--kenar-koyu); margin-top: 5px; }
.eslesme mark { background: #fef0c7; color: #7a2e0e; padding: 0 2px;
                border-radius: 3px; font-weight: 580; }
.eslesme .an { display: inline-flex; align-items: center; gap: 4px; font-weight: 620;
               color: var(--marka-koyu); font-size: 12px; background: var(--marka-acik);
               padding: 1px 7px; border-radius: 5px; margin-right: 6px; }
.eslesme .kaynak { font-size: 10.5px; font-weight: 650; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--soluk); margin-right: 6px; }

.yildiz { background:none; border:none; cursor:pointer; padding:3px 5px; font-size:16px;
          color:#d3d7e0; line-height:1; transition: color .12s, transform .1s; }
.yildiz:hover { color:#eaaa08; transform: scale(1.14); }
.yildiz.dolu { color:#eaaa08; }

/* ─────────────────────────────────────────────────────── filtre */

.filtre { display:flex; gap:9px; align-items:center; flex-wrap:wrap;
          padding:12px 18px; border-bottom:1px solid var(--kenar); }
.filtre select, .filtre input[type=text] { width:auto; min-width:130px; padding:6px 10px; font-size:13px; }
.filtre .ayirac { width:1px; height:20px; background:var(--kenar); }
.filtre .sag { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* ─────────────────────────────────────────────────────── tablo */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 10px 16px; font-size: 10.5px; font-weight: 650;
     text-transform: uppercase; letter-spacing: .06em; color: var(--soluk);
     border-bottom: 1px solid var(--kenar); white-space: nowrap; background: #fbfbfd; }
td { padding: 12px 16px; border-bottom: 1px solid #f1f2f6; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fbfcfe; }
.tablo-sar { overflow-x: auto; }
/* Tablo satirindaki islem dugmeleri - her biri ayri form oldugu icin
   flex ile yan yana tutuluyor. */
.satir-islem { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.satir-islem form { display: inline; }

/* ─────────────────────────────────────────────────────── grafik */

.cubuklar { display:flex; align-items:flex-end; gap:4px; height:112px; padding-top:8px; }
.cubuk { flex:1; height:100%; display:flex; flex-direction:column;
         justify-content:flex-end; align-items:center; gap:5px; min-width:0; }
.cubuk .oran { flex:1; width:100%; display:flex; align-items:flex-end; }
.cubuk .dolgu { width:100%; background:linear-gradient(180deg,#3d5471,var(--marka));
                border-radius:4px 4px 2px 2px; min-height:3px; transition:opacity .12s; }
.cubuk:hover .dolgu { opacity:.75; }
.cubuk .gun { font-size:10.5px; color:var(--soluk); white-space:nowrap; }

/* Ses payi - tek satirda oransal bant */
.ses-cubuk { display:flex; height:34px; border-radius:8px; overflow:hidden;
             background:#eef0f4; }
.ses-cubuk span { display:block; transition:opacity .12s; }
.ses-cubuk span:hover { opacity:.82; }

/* Coklu gunluk grafik - her gun icin takip sayisi kadar sutun */
.cok-cubuk { display:flex; align-items:flex-end; gap:5px; height:150px;
             overflow-x:auto; padding-top:8px; }
.gun-grup { flex:1; min-width:26px; height:100%; display:flex;
            flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.gun-grup .sutunlar { flex:1; width:100%; display:flex; align-items:flex-end;
                      gap:2px; justify-content:center; }
.gun-grup .sutunlar i { flex:1; max-width:11px; min-height:2px;
                        border-radius:3px 3px 1px 1px; display:block; }
.gun-grup .gun { font-size:10px; color:var(--soluk); white-space:nowrap; }

.oran-satir { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13.5px; }
.oran-satir .cizgi { flex:1; height:6px; background:#eef0f4; border-radius:4px; overflow:hidden; }
.oran-satir .cizgi i { display:block; height:100%; border-radius:4px; }
.oran-satir .adet { font-variant-numeric:tabular-nums; font-weight:600; min-width:34px; text-align:right; }

/* ─────────────────────────────────────────────────────── uyari / bos */

.uyari { padding:11px 14px; border-radius:var(--r-s); font-size:13.5px;
         display:flex; gap:9px; align-items:flex-start; line-height:1.5; }
.uyari.bilgi{background:var(--bilgi-bg);color:var(--bilgi)}
.uyari.basari{background:var(--basari-bg);color:var(--basari)}
.uyari.dikkat{background:var(--uyari-bg);color:#92400e}
.uyari.hata{background:var(--hata-bg);color:var(--hata)}

.bos { text-align:center; padding:44px 24px; color:var(--soluk); }
/* Altinda form olan bos durumlarda daha derli toplu dursun */
.kart > .bos + .kart-alt { border-top:1px solid var(--kenar); }
.bos .im { font-size:30px; margin-bottom:12px; opacity:.45; }
.bos h3 { color:var(--metin-orta); margin-bottom:6px; }
.bos p { font-size:13.5px; max-width:400px; margin:0 auto 16px; line-height:1.6; }

/* ─────────────────────────────────────────────────────── giris */

.giris-sayfa { min-height:100vh; display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 940px) { .giris-sayfa { grid-template-columns: 1fr; }
                            .giris-tanitim { display:none; } }
.giris-form { display:grid; place-items:center; padding:32px; background:var(--zemin); }
.giris-kutu { width:100%; max-width:378px; }
.giris-kutu .marka { justify-content:center; padding-bottom:22px; }

.giris-tanitim {
  background: linear-gradient(158deg, #09131f 0%, var(--marka) 52%, #263e5c 100%);
  color:#fff; padding:56px 52px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.giris-tanitim::after {
  content:""; position:absolute; inset:auto -80px -120px auto; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle,rgba(105,152,211,.28),transparent 68%);
}
.giris-tanitim h2 { font-size:29px; line-height:1.28; letter-spacing:-.03em; margin-bottom:16px; }
.giris-tanitim p { color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.65; max-width:420px; }
.tanitim-liste { margin-top:32px; display:flex; flex-direction:column; gap:13px; position:relative; }
.tanitim-liste div { display:flex; align-items:center; gap:11px; font-size:14px;
                     color:rgba(255,255,255,.9); }
.tanitim-liste .im { width:26px; height:26px; border-radius:7px; flex-shrink:0;
                     background:rgba(255,255,255,.13); display:grid; place-items:center; font-size:12px; }

/* ─────────────────────────────────────────────────────── ufak */

.soluk{color:var(--soluk)} .orta{color:var(--metin-orta)}
.k11{font-size:11px} .k12{font-size:12px} .k13{font-size:13px} .k14{font-size:14px}
.kalin{font-weight:600}
.satir{display:flex;align-items:center;gap:8px}
.aralik{display:flex;align-items:center;justify-content:space-between;gap:12px}
.yigin{display:flex;flex-direction:column;gap:16px}
.kes{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sag{text-align:right} .mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.htmx-request{opacity:.55;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   Mobil / tablet
   ══════════════════════════════════════════════════════════════════ */

/* Mobil ust cubuk - genis ekranda gizli */
.mobil-ust { display: none; }
.menu-ortu { display: none; }
.menu-kapat { display: none; }

@media (max-width: 1100px) {
  .iz-genis, .iz-yan { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* ── Kenar cubugu cekmeceye donusur ── */
  .mobil-ust {
    display: flex; align-items: center; gap: 12px;
    position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 60;
    padding: 0 14px; background: var(--kart);
    border-bottom: 1px solid var(--kenar); box-shadow: var(--g1);
  }
  .mobil-ust .menu-dugme {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--kenar-koyu); border-radius: var(--r-s);
    background: var(--kart); line-height: 1; padding: 0; color: var(--metin-orta);
  }
  .mobil-ust .marka { padding: 0; }
  .mobil-ust .marka .logo { height: 32px; }
  .mobil-ust .simdiki {
    margin-left: auto; font-size: 12px; font-weight: 580; color: var(--soluk);
    max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .yan {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
    width: 272px; height: 100dvh; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--g3);
    overflow-y: auto;
  }
  .yan.acik { transform: translateX(0); }
  /* Cekmece ekranin cogunu kapatiyor; disariya dokunmak icin kalan serit
     dar. Bu yuzden cekmecenin kendi icinde kapatma dugmesi var. */
  .menu-kapat {
    display: grid; place-items: center; position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; padding: 0; cursor: pointer;
    border: 1px solid var(--kenar); border-radius: var(--r-s);
    background: var(--kart); color: var(--metin-orta); line-height: 1;
  }
  .yan { padding-top: 16px; }
  .yan .marka { padding-right: 46px; }
  .menu-ortu {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(9,17,27,.45); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .menu-ortu.acik { opacity: 1; pointer-events: auto; }

  .icerik { padding: 74px 16px 56px; }

  /* ── Baslik bolgesi alt alta ── */
  .ust { flex-direction: column; align-items: stretch; gap: 12px; }
  .ust .satir { flex-wrap: wrap; }
  .ust .satir > * { flex: 1 1 auto; }
  .ust select, .ust .btn { min-height: 40px; }

  /* ── Olcum kartlari ikili ── */
  .iz4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .iz3, .iz2 { grid-template-columns: 1fr; }
  .olcum .deger { font-size: 24px; }

  /* ── Filtre cubugu: yatay kaydirilabilir tek satir ── */
  .filtre {
    flex-wrap: nowrap; overflow-x: auto; padding: 10px 14px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .filtre > * { flex-shrink: 0; }
  .filtre .sag { margin-left: 8px; }
  .filtre input[type=text] { min-width: 150px; }

  /* ── Sonuc kartlari ── */
  .sonuc { padding: 13px 14px; gap: 11px; }
  .sonuc .gorsel { width: 74px; height: 46px; }
  .sonuc .baslik { font-size: 14px; }
  .eslesme { font-size: 12.5px; padding: 6px 9px; }

  .kart-ic, .kart-bas, .kart-alt { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 20px; }
}

@media (max-width: 560px) {
  .iz4 { grid-template-columns: 1fr; }
  .icerik { padding: 70px 12px 48px; }
  /* Kucuk ekranda gorsel yer kaplamasin, metin one ciksin */
  .sonuc .gorsel { display: none; }
  .sonuc .ustsatir { gap: 6px; font-size: 12px; }
  .ust .satir > * { flex: 1 1 100%; }
  .kart-ic, .kart-bas, .kart-alt { padding-left: 13px; padding-right: 13px; }
  .bos { padding: 34px 16px; }
  .cubuklar { height: 88px; }
}

/* Dokunmatik cihazlarda hedefler yeterince buyuk olsun */
@media (hover: none) {
  .btn { min-height: 38px; }
  .btn.kucuk { min-height: 32px; }
  .menu-oge { padding: 10px; }
  .yildiz { padding: 6px 8px; font-size: 18px; }
}

/* ─────────────────────────────────────────────────────── belediye haritasi */

.harita-kabuk { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
                gap: 16px; align-items: start; }
/* Panel harita ile birlikte kaymasin: uzun listelerde harita hep gorunur kalir */
.harita-kabuk > #il-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px);
                            overflow: auto; border-radius: var(--r-m); }
.harita-kart { padding: 14px 16px 10px; }

.harita { width: 100%; height: auto; display: block; --secili: #e58e26; }
.harita .il { cursor: pointer; outline: none; }
.harita .il path { fill: #e3e6ee; stroke: #fff; stroke-width: 1px; stroke-linejoin: round;
                   vector-effect: non-scaling-stroke; transition: fill .12s; }
.harita .il.dolu path { fill: var(--marka-orta); }
.harita .il.dolu.buyuk path { fill: var(--marka); }
.harita .il:hover path { fill-opacity: .78; }
.harita .il:focus-visible path { stroke: var(--secili); stroke-width: 2.5px; }
/* Secili durum, dolu/buyuk kurallarindan DAHA OZGUL olmali; yoksa ezilir */
.harita .il.secili path, .harita .il.secili.dolu path, .harita .il.secili.dolu.buyuk path {
  fill: var(--secili); fill-opacity: 1; stroke: #7c4a06; stroke-width: 1.6px; }

.harita-lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 4px 4px;
                 font-size: 12px; color: var(--soluk); }
.harita-lejant .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
                     background: #e3e6ee; margin-right: 6px; vertical-align: -1px;
                     border: 1px solid rgba(16,24,40,.08); }
.harita-lejant .sw.dolu { background: var(--marka-orta); }
.harita-lejant .sw.buyuk { background: var(--marka); }

.harita-ipucu { position: fixed; z-index: 30; pointer-events: none; white-space: nowrap;
                background: var(--marka-koyu); color: #fff; font-size: 12.5px;
                padding: 5px 9px; border-radius: 6px; box-shadow: var(--g2); }
.harita-ipucu[hidden] { display: none; }

.kurum { padding: 12px 0; border-top: 1px solid var(--kenar); }
.kurum:first-child { border-top: 0; padding-top: 0; }
.kurum-bas { display: flex; align-items: baseline; justify-content: space-between;
             gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.kurum-bas h3 { font-size: 14px; }
.hesaplar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Hesap satiri: bilgi solda, admin islemleri sagda; sigmazsa alta iner */
.hesap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
         padding: 8px 10px; background: #fafbfc; border: 1px solid var(--kenar);
         border-radius: var(--r-s); }
.hesap.pasif { opacity: .72; border-style: dashed; }
.hesap-ust { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 150px; }
.hesap-ust .rz { text-decoration: none; flex-shrink: 0; }
.hesap-ust .rz:hover { filter: brightness(.94); }
/* Kullanici adi KIRPILMAZ, gerekirse alt satira kayar: kurasyon yapan tam adi okumali */
.hesap-ad { min-width: 0; overflow-wrap: anywhere; }
.hesap-not { flex-basis: 100%; line-height: 1.45; }
.hesap .satir-islem { margin-left: auto; }
.ilce { border-top: 1px solid var(--kenar); padding: 10px 0; }
.ilce > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ilce[open] > summary { margin-bottom: 10px; }

.harita-olcumler { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .harita-kabuk { grid-template-columns: 1fr; }
  .harita-kabuk > #il-panel { position: static; max-height: none; overflow: visible; }
}

/* Olcum kartlari mobilde 2x2: 4 kart alt alta dizilince harita ekranin cok
   asagisina iniyordu */
@media (max-width: 900px) {
  .harita-olcumler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
  .harita-olcumler .olcum { padding: 12px 14px; }
  .harita-olcumler .olcum .deger { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────── analiz haklari */

.pozitif { color: var(--basari); }
.negatif { color: var(--hata); }
.soluk-satir td { opacity: .62; }
select[multiple] { height: auto; padding: 4px; }

/* Dar ekranda kiralama tablosu KART olur: yatay kaydirmak yerine her satir
   alan etiketleriyle ustuste dizilir (tarihler kirpiliyordu). */
@media (max-width: 640px) {
  .tablo-yigin thead { display: none; }
  .tablo-yigin, .tablo-yigin tbody, .tablo-yigin tr, .tablo-yigin td { display: block; }
  .tablo-yigin tr { padding: 12px 14px; border-bottom: 1px solid var(--kenar); }
  .tablo-yigin tbody tr:last-child { border-bottom: none; }
  .tablo-yigin td { padding: 4px 0; border: 0; }
  .tablo-yigin td[data-etiket]::before {
    content: attr(data-etiket); display: block; margin-bottom: 1px;
    font-size: 10.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .06em; color: var(--soluk); }
  .tablo-yigin td.sag { text-align: left; padding-top: 8px; }
}