/* Hizmet durumu sayfası (16.10.2026, iş G): templates/front_end/hizmet_durumu/sayfa.html.
   Belirteçler yeni_ana_sayfa.css :root'tan (--ink, --hair, --wash, --ok, --warn, --alarm…); bu dosya yalnız hd-* sınıflarını ekler.
   Çubuk renkleri yalnız süs değil: her günün tarihi + durumu ekran okuyucu metninde (.sr) ve title'da da yazılı. */
.hd{--hd-ok:var(--ok); --hd-yavas:#b77d00; --hd-kesinti:var(--alarm); --hd-gri:#c3cad3}
.hd .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hd h1.kt-h1 em{font-style:italic; font-weight:400; color:var(--accent)}
.hd-bolum{padding-block:clamp(36px,5vw,64px)}
.hd-bolum + .hd-bolum{border-top:1px solid var(--hair)}
.hd-giris{padding-top:clamp(40px,6vw,80px)}
.hd-p{color:var(--muted); font-size:17px; max-width:68ch; margin:18px 0 28px}

/* ---------- Durum işareti ---------- */
.hd-durum{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; white-space:nowrap}
.hd-durum i{width:10px; height:10px; border-radius:50%; background:var(--hd-gri); flex:none}
.hd-durum--calisiyor{color:var(--ok)} .hd-durum--calisiyor i{background:var(--hd-ok)}
.hd-durum--yavas{color:var(--warn)} .hd-durum--yavas i{background:var(--hd-yavas)}
.hd-durum--kesinti{color:var(--alarm)} .hd-durum--kesinti i{background:var(--hd-kesinti)}
.hd-durum--bilinmiyor{color:var(--muted)}

/* ---------- Özet bant + açıklama ---------- */
.hd-ozet{border:1px solid var(--hair); background:var(--wash); padding:16px 20px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
.hd-ozet .hd-durum{font-size:16px}
.hd-ozet .hd-durum i{width:12px; height:12px}
.hd-ozet p{margin:0; color:var(--muted); font-size:14.5px}
.hd-ozet--calisiyor{border-color:#bfe3cf; background:var(--ok-wash)}
.hd-ozet--yavas{border-color:#f1d29c; background:var(--warn-wash)}
.hd-ozet--kesinti{border-color:#f3c3bd; background:var(--alarm-wash)}
.hd-lejant{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 28px}
.hd-lejant li{font-size:13.5px; line-height:1.45}
.hd-lejant small{display:block; color:var(--muted); font-size:13px; margin-top:2px}

/* ---------- Grup başlığı ---------- */
.hd-bas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px 48px; align-items:end; margin-bottom:22px}
.hd-bas h2{font-size:clamp(26px,3.2vw,38px); line-height:1.1}
.hd-bas p{margin:0; color:var(--muted); font-size:15.5px; max-width:62ch}

/* ---------- Bileşen ---------- */
.hd-liste{list-style:none; margin:0; padding:0; border:1px solid var(--hair); background:var(--bg)}
.hd-bilesen{padding:16px 18px; border-bottom:1px solid var(--hair); min-width:0}
.hd-bilesen:last-child{border-bottom:0}
.hd-ust{display:flex; gap:8px 16px; align-items:flex-start; justify-content:space-between}
.hd-ad{min-width:0}
.hd-ad h3{font-family:var(--f-body); font-size:16px; font-weight:600; letter-spacing:0; line-height:1.3}
.hd-ad h3 .b{font-size:16px}
.hd-ad small{display:block; color:var(--muted); font-size:13px; line-height:1.4; margin-top:2px; overflow-wrap:anywhere}
.hd-simdi{margin:0; flex:none; text-align:end}
.hd-simdi small{display:block; color:var(--muted); font-size:12px; font-weight:400}
.hd-rozet{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--warn); background:var(--warn-wash); padding:1px 7px; border-radius:999px; vertical-align:middle}
.hd-bekleyen{background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--wash) 10px 20px)}

/* Çubuklar: gün sayısı kadar eşit sütun, telefon genişliğinde de taşmaz */
.hd-gunler{list-style:none; margin:12px 0 6px; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; height:30px}
.hd-g{position:relative; min-width:0; border-radius:2px; background:var(--hd-gri)}
.hd-g--calisiyor{background:var(--hd-ok)}
.hd-g--yavas{background:var(--hd-yavas)}
.hd-g--kesinti{background:var(--hd-kesinti)}
.hd-g--bilinmiyor{background:var(--hd-gri); opacity:.55}
.hd-g--not::after{content:""; position:absolute; left:50%; bottom:-6px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--ink)}
@media (hover:hover){ .hd-g:hover{filter:brightness(.82)} }
.hd-bos-serit{height:30px; margin:12px 0 6px; border-radius:2px; background:var(--hd-gri); opacity:.35}
.hd-alt{display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.hd-alt span:nth-child(2){text-align:center}

/* ---------- Yurt dışı (açılır) ---------- */
.hd-yurtdisi{margin-top:22px; border:1px solid var(--hair)}
.hd-yurtdisi > summary{cursor:pointer; padding:14px 18px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; list-style-position:inside; background:var(--wash)}
.hd-yd-ad{font-weight:600}
.hd-yd-say{color:var(--muted); font-size:14px}
.hd-yd-p{margin:0; padding:12px 18px; color:var(--muted); font-size:14px; border-top:1px solid var(--hair)}
.hd-yonetici{display:block; color:var(--warn); margin-top:4px}
.hd-yurtdisi .hd-liste{border:0; border-top:1px solid var(--hair)}
.hd-yd-alt{margin:0; padding:12px 18px 8px; font-size:13px; font-weight:600; color:var(--muted); border-top:1px solid var(--hair)}
.hd-olcumsuz{list-style:none; margin:0; padding:0 18px 14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px}
.hd-olcumsuz li{padding:7px 0; border-bottom:1px dashed var(--hair); min-width:0}
.hd-o-ad{display:block; font-size:14px; font-weight:500}
.hd-olcumsuz small{display:block; color:var(--muted); font-size:12px; line-height:1.35; overflow-wrap:anywhere}

/* ---------- Notlar + yöntem ---------- */
.hd-notlar{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.hd-notlar li{padding:14px 0; border-bottom:1px solid var(--hair)}
.hd-notlar p{margin:0; max-width:72ch}
.hd-not-bas{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:4px !important}
.hd-not-bas b{color:var(--ink)}
.hd-bos{color:var(--muted); margin:0}
.hd-yontem{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 40px; margin:0}
.hd-yontem dt{font-weight:600; margin-bottom:4px}
.hd-yontem dd{margin:0; color:var(--muted); font-size:15px}
.hd-json{margin:24px 0 0; color:var(--muted); font-size:14px; overflow-wrap:anywhere}

@media (max-width:760px){
  .hd-bas, .hd-lejant, .hd-yontem{grid-template-columns:minmax(0,1fr)}
  .hd-olcumsuz{grid-template-columns:minmax(0,1fr); padding-inline:12px}
  .hd-yd-alt{padding-inline:12px}
  .hd-bilesen{padding:14px 12px}
  .hd-gunler{gap:1px; height:26px}
  .hd-bos-serit{height:26px}
  .hd-yurtdisi > summary, .hd-yd-p{padding-inline:12px}
}
@media (max-width:420px){
  .hd-ust{flex-direction:column; gap:6px}
  .hd-simdi{text-align:start}
  .hd-simdi small{display:inline; margin-inline-start:6px}
  .hd-alt{flex-wrap:wrap; row-gap:2px}
  .hd-alt span:nth-child(2){order:3; flex-basis:100%; text-align:start}
}

/* ---------- Abonelik (17.10.2026, iş W) ---------- */
.hd-abone-form{max-width:560px}
.hd-abone-form label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.hd-abone-satir{display:flex; gap:10px; flex-wrap:wrap}
.hd-abone-satir input{flex:1 1 240px; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--hair); border-radius:10px; font:inherit; font-size:16px; background:var(--bg); color:var(--ink)}
.hd-abone-satir input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.hd-abone-hesap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.hd-abone-hesap p{margin:0; flex:1 1 260px; min-width:0; overflow-wrap:anywhere}
.hd-bal{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hd-kvkk{margin:14px 0 0; color:var(--muted); font-size:13px; max-width:68ch}
.hd-abone-mesaj{margin:0 0 16px; padding:12px 16px; border:1px solid var(--hair); background:var(--wash); font-size:14.5px; max-width:68ch}
.hd-abone-mesaj--tamam{border-color:#bfe3cf; background:var(--ok-wash)}
.hd-abone-mesaj--hata{border-color:#f3c3bd; background:var(--alarm-wash)}
.hd-abone-sayfa form{margin:0 0 8px}