/* ═══════════════════════════════════════════════════════════════════════
   popup.css — In-App Message (Popup) gorunumu
   ORTAK DOSYA: hem site (gercek popup) hem admin (onizleme) yukler.

   NEDEN AYRI DOSYA:
     Eskiden bu bloklar combo.css icindeydi; admin onizlemesi ise kendi
     .pp-* siniflarini elle taklit ediyordu. Iki kopya zamanla ayristi
     (genislik 300 vs 420, resim 180 vs 260, CTA rengi mavi vs siyah)
     ve admin'de gorulen ONIZLEME, sitede cikan sonucla ayni degildi.
     Artik TEK kaynak burasi. Admin onizlemesi de ayni siniflari kullanir,
     dolayisiyla gordugun sey birebir yayina gidecek olan seydir.

   YUKLEYEN SAYFALAR:
     site/base.html            → gercek popup
     admin/in_app_messages/    → onizleme modali

   KATEGORI → LAYOUT:
     promotion            → .popup-box--promo    (yatay: gorsel solda)
     notice / onboarding  → .popup-box--vertical (dikey: gorsel ustte)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Katman (overlay) ────────────────────────────────────────────────── */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.popup-overlay.popup-open {
  display: flex;
  animation: iamFadeIn 0.22s ease;
}
.popup-overlay.popup-closing {
  display: flex;
  animation: iamFadeOut 0.22s ease forwards;
}
@keyframes iamFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes iamFadeOut { from { opacity:1; } to { opacity:0; } }

/* ── Kutu — ortak ─────────────────────────────────────────────────────── */
.popup-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  max-height: 90dvh;
  animation: iamSlideUp 0.25s ease;
}
@keyframes iamSlideUp {
  from { transform: translateY(24px); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}

/* ── Dikey layout (notice, onboarding) ────────────────────────────────── */
.popup-box--vertical {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
}
.popup-box--vertical .popup-img-wrap {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
.popup-box--vertical .popup-img-wrap img.popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Yatay layout (promotion) ─────────────────────────────────────────── */
.popup-box--promo {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 640px;
}
.popup-img-wrap--promo {
  flex: 0 0 220px;
  overflow: hidden;
}
.popup-img-wrap--promo img.popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Icerik alani ─────────────────────────────────────────────────────── */
/* NOT: Bu blok artik SADECE icerik varken basilir (bkz. popup.js _render).
   Eskiden kosulsuz basiliyordu; sadece gorsel iceren bir mesajda altta
   ~64px'lik bos beyaz serit kaliyordu. Padding kotu degildi — icinde
   hicbir sey olmayan bir kutuya padding veriliyordu. */
.popup-content {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.popup-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
}
.popup-body {
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}
.popup-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 20px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}
.popup-cta:hover { background: #333; }

/* ── Kapat butonu ─────────────────────────────────────────────────────── */
/* Gorsel-only mesajlarda bu buton resmin UZERINE biner; okunurlugu
   garantilemek icin yari saydam zemin + beyaz ikon kullanilir. */
.popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0,0,0,0.08);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.popup-close:hover { background: rgba(0,0,0,0.16); }

/* Gorsel-only (icerik kutusu yok) durumda kapat butonu resmin uzerinde
   kalir — kontrasti yukselt. */
.popup-box--image-only .popup-close {
  background: rgba(0,0,0,0.45);
  color: #fff;
}
.popup-box--image-only .popup-close:hover { background: rgba(0,0,0,0.65); }

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .popup-box--promo {
    flex-direction: column;
    max-width: 360px;
  }
  .popup-img-wrap--promo {
    flex: none;
    width: 100%;
    max-height: 200px;
  }
  .popup-overlay { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN ONIZLEME KAPSAYICISI
   Sadece admin tarafinda kullanilir. Gercek popup'i, site disinda bir
   sayfada, ayni siniflarla gostermek icin gereken minimum kabuk.
   Site tarafinda bu siniflar hic gorunmez.
   ═══════════════════════════════════════════════════════════════════════ */
.iam-prev-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.iam-prev-overlay.show { display: flex; }

/* Onizlemede hangi cihaz genisligi taklit ediliyor — kullanici
   masaustu/mobil farkini gorebilsin diye. */
.iam-prev-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.iam-prev-stage--mobile { width: 390px; }
.iam-prev-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
}
/* Mobil sahnede popup, telefon genisligine sikisir. */
.iam-prev-stage--mobile .popup-box--vertical,
.iam-prev-stage--mobile .popup-box--promo { max-width: 340px; }
.iam-prev-stage--mobile .popup-box--promo { flex-direction: column; }
.iam-prev-stage--mobile .popup-img-wrap--promo { flex: none; width: 100%; max-height: 200px; }

/* Gorsel yoksa onizlemede yer tutucu — bos kutu yerine ne eksik
   oldugunu soyler. */
.popup-img-ph {
  width: 100%;
  min-height: 140px;
  background: linear-gradient(135deg,#dbeafe,#ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
}
.popup-img-wrap--promo .popup-img-ph { min-height: 100%; }