/* =====================================================================
 DADAFIT — DURUM EKRANLARI (tek kaynak)
 ---------------------------------------------------------------------
 Altı ekranın ortak dili: 404 · 500 · 403 · bakım · çevrimdışı ·
 oturum süresi doldu. Altı ayrı sayfaya aynı 70 satırı kopyalamak
 yerine tek dosya — kabuk dosyalarına DOKUNULMADI, bu ayrı bir katman.

 KURAL: burada yeni renk/yarıçap/gölge ÜRETİLMEZ. Kullanılan her değer
 `fit-shell.css`in :root tokenidir (--fit-deep, --fit-tint, --line,
 --radius-lg, --sh-sm, --hs-danger …). Ölçüm için: bu dosyada tanımlı
 özel değişken sayısı 0'dır; yalnız tüketici.

 Yükleme sırası: fit-shell.css → bu dosya → sayfa <style> → fit-type.css
 ===================================================================== */

.dr-wrap{max-width:900px}

/* ---- giriş bloğu: durum ikonu + açıklama ---- */
.dr-lead{display:flex;gap:20px;align-items:flex-start}
.dr-lead .dr-ico{width:62px;height:62px;border-radius:var(--radius-circle);
  background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;
  font-size:25px;flex:none}
.dr-lead .dr-ico.is-uyari{background:var(--hs-warn-tint);color:var(--hs-warn)}
.dr-lead .dr-ico.is-dur{background:var(--hs-danger-tint);color:var(--hs-danger)}
.dr-lead h2{font-size:23px;margin:0 0 8px;line-height:1.3}
.dr-lead p{font-size:15.5px;color:var(--slate-2);font-weight:500;line-height:1.7;
  max-width:var(--measure)}
.dr-lead p+p{margin-top:11px}

/* ---- arama kutusu (yalnız 404) ---- */
.dr-ara{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.dr-ara label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dr-ara input{flex:1 1 260px;min-width:0;height:48px;padding:0 16px;font-family:inherit;
  font-size:15px;font-weight:500;color:var(--slate);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-md);outline:none;
  transition:border-color .2s var(--ease)}
.dr-ara input:focus{border-color:var(--fit-deep)}
.dr-ara .btn{height:48px;flex:none}

/* ---- çıkış yolları: her ekranda en az üç kapı ---- */
.dr-cikis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin-top:30px;list-style:none;padding:0}
.dr-cikis a{display:flex;gap:14px;align-items:flex-start;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--sh-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.dr-cikis a:hover{border-color:var(--fit);box-shadow:var(--sh-md);transform:translateY(-2px)}
.dr-cikis a>i{color:var(--fit-deep);font-size:17px;margin-top:2px;flex:none;width:20px;text-align:center}
.dr-cikis b{display:block;font-size:15px;color:var(--slate);font-weight:700;margin-bottom:3px}
.dr-cikis small{display:block;font-size:13px;color:var(--muted);font-weight:500;line-height:1.55}

/* ---- sık gidilen sayfalar (404) ---- */
.dr-sik{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;list-style:none;padding:0}
.dr-sik a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;
  font-size:13.5px;font-weight:600;color:var(--slate);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-chip);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.dr-sik a:hover{border-color:var(--fit);color:var(--fit-deep)}
.dr-sik a i{font-size:12px;color:var(--fit-deep)}

/* ---- canlı durum rozeti (çevrimdışı ekranı — navigator.onLine) ---- */
.dr-durum{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  min-height:44px;padding:0 18px;border-radius:var(--radius-chip);
  font-size:14px;font-weight:700;
  background:var(--hs-danger-tint);color:var(--hs-danger);
  border:1px solid rgba(179,38,30,.24)}
.dr-durum .nokta{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.dr-durum.is-online{background:var(--fit-tint);color:var(--fit-deep);border-color:var(--fit-line)}

/* ---- boş alan işareti: sayı/metin UYDURULMAZ, yeri gösterilir (K13 dili) ---- */
.dr-alan{display:inline-block;padding:3px 10px;border-radius:var(--radius-badge);
  border:1px dashed var(--line);background:var(--bg);color:var(--muted);
  font-size:13px;font-weight:600;font-style:normal}

.dr-blok{margin-top:34px}
.dr-blok h3{font-size:17px;margin:0 0 10px}

@media (max-width:640px){
  .dr-lead{flex-direction:column;gap:14px}
  .dr-lead .dr-ico{width:54px;height:54px;font-size:22px}
  .dr-lead h2{font-size:20px}
  .dr-lead p{font-size:15px}
  .dr-ara .btn{width:100%}
}
