/* =====================================================================
 * responsive.css — BREAKPOINT DÜZELTMELERİ
 * ---------------------------------------------------------------------
 * Bileşen dosyalarındaki ana responsive kurallar zaten kendi
 * dosyalarında yer alıyor. Bu dosya son katman olarak:
 *   1. Genel tipografi ölçek ayarları
 *   2. Bileşenler arası hizalama düzeltmeleri
 *   3. Geniş ekran / çok geniş ekzen optimizasyonu
 *   4. Çok küçük ekran (≤ 360px) güvenlik ağları
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. KÜÇÜK EKRAN (< 360px)
 * Çok nadir cihazlar için içerik taşmasını önler.
 * --------------------------------------------------------------------- */
@media (max-width: 22.5em) {
  :root {
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
  }
  .be-section { padding-block: var(--space-9); }
  .be-section--open,
  .be-section--vast { padding-block: var(--space-11); }
}

/* ---------------------------------------------------------------------
 * 2. MOBİLDEN MASAYÜSTÜNE (≥ 48em / 768px)
 * Orta boy ekran düzeltmeleri.
 * --------------------------------------------------------------------- */
@media (min-width: 48em) {
  .be-prose { font-size: var(--fs-md); }
}

/* ---------------------------------------------------------------------
 * 3. MASAÜSTÜ (≥ 64em / 1024px)
 * Büyük başlıklar, daha geniş hero nefesi.
 * --------------------------------------------------------------------- */
@media (min-width: 64em) {
  :root {
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.25rem;
    --fs-4xl: 4.25rem;
  }

  .be-hero { padding-block: var(--space-13) var(--space-12); }

  .be-entry-head { padding-block: var(--space-12) var(--space-9); }
}

/* ---------------------------------------------------------------------
 * 4. GENİŞ EKRAN (≥ 90em / 1440px)
 * Çok geniş monitörlerde içerik konteyneri sınırı.
 * --------------------------------------------------------------------- */
@media (min-width: 90em) {
  .be-container--wide { max-width: 88rem; }
  .be-container--full { max-width: 96rem; }
}

/* ---------------------------------------------------------------------
 * 5. YATAY YÖNLENDİRME (mobil)
 * Yükseklik sınırlı; gereksiz dikey kaydırmayı önler.
 * --------------------------------------------------------------------- */
@media (max-height: 32em) and (orientation: landscape) {
  .be-hero { padding-block: var(--space-9) var(--space-8); }
}

/* ---------------------------------------------------------------------
 * 6. YAZDIRMA
 * Web sitesinin basılabilir hali. Renk, gölge, animasyon temizlenir.
 * --------------------------------------------------------------------- */
@media print {
  :root {
    --canvas: #fff;
    --ink: #000;
  }
  body { font-size: 11pt; line-height: 1.5; }
  .be-header,
  .be-footer,
  .be-mobile-nav,
  .be-lightbox,
  .be-pagination,
  .be-prevnext,
  .be-related,
  .be-menu-toggle { display: none !important; }

  a { color: var(--ink); text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 90%; }

  .be-hero__motif,
  .be-motif { display: none; }

  .be-section { padding-block: 1.5rem; }
  .be-entry-head { padding-block: 1rem; }
}

/* ---------------------------------------------------------------------
 * 7. DOKUNMATİK HEDEFLER
 * Dokunmatik cihazlarda buton ve link tıklama alanı ≥ 44px.
 * --------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .be-nav__link,
  .be-filter,
  .be-pagination a,
  .be-pagination span {
    min-height: 44px;
  }
}