/* ============================================================
 * popup.css — TEK POPUP İSKELETİ (js/core/popup.js'in eşi)
 *
 * 2026-07-20 mimari birleşme: sheet / modal / serbest katman artık
 * TEK altyapıdan doğar. Her popup'ın kökü `.pp` + `data-pp="ad"`
 * (kimlik) + `data-kind="sheet|modal|layer"` (sunum) taşır; panel
 * `.pp-panel`, kaydırma gövdesi `.pp-body`dir.
 *
 * ALTIN KURAL uyumu:
 *  · .pp / .pp-panel / .pp-body ALTYAPININ kimlik sınıflarıdır —
 *    iskeletin tüm CSS'i BU dosyadadır (tek blok ilkesi).
 *  · Popup'a özel her fark, o popup'ın FEATURE dosyasında
 *    `.pp[data-pp="ad"] { --pp-…: …; }` var bloğuyla verilir
 *    (K3 varyant deseni) — iskelet seçicileri feature dosyasına
 *    YAZILMAZ, feature sınıfları bu dosyaya GİRMEZ.
 *  · İçerik (başlık, satırlar, kartlar…) her popup'ın kendi
 *    içerik sınıflarıyla feature dosyasında yaşar.
 *
 * ZEMİN TEK KARAR (POPUPS.md denetiminin kapanışı): panel zemini
 * = --surface-3 + ayarlardaki popup deseni (--bgg-img). (Kullanıcı
 * 2026-07-22: opak --panel-bg menekşesinden cam kademesine indi —
 * panel artık arkasını blur'la geçirir.) İstisnasız her popup'a
 * işler; istisna isteyen (lightbox = nötr medya siyahı) kendi
 * data-pp bloğunda --pp-panel-* ezer.
 *
 * VAR KONTRATI (feature bloklarının ezebildikleri):
 *   --pp-w        panel genişliği (sheet/modalda max-width işlevi)
 *   --pp-h        panel yüksekliği (varsayılan auto)
 *   --pp-max-h    panel yükseklik tavanı
 *   --pp-r        köşe yarıçapı
 *   --pp-z        katman (varsayılan kind'a göre; gate → --z-gate)
 *   --pp-pad      kök iç payı (panelin ekran kenarı nefesi)
 *   --pp-backdrop karartma rengi   --pp-blur  karartma bulanıklığı
 *   --pp-panel-bg / --pp-panel-img / --pp-panel-ov  panel zemin/taşma
 *   --pp-body-pad gövde iç payı
 * ============================================================ */

/* ── Kök: tam-ekran konum katmanı + karartma ─────────────────
   absolute (fixed değil) = kök kilidi mimarisi (base.css): body
   çocuğu ICB'ye çıpalanır, tarayıcı bar animasyonundan etkilenmez. */
.pp {
  position: absolute; inset: 0; z-index: var(--pp-z, var(--z-modal));
  background: var(--pp-backdrop, var(--backdrop));
  backdrop-filter: var(--pp-blur, blur(6px));
  -webkit-backdrop-filter: var(--pp-blur, blur(6px));
  display: flex; align-items: center; justify-content: center;
  padding: var(--pp-pad, 20px);
  animation: pp-fade var(--tr-med);
}
.pp[data-kind="sheet"] { --pp-z: var(--z-sheet); align-items: flex-end; padding: 0; }
@media (min-width: 720px) {
  .pp[data-kind="sheet"] { align-items: center; padding: var(--pp-pad, 24px); }
}

/* ── Panel: cam kart — ZEMİN TEK KARAR burada ───────────────── */
.pp-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--pp-w, 560px);
  height: var(--pp-h, auto); max-height: var(--pp-max-h, 88svh);
  background-color: var(--pp-panel-bg, var(--surface-3));
  background-image: var(--pp-panel-img, var(--bgg-img, none));
  border-radius: var(--pp-r, var(--r-xl));
  box-shadow: var(--shadow-3), var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  overflow: var(--pp-panel-ov, hidden);
  animation: pp-rise var(--tr-med);
}
.pp[data-kind="modal"] .pp-panel {
  max-width: var(--pp-w, 440px);
  max-height: var(--pp-max-h, min(86svh, 720px));
  animation: pp-pop var(--tr-med);
}
/* sheet: mobilde alttan yükselir, üst köşeler yuvarlak */
.pp[data-kind="sheet"] .pp-panel {
  border-radius: var(--pp-r, var(--r-xl)) var(--pp-r, var(--r-xl)) 0 0;
  animation: pp-up var(--tr-med);
}
@media (min-width: 720px) {
  .pp[data-kind="sheet"] .pp-panel { border-radius: var(--pp-r, var(--r-xl)); }
}

/* ── ÇAPALI SHEET SİLİNDİ (2026-07-24, kullanıcı) ─────────────
   nsp'nin masaüstü yüzü paneli, kendisini açan butonun köşesine
   çiviliyordu (data-anchored + --pp-ax/--pp-ay + pp-zoom doğuşu):
   popup tuşu TAKİP ediyor görünüyordu. Artık nsp de diğerleri gibi
   bağımsız — yukarıdaki standart sheet kuralları geçerli (≥720px
   ekran ORTASINDA, <720px alt sayfa). Yeni popup'a çapa/köşe
   hizalama EKLENMEZ. */

/* ── Grip: mobil çekme tutamacı (yalnız sheet) ──────────────── */
.pp-grip {
  display: flex; justify-content: center; flex: 0 0 auto;
  padding: 10px 0 6px; cursor: grab; touch-action: none;
}
.pp-grip:active { cursor: grabbing; }
.pp-handle { width: 42px; height: 4px; border-radius: 4px; background: var(--surface-3); }
@media (min-width: 720px) { .pp-grip { display: none; } }

/* ── Gövde: kaydırma kabı ───────────────────────────────────── */
.pp-body {
  padding: var(--pp-body-pad, 6px 20px 24px);
  overflow-y: auto;
}
@media (min-width: 720px) {
  .pp[data-kind="sheet"] .pp-body { padding-top: var(--pp-body-pt, 20px); }
}
/* İç-scroll modu (data-scroll="inner"): gövde scroll ETMEZ —
   kaydırma içteki listede (.picker-list / .wiz-step / .nsp-pane),
   scrollbar yuvarlak köşeye değmez (picker/topup/nsp deseni). */
.pp[data-scroll="inner"] .pp-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: var(--pp-body-ov, hidden);
}
/* modal gövdesi: kısa içerik, dar pay; başlıksızsa üst payı kendisi alır */
.pp[data-kind="modal"] .pp-body { padding: var(--pp-body-pad, 4px 20px 16px); }
.pp[data-kind="modal"] .pp-panel > .pp-body:first-child { padding-top: 18px; }

/* ── Modal kalıp parçaları (popupConfirm / popupInfo / özel modallar) ── */
.pp-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 12px;
}
.pp-head h3 { flex: 1; font-size: 16px; }
.pp-head-ic {
  width: var(--circle-sm); height: var(--circle-sm); border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-grad); color: var(--on-accent);
  display: grid; place-items: center; font-size: 13px;
}
.pp-x {
  width: var(--circle-sm); height: var(--circle-sm); border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--text-2); font-size: 14px;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.pp-x:hover { background: var(--surface-2); color: var(--text); }
.pp-foot {
  flex: 0 0 auto;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 20px 16px; border-top: 1px solid var(--border);
}

/* ── popupInfo içerik tipografisi (ⓘ / "nasıl yazılır" kartları —
   eski cc2-info-body + pe-help-body + ast-info-body ÜÇLEMESİ tek
   kalıba indi; kalıp altyapınındır, bloğu burada yaşar) ───────── */
.pp[data-pp="info"] { --pp-w: min(520px, 100%); }
.pp[data-pp="info"] .pp-body {
  padding: 12px 20px 22px;
  color: var(--text-2); font-size: 13px; line-height: 1.65;
}
.pp[data-pp="info"] .pp-body p { margin: 0 0 10px; }
.pp[data-pp="info"] .pp-body p:last-child { margin-bottom: 0; }
.pp[data-pp="info"] .pp-body strong,
.pp[data-pp="info"] .pp-body b { color: var(--text); }
.pp[data-pp="info"] .pp-body em {
  display: block; padding: 10px 12px; margin: 8px 0; font-style: normal;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: 6px; color: var(--text);
}
.pp[data-pp="info"] .pp-body ul { margin: 6px 0 10px; padding-left: 20px; }
.pp[data-pp="info"] .pp-body li { margin-bottom: 4px; }

/* ── Animasyonlar (iskeletin kendi seti — base.css'e bağımlı değil) ── */
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pp-pop  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pp-up   { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }