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

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

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

.pai-modal {
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 80px);
  background: rgba(255,255,255,0.97);
  backdrop-filter: var(--cam-kalin); -webkit-backdrop-filter: var(--cam-kalin);
  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(--egri-duz),
              opacity 0.18s ease;
}
/* Acik durumda transform: NONE — identity transform (scale(1)) bile fixed alt elemanlar icin
   kapsayici blok kurar; ic pai-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. */
.pai-modal-backdrop.open .pai-modal { transform: none; opacity: 1; }

/* "Zaten acik" geri bildirimi: acik bir ONAY varken ayni tetige tekrar basilirsa yenisi acilmaz
   (etkilesim.js confirmDialog tekildir), bunun yerine mevcut modal kisaca sallanir — yoksa
   kullanici "buton calismiyor" sanip basmaya devam eder. Animasyon fill-mode ALMAZ: bitince
   transform: none'a doner (yukaridaki dropdown-konumlanma kurali korunur). Confirm'de zaten
   pai-acilir dropdown bulunmaz, ama kurali bozmayalim. */
.pai-modal.dikkat { animation: pai-sars-genis 0.32s ease; }
@media (prefers-reduced-motion: reduce) { .pai-modal.dikkat { animation: none; } }

.pai-modal.size-sm { width: 420px; }
.pai-modal.size-lg { width: 720px; }
/* Harita/kroki tasiyan modaller — cizim alani 720'de daraliyor. */
.pai-modal.size-xl { width: 880px; }
/* TAM EKRAN (`data-modal-tam`) — icerigi bir EKRAN olan modaller: yan yana duran birden cok
   bolme ayni anda gorunmeli (poz tarayicisi: sol ray + sonuc tablosu + secilen satirlar).
   880'de bu yerlesim ust uste yigiliyor ve modal kendi icinde kaydirilan bir forma donuyor.
   Genislik kadar YUKSEKLIK de sabitlenir: `max-height` icerige gore buzustugu icin ic
   kaydirma kaplari (flex:1 + overflow:auto) hic yukseklik bulamaz, hepsi birden uzar. */
.pai-modal.size-tam { width: 100%; height: calc(100vh - 80px); }

/* ============================================================
   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.
   ============================================================ */
.pai-modal-backdrop.pai-modal-sheet {
  position: absolute;          /* .pencere-govde position:relative — pencereye hapsolur */
  z-index: 50;                 /* govde icindeki htmx icerigin uzerinde */
  padding: 0 16px 20px;        /* uste yapisir; nefes payi altta */
  align-items: flex-start;
  background: rgba(0,0,0,0.28);
  overflow: hidden;            /* kapali sheet pencerenin disinda gorunmesin */
}
/* Sheet pencerenin UST kenarindan iner ve oraya yapisir; ortada belirmez. Acikken transform
   NONE kalir — yukaridaki kural: identity transform bile ic fixed paneli kaydiriyor. */
.pai-modal-sheet .pai-modal {
  max-height: calc(100% - 40px);
  border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.4);
  transform: translateY(-100%);
  transition: transform var(--hiz-kayma), opacity 0.18s ease;
}
.pai-modal-sheet.open .pai-modal { transform: none; }
/* Sheet modunda tam ekran = MODUL PENCERESININ tamami (viewport degil): yukaridaki
   `calc(100vh - 80px)` pencereden buyuk olur ve sheet `overflow:hidden` oldugu icin
   modalin alti sessizce kirpilirdi — footer'daki "Kalemleri ekle" gorunmezdi. */
.pai-modal-sheet .pai-modal.size-tam { height: calc(100% - 40px); }

/* ============================================================
   YAN MOD (`data-modal-yan`) — perde karartmaz, pencere kenara oturur.
   Arkadaki tuval gorunur VE tiklanabilir kalir; "nereye uretecegim" gibi sorularin
   cevabi modalin arkasinda duruyorsa perde o cevabi gizler. Kabugun geri kalani
   (ESC, focus-trap, role=dialog, kapatma butonu) aynen gecerlidir.
   Sheet kurallarindan SONRA gelir: ikisi de ayni ozgullukte, kazanan siradadir.
   ============================================================ */
.pai-modal-backdrop.yan {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
  align-items: stretch; justify-content: flex-end;
  padding: 12px;
}
.pai-modal-backdrop.yan .pai-modal {
  pointer-events: auto;
  width: 380px; max-height: 100%;
  transform: translateX(16px);
}
.pai-modal-backdrop.yan.open .pai-modal { transform: none; }
@media (max-width: 720px) {
  .pai-modal-backdrop.yan { justify-content: center; }
  .pai-modal-backdrop.yan .pai-modal { width: 100%; }
}

/* ============================================================
   MODAL ICERIK SOZLESMESI — kabuk disindaki her sey buradan gelir.
   Kabuk (backdrop/head/body/foot) PAI.modal'in; icerigin IC yerlesimi bu siniflarin.
   Modul CSS'i bu siniflari YENIDEN TANIMLAMAZ, yalniz kendi kabiyla deri ekler
   (`.gorev-modal-form .yet-chip` gibi). 36 ayri `*-modal-foot` ailesi bu yuzden vardi:
   ayni bes satir her modulde kopyalaninca, sinifi yazan ekran o dosyayi yuklemedigi
   surece footer stilsiz kaliyordu (Kiralama modalinda butonlar sola akiyordu).
   ============================================================ */

/* Icerik koku — form ya da sarmalayici div. Govde + footer'i dikey dizer; kaydirma
   govdeye duser, footer sabit kalir (kabuk yuksekligi asilinca butonlar ekrandan cikmaz). */
.pai-modal-icerik { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Icerik kendi govdesini getiriyorsa dis dolgu kalkar: govde kendi dolgusunu verir,
   footer modal kenarina yaslanir (border-top tam genislik). Kaydirmayi da govdeye
   birakir — dis kutu kayarsa footer da kayar ve sabit kalmaz.

   `flex: 1` ZORUNLU (olculdu 20.09.2026): `size-tam` modalin yuksekligi KESINDIR
   (`height: calc(100vh - 80px)`), ama bu kutu esnemezse varsayilan `flex: 0 1 auto` ile
   yalniz icerigi kadar yer kaplar — kesin yukseklik govdeye HIC INMEZ. Sonucu: icerideki
   butun `flex: 1 1 auto` kaplari paylasacak bos alan bulamaz (`min-height`lerinde cakilir)
   ve yuzdeyle verilen `max-height` degerleri belirsiz ebeveyne karsi cozulemez. Poz
   tarayicisinda "Secilen kalemler" tablosu 1080p'de 84px'te kaliyor, modalin alt yarisi
   bos beyaz duruyordu. Kucuk pencerede sorun gorunmuyordu: orada icerik zaten tastigi icin
   `flex-shrink` govdeyi kesin bir yukseklige sikistiriyor ve zincir kendiliginden calisiyor. */
.pai-modal-body:has(.pai-modal-govde) {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
}

.pai-modal-govde {
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; min-height: 0;
}
/* Govde bir flex kolonudur ve tablo karti `overflow-y: hidden` tasir: kart kuculmeye
   birakilirsa satirlari KIRPAR — icerik DOM'da durur, ne cubuk ne fare ne klavye ile
   ulasilir (kirpilan kayit sessizce yok olur). Kart dogal boyunda kalir, kaydirmayi
   govde yapar; boylece modal yine tavanda durur ama her satira ulasilir. */
.pai-modal-govde > .pai-tablo-kart { flex: 0 0 auto; }

/* Dikey bosluk govdenin/izgaranin `gap`'inden gelir; `.field`'in global alt margin'i
   burada ikinci bir bosluk uretirdi (14+14). Kutular arasi mesafe tek kaynaktan. */
.pai-modal-govde .field, .pai-modal-izgara .field { margin-bottom: 0; }
/* Gizli alan da flex cocugudur: `gap` onun icin de bosluk acar ve form ortasinda
   sebepsiz bir bosluk kalir. Gorunmeyen alan yer de kaplamamali. */
.pai-modal-govde > input[type="hidden"] { display: none; }

/* Iki sutunlu alan izgarasi. `.tam` satiri kaplar. Modal dar oldugunda tek sutuna iner —
   olcut pencere genisligi (`appwin`), cunku modal sheet modunda pencerenin icinde yasar. */
.pai-modal-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.pai-modal-izgara > .tam, .pai-modal-izgara > .full { grid-column: 1 / -1; }
.pai-modal-izgara > .pai-modal-bilgi, .pai-modal-izgara > .pai-form-hata { grid-column: 1 / -1; }
.pai-modal.size-sm .pai-modal-izgara { grid-template-columns: 1fr; }
@container appwin (max-width: 720px) { .pai-modal-izgara { grid-template-columns: 1fr; } }

/* Onay/bilgilendirme modallerinin duz metni. */
.pai-modal-metin { font-size: 13px; color: var(--text); line-height: 1.55; }

/* Bilgi seridi — islemin ne yapacagini anlatan kutu. Tonlar: notr(mavi) / uyari / tehlike. */
.pai-modal-bilgi {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--mac-blue-soft); border: 1px solid rgba(0,122,255,0.20);
  color: var(--mac-blue-press);
  font-size: 12px; line-height: 1.4;
}
.pai-modal-bilgi i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.pai-modal-bilgi.uyari   { background: var(--orange-soft); border-color: rgba(255,149,0,0.25); color: var(--orange-dark); }
.pai-modal-bilgi.tehlike { background: var(--red-bg); border-color: rgba(196,43,35,0.22); color: var(--red-dark); }

.pai-modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.pai-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);
}
.pai-modal-head .mh-icon.danger { background: rgba(255,59,48,0.18); color: var(--red); }
.pai-modal-head .mh-icon.warn   { background: rgba(255,189,46,0.22); color: var(--yellow-dark); }
.pai-modal-head .mh-icon.success { background: rgba(52,199,89,0.18); color: var(--green-dark); }
.pai-modal-head .mh-text { flex: 1; min-width: 0; }
.pai-modal-head .mh-title { font-size: 17px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.2; }
.pai-modal-head .mh-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pai-modal-head .mh-sub.danger { color: var(--red-dark); font-weight: 500; }
.pai-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;
}
.pai-modal-head .mh-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

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

.pai-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-shrink: 0;
}
/* Gecis agi: icerik henuz `pai-modal-govde` sarmalayicisina alinmamissa footer yine de
   kenara yaslanir — dis govde dolgusunu negatif margin'le geri alir. Gorunum ayni;
   fark yalniz footer'in sabit degil akisla birlikte kaymasidir. `modal-tara` bunu bulgu
   olarak raporlar, sarmalayici eklenince kural kendiliginden devre disi kalir. */
.pai-modal-body:not(:has(.pai-modal-govde)) .pai-modal-foot {
  margin: 20px -24px -20px; 
}

body.modal-open { overflow: hidden; }