/* ============================================================
   SmartPrep™ — mobile.css
   GERÇEK mobil versiyon (amaca-özel düzen) — masaüstünü BOZMAZ.
   Tüm kurallar mobil breakpoint'lerin içinde; desktop'a sızmaz.

   Marka kimliği aynı: bordo #A10E17 + yeşil #39B54A + Fraunces/Inter.
   Sadece LAYOUT mobile-first yeniden kurulur.

   Yüklenme sırası: tokens → base → components → mobile  (en son = override yetkisi)
   Referans desenler: WAI-ARIA APG (dialog+disclosure), Material modal drawer + scrim,
   Bootstrap offcanvas (transform slide), Inclusive Components (a11y toggle nav),
   body-scroll-lock (iOS-safe).
   ============================================================ */

/* ────────────────────────────────────────────────
   JS-enjekte öğeler MASAÜSTÜNDE GİZLİ (sadece mobil drawer'da görünür).
   nav-primary bir <ul>; bu li/scrim öğeleri ≤720 dışında render edilmez.
   ──────────────────────────────────────────────── */
.mobile-scrim,
.mobile-drawer-label,
.mobile-drawer-foot { display: none; }

/* ────────────────────────────────────────────────
   0) YATAY KAYDIRMA GUARDRAIL — her sayfada scrollWidth ≤ viewport
   ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* overflow-x:hidden html/body'yi DİKEY scroll-container yapıyordu (overflow-y:auto'ya
     terfi) → IntersectionObserver scroll-change bildirimleri tetiklenmiyor, viewport'tan
     UZUN [data-fade] blokları (ör. 28-kart .brand-grid) sonsuza dek opacity:0 kalıyordu
     (markalar sayfası mobilde bomboş). `overflow-x: clip` yatay taşmayı AYNI şekilde keser
     ama scroll-container OLUŞTURMAZ → IO + sticky normal çalışır. (Safari 16+/tüm modern.) */
  html, body { max-width: 100%; overflow-x: clip; }
  /* DRAWER FIX (Emrah): html'de overflow-x:clip, position:fixed'in içeren-bloğunu html
     yapıyor → drawer (.nav-primary) viewport yerine dokümana sabitlenip aşağıdayken
     ekran-dışı (üstte) kalıyordu. ÇÖZÜM: menü AÇIKKEN html clip'ini kaldır (JS html'e
     .nav-open ekler) → sticky header korunur + drawer viewport'a sabit, bulunduğun
     noktada açılır. Drawer tam-ekran (tablet dahil) olduğundan, açıkken görünebilecek
     latent yatay taşma drawer'ın ARKASINDA kalır. Kapalıyken clip → reveal/IO + h-taşma
     normal kesilir. */
  html.nav-open { overflow-x: visible; }
  /* AI sohbet balonu (64px) köşede birincil; back-to-top onunla aynı noktadaydı → üst üste
     biniyordu → balonun ÜSTÜNE istifle (64px balon + 14px nefes). */
  .floating-actions {
    bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px) + 64px + 14px) !important;
  }
  /* Hiçbir öğe viewport'tan taşmasın */
  img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
  /* Geniş satır-içi medya / mutlak konumlu dekor taşmasını engelle */
  .wrap, .wrap-narrow, .wrap-text { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* ====================================================================
   1) GERÇEK MOBİL NAVİGASYON — tam-ekran off-canvas drawer
   .nav-primary masaüstünde yatay menü; mobilde sağdan kayan panel olur.
   ==================================================================== */
@media (max-width: 1023px) {

  /* Hamburger görünür + dokunma hedefi ≥44px */
  .nav-toggle {
    display: flex;
    width: 44px; height: 44px;
    position: relative;
    z-index: calc(var(--z-modal) + 2);   /* drawer + backdrop üstünde kalmalı (kapatma erişilebilir) */
  }

  /* Hamburger → X morph (aria-expanded'e bağlı) */
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition: transform var(--t-base), opacity var(--t-fast), background var(--t-fast);
  }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

  /* SCRIM / backdrop (JS enjekte eder) */
  .mobile-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 13, 0.46);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
    z-index: var(--z-overlay);
  }
  body.nav-open .mobile-scrim { opacity: 1; visibility: visible; }

  /* DRAWER — .nav-primary'yi tam-ekran kayan panele dönüştür.
     Header bar'ın ALTINDAN başlar → logo + X içeren bar her zaman üstte kalır
     (kalıcı-header drawer deseni; panel logoyu örtmez). */
  .nav-primary {
    position: fixed;
    top: var(--header-h); right: 0; bottom: 0;
    left: auto;
    width: 100%;                 /* telefon: tam-ekran takeover */
    max-width: 100vw;
    height: calc(100% - var(--header-h));
    height: calc(100dvh - var(--header-h));  /* mobil adres çubuğu uyumlu */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) 0 var(--s-6);
    margin: 0;
    background: var(--c-paper);
    border: 0;
    border-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--t-base);
    z-index: var(--z-modal);
    box-shadow: -24px 0 60px rgba(20, 17, 13, 0.18);
    visibility: hidden;
  }
  .nav-primary.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* Tablet de MOBİL gibi davranır (Emrah): tam-ekran drawer — yarım-genişlik yan panel
     KALDIRILDI. Tablet, masaüstü değil mobil tasarımı izler. */

  /* Drawer üst etiketi (JS enjekte) */
  .mobile-drawer-label {
    display: block;
    padding: 0 var(--s-5) var(--s-3);
    margin-bottom: var(--s-2);
    font-family: var(--f-body);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--c-ink-faint);
    border-bottom: 1px solid var(--c-line);
  }

  /* Liste öğeleri — tek sütun akış, büyük hedefler */
  .nav-primary > li {
    position: static;
    width: 100%;
    border-bottom: 1px solid var(--c-line);
  }

  /* Üst seviye link + dropdown tetik butonu — ≥56px hedef */
  .nav-primary > li > a,
  .nav-primary > li > button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--s-4) var(--s-5);
    font-family: var(--f-display);
    font-size: var(--fs-lg);          /* ≥16px, editorial */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-snug);
    color: var(--c-ink);
    border-bottom: 0;
  }
  .nav-primary > li > a:active,
  .nav-primary > li > button:active { background: var(--c-paper-deep); }

  /* Accordion chevron — büyük, net (mevcut ::after'ı yeniden konumla) */
  .nav-primary > li.has-dropdown > button::after {
    width: 9px; height: 9px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    margin-left: var(--s-3);
    transform: rotate(45deg) translateY(-2px);
    color: var(--c-brand);
  }
  .nav-primary > li.has-dropdown.is-open > button::after {
    transform: rotate(225deg) translateY(2px);
  }

  /* Accordion içeriği — kapalıyken gizli, açıkken yumuşak iner */
  .nav-dropdown {
    position: static;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    min-width: auto !important;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--s-2);
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: var(--c-paper-deep);
    padding: var(--s-3) var(--s-4) var(--s-4);
    margin: 0;
  }
  .nav-primary > li:not(.is-open) .nav-dropdown { display: none; }

  /* Alt-menü kartları — sade satır, tam genişlik, ≥48px */
  .nav-dropdown a {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
  }
  .nav-dropdown a + a { margin-top: 0; }
  .nav-dropdown a:active {
    background: linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
    border-color: var(--c-brand);
    color: var(--c-cream);
  }
  .nav-dropdown a:active strong { color: var(--c-cream); }
  .nav-dropdown a:active span { color: rgba(245, 241, 234, 0.85); }
  .nav-dropdown a strong { font-size: var(--fs-sm); }
  .nav-dropdown a span { font-size: var(--fs-2xs); margin-top: 3px; }

  /* Drawer alt CTA bloğu (JS enjekte) — B2B Giriş + İletişim */
  .mobile-drawer-foot {
    margin-top: auto;
    border-bottom: 0 !important;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  /* NOT: foot içindeki <a>, .nav-primary>li>a kuralına da uyar (specificity onu ezer);
     bu yüzden btn görünümünü burada EXPLICIT veriyoruz (2 class = daha yüksek specificity). */
  .mobile-drawer-foot .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    padding: 14px 22px;
    font-family: var(--f-body);
    font-size: var(--fs-base);
    border-radius: 8px;
    border: 1.5px solid transparent;
  }
  .mobile-drawer-foot .btn-brand {
    background: var(--c-brand);
    color: var(--c-cream);
  }
  .mobile-drawer-foot .btn-brand:active { background: var(--c-brand-deep); }
  .mobile-drawer-foot .drawer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink-mute);
  }
  /* B2B Giriş: popover/akordeon KALDIRILDI (Emrah sadeleştirme 2026-06-13) —
     drawer'da tek .btn-brand düz link (/uyelik/panel/giris). */

  /* Header satırı — drawer açıkken header şeffaf kalır, X erişilebilir */
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header {
    background: var(--c-paper);
    /* Sticky header (z:50) kendi stacking context'i; drawer onun İÇİNDE.
       Scrim (z:80, body child) üstte kalmasın diye header'ı scrim üstüne çıkar →
       drawer + X butonu tıklanabilir; scrim yine arkada backdrop olarak görünür. */
    z-index: calc(var(--z-modal) + 5);
    /* KRİTİK (Emrah): catalog sayfalarında scroll'da `body.toolbar-active .site-header`
       transform:translateY(-100%) header'ı gizliyor (cat-icons.css). Bu transform, fixed
       drawer'ın içeren-bloğunu kayık header yapıyordu → menü -25px yukarıda kesik açılıyordu.
       Menü açıkken header'ı transform'suz/görünür yap → drawer viewport'ta doğru konumlanır,
       logo + X erişilebilir. */
    transform: none !important;
  }
  /* Catalog supply-toolbar (fixed, z:1000) menü açıkken logo+X header'ını örtüyordu →
     menü varken kategori filtresi gereksiz, gizle (kapanınca geri gelir). */
  body.nav-open .supply-toolbar { display: none !important; }

  /* Reduced-motion: slide yerine fade */
  @media (prefers-reduced-motion: reduce) {
    .nav-primary { transition: none; }
    .mobile-scrim { transition: none; }
  }
}

/* ====================================================================
   2) MOBİL HEADER + LOGO — masaüstü logo lockup (ikon + wordmark + slogan)
   TAM görünür. Masaüstü -94px margin logoyu KIRPAR (kasıtlı); mobilde
   margin-left:0 ile lockup'ın TAMAMI görünür (kırpılma yok, bug #1).
   ==================================================================== */
@media (max-width: 1023px) {
  .header-row { padding: var(--s-3) 0; gap: var(--s-3); flex-wrap: nowrap; }
  .site-header .brand-mark {
    min-width: 0; overflow: visible; flex-shrink: 1;
  }
  .site-header .brand-mark img {
    height: 42px !important;
    margin-left: 0 !important;        /* boşluk yok → tam lockup, kırpma yok */
    max-width: 100% !important;
  }
  /* lockup zaten "SmartPrep + slogan" içeriyor → "Mavate" etiketi gereksiz, gizle */
  .site-header .brand-mark .by { display: none; }

  .nav-actions { gap: var(--s-2); flex-shrink: 0; }
  /* B2B Giriş butonu header'da gizli (drawer alt CTA'ya taşındı) — taşmayı önler */
  .nav-actions a.btn-brand,
  .nav-actions .lang-switch-wrap + .btn { display: none; }

  /* Dil seçici birincil bir header kontrolü → mobilde ≥44px dokunma hedefi */
  .lang-switch-wrap .lang-current {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 360px) {
  .site-header .brand-mark img { height: 38px !important; }
}

/* ====================================================================
   3) GLOBAL MOBİL LAYOUT — çok sütunlu her grid tek sütuna iner
   Bilinen bileşenlerin mevcut kuralları zaten var; bu bir GÜVENLİK AĞI:
   custom sayfalardaki (hakkimizda/yaklasim/is-modelleri) elle yazılmış
   grid'ler de mobilde tek sütun olsun.
   ==================================================================== */
@media (max-width: 1023px) {
  /* inline style="grid-template-columns:..." ve util grid'ler */
  [style*="grid-template-columns"]:not(.models-strip):not(.nav-dropdown) {
    grid-template-columns: 1fr !important;
  }

  /* Tipografi: mobil okunabilirlik — gövde ≥16px garanti */
  body { font-size: var(--fs-base); }   /* 17px */
  /* R8 [[project_mobile_content_rules]]: editorial/lead masaüstü 19px (--fs-md) dar
     ekranda ~6 kelime/satır → proza paragrafları ekran-duvarı oluyor. Mobilde gövdeye
     yakın kompakt punto + sıkı satır arası: DEĞER/KİMLİK metni KORUNUR ama belirgin
     daha az dikey yer kaplar (daha okunur ritim). Masaüstü ≥1024 19px'te DOKUNULMAZ. */
  .lead, .editorial { font-size: var(--fs-base); line-height: 1.5; }
  /* Ardışık editorial paragrafları arası nefes mobilde fazla → sıkı, dengeli ritim */
  .editorial + .editorial, .lead + .editorial { margin-top: var(--s-3); }

  /* Bölüm boşlukları biraz daha sıkı (R9: masaüstü px'i mobile taşıma) */
  .section    { padding: var(--s-7) 0; }
  .section-sm { padding: var(--s-6) 0; }
  .section-lg { padding: var(--s-8) 0; }

  /* R9: Manifesto masaüstünde --s-11 (160px×2) dikey boşluk → mobilde dev karanlık
     void oluşturuyor. Mobilde kompakt + dengeli nefes. */
  .manifesto { padding: var(--s-8) 0; }

  /* R9: section-head başlık bloğu altı boşluğu mobilde fazla → makul akış */
  .section-head { margin-bottom: var(--s-5); }

  /* R9: ardışık section'lar arasında çift-padding birikimi yerine tek ritim.
     section-head içi lead paragrafı zaten ≥16px; sadece dikey ritmi sıkıyoruz. */
  .section-head h2 { margin-bottom: var(--s-3); }
}

/* ====================================================================
   4) HERO — metin + görsel üst üste yığılır, CTA tam genişlik
   ==================================================================== */
@media (max-width: 1023px) {
  .hero-grid,
  .hero-split,
  .hero-content-grid { grid-template-columns: 1fr !important; gap: var(--s-6); }

  .hero-visual,
  .hero-media,
  .hero-image { max-width: 100%; margin-inline: auto; }

  /* Hero metin hizası — mobilde sola yaslı, daha okunur */
  .hero-grid .hero-text,
  .hero-content { text-align: left; }

  /* R1/R2 [[project_mobile_content_rules]]: hero intro GÖVDE paragrafı mobilde
     KALDIR — dekoratif pazarlama prozası ekran duvarı yapıyor; BAŞLIK (h1) + CTA
     KALIR. Masaüstü ≥1024 DOKUNULMAZ (bu kural yalnız ≤1023). */
  .hero-cta-text p { display: none; }
  /* R1 KALDIR: uzun pazarlama prozası duvarlarını mobilde gizle — başlık + altındaki
     işlevsel kartlar mesajı taşır (daha az yazı, daha çok işlev). Masaüstü ≥1024 dokunulmaz. */
  .m-hide { display: none !important; }
  .hero-cta-text h1,
  .hero-cta-text h2 { margin-bottom: var(--s-2); }
  /* .wrap mobilde flex-direction:column → flex-basis ANA EKSENDE (yükseklik) olur;
     1 1 360px başlık altında ~300px hayalet boşluk yaratıyordu. Mobilde içerik
     yüksekliğine bırak. */
  .hero-cta-text { flex: 0 0 auto; }

  /* Hero CTA'lar tam genişlik buton, dikey yığılır */
  .hero-actions,
  .hero-cta,
  .hero-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    width: 100%;
  }
  .hero-actions .btn,
  .hero-cta .btn,
  .hero-cta-actions .btn { width: 100%; justify-content: center; min-height: 52px; }

  /* Hero metrik — 2'li grid */
  .hero-meta { grid-template-columns: 1fr 1fr !important; gap: var(--s-4); }

  /* İstatistik şeridi mobilde TEK SIRA + kompakt (Emrah): 3-4 öğe yanyana,
     devasa 2x2 yer kaplamaz. masaüstü ≥1024 DOKUNULMAZ. */
  .hero-stats-band .grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .hero-stats-band .item { flex: 1 1 0; min-width: 0; padding: var(--s-3) 3px !important; text-align: center;
    /* TUTARLI ayraç: yalnız öğeler arası ince dikey çizgi; alt çizgi/çift çizgi YOK.
       (components.css @720px'in 2x2 grid border-bottom + nth-odd border-right kuralı
       tek-sıra flex'te karışık/çift çizgi yaratıyordu — burada normalize edilir.) */
    border-bottom: 0 !important;
    border-right: 1px solid var(--c-line) !important;
  }
  .hero-stats-band .item:last-child { border-right: 0 !important; }
  .hero-stats-band .num { font-size: clamp(0.95rem, 4.4vw, 1.25rem) !important; line-height: 1.05; }
  /* Etiket küçük punto, dar kolonda 2 satıra sarabilir (kompakt) */
  .hero-stats-band .lbl {
    font-size: 0.56rem !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 3px;
    display: block;
  }
}

/* ====================================================================
   5) KART / GRID AKIŞI — tek sütun, tam genişlik
   ==================================================================== */
@media (max-width: 1023px) {
  .cat-grid,
  .category-grid,
  .alt-models-grid,
  .feature-grid,
  .card-grid,
  .stat-grid,
  .stats-grid,
  .value-grid,
  .team-grid,
  .pricing-grid,
  .logo-grid,
  .image-grid,
  .image-grid.cols-4 { grid-template-columns: 1fr !important; }

  /* 2'li kalmasında fayda olan kompakt gridler (ikon/sayı/marka) */
  .metric-grid,
  .kpi-grid,
  .brand-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s-3) !important;
    /* align-items:start → kartlar içerik-boyu olur; grid eşit-yükseklik dayatmaz →
       kart İÇİNDE gereksiz boşluk kalmaz (Emrah). */
    align-items: start !important; }

  /* Markalar kartları mobilde 2'li → küçük, KOMPAKT (Emrah): logo kompakt, gövde dar,
     açıklama 2 satır, kategori TEK satır, DETAY OKU altta ortada. */
  .brand-grid .brand-card { padding: 0 !important; }
  .brand-grid .brand-card .brand-logo { aspect-ratio: 16 / 8 !important; padding: var(--s-3) !important; }
  .brand-grid .brand-card .brand-logo img { max-height: 48px !important; }
  .brand-grid .brand-card .brand-body { padding: var(--s-3) !important; gap: 2px; }
  .brand-grid .brand-card h3,
  .brand-grid .brand-card strong { font-size: 0.82rem !important; line-height: 1.2; margin-bottom: 2px !important; }
  .brand-grid .brand-card p,
  .brand-grid .brand-card .brand-meta { font-size: 0.68rem !important; -webkit-line-clamp: 2; }
  /* Kart altı: kategori TEK satır (taşarsa … ), DETAY OKU altta ORTADA (Emrah). */
  .brand-grid .brand-foot { flex-direction: column !important; align-items: center !important;
    gap: 5px !important; text-align: center !important; margin-top: var(--s-3) !important;
    padding-top: var(--s-2) !important; }
  .brand-grid .brand-cat { font-size: 0.58rem !important; line-height: 1.3; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .brand-grid .brand-more { align-self: center !important; white-space: nowrap; font-size: 0.64rem !important; }

  /* TEKNİK GÜVENCE — mobilde 4 koca kutu alt alta DEĞİL; 2'li kompakt premium
     (tedarik inline ≤639 '1fr'ini !important ile ezeriz). Masaüstü dokunulmaz. */
  .guarantee-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s-3) !important; }
  .guarantee-card { padding: var(--s-4) var(--s-3) !important; }
  .guarantee-card .g-icon { width: 36px !important; height: 36px !important; margin-bottom: var(--s-3) !important; }
  .guarantee-card .g-icon svg { width: 18px !important; height: 18px !important; }
  .guarantee-card strong { font-size: 0.86rem !important; margin-bottom: 4px !important; }
  .guarantee-card p { font-size: 0.7rem !important; line-height: 1.4 !important; }

  /* Kartlar tam genişlik + içerik nefes alsın */
  .cat-tile, .alt-model-card, .category-card { width: 100%; }
}

/* ====================================================================
   6) MODELS-STRIP (Ana İşlerimiz) — AKTİF-MERKEZ KAYDIRMA KARUSELİ
   Ortadaki/aktif kart BÜYÜR ekranı domine eder; komşular küçük önizlemeye iner.
   Parmakla kaydırınca aktiflik geçer (eski ufalır, yeni büyür) → models-carousel.js
   (.is-active) + scroll-snap center. Kabında izole; sayfa kaymaz, scrollbar gizli.
   Masaüstü flex-hover deseni @media(hover:hover)'da → mobilde otomatik devre dışı.
   ==================================================================== */
@media (max-width: 1023px) {
  .models-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    background: transparent;          /* siyah --c-ink şerit zemini kaldırıldı (boşluk hissi) */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--s-3);
    /* İlk/son kart da ekran ortasına gelebilsin diye geniş yan iç boşluk */
    padding: var(--s-2) max(var(--s-4), calc((100vw - 78vw) / 2)) var(--s-3);
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
  }
  .models-strip::-webkit-scrollbar { display: none; }   /* WebKit */

  .models-strip .model-card {
    flex: 0 0 78vw;                   /* aktif kart genişliği; komşular yanda "peek" eder */
    max-width: 360px;
    width: auto;
    height: 300px;
    scroll-snap-align: center;        /* kart ekran ORTASINA otursun */
    border-right: 0 !important;
    border-radius: var(--r-lg);
    overflow: hidden;
    /* Pasif (komşu) durum: küçülmüş + soluk önizleme */
    transform: scale(0.86);
    opacity: 0.55;
    filter: saturate(0.7);
    transform-origin: center center;
    transition:
      transform 320ms cubic-bezier(0.32, 0.72, 0.36, 1),
      opacity 320ms ease,
      filter 320ms ease,
      box-shadow 320ms ease;
    box-shadow: 0 8px 24px rgba(20, 17, 13, 0.18);
    will-change: transform, opacity;
  }

  /* AKTİF (ortadaki) kart — büyür, ekranı domine eder, net */
  .models-strip .model-card.is-active {
    transform: scale(1);
    opacity: 1;
    filter: none;
    box-shadow: 0 18px 44px rgba(20, 17, 13, 0.30);
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
  }

  /* Pasif kartta zemin görseli hafif karartılır → aktif olan öne çıksın */
  .models-strip .model-card::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 35%, rgba(0,0,0,0.55) 100%);
  }
  .models-strip .model-card .model-card-bg { transform: none; }
  /* Ghost Kitchen kartı: mobil-özel görsel (/fotograflar/emrah/ghost-kitchen-mobile.jpg)
     repo'da TAKİPSİZ medya → 404 + aktif kart gri/boş görünüyordu (konsol hatası).
     Override KALDIRILDI: kart artık inline'daki TAKİP EDİLEN görseli (detay-p04-i01.png)
     kullanır; .model-card-bg cover+center ile kare karta temiz oturur, kesik yok. */

  /* Kart yüzü sade: başlık + CTA görünür; ara metinler gizli (R2) */
  .models-strip .model-card-subtitle,
  .models-strip .model-card-tagline,
  .models-strip .model-card-content p { display: none; }
  .models-strip .model-card-top { padding: var(--s-4) var(--s-4) var(--s-3); }
  .models-strip .model-card-content {
    transform: translateY(0); opacity: 1;
    padding: var(--s-4);
  }
  /* CTA yalnız aktif kartta belirgin; pasifte sadece başlık okunur */
  .models-strip .model-card-content .more {
    display: inline-flex;
    margin-top: var(--s-2);
    opacity: 0;
    transition: opacity 260ms ease;
  }
  .models-strip .model-card.is-active .model-card-content .more { opacity: 1; }

  /* JS yoksa (no-js) tüm kartlar okunur kalsın — graceful degradation */
  .models-strip:not(.has-active) .model-card {
    transform: scale(0.94);
    opacity: 0.9;
    filter: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .models-strip .model-card { transition: opacity 200ms ease; transform: scale(0.92); }
    .models-strip .model-card.is-active { transform: scale(0.92); }
  }
}

/* ====================================================================
   7) TABLOLAR — mobilde kart-listesi (yatay taşma yerine)
   Genel tablo: yatay kaydırılabilir konteyner; veri-tablosu blok-kart.
   ==================================================================== */
@media (max-width: 1023px) {
  /* Varsayılan: tabloyu yatay kaydırılabilir yap (taşma engellenir) */
  .table-scroll, .responsive-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* data-mobile-cards işaretli tablolar → satır = kart */
  table[data-mobile-cards] { border: 0; }
  table[data-mobile-cards] thead { position: absolute; left: -9999px; }
  table[data-mobile-cards] tr {
    display: block;
    margin-bottom: var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-2) var(--s-4);
    background: var(--c-paper);
  }
  table[data-mobile-cards] td {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line);
    text-align: right;
  }
  table[data-mobile-cards] td:last-child { border-bottom: 0; }
  table[data-mobile-cards] td::before {
    content: attr(data-label);
    font-weight: var(--fw-semibold);
    color: var(--c-ink-mute);
    text-align: left;
  }
}

/* ====================================================================
   8) CTA BANT / ZIGZAG / FOOTER — tek sütun, tam genişlik buton
   ==================================================================== */
@media (max-width: 1023px) {
  .cta-band,
  .cta-band-inner { grid-template-columns: 1fr !important; text-align: left; }
  .cta-band .btn, .cta-band-actions .btn { width: 100%; justify-content: center; min-height: 52px; }
  .cta-band-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); width: 100%; }

  .zigzag, .zigzag.flip { grid-template-columns: 1fr !important; gap: var(--s-5); }
  .zigzag.flip > .zigzag-text, .zigzag.flip > .zigzag-visual { order: unset; }

  .site-footer .footer-top { grid-template-columns: 1fr !important; gap: var(--s-6); }
  .site-footer .footer-bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
  /* Yasal link satırı: tek satıra sığmıyordu (KVKK soldan, katalog sağdan
     kesiliyordu) → sarmalı, ortalı, dokunma-dostu boşluklu */
  .site-footer .footer-bottom .legal {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-2);
    column-gap: var(--s-4);
    max-width: 100%;
  }
  .site-footer .footer-bottom .legal a { white-space: nowrap; padding: 4px 0; display: inline-block; }
}

/* ====================================================================
   9) FORM (iletişim vb.) — tek sütun, iOS zoom engelle (≥16px input)
   ==================================================================== */
@media (max-width: 1023px) {
  .form-grid, .contact-grid, .field-grid, .micro-grid { grid-template-columns: 1fr !important; gap: var(--s-4); }
  input, textarea, select { font-size: 16px; }   /* iOS auto-zoom engeli */
  /* tüm form alanları konteynerini aşmasın */
  input, textarea, select, .topic-pill, .micro-field { width: 100%; max-width: 100%; min-width: 0; }
  .form-actions .btn, form .btn[type="submit"] { width: 100%; justify-content: center; min-height: 52px; }

  /* GRID BLOWOUT FIX: çöken grid'lerin çocukları track'i aşmasın (min-width:auto → 0).
     İçerik genişliği yüzünden tek-sütun grid'in taşmasını engeller. */
  .contact-grid > *, .field-grid > *, .card-row > *,
  .contact-form, .contact-aside,
  [style*="grid-template-columns"] > * { min-width: 0; }
}

/* ====================================================================
   10) FLOATING / BACK-TO-TOP — drawer ve içerik üstünde sıkışmasın
   ==================================================================== */
@media (max-width: 1023px) {
  /* drawer açıkken alttaki yüzen aksiyonlar + AI sohbet balonu gizlenir
     (drawer içindeki İletişim/B2B CTA'yı kapatmasın) */
  body.nav-open .floating-actions,
  body.nav-open .ai-floating { display: none; }

  /* Yüzen sohbet balonu güvenli alan — içeriğe binmesin, iOS home-indicator boşluğu */
  .ai-floating,
  .floating-actions {
    bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)) !important;
    right: var(--s-4) !important;
  }
}

/* ====================================================================
   11) HERO — masaüstü banner mobilde de kullanılır (Emrah talebi)
   Ayrı mobil hero KALDIRILDI; AYNI SVG banner mobil genişliğe uyarlanır
   (içerik/görsel/metin masaüstüyle birebir aynı, sadece sığar).
   ==================================================================== */
@media (max-width: 1023px) {
  .hero-cover { background: var(--c-brand); }
  .hero-cover-img {
    width: 100%;
    height: auto;
    max-height: none;          /* tam banner görünür, kırpılmaz */
  }
}

/* ====================================================================
   12) TEDARİK KATEGORİLERİ — YATAY kaydırılabilir şerit (madde 6)
   Kart: FOTO BÜYÜK (üstte) + YAZI KÜÇÜK (başlık + İncele). Açıklama gizli.
   ==================================================================== */
@media (max-width: 1023px) {
  .image-grid.cols-4 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--s-3);
    margin: 0 0 var(--s-3) !important;
    padding: 0 0 var(--s-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .image-grid.cols-4::-webkit-scrollbar { display: none; }

  .image-grid .image-card {
    position: relative;
    flex: 0 0 64%;                 /* sonraki kart "peek" → kaydırılır ipucu */
    max-width: 280px;
    min-height: 0;
    flex-direction: column;        /* foto üstte, yazı altta */
    scroll-snap-align: start;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-paper);
    box-shadow: var(--sh-sm);
  }
  .image-grid .image-card-media {
    aspect-ratio: 4 / 3;           /* FOTO BÜYÜK */
    width: 100%; height: auto; margin: 0;
  }
  .image-grid .image-card-body {
    min-height: 0;                 /* YAZI KÜÇÜK */
    padding: var(--s-3) var(--s-4) var(--s-4);
    gap: 4px;
  }
  .image-grid .image-card-body .lbl { margin-bottom: 2px; }
  .image-grid .image-card-body h4 { font-size: var(--fs-md); margin: 0; line-height: 1.15; }
  .image-grid .image-card-body p { display: none; }      /* açıklama gizli — yazı alanı küçük */
  .image-grid .image-card-cta { margin-top: 6px; font-size: var(--fs-2xs); }
  .image-grid .image-card .tag-temp { font-size: 10px; padding: 3px 8px; }
}

/* ====================================================================
   13) AI CHIPS — eşit hücreli grid (madde 4: bunched/dengesiz değil)
   ==================================================================== */
@media (max-width: 1023px) {
  .ai-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  .ai-chip {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 10px 12px;
    line-height: 1.2;
  }
  .ai-chip:nth-child(5) { grid-column: 1 / -1; }   /* 5. öğe tam genişlik → 2x2 + 1 dengeli */
}

/* ====================================================================
   14) VİDEO POSTER — küçükken gömülü poster metni overlay ile çakışmasın
   (madde 5) Poster'ın metinsiz ÜST karesini göster.
   ==================================================================== */
@media (max-width: 1023px) {
  /* Mobilde iki video YANYANA + premium portre kart (Emrah). Tek-kolon stack yerine
     2 kolon; portre oran dar ekranda anlamlı yükseklik verir; oynat ortada büyük;
     başlık 2 satıra clamp'li; watermark + açıklama gizli → temiz, şık görsel. */
  .video-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s-3) !important;
  }
  .video-card {
    aspect-ratio: 1 / 1 !important;  /* kare — dikey poster'ın ortasındaki gömülü metni dışlar */
    border-radius: var(--r-lg) !important;
    box-shadow: 0 14px 34px -16px rgba(20, 17, 13, 0.55) !important;
  }
  /* Dikey poster'larda gömülü promo metni dar kare karta sığmıyor → mobil için
     temiz kare kırpımlar (şef, metinsiz) bg-image olarak; orijinal <img> gizli.
     Crop'lar: *-m.jpg (assets/img/video-posters). */
  .video-card-poster { display: none !important; }
  .video-card {
    background-size: cover !important;
    background-position: center !important;
  }
  .video-grid .video-card:nth-child(1) {
    background-image: url('../img/video-posters/smartprep-ekosistem-poster-m.jpg') !important;
  }
  .video-grid .video-card:nth-child(2) {
    background-image: url('../img/video-posters/akilli-uretim-poster-m.jpg') !important;
  }
  .video-card-watermark { display: none !important; }
  .video-card-body p { display: none !important; }
  /* Küçük portre kartta uzun başlık + poster'a gömülü metin = karmaşa. Premium/sade:
     başlığı gizle, kısa etiket chip'i bırak. Ne olduğu bölüm başlığında zaten yazıyor. */
  .video-card-body h4 { display: none !important; }
  .video-card::after {
    background: linear-gradient(180deg, rgba(20,17,13,0) 42%, rgba(20,17,13,0.55) 64%, rgba(20,17,13,0.92) 100%) !important;
  }
  /* Oynat tuşu ortada büyük cam buton (≤800 query sağ-üste taşımıştı → geri ortala) */
  .video-card-play {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 54px !important;
    height: 54px !important;
  }
  /* Etiket chip'i alt-sol, scrim üzerinde okunur */
  .video-card-body {
    padding: var(--s-4) !important;
  }
  .video-card-tag {
    font-size: 0.62rem !important;
    padding: 5px 11px !important;
    margin-bottom: 0 !important;
  }
}

/* Çok dar ekran (≤400) — oynat tuşunu ve dolguyu biraz sıkılaştır */
@media (max-width: 400px) {
  .video-card-play { width: 48px !important; height: 48px !important; }
  .video-card-body { padding: var(--s-3) !important; }
  .video-card-tag { font-size: 0.58rem !important; }
}