/* ============================================================
   SAYFALAR MODÜLÜ — sayfa düzeni (tek/iki blok) + içerik devamı
   (bkz. app/Views/pages/sayfa.php, app/Helpers/sayfa_helper.php)

   Yalnız panelden yönetilen sayfalarda yüklenir; icsayfa.css'in üstüne
   biner. Düzen sınıfı sayfa_duzen_sinifi() ile PHP'den gelir.
   ============================================================ */

/* ── Sayfa YERLEŞİMİ (iskelet) — kenar / tam ──────────────
   Yan bloğun olup olmadığını fiilen belirleyen şey CSS DEĞİL, controller'dır:
   'tam' iken sidebarWidgets = [] verilir, partials/page_sidebar erken döner
   ve yan blok DOM'a hiç girmez; layouts/page da .ic-layout--tek ile grid'i
   tek sütuna alır. Buradaki sınıflar gövdeye basılan CSS kancalarıdır.

   Not: bu tema iç sayfalarda .ic-layout gridini kullanır ve sütunları zaten
   minmax(0, 1fr) ile tanımlar; geniş tablo sayfayı yatay kaydırmaz. */
body.sayfa-tam-blok .ic-content {
  /* Tek blokta içerik kabı sayfayı KAPLAR (col-12). Genişlik sınırı
     buraya konmaz; dış sınır zaten .container-xxl'dir. Metnin satır
     uzunluğu ayrı bir karardır ve .sayfa-tek-blok ile yönetilir. */
  max-inline-size: none;
  margin-inline: 0;
}

/* ── Tek sütun ─────────────────────────────────────────────
   "Tek Sütun" yalnızca AKIŞI belirler: metin tek sütunda akar ve içerik
   alanının tamamını kaplar. Buraya okunabilirlik için bir genişlik sınırı
   (52rem gibi) KONMAZ — kart col-12 iken metnin ortada dar bir şeritte
   kalması istenmiyor. */
.sayfa-tek-blok { max-inline-size: none; }

/* ── Kapak görseli ────────────────────────────────────────
   Taban kural yalnızca güvenlik: geniş bir görsel dar ekranda taşmasın. */
.ic-kapak {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Tek blokta kapak, kartın ÜST KÖŞELERİNİ kaplayacak şekilde tam
   genişlikte oturur: .ic-content'in iç dolgusu negatif kenar boşluğuyla
   geri alınır ve görselin üst köşeleri kartın yarıçapına eşitlenir. */
body.sayfa-tam-blok .ic-kapak:first-child {
  inline-size: calc(100% + 80px);
  max-inline-size: none;
  margin: -36px -40px 28px;
  border-radius: 14px 14px 0 0;
  /* Yükseklik SINIRLI: tam genişliğe gerilen görsel kendi oranıyla
     büyüyüp sayfayı yutmasın. object-fit ile ortadan kırpılır, bant
     gibi durur. Bandın yüksekliğini burada ayarlayın. */
  block-size: clamp(200px, 26vw, 380px);
  object-fit: cover;
  object-position: center;
}

/* ── İki blok: CSS sütunları ──────────────────────────────
   İçerik panelden tek parça HTML olarak gelir; onu ikiye bölecek bir
   sınır yoktur. Sunucuda kesmek paragrafı ve tabloyu kırar — akışı
   tarayıcı dengeler ve sayfa uzunluğu değişince yeniden akar.

   `columns: 2 22rem` kısayolu: sütun 22rem'in altına düşerse tarayıcı
   kendiliğinden tek sütuna iner, ayrı bir medya sorgusu gerekmez. */
.sayfa-iki-blok {
  columns: 2 22rem;
  column-gap: 3rem;
  column-rule: 1px solid var(--daka-border, #e5e7eb);
  column-fill: balance;   /* az paragraflı sayfada ikinci sütun boş kalmasın */
}

/* Sütunlu akışın klasik kırılma noktaları — hepsi kapatılmalı */

/* 1. Öğeler sütun ortasında bölünmesin */
.sayfa-iki-blok :is(h2, h3, h4, h5, figure, table, blockquote, ul, ol, img, pre) {
  break-inside: avoid;
}

/* 2. Başlık sütunun en altında yalnız kalmasın */
.sayfa-iki-blok :is(h2, h3, h4, h5) { break-after: avoid; }

/* 3. İlk öğe tepede boşluk açmasın */
.sayfa-iki-blok > :first-child { margin-block-start: 0; }

/* 4. Görsel sütunu taşırmasın */
.sayfa-iki-blok img { max-inline-size: 100%; block-size: auto; }

/* 5. Geniş tablolar sütuna sığmaz — iki sütunu birden kaplasın */
.sayfa-iki-blok table {
  inline-size: 100%;
  column-span: all;
  /* column-span: all sütun akışını böler; üstünde/altında nefes bırak */
  margin-block: 1.25rem;
}

/* Dar ekranda iki sütun okunmaz. `columns` kısayolu 22rem sınırıyla
   bunu zaten yapar; kural, sütun kuralını da kaldırmak için burada. */
@media (max-width: 900px) {
  .sayfa-iki-blok { column-rule: none; }
}

/* Dar ekranda .ic-content dolgusu 28px 24px'e iniyor (icsayfa.css) —
   negatif kenar boşluğu da onunla eşleşmeli, yoksa görsel taşar */
@media (max-width: 991.98px) {
  body.sayfa-tam-blok .ic-kapak:first-child {
    inline-size: calc(100% + 48px);
    margin: -28px -24px 22px;
    block-size: clamp(160px, 34vw, 260px);
  }
}

/* Kağıtta iki sütun sayfa sonlarıyla çakışır */
@media print {
  .sayfa-iki-blok { columns: 1; column-rule: none; }
}

/* ── İçerik devamı blokları ───────────────────────────────
   Ana içerik kartının ALTINDA, bağımsız bir bölüm.

   Bölümün KENDİ ZEMİNİ YOKTUR: kartlar sayfanın gri zemininin (--ic-bg)
   üzerinde doğrudan durur. Ayırıcı unsur çerçevedir, dolgu değil.
   Metin bu yüzden koyu renktir.
   ============================================================ */
.sb-bolum {
  margin-block-start: 2.25rem;
}

/* MASONRY (Pinterest düzeni) — CSS sütunlarıyla.
   Grid kullanılmıyor: grid satırları hizaladığı için kısa bir kartın
   altında bir sonraki satıra kadar boşluk kalıyordu. CSS sütunlarında
   her kart bir öncekinin hemen altına paketlenir ve düzensizlik
   kartların kendi yüksekliğinden doğar.

   `columns: 4 17rem` = en fazla 4 sütun, sütun 17rem'in altına düşerse
   tarayıcı sayıyı kendiliğinden azaltır; ayrı medya sorgusu gerekmez.

   NOT: Sütunlu akışta okuma sırası SÜTUN SÜTUNdur. DOM sırası
   değişmediği için ekran okuyucu ve klavye sırası bozulmaz. */
.sb-izgara {
  columns: 4 17rem;
  column-gap: 1.4rem;
}

.sb-kart {
  /* Kart sütun sınırında ikiye bölünmesin — masonry'nin can damarı */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-block-end: 1.4rem;
  /* İçindekiler listesinden atlanınca sabit menünün altında kalmasın */
  scroll-margin-top: 6rem;
}

.sb-no {
  display: block;
  margin-block-end: .5rem;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--daka-gold, #E8A020);
}

.sb-kutu {
  padding: 1.3rem 1.25rem 1.35rem;
  border: 1px solid #c9ccd1;
  border-radius: 6px;
  color: #334155;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sb-kart:hover .sb-kutu {
  border-color: var(--daka-gold, #E8A020);
  box-shadow: 0 8px 22px rgba(15, 35, 70, .10);
  transform: translateY(-3px);
}

/* Ritim: her dördüncü kart dolu zeminli ve altın sol şeritli olur.
   Hepsi aynı olsaydı uzun listede tekdüze görünürdü; bu varyant
   yerleşime göre göz için durak noktası oluşturur. */
.sb-kart:nth-child(4n + 1) .sb-kutu {
  background: #ffffff;
  border-color: var(--daka-border, #e2e8f0);
  border-inline-start: 3px solid var(--daka-gold, #E8A020);
  box-shadow: 0 4px 16px rgba(15, 35, 70, .06);
}

.sb-baslik {
  margin: 0 0 .65rem;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--daka-dark, #1e293b);
}

/* Panelden gelen CKEditor HTML'i — açık zeminde okunur tipografi */
.sb-icerik { font-size: .93rem; line-height: 1.7; }
.sb-icerik > :first-child { margin-block-start: 0; }
.sb-icerik > :last-child  { margin-block-end: 0; }
.sb-icerik p  { margin: 0 0 .7rem; }
.sb-icerik ul,
.sb-icerik ol { margin: 0 0 .7rem; padding-inline-start: 1.2rem; }
.sb-icerik li { margin-block-end: .35rem; }
.sb-icerik strong { color: var(--daka-dark, #1e293b); }
.sb-icerik a { color: var(--daka-primary, #2D7CB5); }
.sb-icerik img { max-inline-size: 100%; block-size: auto; border-radius: 6px; }

.sb-icerik table { inline-size: 100%; border-collapse: collapse; font-size: .87rem; }
.sb-icerik th,
.sb-icerik td { border: 1px solid var(--daka-border, #e2e8f0); padding: .45rem .6rem; text-align: start; }
.sb-icerik th { background: #f8fafc; font-weight: 700; color: var(--daka-dark, #1e293b); }

@media (max-width: 767.98px) {
  .sb-izgara { columns: 1; }
  .sb-kart   { margin-block-end: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-kutu { transition: none; }
  .sb-kart:hover .sb-kutu { transform: none; }
}

@media print {
  .sb-izgara { columns: 1; }
  .sb-kutu   { border-color: #999; box-shadow: none; }
  .sb-kart:nth-child(4n + 1) .sb-kutu { background: none; }
}

/* ── İçindekiler ──────────────────────────────────────────── */
.sayfa-icindekiler {
  margin: 0 0 1.75rem;
  padding: 14px 18px;
  border: 1px solid var(--daka-border, #e5e7eb);
  border-inline-start: 4px solid var(--daka-gold, #E8A020);
  border-radius: 10px;
  background: #f8fafc;
}

.sayfa-icindekiler ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sayfa-icindekiler a {
  font-size: 14px;
  font-weight: 600;
  color: var(--daka-primary, #2D7CB5);
  text-decoration: none;
}

.sayfa-icindekiler a:hover { text-decoration: underline; }

/* ============================================================
   İŞARET DİLİ VİDEOSU — /{slug}
   (bkz. app/Views/pages/sayfa.php, assets/js/custom/isaret-dili.js)

   Veri: sayfa_ceviriler.isaret_dili_video (dil başına ayrı).
   Şerit, kapak görselinin ALTINDA / özetin ÜSTÜNDE durur; kart
   içindeki ilk göze çarpan öğedir.

   Renk seçimi: sayfadaki diğer çağrı öğeleri gibi ALTIN vurgu
   (bkz. .sayfa-icindekiler). Mavi kullanılsaydı gövde metnindeki
   bağlantı rengiyle karışırdı.
   ============================================================ */
.isd-serit {
  display: flex;
  inline-size: 100%;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--daka-gold, #E8A020);
  border-inline-start: 4px solid var(--daka-gold, #E8A020);
  border-radius: 12px;
  background: linear-gradient(100deg, #fff8ec 0%, #fffdf9 65%);
  color: var(--daka-dark, #1e293b);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.isd-serit:hover,
.isd-serit:focus-visible {
  box-shadow: 0 10px 24px rgba(232, 160, 32, .22);
  transform: translateY(-2px);
}

/* Odak halkası görünür kalmalı — outline:none YAZILMAZ */
.isd-serit:focus-visible { outline: 2px solid var(--daka-gold-dk, #c9841a); outline-offset: 2px; }

/* İkon rozeti. Keenicons 8'de işaret dili karşılığı yok (adı benzeyen tek
   ikon ki-handcart, o da alışveriş arabası), bu yüzden görsel kullanılıyor.

   deaf.png'nin kendi AÇIK GRİ karosu var — yalnız köşeleri saydam. Bu yüzden
   simge renklendirilmez: altın zemine oturtulup beyaza çevrilseydi (ya da
   maskelenseydi) karo da beyaza döner ve rozet boş bir kutu gibi görünürdü.
   Rozet bunun yerine BEYAZ; altın vurgu çerçeveden geliyor. */
.isd-rozet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border: 2px solid var(--daka-gold, #E8A020);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(232, 160, 32, .22);
}

/* Kaynak 32×32; büyütülmüyor ki bulanıklaşmasın */
.isd-rozet img {
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
}

.isd-metin { flex: 1 1 auto; min-inline-size: 0; }

.isd-baslik {
  display: block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--daka-dark, #1e293b);
}

.isd-not {
  display: block;
  margin-block-start: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7c6134;
}

.isd-oynat {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: rgba(232, 160, 32, .18);
  color: var(--daka-gold-dk, #c9841a);
  font-size: 11px;
  transition: background-color .22s ease;
}

.isd-serit:hover .isd-oynat { background: var(--daka-gold, #E8A020); color: #ffffff; }

/* ── Video penceresi ──────────────────────────────────────────
   <dialog> + showModal(): üst katman, odak tuzağı ve Esc tarayıcıdan
   gelir. Kutu şeffaf, gölgesiz; görünen çerçeveyi videonun kendisi
   oluşturur. */
.isd-pencere {
  inline-size: min(960px, 92vw);
  max-inline-size: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}

.isd-pencere::backdrop { background: rgba(9, 20, 40, .78); }

.isd-oran {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.isd-oran > iframe,
.isd-oran > video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  background: #000000;
}

/* Kapatma düğmesi kutunun DIŞINDA, sağ üstte durur; videonun
   denetimlerini örtmez. Dar ekranda kutunun içine alınır. */
.isd-kapat {
  position: absolute;
  inset-block-start: -46px;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.isd-kapat:hover { background: rgba(255, 255, 255, .32); }
.isd-kapat:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

@media (max-width: 575.98px) {
  .isd-serit { gap: 11px; padding: 12px 13px; }
  .isd-rozet { inline-size: 40px; block-size: 40px; border-radius: 10px; }
  .isd-rozet img { inline-size: 26px; block-size: 26px; }
  .isd-baslik { font-size: 15px; }
  .isd-not { font-size: 12.5px; }
  .isd-oynat { display: none; }   /* dar ekranda şeridin kendisi zaten dokunulabilir */
  .isd-pencere { inline-size: 94vw; }
  .isd-kapat { inset-block-start: 8px; inset-inline-end: 8px; background: rgba(0, 0, 0, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .isd-serit, .isd-oynat, .isd-kapat { transition: none; }
  .isd-serit:hover, .isd-serit:focus-visible { transform: none; }
}

@media print {
  .isd-serit, .isd-pencere { display: none; }
}