/* ekran-hata.css — wh6 "teşhis paneli" hata/özel durum ekranları (Plan 3 Task 8). design/web_hata-showcase/ortak.css + v06-teshis-paneli.html
   yerel stillerinin TAŞINMIŞ hâli. Renk YALNIZ takma adlardan (css/tasarim-adlari.css → --t-* / --f-*); ham renk YOK (test/renk-kapisi.test.mjs).
   Satır içi stil YOK: ölçer çubuğu ve geri sayım halkası SVG (CSP style-src 'self'). Tüm sınıflar `wh-` önekli (başka kümelerin CSS'iyle çakışmaz). */

[hidden]{ display:none !important; }

/* ---- Ton: her durumun yumuşak rengi (data-ton) ------------------------------ */
[data-ton]{ --ton-soft:var(--primary-soft); --ton-ink:var(--on-primary-soft); --ton-vurgu:var(--primary-deep); --ton-line:var(--primary-tint); }
[data-ton="bilgi"]{ --ton-soft:var(--note-soft); --ton-ink:var(--note-accent); --ton-vurgu:var(--note-accent); --ton-line:color-mix(in srgb, var(--note-accent) 26%, transparent); }
:root[data-tema="koyu"] [data-ton="bilgi"]{ --ton-ink:var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) [data-ton="bilgi"]{ --ton-ink:var(--ink); }
}
[data-ton="uyari"]{ --ton-soft:var(--gold-soft); --ton-ink:var(--gold-ink); --ton-vurgu:var(--gold-ink); --ton-line:var(--gold-line); }
[data-ton="tehlike"]{ --ton-soft:var(--danger-soft); --ton-ink:var(--on-danger-soft); --ton-vurgu:var(--danger-ink); --ton-line:color-mix(in srgb, var(--danger-ink) 28%, transparent); }

/* ---- Giriş (oturum yok) sayfası: marka çubuğu + duvar kâğıdı zemini --------- */
.wh-kapi{ position:relative; overflow:hidden; box-sizing:border-box; min-height:100vh; display:flex; flex-direction:column; background:var(--wallpaper-bg); color:var(--ink); }
.wh-kapi::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background:url("/img/duvar-akis.webp") center top / 100% auto no-repeat; }
:root[data-tema="koyu"] .wh-kapi::before{ filter:invert(1); mix-blend-mode:screen; opacity:.3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .wh-kapi::before{ filter:invert(1); mix-blend-mode:screen; opacity:.3; }
}
.wh-kapi > *{ position:relative; z-index:1; }
.wh-marka{ height:64px; flex:none; display:flex; align-items:center; gap:10px; padding:0 32px; }
.wh-marka img{ width:30px; height:30px; border-radius:8px; }
.wh-marka b{ font-size:var(--fs-h3); font-weight:var(--fw-x); }
.wh-marka span{ font-size:var(--fs-sub); color:var(--muted); font-weight:var(--fw-semi); }
.wh-marka-sag{ margin-left:auto; display:flex; gap:8px; }
.wh-zemin{ flex:1; min-height:0; display:grid; place-items:center; padding:0 32px 28px; }
.wh-perde{ position:fixed; inset:0; background:var(--scrim); display:grid; place-items:center; z-index:20; padding:24px; box-sizing:border-box; }

/* ---- İki sütunlu teşhis paneli ---------------------------------------------- */
.wh-pano{ width:1160px; max-width:100%; display:grid; grid-template-columns:420px minmax(0, 1fr); background:var(--sheet); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); box-sizing:border-box; }
.wh-pano--orta{ width:980px; grid-template-columns:360px minmax(0, 1fr); }
.wh-pano.wh-tek, .wh-panel.wh-tek{ grid-template-columns:minmax(0, 1fr); }
.wh-panel{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); background:var(--sheet); color:var(--ink); }
.wh-sol{ padding:36px 36px 32px; display:flex; flex-direction:column; gap:16px; box-sizing:border-box; }
.wh-panel .wh-sol{ padding:32px 32px; }
.wh-sol .wh-kunye{ align-self:flex-start; }
.wh-sol .wh-baslik{ font-size:var(--fs-h1); }
.wh-sol .wh-eylemler{ flex-direction:column; align-items:stretch; margin-top:auto; padding-top:8px; }
.wh-sol .wh-eylemler .btn{ width:100%; }
.wh-sag{ padding:28px 32px; display:flex; flex-direction:column; gap:14px; border-left:1px solid var(--line); box-sizing:border-box; counter-reset:wh6;
  background:linear-gradient(170deg, color-mix(in srgb, var(--ton-soft) 75%, var(--sheet)) 0%, var(--sheet-2) 70%); }
.wh-panel .wh-sag{ padding:28px 28px; }
.wh-sag-bas{ display:flex; align-items:center; gap:10px; font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--sub); letter-spacing:.5px; text-transform:uppercase; }
.wh-sag-bas .ik{ width:16px; height:16px; color:var(--ton-vurgu); }
.wh-cizgi{ flex:1; height:1px; background:var(--ton-line); }
.wh-sag .wh-ayrinti{ counter-increment:wh6; }
.wh-sag .wh-ayrinti-bas{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sub); color:var(--ink); }
.wh-sag .wh-ayrinti-bas::before{ box-sizing:content-box; /* showcase: *{border-box} sözde öğelere uygulanmaz */ content:counter(wh6); width:22px; height:22px; border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--sheet); border:1px solid var(--ton-line); color:var(--ton-ink); font-size:var(--fs-micro); font-weight:var(--fw-x); }
.wh-sag .wh-kutu{ box-shadow:var(--shadow-sm), var(--shadow-ic); }
.wh-sag .wh-adimlar{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm); }
.wh-sag .wh-bildirim-yardim{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; box-shadow:var(--shadow-sm); }
.wh-sag .wh-bildirim-yardim .wh-adimlar{ border:0; box-shadow:none; padding:0; }

/* ---- Kahraman simge, künye, metinler --------------------------------------- */
.wh-simge{ --boy:96px; width:var(--boy); height:var(--boy); flex:none; display:grid; place-items:center; position:relative;
  border-radius:calc(var(--boy) * .28); font-size:calc(var(--boy) * .54); line-height:1;
  background:linear-gradient(160deg, var(--sheet) 8%, var(--ton-soft) 92%);
  border:1px solid var(--line); box-shadow:var(--shadow-md), var(--shadow-ic); }
.wh-simge::after{ content:""; position:absolute; inset:6px; border-radius:inherit; border:1px dashed var(--ton-line); opacity:.7; pointer-events:none; }
.wh-yan{ position:absolute; right:-10px; bottom:-8px; width:calc(var(--boy) * .42); height:calc(var(--boy) * .42); border-radius:50%;
  display:grid; place-items:center; font-size:calc(var(--boy) * .24); background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.wh-simge--orta{ --boy:64px; }
.wh-kunye{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--ton-soft); color:var(--ton-ink); border:1px solid var(--ton-line); font-size:var(--fs-micro); font-weight:var(--fw-x); letter-spacing:.3px; box-sizing:border-box; }
.wh-nokta{ width:8px; height:8px; border-radius:50%; background:var(--ton-vurgu); }
.wh-baslik{ margin:0; font-size:var(--fs-display); font-weight:var(--fw-x); letter-spacing:-.4px; line-height:1.2; color:var(--ink); }
.wh-metin{ margin:0; font-size:var(--fs-body); color:var(--sub); line-height:1.55; }
.wh-dipnot{ margin:0; font-size:var(--fs-cap); color:var(--muted); display:flex; gap:8px; align-items:flex-start; line-height:1.45; }
.wh-dipnot .ik{ width:16px; height:16px; margin-top:1px; color:var(--muted); flex:none; }
.wh-eylemler{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ---- Ayrıntı blokları -------------------------------------------------------- */
.wh-kutu{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-md); }
.wh-ayrinti{ display:flex; flex-direction:column; gap:8px; }
.wh-ayrinti-bas{ font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--sub); letter-spacing:.2px; }

/* Özellik denetimi / kontrol listesi */
.wh-denetim{ display:flex; flex-direction:column; }
.wh-s{ display:flex; align-items:center; gap:12px; padding:10px 14px; }
.wh-s + .wh-s{ border-top:1px solid var(--line-soft); }
.wh-denetim .wh-e{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); font-size:17px; background:var(--sheet-2); border:1px solid var(--line-soft); }
.wh-g{ flex:1; min-width:0; }
.wh-ad{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink); }
.wh-ne{ font-size:var(--fs-cap); color:var(--sub); }
.wh-durum{ flex:none; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-pill); font-size:var(--fs-micro); font-weight:var(--fw-x); }
.wh-durum--var{ background:var(--primary-soft); color:var(--on-primary-soft); }
.wh-durum--yok{ background:var(--danger-soft); color:var(--on-danger-soft); }
.wh-durum--bekle{ background:var(--gold-soft); color:var(--gold-ink); }

/* Önerilen tarayıcılar */
.wh-tarayicilar{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.wh-tarayici{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:var(--r-md);
  background:var(--sheet-2); border:1px solid var(--line); text-align:center; }
.wh-harf{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:var(--fw-x); font-size:var(--fs-sub);
  box-shadow:var(--shadow-ic), var(--shadow-sm); border:1px solid var(--line); }
.wh-harf--c{ background:var(--primary-soft); color:var(--on-primary-soft); }
.wh-harf--e{ background:var(--note-soft); color:var(--note-accent); }
.wh-harf--f{ background:var(--accent-soft); color:var(--on-accent-soft); }
.wh-harf--s{ background:var(--gold-soft); color:var(--gold-ink); }
.wh-tarayici .wh-ad{ font-size:var(--fs-cap); font-weight:var(--fw-x); }
.wh-sur{ font-size:var(--fs-micro); color:var(--muted); font-weight:var(--fw-semi); }

/* Numaralı adımlar */
.wh-adimlar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:adim; }
.wh-adimlar li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-sub); line-height:1.45; counter-increment:adim; color:var(--ink); }
.wh-adimlar li::before{ box-sizing:content-box; content:counter(adim); width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--ton-soft, var(--primary-soft)); color:var(--ton-ink, var(--on-primary-soft)); border:1px solid var(--ton-line, var(--primary-tint));
  font-size:var(--fs-micro); font-weight:var(--fw-x); }
.wh-k{ color:var(--sub); display:block; font-size:var(--fs-cap); }
.wh-adimlar b{ font-weight:var(--fw-x); }

/* Depolama ölçeri */
.wh-olcer{ display:flex; flex-direction:column; gap:10px; padding:14px; }
.wh-ust{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wh-buyuk{ font-size:var(--fs-h2); font-weight:var(--fw-x); color:var(--ink); }
.wh-buyuk small{ font-size:var(--fs-sub); color:var(--sub); font-weight:var(--fw-semi); }
.wh-yuzde{ font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--gold-ink); }
.wh-cubuk{ display:block; height:12px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden; border:1px solid var(--line); box-sizing:border-box; }
.wh-cubuk-svg{ display:block; width:100%; height:100%; }
.wh-c1{ fill:var(--accent); } .wh-c2{ fill:var(--primary); } .wh-c3{ fill:var(--note-accent); }
.wh-lejant{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-cap); color:var(--sub); }
.wh-lejant span{ display:inline-flex; align-items:center; gap:6px; }
.wh-lejant i{ width:10px; height:10px; border-radius:3px; display:block; }
.wh-lejant-1{ background:var(--accent); } .wh-lejant-2{ background:var(--primary); } .wh-lejant-3{ background:var(--note-accent); }

/* Geri sayım halkası (SVG; animasyon YOK) */
.wh-sayac{ display:flex; align-items:center; gap:16px; padding:14px; }
.wh-halka{ position:relative; width:92px; height:92px; flex:none; border-radius:50%; display:grid; place-items:center; }
.wh-halka-svg{ position:absolute; inset:0; width:92px; height:92px; }
.wh-halka-iz, .wh-halka-dolgu{ fill:none; stroke-width:9; }
.wh-halka-iz{ stroke:var(--line-soft); }
.wh-halka-dolgu{ stroke:var(--gold); }
.wh-halka b{ position:relative; width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:var(--card-bg); color:var(--ink);
  font-size:var(--fs-h2); font-weight:var(--fw-x); font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.wh-sayac .wh-ad{ font-weight:var(--fw-x); }

/* Anahtar-değer tablosu */
.wh-kv{ display:grid; grid-template-columns:auto 1fr; gap:0; }
.wh-kv > div{ padding:9px 14px; font-size:var(--fs-sub); border-top:1px solid var(--line-soft); }
.wh-kv > div:nth-child(-n+2){ border-top:0; }
.wh-a{ color:var(--sub); font-weight:var(--fw-semi); white-space:nowrap; }
.wh-d{ font-weight:var(--fw-bold); display:flex; align-items:center; gap:8px; color:var(--ink); }
.wh-d.wh-fark{ color:var(--danger-deep); }
.wh-bayrak{ font-size:18px; line-height:1; }
.wh-d code{ font-weight:var(--fw-semi); color:var(--sub); }


/* Sekmeli yardım (tarayıcıya göre adımlar) */
.wh-sekmeler{ display:flex; gap:4px; padding:4px; border-radius:var(--r-pill); background:var(--line-soft); border:1px solid var(--line); width:max-content; }
.wh-sekmeler button{ height:32px; padding:0 14px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--sub); font-size:var(--fs-sub); font-weight:var(--fw-bold);
  display:inline-flex; align-items:center; gap:8px; }
.wh-sekmeler button:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:1px; }
.wh-harf-k{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-micro); font-weight:var(--fw-x); background:var(--sheet); border:1px solid var(--line); }
.wh-sekmeler button[aria-selected="true"]{ background:var(--sheet); color:var(--ink); box-shadow:var(--shadow-sm), var(--shadow-ic); }
.wh-bosluk{ height:12px; }
.wh-tarayici-cubugu{ display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; margin:12px 0; border-radius:var(--r-pill); background:var(--line-soft); border:1px solid var(--line); font-size:var(--fs-cap); color:var(--sub); }
.wh-tarayici-cubugu b{ color:var(--ink); }
.wh-buraya{ margin-left:auto; }
.wh-vurgu{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--gold-soft); border:2px solid var(--gold); font-size:14px; box-sizing:border-box; }
.wh-tarayici-cubugu .ik{ width:14px; height:14px; color:var(--primary-deep); }

/* Bağlantı şeridi (tam ekran değil): kabuk.css .serit (liste sütununda 0 12px 8px kenar boşluğu) olduğu gibi kullanılır. */

/* Daralan pencere: tek sütun */
@media (max-width: 1000px) {
  .wh-pano, .wh-pano--orta{ grid-template-columns:minmax(0, 1fr); }
  .wh-sag{ border-left:0; border-top:1px solid var(--line); }
  .wh-panel{ grid-template-columns:minmax(0, 1fr); overflow:auto; }
  .wh-sol .wh-eylemler{ margin-top:8px; }
  .wh-zemin{ padding:0 16px 20px; }
  .wh-marka{ padding:0 16px; }
}