/* ============================================================
   ALO MATBAA - RESPONSIVE MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {

  /* ── YATAY MENÜLER GİZLE ── */
  #blue-nav-bar,
  #white-nav-bar { display: none !important; }

  /* ── BREADCRUMB: sticky H1 ── */
  .bg-gray-100.border-b.border-gray-200.mt-\[3px\].mb-\[3px\].min-h-\[45px\].py-3 {
    display: block !important;
    position: sticky !important; top: 0 !important; z-index: 50 !important;
    margin-top: 0 !important; margin-bottom: 2px !important;
    min-height: 38px !important; padding: 6px 0 !important;
    background: #f3f4f6 !important;
  }

  /* ── MAIN CONTAINER ── */
  main.max-w-\[1600px\].mx-auto.px-4.py-2.pb-12 {
    padding-left: 0 !important; padding-right: 0 !important;
    padding-top: 0 !important; padding-bottom: 7rem !important;
  }
  main.max-w-\[1600px\] .grid.grid-cols-1.lg\:grid-cols-12.gap-2 { gap: 0 !important; }

  /* ── SIDEBAR ── */
  .hidden.lg\:block.lg\:col-span-3.space-y-2 { display: none !important; }

  /* ── MOBILE REORDER (Galeri→Fiyat→Content) ── */
  .col-span-12.lg\:col-span-9.w-full {
    width: 100% !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  /* Mobil sıra: 1=Galeri, 2=Fiyat/Paket, 3=Content HTML */
  .col-span-12.lg\:col-span-9.w-full > .lg\:grid.lg\:grid-cols-12.lg\:gap-6 { order: 1 !important; width: 100% !important; }
  .col-span-12.lg\:col-span-9.w-full > .lg\:hidden.mb-2 { order: 2 !important; width: 100% !important; }
  .col-span-12.lg\:col-span-9.w-full > .mobile-content-html { order: 3 !important; width: 100% !important; }

  /* ── GALERİ ── */
  .product-gallery-layout { flex-direction: column !important; gap: 6px !important; }
  .product-main-media { order: 1 !important; border-radius: 1rem !important; }
  #mainMediaContainer.product-main-media {
    aspect-ratio: 1/1 !important; border-radius: 1rem !important; margin: 0 8px !important;
  }
  .product-thumb-rail {
    order: 2 !important; flex-direction: row !important;
    width: 100% !important; padding: 0 8px !important; gap: 6px !important;
  }
  .product-thumb-scroll {
    flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important;
    gap: 6px !important; padding-bottom: 4px !important; max-height: none !important; width: auto !important;
  }
  .product-thumb-item { width: 64px !important; min-width: 64px !important; height: 64px !important; border-radius: 12px !important; }
  .thumb-nav-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .product-main-arrow { width: 40px !important; height: 40px !important; }
  .product-main-arrow-left { left: 8px !important; }
  .product-main-arrow-right { right: 8px !important; }
  .lg\:hidden.mt-2.flex { display: none !important; }

  /* ── PRICE CARD ── */
  .lg\:hidden.mb-2 > .bg-white.rounded-\[2rem\] { border-radius: 1rem !important; margin: 0 8px !important; }
  .price-option-label-mobile { border-radius: 12px !important; padding: 10px 12px !important; }

  /* ── TAB SYSTEM ── */
  .bg-surface-light.dark\:bg-surface-dark.rounded-xl.border.border-gray-100 {
    border-radius: 1rem !important; margin: 0 8px !important;
  }
  .product-tab-btn {
    padding: 10px 12px !important; font-size: 9px !important;
    flex: 1 !important; text-align: center !important; white-space: nowrap !important;
  }
  .flex.flex-wrap.border-b.border-gray-100.bg-gray-50\/50 {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important; gap: 0 !important;
  }
  .flex.flex-wrap.border-b.border-gray-100.bg-gray-50\/50::-webkit-scrollbar { display: none !important; }

  /* ── RELATED PRODUCTS ── */
  .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-6.gap-2 {
    grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; padding: 0 8px !important;
  }
  .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 {
    grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; padding: 0 8px !important;
  }
  .mt-4 h3.text-2xl { padding: 0 8px !important; font-size: 1.25rem !important; }
  .mt-12.space-y-14 { margin-top: 1.5rem !important; }

  /* ── FOOTER ── */
  footer .grid.grid-cols-1.md\:grid-cols-4.gap-xl { grid-template-columns: repeat(2,1fr) !important; gap: 1rem !important; }

  /* ── STICKY BOTTOM BAR ── */
  #alo-mobile-sticky-bar {
    display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 90 !important; padding: 10px 12px !important;
    background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; border-top: 1px solid rgba(0,0,0,0.08) !important;
    gap: 10px !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
  }
  html.dark #alo-mobile-sticky-bar { background: rgba(30,41,59,0.9) !important; border-top-color: rgba(255,255,255,0.06) !important; }
  #alo-mobile-sticky-bar button,
  #alo-mobile-sticky-bar a {
    height: 52px !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 6px !important; transition: transform 0.15s ease !important;
  }
  #alo-mobile-sticky-bar button:active,
  #alo-mobile-sticky-bar a:active { transform: scale(0.96) !important; }
  #alo-mobile-sticky-bar .sticky-wa-btn { flex:1 !important; background:#00C853 !important; color:#fff !important; text-decoration:none !important; }
  #alo-mobile-sticky-bar .sticky-cart-btn { flex:1.5 !important; background:#FF6D00 !important; color:#fff !important; border:none !important; cursor:pointer !important; }

  /* ── MOBILE HEADER ── */
  #site-header .header-phone-bar .phone-text { font-size: 1rem !important; }
  #site-header .header-phone-bar .phone-icon { width: 2rem !important; height: 2rem !important; }
  #site-header .max-w-\[1440px\].mx-auto.px-4.py-4.flex {
    flex-direction: column !important; gap: 6px !important; padding: 8px 12px !important;
  }
  #site-header .relative.flex.justify-center.xl\:justify-start.xl\:flex-shrink-0.xl\:items-center.w-full.xl\:w-auto {
    width: 100% !important; display: flex !important; align-items: center !important;
    justify-content: center !important; position: relative !important;
  }
  #site-header button[onclick="toggleAlomatbaMobileMenu(true)"] {
    position: absolute !important; left: 0 !important; top: 50% !important;
    transform: translateY(-50%) !important; z-index: 30 !important;
  }

  /* Logo %200 */
  #site-header a img[alt="AloMatba.com"] { height: 30px !important; max-width: none !important; }

  #site-header .w-full.xl\:w-auto.flex.items-center.justify-center.xl\:justify-end.gap-2 {
    width: 100% !important; justify-content: flex-end !important; flex-shrink: 0 !important;
    order: 3 !important; padding-right: 0 !important;
  }

  /* Arama */
  #searchForm input.search-input-container { height: 48px !important; font-size: .875rem !important; }
  #searchForm button[type="submit"] { min-width: 48px !important; width: 48px !important; padding: 0 !important; }
  #searchForm button[type="submit"] span:last-child { display: none !important; }

  /* ── MISC ── */
  .rounded-xl.border.border-slate-100.overflow-hidden.bg-gradient-to-br {
    border-radius: 1rem !important; margin: 0 8px !important;
  }
  .mt-4 .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6.gap-2 { padding: 0 8px !important; }

  /* ── BREADCRUMB 3 SATIR ── */
  .bg-gray-100.border-b.border-gray-200.mt-\[3px\].mb-\[3px\].min-h-\[45px\].py-3 .max-w-\[1600px\].grid {
    display: flex !important; flex-direction: column !important; gap: 4px !important; align-items: center !important;
  }
  .bg-gray-100.border-b.border-gray-200.mt-\[3px\].mb-\[3px\].min-h-\[45px\].py-3 .max-w-\[1600px\].grid nav { justify-content: center !important; }
  .bg-gray-100.border-b.border-gray-200.mt-\[3px\].mb-\[3px\].min-h-\[45px\].py-3 .max-w-\[1600px\].grid .flex.items-center.justify-end { justify-content: center !important; }

  /* ── CONTENT HTML ── */
  .mobile-content-html {
    display: block !important; margin: 8px 8px !important; padding: 12px !important;
    background: #fff !important; border-radius: 1rem !important; border: 1px solid #e5e7eb !important;
  }
  .mobile-content-html .prose { font-size: 14px !important; line-height: 1.6 !important; }


  /* ==========================================================
     PRODUCT DETAIL - MOBİL NET SIRALAMA FIX
     Sıra: breadcrumb → H1 → sosyal → vitrin → fiyat → içerik
     ========================================================== */
  .product-detail-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    padding: 6px 0 !important;
    margin: 0 0 4px 0 !important;
  }

  .product-detail-banner-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .category-banner-breadcrumb {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .category-banner-breadcrumb ol {
    justify-content: center !important;
    max-height: 34px !important;
    overflow: hidden !important;
  }

  .product-detail-title {
    order: 2 !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: block !important;
    white-space: normal !important;
  }

  .product-social-links {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .col-span-12.lg\:col-span-9.w-full {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ══════════════════════════════════════════
     MOBİL 3 KATMAN: 1=Galeri  2=Fiyat  3=İçerik
     ══════════════════════════════════════════ */

  /* LAYER 1 - Galeri container: block, tam genişlik */
  .col-span-12.lg\:col-span-9.w-full > .lg\:grid.lg\:grid-cols-12.lg\:gap-6 {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Desktop sag fiyat kolonu mobilde gizli */
  .lg\:grid.lg\:grid-cols-12.lg\:gap-6 > .hidden.lg\:block.lg\:col-span-4 {
    display: none !important;
  }

  /* Galeri kolonu tam genislik */
  .lg\:grid.lg\:grid-cols-12.lg\:gap-6 > .lg\:col-span-8 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* LAYER 2 - Uretim Hizi + Paket Secimi */
  .col-span-12.lg\:col-span-9.w-full > .lg\:hidden.mb-2 {
    display: block !important;
    order: 2 !important;
    width: 100% !important;
  }

  /* LAYER 3 - Content HTML */
  .mobile-content-html {
    order: 3 !important;
    width: 100% !important;
  }

  /* Mobilde tab bloğu içeriği fiyatın üstüne taşıyordu; içerik mobile-content-html ile fiyat altından geliyor. */
  .product-tabs-wrapper {
    display: none !important;
  }

  /* Galeri mobilde ilk ana blok olsun */
  #productMobileGalleryFocus,
  .product-gallery-layout {
    scroll-margin-top: 170px !important;
  }

  /* Mobilde galeri altındaki ikinci CTA görünmesin; sabit alt bar kullanılacak. */
  .lg\:hidden.mt-2.flex.flex-col.sm\:flex-row.gap-1,
  .lg\:hidden.mt-2.flex {
    display: none !important;
  }

  /* Mobil logo: yaklaşık %180 büyüt, desktop/tablet etkilenmez. */
  #site-header a img[alt="AloMatba.com"],
  #site-header .site-logo img,
  #site-header .header-logo img,
  #site-header .mobile-logo img {
    transform: scale(1.8) !important;
    transform-origin: center center !important;
    max-width: none !important;
  }

  /* Büyük logo için header alanının ezilmesini engelle */
  #site-header .relative.flex.justify-center,
  #site-header .xl\:items-center {
    min-height: 92px !important;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

}