/* Samandag Belediyesi - Atik Toplama Takip Paneli
   Sade ve yuksek okunurluk hedeflenmistir: az renk, net tipografi,
   dikkat dagitan sus yok. Renk yalnizca durum bildirmek icin kullanilir. */

:root {
    --metin:        #1f2937;
    --metin-soluk:  #6b7280;
    --cizgi:        #e5e7eb;
    --zemin:        #f8fafc;
    --kart:         #ffffff;
    --kirmizi:      #dc2626;
    --yesil:        #16a34a;
    --mavi:         #2563eb;
    --lacivert:     #0f2b46;
    --yan-genislik: 300px;
    --ust-yukseklik: 62px;
}

* { box-sizing: border-box; }

/* hidden ozniteligi her zaman kazansin.
   Sinif kurallarindaki display:flex, tarayicinin [hidden] varsayilanini ezer -
   saha ekranindaki kuyruk seridi bu yuzden "0 kayit" yazarak surekli gorunuyordu. */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--metin);
    background: var(--zemin);
}

/* Sayfa dikey akis: ust bar sabit, geri kalani kalan alani doldurur.
   Bildirim seridi girip ciktiginda yukseklikler kendiliginden ayarlanir. */
body {
    display: flex;
    flex-direction: column;
}

/* ---------- Ust bar ---------- */

.ust-bar {
    height: var(--ust-yukseklik);
    flex: 0 0 var(--ust-yukseklik);
    background: var(--lacivert);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
}

.marka { display: flex; flex-direction: column; line-height: 1.25; }
.marka-ad  { font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.marka-alt { font-size: 11.5px; color: #9fb3c8; }

/* Ana menu */
.ana-menu { display: flex; gap: 2px; }

.ana-menu a {
    color: #9fb3c8;
    text-decoration: none;
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 5px;
}

.ana-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ana-menu a.etkin { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }

/* Kullanici bilgisi ve cikis */
.kullanici { display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.kullanici-ad  { font-size: 12.5px; }
.kullanici-rol { font-size: 10.5px; color: #9fb3c8; }

.cikis-form { margin: 0; }

.cikis-form button {
    background: rgba(255, 255, 255, .1);
    border: 0; border-radius: 5px;
    color: #cbd5e1; font-size: 12px;
    padding: 7px 12px; cursor: pointer;
}

.cikis-form button:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.sayaclar { display: flex; gap: 8px; margin-left: auto; }

.sayac {
    background: rgba(255, 255, 255, .08);
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 92px;
    text-align: center;
    line-height: 1.3;
}

.sayac-deger  { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sayac-etiket { display: block; font-size: 10.5px; color: #9fb3c8; }

.sayac.yesil  .sayac-deger { color: #4ade80; }
.sayac.kirmizi .sayac-deger { color: #fca5a5; }
.sayac.mavi   .sayac-deger { color: #93c5fd; }

.tarih {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: #9fb3c8;
    line-height: 1.4;
    min-width: 86px;
}

.canli { display: flex; align-items: center; gap: 5px; font-size: 11px; }

.nokta {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: nabiz 2s infinite;
}

@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Bildirimler ---------- */

.bildirim {
    padding: 10px 20px;
    font-size: 13px;
    border-bottom: 1px solid var(--cizgi);
}

.bildirim.basari { background: #f0fdf4; color: #166534; border-bottom-color: #bbf7d0; }
.bildirim.uyari  { background: #fffbeb; color: #92400e; border-bottom-color: #fde68a; }

/* ---------- Yonetim sayfalari ---------- */

.sayfa { padding: 22px; overflow-y: auto; flex: 1; min-height: 0; }

.sayfa-baslik {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}

.sayfa-baslik h1 { font-size: 18px; margin: 0; font-weight: 600; }
.sayfa-baslik .adet { font-size: 12.5px; color: var(--metin-soluk); }
/* align-items olmadan dugmeler, yaninda sarmis bir formun boyuna kadar
   dikey olarak geriliyordu */
.sayfa-baslik .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.dugme {
    display: inline-block;
    /* Dugme yazisi sarmasin: dar ekranda esnek kutu icinde sikisip
       "Rota-lar" gibi iki satira boluniyordu */
    white-space: nowrap;
    padding: 8px 14px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    background: #fff;
    color: var(--metin);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.dugme:hover { background: #f8fafc; }
.dugme.birincil { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.dugme.birincil:hover { background: #163c60; }
.dugme.tehlike { color: var(--kirmizi); border-color: #fecaca; }
.dugme.tehlike:hover { background: #fef2f2; }

/* Tablo */
.tablo-kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; }

table.veri { width: 100%; border-collapse: collapse; font-size: 13px; }

table.veri th {
    text-align: left;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--cizgi);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--metin-soluk);
    white-space: nowrap;
}

table.veri td { padding: 9px 14px; border-bottom: 1px solid #f1f5f9; }
table.veri tr:last-child td { border-bottom: 0; }
table.veri tr:hover td { background: #fafbfc; }
table.veri td.sag, table.veri th.sag { text-align: right; }
table.veri .kod { font-variant-numeric: tabular-nums; color: var(--metin-soluk); }

/* Filtre cubugu */
.filtre-cubuk {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 14px;
}

.filtre-cubuk input, .filtre-cubuk select {
    padding: 8px 11px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
}

.filtre-cubuk input[type=search] { min-width: 220px; }

/* Form */
.form-kutu {
    background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
    padding: 22px; max-width: 720px;
}

.form-satir { display: flex; gap: 14px; margin-bottom: 14px; }
.form-alan { flex: 1; }

.form-alan label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--metin-soluk); margin-bottom: 5px;
}

.form-alan input, .form-alan select, .form-alan textarea {
    width: 100%; padding: 8px 11px;
    border: 1px solid var(--cizgi); border-radius: 5px;
    font-size: 13.5px; font-family: inherit;
}

.form-alan .ipucu { font-size: 11.5px; color: var(--metin-soluk); margin-top: 4px; }
.form-alan .hata-metin { font-size: 11.5px; color: var(--kirmizi); margin-top: 4px; }
.form-alan input.hatali { border-color: var(--kirmizi); }

.form-dugmeler { display: flex; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cizgi); }

/* Secim haritasi */
.secim-harita { height: 320px; border: 1px solid var(--cizgi); border-radius: 6px; margin-bottom: 6px; }

/* Sayfalama */
.sayfalama { display: flex; gap: 5px; margin-top: 14px; align-items: center; font-size: 13px; }
.sayfalama a, .sayfalama span {
    padding: 6px 11px; border: 1px solid var(--cizgi); border-radius: 5px;
    text-decoration: none; color: var(--metin); background: #fff;
}
.sayfalama span[aria-current] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.sayfalama .bilgi { border: 0; background: none; color: var(--metin-soluk); margin-left: auto; }

.durum-etiket {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.durum-etiket.yesil  { background: #dcfce7; color: #166534; }
.durum-etiket.kirmizi { background: #fee2e2; color: #991b1b; }
.durum-etiket.gri    { background: #f1f5f9; color: #475569; }
.durum-etiket.mavi   { background: #dbeafe; color: #1e40af; }

/* ---------- Govde ---------- */

.govde {
    display: flex;
    flex: 1;
    min-height: 0;
}

.yan-panel {
    width: var(--yan-genislik);
    flex: 0 0 var(--yan-genislik);
    background: var(--kart);
    border-right: 1px solid var(--cizgi);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Ilerleme ---------- */

.ilerleme-kutu { padding: 16px; border-bottom: 1px solid var(--cizgi); }

.ilerleme-ust {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--metin-soluk);
}

.ilerleme-ust strong { font-size: 17px; color: var(--metin); font-variant-numeric: tabular-nums; }

.ilerleme-cubuk {
    height: 7px;
    background: var(--cizgi);
    border-radius: 4px;
    overflow: hidden;
}

.ilerleme-dolgu {
    height: 100%;
    width: 0;
    background: var(--yesil);
    border-radius: 4px;
    transition: width .4s ease;
}

/* ---------- Filtreler ---------- */

.filtre-grup { padding: 12px 16px 0; }

.filtre-grup label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--metin-soluk);
    margin-bottom: 5px;
}

.filtre-grup select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    font-size: 13px;
    color: var(--metin);
    background: #fff;
}

.filtre-grup select:focus { outline: 2px solid var(--mavi); outline-offset: -1px; }

.secenekler { display: flex; gap: 12px; }

.secenekler label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--metin);
    margin: 0;
    cursor: pointer;
}

.secenekler input { margin: 0; }

/* ---------- Mahalle listesi ---------- */

.mahalle-liste-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--metin-soluk);
}

.mahalle-liste-baslik input {
    margin-left: auto;
    width: 96px;
    padding: 4px 7px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.mahalle-liste {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid var(--cizgi);
}

.mahalle-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-size: 12.5px;
}

.mahalle-satir:hover { background: #f8fafc; }
.mahalle-satir.secili { background: #eff6ff; }

.mahalle-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mahalle-oran {
    font-variant-numeric: tabular-nums;
    color: var(--metin-soluk);
    font-size: 11.5px;
    flex-shrink: 0;
}

.mahalle-cubuk {
    width: 46px;
    height: 5px;
    background: var(--cizgi);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.mahalle-dolgu { height: 100%; background: var(--yesil); width: 0; }

/* ---------- Gosterge ---------- */

.gosterge {
    display: flex;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--cizgi);
    font-size: 11.5px;
    color: var(--metin-soluk);
    background: #fcfcfd;
}

.gosterge span { display: flex; align-items: center; gap: 5px; }

.lejant { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lejant.kirmizi { background: var(--kirmizi); }
.lejant.yesil   { background: var(--yesil); }
.lejant.mavi    { background: var(--mavi); }

/* ---------- Harita ---------- */

.harita-alan { flex: 1; position: relative; }

#harita { position: absolute; inset: 0; }

.harita-bilgi {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 500;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: var(--metin-soluk);
    pointer-events: none;
}

/* Arac isaretcisi - gorsel dosyaya gerek yok */
.arac-isaret {
    background: var(--mavi);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .3), 0 1px 4px rgba(0, 0, 0, .35);
}

.arac-isaret.cevrimdisi { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, .3); }

/* Rota durak numarasi */
.durak-no {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Bir kez gosterilen parola kutusu */
.parola-kutu {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.parola-baslik {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #92400e;
    margin-bottom: 8px;
}

.parola-deger {
    display: inline-block;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 5px;
    padding: 8px 14px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 16px;
    letter-spacing: .5px;
    user-select: all;
}

.parola-not { font-size: 12px; color: #92400e; margin: 10px 0 0; }

/* Popup icindeki manuel isaretleme bolumu */
.manuel-kutu {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--cizgi);
}

.manuel-not {
    display: block;
    font-size: 11px;
    color: var(--metin-soluk);
    margin-bottom: 5px;
}

.manuel-arac {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 6px;
    font-family: inherit;
}

.manuel-dugme {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.manuel-dugme:hover { background: #f8fafc; }
.manuel-dugme.geri { color: var(--kirmizi); border-color: #fecaca; }
.manuel-dugme.geri:hover { background: #fef2f2; }

.rota-dugme {
    margin-top: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    background: var(--mavi);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Popup */
.leaflet-popup-content { margin: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.leaflet-popup-content h4 { margin: 0 0 5px; font-size: 13.5px; }
.leaflet-popup-content dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.leaflet-popup-content dt { color: var(--metin-soluk); }
.leaflet-popup-content dd { margin: 0; }

.rozet {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.rozet.yesil   { background: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi); }

/* ---------- Mahalle takvimi ---------- */

/* Listede gun rozetleri: acik gunler dolu, kapalilar soluk */
.gun-rozetleri { display: inline-flex; gap: 3px; }

.gun-rozetleri .gun {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}

.gun-rozetleri .gun.acik { background: var(--lacivert); color: #fff; }

/* Formda gun secimi */
.gun-secim { display: flex; flex-wrap: wrap; gap: 6px; }

.gun-kutu {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--metin);
    margin: 0;
}

.gun-kutu:has(input:checked) {
    background: #eff6ff;
    border-color: var(--mavi);
    font-weight: 600;
}

.gun-kutu input { margin: 0; }

button.sablon {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--metin);
    cursor: pointer;
    margin-right: 3px;
}

button.sablon:hover { background: #f1f5f9; }

/* Toplu ayar cubugu */
.toplu-cubuk {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.toplu-sayi { font-size: 13px; color: #1e40af; }

.toplu-gunler { display: flex; gap: 8px; }

.toplu-gunler label {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; cursor: pointer;
}

.toplu-gunler input { margin: 0; }

/* =====================================================================
   MOBIL
   =====================================================================

   Tasarim kararlari:

   - Menu dar ekranda soldan acilan bir cekmeceye donusur (hamburger).
     Ust barda 9 menu baglantisi icin yer yok; kucultmek yerine gizlemek
     dogru, cunku 44px altina dusen dokunma hedefi parmakla isabet
     ettirilemez.

   - Harita ekraninda yan panel alttan acilir bir sayfaya donusur. Onceki
     cozum paneli haritanin ustune koyuyordu ve ekranin %42'sini yiyordu;
     telefonda haritaya bakilamiyordu.

   - Tablolarda ikincil sutunlar gizlenir (.gizle-dar). Kalan sutunlar
     sigmazsa tablo kendi icinde yatay kayar - sayfa govdesi kaymaz.

   - Form girdileri 16px: iOS Safari daha kucuk yazi tipli bir alana
     dokunuldugunda sayfayi otomatik yakinlastirir ve duzen bozulur.
   ===================================================================== */

/* ---------- Hamburger dugmesi (genis ekranda gizli) ---------- */

.menu-dugme {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px; height: 42px;
    padding: 0 10px;
    margin-left: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-dugme span {
    display: block;
    height: 2px;
    background: #cbd5e1;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

body.menu-acik .menu-dugme span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-acik .menu-dugme span:nth-child(2) { opacity: 0; }
body.menu-acik .menu-dugme span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Cekmece basligi ve perde: yalnizca dar ekranda kullanilir */
.menu-basi { display: none; }

.menu-perde {
    position: fixed;
    inset: 0;
    background: rgba(15, 43, 70, .5);
    z-index: 1100;
}

/* Harita yan panelini acan kol: yalnizca dar ekranda */
.yan-kol { display: none; }

/* Dar ekranda gizlenecek ikincil tablo sutunlari */
@media (max-width: 760px) {
    .gizle-dar { display: none !important; }
}

/* ---------------------------------------------------------------------
   Tablet ve telefon
   --------------------------------------------------------------------- */

@media (max-width: 900px) {

    html { -webkit-text-size-adjust: 100%; }

    /* ---- Ust bar ---- */

    .ust-bar {
        height: auto;
        flex: 0 0 auto;
        min-height: 54px;
        flex-wrap: wrap;
        gap: 10px;
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    }

    .menu-dugme { display: flex; }

    .marka { flex: 1; min-width: 0; }
    .marka-ad  { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .marka-alt { display: none; }

    /* Kullanici adi cekmeceye tasindi, ust barda yer yok */
    .kullanici { display: none; }
    .tarih { display: none; }

    .cikis-form button { padding: 9px 13px; font-size: 12.5px; }

    /* ---- Menu cekmecesi ---- */

    .ana-menu {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 264px;
        max-width: 82vw;
        flex-direction: column;
        gap: 2px;
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
        background: var(--lacivert);
        box-shadow: 4px 0 20px rgba(0, 0, 0, .25);
        overflow-y: auto;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    body.menu-acik .ana-menu { transform: translateX(0); }

    .ana-menu a {
        font-size: 15px;
        padding: 13px 14px;
        border-radius: 7px;
    }

    .menu-basi {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px 14px 16px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .menu-basi-ad  { font-size: 14px; font-weight: 600; color: #fff; }
    .menu-basi-rol { font-size: 11.5px; color: #9fb3c8; }

    /* ---- Sayaclar: ikinci satira, yatay kaydirilabilir serit ---- */

    .sayaclar {
        order: 5;
        width: 100%;
        margin-left: 0;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .sayaclar::-webkit-scrollbar { display: none; }

    .sayac { min-width: 76px; padding: 5px 10px; flex-shrink: 0; }
    .sayac-deger  { font-size: 16px; }
    .sayac-etiket { font-size: 10px; }

    /* ---- Harita: yan panel alttan acilan sayfa ---- */

    .govde { flex-direction: column; }

    .harita-alan { margin-bottom: 46px; }

    .harita-bilgi { bottom: 10px; left: 10px; right: 10px; max-width: none; }

    .yan-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 74vh;
        flex: 0 0 auto;
        border-right: 0;
        border-top: 1px solid var(--cizgi);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 22px rgba(15, 43, 70, .18);
        transform: translateY(calc(100% - 46px));
        transition: transform .25s ease;
        z-index: 1050;   /* Leaflet denetimleri 1000 kullanir; altinda kalirsa telif yazisi panelin ustune biner */
    }

    body.yan-acik .yan-panel { transform: translateY(0); }

    .yan-kol {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 46px;
        flex: 0 0 46px;
        background: #fff;
        border: 0;
        border-radius: 14px 14px 0 0;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--metin);
        cursor: pointer;
    }

    /* Tutamak cizgisi - panelin cekilebilir oldugunu belli eder */
    .yan-kol::before {
        content: "";
        position: absolute;
        top: 6px; left: 50%;
        transform: translateX(-50%);
        width: 34px; height: 4px;
        border-radius: 2px;
        background: var(--cizgi);
    }

    .yan-kol .ok { transition: transform .25s ease; color: var(--metin-soluk); }
    body.yan-acik .yan-kol .ok { transform: rotate(180deg); }

    /* ---- Yonetim sayfalari ---- */

    .sayfa { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); }

    .sayfa-baslik { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .sayfa-baslik h1 { font-size: 17px; }
    .sayfa-baslik .sag { margin-left: 0; width: 100%; flex-wrap: wrap; }

    .dugme { padding: 10px 14px; }

    /* ---- Tablolar ---- */

    /* Kalan sutunlar sigmazsa tablo kendi icinde kaysin, sayfa degil */
    .tablo-kutu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.veri { font-size: 12.5px; }
    table.veri th { padding: 9px 10px; }
    table.veri td { padding: 9px 10px; }

    /* ---- Filtreler ---- */

    .filtre-cubuk { gap: 7px; }
    .filtre-cubuk input, .filtre-cubuk select { font-size: 16px; padding: 9px 11px; }
    .filtre-cubuk input[type=search] { min-width: 0; flex: 1 1 100%; }
    .filtre-cubuk select { flex: 1 1 140px; }

    /* ---- Formlar ---- */

    .form-kutu { padding: 16px; }

    .form-satir { flex-direction: column; gap: 0; margin-bottom: 0; }
    .form-alan { margin-bottom: 14px; }

    /* 16px: bunun altinda iOS alana dokununca sayfayi yakinlastirir */
    .form-alan input, .form-alan select, .form-alan textarea {
        font-size: 16px;
        padding: 10px 12px;
    }

    .form-dugmeler { flex-direction: column; }
    .form-dugmeler .dugme, .form-dugmeler button { width: 100%; text-align: center; padding: 12px 14px; }

    .secim-harita { height: 260px; }

    /* ---- Sayfalama ---- */

    .sayfalama { flex-wrap: wrap; gap: 6px; }
    .sayfalama a, .sayfalama span { padding: 9px 13px; }
    .sayfalama .bilgi { width: 100%; margin-left: 0; text-align: center; padding: 4px 0; }

    /* ---- Mahalle takvimi ---- */

    .toplu-cubuk { flex-direction: column; align-items: stretch; gap: 10px; }
    .toplu-gunler { flex-wrap: wrap; }
    .gun-kutu { padding: 9px 12px; }

    /* ---- Saha ekrani ---- */

    /* Kaydet dugmesi her zaman parmagin altinda kalsin */
    .buyuk-dugme {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom));
        padding: 16px;
        box-shadow: 0 4px 14px rgba(22, 163, 74, .28);
    }
}

/* ---------------------------------------------------------------------
   Kucuk telefon
   --------------------------------------------------------------------- */

@media (max-width: 420px) {
    .marka-ad { font-size: 13px; }
    .sayac { min-width: 68px; padding: 4px 8px; }
    .sayac-deger { font-size: 15px; }
    .sayfa { padding: 12px 10px calc(20px + env(safe-area-inset-bottom)); }
    .form-kutu { padding: 14px; }
    table.veri { font-size: 12px; }
    table.veri th, table.veri td { padding: 8px; }
}

/* ---------------------------------------------------------------------
   Hareket azaltma tercihi
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ana-menu, .yan-panel, .yan-kol .ok, .menu-dugme span { transition: none; }
    .nokta { animation: none; }
}

/* Son sutun (genelde "İşlem") yatay kaydirmada kaybolmasin.
   Mahalle listesi 375px'e sigmiyor; Duzenle dugmesi kaydirma disinda
   kaliyordu ve dokunulamiyordu. Sagdaki sutunu sabitlemek, sutun
   gizlemekten iyidir - veri kaybolmaz. Tablo zaten sigiyorsa bu kuralin
   gorunur bir etkisi olmaz. */

/* Esik 900px: tablo bu genislikten itibaren kendi icinde kayabiliyor
   (.tablo-kutu overflow-x). Sabitleme kurali daha dar bir esikteydi ve
   760-900 arasinda son sutun kaydirmanin arkasinda kaliyordu - gorevlendirme
   ekraninda arac secme kutusu goze gorunmuyordu. */
@media (max-width: 900px) {
    table.veri th:last-child,
    table.veri td:last-child {
        position: sticky;
        right: 0;
        background: var(--kart);
        box-shadow: -7px 0 7px -5px rgba(15, 43, 70, .14);
    }

    table.veri th:last-child { background: #f8fafc; }

    /* Satir vurgusu sabit sutunun altindan gecmesin */
    table.veri tr:hover td:last-child { background: #fafbfc; }
}

/* ---------------------------------------------------------------------
   Rota haritasi (Rotalar ekrani)
   --------------------------------------------------------------------- */

.rota-harita-kutu {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
}

.rota-harita-ust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 13px;
}

.rota-harita-bilgi { color: var(--metin-soluk); font-size: 12.5px; }
.rota-harita-dugmeler { margin-left: auto; display: flex; gap: 6px; }
.rota-harita-dugmeler .dugme { padding: 5px 11px; font-size: 12px; }

/* Arac rozetleri: tiklaninca o rotanin cizgisi gizlenir/gosterilir */
.rota-secim {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cizgi);
    background: #fcfcfd;
    max-height: 108px;
    overflow-y: auto;
}

.rota-rozet {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 10px;
    border: 1px solid var(--cizgi);
    border-left: 3px solid var(--cizgi);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    opacity: .42;
    transition: opacity .15s ease;
}

.rota-rozet.acik { opacity: 1; }
.rota-rozet:hover { background: #f8fafc; }

.rr-plaka { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--metin); }
.rr-alt   { font-size: 10.5px; color: var(--metin-soluk); }

#rota-harita { height: 430px; }

.rota-harita-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 9px 16px;
    border-top: 1px solid var(--cizgi);
    background: #fcfcfd;
    font-size: 11.5px;
    color: var(--metin-soluk);
}

.rota-harita-alt span { display: flex; align-items: center; gap: 5px; }

.lejant.gri-nokta { background: #94a3b8; }

@media (max-width: 900px) {
    #rota-harita { height: 300px; }

    .rota-harita-ust { flex-wrap: wrap; gap: 8px; }
    .rota-harita-dugmeler { margin-left: 0; width: 100%; }
    .rota-harita-dugmeler .dugme { flex: 1; text-align: center; }

    .rota-secim { max-height: 92px; padding: 10px 12px; }
    .rota-harita-alt { padding: 9px 12px; gap: 10px; }
}

/* Form altindaki yikici islemler (Pasife Al / Sil) sag tarafta gruplanir;
   Kaydet dugmesine yanlislikla komsu olmasinlar. */
.form-tehlike-alan { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 900px) {
    /* Dar ekranda dugmeler alt alta; yikici olanlar bir bosluk sonra gelsin */
    .form-tehlike-alan { margin-left: 0; width: 100%; margin-top: 6px; }
    .form-tehlike-alan .dugme { flex: 1; text-align: center; }
}

/* Kullanici formundaki parola bolumu: alan grubu olarak ayrilir ki
   "bos birakirsan degismez" kurali gorsel olarak da belli olsun. */
.parola-alani {
    border: 1px solid var(--cizgi);
    border-radius: 7px;
    padding: 4px 14px 2px;
    margin: 0;
}

.parola-alani legend {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--metin-soluk);
    padding: 0 6px;
}

/* =====================================================================
   RAPOR EKRANLARI
   =====================================================================

   Gunluk ve donemsel rapor ayni gorsel dili paylasir. Stiller tek yerde
   durmali: iki blade'e kopyalanirsa zamanla ayrisirlar ve iki rapor
   birbirine benzemez olur.

   Grafikler SVG ile cizilir - dis kutuphane yok. Belediye agi kapali
   olabilir; CDN'e bagimlilik olmamali.
   ===================================================================== */
    /* Grafikler SVG ile cizilir - dis kutuphane yok.
       Belediye agi kapali olabilir; CDN'e bagimlilik olmamali. */

    .rapor-baslik-kutu {
        background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
        padding: 20px 22px; margin-bottom: 14px;
    }
    .rapor-cumle { font-size: 15px; line-height: 1.65; margin: 0; }
    .rapor-cumle strong { font-variant-numeric: tabular-nums; }
    .rapor-cumle .arti  { color: var(--yesil); font-weight: 600; }
    .rapor-cumle .eksi  { color: var(--kirmizi); font-weight: 600; }
    .rapor-cumle .duz   { color: var(--metin-soluk); font-weight: 600; }

    .rapor-not {
        font-size: 12.5px; color: var(--metin-soluk);
        margin: 12px 0 0; line-height: 1.6;
    }
    .rapor-uyari {
        font-size: 12.5px; color: #92400e; background: #fffbeb;
        border: 1px solid #fde68a; border-radius: 6px;
        padding: 9px 12px; margin: 12px 0 0; line-height: 1.55;
    }

    .grafik-kutu {
        background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
        padding: 16px 18px; margin-bottom: 14px;
    }
    .grafik-basligi { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
    .grafik-aciklama { font-size: 12px; color: var(--metin-soluk); margin: 0 0 12px; }

    .grafik-svg { width: 100%; height: auto; display: block; }

    .g-cubuk        { fill: var(--mavi); }
    .g-cubuk.hafta  { fill: #93c5fd; }
    .g-cubuk.atlanan { fill: #fca5a5; }
    .g-izgara       { stroke: #eef2f6; stroke-width: 1; }
    .g-eksen-yazi   { fill: #9aa5b1; font-size: 10px; font-family: inherit; }
    .g-cizgi        { fill: none; stroke: var(--yesil); stroke-width: 2; }
    .g-nokta        { fill: var(--yesil); }
    .g-nokta.tahmin { fill: #fff; stroke: var(--yesil); stroke-width: 1.5; }

    .grafik-lejant {
        display: flex; flex-wrap: wrap; gap: 14px;
        font-size: 11.5px; color: var(--metin-soluk); margin-top: 10px;
    }
    .grafik-lejant span { display: flex; align-items: center; gap: 5px; }
    .grafik-lejant i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

    .ayrinti { margin-top: 4px; }
    .ayrinti > summary {
        cursor: pointer; padding: 11px 14px;
        background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
        font-size: 13px; font-weight: 600; list-style: none;
    }
    .ayrinti > summary::-webkit-details-marker { display: none; }
    .ayrinti > summary::before { content: '▸ '; color: var(--metin-soluk); }
    .ayrinti[open] > summary::before { content: '▾ '; }
    .ayrinti[open] > summary { border-radius: 8px 8px 0 0; border-bottom: 0; }
    .ayrinti .tablo-kutu { border-radius: 0 0 8px 8px; }

    @media (max-width: 900px) {
        .rapor-baslik-kutu { padding: 16px; }
        .rapor-cumle { font-size: 14px; }
        .grafik-kutu { padding: 14px 12px; }
    }

/* ---------------------------------------------------------------------
   Gunluk rapor: halka gostergesi ve yatay cubuklar
   --------------------------------------------------------------------- */

/* Tamamlanma halkasi. Yuzdeyi tek bakista okunur kilar; rakam kartlari
   arasinda kaybolmaz. */
.halka-kutu {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.halka { flex-shrink: 0; width: 132px; height: 132px; }
.halka-zemin { fill: none; stroke: #eef2f6; stroke-width: 12; }
.halka-dolgu {
    fill: none; stroke: var(--yesil); stroke-width: 12;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.halka-dolgu.orta   { stroke: #d97706; }
.halka-dolgu.dusuk  { stroke: var(--kirmizi); }

.halka-yuzde { font-size: 26px; font-weight: 600; fill: var(--metin); }
.halka-alt   { font-size: 9.5px; fill: var(--metin-soluk); text-transform: uppercase; letter-spacing: .5px; }

.halka-yani { flex: 1; min-width: 240px; }

/* Kucuk istatistik seridi */
.mini-istatistik {
    display: flex; flex-wrap: wrap; gap: 22px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--cizgi);
}
.mini-istatistik div { line-height: 1.35; }
.mini-baslik { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--metin-soluk); }
.mini-deger  { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Iki grafik yan yana; dar ekranda alt alta */
.grafik-ikili {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.grafik-ikili > .grafik-kutu { margin-bottom: 0; }

/* Yatay cubuk listesi: arac ve mahalle kirilimlari.
   Tablo yerine bunu kullanmak "kim geride kalmis" sorusunu bakisla
   yanitlatiyor; tabloda yuzdeleri tek tek okumak gerekiyordu. */
.yatay-liste { display: flex; flex-direction: column; gap: 9px; }

.yatay-satir {
    display: grid;
    grid-template-columns: minmax(84px, 132px) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.yatay-ad {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--metin);
}

/* span olarak yazildilar; inline kutuya yukseklik uygulanmaz - dolgu
   gorunmez kalir. Ikisi de blok olmali. */
.yatay-oluk {
    display: block;
    height: 15px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.yatay-dolgu {
    display: block;
    height: 100%;
    background: var(--yesil);
    border-radius: 3px;
    /* min-width YOK: %0 icin 2px birakmak, hic toplanmamis mahalleyi
       az da olsa toplanmis gibi gosteriyordu. */
}
.yatay-dolgu.orta  { background: #d97706; }
.yatay-dolgu.dusuk { background: var(--kirmizi); }
.yatay-dolgu.mavi  { background: var(--mavi); }

.yatay-deger {
    font-variant-numeric: tabular-nums;
    color: var(--metin-soluk);
    font-size: 12px;
    min-width: 62px;
    text-align: right;
}

.rapor-bos {
    padding: 26px;
    text-align: center;
    color: var(--metin-soluk);
    font-size: 13px;
}

@media (max-width: 900px) {
    .halka-kutu { gap: 16px; }
    .halka { width: 104px; height: 104px; }
    .halka-yani { min-width: 0; }
    .mini-istatistik { gap: 16px; }
    .yatay-satir { grid-template-columns: minmax(70px, 110px) 1fr auto; font-size: 12px; }
    .yatay-deger { min-width: 54px; }
}

/* ---------------------------------------------------------------------
   Görevlendirme: kapsam sekmeleri
   ---------------------------------------------------------------------

   Görevlendirmenin KALICI mı yoksa o güne özel mi olduğu, ekranın en
   önemli bilgisidir - yanlış kapsamda kaydetmek 42 mahallenin dağılımını
   ya kalıcı olarak ya da tek gün için değiştirir. Bu yüzden seçim küçük bir
   radyo düğmesi değil, ekranın üstünde iki büyük sekme. */

.kapsam-secim {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.kapsam-sekme {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-left: 3px solid var(--cizgi);
    border-radius: 7px;
    text-decoration: none;
    color: var(--metin);
}

.kapsam-sekme:hover { background: #f8fafc; }

.kapsam-sekme strong { font-size: 13.5px; font-weight: 600; }
.kapsam-sekme span   { font-size: 12px; color: var(--metin-soluk); }

.kapsam-sekme.etkin {
    border-color: var(--lacivert);
    border-left-color: var(--lacivert);
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--lacivert);
}