/* ═══════════════════════════════════════════════════════════════
   whitemodz — durum panosu (/status)

   status.js'in ürettiği işaretleme için yerleşim ve bileşenler:
   özet paneli (status-hero, sh-*), arama + filtre çipleri (sc-*),
   oyun grupları ve ürün satırları (sb-*), son değişiklikler akışı
   (status-changes, sch-*), boş durumlar ve sayfa altı notu.

   Ortak parçalar (buton, form, rozet tabanı) wm-page.css'te kalır;
   burası o kuralların durum sayfasına özgü hâlini yazar ve en son
   yüklenir. Değerler yalnız wm-tokens.css ve wm-premium.css
   token'larından: cam/blur yok, renkli parıltı yok, 12px'ten büyük
   köşe yok, sarı üzerine siyah. Durum rengi hiçbir yerde tek başına
   anlam taşımaz — yanında her zaman yazılı etiket vardır.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 00 · Durum tonları ════════════════════════════════════════
   Her durum sınıfı üç yerel değişken tanımlar; bileşenler rengi
   yalnız bunlardan okur. updating ve risk aynı uyarı tonunu paylaşır:
   updating halka nokta + taralı ölçer dilimiyle ayrışır.             */
.st-undetected, .sh-ok, .sb-ok{
  --wm-st: var(--wm-ok); --wm-st-soft: var(--wm-ok-soft); --wm-st-line: var(--wm-ok-line);
}
.st-updating, .st-risk, .sh-warn, .sb-warn{
  --wm-st: var(--wm-warn); --wm-st-soft: var(--wm-warn-soft); --wm-st-line: var(--wm-warn-line);
}
.st-detected, .sh-bad, .sb-bad{
  --wm-st: var(--wm-bad); --wm-st-soft: var(--wm-bad-soft); --wm-st-line: var(--wm-bad-line);
}

.st-dot{
  width: 7px; height: 7px; flex: none; box-sizing: border-box;
  border-radius: 50%; background: var(--wm-st, currentColor);
}
.st-dot-ok{ background: var(--wm-ok); }
.st-dot-warn{ background: var(--wm-warn); }
.st-dot-bad{ background: var(--wm-bad); }
.st-dot-ring{ background: transparent; border: 1.5px solid var(--wm-warn); }

.st-count{ color: var(--wm-st); white-space: nowrap; }

/* Ekran okuyucuya kalan metin (değişiklik akışındaki "changed to") */
.wm-sr{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ölçer dilimleri: özet panelinde ve grup başlığında aynı dil */
.sh-seg{ height: 100%; min-width: 4px; border-radius: var(--wm-r-pill); }
.sh-seg-undetected{ background: var(--wm-ok); }
.sh-seg-updating{
  background: repeating-linear-gradient(-45deg, var(--wm-warn) 0 3px, var(--wm-warn-line) 3px 6px);
}
.sh-seg-risk{ background: var(--wm-warn); }
.sh-seg-detected{ background: var(--wm-bad); }

/* ═══ 01 · Özet paneli ══════════════════════════════════════════
   Skor · karar · canlı göstergesi, altında tam genişlik ölçer.
   Filtre satırı hemen altına yapışır: çipler ölçerin lejantıdır.   */
.status-summary{ display: block; margin: 0; }
.status-summary:empty{ display: none; }

.status-hero{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "score main side" "meter meter meter";
  align-items: center; gap: 22px clamp(20px, 2.6vw, 36px);
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(var(--wm-k-raise-2), var(--wm-k-raise));
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-l);
  box-shadow: var(--wm-edge), var(--wm-e2);
}

.sh-score{
  grid-area: score; display: flex; flex-direction: column; gap: 8px;
  padding-right: clamp(20px, 2.6vw, 36px); border-right: 1px solid var(--wm-line);
}
.sh-ratio{
  display: flex; align-items: baseline; gap: 3px; white-space: nowrap;
  color: var(--wm-w); font-family: var(--wm-display); font-size: var(--wm-d2); line-height: .9;
  font-weight: 800; font-variation-settings: "wdth" 110, "wght" 800; letter-spacing: -.03em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.sh-ratio small{
  color: var(--wm-g); font-size: var(--wm-d4); letter-spacing: -.01em;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.sh-score-label{
  max-width: 21ch; color: var(--wm-g); line-height: 1.45;
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

.sh-main{ grid-area: main; display: flex; align-items: center; gap: 16px; min-width: 0; }
.sh-orb{
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--wm-st-soft); color: var(--wm-st);
  border: 1px solid var(--wm-st-line); border-radius: var(--wm-r-s);
}
.sh-orb svg{ width: 21px; height: 21px; }
.sh-text{ min-width: 0; }
.sh-text > b{
  display: block; color: var(--wm-w); text-wrap: pretty;
  font-size: var(--wm-d4); font-weight: 800; line-height: 1.35; letter-spacing: -.005em;
}
.sh-rest{ color: var(--wm-g); font-weight: 700; }

.sh-side{
  grid-area: side; align-self: start;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sh-live{
  display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill);
  white-space: nowrap; cursor: default;
}
.sh-live i{
  position: relative; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--wm-ok);
}
/* Nabız: yayılan ince halka — gölge/parıltı değil. */
.sh-live i::after{
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--wm-ok); opacity: 0;
  animation: wmStatusPulse 2.4s var(--wm-ease) infinite;
}
@keyframes wmStatusPulse{
  0%{ transform: scale(1); opacity: .8; }
  70%, 100%{ transform: scale(2.8); opacity: 0; }
}
.sh-live-text{
  color: var(--wm-g); font-size: var(--wm-t5); font-weight: 700;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.sh-live-text > span:first-child{ color: var(--wm-ok); }
.sh-when{
  padding-right: 4px; color: var(--wm-g); white-space: nowrap;
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

.sh-meter{ grid-area: meter; display: flex; gap: 3px; height: 10px; }

/* ═══ 02 · Arama ve filtre çipleri ══════════════════════════════ */
.status-controls{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 0 clamp(22px, 2.6vw, 30px); padding: 14px clamp(16px, 2.4vw, 28px);
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-l);
  box-shadow: var(--wm-edge-soft), var(--wm-e1);
}
.status-controls:empty{ display: none; }
/* Özet paneli varken ona yapışık alt şerit olur. */
.status-summary:not(:empty) .status-hero{
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: var(--wm-line);
}
.status-summary:not(:empty) + .status-controls{
  border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: var(--wm-e2);
}

.sc-search{ position: relative; flex: 1 1 260px; max-width: 400px; min-width: 0; }
.sc-search > svg{
  position: absolute; left: 14px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); color: var(--wm-g-dim); pointer-events: none;
  transition: color var(--wm-fast);
}
.sc-search:focus-within > svg{ color: var(--wm-y); }
.sc-search input{
  height: 42px; min-height: 42px; padding: 0 46px 0 41px;
  font-size: var(--wm-t3); font-weight: 600;
}
.sc-search input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.sc-kbd{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  background: var(--wm-k-raise); color: var(--wm-g);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 700; line-height: 1;
  pointer-events: none;
}
.sc-search input:focus ~ .sc-kbd,
.sc-search input:not(:placeholder-shown) ~ .sc-kbd{ display: none; }
.sc-clear{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: none; color: var(--wm-g); border: 0; border-radius: var(--wm-r-xs);
  transition: color var(--wm-fast), background var(--wm-fast);
}
.sc-clear:hover{ color: var(--wm-w); background: var(--wm-k-raise-2); }
.sc-clear svg{ width: 14px; height: 14px; }
.sc-clear[hidden]{ display: none; }

.sc-filters{ display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sc-chip{
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 6px 0 13px; cursor: pointer;
  background: var(--wm-k-sink); color: var(--wm-g);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: .085em; text-transform: uppercase; white-space: nowrap;
  transition: background var(--wm-fast), color var(--wm-fast), border-color var(--wm-fast), box-shadow var(--wm-fast);
}
.sc-chip:hover:not(:disabled){ color: var(--wm-w); border-color: var(--wm-line-3); }
/* Seçili filtre hapı: bir hap sırası tekrar eden bir bileşendir, bu
   yüzden dolgu sarıyı almaz. Yükseltilmiş zemin + sarı kenarlık +
   sarı etiket; durum ayrıca aria-pressed/aria-current ile okunur. */
.sc-chip.is-active{
  background: var(--wm-k-raise-2); color: var(--wm-y);
  border-color: var(--wm-y-line-2);
}
.sc-chip.is-active:hover{ color: var(--wm-y); background: var(--wm-y-soft); }
.sc-chip.is-active .sc-num{ background: var(--wm-y-soft); color: var(--wm-y); }
.sc-chip:disabled{ cursor: default; opacity: .42; }
.sc-num{
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--wm-k-raise-2); color: var(--wm-w); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 800; line-height: 1;
  font-variation-settings: normal; letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* ═══ 03 · Gövde: pano + son değişiklikler ══════════════════════ */
.wm-status-body{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 4vw, 52px); align-items: start;
}
#statusBoard{ container-type: inline-size; min-width: 0; }
#statusChanges{ min-width: 0; }
#statusChanges:empty{ display: none; }

/* Veri gelene kadar boş bant yerine parıltılı yer tutucu */
#statusBoard:empty{
  min-height: 360px; border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  background:
    linear-gradient(100deg, transparent 20%, var(--wm-line) 40%, transparent 60%) 0 0 / 220% 100% no-repeat,
    var(--wm-k-raise);
  animation: wmShimmer 1.5s linear infinite;
}

@media (min-width: 1180px){
  .wm-status-body{ grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .wm-status-body:has(> #statusChanges:empty){ grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 04 · Oyun grupları ════════════════════════════════════════
   Dört+ ürünlü oyun tam genişlik; kısa kuyruk yan yana yarım panel.
   dense: tam genişlik bir grup yarımları bölerse boşluk kalmasın.   */
.status-board{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense; gap: var(--wm-gap);
}
/* Filtre tek oyun bıraktıysa yarım panel kalmasın. */
.sb-group.is-wide,
.sb-group:only-child{ grid-column: 1 / -1; }
@container (max-width: 640px){
  .status-board{ grid-template-columns: minmax(0, 1fr); }
}

.sb-group{
  container: sb-group / inline-size;
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge-soft), var(--wm-e1);
  scroll-margin-top: 96px;
}

.sb-head{
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "thumb title gauge";
  align-items: center; gap: 14px; padding: 14px 16px;
  background: linear-gradient(var(--wm-k-raise-2), var(--wm-k-raise));
  border-bottom: 1px solid var(--wm-line);
}
.sb-thumb{
  grid-area: thumb; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  background: var(--wm-k-sink); color: var(--wm-g-dim);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
}
.sb-thumb img{
  width: 100%; height: 100%; display: block; object-fit: cover;
  filter: saturate(.88) contrast(1.03);
}
.sb-thumb .glyph-ph{ width: 22px; height: 22px; }

.sb-headline{ grid-area: title; min-width: 0; }
.sb-title{
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wm-w); font-family: var(--wm-display); font-size: var(--wm-d4); line-height: 1.12;
  font-weight: 750; font-variation-settings: "wdth" 106, "wght" 750; letter-spacing: -.012em;
  text-transform: uppercase;
}
.sb-sub{
  margin: 5px 0 0; color: var(--wm-g); line-height: 1.5;
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.sb-gauge{
  grid-area: gauge; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.sb-health{ display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.sb-health b{
  color: var(--wm-st); font-family: var(--wm-display); font-size: var(--wm-d4); line-height: 1;
  font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700; letter-spacing: -.01em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.sb-health > span{
  color: var(--wm-g); font-size: var(--wm-t5); font-weight: 700;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.sb-meter{ display: flex; gap: 2px; width: 120px; height: 5px; }

/* ═══ 05 · Ürün satırları ═══════════════════════════════════════
   Saç teli ızgara: her satır sol ve alt çizgi taşır; ızgara -1px
   kaydırılır ve panel taşanı kırpar — ilk sütunun sol çizgisi ve son
   satırın alt çizgisi görünmez, sütun sayısından bağımsız.           */
.sb-grid{ display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 -1px -1px; }
@container sb-group (min-width: 620px){
  .sb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sb-group (min-width: 1060px){
  .sb-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sb-tile{
  container: sb-tile / inline-size;
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: 66px; padding: 11px 16px;
  color: inherit; text-decoration: none;
  border-left: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line);
  transition: background var(--wm-fast);
}
.sb-tile:hover{ background: var(--wm-k-raise-2); }
.sb-tile:focus-visible{ outline-offset: -2px; border-radius: var(--wm-r-s); }

.sb-art{ position: relative; width: 40px; height: 40px; }
.sb-art-box{
  width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
  background: var(--wm-k-sink); color: var(--wm-g-dim);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
}
.sb-art-box img{
  width: 100%; height: 100%; display: block; object-fit: cover;
  filter: saturate(.88) contrast(1.03); transition: filter 320ms var(--wm-ease);
}
.sb-tile:hover .sb-art-box img{ filter: none; }
.sb-art-box .glyph-ph{ width: 20px; height: 20px; }

/* Görselin köşesindeki durum simgesi: düz zemin + ton katmanı, böylece
   görselin üstünde de okunur. */
.sb-mark{
  display: grid; place-items: center; flex: none;
  background: linear-gradient(var(--wm-st-soft), var(--wm-st-soft)), var(--wm-k-raise);
  color: var(--wm-st); border: 1px solid var(--wm-st-line); border-radius: 50%;
}
.sb-art .sb-mark{ position: absolute; right: -6px; bottom: -6px; width: 19px; height: 19px; }
.sb-art .sb-mark svg{ width: 10px; height: 10px; }
.sb-tile:hover .sb-art .sb-mark{
  background: linear-gradient(var(--wm-st-soft), var(--wm-st-soft)), var(--wm-k-raise-2);
}

.sb-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-info b{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wm-w); font-size: var(--wm-t2); font-weight: 800; line-height: 1.3;
  transition: color var(--wm-fast);
}
.sb-tile:hover .sb-info b{ color: var(--wm-y); }
.sb-info small{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wm-g); font-size: var(--wm-t4); font-weight: 600; line-height: 1.35;
}

.sb-meta{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sb-meta .status-pill{
  height: 22px; padding: 0 8px; gap: 6px;
  background: var(--wm-st-soft); color: var(--wm-st);
  border: 1px solid var(--wm-st-line); border-radius: var(--wm-r-xs);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: .09em; white-space: nowrap;
}
.sb-meta .status-pill .st-dot{ width: 6px; height: 6px; }
.sb-note{
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--wm-g); font-size: var(--wm-t5); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sb-note--sold::before{
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--wm-off);
}

.sp-short{ display: none; }
@container sb-tile (max-width: 380px){
  .sb-tile .sp-long{ display: none; }
  .sb-tile .sp-short{ display: inline; }
  /* Dar satırda ad kesilmesin: iki satıra kadar sarsın. */
  .sb-info b{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* Dar grup: ölçer başlığın altına iner, başlık tam satır alır. */
@container sb-group (max-width: 460px){
  .sb-head{
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "thumb title" "gauge gauge";
    row-gap: 12px; padding: 13px 14px;
  }
  .sb-thumb{ width: 40px; height: 40px; }
  .sb-gauge{ flex-direction: row; align-items: center; gap: 14px; }
  .sb-meter{ flex: 1; width: auto; }
  .sb-tile{ padding: 11px 14px; gap: 11px; }
}

/* ═══ 06 · Son değişiklikler ════════════════════════════════════ */
.status-changes > h2{
  margin: 0; color: var(--wm-w);
  font-family: var(--wm-display); font-size: var(--wm-d3); line-height: 1.05;
  font-weight: 800; font-variation-settings: "wdth" 110, "wght" 800; letter-spacing: -.022em;
  text-transform: uppercase;
}
.sch-lead{ margin: 8px 0 16px; max-width: 60ch; color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.6; }

.sch-list{
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge-soft), var(--wm-e1);
}
.sch-list li{ position: relative; }
.sch-item{
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start; gap: 12px; padding: 10px 16px;
  color: inherit; text-decoration: none;
  transition: background var(--wm-fast);
}
.sch-item:hover{ background: var(--wm-k-raise-2); }
.sch-item:focus-visible{ outline-offset: -2px; }
/* Zaman çizgisi: bir işaretten sonrakine */
.sch-list li:not(:last-child) .sch-item::before{
  content: ""; position: absolute; left: 29px; top: 40px; bottom: -10px; width: 1px;
  background: var(--wm-line-2);
}
.sch-item .sb-mark{ position: relative; width: 28px; height: 28px; }
.sch-item .sb-mark svg{ width: 13px; height: 13px; }

.sch-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.sch-body b{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wm-w); font-size: var(--wm-t3); font-weight: 800; line-height: 1.35;
  transition: color var(--wm-fast);
}
.sch-item:hover .sch-body b{ color: var(--wm-y); }
.sch-body small{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px;
  color: var(--wm-g); font-size: var(--wm-t4); font-weight: 600; line-height: 1.5;
}
.sch-arrow{ width: 12px; height: 12px; flex: none; color: var(--wm-g-dim); }
.sch-to{ color: var(--wm-st); font-weight: 800; }
/* Kaynak etiketi küçük rozet: satır sararsa başında yetim ayraç kalmaz. */
.sch-src{
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  color: var(--wm-g); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.sch-item time{
  padding-top: 3px; color: var(--wm-g); white-space: nowrap;
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ═══ 07 · Boş durumlar ═════════════════════════════════════════
   "Hiç yayın yok" ve "aramayla eşleşen yok" aynı kabuğu paylaşır.   */
.status-empty{
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(40px, 6vw, 72px) 24px; text-align: center; color: var(--wm-g);
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge-soft), var(--wm-e1);
}
.status-empty-icon{
  width: 52px; height: 52px; display: grid; place-items: center; margin: 0 0 18px;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
}
.status-empty-icon svg{ width: 22px; height: 22px; }
.status-empty h3{
  margin: 0 0 8px; color: var(--wm-w);
  font-family: var(--wm-display); font-size: var(--wm-d3); line-height: 1.08;
  font-weight: 750; font-variation-settings: "wdth" 106, "wght" 750; letter-spacing: -.018em;
  text-transform: uppercase;
}
.status-empty p{ margin: 0 0 22px; max-width: 46ch; font-size: var(--wm-t2); line-height: 1.65; }

/* ═══ 08 · Sayfa altı notu ══════════════════════════════════════ */
.status-foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--wm-line);
  color: var(--wm-g); font-size: var(--wm-t3);
}
.status-foot p{ margin: 0; line-height: 1.6; }
.status-foot a{ color: var(--wm-y); font-weight: 700; text-decoration: none; transition: color var(--wm-fast); }
.status-foot a:hover{ color: var(--wm-y-hi); }
/* Sadece iki bağlantı arasındaki "·" ayracı. Eski `p > span` seçici ilk
   paragrafın cümle span'ini de yakalıyordu: 8px içeri kayıyor ve okunmayacak
   kadar soluyordu (3.39:1). */
.status-foot__sep{ margin: 0 8px; color: var(--wm-g-dim); }

/* ═══ 09 · Dar ekran ════════════════════════════════════════════ */
/* Arama ve beş çip tek satıra sığmadığında sağa yaslı yarım satır
   kalmasın: arama tam satır, çipler altında soldan. */
@media (max-width: 1100px){
  .sc-search{ flex-basis: 100%; max-width: none; }
  .sc-filters{ margin-left: 0; }
}
@media (max-width: 900px){
  .status-hero{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "score side" "main main" "meter meter";
    gap: 18px 16px;
  }
  .sh-score{
    flex-direction: row; align-items: center; gap: 14px;
    padding-right: 0; border-right: 0;
  }
  .sh-main{ padding-top: 18px; border-top: 1px solid var(--wm-line); }
}
@media (max-width: 620px){
  .status-hero{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "score" "main" "meter";
    gap: 16px; padding: 18px 16px 20px;
  }
  .sh-side{ flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
  .sh-ratio{ font-size: var(--wm-d2); }
  .sh-main{ align-items: flex-start; gap: 13px; padding-top: 16px; }
  .sh-orb{ width: 38px; height: 38px; }
  .sh-orb svg{ width: 18px; height: 18px; }
  .sh-text > b{ font-size: var(--wm-t1); line-height: 1.45; }
  .sh-meter{ height: 8px; }

  .status-controls{ padding: 14px 16px 16px; }
  .sc-search{ flex-basis: 100%; max-width: none; }
  .sc-search input{ padding-right: 38px; }
  .sc-kbd{ display: none; }
  .sc-filters{ margin-left: 0; }

  .status-foot{ flex-direction: column; align-items: flex-start; }
  .status-foot p:last-child{ display: flex; flex-direction: column; gap: 6px; }
  .status-foot p:last-child > span{ display: none; }
}
@media (hover: none){
  .sc-kbd{ display: none; }
}