/* ==========================================================================
   pobolETİ — panel entegrasyonunun getirdiği ekler
   --------------------------------------------------------------------------
   Tasarımın kendi dosyası assets/pobol.css'tir ve ona dokunulmaz. Burada
   yalnızca CMS ile gelen parçalar var: sayfalama, bildirim şeridi, panelden
   yüklenen görseller ve onay kutuları.
   ========================================================================== */

/* Panelden gelen görseller SVG şemaların yerini aldı: kırpılarak otursun */
.post-art .art-svg { width: 100%; height: 100%; object-fit: cover; }
.post-lead .post-art .art-svg { max-width: none; border-radius: var(--r); }
.post-hero .art-svg { width: 100%; height: auto; border-radius: calc(var(--r) - 6px); }

/* --------------------------------------------------------- SAYFALAMA ----- */
.bosfor-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: clamp(28px, 3vw, 44px);
}
.bosfor-page-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 40px; height: 40px; padding: 0 13px;
  border: 1px solid var(--hair); border-radius: 10px;
  font-family: var(--head); font-size: 14px; font-weight: 600;
  color: var(--text-2); background: #fff;
  transition: border-color .18s, color .18s, background .18s;
}
.bosfor-page-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.bosfor-page-btn.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.bosfor-page-btn.disabled { opacity: .45; pointer-events: none; }
.bosfor-page-btn svg { width: 13px; height: 13px; flex: none; }

/* ---------------------------------------------------- BİLDİRİM ŞERİDİ ---- */
.eti-notice {
  position: fixed; left: 50%; bottom: 26px; z-index: 9600;
  transform: translate(-50%, 14px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 20px; border-radius: 12px;
  background: #17211a; color: #fff;
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.eti-notice.on { opacity: 1; transform: translate(-50%, 0); }
.eti-notice.is-bad { background: #8c2020; }

/* ------------------------------------------------------ ONAY KUTULARI ---- */
/* Sözleşme onayları panelden gelir (Tanımlar > Sözleşmeler) */
.form .pbl-terms { display: flex; flex-direction: column; gap: 9px; grid-column: 1 / -1; }
.form .pbl-terms .cm-checkbox-label {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--body); font-size: 13px; line-height: 1.55; color: var(--text-3);
}
.form .pbl-terms .cm-checkbox-label > label { display: none; }
.form .pbl-terms input[type="checkbox"] { width: auto; margin-top: 3px; flex: none; }
.form .pbl-terms a { color: var(--brand-deep); text-decoration: underline; }

/* reCAPTCHA v3 rozeti gizleniyor; Google'ın şartı gereği formlarda
   recaptcha-note metni gösteriliyor. */
.grecaptcha-badge { visibility: hidden !important; }
.form .recaptcha-note a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------- YÜKLENEN VİDEOLAR ----- */
/* Tasarımın video kuralları YouTube iframe'ine göre yazılmış; panelden
   yüklenen dosyalar <video> öğesiyle oynatıldığı için aynı yerleşim
   video için de tanımlanıyor. */
.vplay video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vplay video[data-vmode="sound"] { z-index: 4; object-fit: contain; background: #000; }
.hero-card video { width: 100%; height: 100%; object-fit: cover; }
.story-screen video.story-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vmodal-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* ------------------------------------------- ÖZELLİKLER · PAKET SÜTUNLARI */
/* Tasarım üç paket sütunu varsayıyor; paket listesi panelden geldiği için
   sütun sayısı sayfanın kökündeki --pk değişkeninden okunur. */
[data-fsearch] .frow { grid-template-columns: minmax(0,1fr) repeat(var(--pk,3),minmax(70px,110px)); }
[data-fsearch] .fx-plans-h, [data-fsearch] .fx-plans-r { grid-template-columns: minmax(0,1fr) repeat(var(--pk,3),minmax(64px,90px)); }
@media (max-width:860px) {
  [data-fsearch] .frow, [data-fsearch] .fx-plans-r { grid-template-columns: repeat(var(--pk,3),minmax(0,1fr)); }
}