/* BlitzPro: presentation only. Existing IDs and application state are retained. */
:root {
  /* -------------------------------------------------------------------------
     ZEMIN ROLU — TEK SAYISAL KAYNAK (2026-09-18)
     NEDEN `-rgb` ÜÇLÜLERİ: Tailwind'in `bg-slate-900/90` gibi SAYDAMLIK
     varyantları rengi kanal kanal hesaplar; bu yüzden `<alpha-value>` ile
     kullanılabilmesi için kanallar ayrı bir üçlüde tutulur. Böylece hem
     `var(--surface)` hem de `bg-slate-900/90` AYNI sayıdan türer; değer
     iki yerde tekrar edilmez.
     Ölçülen sapma (düzeltme öncesi canlı): `bg-slate-900` -> #0a0e16,
     `bg-[#090d15]` -> #090d15, `bg-[#0a0e16]` -> #0b1a3b. Yani AYNI rol
     üç ayrı hex'e düşüyordu.
     ------------------------------------------------------------------------- */
  --navy-950-rgb:6 14 38;      /* #060e26 — sayfa zemini (kartlarin disi) */
  --surface-rgb:11 26 59;      /* #0b1a3b — kart / panel / modal zemini   */
  --navy-950:rgb(var(--navy-950-rgb));
  --surface:rgb(var(--surface-rgb));

  /* -------------------------------------------------------------------------
     17 RESMI RENK ROLU — SISTEMIN TEK RENK KAYNAGI (2026-09-18)
     Astra'dan gelen tablo. --navy-950 / --surface / --cream ile CAKISMIYOR;
     onlari TEYIT ediyor ve eksik rolleri tamamliyor.
     Asagidaki `--navy-900`, `--line` gibi ESKI ADLAR artik bu rollere BAGLIDIR
     (bkz. "geriye donuk uyum" blogu) — yani iki yerde tekrar eden deger yok,
     birini degistirmek otekini de dogru sekilde tasir.
     ------------------------------------------------------------------------- */
  --navy-brand:#0a235c;        /* ana lacivert            (eski --navy-900) */
  --navy-light:#12346e;        /* acik lacivert           (eski --navy-800) */
  --surface-raised:#10254c;    /* yukseltilmis yuzey                        */
  --cream:#f4ebd9;             /* ana krem                (eski --cream-100) */
  --cream-light:#faf5eb;       /* acik krem               (eski --cream-050) */
  --text-secondary:#b5bbcb;    /* ikincil metin           (eski --text-muted) */
  --border:#2a3c5e;            /* kenarlik / ayrac        (eski --line) */
  --status-healthy:#30634f;    /* saglikli durum / bar dolgusu (eski --status-ok) */
  --bar-track:#252e39;         /* bar zemini              (eski --track) */
  --status-warn:#864b48;       /* uyari */
  --status-alarm:#a45151;      /* alarm                   (eski --status-alert) */
  --heart-connected:#84ae95;   /* baglanti kalbi */
  --queue-waiting:#d6b897;     /* kuyrukta */
  --queue-preparing:#b5c8dd;   /* hazirlaniyor */
  --queue-enroute:#9dbfa9;     /* yolda */

  /* --- geriye donuk uyum: eski adlar yeni rollere bagli --- */
  --navy-900:var(--navy-brand); --navy-800:var(--navy-light);
  --cream-100:var(--cream);
  --cream-050:var(--cream-light);
  --text-muted:var(--text-secondary); --line:var(--border);
  --status-ok:var(--status-healthy); --track:var(--bar-track);
  --status-alert:var(--status-alarm);
  --vurgu:var(--cream); --vurgu-canli:var(--cream-light);
  color-scheme:dark;
}
html { scroll-padding-top:160px; }
body[class] { background:var(--navy-950)!important; color:var(--cream-100); }
body,button,input,select,textarea,code,pre,.font-mono,.font-sans {
  font-family:'Space Grotesk',sans-serif!important; font-variant-numeric:tabular-nums;
}
button,input,select,textarea { font-weight:500; }
:is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--cream-100)!important; outline-offset:4px;
}
button { touch-action:manipulation; }
button:disabled { cursor:not-allowed; }
::selection { background:var(--cream-100); color:var(--navy-900); }
::-webkit-scrollbar-thumb { background:#485775; border-radius:3px; }
.text-white { color:var(--cream-100); }
.uppercase { text-transform:none!important; letter-spacing:normal!important; }
/* Keyfi-deger zemin siniflari. `bg-[#090d15]` EKLENDI (2026-09-18): Veritabani
   (DB Studio) drawer'i ve sticky tablo hucresi bu tonu kullaniyordu ve listede
   olmadigi icin --surface yerine #090d15 ciziyordu — olculdu. */
[class*="bg-[#05080e]"],[class*="bg-[#0a0e16]"],[class*="bg-[#101623]"],[class*="bg-[#090d15]"] {
  background-color:var(--surface)!important;
}
/* KART / PANEL DIS KENARLIKLARI -> --border (2026-09-18 resmi palet).
   NEDEN: KPI kartlari Tailwind `border-slate-800` kullaniyordu; olculdu ->
   canlida kart kenarligi #20242F, oysa ayraclar #2A3C5E. Ayni rolun iki tonu.
   KAPSAM: yalnizca KART/PANEL DIS CERCEVESI. Tablo satir ayiricilari, buton
   ve chip kenarliklari, form alanlari KAPSAM DISI — okunabilirlik icin duz
   ve keskin kalirlar (operator talebi). */
section .grid > div.bg-gradient-to-br,
#bp-order-queue,
aside[id$="-drawer"] {
  border-color:var(--border)!important;
}

/* ===========================================================================
   MIKRO-ORGU DOKUSU — SADECE DIS CERCEVE + ANA AYRACLAR (2026-09-18)
   ---------------------------------------------------------------------------
   KAPSAM BILINCLI OLARAK DARALTILDI. Astra'nin kendi demosu "tum butonlar,
   kartlar, cipler & tablo dahil" diyor; biz bunu UYGULAMIYORUZ. Doku YALNIZCA:
     1) 4 KPI kartinin dis cercevesi
     2) Canli Siparis Kuyrugu panelinin dis cercevesi
     3) Ayarlar/Kuryeler/Deploy/Veritabani drawer'larinin dis cercevesi
     4) Ana bolum ayraci (KPI seridi ile gecmis tablosu arasindaki section)
     5) Ust navigasyon cubugunun dis kenari (header alt cizgisi)
   DOKUNULMAYANLAR (okunabilirlik + "tek cesur an" ilkesi):
     butonlar · filtre chip'leri · tablo/liste SATIR ayiricilari · form
     alanlari · arama kutusu · KPI kartlarinin IC ogeleri.
   URETIM: saf CSS `repeating-linear-gradient` — JS/canvas YOK, statik doku,
   calisma aninda maliyet yok. `::after` + mask ile cizilir; `border-radius:
   inherit` sayesinde kartlarin yuvarlak kosesi bozulmaz (border-image bunu
   yapamaz, o yuzden kullanilmadi).
   =========================================================================== */
:root {
  --weave-step:4px;        /* desen adimi */
  --weave-thickness:1.5px; /* cizgi kalinligi */
  --weave-alpha:.34;       /* krem opakligi — istenen %30-38 araliginin ortasi */
  --weave-ink:244,235,217; /* krem (--cream) kanallari */
}

/* Kutusal cerceveler: kenar halkasina dokuma */
section .grid > div.bg-gradient-to-br::after,
#bp-order-queue::after,
aside[id$="-drawer"]::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:repeating-linear-gradient(45deg,
    rgba(var(--weave-ink),var(--weave-alpha)) 0 var(--weave-thickness),
    rgba(var(--weave-ink),0) var(--weave-thickness) var(--weave-step));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* `::after` icin konumlanma baglami GEREKLI — AMA DIKKAT:
   Buraya `aside[id$="-drawer"] { position:relative }` YAZMAYIN. O secici
   (0,1,1) ozgullugundedir ve Tailwind'in `.fixed`ini (0,1,0) YENER; drawer
   `fixed` olmaktan cikip normal akisa duser ve ekranin soluna kayar.
   Bu hata 2026-09-18'de bir kez yasandi (`:where()` ile kapatildi), dokuma
   turunda yanlislikla GERI GETIRILDI ve ekran goruntusunde yakalandi.
   Cozum: konumlanma baglamina ZATEN sahip olanlara dokunma —
     · KPI kartlari : Tailwind `relative` sinifi var
     · drawer'lar   : Tailwind `fixed` sinifi var
   Yalnizca konum sinifi OLMAYAN kuyruk paneli icin eklenir. */
#bp-order-queue { position:relative; }

/* Tek cizgili ayraclar: desen CIZGI BOYUNCA akar (4px adim -> boncuklu cizgi).
   `border-image` burada dogru arac: cerceve duz ve yuvarlak kosesi yok. */
body > header,
section.mt-10.pt-6.border-t {
  border-image:repeating-linear-gradient(90deg,
    rgba(var(--weave-ink),var(--weave-alpha)) 0 var(--weave-thickness),
    rgba(var(--weave-ink),0) var(--weave-thickness) var(--weave-step)) 1;
}
body > header { background:rgba(6,14,38,.97)!important; box-shadow:none!important; padding:18px 28px 0; }
body > header > div { gap:18px 24px; }
aside[id$="-drawer"].translate-x-full { visibility:hidden; box-shadow:none!important; }
.bp-brand { display:flex; align-items:center; gap:13px; }
.bp-logo-slot { width:34px; height:38px; flex-shrink:0; border:1px solid var(--line); border-radius:3px; }
.bp-wordmark { display:inline-flex; align-items:center; font-size:28px; font-weight:700; letter-spacing:-1.7px; line-height:1.15; color:var(--cream-100); }
.bp-wordmark em { font-style:normal; color:var(--navy-900); background:var(--cream-100); padding:1px 6px 2px 4px; margin-left:2px; border-radius:2px 6px 2px 2px; letter-spacing:-1.5px; }
.bp-brand p { font-size:11px; color:var(--text-muted); margin-top:5px; }
.bp-navigation { flex-basis:100%; flex-wrap:wrap; gap:2px!important; border-top:1px solid var(--line); padding-top:5px; }
.bp-navigation > button { min-height:44px; padding:0 13px!important; border:0!important; border-bottom:2px solid transparent!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--text-muted)!important; font-size:12px!important; font-weight:600!important; transform:none!important; }
.bp-navigation > button:hover,.bp-navigation > button[data-bp-active="true"] { color:var(--cream-100)!important; background:rgba(244,235,217,.045)!important; border-bottom-color:var(--cream-100)!important; }
.bp-navigation > button > svg,.bp-navigation > button > span:first-child:not(:last-child):not([id]) { display:none; }
.bp-navigation #sound-toggle { margin-left:auto; }
.bp-navigation #sound-toggle > svg:not(.hidden) { display:block; }
#bp-capacity { position:relative; padding:12px 18px; border-radius:4px; min-width:280px; background:var(--navy-900); border:1px solid #334c7c; box-shadow:none; transition:background-color .6s,border-color .6s; }
#bp-capacity::after { content:''; position:absolute; inset:0; border:1px solid var(--status-alarm); opacity:0; pointer-events:none; }
#bp-capacity[data-pressure="true"] { background:#382338; border-color:var(--status-warn); }
#bp-capacity[data-pressure="true"]::after { animation:bp-pressure 3s ease-in-out infinite; }
#active-count-label { font-size:21px; line-height:1.2; color:var(--cream-100)!important; }
#active-progress-bar { background:var(--status-healthy)!important; border-radius:2px; }
#bp-capacity[data-pressure="true"] #active-progress-bar { background:var(--status-alarm)!important; }
#capacity-badge { font-size:11px; }
#capacity-badge > span { animation:none!important; }
#system-health-bar { border:0; background:transparent; padding:0; box-shadow:none; gap:14px; }
:is(#system-health-bar,#stab-content-health) [id$="-bar"] { background:var(--status-healthy)!important; background-image:none!important; animation:none!important; border-radius:2px!important; }
:is(#system-health-bar,#stab-content-health) div:has(> [id$="-bar"]) { height:7px!important; background:var(--bar-track)!important; border-radius:2px!important; overflow:hidden; }
#system-health-bar [id^="health-"][id$="-val"] { color:var(--cream-100); }
#system-health-bar [id^="status-dot-"] { animation:none!important; box-shadow:none!important; }
#ws-status { background:transparent!important; border:0!important; padding:0 8px 0 16px; color:var(--text-muted)!important; min-height:44px; }
#ws-text { display:block!important; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.bp-heart { width:23px; height:23px; color:#647086; transform-origin:center; flex-shrink:0; }
body[data-bp-connected="true"] .bp-heart { color:var(--heart-connected); animation:bp-heart 1.65s ease-in-out infinite; }
body[data-bp-connected="true"] #ws-status { color:var(--cream-100)!important; }
.bp-kpis { padding-top:26px!important; }
.bp-kpis > div { gap:0!important; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.bp-kpis > div > div { min-width:0; min-height:143px; padding:19px 23px; border:0!important; border-right:1px solid var(--line)!important; border-radius:0!important; background:var(--surface)!important; box-shadow:none!important; }
.bp-kpis > div > div:last-child { border-right:0!important; }
.bp-kpis > div > div::before { content:''; position:absolute; top:0; left:-30%; width:30%; height:1px; background:linear-gradient(90deg,transparent,var(--cream-100),transparent); opacity:.2; animation:bp-current 12s linear infinite; }
.bp-kpis > div > div > .absolute { display:none; }
.bp-kpis > div > div > div:nth-child(2) { min-height:28px; }
.bp-kpis > div > div > div:nth-child(2) > div { display:none; }
.bp-kpis > div > div:last-child > div:nth-child(3) { min-height:46px; }
.bp-kpis #kpi-hava { font-size:15px; font-weight:600; }
.bp-kpis [id^="kpi-"] { letter-spacing:-.02em; }
.bp-kpis :is(#kpi-ciro,#kpi-cagri,#kpi-sure) { font-size:34px; font-weight:600; line-height:1.35; }
.bp-kpis > div > div > p { margin-top:10px; }
.bp-workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); gap:36px; align-items:center; padding:28px 0 36px; }
.bp-call-surface { min-width:0; }
#empty-state { align-items:flex-start; text-align:left; padding:52px 30px; min-height:360px; border-left:2px solid var(--line); }
#empty-state > div:first-child { display:none; }
#empty-state h2 { font-size:30px; letter-spacing:-1px; margin-bottom:14px; }
#empty-state p { line-height:1.8; max-width:370px; }
#empty-state button { margin-top:14px; background:var(--navy-900)!important; border:1px solid #40577d; border-radius:4px; box-shadow:none; min-height:42px; }
#calls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#calls-grid > div { min-width:0; box-shadow:none!important; border-radius:7px!important; }
#calls-grid .chat-stream { min-height:180px; max-height:260px; }
.bp-history { margin-top:0!important; padding-top:28px!important; padding-bottom:24px; background-image:linear-gradient(90deg,transparent 0,rgba(244,235,217,.025) 50%,transparent 100%); }
.bp-history > div:last-child { border-radius:5px!important; box-shadow:none!important; }
.bp-history thead { background:var(--surface-raised); }
.bp-history th { padding-top:17px; padding-bottom:17px; text-transform:none; letter-spacing:0; color:var(--cream-100); border-bottom:2px solid var(--line); }
.bp-history td { padding-top:16px; padding-bottom:16px; }
.bp-history tbody tr:hover { background:rgba(244,235,217,.035)!important; }
#settings-drawer { width:94vw!important; max-width:1700px!important; background:var(--surface)!important; border-left:1px solid #476087; box-shadow:-24px 0 80px #02081580; }
#settings-drawer > div:first-child { min-height:75px; background:var(--navy-900); }
#settings-drawer > div:nth-child(2) > aside { background:var(--navy-950)!important; padding:22px 14px; }
.bp-settings-brand { padding:2px 12px 27px; }
.bp-settings-brand .bp-logo-slot { margin-bottom:18px; width:40px; height:40px; }
.bp-settings-brand .bp-wordmark { font-size:27px; }
#settings-drawer main { background:var(--surface)!important; padding:28px; }
#settings-drawer main > div > .rounded-2xl { border-radius:6px; box-shadow:none; }
#settings-drawer [id^="stab-btn-"] { min-height:43px; border-radius:4px; box-shadow:none!important; }
/* ---------------------------------------------------------------------------
   AKTIF / SECILI DURUM TONU — TEK KAYNAK (2026-09-18)
   NEDEN: ayni anlam (aktif filtre / secili sekme) UC FARKLI renkte ciziliyordu,
   cunku `.bg-indigo-600` icin uc ayri tanim vardi:
     1) temel .bg-indigo-600  -> tailwind paletindeki `indigo-600` = #b3924c
        (eski "tek aksan: altin" tasarimindan kalma; SARI gorunen buydu)
     2) #settings-drawer ... .bg-indigo-600 -> var(--navy-900)  (LACIVERT)
     3) #menu-categories-pills ... .bg-indigo-600 -> var(--cream-100)  (KREM)
   Canlida olculdu: ayni `.bg-indigo-600` sinifi bir yerde #0a235c, baska yerde
   #b3924c ciziyordu. 2) ve 3) KALDIRILDI; artik tek ton var: marka laciverti.
   Renk degerleri disinda hicbir sey degismedi (olcu/ dolgu/ radius aynen).
   `hover:bg-indigo-600` ayri bir siniftir ve temel paletten gelir; bu yuzden
   hover'da da ayni tona dusmesi icin asagida ayrica baglandi.
   --------------------------------------------------------------------------- */
.bg-indigo-600 { background:var(--navy-900)!important; color:var(--cream-100); }
.hover\:bg-indigo-600:hover { background:var(--navy-900)!important; color:var(--cream-100); }
#settings-drawer [id^="stab-btn-"].bg-indigo-600 { border-color:#476087; }
#menu-categories-pills { flex-wrap:wrap!important; overflow:visible!important; gap:8px; padding:8px 0 14px; touch-action:pan-y; cursor:default; }
#menu-categories-pills button { white-space:normal; min-height:35px; border-radius:18px; padding:7px 14px; }
.bp-weather { display:inline-block; width:19px; height:16px; position:relative; vertical-align:middle; margin-right:7px; flex-shrink:0; }
.bp-weather::before,.bp-weather::after { content:''; position:absolute; animation-play-state:paused!important; }
.bp-weather[data-weather="sun"]::before { width:11px; height:11px; border-radius:50%; background:#cfc1a2; top:2px; left:3px; box-shadow:0 0 0 3px #cfc1a21a; animation:bp-sun 5s ease-in-out infinite; }
.bp-weather[data-weather="cloud"]::before,.bp-weather[data-weather="rain"]::before { width:17px; height:8px; top:2px; border-radius:8px 9px 3px 3px; background:#8c9bae; box-shadow:4px -3px 0 -1px #8c9bae; animation:bp-cloud 7s ease-in-out infinite; }
.bp-weather[data-weather="rain"]::after { width:2px; height:5px; left:4px; top:10px; background:#8c9bae; box-shadow:5px 0 #8c9bae,10px 0 #8c9bae; animation:bp-rain 1.6s linear infinite; }
.bp-weather[data-visible="true"]::before,.bp-weather[data-visible="true"]::after { animation-play-state:running!important; }
body.bp-page-hidden *,body.bp-page-hidden *::before,body.bp-page-hidden *::after { animation-play-state:paused!important; }
.animate-pulse,.animate-ping,.animate-pulse-slow { animation:none!important; }
[class^="eq-bar-"] { height:16px; animation-name:bp-equalizer; transform-origin:bottom; }
@keyframes bp-equalizer { 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} }
body.bp-page-hidden .bp-weather::before,body.bp-page-hidden .bp-weather::after { animation-play-state:paused!important; }
@keyframes bp-heart { 0%,42%,100%{transform:scale(1)} 12%{transform:scale(1.2)} 22%{transform:scale(.98)} 31%{transform:scale(1.12)} }
@keyframes bp-pressure { 0%,100%{opacity:.15} 50%{opacity:.7} }
@keyframes bp-current { to{transform:translateX(450%)} }
@keyframes bp-sun { 0%,100%{opacity:.6;transform:scale(.9)} 50%{opacity:1;transform:scale(1)} }
@keyframes bp-cloud { 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(2px)} }
@keyframes bp-rain { from{transform:translateY(-1px);opacity:.25} to{transform:translateY(3px);opacity:.8} }
@media(min-width:1600px) { #calls-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1100px) { .bp-workspace{grid-template-columns:minmax(0,1fr) 320px;gap:20px} #calls-grid{grid-template-columns:1fr} .bp-kpis > div > div{padding:17px} #empty-state{padding:30px 20px} }
@media(max-width:767px) {
  body > header { position:relative!important; padding:16px 16px 0; }
  .bp-brand { flex:1; } #bp-capacity { width:100%; } #bp-capacity > div:first-child{flex:1} #bp-capacity > div:first-child > div:nth-child(2){width:100%}
  .bp-navigation { gap:0!important; } .bp-navigation > button{padding:0 10px!important;min-height:42px;font-size:11px!important}
  .bp-navigation #sound-toggle{margin-left:0} #ws-status{margin-left:auto}
  .bp-kpis > div { grid-template-columns:repeat(2,minmax(0,1fr)); } .bp-kpis > div > div{min-height:150px;border-bottom:1px solid var(--line)!important;padding:15px}
  .bp-kpis :is(#kpi-ciro,#kpi-cagri,#kpi-sure){font-size:26px}
  .bp-kpis > div > div > div { flex-wrap:wrap; gap:6px; }
  .bp-kpis > div > div > div:nth-child(2) { min-height:38px; align-items:flex-start; flex-wrap:nowrap; }
  .bp-workspace{grid-template-columns:1fr;gap:0;padding:16px 0 28px} #empty-state{min-height:230px;padding:28px 18px} #empty-state h2{font-size:26px}
  #settings-drawer{width:100vw!important} #settings-drawer > div:first-child{padding:16px} #settings-drawer main{padding:16px}
  #settings-drawer > div:nth-child(2) > aside{max-height:210px;padding:12px;overflow:auto} .bp-settings-brand{display:flex;align-items:center;gap:12px;padding:0 6px 12px} .bp-settings-brand .bp-logo-slot{width:26px;height:26px;margin:0}
  .bp-history > div:first-child > div { min-width:0;max-width:100%;flex-wrap:wrap; } .bp-history input{max-width:100%}
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }


/* =========================================================
   Global Deep Space Background Layer
   - single fixed layer shared by every page and drawer
   - intentionally low-contrast; quieter than the pulse motif
   ========================================================= */
:root {
  --bp-space-opacity: .34;
  --bp-space-vignette-opacity: .14;
  --bp-space-cream: 244, 235, 217;
  --bp-space-navy: 6, 14, 38;
}
body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(18, 52, 110, .10), transparent 65%),
    radial-gradient(900px 640px at 80% 100%, rgba(244, 235, 217, .03), transparent 70%),
    linear-gradient(180deg, #061229 0%, #060e26 42%, #050b1d 100%) !important;
}
/* `:where()` ŞART — düz `:not()` KULLANMAYIN (2026-09-18 canlı arızası).
   NEDEN: eski hali `body > *:not(.bp-deep-space-layer)` idi ve özgüllüğü
   (0,1,1) — çünkü `:not(.sinif)` bir SINIF sayılır. Tailwind'in konum
   yardımcıları ise (0,1,0): `.fixed`, `.absolute`, `.sticky`, `.z-50`.
   Sonuç: `<body>`nin 33 doğrudan çocuğunun TAMAMI konumunu kaybetti.
   Gövdede 9 drawer (`aside#*-drawer`), 10 backdrop/modal ve `#toast-notify`
   var; hepsi `position: relative` + `z-index: 1`'e düştü, yani normal akışta
   ve EKRAN DIŞINDA (x≈1339–2678, görüntü alanı 0–1424) çizildi. Operatör
   "Ayarlar"a basıyor, handler çalışıyor, drawer açılıyor — ama görünmüyor.
   Belirti: "butonlar tepki vermiyor".
   `:where()` özgüllüğü SIFIRLAR → seçici (0,0,1) olur, Tailwind yardımcıları
   kazanır; konum sınıfı OLMAYAN çocuklar ise yine `relative; z-index: 1`
   alır (derin uzay katmanının üstünde kalmaları için gereken şey bu).
   Canlıda ölçüldü: düzeltme öncesi taze `<div class="fixed">` -> `relative`,
   sonrası -> `fixed`; drawer `relative`/z=1 -> `fixed`/z=50. */
body > *:where(:not(.bp-deep-space-layer)) {
  position: relative;
  z-index: 1;
}
.bp-deep-space-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bp-deep-space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
body.bp-reduced-motion .bp-deep-space-canvas {
  opacity: 1;
}