/* ════════════════════════════════════════════════════════════════════════
   MOBILE FIX 2026-05-23 — Safety-net layer
   Bu dosya main.css/mobile.css/mobile-pages.css/responsive.css'TEN SONRA
   yüklenir. SADECE @media (max-width: ...) içinde kurallar bulunur.
   Masaüstü (1025px+) görünüm 0 değişiklik alır.

   Kapsadığı eksikler (mevcut katmanlarda olmayanlar):
   - clamp() ile fluid typography (mobile.css'in sabit font-size'larını
     ezmek için minimal !important kullanır)
   - Modal universal max-width
   - Tablo overflow wrapper
   - Form/input full width safety
   - Footer kolon stack (generic class isimleri için)
   - Hamburger toggle (mobile-nav.js ile beraber çalışır)
   - Reading width article
   - Touch target safety (universal)
   - prefers-reduced-motion
   - iOS safe-area
   - Arapça font boyut koruması
   ════════════════════════════════════════════════════════════════════════ */


/* ──── Universal safety: tüm viewport'larda zararsız guards ──── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Body min-width 1280px (anasayfa inline kural) — mobile'da kaldır */
@media (max-width: 1024px) {
  body {
    min-width: 0 !important;
  }
}
img, video, iframe, picture, svg, canvas {
  max-width: 100%;
  height: auto;
}
table { max-width: 100%; }

/* Hamburger butonunu masaüstünde gizle */
.mv-nav-toggle,
.mv-mobile-toggle {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET (max-width: 1024px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* 4 sütun grid'leri 2 sütuna düşür (eski sistemde yoksa) */
  [class*="grid-cols-4"]:not([class*="lg:grid"]),
  .col-4-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE (max-width: 768px) — ASIL FIX'LER
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Fluid typography (clamp). mobile.css'in fixed değerlerini ezer
     ama sadece scaling karakteri ekler, masaüstüne dokunmaz. ─── */
  h1:not([class*="hero"]):not([class*="display"]):not([class*="ia-"]) {
    font-size: clamp(1.55rem, 6.5vw, 2.1rem);
    line-height: 1.2;
  }
  h2:not([class*="hero"]):not([class*="display"]):not([class*="ia-"]) {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
    line-height: 1.25;
  }
  h3:not([class*="ia-"]) {
    font-size: clamp(1.1rem, 4.8vw, 1.35rem);
    line-height: 1.3;
  }
  p:not([class*="ia-"]):not(.hero-sub):not(.lead) {
    line-height: 1.65;
  }

  /* ─── Section breathing room (8px rhythm) ─── */
  section[class*="section"]:not(.ia-app *),
  .section-block {
    padding-block: 32px;
  }

  /* ─── Container padding — generic ─── */
  .container:not(.ia-nav-root *):not(.ia-app *),
  .max-width-container,
  .page-container {
    padding-inline: 16px;
  }

  /* ─── Generic grid stack (mobile.css'te .grid-N var, ek olarak BEM ve
     Tailwind-benzeri sınıflar için) ─── */
  .footer__top,
  .footer-grid,
  .footer__links,
  [class*="grid-cols-3"]:not([class*="md:grid"]):not(.ia-app *),
  [class*="grid-cols-4"]:not([class*="md:grid"]):not(.ia-app *) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─── Newsletter / row layouts → stack ─── */
  .newsletter__inner,
  .hp-row,
  .flex-row:not(.ia-app *):not(.ia-nav-root *) {
    flex-direction: column;
  }
  .newsletter__form { max-width: 100%; width: 100%; }

  /* ─── Form input safety (mobile-pages.css 16px iOS zoom var,
     bu sadece width safety ekler) ─── */
  form input[type="text"]:not(.ia-nav-root *),
  form input[type="search"]:not(.ia-nav-root *),
  form input[type="email"]:not(.ia-nav-root *),
  form input[type="url"]:not(.ia-nav-root *),
  form input[type="tel"]:not(.ia-nav-root *),
  form input[type="password"]:not(.ia-nav-root *),
  form textarea:not(.ia-nav-root *),
  form select:not(.ia-nav-root *) {
    width: 100%;
    max-width: 100%;
  }

  /* ─── Modal universal max-width ─── */
  .modal:not(.ia-app *),
  .a-modal,
  [role="dialog"]:not(.ia-app *),
  .modal-content,
  .modal-dialog {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    width: 100%;
  }
  .modal-body,
  .a-modal-body {
    padding: 16px !important;
  }

  /* ─── Tablo overflow wrapper ─── */
  .table-wrapper,
  .table-scroll,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table th, table td {
    padding: 8px 10px;
    font-size: 0.88rem;
  }

  /* ─── Arapça koruma (mobile'da küçülmesin, tafasir okunabilir kalsın) ─── */
  [lang="ar"]:not(.ia-app *):not(.ia-nav-root *),
  .arabic-text,
  .dd-arabic,
  .a-arabic,
  .ar-text {
    font-size: clamp(1.2rem, 5.5vw, 1.65rem) !important;
    line-height: 2.1 !important;
    word-spacing: 0.06em;
  }

  /* ─── Reading width — uzun makale, dua/hadis detay, vaaz ─── */
  article,
  .article-body,
  .post-content,
  .dd-meaning,
  .dd-virtue,
  .dd-translit,
  .reading-content {
    max-width: 100%;
    font-size: clamp(1rem, 4.2vw, 1.08rem);
    line-height: 1.72;
  }

  /* ─── Touch target safety (mobile-pages.css :coarse zaten yapıyor,
     bu daha geniş kapsama) ─── */
  button:not(.ia-app *):not(.ia-nav-root *),
  .btn:not(.ia-app *),
  a.button:not(.ia-app *),
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
  .icon-btn,
  .btn-icon,
  .btn-sm {
    min-width: 44px;
    min-height: 44px;
  }

  /* ─── Hamburger toggle (mobile-nav.js inject eder) ───
     Specificity: html body ile yüksek tutuyoruz, .ia-nav-root button gibi
     "button { height: auto !important }" kurallarını ezebilelim. ─── */
  html body .mv-nav-toggle,
  .mv-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 8px !important;
    padding: 0 !important;
    color: inherit !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
  .mv-nav-toggle:active {
    background: rgba(184, 115, 51, 0.08);
  }
  .mv-nav-toggle .bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .mv-nav-toggle .bar::before,
  .mv-nav-toggle .bar::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease;
  }
  .mv-nav-toggle .bar::before { top: -6px; }
  .mv-nav-toggle .bar::after  { top:  6px; }
  .mv-nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .mv-nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
  .mv-nav-toggle[aria-expanded="true"] .bar::after  { transform: translateY(-6px) rotate(-45deg); }

  /* Mobil drawer (mobile-nav.js inject ettiği menü konteyneri) */
  .mv-mobile-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(85vw, 320px);
    background: rgba(255, 253, 248, 0.985);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -8px 0 32px rgba(15, 10, 7, 0.18);
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 70px 24px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  body.theme-dark .mv-mobile-drawer,
  body.dark-theme .mv-mobile-drawer,
  html[data-ia-page="cover"] .mv-mobile-drawer {
    background: rgba(15, 10, 7, 0.97);
    color: #efe2c4;
  }
  .mv-mobile-drawer.is-open { transform: translateX(0%) !important; -webkit-transform: translateX(0%) !important; }
  .mv-mobile-drawer a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: #2c1810;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 10px;
    min-height: 44px;
    transition: background 0.15s ease;
  }
  body.theme-dark .mv-mobile-drawer a,
  body.dark-theme .mv-mobile-drawer a {
    color: #efe2c4;
  }
  .mv-mobile-drawer a:hover,
  .mv-mobile-drawer a:active,
  .mv-mobile-drawer a.is-active {
    background: rgba(184, 115, 51, 0.10);
    color: #B87333;
  }
  .mv-mobile-drawer a.is-active {
    font-weight: 600;
    background: rgba(184, 115, 51, 0.14);
  }
  .mv-mobile-drawer .mv-drawer-sep {
    height: 1px;
    background: rgba(184, 115, 51, 0.18);
    margin: 8px 0;
  }

  /* Drawer açıkken arka plan overlay */
  .mv-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 7, 0.45);
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mv-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer açıkken body scroll lock */
  body.mv-drawer-open {
    overflow: hidden;
  }

  /* ─── Skip link mobile uyumu ─── */
  .ia-skip-link:focus,
  .skip-link:focus,
  a.skip-to-main:focus {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    font-size: 1rem;
    padding: 12px;
  }

  /* ─── Focus indicator mobile ─── */
  :focus-visible {
    outline: 2px solid #B87333;
    outline-offset: 2px;
  }

  /* ─── Hero watermark (page-hero.css uzun font-size'ları için) ─── */
  .hero-watermark,
  .page-hero-watermark,
  .dd-hero-wm {
    font-size: clamp(3.5rem, 16vw, 6.5rem) !important;
    opacity: 0.08;
  }

  /* ─── Breadcrumb wrap ─── */
  .breadcrumb,
  .breadcrumbs,
  nav.breadcrumb,
  .ar-bc {
    flex-wrap: wrap;
    font-size: 0.75rem;
  }

  /* ─── PREMIUM TYPOGRAPHY — letter-spacing & line-height polish ───
     "AI slop" yerine; display'lerde sıkılaştırma, body'de nefes. ─── */
  h1:not([class*="ia-"]),
  h2:not([class*="ia-"]) {
    letter-spacing: -0.01em;
  }
  h3:not([class*="ia-"]),
  h4:not([class*="ia-"]) {
    letter-spacing: -0.005em;
  }
  /* Caps/eyebrow elementlerde tracking koru (zaten 0.18em+ kullanılıyor) */

  /* ─── 8px GRID SECTION RHYTHM ─── */
  .section-tight:not(.ia-app *)  { padding-block: 24px; }
  .section-normal:not(.ia-app *) { padding-block: 32px; }
  .section-loose:not(.ia-app *)  { padding-block: 48px; }

  /* ─── Subtle paragraph max-width — uzun satırlar yorulmaması için ─── */
  article p,
  .article-body p,
  .post-content p {
    max-width: 65ch;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 380px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .container:not(.ia-nav-root *):not(.ia-app *),
  .max-width-container,
  .page-container {
    padding-inline: 12px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   ANASAYFA — Mobile hero image
   width=device-width yapıldıktan sonra, mobile'da yeni hero görseli
   gösterilir (islamic_library_mobile_768w.webp). Desktop'ta gizli.
   ════════════════════════════════════════════════════════════════════════ */
.ia-hero-mobile-img {
  display: none;
}
@media (max-width: 899px) {
  .ia-app .ia-hero-mobile-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 6px;
    box-shadow:
      0 8px 32px -12px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(201, 164, 90, 0.14);
  }
  /* Eski büyük hero-photo (anasayfa) — mobile'da gizli */
  .ia-app .hero-photo,
  .ia-app .hero-bg .hero-photo {
    display: none !important;
  }
  /* Hero-bg basitleşir, mobile img dominant */
  .ia-app .hero-bg {
    background: linear-gradient(180deg, rgba(11,7,3,0.92), rgba(11,7,3,0.85)) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — site genelinde animasyonları kıs
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   iOS SAFE AREA — bottom nav + drawer'in altında home indicator için
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.mv-has-bnav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .mv-mobile-drawer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PRINT — mobile-only elementleri gizle
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  .mv-mobile-drawer,
  .mv-drawer-backdrop,
  .mv-nav-toggle,
  .mv-bnav,
  .ia-hero-mobile-img {
    display: none !important;
  }
}