/* ═══ ORTAK MODAL KABUĞU (modal · ön ek mdl) ══════════════════════════
   Tasarım bolum-villalar'ın modalından alındı; iki yerde iki görünüm
   olmasın diye ölçüler birebir korundu (perde %96 gece, krem hap düğme,
   30px yükseklik, 320 ms solma).

   z-index 9100: çerez bandının (9000) ÜSTÜNDE. Bant bir yasal kapı ama
   her zaman en üstte olmak zorunda değil; modal açıkken bandın altta
   kalması hem daha temiz hem de kapanınca bant geri geliyor.          */

.mdl{
  position:fixed; inset:0; z-index:9100;
  /* Gövde 1fr, alt şerit auto. Şerit gizliyken satır kendiliğinden çöker;
     böylece tek ızgara üç kipe de yetiyor. */
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  background:color-mix(in oklab, var(--gece) 96%, transparent);
  opacity:0; transition:opacity 320ms var(--egri);
}
.mdl[hidden]{display:none}
.mdl[data-acik]{opacity:1}

/* ── Kapat · SAĞ ÜST (RTL'de sol üst — inset-inline-end kendiliğinden döner) ──
   --mdl-kapat-y: çerçeve içindeki uygulamanın kendi üst şeridiyle
   çakışırsa betik düğmeyi bir satır aşağı indirir. */
.mdl-kapat{
  position:absolute; z-index:3;
  inset-block-start:var(--mdl-kapat-y, 16px);
  inset-inline-end:clamp(.7rem,1.6vw,1.25rem);
  display:inline-flex; align-items:center; gap:.45rem;
  block-size:30px; padding-inline:.85rem .95rem;
  border:0; border-radius:var(--yr-xl); cursor:pointer;
  background:#F4EFE5; color:#141A17;
  font:inherit; font-size:var(--yz-kck); font-weight:700;
  letter-spacing:.02em; line-height:1;
  transition:background var(--mikro) var(--egri), inset-block-start var(--mikro) var(--egri);
}
.mdl-kapat:hover{background:#FFFFFF}
.mdl-kapat:focus-visible{outline:2px solid #F4EFE5; outline-offset:3px}
.mdl-ikon{inline-size:.95rem; block-size:.95rem}

/* Dokunma hedefi: 30px görsel yükseklik ince ama tıklama alanı 44px olmalı */
.mdl-kapat::before{content:""; position:absolute; inset:-7px -6px;}

/* ── Gövde: aynı anda yalnız bir kip görünür ── */
.mdl-govde{display:none; position:relative; min-block-size:0}
.mdl[data-kip="cerceve"] .mdl-govde[data-mdl-kip="cerceve"],
.mdl[data-kip="dugum"]   .mdl-govde[data-mdl-kip="dugum"],
.mdl[data-kip="galeri"]  .mdl-govde[data-mdl-kip="galeri"]{display:grid}

.mdl-cerceve{inline-size:100%; block-size:100%; border:0; display:block}

/* Gömülen düğüm: ortalanır, ekranı taşarsa kendi içinde kayar */
.mdl[data-kip="dugum"] .mdl-govde{
  /* "safe center": içerik kaba sığdığında ortalar, TAŞTIĞINDA başa hizalar.
     Düz "center" taşan öğenin BAŞINI kabın dışına atar ve o kısım hiçbir
     kaydırmayla geri gelmez. */
  place-items:safe center; padding:clamp(1rem,3vw,2.5rem);
  padding-block-start:clamp(3.5rem,7vw,4.5rem);   /* kapat düğmesine yer */
  overflow:auto; overscroll-behavior:contain;
}
.mdl-tasiyici{
  inline-size:min(96rem, 100%); max-block-size:100%;
  color:var(--keten);
}

/* ── Alt şerit: ad + sayaç ── */
.mdl-alt{grid-column:1 / -1; display:flex; align-items:baseline; justify-content:center;
  gap:1rem; padding-block-start:.5rem}
.mdl-alt[hidden]{display:none}
.mdl-ad{margin:0; color:#F8F4EA; font-size:var(--yz-kck); font-weight:700; line-height:1.3}
.mdl-sayac{margin:0; color:color-mix(in oklab,#F8F4EA 55%,transparent);
  font-size:var(--yz-etk); font-weight:700; letter-spacing:.12em}

/* Modal açıkken arka plan kaymasın — betik ayrıca olay kilidi de kuruyor */
html[data-mdl-acik]{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mdl{transition-duration:.01ms}
}


/* ── Galeri kipi ─────────────────────────────────────────────────────
   Ölçüler bolum-villalar'ın galerisinden alındı; iki yerde iki galeri
   görünümü olmasın. */
.mdl[data-kip="galeri"] .mdl-govde{
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(.5rem,2vw,1.5rem); padding:clamp(1rem,3vw,2.5rem);
  padding-block-start:clamp(3.2rem,6vw,3.8rem);   /* kapat düğmesine yer */
}
.mdl-buyuk{
  inline-size:100%; block-size:100%; max-block-size:100%;
  object-fit:contain; display:block; margin-inline:auto;
}
.mdl-gez{
  inline-size:2.75rem; block-size:2.75rem; display:grid; place-items:center;
  border:0; border-radius:var(--yr-tam); cursor:pointer;
  background:color-mix(in oklab, #F4EFE5 14%, transparent); color:#F8F4EA;
  transition:background var(--mikro) var(--egri);
}
.mdl-gez:hover{background:color-mix(in oklab, #F4EFE5 26%, transparent)}
.mdl-gez:focus-visible{outline:2px solid #F4EFE5; outline-offset:2px}
.mdl-gez[hidden]{visibility:hidden; display:grid}   /* yer korunsun, kare zıplamasın */
html[dir="rtl"] .mdl-gez svg{transform:scaleX(-1)}

@media (max-width:640px){
  .mdl[data-kip="galeri"] .mdl-govde{gap:.35rem; padding-inline:.5rem}
  .mdl-gez{inline-size:2.5rem; block-size:2.5rem}
}