/* İTOKENT Sakinler Portalı — mobil öncelikli, yalın.
   Masaüstünde sayfanın ortasında dar bir sütun kullanılır. */
:root{
  --bg:#f4f6f8; --yzy:#ffffff; --kenar:#e5e9ee; --kenar-ince:#eef1f4;
  --metin:#111a24; --soluk:#6b7684; --soluk2:#8b95a1;
  --vurgu:#0e7c66; --vurgu2:#0b6353; --vurgu-acik:#e8f3ef;
  --tehlike:#c0392b;
  --golge:0 1px 2px rgba(16,24,40,.05);
  --golge-yuksek:0 12px 28px rgba(16,24,40,.16);
  --acik-yesil:#e6f2ee;          /* ana ekran zemini — üst şeritle aynı aile */
  --sutun:430px;                 /* masaüstünde uygulama sütunu genişliği */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--metin);font-size:15px;line-height:1.5;
  font-feature-settings:"tnum" 1;          /* tarih/saat rakamları hizalı dursun */
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}   /* 16px: iOS'ta yakınlaştırmayı önler */

/* ── Uygulama sütunu ── */
.uygulama{
  max-width:var(--sutun);margin:0 auto;min-height:100vh;background:var(--yzy);
  box-shadow:0 0 40px rgba(16,24,40,.06);position:relative;
}

/* ── Üst çubuk: marka | kim | menü ──
   Yan sütunlar eşit genişliktedir (1fr); böylece ortadaki ad-soyad bloğu
   marka ile hamburgerin genişliğinden bağımsız olarak tam ortada durur. */
.p-ust{
  position:sticky;top:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0e7c66,#0a5f4f);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.08);padding:10px 14px;
}
.p-ust .marka{text-decoration:none;line-height:1.1;display:block;justify-self:start}
.p-ust .marka b{display:block;font-size:15.5px;font-weight:700;color:#fff;letter-spacing:.2px}
.p-ust .marka small{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:.1px}
/* Ortadaki blok: sayfanın kime ait olduğu buradan anlaşılır */
.p-kim{min-width:0;text-align:center;line-height:1.2}
.p-ad{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ev{font-size:12.5px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hamburger{
  width:36px;height:36px;border:0;background:transparent;border-radius:9px;justify-self:end;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:0 0 auto;
}
.hamburger:hover{background:rgba(255,255,255,.14)}
.hamburger span{display:block;width:17px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.hamburger.acik span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.acik span:nth-child(2){opacity:0}
.hamburger.acik span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── Menü paneli (hamburger) ── */
.menu-perde{position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:35;display:none}
.menu-perde.acik{display:block}
/* Panel akış içinde, başlığın hemen altında açılır (sütun ortalı olduğu için
   mutlak konumlandırma yerine akış + max-height animasyonu kullanılır). */
.menu-panel{
  position:relative;z-index:40;background:var(--yzy);
  border-bottom:1px solid var(--kenar);box-shadow:var(--golge-yuksek);
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.menu-panel.acik{max-height:560px}
.menu-panel a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;color:var(--metin);text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--kenar-ince);
}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a:hover{background:var(--bg)}
.menu-panel a.aktif{background:var(--vurgu-acik);color:var(--vurgu)}

/* ── İçerik ── */
.icerik{padding:18px 16px 40px}
.icerik h1{font-size:18px;font-weight:600;letter-spacing:-.2px;margin:0 0 14px}
.kutu{background:var(--yzy);border:1px solid var(--kenar);border-radius:12px;padding:16px}
.bos-durum{color:var(--soluk);text-align:center;padding:28px 12px;font-size:14px}
.bos-durum .im{font-size:26px;display:block;margin-bottom:8px;opacity:.6}

/* ── Ana ekran: genel menü ──
   Yönetim panelinin menü düzeni: ikonsuz ve alt bilgisiz, büyük harfli
   satırlar ve ince ayraçlar. Zemin üst şeritle aynı aileden açık yeşil,
   başlıklar siyah, alttaki düğme şeridin rengini taşır. */
.ana-ekran .uygulama{background:var(--acik-yesil)}
.ana-ekran .icerik{padding-bottom:28px}
.ana-selam{font-size:13px;color:var(--soluk);margin:2px 0 16px}
.ana-menu{display:block}
.ana-kart{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;text-decoration:none;color:var(--metin);
  border-bottom:1px solid rgba(17,26,36,.12);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.ana-kart:first-child{border-top:1px solid rgba(17,26,36,.12)}
.ana-kart:hover{background:rgba(255,255,255,.5)}
.ak-yazi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-ok{flex:0 0 auto;color:var(--soluk2);font-size:17px;line-height:1}
/* Henüz kurulmamış bölümler girilebilir ama soluk durur */
.ana-kart.pasif{color:var(--soluk)}
.ana-kart.pasif .ak-ok{opacity:.5}
/* Altta, yönetim menüsündeki beyaz düğmenin karşılığı — üst şeridin rengiyle */
.ana-cikis{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:26px;padding:13px 12px;border-radius:11px;
  background:linear-gradient(135deg,#0e7c66,#0a5f4f);
  color:#fff;font-weight:800;text-decoration:none;
  box-shadow:0 10px 24px rgba(14,124,102,.28);
}
.ana-cikis:hover{background:var(--vurgu2)}

/* Başlık + sağda eylem düğmesi */
.sayfa-basi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.sayfa-basi h1{margin:0}
.btn-kucuk{
  flex:0 0 auto;padding:8px 14px;border-radius:9px;border:1px solid var(--vurgu);
  background:var(--vurgu);color:#fff;font-weight:600;font-size:13.5px;line-height:1;
}
.btn-kucuk:hover{background:var(--vurgu2)}
.btn-kucuk.sade{background:#fff;color:var(--metin);border-color:var(--kenar);font-weight:500}
.btn-kucuk.sade:hover{background:var(--bg)}
.btn-kucuk.tehlike{background:#fff;color:var(--tehlike);border-color:#f2c9c4;font-weight:500}
.btn-kucuk.tehlike:hover{background:#fdecea}
.btn-kucuk:disabled{opacity:.6;cursor:default}

/* ── Form / düğme ── */
.alan{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.alan label{font-size:12.5px;color:var(--soluk);font-weight:600}
.alan input,.alan select,.alan textarea{
  padding:11px 12px;border:1px solid var(--kenar);border-radius:10px;background:#fff;color:var(--metin)}
.alan textarea{resize:vertical;min-height:88px}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:2px solid var(--vurgu-acik);border-color:var(--vurgu)}
.btn{
  width:100%;padding:11px 16px;border-radius:10px;border:1px solid var(--kenar);
  background:#fff;color:var(--metin);font-weight:600;font-size:14px;
}
.btn.ana{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.btn.ana:hover{background:var(--vurgu2)}
.btn:disabled{opacity:.6;cursor:default}
.baglanti{display:block;text-align:center;margin-top:14px;color:var(--vurgu);font-weight:600;
  text-decoration:none;font-size:14px}
.baglanti:hover{text-decoration:underline}

/* ── Giriş ekranı ── */
.giris-sar{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 16px}
.giris-kart{width:100%;max-width:var(--sutun);background:var(--yzy);border:1px solid var(--kenar);
  border-radius:14px;box-shadow:var(--golge);padding:26px 22px}
.giris-kart .logo{font-weight:700;color:var(--vurgu);font-size:21px;letter-spacing:.2px}
.giris-kart .alt{color:var(--soluk);margin:2px 0 22px;font-size:13.5px}
.giris-kart .logo-img{height:56px;width:auto;display:block;margin-bottom:6px}

/* ── Arıza: talep listesi ──
   Her kayıt yatay bir düğme: [tarih/saat] [arıza türü / kategori · yer] [durum/görevli].
   Orta sütun taşarsa kısaltılır; yan sütunlar kendi genişliğinde kalır. */
.talep-liste{border:1px solid var(--kenar);border-radius:12px;overflow:hidden;background:var(--yzy)}
.talep-satir{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;
  width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--kenar-ince);
  padding:10px 12px;color:var(--metin);
}
.talep-satir:last-child{border-bottom:0}
.talep-satir:hover{background:var(--bg)}
/* Acil talepler solda kırmızı şeritle ayrışır */
.talep-satir.acil{box-shadow:inset 3px 0 0 var(--tehlike)}
.talep-satir b{display:block;font-weight:600;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talep-satir small{display:block;font-size:11.5px;color:var(--soluk);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-zaman{font-variant-numeric:tabular-nums}
.ts-zaman b{font-size:12.5px;font-weight:500;color:var(--soluk)}
.ts-zaman small{font-size:12.5px}
.ts-konu{min-width:0}
.ts-sag{display:grid;justify-items:end;gap:3px;text-align:right}
.ts-sag small{max-width:104px}
.durum{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.d-alindi{background:#eef1f4;color:#4a5563}
.d-gorev{background:#e8eefc;color:#2b57c4}
.d-basladi{background:#e6f0fb;color:#1f6fb2}
.d-soru{background:#fdf0e4;color:#b5651a}
.d-bekleme{background:#f4eefc;color:#6b3fa0}
.d-tamam{background:var(--vurgu-acik);color:var(--vurgu)}
.d-iptal{background:#fdecea;color:var(--tehlike)}

/* ── Arıza: ayrıntı ── */
.geri-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;
  color:var(--soluk);font-size:13.5px;font-weight:500;margin-bottom:12px}
.geri-btn:hover{color:var(--metin)}
.detay-basi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.detay-no{font-size:12px;color:var(--soluk);font-variant-numeric:tabular-nums}
.detay-konu{font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0 0 16px}
.detay-konu span{display:block;font-size:12.5px;font-weight:400;color:var(--soluk);margin-top:2px}

/* Bilgi satırları (etiket solda, değer sağda) */
.bilgi-liste{border:1px solid var(--kenar);border-radius:12px;overflow:hidden;margin-bottom:16px}
.bilgi-satir{display:flex;justify-content:space-between;gap:14px;padding:10px 13px;
  border-bottom:1px solid var(--kenar-ince);font-size:13.5px}
.bilgi-satir:last-child{border-bottom:0}
.bilgi-satir dt{color:var(--soluk);flex:0 0 auto;margin:0}
.bilgi-satir dd{margin:0;text-align:right;font-weight:500;min-width:0}

.alt-baslik{font-size:13px;font-weight:600;color:var(--soluk);margin:0 0 9px;
  text-transform:uppercase;letter-spacing:.4px}
.detay-metin{font-size:14px;white-space:pre-wrap;margin:0 0 16px;color:var(--metin)}
.detay-foto{width:100%;border-radius:11px;margin-bottom:16px;display:block}
.yonetim-notu{background:var(--vurgu-acik);border-radius:10px;padding:11px 13px;
  font-size:13.5px;margin-bottom:16px;color:var(--vurgu2)}

/* Zaman çizelgesi */
.cizelge{list-style:none;margin:0 0 8px;padding:0 0 0 20px;position:relative}
.cizelge::before{content:"";position:absolute;left:4px;top:6px;bottom:10px;width:1px;background:var(--kenar)}
.cizelge li{position:relative;padding-bottom:14px}
.cizelge li:last-child{padding-bottom:0}
.cizelge li::before{content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--kenar);border:2px solid var(--yzy)}
.cizelge li.tamam::before{background:var(--vurgu)}
.cizelge .c-ad{font-size:14px;font-weight:600}
.cizelge .c-zaman{font-size:12px;color:var(--soluk);font-variant-numeric:tabular-nums}
.cizelge .c-not{font-size:13px;color:var(--soluk);margin-top:2px}
/* Ek bilgi mesajları geçmişte baloncuk olarak ayrışır */
.cizelge li.mesaj::before{background:var(--vurgu-acik);border-color:var(--vurgu)}
.cizelge li.mesaj .c-not{background:var(--bg);border-radius:9px;padding:8px 10px;
  color:var(--metin);margin-top:5px;white-space:pre-wrap}

/* Ayrıntı sayfasındaki eylemler (düzenle / geri çek) */
.detay-eylem{display:flex;gap:8px;margin:-6px 0 18px}

/* ── Hizmet değerlendirme ── */
.d-deger{background:#fdf0e4;color:#b5651a}
.deger-cagri{display:flex;align-items:center;gap:12px;background:var(--vurgu-acik);
  border:1px solid #cfe4dc;border-radius:11px;padding:12px 14px;margin-bottom:16px}
.dc-metin{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--vurgu2)}
.yildiz-satir{display:flex;gap:4px}
.yildiz{background:transparent;border:0;padding:2px;font-size:30px;line-height:1;
  color:#d7dde3;cursor:pointer}
.yildiz.dolu{color:#e8a33d}
.yildiz:hover{color:#e8a33d}
.puan-ozet{border:1px solid var(--kenar);border-radius:11px;padding:11px 13px;margin-bottom:16px}
.puan-ozet > div{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13.5px;padding:3px 0}
.puan-ozet > div > span:first-child{color:var(--soluk)}
/* Etiket kuralından sonra gelir ve daha özgüldür; yıldızlar soluk kalmasın */
.puan-ozet .puan{color:#e8a33d;font-size:15px;letter-spacing:1px}
.puan-ozet .puan .sonuk{color:#d7dde3}
.pz-yorum{font-size:13px;color:var(--metin);margin:7px 0 0;padding-top:8px;
  border-top:1px solid var(--kenar-ince);white-space:pre-wrap}

/* ── Arıza: yeni talep formu (yalın, kutusuz; başlıklar küçük) ── */
.form-basi{margin-bottom:16px;text-align:center}
.form-basi h1{font-size:17px;margin:0}
.form-basi span{display:block;font-size:12.5px;color:var(--soluk);margin-top:2px}
.form-kutu .alan{margin-bottom:13px}
/* Metin alanları 16px kalır: iOS odaklanınca sayfayı yakınlaştırmasın.
   (select'te bu sorun yok, orada daha küçük yazı kullanılıyor.) */
.form-kutu .alan input,.form-kutu .alan textarea{
  padding:9px 11px;line-height:1.25;border-radius:9px}
.form-kutu .alan textarea{min-height:120px}
/* Başlıksız seçim kutuları: yönlendirme seçeneğin kendi metninde */
.alan select.secim{font-size:13.5px;padding:11px;border-radius:9px}
.alan select.secim.bos{color:var(--soluk)}
.istege-bagli{font-weight:400;color:var(--soluk2)}
.kutu-baslik{font-size:15px;font-weight:600;margin:0 0 14px}
.bolum-baslik{font-size:15px;font-weight:600;margin:22px 0 10px}

/* Arıza yeri + öncelik yan yana tek satır (başlıksız) */
.alan-cift{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:13px}

/* İkili seçim düğmeleri */
.segment{display:flex;gap:5px}
.segment button{flex:1;padding:7px 9px;border:1px solid var(--kenar);border-radius:8px;
  background:#fff;color:var(--soluk);font-weight:500;font-size:12px;white-space:nowrap}
.segment button.secili{background:var(--vurgu);border-color:var(--vurgu);color:#fff;font-weight:600}
.segment button.acil.secili{background:var(--tehlike);border-color:var(--tehlike)}

/* Fotoğraf önizleme */
.btn.ince{width:auto;padding:9px 13px;font-size:13px;font-weight:500}
.foto-onizleme{display:flex;align-items:center;gap:12px}
.foto-onizleme img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--kenar)}

/* ── Üye görüşleri ── */
.not-metin{background:var(--bg);border-radius:10px;padding:11px 13px;font-size:13px;
  color:var(--soluk);margin:0 0 16px;line-height:1.45}
.sayac-metin{text-align:right;font-size:12px;color:var(--soluk);margin-top:2px}
.d-bekliyor{background:#fdf0e4;color:#b5651a}
.d-red{background:#fdecea;color:var(--tehlike)}
/* Bekleyen görüş kartları (gorus.js) */
.talep-kart{background:var(--yzy);border:1px solid var(--kenar);border-radius:12px;
  padding:13px;margin-bottom:10px}
.talep-kart.bekleyen{border-style:dashed}
.talep-kart .ust-satir{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.talep-kart .alt-satir{color:var(--soluk);font-size:12.5px;margin-top:6px}

/* Görüşler kendi çerçevesinde durmaz; aralarında ince bir çizgi olur */
.gorus-akis{border-top:1px solid var(--kenar-ince)}
.gorus-kart{padding:14px 2px;border-bottom:1px solid var(--kenar-ince)}
.gorus-kart:last-child{border-bottom:0}
.g-ust{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.g-avatar{width:38px;height:38px;border-radius:50%;background:var(--vurgu-acik);color:var(--vurgu);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  flex:0 0 auto;overflow:hidden}
.g-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.g-kim{min-width:0;flex:1}
.g-isim{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ev{color:var(--soluk);font-weight:500;font-size:12.5px;margin-left:5px}
.g-alt{margin-top:1px}
.g-zaman{font-size:12.5px;color:var(--soluk);font-variant-numeric:tabular-nums}
.g-metin{font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--metin)}
/* Beğeni, kimlik satırının sağ ucunda durur; kartın altında boşluk kalmaz */
.begen-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
  padding:4px 2px;color:var(--soluk);font-weight:600;font-size:13.5px;flex:0 0 auto;align-self:flex-start}
.begen-btn .kalp{font-size:16px;line-height:1}
.begen-btn.aktif{color:var(--tehlike)}
.begen-btn:disabled{opacity:.5}

/* ── Bildirim kutuları ── */
.uyari{background:#fdecea;color:var(--tehlike);padding:11px 13px;border-radius:10px;
  font-size:13.5px;margin-bottom:14px;display:none}
.uyari.acik{display:block}
.basari{background:var(--vurgu-acik);color:var(--vurgu2);padding:11px 13px;border-radius:10px;
  font-size:13.5px;margin-bottom:14px;display:none}
.basari.acik{display:block}

/* ── Veri Güncelleme: hane kartları ── */
.aile-liste{display:flex;flex-direction:column;gap:10px}
.aile-kart{background:var(--yzy);border:1px solid var(--kenar);border-radius:12px;padding:13px}
.aile-kart.degisti{border-color:var(--vurgu);box-shadow:0 0 0 2px var(--vurgu-acik)}
.ak-ust{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ak-ust .g-avatar{overflow:hidden}
.ak-ust .g-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ak-kim{min-width:0;flex:1}
.ak-ad{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-rol{font-size:12.5px;color:var(--soluk);margin-top:1px}
.ak-iliski{color:var(--vurgu);font-weight:600}
.ak-bilgi{margin-bottom:10px}
.ak-bilgi .bilgi-satir{font-size:13px;padding:8px 12px}
.ak-form:empty{display:none}
.ak-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--kenar-ince)}
.ak-form .alan{margin-bottom:11px}
.ak-form .alan input,.ak-form .alan select{padding:9px 11px;border-radius:9px}
.alan-ikili{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.alan-ikili input,.alan-ikili select{width:100%;min-width:0}
.onay-satir{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--metin)}
.onay-satir input{width:17px;height:17px;accent-color:var(--vurgu)}
.baglanti-btn{background:transparent;border:0;padding:0;color:var(--vurgu);font-weight:600;
  font-size:12.5px;float:right}
.baglanti-btn:hover{text-decoration:underline}

/* Değişiklikleri gönderme çubuğu — sütunun altına yapışır */
.gonder-cubuk{
  position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:8px;
  margin:16px -16px -40px;padding:12px 16px;background:var(--yzy);
  border-top:1px solid var(--kenar);box-shadow:0 -6px 18px rgba(16,24,40,.07);
}
.gonder-cubuk[hidden]{display:none}
.cubuk-var{padding-bottom:62px}
.gonder-cubuk > span{flex:1;font-size:13px;font-weight:600;color:var(--soluk)}
/* Görüş yazma penceresindeki sayaç sona yaklaşınca uyarır */
.sayac-metin.dolmak-uzere{color:var(--tehlike);font-weight:600}

/* Başlık satırının sağındaki eylemler (Üye Görüşleri) */
.basi-eylem{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.im-btn{position:relative;width:34px;height:34px;border:1px solid var(--kenar);border-radius:9px;
  background:#fff;font-size:15px;line-height:1;color:var(--metin)}
.im-btn:hover,.im-btn.acik{border-color:var(--vurgu);background:var(--vurgu-acik)}
.im-rozet{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:20px;background:var(--tehlike);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

/* ── Ödeme Durumu ── */
.yil-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:8px 14px;border:1px solid var(--kenar);border-radius:9px;background:#fff;
  color:var(--metin);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.yil-btn:hover,.yil-btn.acik{border-color:var(--vurgu);color:var(--vurgu);background:var(--vurgu-acik)}
.yil-ok{font-size:12px;opacity:.7}
.yil-liste{display:flex;gap:8px;margin:-6px 0 14px;justify-content:flex-end}
.yil-liste button{padding:7px 13px;border:1px solid var(--kenar);border-radius:9px;background:#fff;
  color:var(--metin);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.yil-liste button.secili{background:var(--vurgu);border-color:var(--vurgu);color:#fff}

/* Ay listesi — ana ekrandaki menü satırlarıyla aynı yükseklik ve biçim */
.ay-liste{border-top:1px solid rgba(17,26,36,.12)}
.ay-satir{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 4px;background:transparent;border:0;
  border-bottom:1px solid rgba(17,26,36,.12);color:var(--metin);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:left;
}
.ay-satir:hover{background:var(--bg)}
.ay-satir.acik{color:var(--vurgu)}
.ay-ok{flex:0 0 auto;font-size:13px;opacity:.6}

/* Ayın kalem dökümü — satırın hemen altında açılır */
.ay-dokum{padding:14px 4px 20px;border-bottom:1px solid rgba(17,26,36,.12);background:var(--bg)}
.dokum-baslik{font-size:15px;font-weight:600;margin:0 0 12px;padding:0 10px}
.dokum-liste{margin:0 0 14px;padding:0 10px}
.dokum-liste > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:6px 0;font-size:14px}
.dokum-liste dt{margin:0;color:var(--metin)}
.dokum-liste dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dokum-toplam{margin-top:6px;padding-top:10px !important;border-top:1px solid var(--kenar);font-weight:700}
.dokum-bos{color:var(--soluk);font-size:13.5px;margin:4px 10px}

.odeme-durum{margin:0 10px;padding:12px;border-radius:10px;text-align:center;
  font-weight:800;font-size:13.5px;letter-spacing:.06em}
.odeme-durum.odendi{background:var(--vurgu);color:#fff}
.odeme-durum.bekliyor{background:var(--tehlike);color:#fff}