/* ============================================================
   ALO MATBAA - RESPONSIVE TABLET (768px - 1023px)
   Google Stitch tablet/PC tasarımı uyarlaması
   Mevcut Tailwind class'larına override olarak çalışır
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* ── MAIN CONTAINER ── */
  main.max-w-\[1600px\].mx-auto.px-4.py-2.pb-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 6rem !important;
  }

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

  /* ── FULL WIDTH CONTENT ── */
  .col-span-12.lg\:col-span-9.w-full {
    width: 100% !important;
    padding: 0 !important;
  }

  /* ── HIDE MOBILE PRICE CARD ── */
  .lg\:hidden.mb-2 {
    display: none !important;
  }

  /* ── 2-COLUMN PRODUCT LAYOUT ── */
  /* Galeri sol, sipariş paneli sağ */
  .lg\:grid.lg\:grid-cols-12.lg\:gap-6 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* override lg:grid-cols-12 */
    gap: 16px !important;
  }

  /* Sol: Galeri */
  .lg\:col-span-8.space-y-2 {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  /* Sağ: Sipariş paneli (desktop sidebar) */
  .hidden.lg\:block.lg\:col-span-4.mt-2.lg\:mt-0 {
    display: block !important;
    grid-column: span 1 !important;
    width: 100% !important;
  }

  .order-sidebar-card .sticky.top-28.space-y-0 {
    position: sticky !important;
    top: 100px !important;
  }

  /* ── PRODUCT GALLERY ── */
  .product-gallery-layout {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .product-main-media {
    order: 1 !important;
    border-radius: 1.25rem !important;
  }

  #mainMediaContainer.product-main-media {
    aspect-ratio: 4 / 3 !important;
  }

  .product-thumb-rail {
    order: 2 !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .product-thumb-scroll {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    max-height: none !important;
    width: auto !important;
  }

  .product-thumb-item {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 14px !important;
  }

  .thumb-nav-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .product-main-arrow {
    width: 44px !important;
    height: 44px !important;
  }

  .product-main-arrow-left { left: 12px !important; }
  .product-main-arrow-right { right: 12px !important; }

  /* Galeri altı CTA - tablet'te gizle (sidebar'da var) */
  .lg\:hidden.mt-2.flex.flex-col.sm\:flex-row.gap-1 {
    display: none !important;
  }

  /* ── HEADER ARAMA ── */
  /* Arama kutusu + ARA butonu tam görünür */
  #searchForm input.search-input-container {
    height: 52px !important;
    font-size: 0.9375rem !important;
  }

  #searchForm button[type="submit"] {
    min-width: 104px !important;
    padding: 0 20px !important;
  }

  /* ── BLUE NAV ── */
  #blue-nav-bar .blue-nav-container {
    height: 48px !important;
  }

  #primary-nav-links {
    font-size: 11px !important;
    gap: 4px !important;
  }

  /* ── WHITE BAR NAV ── */
  #white-nav-bar .white-bar-nav {
    gap: 16px !important;
    padding: 6px 12px !important;
  }

  /* ── PRICE/PACKAGE SIDEBAR ── */
  .order-sidebar-card {
    border-radius: 1.25rem !important;
  }

  .order-sidebar-card .p-3 {
    padding: 14px !important;
  }

  /* Price display */
  .price-display {
    font-size: 1rem !important;
  }

  /* ── TAB SYSTEM ── */
  .product-tab-btn {
    padding: 10px 16px !important;
    font-size: 10px !important;
  }

  /* ── TRUST BADGES ── */
  .bg-gray-50.dark\:bg-slate-900\/50.p-2.border-t {
    display: flex !important;
    justify-content: space-around !important;
    padding: 10px 8px !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(3, 1fr) !important;
    gap: 10px !important;
  }

  /* GALLERY GRID */
  .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

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

  /* ── MOBILE MENU HIDE ── */
  #am-mobile-menu-overlay,
  #am-mobile-menu-sidebar {
    display: none !important;
  }

  /* ── BREADCRUMB ── */
  .bg-gray-100.dark\:bg-slate-800\/80.border-b.border-gray-200.mt-\[3px\].mb-\[3px\].min-h-\[45px\].py-3 {
    min-height: 40px !important;
    padding: 8px 0 !important;
  }

  .bg-gray-100.dark\:bg-slate-800\/80 .max-w-\[1600px\].mx-auto.px-4.w-full.grid {
    gap: 8px !important;
  }

  /* Logo */
  #site-header a img[alt="AloMatba.com"] {
    height: 50px !important;
  }

  /* Header container */
  #site-header .max-w-\[1440px\].mx-auto.px-4.sm\:px-6.lg\:px-8.py-4.lg\:py-3.flex.flex-col.xl\:flex-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  /* Arama genişliği */
  #searchForm {
    flex: 1 !important;
    max-width: 400px !important;
  }

  /* Sepet wrapper */
  .w-full.xl\:w-auto.flex.items-center.justify-center.xl\:justify-end.gap-2.xl\:gap-3 {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Hide 'ARA' text on tablet search but keep the magnifier */
  #searchForm button[type="submit"] span.ml-2.font-bold {
    display: inline !important;
  }

  /* ── CTA BUTTONS IN SIDEBAR ── */
  .space-y-2.\!mt-2 button,
  .space-y-2.\!mt-2 a {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* WhatsApp button */
  a.w-full.bg-emerald-500 {
    padding: 12px 16px !important;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {

  html, body {
    overflow-x: hidden !important;
  }

  main.pd-main-page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  main.pd-main-page > .flex.md\:grid.md\:grid-cols-12.md\:gap-6 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 14px !important;
    align-items: start !important;
  }

  main.pd-main-page .md\:col-span-7 {
    grid-column: 1 / 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  main.pd-main-page .md\:col-span-5 {
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
  }

  #mainMediaContainer {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    max-height: 420px !important;
  }

  #mainMediaStage {
    padding: 10px !important;
  }

  .product-thumb-rail {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    min-width: 0 !important;
  }

  .product-thumb-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-direction: row !important;
  }

  .product-thumb-item {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  main.pd-main-page > .flex.md\:grid.md\:grid-cols-12.md\:gap-6 {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 10px !important;
  }

  .product-thumb-item {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
  }
}