/* =====================================================================
   PERDE SİSTEMİ — uygulamadaki bütün pencereler için tek kural

   İlke: açılan pencere keskin kalır; üst bar, ray ve mobil alt çubuk
   dahil arka planın tamamı aynı ton ve bulanıklıkla geri çekilir.

   Kapsam
     - Yan panel pencereleri (Ayarlar / Hedef / Reçetelerim)  → .side-drawer-backdrop
     - Bütün kipsel pencereler (<dialog> + showModal: gübre havuzu,
       gübre düzenleyici, onay, aktarım, uyarılar, hesap)    → dialog:modal::backdrop
     - "Optimizasyon çalışıyor" katmanı                         → .optimization-busy
       (optimizasyon/styles.css aynı belirteçleri kullanır)
   Bilerek dışarıda
     - Rehber (.drawer-tour): gövdedeki düğmeleri spot ışığıyla gösterir.
     - Avatar menüsü (.account-dialog.is-menu): küçük menü, saydam perde.

   Yan panel perdesi navigasyonun da üstündedir: dışarı tıklama pencereyi
   kapatır. Pencere ve perde aynı tam ekran alanını kullanır.
   ===================================================================== */

:root {
  --scrim-color: rgba(var(--scrim-rgb), .34);
  --scrim-filter: blur(7px) saturate(1.15);
  --scrim-speed: 220ms;
  /* Bulanık arka planlı bütün pencereler ekranın merkezine yerleşir. */
  --scrim-top: 0px;
  --scrim-right: 0px;
  --scrim-bottom: 0px;
  --scrim-left: 0px;
}

/* ---------- Yan panel perdesi ---------- */

.side-drawer-backdrop {
  inset: 0;
  background: var(--scrim-color);
  -webkit-backdrop-filter: var(--scrim-filter);
  backdrop-filter: var(--scrim-filter);
}

/* ---------- Kipsel pencereler ---------- */

/* Pencere ekranın ortasına yerleşir (yan panel pencereleriyle aynı merkez).
   İçerik kadar büyür; ekran sınırı aşıldığında kendi içerik bölümü kaydırılır. */
dialog:modal:not(.drawer-tour):not(.is-menu) {
  --window-height: calc(100dvh - var(--scrim-top) - var(--scrim-bottom) - 24px);
  inset: var(--scrim-top) var(--scrim-right) var(--scrim-bottom) var(--scrim-left);
  margin: auto;
  height: fit-content;
  max-width: calc(100vw - var(--scrim-left) - var(--scrim-right) - 24px);
  max-height: var(--window-height);
}

dialog:modal:not(.drawer-tour):not(.is-menu)::backdrop {
  inset: 0;
  background: var(--scrim-color);
  -webkit-backdrop-filter: var(--scrim-filter);
  backdrop-filter: var(--scrim-filter);
}

dialog[open]:modal:not(.drawer-tour):not(.is-menu):not(.is-closing)::backdrop {
  animation: scrim-in var(--scrim-speed) ease;
}

@keyframes scrim-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  dialog[open]:modal:not(.drawer-tour):not(.is-menu):not(.is-closing)::backdrop { animation: none; }
}