/* ============================================
   MOBILE RESPONSIVE — JavasMedia
   Dipakai bersama oleh semua halaman.
   Ubah di sini = berubah di semua halaman.
   ============================================ */

@media (max-width: 768px) {

  .page { width: 100%; overflow-x: hidden; }

  /* ===== HERO SLIDER ===== */
  .hero-wrap {
    width: 100% !important;
    padding: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 63px !important;   /* jarak hero ke kartu sub-campaign (target: 18px visual) - disesuaikan krn kartu dikecilkan lagi */
    box-sizing: border-box;
  }
  .slide-img { width: 100% !important; }
  #sliderDots .dot { width: 6.3px !important; height: 6.3px !important; } /* dikecilkan 30% dari 9px - kegedean di mobile */

  /* ===== SUB CAMPAIGN =====
     bg2 pakai aspect-ratio asli 2879/928 supaya TIDAK terpotong.
     Kartu di-straddle (setengah keluar) di batas atas bg2. */
  .campaign-about-wrap { width: 100%; display: block !important; }

  .sub-section {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2879 / 928 !important;
    margin-top: 0 !important;
    margin-bottom: -6px !important;   /* negatif = About Us menindih bg2 sedikit */
  }

  .sub-bg {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .sub-grid {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: flex-start !important;   /* diperbesar, gak muat 4 - jadi scroll kanan-kiri, bukan center */
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sub-grid::-webkit-scrollbar { display: none; }

  /* Kartu "jendela ditumpuk" diskalakan turun, tapi tetap mempertahankan
     detail yang sama seperti desktop (tombol, tumpukan jendela, scrollbar)
     - cuma panah & angka di scrollbar yang dibuang karena teksnya kekecilan
     buat kebaca di ukuran mobile. */
  .sub-card { width: 92px !important; flex-shrink: 0; }   /* +35% dari 68px - kepotong/scroll kanan-kiri, cuma ~3.3 kartu keliatan awal */
  /* Garis hitam 0.8px - sesuai permintaan Amir, lebih tipis lagi dari 1.5px. */
  .sub-card .win-layer { border-width: 0.8px !important; border-radius: 4px !important; }
  .sub-card .win-ghost-2 { transform: translate(5px, -5px) !important; }
  .sub-card .win-ghost-1 { transform: translate(2.5px, -2.5px) !important; }
  .sub-card .win-ghost .win-titlebar-strip { height: 5px !important; border-bottom-width: 1.5px !important; }
  .sub-card .win-main { box-shadow: 2px 2px 0 #1a1a1a !important; }
  .sub-card .win-titlebar { height: 8px !important; border-bottom-width: 1.5px !important; padding: 0 3px !important; gap: 2px !important; }
  /* Tombol asli 9px kalau diperkecil proporsional (~3px) jadi cuma titik
     buram - dikasih ukuran minimum 5px biar tetap kebaca sebagai tombol. */
  .sub-card .win-btn { width: 5px !important; height: 5px !important; border-width: 1px !important; }
  .sub-card .win-scrollbar { width: 6px !important; border-left-width: 1.5px !important; }
  .sub-card .win-arrow { display: none !important; }
  .sub-card .win-thumb { border-width: 1px !important; }
  .sub-card .win-label {
    font-size: 6px !important;
    padding: 2px 3px !important;
    left: 2px !important; right: 2px !important; bottom: 2px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ===== ABOUT US =====
     Posisi normal (mengikuti urutan HTML), BUKAN absolute.
     PENTING: reset top/left/transform bawaan desktop, kalau tidak
     kotak akan melenceng jauh ke bawah. */
  .about-box-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 0 16px !important;
    margin: 0 0 -6px !important;   /* negatif = menindih bg3 sedikit */
    box-sizing: border-box;
    width: 100%;
    z-index: 5;
  }
  .about-box {
    padding: 6px 16px 8px !important;   /* dikecilkan supaya kotak lebih pendek (jarak bg2->bg3 turun 25%) */
    border-radius: 14px !important;
    background: rgba(255,255,255,0.5) !important;
  }
  .about-title { font-size: 14px !important; margin-bottom: 2px !important; }
  .about-text  { font-size: 10px !important; line-height: 1.25 !important; }   /* font tetap 10px, cuma jarak antar baris dirapatkan */

  /* ===== WORKSHOP PHOTO (bg3) ===== */
  .workshop-photo {
    width: 100% !important;
    height: 120px !important;
    margin-top: 0 !important;
  }

  /* ===== BRAND PARTNER ===== */
  .brand-section {
    width: 100% !important;
    padding: 20px 16px !important;
    min-height: auto !important;
    box-sizing: border-box;
  }
  .brand-overlay {
    left: 14px !important; right: 14px !important;
    top: 14px !important; bottom: 14px !important;   /* disamakan - dulu bawah cuma 6px, sekarang 4 sisi sama */
  }
  .brand-title { font-size: 15px !important; padding-top: 14px !important; margin-bottom: 6px !important; }
  .brand-desc  { font-size: 10px !important; line-height: 1.5 !important; margin-bottom: 18px !important; padding: 0 10px !important; }
  .brand-content { padding: 0 10px !important; box-sizing: border-box; }
  /* Balik ke 6 kolom x 3 baris (18 logo) - 9 kolom kemarin kegedean
     kanan-kiri. Kotak diperkecil biar tetap ada jarak napas ke overlay. */
  .logo-grid { grid-template-columns: repeat(6, 44px) !important; justify-content: center !important; gap: 8px !important; margin-bottom: 10px !important; }
  .logo-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 6px !important;
    border-radius: 7px !important;
  }

  /* ===== NEW ARRIVALS ===== */
  .arrivals-section {
    width: 100% !important;
    flex-wrap: wrap !important;
    padding: 20px 32px 28px !important;
    gap: 22px !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
  .arrival-item { width: calc(50% - 11px) !important; }
  .arrival-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Label New Arrival diskalakan turun ~52% dari ukuran desktop, ngikutin
     rasio kotak foto yang juga menyusut di mobile. */
  .arrival-badge { width: 78% !important; margin-bottom: -7px !important; border-width: 2px !important; box-shadow: 2px 2px 0 #1a1a1a !important; }
  .arrival-badge-bar { height: 11px !important; border-bottom-width: 2px !important; gap: 3px !important; padding: 0 5px !important; }
  .arrival-dot { width: 5px !important; height: 5px !important; border-width: 1px !important; }
  .arrival-badge-label { font-size: 11px !important; padding: 5px 6px !important; }

  /* ===== TESTIMONI ===== */
  .testi-section { width: 100% !important; padding: 12px 10px !important; box-sizing: border-box; }
  .testi-section h2 { font-size: 11px !important; }
  .testi-section > p { font-size: 7.5px !important; margin-bottom: 10px !important; }
  .testi-card {
    min-width: 38vw !important;
    max-width: 38vw !important;
    padding: 8px !important;
    border-radius: 6px !important;
  }
  .testi-card p { font-size: 8.5px !important; line-height: 1.4 !important; margin-bottom: 6px !important; }
  .testi-card > div:first-child span { font-size: 8px !important; }
  .testi-card div[style*="width:40px"] { width: 18px !important; height: 18px !important; font-size: 7px !important; }
  .testi-card div[style*="font-weight:700;font-size:13px"] { font-size: 8px !important; }
  .testi-card div[style*="font-size:11px;color:#999"] { font-size: 6.5px !important; }
  .testi-arrow { display: none !important; }

  /* ===== CTA BANNER ===== */
  .cta-banner {
    width: 100% !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    box-sizing: border-box;
  }
  .cta-banner h2 { font-size: 12.5px !important; margin-bottom: 3px !important; line-height: 1.2 !important; }
  .cta-banner p { max-width: 100% !important; font-size: 9px !important; line-height: 1.4 !important; }
  .cta-banner a[href*="wa.me"] { padding: 7px 16px !important; font-size: 9.5px !important; }
  .cta-banner p[style*="margin-top:12px"] { margin-top: 6px !important; font-size: 7.5px !important; }

  /* ===== FOOTER ===== */
  .footer-logo { height: 56px !important; margin-bottom: 10px !important; }
  .footer-info { font-size: 10.5px !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
  .social-icon { width: 24px !important; height: 24px !important; }
  .social-icon img { width: 12px !important; height: 12px !important; }
  .footer-main { grid-template-columns: 1fr !important; padding: 24px 20px 8px !important; gap: 0 !important; }
  .footer-newsletter { padding: 0 20px 20px !important; }

  /* Footer link SHOP/HELP/COMPANY jadi accordion (hemat ruang) */
  .footer-col { border-bottom: 1px solid #1f1f1f; padding: 12px 0 !important; }
  .footer-col:first-child { border-top: 1px solid #1f1f1f; }
  .footer-col h4 {
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer;
  }
  .footer-col h4::after {
    content: '+';
    font-size: 13px;
    color: #777;
    font-weight: 400;
  }
  .footer-col h4.open::after { content: '−'; }
  .footer-col-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .footer-col-links.open { max-height: 300px; margin-top: 10px; }
  .footer-col-links a { margin-bottom: 8px !important; }

  /* ===== FLOATING WHATSAPP ===== */
  .floating-wa {
    width: 38px !important;
    height: 38px !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  /* ============================================
     HALAMAN PROMO (promo.html)
     ============================================ */

  /* ---- Hero promo ---- */
  .hero-promo {
    padding: 24px 16px !important;
    min-height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .hero-badge { font-size: 8px !important; padding: 4px 10px !important; margin-bottom: 10px !important; }
  .hero-title { font-size: 34px !important; letter-spacing: -1px !important; margin-bottom: 4px !important; }
  .hero-desc { font-size: 11px !important; max-width: 100% !important; margin: 10px 0 16px !important; }
  .hero-btns { flex-wrap: wrap !important; gap: 8px !important; }
  .btn-primary, .btn-secondary { font-size: 9.5px !important; padding: 10px 16px !important; }
  .countdown { text-align: left !important; }
  .countdown-label { font-size: 8px !important; margin-bottom: 8px !important; }
  .countdown-grid { gap: 6px !important; }
  .countdown-box { width: 52px !important; height: 52px !important; }
  .countdown-num { font-size: 18px !important; }
  .countdown-unit { font-size: 6.5px !important; margin-top: 1px !important; }
  .countdown-sep { font-size: 16px !important; margin-bottom: 10px !important; }

  /* ---- Voucher strip (dikecilkan - kartu 220px->160px kegedean, sekarang
     2 kartu lebih pas kelihatan sekaligus di layar 375px) ---- */
  .voucher-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .voucher-strip-label { font-size: 9px !important; }
  .voucher-list { width: 100% !important; gap: 8px !important; padding-bottom: 4px !important; }
  .voucher-card { min-width: 160px !important; padding: 8px 10px !important; gap: 8px !important; }
  .voucher-disc-num { font-size: 15px !important; }
  .voucher-disc-off { font-size: 7px !important; }
  .voucher-title { font-size: 9px !important; max-width: 130px !important; }
  .voucher-code { font-size: 9px !important; padding: 2px 6px !important; }
  .voucher-exp { font-size: 7px !important; }

  /* ---- Produk promo ---- */
  .products-section { padding: 24px 16px !important; }
  .section-header { margin-bottom: 16px !important; }
  .section-title-bar { width: 4px !important; height: 18px !important; margin-right: 10px !important; }
  .section-title-text { font-size: 15px !important; }
  .see-all { font-size: 10px !important; }

  .product-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .product-card { border-width: 1.5px !important; border-top-width: 3px !important; box-shadow: 2px 2px 0 #1a1a1a !important; }
  .product-badge { font-size: 8px !important; padding: 2px 6px !important; top: 6px !important; right: 6px !important; }
  .product-img { font-size: 30px !important; }
  .product-info { padding: 8px 8px 10px !important; }
  .product-cat { font-size: 6px !important; padding: 2px 5px !important; margin-bottom: 5px !important; }
  .product-name { font-size: 9px !important; margin-bottom: 5px !important; line-height: 1.25 !important; }
  /* Harga ditumpuk (bukan sejajar) supaya harga baru tidak kepotong kalau nominalnya panjang */
  .product-price { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; }
  .price-old { font-size: 7.5px !important; }
  .price-new { font-size: 11px !important; }

  /* Kartu ke-9 (placeholder) cuma tampil di mobile, biar grid 3x3 genap */
  .product-card-placeholder { display: block !important; }

  /* ---- Benefit strip ---- */
  .benefit-strip { flex-direction: column !important; padding: 20px 16px !important; gap: 16px !important; }
  .benefit-item { width: 100% !important; }
  .benefit-icon-wrap { width: 44px !important; height: 44px !important; font-size: 16px !important; flex-shrink: 0; }
  .benefit-icon-wrap img { width: 34px !important; height: 34px !important; }
  .icon-produksi img, .icon-kirim img { width: 54px !important; height: 54px !important; }
  .benefit-title { font-size: 11px !important; }
  .benefit-desc { font-size: 9px !important; }
  .benefit-divider { display: none !important; }

  /* ============================================
     HALAMAN LOCATION (location.html)
     Disusun ulang beneran (bukan cuma diperkecil dari desktop)
     ============================================ */

  /* ---- Hero (teks di kiri, globe di kanan, sejajar) ---- */
  .hero {
    padding: 20px 16px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .hero-text { flex: 1 !important; min-width: 0 !important; }
  .hero-tag { font-size: 7px !important; padding: 3px 8px !important; margin-bottom: 8px !important; }
  .hero-title { font-size: 24px !important; margin-bottom: 6px !important; letter-spacing: -0.5px !important; }
  .hero-subtitle { font-size: 8px !important; margin-bottom: 10px !important; }
  .hero-tags { flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 0 !important; }
  .hero-tag-item { font-size: 7px !important; padding: 3px 8px !important; }
  .compass-directions {
    position: static !important;
    right: auto !important; top: auto !important; transform: none !important;
    width: 112px !important; height: 112px !important;
    margin: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
  }

  /* ---- Marquee ---- */
  .marquee-section { padding: 8px 0 !important; }
  .marquee-item { font-size: 7px !important; padding: 0 8px !important; gap: 5px !important; }
  .marquee-dot { width: 3px !important; height: 3px !important; }

  /* ---- Maps + Info ---- */
  .maps-section { grid-template-columns: 1fr !important; padding: 24px 16px !important; gap: 20px !important; }
  .maps-title-tag { font-size: 9px !important; padding: 4px 10px !important; }
  .maps-embed { height: 220px !important; }
  .info-card { padding: 16px !important; }
  .info-section-title { font-size: 9px !important; }
  .info-row { font-size: 11px !important; }
  .social-grid { gap: 6px !important; }
  .social-btn { font-size: 10px !important; padding: 6px 10px !important; }

  /* ---- Icon strip: pindah ke antara peta & alamat (pakai salinan khusus mobile,
     lihat penjelasan di location.html - bukan trik CSS order karena pernah tidak
     reliable di proyek ini) ---- */
  .icon-strip-desktop-copy { display: none !important; }
  .icon-strip-mobile-copy { display: flex !important; }
  .icon-strip { flex-direction: column !important; padding: 16px 0 !important; gap: 0 !important; }
  .icon-strip > div:not(.icon-strip-icons) { display: none !important; }   /* label "WORKSHOP · SBY" & no. telp disembunyikan, sudah ada di header/footer */
  .icon-strip-icons { gap: 14px !important; }
  .icon-circle { width: 44px !important; height: 44px !important; }
  .icon-circle img { width: 44px !important; height: 44px !important; }
  .icon-circle.icon-strip-tv img { width: 48px !important; height: 48px !important; }
  .strip-footer { display: none !important; }   /* teks "HOUSE OF CUSTOMIZE (c) 2018" nempel di bawah icon strip versi desktop, disembunyikan di mobile */

  /* ---- Cara Ke Sini (diperkecil) ---- */
  .cara-section { padding: 20px 16px !important; }
  .cara-header { margin-bottom: 12px !important; }
  .cara-title { font-size: 11px !important; }
  .cara-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cara-card { padding: 12px !important; }
  .cara-number { font-size: 18px !important; top: 10px !important; right: 12px !important; }
  .cara-icon { margin-bottom: 6px !important; }
  .cara-icon img { width: 26px !important; height: 26px !important; }
  .cara-icon.icon-cara-mobil img { width: 32px !important; height: 32px !important; }
  .cara-card-title { font-size: 10px !important; margin-bottom: 5px !important; }
  .cara-card-text { font-size: 9px !important; line-height: 1.5 !important; }
  .stars-divider { font-size: 7px !important; letter-spacing: 2px !important; padding: 8px !important; }

  /* ---- CTA WhatsApp ---- */
  .cta-section {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 16px 24px !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .cta-title { font-size: 22px !important; }
  .cta-desc { font-size: 10px !important; max-width: 100% !important; }
  .cta-btn { font-size: 10px !important; padding: 10px 20px !important; width: 100%; text-align: center; box-sizing: border-box; }

  /* ============================================
     HALAMAN KATALOG (katalog.html)
     Kartu produk pakai class sama persis dengan promo.html,
     jadi otomatis ikut gaya yang sudah diatur di HALAMAN PROMO
     di atas (badge, harga ditumpuk, dll) - di sini cuma atur
     layout khusus katalog: sidebar, sort bar, jumlah kolom grid.
     ============================================ */

  .breadcrumb { padding: 20px 16px 8px !important; font-size: 9px !important; }

  /* ---- Sidebar desktop disembunyikan total di mobile. Isinya (filter
     kategori + 2 banner promo) dipakai lagi lewat SALINAN markup terpisah
     di bawah - filter jadi chip di atas grid, banner pindah ke bawah grid.
     Ini bukan CSS order (sudah pernah gak reliable di proyek ini), tapi
     dua blok HTML berbeda yang di-toggle display, sama pola dengan
     icon-strip di location.html. Produk jadi lega penuh lebar layar.
     Di-scope ke .katalog-layout - articles.html juga punya class
     ".sidebar" tapi itu beda elemen (kolom sidebar artikel) yang
     harus tetap tampil, bukan disembunyikan. ---- */
  .katalog-layout .sidebar { display: none !important; }

  .katalog-layout { padding: 0 16px 24px !important; }
  .katalog-main { padding-top: 12px !important; width: 100% !important; }

  /* ---- Filter kategori (gaya sama persis kayak tab kategori di articles.html:
     bar gelap full lebar, teks uppercase, aktif = kuning + garis bawah kuning),
     bisa digeser ke samping karena kategorinya banyak. ---- */
  .cat-chips-mobile-wrap {
    display: block !important;
    background: #1a1a1a !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .cat-chips-mobile-wrap::-webkit-scrollbar { display: none !important; height: 0 !important; }
  .cat-chips-mobile { display: flex !important; gap: 0 !important; width: max-content; padding: 0 16px !important; }
  .cat-chip {
    flex-shrink: 0;
    padding: 12px 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
  }
  .cat-chip.active { color: #ffc107; border-bottom: 2px solid #ffc107; }

  /* ---- Sort bar ---- */
  .sort-bar { flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 14px !important; }
  .sort-label { font-size: 9px !important; }
  .sort-btn { font-size: 9px !important; padding: 6px 10px !important; }
  .search-katalog { margin-left: 0 !important; width: 100% !important; }
  .search-katalog input { width: 100% !important; font-size: 11px !important; }

  /* Produk 2 kolom sebaris, sekarang full lebar layar (sidebar sudah hilang) */
  .katalog-main .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ---- Tampilkan 16 produk (8 baris) dulu, sisanya lewat tombol ---- */
  .katalog-main .product-grid .product-card:nth-child(n+17) { display: none !important; }
  .katalog-main .product-grid.show-all .product-card:nth-child(n+17) { display: block !important; }

  .load-more-wrap { display: flex !important; justify-content: center !important; margin-top: 18px !important; }
  .load-more-btn {
    background: #1a1a1a !important;
    color: white !important;
    border: 2px solid #1a1a1a !important;
    padding: 12px 18px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    text-align: center !important;
    box-shadow: 3px 3px 0 #e85d04 !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
  }
  .load-more-btn:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #e85d04 !important;
  }
  .load-more-plus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    border: 1.5px solid white !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* ---- Banner promo (salinan mobile), tampil berdampingan di bawah grid produk ---- */
  .promo-banners-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .promo-banners-mobile .promo-banner-sidebar { padding: 6px !important; margin-bottom: 0 !important; }
  .promo-banners-mobile .promo-banner-label { font-size: 4px !important; margin-bottom: 1px !important; }
  .promo-banners-mobile .promo-banner-disc { font-size: 13px !important; margin-bottom: 2px !important; }
  .promo-banners-mobile .promo-banner-disc span { font-size: 7px !important; }
  .promo-banners-mobile .promo-banner-desc { font-size: 4.5px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .promo-banners-mobile .promo-banner-code { font-size: 5px !important; padding: 1px 4px !important; margin-bottom: 4px !important; letter-spacing: 0.3px !important; }
  .promo-banners-mobile .promo-banner-btn { font-size: 4.5px !important; padding: 4px 3px !important; letter-spacing: 0.2px !important; }
  .promo-banners-mobile .arrival-banner-sidebar { padding: 7px 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .promo-banners-mobile .arrival-banner-text { font-size: 11px !important; letter-spacing: -0.3px !important; }

  /* ============================================
     HALAMAN DETAIL PRODUK (detail-produk.html)
     Foto & info ditumpuk (bukan 2 kolom), produk terkait
     pakai kartu yang sama gayanya dengan promo/katalog.
     ============================================ */

  .detail-layout { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 16px 32px !important; }

  .foto-main { font-size: 90px !important; margin-bottom: 10px !important; }
  .foto-badge { font-size: 10px !important; padding: 4px 9px !important; top: 10px !important; right: 10px !important; }
  .foto-thumbs { gap: 6px !important; }
  .foto-thumb { width: 70px !important; height: 70px !important; font-size: 22px !important; }

  /* Benefit mini "produksi cepat" balik ke posisi semula (kolom kanan,
     di bawah qty) di mobile - susunan geser ke kiri di bawah foto itu
     cuma untuk desktop. Lihat penjelasan di detail-produk.html. */
  .benefit-mini-desktop-copy { display: none !important; }
  .benefit-mini-mobile-copy { display: grid !important; }

  .info-section { padding-top: 0 !important; }
  .product-cat-badge { font-size: 8px !important; padding: 4px 10px !important; margin-bottom: 10px !important; }
  .product-title { font-size: 19.8px !important; margin-bottom: 10px !important; }   /* dikecilkan 10% dari 22px */
  .rating-row { gap: 8px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
  .stars { font-size: 13px !important; }
  .rating-count, .rating-sold { font-size: 10px !important; }

  .price-section { padding: 12px 14px !important; margin-bottom: 16px !important; }
  .price-section .price-old { font-size: 11px !important; }
  .price-section .price-new { font-size: 26px !important; }
  .price-note { font-size: 9px !important; }

  .varian-section { margin-bottom: 16px !important; }
  .varian-label { font-size: 9px !important; margin-bottom: 8px !important; }
  .varian-btn { font-size: 10px !important; padding: 6px 12px !important; }

  .qty-section { gap: 10px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; }
  .qty-label { font-size: 9px !important; }
  .qty-btn { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  .qty-num { width: 40px !important; height: 30px !important; font-size: 12px !important; }
  .qty-note { font-size: 9px !important; width: 100%; }

  /* Dikecilkan lagi 20% (padding 12->9.5px, dst) - masih kegedean dibanding elemen lain */
  .benefit-mini { padding: 9.5px !important; gap: 3px !important; margin-bottom: 16px !important; }
  .benefit-mini-icon { height: 16px !important; }
  .benefit-mini-icon img { width: 14.5px !important; height: 14.5px !important; }
  .benefit-mini-icon.icon-produksi img, .benefit-mini-icon.icon-kirim img { width: 22.5px !important; height: 22.5px !important; }
  .benefit-mini-title { font-size: 7px !important; }
  .benefit-mini-desc { font-size: 6.5px !important; }

  .cta-group { gap: 10px !important; margin-bottom: 20px !important; }
  /* Tombol keranjang/WA/kembali ke katalog dikecilkan 30% */
  .btn-cart-detail { font-size: 10.5px !important; padding: 12px 22px !important; border-width: 1.5px !important; box-shadow: 2px 2px 0 #e85d04 !important; }
  .btn-wa { font-size: 8.5px !important; padding: 10px 14px !important; border-width: 1.5px !important; box-shadow: 2px 2px 0 #1a1a1a !important; }
  .btn-catalog { font-size: 7.5px !important; padding: 7.5px 14px !important; border-width: 1.5px !important; box-shadow: 2px 2px 0 #1a1a1a !important; }

  .detail-desc-wrap { padding: 0 16px 32px !important; }
  .desc-section { margin-bottom: 24px !important; }
  .desc-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .desc-tabs::-webkit-scrollbar { display: none !important; height: 0 !important; }
  .desc-tab { padding: 10px 14px !important; font-size: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .desc-content { font-size: 12px !important; }

  /* ---- Deskripsi dipotong tepat 10 baris teks (bukan tinggi piksel sembarangan),
     pakai line-clamp supaya tombol selalu nempel persis di baris ke-10.
     Tombol cuma muncul kalau JS ukur isinya memang lebih dari 10 baris. ---- */
  .desc-collapsible { position: relative; }
  .desc-collapsible:not(.expanded):not(.fits) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
  }
  .desc-collapsible:not(.expanded):not(.fits)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(250,246,238,0), #FAF6EE);
  }
  .desc-toggle-btn {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    background: none;
    border: none;
    color: #1e3a5f;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', sans-serif;
  }
  .spek-table { font-size: 11px !important; }
  .spek-table td { padding: 8px 6px !important; }
  .spek-table td:first-child { width: 42% !important; }

  .related-section { padding: 0 16px 40px !important; }
  .section-title-text { font-size: 15px !important; }
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ============================================
     HALAMAN ARTICLES (articles.html)
     Masthead ditumpuk, tab kategori bisa digeser (mirip
     chip di katalog), featured card ditumpuk (bukan
     2 kolom), sidebar artikel pindah ke bawah list.
     ============================================ */

  .masthead { padding: 20px 0 0 !important; }
  .masthead-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 16px 20px !important;
    gap: 12px !important;
  }
  .masthead-title { font-size: 28px !important; margin-bottom: 6px !important; }
  .masthead-desc { font-size: 11px !important; max-width: 100% !important; line-height: 1.6 !important; }
  .masthead-right { text-align: left !important; }
  .masthead-issue { font-size: 8px !important; }
  .masthead-vol { font-size: 14px !important; }

  /* ---- Tab kategori: bisa digeser ke samping (kategorinya panjang-panjang) ---- */
  .cat-tabs-inner {
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .cat-tabs-inner::-webkit-scrollbar { display: none !important; height: 0 !important; }
  .cat-tab { padding: 10px 14px !important; font-size: 9px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

  /* ---- Layout utama: 1 kolom, sidebar artikel ikut turun ke bawah list ---- */
  .main-content { padding: 20px 0 !important; }
  .content-layout { grid-template-columns: 1fr !important; padding: 0 16px !important; gap: 28px !important; }

  /* ---- Artikel unggulan: foto di atas, teks di bawah (bukan 2 kolom) ---- */
  .featured-card { grid-template-columns: 1fr !important; width: 85% !important; margin: 0 auto 28px !important; }   /* dikecilkan 15% - kegedean/terlalu full di layar mobile */
  /* .featured-img sekarang aspect-ratio 4/3 dari base style (articles.html),
     otomatis menyesuaikan lebar - di sini cuma perkecil ikon emoji-nya. */
  .featured-img { font-size: 44px !important; }
  .featured-body { padding: 16px !important; }
  .article-cat-badge { font-size: 8px !important; padding: 3px 8px !important; margin-bottom: 8px !important; }
  .article-meta { font-size: 9px !important; margin-bottom: 8px !important; }
  .featured-title { font-size: 17px !important; margin-bottom: 10px !important; }
  .featured-excerpt { font-size: 11px !important; margin-bottom: 14px !important; }
  .author-avatar { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .author-name { font-size: 10px !important; }
  .read-more { font-size: 10px !important; }

  .section-label { font-size: 8px !important; margin-bottom: 12px !important; }

  /* ---- List artikel terbaru ---- */
  .article-row { gap: 12px !important; padding: 14px 0 !important; }
  .article-thumb { width: 56px !important; height: 56px !important; font-size: 20px !important; }
  .article-row-cat { font-size: 8px !important; margin-bottom: 4px !important; }
  .article-row-title { font-size: 12px !important; margin-bottom: 4px !important; }
  .article-row-excerpt { font-size: 10px !important; line-height: 1.4 !important; }

  /* ---- Sidebar artikel (BUKAN sidebar katalog - class sama tapi elemen
     beda, ini yang harus tetap tampil, cuma di-reset dari sticky) ---- */
  .sidebar { position: static !important; top: auto !important; }
  .sidebar-block { margin-bottom: 14px !important; }
  .sidebar-title { font-size: 8px !important; padding: 8px 12px !important; }
  .sidebar-content { padding: 12px !important; }
  .search-input { font-size: 11px !important; padding: 8px 12px !important; }
  .cat-list li { font-size: 11px !important; padding: 8px 0 !important; }
  .cat-count { font-size: 9px !important; }
  .top-article { padding: 8px 0 !important; gap: 8px !important; }
  .top-title { font-size: 11px !important; }
  .newsletter-sidebar { padding: 16px 14px !important; }
  .newsletter-sidebar-title { font-size: 15px !important; }
  .newsletter-sidebar-desc { font-size: 10px !important; margin-bottom: 10px !important; }

  /* ============================================
     HALAMAN DETAIL ARTIKEL (detail-artikel.html)
     Kolom kanan (sidebar) turun ke bawah artikel
     (pakai class .sidebar/.sidebar-block/dst yang
     sama dengan articles.html, jadi otomatis ikut
     style di HALAMAN ARTICLES di atas - tidak perlu
     ditulis ulang). Tabel perbandingan dibungkus
     supaya bisa digeser, bukan dipaksa muat.
     ============================================ */

  /* Kotak grid background terlalu besar di layar sempit - diperkecil
     jadi 20px (dari 40px). CATATAN: .grid-bg persis sama dipakai juga
     di detail-produk.html (sudah live), jadi otomatis ikut lebih rapat
     di sana juga - ini disengaja, bukan cuma untuk halaman ini. */
  .grid-bg { background-size: 20px 20px !important; }

  .artikel-layout { grid-template-columns: 1fr !important; padding: 20px 16px 32px !important; gap: 24px !important; }
  /* Kolom grid tidak mau menyusut di bawah lebar tabel perbandingan (480px)
     kalau tidak di-reset - ini yang bikin seluruh artikel ikut melebar. */
  .artikel-main { min-width: 0 !important; }

  .artikel-cat-badge { font-size: 8px !important; padding: 3px 10px !important; margin-bottom: 12px !important; }
  .artikel-title { font-size: 22px !important; margin-bottom: 14px !important; }

  .artikel-meta { flex-wrap: wrap !important; gap: 10px !important; padding-bottom: 14px !important; margin-bottom: 20px !important; }
  .meta-avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  .meta-name { font-size: 12px !important; }
  .meta-date, .meta-read { font-size: 10px !important; }
  .meta-share { margin-left: 0 !important; width: 100%; }
  .share-btn { font-size: 9px !important; padding: 5px 10px !important; }

  .artikel-foto { aspect-ratio: 4/3 !important; font-size: 44px !important; box-shadow: 3px 3px 0 #1a1a1a !important; margin-bottom: 6px !important; }
  .foto-caption { font-size: 9px !important; margin-bottom: 20px !important; }

  .artikel-body { font-size: 11px !important; line-height: 1.75 !important; }
  .artikel-body h2 { font-size: 18px !important; margin: 26px 0 12px !important; }
  .artikel-body h3 { font-size: 13.5px !important; margin: 18px 0 8px !important; }

  .highlight-box { padding: 14px 16px !important; margin: 20px 0 !important; }
  .highlight-box p { font-size: 12px !important; }

  /* Tabel perbandingan: dibungkus .table-scroll (lihat detail-artikel.html),
     lebar tabel dikunci supaya kolom tidak diremas - geser ke samping saja. */
  .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 20px 0 24px !important; }
  .table-scroll .compare-table { margin: 0 !important; min-width: 480px; }
  .compare-table th { padding: 10px 12px !important; font-size: 10px !important; }
  .compare-table td { padding: 10px 12px !important; font-size: 12px !important; }

  .cta-artikel { padding: 20px !important; margin: 26px 0 !important; box-shadow: 3px 3px 0 #1a1a1a !important; }
  .cta-artikel-title { font-size: 19px !important; }
  .cta-artikel-desc { font-size: 12px !important; margin-bottom: 16px !important; }
  .cta-artikel-btn { font-size: 12px !important; padding: 11px 20px !important; }

  .artikel-tags { margin: 26px 0 20px !important; padding-top: 18px !important; }
  .tag { font-size: 10px !important; padding: 4px 12px !important; }

  /* Kotak "Tim Javas Media" dikecilkan lagi - border & shadow desktop (2px/4px)
     kebawa ke mobile tanpa disesuaikan, jadi kelihatan berat di layar kecil. */
  .author-box { padding: 12px !important; gap: 10px !important; margin: 18px 0 !important; border-width: 1.5px !important; box-shadow: 2px 2px 0 #1a1a1a !important; }
  .author-box-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; border-width: 1.5px !important; }
  .author-box-name { font-size: 11px !important; }
  .author-box-role { font-size: 8px !important; }
  .author-box-desc { font-size: 10px !important; line-height: 1.5 !important; }

  /* CTA sidebar - bukan .sidebar-block, jadi diatur terpisah.
     Diperkecil 20% dari revisi sebelumnya (16px->13px, dst). */
  .cta-sidebar { padding: 13px 11px !important; margin-bottom: 11px !important; }
  .cta-sidebar-title { font-size: 13px !important; }
  .cta-sidebar-desc { font-size: 8px !important; margin-bottom: 8px !important; }
  .cta-sidebar-btn { font-size: 8px !important; padding: 7px !important; }

  /* Daftar Isi & Artikel Terkait pakai .sidebar-block/.sidebar-title/
     .sidebar-content yang SAMA dengan articles.html (lihat HALAMAN
     ARTICLES di atas) - di-scope ke .artikel-layout supaya perkecilan
     20% ini TIDAK ikut mengecilkan sidebar articles.html. */
  .artikel-layout .sidebar-block { margin-bottom: 11px !important; }
  .artikel-layout .sidebar-title { font-size: 6.5px !important; padding: 6px 10px !important; }
  .artikel-layout .sidebar-content { padding: 10px !important; }

  .toc-list li { font-size: 9px !important; padding: 4px 0 !important; }

  .related-item { padding: 6px 0 !important; gap: 8px !important; }
  .related-thumb { width: 35px !important; height: 35px !important; font-size: 14px !important; }
  .related-cat { font-size: 6.5px !important; margin-bottom: 2px !important; }
  .related-title { font-size: 9px !important; }

  /* ---- Artikel lainnya (bawah halaman) - .related-grid sudah 2 kolom
     dari HALAMAN DETAIL PRODUK di atas, di sini cuma perkecil isinya ---- */
  .article-card-img { aspect-ratio: 4/3 !important; height: auto !important; font-size: 28px !important; }
  .article-card-body { padding: 10px !important; }
  .article-card-cat { font-size: 7px !important; margin-bottom: 6px !important; }
  .article-card-title { font-size: 11px !important; margin-bottom: 6px !important; }
  .article-card-meta { font-size: 9px !important; }

  /* ============================================
     HALAMAN DASHBOARD (dashboard.html)
     Sidebar menu jadi block biasa di atas konten
     (bukan sticky lagi, cuma ditumpuk), tabel order
     bisa digeser ke samping (bukan dipaksa muat),
     metric card & kartu bawah jadi 1 kolom.
     ============================================ */

  .layout { grid-template-columns: 1fr !important; }
  /* .sidebar di-scope ke .layout - class ".sidebar" sama dipakai
     articles.html/detail-artikel.html untuk sidebar konten (harus
     tetap tampil apa adanya), beda elemen dari sidebar menu di sini. */
  .layout .sidebar {
    position: static !important;
    border-right: none !important;
    border-bottom: 2.5px solid var(--dark) !important;
    padding: 16px 0 !important;
  }

  /* Kolom grid tidak mau menyusut di bawah lebar tabel order (560px)
     kalau .main tidak di-reset - sama seperti kasus tabel di
     detail-artikel.html, ini bikin sidebar ikut melebar juga. */
  .main { min-width: 0 !important; padding: 20px 16px !important; }
  .page-title { font-size: 26px !important; }
  .page-title::before { height: 26px !important; }

  .metrics { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 20px !important; }
  .metric-card { padding: 14px !important; }
  .metric-value { font-size: 28px !important; }
  .metric-label { font-size: 8px !important; }
  .metric-sub { font-size: 9.5px !important; }

  .promo-banner { flex-direction: column !important; align-items: flex-start !important; padding: 18px !important; gap: 14px !important; margin-bottom: 20px !important; }
  .promo-title { font-size: 22px !important; }
  .promo-code { align-self: stretch !important; text-align: center !important; }

  /* Tabel order digeser ke samping, bukan diremas - .table-wrap sudah
     membungkus <table> pas, tinggal dikasih overflow-x. */
  .table-wrap { overflow-x: auto !important; margin-bottom: 20px !important; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px !important; }

  .bottom-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* .info-card di-scope ke .bottom-grid - class sama dipakai location.html
     dengan padding 16px, tapi di sini paddingnya ada di .card-body bagian
     dalam, kalau ikut ke-set di .info-card sendiri, header hitamnya jadi
     tidak rata sampai pinggir kartu. */
  .bottom-grid .info-card { padding: 0 !important; }

  /* ============================================
     HALAMAN KERANJANG (cart.html)
     Ringkasan turun ke bawah daftar item (bukan
     kolom kanan sticky), tiap kartu item dipecah
     jadi 2 baris (foto+info di atas, qty/subtotal/
     hapus di bawah) - pakai flex-wrap alami, BUKAN
     CSS order (pernah gak reliable di proyek ini).
     ============================================ */

  .cart-page-wrap { padding: 20px 16px 40px !important; }
  .cart-page-header { margin-bottom: 18px !important; }
  .cart-page-title { font-size: 24px !important; }
  .cart-page-count { font-size: 10px !important; padding: 5px 10px !important; }

  .cart-empty { padding: 50px 16px !important; }
  .cart-empty-icon { font-size: 48px !important; margin-bottom: 12px !important; }
  .cart-empty-title { font-size: 20px !important; }
  .cart-empty-desc { font-size: 11px !important; margin-bottom: 18px !important; }
  .cart-empty-btn { font-size: 15px !important; padding: 10px 22px !important; }

  .cart-layout { grid-template-columns: 1fr !important; gap: 16px !important; }

  .cart-item-card { flex-wrap: wrap !important; gap: 10px 12px !important; padding: 12px !important; }
  .cart-item-img { width: 48px !important; height: 48px !important; font-size: 22px !important; }
  /* Info dipaksa ambil hampir semua lebar baris pertama, sisanya (qty/
     subtotal/hapus) otomatis turun ke baris ke-2 karena flex-wrap. */
  .cart-item-info { flex: 1 1 calc(100% - 60px) !important; min-width: 0 !important; }
  .cart-item-name { font-size: 12px !important; }
  .cart-item-variant { font-size: 10px !important; }
  .cart-item-price { font-size: 11px !important; }
  .cart-item-subtotal { width: auto !important; font-size: 12px !important; }

  .cart-summary { position: static !important; padding: 18px !important; }
  .cart-summary-title { font-size: 18px !important; margin-bottom: 12px !important; }
  .cart-summary-divider { margin: 14px -18px 14px !important; }
  .cart-checkout-btn { font-size: 12.5px !important; padding: 13px !important; }
}

/* Landing iklan custom kaos: scoped agar halaman yang sudah final tetap sama. */
@media(max-width:768px){
.kaos-ads .ad-header{padding:12px 22px}.kaos-ads .ad-header img{width:90px;height:auto}.kaos-ads .ad-header>span{display:none}.kaos-ads .ad-container{padding:48px 24px}.kaos-ads .ad-hero{grid-template-columns:1fr;gap:38px;padding-top:35px}.kaos-ads h1{font-size:64px}.kaos-ads h2{font-size:35px}.kaos-ads .lead{font-size:14px}.kaos-ads .eyebrow{font-size:9px;letter-spacing:1px}.kaos-ads .shirt-poster{width:90%;max-width:390px;margin:0 auto 12px}.kaos-ads .sticker{right:-13px;width:75px;height:75px}.kaos-ads .benefit-band{gap:13px;padding:19px 14px;flex-wrap:wrap;font-size:9px;letter-spacing:.4px}.kaos-ads .use-grid,.kaos-ads .steps{grid-template-columns:1fr;gap:20px}.kaos-ads .use-grid article{padding:24px}.kaos-ads .steps article{padding-bottom:12px}.kaos-ads .steps p{max-width:none}.kaos-ads .workshop-section,.kaos-ads .consult-section{grid-template-columns:1fr;gap:28px}.kaos-ads .workshop-section>img{height:220px}.kaos-ads .brief-card{padding:23px}.kaos-ads .faq-section h2{font-size:30px}.kaos-ads .ad-footer{padding:25px 24px 100px;gap:18px;flex-wrap:wrap}.kaos-ads .ad-footer span{font-size:10px}.kaos-ads .ad-mobile-cta{display:block;position:fixed;z-index:20;bottom:0;left:0;right:0;background:var(--orange);color:white;text-align:center;padding:17px 20px calc(17px + env(safe-area-inset-bottom));border-top:2px solid var(--navy);text-decoration:none;font-weight:800;font-size:14px}.kaos-ads .hero-copy .ad-button{max-width:100%}
}