/* Modal bileseni - p360-modal altyapisi (backdrop, head, body, foot, boyut varyantlari) */

/* ============================================================
   27. MODAL INFRASTRUCTURE (generic — focus trap, ESC, backdrop)
   ============================================================ */

.p360-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 20px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.p360-modal-backdrop.open { opacity: 1; }

.p360-modal {
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 80px);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.32),
              inset 0 0 0 1px rgba(255,255,255,0.5);
  display: flex; flex-direction: column;
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s var(--p360-ease, cubic-bezier(0.4,0,0.2,1)),
              opacity 0.18s ease;
}
/* Acik durumda transform: NONE — identity transform (scale(1)) bile fixed alt elemanlar icin
   kapsayici blok kurar; ic p360-acilir paneli (position:fixed) modale gore konumlanip kayardi.
   Giris animasyonu yine calisir (translateY(-12px) scale(0.98) -> none gecisi interpole eder),
   oturunca transform kalkar -> dropdown paneli viewport'a gore dogru konumlanir. */
.p360-modal-backdrop.open .p360-modal { transform: none; opacity: 1; }

.p360-modal.size-sm { width: 420px; }
.p360-modal.size-lg { width: 720px; }

/* ============================================================
   SHEET MODU (Karar M5) — modal masaustu geneli yerine ODAKLI PENCEREYE baglanir.
   masaustu.js Modal.open'da aktif pencere govdesine append eder + bu class'i ekler.
   Backdrop yalniz o pencereyi karartir; pencere izolasyonu korunur.
   Modal pencerenin ORTASINDA acilir (klasik tam-ekran modalle ayni his); yalniz
   konumlama pencereye hapsolur, dock/diger pencereler etkilenmez.
   Pencere yoksa (masaustu-level) klasik tam-ekran modal kullanilir.
   ============================================================ */
.p360-modal-backdrop.p360-modal-sheet {
  position: absolute;          /* .pencere-govde position:relative — pencereye hapsolur */
  z-index: 50;                 /* govde icindeki htmx icerigin uzerinde */
  padding: 20px 16px;          /* pencere ici dikey-ortali; ust/alt simetrik bosluk */
  align-items: center;
  background: rgba(0,0,0,0.28);
}
/* Sheet pencere ortasinda belirir; klasik modalle ayni kose/iniş animasyonu. */
.p360-modal-sheet .p360-modal {
  max-height: calc(100% - 40px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.4);
  transform: translateY(-12px) scale(0.98);
}
.p360-modal-sheet.open .p360-modal { transform: none; }

/* ============================================================
   PROJE MODULU SELF-CONTAINED ICERIK UYUMU
   Proje form/silonay partial'lari kendi ic dolgulu `*-modal-body` / `*-modal-foot`
   bloklarini tasiyor (baslik+capraz ARTIK dis P360.modal kabugundan gelir —
   data-modal-baslik/ikon ile). Dis `.p360-modal-body` dolgusu ic `*-modal-body`
   dolgusuyla ciftlenmesin diye sifirlanir; ic govde/footer kendi dolgu+ayracini
   korur (footer modal kenarina yaslanir, border-top full-width).
   Kapsam guvenligi: yalniz P360.modal kabugu ICINDE `*-modal-body` olunca tetiklenir
   — Arac modulu `-modal-form` kullanir, Envanter PlanCizim kendi `dp-modal` overlay'i
   kullanir; ikisi de etkilenmez. */
.p360-modal-body:has([class$="-modal-body"]) { padding: 0; }

.p360-modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 12px;
}
.p360-modal-head .mh-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: rgba(0,122,255,0.14); color: var(--mac-blue);
}
.p360-modal-head .mh-icon.danger { background: rgba(255,59,48,0.18); color: var(--red); }
.p360-modal-head .mh-icon.warn   { background: rgba(255,189,46,0.22); color: var(--yellow-dark); }
.p360-modal-head .mh-icon.success { background: rgba(52,199,89,0.18); color: var(--green-dark); }
.p360-modal-head .mh-text { flex: 1; min-width: 0; }
.p360-modal-head .mh-title { font-size: 17px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.2; }
.p360-modal-head .mh-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.p360-modal-head .mh-sub.danger { color: var(--red-dark); font-weight: 500; }
.p360-modal-head .mh-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all 0.12s ease;
}
.p360-modal-head .mh-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

.p360-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  font-size: 14px; color: var(--text); line-height: 1.5;
}
.p360-modal-body p { margin: 0 0 12px; }
.p360-modal-body p:last-child { margin-bottom: 0; }
.p360-modal-body strong { font-weight: 600; }

.p360-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.p360-modal-foot .mf-help {
  margin-right: auto; font-size: 11px; color: var(--muted);
  max-width: 60%;
}

body.modal-open { overflow: hidden; }