/* Tampilan untuk tablet dan laptop. Semua aturan ada di dalam media query, jadi di HP (di bawah 700 px) aplikasi tidak berubah.
   - Tablet (700-1023 px): isi melebar, kisi lebih banyak kolom, menu tetap bilah kaca di bawah.
   - Laptop (1024 px ke atas): seperti situs web; menu pindah ke kepala halaman, isi selebar 1200 px.
   Banyak pemilih diawali .app supaya menang atas berkas CSS halaman (cek.css) yang dimuat belakangan. */

/* ================= Tablet dan laptop ================= */
@media (min-width: 700px) {
  body { background: var(--latar); }
  .app { max-width: 1023px; box-shadow: none; }
  .tab { max-width: 520px; }

  /* Halaman berisi formulir, daftar, chat, dan alat cek: satu kolom di tengah supaya barisnya tidak terlalu panjang. */
  body:not(.lebar) main:not(:has(.sapa, .kisi, .pd, .cek-daftar, .cari[action="/toko"])) { max-width: 760px; margin-inline: auto; }
  .aksi-bawah, .chat__tulis { max-width: 760px; border-radius: 18px 18px 0 0; }

  /* Beranda */
  .sapa { margin: 14px 16px 0; padding: 26px 28px 30px; border-radius: 26px; }
  .sapa h1 { font-size: 1.7rem; max-width: 20em; }
  .sapa .cari { max-width: 560px; }
  .layanan { grid-template-columns: repeat(8, 1fr); margin: 16px 16px 0; padding: 20px 12px 16px; }
  .layanan a { font-size: .82rem; }
  .app .cek-bulat { grid-template-columns: repeat(8, 1fr); padding: 0; }
  .kategori { grid-template-columns: repeat(6, 1fr); gap: 18px 8px; }
  .kategori a, .app .cek-bulat a { font-size: .82rem; }
  .geser { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
  .geser .kp { flex: none; }
  .promo { min-height: 220px; padding: 26px 40% 26px 28px; }
  .promo h2 { font-size: 1.4rem; }
  .promo__teks > p:not(.spanduk__atas) { font-size: .95rem; }
  .promo__orang { height: 102%; bottom: -10px; right: 5%; }
  .promo::before { width: 320px; height: 320px; right: 2%; }

  /* Toko */
  .kisi { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lengket .cari { max-width: 560px; }
  /* Kategori tampil semua (beberapa baris), jadi blok ini terlalu tinggi untuk ikut menempel saat digulir. */
  .lengket { position: static; }
  .cip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 12px 0; }
  .kp__nama { font-size: .95rem; }

  /* Cek Kesehatan */
  .app .cek-daftar { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Pembayaran: QRIS dan rekening berdampingan */
  .bayar__cara:has(.kqris):has(.krek) { grid-template-columns: 1fr 1fr; align-items: start; }
  .bayar__cara:has(.kqris):has(.krek) .bayar__atau { display: none; }
  .krek__nomor { font-size: 1.45rem; }

  /* Halaman masuk: kartu di tengah */
  .masuk { max-width: 440px; margin: 40px auto; padding: 36px 32px; background: var(--putih); border-radius: 24px; box-shadow: var(--bayang); }

  /* Popup iklan boleh sedikit lebih besar */
  .iklan__kartu { width: min(100%, 460px, calc(100dvh - 120px)); }
}
@media (min-width: 860px) {
  .kisi { grid-template-columns: repeat(4, 1fr); }
  .geser { grid-template-columns: repeat(6, 1fr); }
  .app .cek-daftar { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Laptop dan layar besar ================= */
@media (min-width: 1024px) {
  body { font-size: 16px; }
  body:has(.pratinjau) { --pita: 28px; }
  .app { max-width: 1200px; padding-bottom: 56px; }

  /* Pita pratinjau dan kepala halaman menempel di atas; latar putihnya dibentangkan selebar layar. */
  .pratinjau { position: sticky; top: 0; z-index: 31; height: 28px; line-height: 18px; box-shadow: 0 0 0 100vmax #fff3d6; clip-path: inset(0 -100vmax); }
  .kepala, .bar { top: var(--pita, 0px); min-height: 66px; padding-inline: 20px; box-shadow: 0 0 0 100vmax var(--putih); clip-path: inset(0 -100vmax -1px); }
  .bar h1 { font-size: 1.1rem; }
  /* Di halaman bermenu, judul dipersempit supaya tidak menabrak menu di tengah (402 = setengah lebar menu + tombol kembali dan jarak); tombol keranjang tetap di ujung kanan. */
  .app:has(.tab) .bar h1 { max-width: calc(50% - 402px); white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bar > :last-child { margin-left: auto; }
  .merek img { height: 44px; }
  .merek__teks { font-size: 1.25rem; }
  .lengket, .chat__info { top: calc(var(--pita, 0px) + 66px); }
  html { scroll-padding-top: 110px; }

  /* Menu utama pindah dari bawah ke tengah kepala halaman, tanpa efek kaca. */
  .tab { top: calc(var(--pita, 0px) + 11px); bottom: auto; z-index: 36; display: flex; gap: 4px; width: auto; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none !important; }
  .tab::before { display: none; }
  .tab a { flex-direction: row; gap: 9px; height: 44px; padding: 0 15px; border-radius: 12px; font-size: .92rem; color: #3e4555; animation: none !important; transition: background .15s; }
  .tab a:hover { background: #f1f3f8; }
  .tab a .tab__tanda { inset: 0; top: 0; bottom: 0; left: 0; border-radius: 12px; background: var(--utama-muda); box-shadow: none; }
  .tab__ikon { width: 24px; height: 24px; }
  .tab a[aria-current] .tab__ikon { transform: none; }

  /* Beranda */
  .sapa { margin: 22px 20px 0; padding: 40px 44px 44px; }
  .sapa h1 { font-size: 2.1rem; }
  .sapa__halo { font-size: 1rem; }
  .layanan { margin: 20px 20px 0; padding: 24px 16px 20px; }
  .layanan__ikon.ikon-gbr, .app .cek-bulat .layanan__ikon { width: 72px; height: 72px; }
  .kategori .kategori__ikon.ikon-gbr { width: 72px; height: 72px; }
  .layanan a, .kategori a, .app .cek-bulat a { font-size: .9rem; gap: 10px; transition: transform .18s; }
  .layanan a:hover, .kategori a:hover, .app .cek-bulat a:hover { transform: translateY(-3px); }
  .blok { padding: 34px 20px 0; }
  .blok__judul h2 { font-size: 1.3rem; }
  .promo-geser { margin-top: 22px; }
  .promo-geser__rel { padding: 0 20px; scroll-padding: 0 20px; }
  .promo { min-height: 280px; padding: 36px 42% 36px 44px; border-radius: 24px; }
  .promo h2 { font-size: 1.9rem; margin: 6px 0 8px; }
  .promo__teks > p:not(.spanduk__atas) { font-size: 1.05rem; margin-bottom: 18px; }
  .promo .tombol--kecil { min-height: 46px; padding: 0 22px; font-size: .95rem; }
  .promo__orang { height: 102%; bottom: -12px; right: 8%; }
  .promo::before { width: 420px; height: 420px; right: 4%; top: -60px; }

  /* Toko dan kartu produk */
  .kisi { grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 0 20px; }
  .lengket { padding: 16px 20px 0; }
  .hitung { padding: 12px 20px 10px; }
  .kp { padding: 12px; transition: transform .18s, box-shadow .18s; }
  .kp:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 28, 56, .06), 0 16px 30px -12px rgba(15, 28, 56, .28); }
  .halaman { margin: 26px 20px 8px; }

  /* Detail produk: gambar di kiri, keterangan di kanan */
  main:has(> .pd) { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 0 32px; align-items: start; padding: 28px 20px 0; }
  main:has(> .pd) > * { grid-column: 1 / -1; }
  main:has(> .pd) > .pd__gambar { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: var(--bayang); position: sticky; top: calc(var(--pita, 0px) + 86px); }
  main:has(> .pd) > .pd { grid-column: 2; grid-row: 1; margin: 0; padding: 26px 28px; border-radius: 22px; box-shadow: var(--bayang); }
  /* Tombol beli tidak lagi menempel di dasar layar: diletakkan di bawah keterangan produk. */
  main:has(> .pd) > .aksi-bawah { position: static; transform: none; grid-column: 2; grid-row: 2; align-self: start; width: auto; max-width: none; margin-top: 16px; padding: 16px; border-radius: 20px; box-shadow: var(--bayang); }
  main:has(> .pd) .formulir, main:has(> .pd) { padding-bottom: 0; }
  .pd h2 { font-size: 1.7rem; }
  .pd .pd__harga { font-size: 1.9rem; }

  /* Banner pasang aplikasi dan pemberitahuan kecil pindah ke pojok kanan bawah */
  .pasang { left: auto; right: 24px; bottom: 24px; width: 380px; transform: translateY(150%); }
  .pasang.tampil { transform: none; }
  .pasang.tutup { transform: translateY(40px); }
  .roti, body:has(.pasang.tampil) .roti { bottom: 28px; }
  /* Ada bilah yang menempel di dasar layar (kolom tulis chat, bilah checkout): pemberitahuan dan isi halaman tidak boleh tertutup olehnya. */
  body:has(.chat__tulis, .aksi-bawah) .roti { bottom: 96px; }
  body:has(.aksi-bawah) .app { padding-bottom: 100px; }
  body:has(.pasang.tampil) .app { padding-bottom: 170px; }
  .cara { align-items: center; }
  .cara__lembar { border-radius: 26px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .tab a[aria-current] .tab__ikon { animation: tab-buka-lebar .5s var(--pegas) both; }
  .tab a.ketuk .tab__ikon { animation: tab-ketuk-lebar .4s var(--pegas) both; }
}
@keyframes tab-buka-lebar { 0% { transform: scale(.5); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes tab-ketuk-lebar { 0% { transform: scale(.78); } 50% { transform: scale(1.25) rotate(-6deg); } 100% { transform: none; } }
/* Laptop sempit (1024-1180 px): ruang di kiri menu hanya sekitar 110 px, jadi judul halaman dikecilkan. */
@media (min-width: 1024px) and (max-width: 1180px) { .app:has(.tab) .bar h1 { font-size: .88rem; } }