/**
 * Hanya beranda: promo/keunggulan/CTA, lokasi toko, deretan merek. Kategori
 * (kartu & slider bulat) dan .sk-section/.sk-bg--* TIDAK di sini - ikut
 * critical.css karena berpotongan viewport awal 1920x1080/390x844 (CLAUDE.md §14.8).
 *
 * Dipecah dari style.css (CLAUDE.md §14.8) - jangan menduplikasi aturan ke
 * berkas lain; aturan yang dipakai >1 template tinggal di base.css.
 */
/* ---- Dipindah dari critical.css (Tugas 7): kelas keadaan slider yang dipasang JS. ---- */
.sk-catslider.is-drag .sk-catslider__track{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
.sk-catslider.is-static .sk-catslider__track{scroll-snap-type:none}
/* ---- PROMO / KEUNGGULAN / CTA / LOKASI / MEREK (11) ---- */
/* ============ 11. PROMO / KEUNGGULAN / CTA ============ */
.sk-promo{border:1px solid var(--sk-line);border-radius:var(--sk-radius);display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:32px 36px}
.sk-promo h3{margin:0;font-size:27px}
.sk-promo p{margin:0;font-size:15.5px;color:var(--sk-muted);max-width:640px}
.sk-promo__body{display:flex;flex-direction:column;gap:8px}
.sk-promo__actions{display:flex;gap:12px;flex-wrap:wrap}
.sk-why{margin-top:52px;border-top:1px solid var(--sk-line);border-bottom:1px solid var(--sk-line);padding:40px 0}
.sk-why h2{font-size:24px;margin:0 0 24px}
.sk-why__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sk-why__item{background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding:22px;display:flex;flex-direction:column;gap:10px}
.sk-why__ic{width:38px;height:38px;border-radius:var(--sk-radius-sm);background:#eaf0f5;display:flex;align-items:center;justify-content:center}
/* Judul poin dan deskripsinya selalu di baris terpisah, bukan satu paragraf. */
.sk-why__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.sk-why__name{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--sk-ink)}
.sk-why__desc{display:block;font-size:14px;line-height:1.5;color:var(--sk-muted)}
/* ---- Lokasi toko: peta + info ---- */
.sk-lokasi{margin-top:52px;border-top:1px solid var(--sk-line);border-bottom:1px solid var(--sk-line);padding:40px 0}
.sk-lokasi__title{font-size:24px;margin:6px 0 24px}
/* Kolom kanan tetap 456px; kolom kiri minmax(0,1fr) supaya iframe tidak
   memaksa track melebar keluar kotak isi. */
.sk-lokasi__grid{display:grid;grid-template-columns:minmax(0,1fr) 456px;gap:28px;align-items:stretch}
/* Sel peta meregang setinggi baris grid (align-items:stretch), iframe mengisi
   kotak itu secara absolut. Dengan iframe statis, height:100% tidak bisa
   diselesaikan terhadap induk setinggi-isi dan peta jatuh ke min-height 320px
   sehingga berhenti lebih pendek dari kolom info. */
.sk-lokasi__map{position:relative;min-width:0;height:100%;min-height:320px;border:1px solid var(--sk-line);border-radius:10px;overflow:hidden;background:#fff}
.sk-lokasi__map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* Facade: tanpa iframe sampai diklik (CLAUDE.md §14.3). Gambar/placeholder dan grup
   tombol bertumpuk di kotak yang sama, position:relative dari .sk-lokasi__map di atas. */
.sk-lokasi__mapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sk-lokasi__mapph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#e9edf1 0 10px,#e0e5eb 10px 20px)}
/* Kolom vertikal: tombol mengambil sisa ruang dan terpusat di situ, kartu alamat
   (bila ada) menyusul di bawahnya mengikuti tinggi isinya - dua lapis absolute yang
   sama-sama center pernah bertabrakan di kotak pendek (390px), jadi satu alur flex. */
.sk-lokasi__mapoverlay{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px;gap:12px}
.sk-lokasi__mapbtns{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.sk-lokasi__mapcard{flex:none;align-self:flex-start;background:#fff;border:1px solid var(--sk-line);border-radius:var(--sk-radius-sm);padding:10px 14px;max-width:100%;display:flex;flex-direction:column;gap:2px}
.sk-lokasi__mapcard strong{font-size:14px;font-weight:600;color:var(--sk-ink);line-height:1.3}
.sk-lokasi__mapcard span{font-size:13px;color:var(--sk-muted);line-height:1.4}
.sk-lokasi__info{min-width:0;display:flex;flex-direction:column;gap:16px}
/* Desktop: tetap satu kolom bertumpuk. Di <=1024px pembungkus ini yang jadi
   3 kolom (Alamat / Jam / Telepon), lihat blok responsif. */
.sk-lokasi__rows{min-width:0;display:flex;flex-direction:column;gap:16px}
.sk-lokasi__row{display:flex;align-items:flex-start;gap:14px}
.sk-lokasi__ic{width:38px;height:38px;flex-shrink:0;border-radius:var(--sk-radius-sm);background:#eaf0f5;display:flex;align-items:center;justify-content:center}
.sk-lokasi__body{min-width:0;display:flex;flex-direction:column;gap:4px}
.sk-lokasi__label{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--sk-ink)}
.sk-lokasi__val{display:block;font-size:14px;line-height:1.5;color:var(--sk-muted)}
.sk-lokasi__tel{color:var(--sk-navy);font-weight:600}
.sk-lokasi__tel:hover{color:var(--sk-accent)}
.sk-lokasi__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.sk-lokasi__chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Pill mengikuti .sk-chip yang sudah dipakai hasil pencarian. */
.sk-lokasi__chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--sk-line);border-radius:99px;padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--sk-ink-3)}
.sk-lokasi__chip svg{flex-shrink:0}
.sk-lokasi__chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Merek: slider logo non-loop ---- */
.sk-brands{padding-top:12px}
/* Pita lebar konten mengikuti pola .sk-promo: latar + radius + padding pada
   elemen di dalam .sk-wrap, bukan pada .sk-wrap yang sudah ber-padding 0 32px
   (itu akan melebar 32px ke tiap sisi dan meleset dari tepi kartu produk). */
.sk-brands__panel{min-width:0}
/* Pita logo lebih rapat dari pita blok isi: isinya hanya sebaris logo. */
.sk-brands__panel.sk-bg--konten,.sk-brands__panel.sk-bg--alt{padding:12px 30px 14px}
.sk-brands__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:12px}
.sk-brands__heading{min-width:0}
.sk-brands__title{font-size:22px;margin:6px 0 0}
.sk-brands__note{margin:0;font-size:14px;line-height:1.4;color:var(--sk-muted)}
/* Pembungkus luar hanya jangkar panah; yang memotong track adalah __clip.
   --sk-brandbasis = lebar minimum satu logo; JS memakainya untuk menghitung
   berapa logo yang muat, bukan sebagai lebar akhir. */
.sk-brandslider{position:relative;--sk-brandbasis:186px}
.sk-brandslider__clip{overflow:hidden}
.sk-brandslider__track{display:flex;gap:14px;list-style:none;margin:0;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;padding-block:4px;padding-inline:0}
.sk-brandslider__track::-webkit-scrollbar{display:none}
.sk-brandslider.is-drag .sk-brandslider__track{scroll-behavior:auto;cursor:grabbing}
/* Logo mengapung langsung di latar blok: tanpa kartu, garis, atau bayangan.
   Basis lebar diisi JS lewat --sk-brandw supaya tepat sejumlah item mengisi
   track penuh - itu yang membuat setiap posisi berhenti rata di kedua sisi. */
.sk-brandslide{flex:1 0 var(--sk-brandw,186px);min-width:0;height:104px;padding:8px 20px;display:flex;align-items:center;justify-content:center;opacity:.82;transition:opacity .2s ease}
.sk-brandslide:hover,.sk-brandslide:focus-visible{opacity:1}
.sk-brandslide img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* Panah duduk di luar bibir track (-6px) supaya tidak pernah menutupi logo. */
.sk-brandslider__arrow{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid var(--sk-line);border-radius:50%;background:#fff;color:var(--sk-navy);cursor:pointer;box-shadow:0 2px 10px rgba(11,36,55,.1);transition:border-color .18s,opacity .18s}
/* Area sentuh 48x48 persegi: lingkaran 44px hanya memuat persegi ~31px. */
.sk-brandslider__arrow::after{content:"";position:absolute;inset:-4px}
.sk-brandslider__arrow:hover,.sk-brandslider__arrow:focus-visible{border-color:var(--sk-accent)}
.sk-brandslider__arrow[disabled]{opacity:0;pointer-events:none}
.sk-brandslider__arrow--prev{left:-6px}
.sk-brandslider__arrow--prev .sk-ic{transform:rotate(180deg)}
.sk-brandslider__arrow--next{right:-6px}

.sk-cta{background:var(--sk-navy);border-radius:var(--sk-radius);padding:36px 40px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;margin:44px 0 52px}
.sk-cta__body{display:flex;align-items:center;gap:20px}
.sk-cta__ic{width:52px;height:52px;border-radius:var(--sk-radius);background:var(--sk-wa);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sk-cta h3{margin:0;font-size:25px;color:#fff}
.sk-cta p{margin:0;font-size:15.5px;color:#b8ccdb}
.sk-cta__actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sk-cta__note{font-size:13px;color:#8fabc2}

/* ---- RESPONSIF (15) - bagian home ---- */
@media (max-width:1200px) {
  .sk-why__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px) {
  .sk-promo,.sk-cta{grid-template-columns:1fr}
  .sk-cta__actions{align-items:flex-start}

  .sk-lokasi__grid{grid-template-columns:1fr;gap:18px}
  .sk-lokasi__map{min-height:260px}
  .sk-lokasi__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (max-width:820px) {
.sk-why h2{font-size:20px}
  .sk-promo{padding:22px}
  .sk-promo h3{font-size:21px}
  .sk-cta{padding:24px;margin:32px 0 0}
  .sk-cta__body{flex-direction:column;align-items:flex-start;gap:12px}
  .sk-cta h3{font-size:20px}
  .sk-lokasi{margin-top:36px;padding:28px 0}
  .sk-lokasi__title{font-size:20px}
  .sk-why__grid{grid-template-columns:1fr;gap:10px}
  .sk-why__item{flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
}
@media (max-width:560px) {

  /* Tiga kolom info toko menumpuk jadi satu di lebar mobile. */
  .sk-lokasi__rows{grid-template-columns:1fr}
  /* Basis 186px hanya memuat satu logo di lebar ini - slotnya jadi selebar
     layar dan mubazir. Turunkan supaya dua logo tetap berdampingan. */
  .sk-brandslider{--sk-brandbasis:150px}
}
@media (max-width:480px) {
  /* Paksa tepat 2 logo per layar: JS memakai --sk-brandcols sebagai jumlah
     kolom bila terisi, mengabaikan hitungan basis (tak ada basis tunggal yang
     memberi 2 kolom di seluruh 320-480px). */
  .sk-brandslider{--sk-brandcols:2}
  /* Dua kolom chip memotong label terpanjang di lebar ini. */
  .sk-lokasi__chips{grid-template-columns:1fr}
}