/* ============================================================
     TOKEN DESAIN — semua warna & jarak diatur dari sini
     ============================================================ */
  :root{
    --bg-void: #10121a;
    --bg-void-2: #171a25;
    --bg-surface: #1b1f2c;
    --line-soft: rgba(241,239,233,0.08);

    --screen: #f5f1e6;
    --screen-dim: #ece6d6;
    --on-screen: #201c14;
    --on-screen-muted: #5c5646;

    --beam: #f5a94c;
    --beam-bright: #ffc871;
    --beam-soft: rgba(245,169,76,0.16);

    --text: #f1efe9;
    --text-muted: #9aa0b4;

    --wa: #25d366;
    --wa-dark: #1ea952;

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --max-w: 460px;
    --gutter: 22px;

    --ease: cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-void);
    color:var(--text);
    font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', system-ui, sans-serif;
    font-weight:700;
    line-height:1.12;
    letter-spacing:-0.01em;
    margin:0;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;}

  a:focus-visible,
  button:focus-visible{
    outline:2px solid var(--beam-bright);
    outline-offset:3px;
    border-radius:6px;
  }

  .wrap{
    max-width:var(--max-w);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  /* ============================================================
     BACKGROUND BEAM DECORATION (elemen tanda tangan desain)
     ============================================================ */
  .beam-glow{
    position:absolute;
    pointer-events:none;
    filter:blur(60px);
    opacity:0.55;
    z-index:0;
  }

  /* ============================================================
     HEADER
     ============================================================ */
  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(16,18,26,0.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:14px;
    padding-bottom:14px;
    gap:12px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
  }
  .brand-logo{
    height:26px;
    width:auto;
    flex:none;
  }
  .brand-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:15px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .btn-wa-mini{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--wa);
    color:#0c2415;
    font-weight:700;
    font-size:13px;
    padding:9px 14px;
    border-radius:999px;
    white-space:nowrap;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .btn-wa-mini svg{width:18px;height:18px;flex:none;}
  .btn-wa-mini:active{transform:scale(0.96);}

  /* di layar sangat sempit, tombol WA di header jadi ikon aja -- kasih ruang
     ke nama brand supaya gak kepotong (bukan cuma di-ellipsis) */
  @media (max-width:767px){
    .btn-wa-mini{padding:9px 11px;}
    .btn-wa-mini-label{display:none;}
    .brand-name{font-size:14px;}
    .btn-shop-nav{padding:0;width:38px;justify-content:center;}
    .btn-shop-nav-label{display:none;}
    /* ikon tas belanja di header -- ukuran disamakan proporsinya dengan
       ikon keranjang & WA di sebelahnya (sekitar 22px), TIDAK sebesar
       percobaan sebelumnya (44px, kebesaran) dan TIDAK sekecil semula
       (kebetulan ke-shrink jadi ~7px karena bug flexbox di bawah).
       flex:none WAJIB -- tanpa ini flexbox akan mengecilkan lebar svg
       supaya muat di tombol yang sempit (38px/35px), sementara tinggi
       tetap sesuai CSS -- hasilnya svg jadi gepeng dan preserveAspectRatio
       otomatis mengecilkan seluruh isi ikon, itu penyebab awal masalahnya. */
    .btn-shop-nav svg{width:22px;height:22px;flex:none;}
  }
  @media (max-width:400px){
    .header-inner{gap:8px;}
    .brand{gap:6px;}
    .brand-logo{height:22px;}
    .header-actions{gap:6px;}
    .btn-cart{width:35px;height:35px;}
    .btn-shop-nav{width:35px;height:35px;}
    .btn-wa-mini{width:35px;height:35px;padding:0;justify-content:center;}
    .brand-name{font-size:12.5px;}
  }
  @media (max-width:375px){
    .brand-name{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      line-height:1.2;
    }
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .btn-cart{
    position:relative;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:999px;
    background:var(--beam-soft);
    color:var(--beam-bright);
    border:1px solid var(--line-soft);
    transition:transform .2s var(--ease), background .2s var(--ease);
  }
  .btn-cart:active{transform:scale(0.93);}
  @media(hover:hover){
    .btn-cart:hover{background:rgba(245,169,76,0.26);}
  }
  .btn-shop-nav{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--beam);
    color:var(--bg-void);
    font-weight:800;
    font-size:12.5px;
    padding:9px 14px;
    border-radius:999px;
    white-space:nowrap;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .btn-shop-nav:active{transform:scale(0.96);}
  @media(hover:hover){
    .btn-shop-nav:hover{background:var(--beam-bright);}
  }

  .cart-badge{
    position:absolute;
    top:-4px;right:-4px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:999px;
    background:var(--beam);
    color:var(--bg-void);
    font-size:10.5px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  /* ---- running text: alasan belanja, jalan otomatis ---- */
  .running-text{
    overflow:hidden;
    background:var(--beam-soft);
    border-top:1px solid var(--line-soft);
    padding:8px 0;
  }
  .running-text-track{
    display:flex;
    align-items:center;
    width:max-content;
    white-space:nowrap;
    animation:running-text-scroll 26s linear infinite;
  }
  .running-text-item{
    font-size:12px;
    font-weight:700;
    color:var(--beam-bright);
    letter-spacing:0.01em;
  }
  .running-text-sep{
    color:var(--beam);
    opacity:0.6;
    margin:0 14px;
    font-size:11px;
  }
  @keyframes running-text-scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }
  @media(hover:hover){
    .running-text:hover .running-text-track{animation-play-state:paused;}
  }
  @media(hover:hover){
    .btn-wa-mini:hover{background:var(--wa-dark);}
  }

  /* ============================================================
     HERO — "marquee" foto dokumentasi asli (pengiriman + stok gudang)
     Struktur: satu strip foto jalan otomatis di bagian bawah hero,
     teks + tombol melayang di atasnya. Semua animasi murni CSS
     (tetap jalan walau JS diblokir) & otomatis mati kalau pengguna
     mengaktifkan "reduce motion" di OS-nya.
     ============================================================ */
  .hero{
    /* --hm-h = tinggi kartu foto di strip. Semua ukuran lain
       (tinggi strip, padding bawah hero) diturunkan dari sini
       supaya proporsinya selalu benar di layar mana pun. */
    --hm-h:clamp(135px, 21vh, 186px);
    --hm-gap:clamp(10px, 1.4vw, 18px);

    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    /* tinggi hero = tinggi layar DIKURANGI header sticky + running text,
       supaya strip fotonya selalu ikut kelihatan tanpa harus scroll dulu */
    min-height:calc(100vh - 106px);
    min-height:calc(100svh - 106px);
    padding-top:34px;
    padding-bottom:calc(var(--hm-h) * 0.72);
  }
  .hero .beam-glow{
    width:340px;height:340px;
    background:radial-gradient(circle, var(--beam) 0%, transparent 70%);
    top:-130px;
    right:-130px;
    opacity:0.4;
  }

  /* ---------- strip foto berjalan ---------- */
  .hm-stage{
    position:absolute;
    left:0;right:0;bottom:0;
    height:calc(var(--hm-h) + 34px);
    display:flex;
    align-items:center;
    overflow:hidden;
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 24%, #000 82%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 24%, #000 82%, transparent 100%);
  }
  /* lapisan peredup: foto tetap kelihatan tapi teks di atasnya tetap
     terbaca jelas, plus tepi kiri-kanan dibuat memudar ke background */
  .hm-stage::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
      linear-gradient(to right, var(--bg-void) 0%, rgba(16,18,26,0) 13%, rgba(16,18,26,0) 87%, var(--bg-void) 100%),
      linear-gradient(to bottom, rgba(16,18,26,0.84) 0%, rgba(16,18,26,0.30) 44%, rgba(16,18,26,0.58) 100%);
  }
  .hm-track{
    display:flex;
    align-items:center;
    width:max-content;
    z-index:1;
    animation:hm-scroll 46s linear infinite;
    will-change:transform;
  }
  /* isi .hm-track = 2x set foto yang sama persis, jadi geser 50%
     hasilnya sambungan mulus tanpa lompat. Jarak antar kartu pakai
     margin-right (bukan gap) supaya 50% jatuh tepat di batas set. */
  @keyframes hm-scroll{
    from{transform:translate3d(-50%,0,0);}
    to{transform:translate3d(0,0,0);}
  }
  .hm-card{
    flex:0 0 auto;
    /* rasio asli foto dokumentasi 380x676 -> tidak ada yang terpotong */
    width:calc(var(--hm-h) * 0.5621);
    height:var(--hm-h);
    margin-right:var(--hm-gap);
    border-radius:clamp(12px, 1.5vw, 20px);
    overflow:hidden;
    background:var(--bg-surface);
    box-shadow:
      0 18px 40px -18px rgba(0,0,0,0.75),
      0 0 0 1px rgba(241,239,233,0.06);
  }
  .hm-card:nth-child(odd){transform:rotate(-2deg);}
  .hm-card:nth-child(even){transform:rotate(4deg);}
  .hm-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* halo gelap lembut di belakang blok teks -- ini yang bikin judul &
     tombol tetap kebaca jelas walau di atasnya ada foto */
  .hero::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:min(1180px, 140%);
    height:calc(100% - var(--hm-h) * 0.26);
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 46%,
      rgba(16,18,26,0.94) 0%,
      rgba(16,18,26,0.72) 46%,
      rgba(16,18,26,0) 74%);
  }

  /* ---------- isi hero (teks + tombol) ---------- */
  .hero-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  @keyframes hm-rise{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:none;}
  }

  .hero-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 15px 7px 12px;
    margin-bottom:clamp(14px, 2.4vw, 20px);
    border-radius:999px;
    border:1px solid rgba(241,239,233,0.16);
    background:rgba(27,31,44,0.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-size:clamp(10.5px, 2.6vw, 13px);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--beam-bright);
    animation:hm-rise .7s var(--ease) both;
  }
  .hero-tag::before{
    content:"";
    flex:none;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--beam-bright);
    box-shadow:0 0 10px 2px var(--beam-soft);
  }

  .hero h1{
    max-width:22ch;
    font-size:clamp(28px, 6.2vw, 56px);
    line-height:1.12;
    color:var(--text);
  }
  /* tiap kata muncul berurutan (efek stagger) — delay-nya dari --d */
  .hm-w{
    display:inline-block;
    text-shadow:0 2px 22px rgba(16,18,26,0.92);
    animation:hm-rise .75s var(--ease) both;
    animation-delay:calc(var(--d) * .06s + .05s);
  }
  .hm-em{color:var(--beam-bright);}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hm-em{
      background:linear-gradient(90deg, var(--beam-bright) 0%, #dd8a24 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow:none;
      filter:drop-shadow(0 2px 16px rgba(16,18,26,0.92));
    }
  }

  .hero-sub{
    max-width:52ch;
    margin-top:clamp(14px, 2.4vw, 22px);
    font-size:clamp(14px, 2.9vw, 17px);
    line-height:1.7;
    color:#d9dbe4;
    text-shadow:0 2px 20px rgba(16,18,26,0.92);
    animation:hm-rise .75s var(--ease) both;
    animation-delay:.5s;
  }

  .hero-cta-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:420px;
    margin-top:clamp(20px, 3vw, 30px);
    animation:hm-rise .75s var(--ease) both;
    animation-delay:.62s;
  }
  .hero-cta-row .btn-wa-lg{width:100%;}
  @media (min-width:600px){
    .hero-cta-row{
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      width:auto;
      max-width:none;
    }
    .hero-cta-row .btn-wa-lg{
      width:auto;
      flex:0 0 auto;
      white-space:nowrap;
      padding:18px 28px;
    }
  }
  .hero .cta-microcopy{
    margin-top:14px;
    color:#c5c9d6;
    text-shadow:0 2px 16px rgba(16,18,26,0.95), 0 0 26px rgba(16,18,26,0.85);
    animation:hm-rise .75s var(--ease) both;
    animation-delay:.72s;
  }

  /* ---------- HP kecil / layar pendek: rapatkan supaya strip foto
       tetap kebagian ruang, tidak terdorong ke bawah lipatan ---------- */
  @media (max-width:374px), (max-height:680px){
    .hero{
      --hm-h:clamp(120px, 20vh, 165px);
      padding-top:22px;
    }
    .hero-tag{margin-bottom:12px;font-size:10px;padding:6px 12px 6px 10px;}
    .hero h1{font-size:clamp(24px, 6.6vw, 34px);}
    .hero-sub{margin-top:12px;font-size:13.5px;line-height:1.6;}
    .hero-cta-row{margin-top:16px;gap:8px;}
    .hero-cta-row .btn-wa-lg{padding:14px 16px;font-size:15px;}
    .hero-cta-row .btn-wa-lg svg{width:19px;height:19px;}
    .hero .cta-microcopy{margin-top:10px;font-size:11.5px;}
  }

  /* ---------- penyesuaian layar besar ---------- */
  @media (min-width:768px){
    .hero{
      --hm-h:clamp(180px, 25vh, 262px);
      min-height:calc(100vh - 110px);
      min-height:calc(100svh - 110px);
      padding-top:44px;
    }
  }
  @media (min-width:1024px){
    .hero{
      --hm-h:clamp(200px, 27vh, 300px);
      min-height:calc(100vh - 116px);
      min-height:calc(100svh - 116px);
      padding-top:44px;
    }
    .hero .beam-glow{width:520px;height:520px;top:-190px;right:-180px;}
    .hero-cta-row .btn-wa-lg{padding:20px 32px;font-size:17px;}
  }

  /* ---------- hormati setelan "kurangi animasi" ---------- */
  @media (prefers-reduced-motion: reduce){
    .hm-track{animation:none;}
    .hero-tag,
    .hm-w,
    .hero-sub,
    .hero-cta-row,
    .hero .cta-microcopy{
      animation:none;
      opacity:1;
      transform:none;
    }
  }

  .btn-wa-lg{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    background:var(--wa);
    color:#0c2415;
    font-weight:700;
    font-size:16.5px;
    padding:17px 20px;
    border-radius:999px;
    box-shadow:0 14px 30px -8px rgba(37,211,102,0.45);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  }
  .btn-wa-lg svg{width:22px;height:22px;flex:none;}
  .btn-wa-lg:active{transform:scale(0.97);}

  /* glow halus di tombol CTA utama hero -- animasi sama kayak ikon-ikon kecil (icon-glow),
     bukan cincin membesar yang kemarin kebesaran. Shadow tombolnya sendiri tetap ada. */
  .btn-wa-lg-ringed{animation:icon-glow-wa 2.6s ease-in-out infinite;}
  @keyframes icon-glow-wa{
    0%,100%{box-shadow:0 14px 30px -8px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.0);}
    50%{box-shadow:0 14px 30px -8px rgba(37,211,102,0.45), 0 0 0 8px rgba(37,211,102,0.22);}
  }
  @media(hover:hover){
    .btn-wa-lg:hover{background:var(--wa-dark);box-shadow:0 18px 34px -8px rgba(37,211,102,0.55);}
  }

  /* teaser "lihat semua produk" di homepage -- pakai style tombol besar yang
     sama, tapi warnanya oranye (brand), bukan hijau WA */
  .btn-shop-teaser{
    background:var(--beam);
    box-shadow:0 14px 30px -8px rgba(245,169,76,0.4);
  }
  .btn-shop-teaser:active{background:var(--beam);}
  @media(hover:hover){
    .btn-shop-teaser:hover{background:var(--beam-bright);}
  }

  .cta-microcopy{
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
    margin-top:12px;
  }

  /* ============================================================
     SECTION SCAFFOLDING
     ============================================================ */
  section{
    position:relative;
    padding-top:52px;
    padding-bottom:52px;
  }
  .section-head{
    margin-bottom:26px;
  }
  .section-eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--beam);
    margin-bottom:8px;
    display:block;
  }
  .section-title{
    font-size:23px;
    color:var(--text);
  }
  .section-desc{
    margin-top:8px;
    font-size:13.5px;
    color:var(--text-muted);
    max-width:52ch;
  }
  .divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent);
  }

  html.js .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  html.js .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---- animasi ikon: muncul dengan pop + putar dikit ---- */
  @keyframes icon-pop{
    0%{transform:scale(0.3) rotate(-20deg);opacity:0;}
    55%{transform:scale(1.2) rotate(8deg);opacity:1;}
    75%{transform:scale(0.94) rotate(-3deg);}
    100%{transform:scale(1) rotate(0deg);}
  }
  /* ---- foto produk belanja: fade halus, bukan pop -- kesannya lebih profesional ---- */
  @keyframes thumb-fade-in{
    0%{opacity:0;transform:translateY(6px);}
    100%{opacity:1;transform:translateY(0);}
  }
  /* ---- animasi ikon: goyang pas disentuh/hover ---- */
  @keyframes icon-wiggle{
    0%,100%{transform:rotate(0) scale(1);}
    25%{transform:rotate(-12deg) scale(1.08);}
    50%{transform:rotate(10deg) scale(1.08);}
    75%{transform:rotate(-6deg) scale(1.04);}
  }
  /* ---- animasi ikon: glow halus terus-menerus (warna tetap sama, cuma sinarnya berdenyut) ---- */
  @keyframes icon-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(245,169,76,0.0);}
    50%{box-shadow:0 0 0 6px rgba(245,169,76,0.16);}
  }
  /* varian buat cert-badge: pertahankan drop shadow-nya yang sudah ada, tambah cincin glow */
  @keyframes icon-glow-badge{
    0%,100%{box-shadow:0 8px 16px -4px rgba(0,0,0,0.55), 0 0 0 0 rgba(245,169,76,0.0);}
    50%{box-shadow:0 8px 16px -4px rgba(0,0,0,0.55), 0 0 0 6px rgba(245,169,76,0.25);}
  }

  /* ============================================================
     HALAMAN PRODUK (products.html) — search, filter, sort
     ============================================================ */
  .products-page-head{
    padding:28px 0 8px;
  }
  .back-to-home{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:700;
    color:var(--text-muted);
    margin-bottom:14px;
  }
  .back-to-home svg{flex:none;}
  @media(hover:hover){
    .back-to-home:hover{color:var(--beam-bright);}
  }

  /* ============================================================
     BAR CARI & FILTER halaman produk (.pf)
     Ringkas: satu bar yang menempel di bawah header sepanjang
     halaman. Dua baris saja -- baris cari + tombol Filter, lalu
     baris tab kategori yang bisa digeser ke samping.
     Filter yang jarang dipakai (merek, harga, urutan) disimpan di
     panel yang dibuka lewat tombol Filter, jadi tidak makan layar.
     ============================================================ */
  .pf{
    position:sticky;
    top:var(--header-h, 64px);
    z-index:40;
    background:var(--bg-void);
    border-bottom:1px solid var(--line-soft);
  }
  .pf-top{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 0;
  }
  .pf-search{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    flex:1 1 auto;
    min-width:0;
    height:40px;
    padding:0 12px;
    border-radius:10px;
    background:var(--bg-surface);
    border:1px solid var(--line-soft);
    transition:border-color .2s var(--ease);
  }
  .pf-search:focus-within{border-color:var(--beam);}
  .pf-search > svg{flex:none;color:var(--text-muted);}
  .pf-search input{
    flex:1 1 auto;
    min-width:0;
    background:transparent;
    border:0;
    outline:none;
    color:var(--text);
    font-family:inherit;
    font-size:14px;
  }
  .pf-search input::placeholder{color:var(--text-muted);}
  .pf-clear{
    flex:none;
    width:22px;
    height:22px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(241,239,233,0.1);
    color:var(--text-muted);
    font-size:15px;
    line-height:1;
    cursor:pointer;
  }
  .pf-clear[hidden]{display:none;}

  .pf-more{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:none;
    height:40px;
    padding:0 13px;
    border-radius:10px;
    border:1px solid var(--line-soft);
    background:var(--bg-surface);
    color:var(--text);
    font-family:inherit;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .pf-more svg{flex:none;}
  .pf-more[aria-expanded="true"]{border-color:var(--beam);color:var(--beam-bright);}
  .pf-more:active{transform:scale(0.97);}
  @media (hover:hover){
    .pf-more:hover{border-color:var(--beam);}
  }
  .pf-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--beam);
    color:#201c14;
    font-size:11px;
    font-weight:800;
  }
  .pf-badge[hidden]{display:none;}

  /* ---------- tab kategori ---------- */
  .pf-tabs-wrap{
    position:relative;
    /* melar sampai tepi layar supaya tab bisa digeser mulus di HP */
    margin:0 calc(var(--gutter) * -1);
  }
  .pf-tabs{
    position:relative;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  /* tepi memudar: penanda bahwa deretannya masih berlanjut ke samping */
  .pf-tabs-wrap::before,
  .pf-tabs-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:1px;
    width:clamp(38px, 9vw, 64px);
    z-index:2;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s var(--ease);
  }
  .pf-tabs-wrap::before{
    left:0;
    background:linear-gradient(to right, var(--bg-void) 0%, var(--bg-void) 42%, rgba(16,18,26,0) 100%);
  }
  .pf-tabs-wrap::after{
    right:0;
    background:linear-gradient(to left, var(--bg-void) 0%, var(--bg-void) 42%, rgba(16,18,26,0) 100%);
  }
  .pf-tabs-wrap.can-prev::before,
  .pf-tabs-wrap.can-next::after{opacity:1;}
  /* panah kecil di dalam area yang memudar */
  .pf-tabs-nudge{
    position:absolute;
    top:0;
    bottom:1px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(30px, 7vw, 40px);
    padding:0;
    border:0;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s var(--ease), color .2s var(--ease), visibility .25s;
  }
  .pf-tabs-nudge svg{display:block;}
  .pf-tabs-nudge-prev{left:0;}
  .pf-tabs-nudge-next{right:0;}
  .pf-tabs-wrap.can-prev .pf-tabs-nudge-prev,
  .pf-tabs-wrap.can-next .pf-tabs-nudge-next{opacity:1;visibility:visible;}
  .pf-tabs-nudge:active{transform:scale(0.9);}
  @media (hover:hover){
    .pf-tabs-nudge:hover{color:var(--beam-bright);}
  }
  @media (prefers-reduced-motion: reduce){
    .pf-tabs{scroll-behavior:auto;}
    .pf-tabs-wrap::before,
    .pf-tabs-wrap::after,
    .pf-tabs-nudge{transition:none;}
  }
  .pf-tabs::-webkit-scrollbar{display:none;}
  .pf-tabs .filter-pills{
    display:flex;
    flex-wrap:nowrap;
    gap:0;
    width:max-content;
    min-width:100%;
    padding:0 var(--gutter);
    border-bottom:1px solid var(--line-soft);
  }
  .pf-tabs .filter-pill{
    flex:none;
    position:relative;
    padding:9px 13px 10px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text-muted);
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:color .2s var(--ease);
  }
  /* garis penanda tab yang sedang aktif */
  .pf-tabs .filter-pill::after{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:-1px;
    height:2px;
    border-radius:2px;
    background:var(--beam);
    opacity:0;
    transform:scaleX(0.4);
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  .pf-tabs .filter-pill.is-active{color:var(--text);font-weight:700;}
  .pf-tabs .filter-pill.is-active::after{opacity:1;transform:scaleX(1);}
  .pf-tabs .filter-pill:active{transform:none;}
  @media (hover:hover){
    .pf-tabs .filter-pill:not(.is-active):hover{color:var(--text);}
  }

  /* ---------- panel filter tambahan ---------- */
  .pf-panel{
    border-top:1px solid var(--line-soft);
    background:var(--bg-void-2);
    box-shadow:0 22px 40px -26px rgba(0,0,0,0.9);
  }
  .pf-panel[hidden]{display:none;}
  .pf-panel-inner{
    display:grid;
    gap:14px;
    padding-top:14px;
    padding-bottom:16px;
  }
  .pf-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
  .pf-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .pf-select{
    width:100%;
    height:38px;
    padding:0 12px;
    border-radius:9px;
    border:1px solid var(--line-soft);
    background:var(--bg-surface);
    color:var(--text);
    font-family:inherit;
    font-size:13.5px;
    cursor:pointer;
  }
  .pf-panel .filter-pills{display:flex;flex-wrap:wrap;gap:7px;}
  .pf-panel .filter-pill{
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--line-soft);
    background:var(--bg-surface);
    color:var(--text-muted);
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  }
  .pf-panel .filter-pill.is-active{
    background:var(--beam);
    border-color:var(--beam);
    color:#201c14;
  }
  .pf-panel .filter-pill:active{transform:scale(0.96);}
  .pf-actions{display:flex;gap:9px;align-items:center;}
  .pf-apply{
    flex:1 1 auto;
    height:40px;
    border-radius:10px;
    border:0;
    background:var(--beam);
    color:#201c14;
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
  }
  .pf-apply:active{transform:scale(0.98);}
  .pf-reset{
    flex:none;
    height:40px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid var(--line-soft);
    background:transparent;
    color:var(--text-muted);
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
  }
  .pf-reset[hidden]{display:none;}

  /* ---------- baris jumlah hasil (di luar bar) ---------- */
  .pf-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 0 4px;
  }
  .filter-result-count{font-size:12.5px;color:var(--text-muted);}

  @media (min-width:768px){
    .pf-top{gap:12px;padding:12px 0;}
    .pf-search{height:42px;}
    .pf-more{height:42px;padding:0 16px;}
    .pf-tabs-wrap{margin:0;}
    .pf-tabs .filter-pills{padding:0;}
    .pf-panel-inner{
      grid-template-columns:repeat(2, minmax(0,1fr));
      align-items:end;
    }
    .pf-field-wide{grid-column:1 / -1;}
    .pf-actions{grid-column:1 / -1;justify-content:flex-end;}
    .pf-apply{flex:0 0 auto;padding:0 26px;}
  }

  @media (prefers-reduced-motion: reduce){
    .pf-tabs .filter-pill::after,
    .pf-more,
    .pf-panel .filter-pill{transition:none;}
  }

  .products-page-grid{padding-top:0;padding-bottom:48px;}

  .filter-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:56px 20px;
    color:var(--text-muted);
  }
  .filter-empty-state[hidden]{display:none;}
  .filter-empty-state svg{margin-bottom:14px;opacity:0.5;}
  .filter-empty-state h3{font-size:16px;color:var(--text);margin-bottom:6px;}
  .filter-empty-state p{font-size:13px;margin-bottom:18px;max-width:34ch;}

  /* ============================================================
     BELANJA PRODUK — katalog produk yang bisa dibeli
     ============================================================ */
  .shop-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .shop-card{
    background:var(--bg-surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius-md);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
  }
  .shop-card-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
  }
  .shop-card-thumb-wrap{
    position:relative;
    flex:none;
    width:100%;
    aspect-ratio:1/1;
    background:#ffffff;
    border-radius:10px;
    overflow:hidden;
    display:block;
  }
  .shop-card-thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .shop-card-thumb-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--beam);
  }
  .shop-card.reveal.is-visible .shop-card-thumb{animation:thumb-fade-in .55s var(--ease) backwards;}
  .shop-card-body{flex:1;min-width:0;width:100%;}
  .shop-card-brand{
    font-size:10px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--beam);
  }
  .shop-card-body h3{
    font-size:13px;
    color:var(--text);
    margin:2px 0 3px;
    line-height:1.25;
  }
  .shop-card-spec, .shop-card-ports{
    font-size:10.5px;
    color:var(--text-muted);
    line-height:1.35;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  /* rentetan kode model panjang tanpa spasi (mis. L1110/L1210/L1250/...)
     tidak punya titik patah alami; tanpa ini kartunya melebar dan
     halaman jadi bisa digeser ke samping di layar sempit */
  .shop-card-body h3,
  .shop-card-spec,
  .shop-card-ports{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .shop-card-ports{display:none;}
  .shop-card-pricing{width:100%;margin-top:auto;}
  .shop-card-price{
    font-size:14.5px;
    font-weight:800;
    color:var(--beam-bright);
    text-align:center;
  }
  .shop-price-note{
    display:block;
    font-size:9.5px;
    color:var(--text-muted);
    margin-top:2px;
    text-align:center;
  }
  .shop-card-price-ask{
    font-size:12.5px;
    color:var(--text-muted);
    font-weight:700;
  }
  .btn-ask-price{background:var(--text-muted);}
  @media(hover:hover){
    .btn-ask-price:hover{background:var(--text);}
  }
  .shop-card-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-top:2px;
  }
  .shop-qty{
    justify-content:center;
    display:inline-flex;
    align-items:center;
    gap:2px;
    background:var(--bg-void);
    border:1px solid var(--line-soft);
    border-radius:999px;
    padding:4px;
  }
  .shop-qty-btn{
    width:26px;height:26px;
    border-radius:50%;
    background:transparent;
    color:var(--text);
    font-size:16px;
    font-weight:700;
    line-height:1;
    transition:background .2s var(--ease);
  }
  .shop-qty-btn:active{background:var(--beam-soft);}
  .shop-qty-val{
    min-width:22px;
    text-align:center;
    font-size:13.5px;
    font-weight:700;
    color:var(--text);
  }
  .btn-add-cart{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:var(--beam);
    color:var(--bg-void);
    font-weight:800;
    font-size:12px;
    padding:8px 12px;
    border-radius:999px;
    width:100%;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .btn-add-cart:active{transform:scale(0.95);}
  @media(hover:hover){
    .btn-add-cart:hover{background:var(--beam-bright);}
  }

  /* ============================================================
     KERANJANG & CHECKOUT — drawer + modal
     ============================================================ */
  .cart-drawer, .modal-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(10,11,16,0.6);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transition:opacity .25s var(--ease), visibility .25s;
    display:flex;
    justify-content:flex-end;
  }
  .modal-overlay{
    justify-content:center;
    align-items:center;
    padding:var(--gutter);
  }
  .cart-drawer.is-open, .modal-overlay.is-open{
    opacity:1;
    visibility:visible;
  }
  .cart-panel, .modal-panel{
    background:var(--bg-surface);
    width:100%;
    max-width:420px;
    max-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .modal-panel{
    border-radius:var(--radius-lg);
    max-height:88vh;
    transform:translateY(16px) scale(0.98);
  }
  .modal-panel-sm{max-width:360px;}
  .modal-overlay.is-open .modal-panel{transform:translateY(0) scale(1);}

  .cart-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid var(--line-soft);
    flex:none;
  }
  .cart-panel-head h2{font-size:17px;color:var(--text);}
  .modal-close-btn{
    width:32px;height:32px;
    border-radius:50%;
    background:var(--bg-void);
    color:var(--text-muted);
    font-size:20px;
    line-height:1;
    transition:background .2s var(--ease);
  }
  .modal-close-btn:active{background:var(--beam-soft);}

  .cart-panel-body, .modal-panel-body{
    padding:16px 20px;
    overflow-y:auto;
    flex:1;
  }
  .cart-empty{
    font-size:13.5px;
    color:var(--text-muted);
    text-align:center;
    padding:30px 0;
  }
  .cart-list{display:flex;flex-direction:column;gap:12px;}
  .cart-row{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .cart-row-icon{
    flex:none;
    width:38px;height:38px;
    border-radius:10px;
    background:var(--beam-soft);
    color:var(--beam-bright);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cart-row-info{flex:1;min-width:0;}
  .cart-row-info h4{
    font-size:13.5px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cart-row-price{font-size:11.5px;color:var(--text-muted);}
  .cart-row-qty{
    flex:none;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:var(--text);
  }
  .cart-qty-btn{
    width:22px;height:22px;
    border-radius:50%;
    background:var(--bg-void);
    color:var(--text);
    font-size:14px;
    line-height:1;
  }
  .cart-row-remove{
    flex:none;
    color:var(--text-muted);
    padding:4px;
  }
  .cart-row-remove svg{display:block;}

  .cart-panel-footer{
    flex:none;
    padding:16px 20px 20px;
    border-top:1px solid var(--line-soft);
  }
  .cart-total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:15px;
    font-weight:800;
    color:var(--text);
    margin-bottom:12px;
  }
  .cart-total-row span:last-child{color:var(--beam-bright);}

  .checkout-summary{
    background:var(--bg-void);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    margin-bottom:4px;
  }
  .checkout-summary-row{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    color:var(--text-muted);
    padding:4px 0;
  }
  .checkout-total-row{margin-top:10px;}
  .checkout-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:16px;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:12.5px;
    font-weight:700;
    color:var(--text-muted);
  }
  .form-field input, .form-field textarea{
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    background:var(--bg-void);
    border:1px solid var(--line-soft);
    border-radius:var(--radius-sm);
    padding:10px 12px;
    resize:vertical;
  }
  .form-field input:focus, .form-field textarea:focus{
    outline:2px solid var(--beam);
    outline-offset:1px;
  }
  .checkout-form .btn-wa-lg{
    width:100%;
    justify-content:center;
    margin-top:4px;
  }

  .order-confirm-body{
    padding:28px 22px 24px;
    text-align:center;
  }
  .order-confirm-icon{
    color:var(--wa);
    background:rgba(37,211,102,0.14);
    border-radius:50%;
    padding:12px;
    margin-bottom:14px;
  }
  .order-confirm-body h2{font-size:18px;color:var(--text);margin-bottom:8px;}
  .order-confirm-body p{font-size:13px;color:var(--text-muted);margin-bottom:14px;}
  .order-confirm-body .btn-wa-lg{width:100%;justify-content:center;margin-top:6px;}

  /* ============================================================
     MID-PAGE CTA BANNER
     ============================================================ */
  .cta-banner{
    position:relative;
    background:var(--bg-void-2);
    overflow:hidden;
  }
  .cta-banner .beam-glow{
    width:300px;height:300px;
    background:radial-gradient(circle, var(--beam) 0%, transparent 70%);
    left:50%;
    top:-60px;
    transform:translateX(-50%);
    opacity:0.35;
  }
  .cta-banner-inner{
    position:relative;
    z-index:1;
    text-align:center;
  }
  .cta-banner h2{
    font-size:24px;
    margin-bottom:10px;
  }
  .cta-banner p{
    font-size:14.5px;
    color:var(--text-muted);
    margin-bottom:24px;
  }

  /* ============================================================
     FOOTER
     Susunan: logo -> nama & tagline -> menu -> ikon sosial ->
     pita bergaris miring -> daftar kategori & hak cipta.
     Muncul bertahap saat footer masuk layar (pakai .reveal yang
     sudah ada, tinggal diberi jeda berbeda-beda). Tanpa JS semuanya
     tetap tampil, cuma tanpa animasi masuk.
     ============================================================ */
  footer{
    padding-top:clamp(34px, 6vw, 56px);
    padding-bottom:110px;
    text-align:center;
    overflow:hidden;
  }
  footer p{
    font-size:12.5px;
    color:var(--text-muted);
  }
  .footer-logo{
    height:clamp(30px, 6vw, 38px);
    width:auto;
    display:block;
    margin:0 auto 14px;
    opacity:0.95;
  }
  footer .foot-brand{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    color:var(--text);
    font-size:clamp(14px, 3.2vw, 16px);
    margin-bottom:5px;
  }

  /* saat dilompati dari menu footer, sisakan ruang untuk header
     yang menempel di atas supaya judulnya tidak ketutup */
  #kenapa-kami,
  #sertifikasi,
  #merek,
  #brosur,
  #dokumentasi,
  #kontak{
    scroll-margin-top:118px;
  }

  /* ---------- menu ---------- */
  .foot-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(2px, 1vw, 10px);
    margin-top:clamp(20px, 3.6vw, 30px);
  }
  .foot-nav a{
    position:relative;
    display:inline-block;
    padding:7px 13px;
    border-radius:9px;
    font-size:clamp(13px, 3vw, 14.5px);
    font-weight:600;
    color:var(--text);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s var(--ease);
  }
  /* kotak latar yang mengembang dari tengah saat disorot */
  .foot-nav a::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:9px;
    background:rgba(241,239,233,0.09);
    opacity:0;
    transform:scale(0.6);
    transition:transform .32s cubic-bezier(.34, 1.5, .6, 1), opacity .22s linear;
  }
  .foot-nav a span{position:relative;z-index:1;}
  .foot-nav a:active{transform:scale(0.95);}
  @media (hover:hover){
    .foot-nav a:hover{transform:scale(1.05);}
    .foot-nav a:hover::before{opacity:1;transform:scale(1);}
  }

  /* ---------- ikon sosial ---------- */
  .foot-social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(12px, 3vw, 20px);
    margin-top:clamp(18px, 3.2vw, 26px);
  }
  .foot-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    color:var(--text);
    -webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.34, 1.5, .6, 1), color .25s var(--ease);
  }
  .foot-social svg{display:block;}
  .foot-social a:active{transform:scale(0.92);}
  @media (hover:hover){
    .foot-social a:hover{
      transform:translateY(-3px) scale(1.14);
      color:var(--beam-bright);
    }
  }

  /* ---------- baris penutup ---------- */
  .foot-tail{
    /* jaraknya diperbesar karena pita bergaris yang dulu memisahkan
       bagian ini sudah dihapus -- pemisahnya sekarang ruang kosong */
    margin-top:clamp(34px, 5.6vw, 54px);
  }
  .foot-cats{
    max-width:62ch;
    margin:0 auto;
    font-size:11.5px;
    line-height:1.9;
    color:var(--text-dim, var(--text-muted));
    opacity:0.75;
  }
  .foot-cats a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .15s var(--ease), border-color .15s var(--ease);
  }
  @media (hover:hover){
    .foot-cats a:hover{color:var(--beam);border-color:currentColor;}
  }
  .foot-cats a:focus-visible{color:var(--beam);border-color:currentColor;outline:none;}
  .foot-copy{margin-top:12px;}

  @media (prefers-reduced-motion: reduce){
    .foot-nav a,
    .foot-nav a::before,
    .foot-social a{transition:none;}
  }

  /* ============================================================
     FLOATING WHATSAPP BUTTON
     ============================================================ */
  .fab-wa{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:60;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--wa);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 24px -6px rgba(37,211,102,0.55);
    transition:transform .2s var(--ease);
  }
  .fab-wa svg{width:28px;height:28px;color:#0c2415;}

  /* ---------- tombol kembali ke atas ----------
     Ditumpuk tepat di atas tombol WhatsApp melayang, ukurannya sedikit
     lebih kecil dan warnanya netral supaya tombol WhatsApp tetap yang
     paling menonjol. Baru muncul setelah pengunjung menggulung jauh --
     kalau ditampilkan terus, tombolnya cuma menutupi isi halaman. */
  .fab-top{
    position:fixed;
    right:18px;
    bottom:86px;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
    border-radius:50%;
    border:1px solid var(--line-soft);
    background:rgba(27,31,44,0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:var(--text);
    cursor:pointer;
    box-shadow:0 10px 26px -8px rgba(0,0,0,0.85);
    transition:opacity .25s var(--ease), transform .25s var(--ease),
               border-color .2s var(--ease), color .2s var(--ease),
               visibility .25s;
  }
  /* Tanpa JS tombolnya langsung tampil dan tetap berfungsi (dia
     <a href="#">). Dengan JS, disembunyikan dulu lalu dimunculkan
     setelah pengunjung menggulung -- itulah gunanya penanda html.js. */
  html.js .fab-top{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px) scale(0.9);
  }
  html.js .fab-top.is-on{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .fab-top svg{display:block;}
  .fab-top:active{transform:scale(0.9);}
  @media (hover:hover){
    .fab-top:hover{border-color:var(--beam);color:var(--beam-bright);}
  }
  @media (prefers-reduced-motion: reduce){
    .fab-top{transition:none;}
  }
  .fab-wa:active{transform:scale(0.93);}
  .fab-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid var(--wa);
    animation:ring-pulse 2.4s var(--ease) infinite;
  }
  @keyframes ring-pulse{
    0%{transform:scale(1);opacity:0.6;}
    100%{transform:scale(1.7);opacity:0;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
    .fab-ring{animation:none;display:none;}
    .btn-wa-lg-ringed{animation:none;}
    .shop-card-thumb{
      animation:none!important;
    }
    .running-text-track{animation:none!important;transform:none;}
  }

  /* ============================================================
     BROSUR PRODUK BEST SELLER — kartu "kipas" (fan carousel)
     Brosur ditumpuk melengkung seperti kartu di tangan. Kartu tengah
     yang terbesar & paling depan; kartu samping miring dan mengecil.

     Dua mode:
     1. TANPA JS -> strip yang bisa digeser ke samping (aman & tetap
        lengkap, caption ikut tampil di tiap kartu).
     2. DENGAN JS (html.js) -> mode kipas: ada panah, titik navigasi,
        geser/swipe, dan caption pindah ke bawah mengikuti kartu tengah.
     Posisi tiap kartu dihitung di JS supaya ikut ukuran layar.
     ============================================================ */
  .fan{
    --fan-h:clamp(206px, 42vw, 390px);
    --fan-w:calc(var(--fan-h) * 0.707);
  }

  /* ---------- mode dasar: strip geser (dipakai kalau JS mati) ---------- */
  .fan-deck{
    display:flex;
    gap:12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .fan-deck::-webkit-scrollbar{display:none;}
  .fan-card{
    flex:0 0 auto;
    width:var(--fan-w);
    background:var(--bg-surface);
    border:1px solid var(--line-soft);
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
  }
  .fan-thumb{
    display:block;
    width:100%;
    height:auto;
    background:#fff;
  }
  .fan-cap{padding:9px 10px 11px;}
  .fan-cap h3{
    font-size:12.5px;
    line-height:1.3;
    margin-bottom:3px;
    color:var(--text);
  }
  .fan-cap span{
    font-size:11px;
    font-weight:700;
    color:var(--beam-bright);
  }
  .fan-caption,
  .fan-nav{display:none;}

  /* ---------- mode kipas (JS aktif) ---------- */
  html.js .fan-deck{
    position:relative;
    display:block;
    /* dipotong di tepi supaya kartu yang sedang "terbang keluar" tidak
       bikin halaman bisa digeser ke samping; tingginya dilebihkan
       supaya bayangan kartu tidak ikut terpotong */
    overflow:hidden;
    height:calc(var(--fan-h) * 1.34);
    padding-bottom:0;
    touch-action:pan-y;
  }
  html.js .fan-card{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--fan-w);
    height:var(--fan-h);
    margin-left:calc(var(--fan-w) / -2);
    margin-top:calc(var(--fan-h) / -2);
    border-radius:clamp(12px, 2vw, 20px);
    box-shadow:0 22px 50px -20px rgba(0,0,0,0.85);
    will-change:transform, opacity;
    /* sedikit melewati target lalu balik -- ini yang bikin gerakan
       menyibaknya terasa memantul seperti di contoh */
    transition:transform .52s cubic-bezier(.34, 1.42, .58, 1),
               opacity .4s linear;
  }
  html.js .fan-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  html.js .fan-cap{display:none;}

  /* caption kartu tengah, ditaruh di bawah kipas */
  html.js .fan-caption{
    display:block;
    max-width:44ch;
    margin:clamp(16px, 3vw, 26px) auto 0;
    text-align:center;
    min-height:3.4em;
  }
  .fan-caption h3{
    font-size:clamp(14px, 3.2vw, 17px);
    line-height:1.35;
    color:var(--text);
  }
  .fan-caption span{
    display:block;
    margin-top:5px;
    font-size:clamp(11.5px, 2.6vw, 13px);
    font-weight:700;
    color:var(--beam-bright);
  }

  /* panah + titik navigasi */
  html.js .fan-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(10px, 2.5vw, 18px);
    margin-top:clamp(12px, 2.4vw, 18px);
  }
  .fan-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:42px;
    height:42px;
    padding:0;
    border-radius:50%;
    border:1.5px solid var(--line-soft);
    background:rgba(27,31,44,0.7);
    color:var(--text-muted);
    cursor:pointer;
    transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .fan-arrow svg{display:block;}
  .fan-arrow:active{opacity:0.7;}
  @media (hover:hover){
    .fan-arrow:hover{border-color:var(--beam);color:var(--beam-bright);}
  }
  .fan-dots{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .fan-dot{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(241,239,233,0.18);
    cursor:pointer;
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .fan-dot.is-on{
    background:var(--beam);
    transform:scale(1.35);
  }

  /* angkat sedikit kartu yang disentuh kursor (hanya di perangkat
     yang benar-benar punya hover, jadi tidak mengganggu layar sentuh) */
  @media (hover:hover){
    html.js .fan-card{cursor:pointer;}
  }

  /* kalau pengguna minta animasi dikurangi: perpindahan langsung,
     tanpa transisi -- semua fungsi tetap jalan */
  @media (prefers-reduced-motion: reduce){
    html.js .fan-card{transition:none;}
    .fan-dot,
    .fan-arrow{transition:none;}
  }

  .lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(8,9,13,0.94);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 18px 30px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s var(--ease);
  }
  .lightbox.is-open{
    opacity:1;
    pointer-events:auto;
  }
  .lightbox img{
    max-width:100%;
    max-height:100%;
    border-radius:10px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.75);
  }
  .lightbox-close{
    position:absolute;
    top:16px;
    right:16px;
    width:42px;height:42px;
    border-radius:50%;
    background:var(--bg-surface);
    border:1px solid var(--line-soft);
    color:var(--text);
    font-size:18px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  @media (prefers-reduced-motion: reduce){
    .lightbox{transition:none;}
  }

  /* ============================================================
     MEREK YANG KAMI SEDIAKAN
     ============================================================ */
  /* Dua baris logo berjalan otomatis dengan arah BERLAWANAN (baris atas
     ke kiri, baris bawah ke kanan). Isi tiap baris ditulis 2x persis
     sama; jarak antar chip pakai margin-right (bukan gap) supaya geser
     50% jatuh tepat di batas set -> sambungannya mulus tanpa lompat.
     Mau tambah/kurangi merek? ubah DI KEDUA SET baris yang sama. */
  .brand-marquee{
    --bc-h:clamp(52px, 12vw, 68px);
    --bc-w:clamp(106px, 25vw, 150px);
    --bc-gap:clamp(9px, 1.4vw, 16px);
    position:relative;
    /* keluar dari padding .wrap supaya stripnya selebar layar */
    margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
    overflow:hidden;
  }
  .brand-row{
    display:flex;
    overflow:hidden;
  }
  .brand-row + .brand-row{margin-top:var(--bc-gap);}
  .brand-track{
    display:flex;
    width:max-content;
    will-change:transform;
  }
  .brand-row-a .brand-track{animation:brand-left 62s linear infinite;}
  .brand-row-b .brand-track{animation:brand-right 62s linear infinite;}
  @keyframes brand-left{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
  }
  @keyframes brand-right{
    from{transform:translate3d(-50%,0,0);}
    to{transform:translate3d(0,0,0);}
  }
  .brand-chip{
    flex:0 0 auto;
    width:var(--bc-w);
    height:var(--bc-h);
    margin-right:var(--bc-gap);
    background:var(--screen);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(11px, 2.2vw, 18px);
    box-shadow:0 10px 24px -12px rgba(0,0,0,0.65);
  }
  .brand-chip img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
  }
  /* tepi kiri & kanan memudar ke warna background, seperti di contoh */
  .brand-marquee::before,
  .brand-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:clamp(44px, 10vw, 130px);
    z-index:2;
    pointer-events:none;
  }
  .brand-marquee::before{
    left:0;
    background:linear-gradient(to right, var(--bg-void) 0%, rgba(16,18,26,0) 100%);
  }
  .brand-marquee::after{
    right:0;
    background:linear-gradient(to left, var(--bg-void) 0%, rgba(16,18,26,0) 100%);
  }
  /* berhenti sebentar kalau kursor diarahkan ke strip (desktop) */
  @media (hover:hover){
    .brand-marquee:hover .brand-track{animation-play-state:paused;}
  }
  @media (prefers-reduced-motion: reduce){
    .brand-track{animation:none;}
  }

  /* let the layout breathe a bit more on wider phones/small tablets */
  @media (min-width:540px){
    :root{--max-w:520px;}
  }

  /* ============================================================
     TABLET (>=768px) — layout mulai berubah, bukan cuma melebar
     ============================================================ */
  @media (min-width:768px){
    :root{
      --max-w:700px;
      --gutter:28px;
    }
    section{padding-top:64px;padding-bottom:64px;}
    .section-head{margin-bottom:32px;}
    .section-title{font-size:27px;}
    .section-desc{font-size:14.5px;}

    .shop-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
    .shop-card{padding:14px;gap:10px;}
    .shop-card-top{flex-direction:column;align-items:center;text-align:center;gap:10px;}
    .shop-card-thumb-wrap{width:100%;height:auto;aspect-ratio:1/1;}
    .shop-card-body{width:100%;}
    .shop-card-brand{font-size:11px;}
    .shop-card-body h3{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;}
    .shop-card-spec, .shop-card-ports{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      overflow:hidden;
      font-size:12px;
      line-height:1.4;
    }
    .shop-card-spec::after{content:none;}
    .shop-card-pricing{width:100%;text-align:center;}
    .shop-card-price{font-size:17px;text-align:center;margin-top:2px;}
    .shop-price-note{text-align:center;margin-top:2px;}
    .shop-card-actions{
      flex-direction:row;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-top:4px;
    }
    .shop-qty{justify-content:center;}
    .btn-add-cart{width:auto;font-size:12.5px;padding:9px 14px;white-space:nowrap;}

    .cart-panel{max-width:400px;}
  }

  /* ============================================================
     DESKTOP (>=1024px) — layout khusus desktop, memanfaatkan ruang
     layar secara proporsional (bukan mobile yang di-scale)
     ============================================================ */
  @media (min-width:1024px){
    :root{
      --max-w:1120px;
      --gutter:40px;
    }
    section{padding-top:88px;padding-bottom:88px;}
    .section-head{margin-bottom:36px;}
    .section-title{font-size:32px;}
    .section-desc{font-size:15px;max-width:60ch;}

    .header-inner{padding-top:18px;padding-bottom:18px;}
    .brand-logo{height:32px;width:auto;}
    .brand-name{font-size:15px;}
    .shop-grid{grid-template-columns:repeat(4,1fr);gap:18px;}

    .cart-panel{max-width:420px;}
    .modal-panel{max-width:480px;}
  }

  @media (min-width:1280px){
    :root{--max-w:1200px;}
  }

  /* ============================================================
     KONTAK & LOKASI (.kt)
     Kiri: judul, ajakan, daftar kontak, tombol WhatsApp.
     Kanan: satu foto toko, dipasang lurus (tidak dimiringkan).
     Disorot kursor, fotonya terangkat sedikit.
     Latar bergaris kotak-kotak yang memudar ke tepi, seperti contoh.
     ============================================================ */
  #kontak{position:relative;overflow:hidden;}
  #kontak > .wrap{position:relative;z-index:1;}
  #kontak::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:clamp(34px, 7vw, 52px) clamp(34px, 7vw, 52px);
    /* garisnya dibuat memudar ke tepi supaya tidak ramai */
    -webkit-mask-image:radial-gradient(ellipse at 50% 42%, #000 0%, rgba(0,0,0,0.45) 46%, transparent 74%);
    mask-image:radial-gradient(ellipse at 50% 42%, #000 0%, rgba(0,0,0,0.45) 46%, transparent 74%);
    opacity:0.75;
  }

  .kt-grid{
    display:grid;
    gap:clamp(26px, 5vw, 40px);
  }
  .kt-lead{
    max-width:46ch;
    margin-top:12px;
    font-size:clamp(14px, 3vw, 15.5px);
    line-height:1.7;
    color:var(--text-muted);
  }

  /* ---------- daftar kontak ---------- */
  .kt-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:clamp(20px, 3.4vw, 28px);
  }
  .kt-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    align-items:start;
  }
  .kt-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:36px;
    height:36px;
    border-radius:11px;
    border:1px solid var(--line-soft);
    background:rgba(27,31,44,0.7);
    color:var(--beam-bright);
  }
  .kt-ico svg{display:block;}
  .kt-item h3{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:3px;
  }
  .kt-item p{
    font-size:clamp(13.5px, 3vw, 15px);
    line-height:1.55;
    color:var(--text);
  }
  .kt-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:3px;
    font-size:clamp(13.5px, 3vw, 15px);
    font-weight:700;
    line-height:1.45;
    color:var(--beam-bright);
    text-decoration:none;
  }
  .kt-link svg{flex:none;display:block;}
  .kt-link:active{opacity:0.7;}
  @media (hover:hover){
    .kt-link:hover{text-decoration:underline;}
  }

  .kt-cta{margin-top:clamp(22px, 3.6vw, 30px);}
  .kt-cta .btn-wa-lg{width:100%;}
  .kt-arrow{
    margin-left:2px;
    transition:transform .3s var(--ease);
  }
  @media (hover:hover){
    .kt-cta .btn-wa-lg:hover .kt-arrow{transform:translateX(4px);}
  }

  /* ---------- foto toko (satu, lurus) ---------- */
  .kt-photos{
    display:flex;
    align-items:center;
    justify-content:center;
    /* ruang ekstra supaya bayangan foto tidak terpotong saat terangkat */
    padding:14px 0;
  }
  .kt-shot{
    display:block;
    width:100%;
    max-width:480px;
  }
  .kt-shot img{
    display:block;
    width:100%;
    height:auto;
    /* 5:4 = rasio asli fotonya, jadi tidak ada bagian yang terpotong */
    aspect-ratio:5 / 4;
    object-fit:cover;
    border-radius:clamp(14px, 2vw, 20px);
    border:1px solid rgba(241,239,233,0.1);
    box-shadow:0 26px 55px -22px rgba(0,0,0,0.92);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  @media (hover:hover){
    .kt-shot:hover img{
      transform:translateY(-10px) scale(1.015);
      box-shadow:0 36px 68px -20px rgba(0,0,0,0.95);
    }
  }

  /* muncul dari kanan (untuk kolom foto), bukan dari bawah */
  html.js .reveal-x{
    opacity:0;
    transform:translateX(30px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  html.js .reveal-x.is-visible{
    opacity:1;
    transform:none;
  }

  @media (min-width:900px){
    .kt-grid{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:clamp(36px, 5vw, 60px);
      align-items:center;
    }
    .kt-cta .btn-wa-lg{width:auto;display:inline-flex;padding:18px 30px;}
    .kt-photos{padding:22px 0;}
    .kt-shot{max-width:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .kt-shot img,
    .kt-arrow{transition:none;}
    html.js .reveal-x{opacity:1;transform:none;transition:none;}
  }

  /* ============================================================
     DOKUMENTASI (.doc) — gabungan section "Stok Gudang" dan
     "Momen Serah Terima" jadi satu mozaik foto 3 dimensi.

     Empat kolom foto berjalan otomatis ke atas & ke bawah bergantian,
     lalu seluruh blok dimiringkan pakai perspective supaya terlihat
     seperti dinding foto. Tepinya dibuat memudar ke warna background
     di keempat sisi.

     Ukuran kartu memakai rasio asli foto (380 x 676), jadi TIDAK ADA
     bagian foto yang terpotong.

     Isi tiap kolom ditulis 2x persis sama; jarak antar foto memakai
     margin-bottom (bukan gap) supaya geser 50% jatuh tepat di batas
     set -> sambungannya mulus tanpa lompat.
     ============================================================ */
  .doc-stage{
    --doc-w:clamp(80px, 13vw, 148px);
    --doc-gap:clamp(9px, 1.3vw, 15px);
    position:relative;
    height:clamp(360px, 64vw, 540px);
    overflow:hidden;
    border-radius:var(--radius-lg);
    perspective:clamp(700px, 80vw, 1250px);
  }
  .doc-3d{
    position:absolute;
    left:50%;
    top:50%;
    display:flex;
    gap:var(--doc-gap);
    transform:translate(-50%, -50%)
              rotateX(18deg) rotateY(-10deg) rotateZ(16deg)
              scale(1.08);
    transform-style:preserve-3d;
  }
  .doc-col{
    display:flex;
    flex-direction:column;
    flex:0 0 auto;
    width:var(--doc-w);
    will-change:transform;
    animation:doc-up 52s linear infinite;
  }
  /* kolom genap jalan ke arah sebaliknya */
  .doc-col-down{animation-name:doc-down;}
  /* durasi tiap kolom sengaja dibedakan sedikit supaya tidak terlihat
     bergerak serempak seperti balok kaku */
  .doc-col:nth-child(1){animation-duration:52s;}
  .doc-col:nth-child(2){animation-duration:61s;}
  .doc-col:nth-child(3){animation-duration:46s;}
  .doc-col:nth-child(4){animation-duration:57s;}
  .doc-col:nth-child(5){animation-duration:64s;}
  .doc-col:nth-child(6){animation-duration:50s;}
  @keyframes doc-up{
    from{transform:translate3d(0, 0, 0);}
    to{transform:translate3d(0, -50%, 0);}
  }
  @keyframes doc-down{
    from{transform:translate3d(0, -50%, 0);}
    to{transform:translate3d(0, 0, 0);}
  }
  .doc-item{
    display:block;
    width:100%;
    /* rasio asli foto -> tidak ada yang terpotong */
    aspect-ratio:380 / 676;
    margin-bottom:var(--doc-gap);
    border-radius:clamp(8px, 1.2vw, 14px);
    overflow:hidden;
    background:var(--bg-surface);
    border:1px solid rgba(241,239,233,0.08);
    box-shadow:0 14px 30px -14px rgba(0,0,0,0.8);
    cursor:zoom-in;
  }
  .doc-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .doc-item:active{opacity:0.8;}

  /* tepi memudar di keempat sisi */
  .doc-stage::before,
  .doc-stage::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .doc-stage::before{
    background:
      linear-gradient(to bottom, var(--bg-void) 0%, rgba(16,18,26,0) 26%),
      linear-gradient(to top, var(--bg-void) 0%, rgba(16,18,26,0) 26%);
  }
  .doc-stage::after{
    background:
      linear-gradient(to right, var(--bg-void) 0%, rgba(16,18,26,0) 20%),
      linear-gradient(to left, var(--bg-void) 0%, rgba(16,18,26,0) 20%);
  }

  .doc-hint{
    margin-top:14px;
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
  }

  /* berhenti sebentar kalau kursor diarahkan ke mozaiknya */
  @media (hover:hover){
    .doc-stage:hover .doc-col{animation-play-state:paused;}
  }

  @media (min-width:900px){
    .doc-stage{height:clamp(440px, 42vw, 560px);}
  }

  /* kalau pengguna minta animasi dikurangi: diam, tapi mozaiknya
     tetap tampil utuh */
  @media (prefers-reduced-motion: reduce){
    .doc-col{animation:none;}
  }

  /* ============================================================
     ALASAN MEMILIH KAMI (.feat) — kisi poin singkat
     Delapan poin pendek dalam kisi bergaris. Disorot kursor: latar
     kartu menyala dari bawah, garis penanda di kiri judul memanjang
     & berubah warna, judulnya bergeser sedikit ke kanan.
     Garis pemisah dibuat pakai gap 1px berlatar warna garis, jadi
     otomatis benar di 1, 2, maupun 4 kolom tanpa aturan tambahan.
     ============================================================ */
  .feat-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--line-soft);
    border:1px solid var(--line-soft);
    border-radius:var(--radius-lg);
    overflow:hidden;
  }
  .feat{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:24px 22px;
    background:var(--bg-void);
    overflow:hidden;
  }
  .feat::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(to top, rgba(27,31,44,0.95) 0%, rgba(27,31,44,0) 75%);
    transition:opacity .25s var(--ease);
  }
  .feat-ico{
    position:relative;
    z-index:1;
    display:inline-flex;
    margin-bottom:14px;
    color:var(--text-muted);
    transition:color .25s var(--ease), transform .25s var(--ease);
  }
  .feat-ico svg{display:block;}
  .feat-title{
    position:relative;
    z-index:1;
    font-size:clamp(15px, 3.4vw, 16.5px);
    line-height:1.3;
    color:var(--text);
    margin-bottom:7px;
  }
  /* garis penanda di tepi kiri kartu */
  .feat-title::before{
    content:"";
    position:absolute;
    left:-22px;
    top:50%;
    width:3px;
    height:17px;
    border-radius:0 3px 3px 0;
    background:var(--line-soft);
    transform:translateY(-50%);
    transition:height .25s var(--ease), background .25s var(--ease);
  }
  .feat-title span{
    display:inline-block;
    transition:transform .25s var(--ease);
  }
  .feat-desc{
    position:relative;
    z-index:1;
    font-size:clamp(12.5px, 2.9vw, 13.5px);
    line-height:1.6;
    color:var(--text-muted);
  }
  @media (hover:hover){
    .feat:hover::before{opacity:1;}
    .feat:hover .feat-ico{color:var(--beam-bright);transform:translateY(-2px);}
    .feat:hover .feat-title::before{height:26px;background:var(--beam);}
    .feat:hover .feat-title span{transform:translateX(6px);}
  }
  @media (min-width:600px){
    .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .feat{padding:26px 24px;}
    .feat-title::before{left:-24px;}
  }
  @media (min-width:1024px){
    .feat-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
    .feat{padding:30px 26px;}
    .feat-title::before{left:-26px;}
  }
  @media (prefers-reduced-motion: reduce){
    .feat::before,
    .feat-ico,
    .feat-title::before,
    .feat-title span{transition:none;}
  }

  /* ============================================================
     SERTIFIKAT & PENGHARGAAN (.cert2)
     Dua sertifikat dipasang miring saling bersandar. Disorot kursor:
     yang disorot terangkat, miringnya berkurang, dan yang satunya
     menyibak menjauh — gerakan yang sama seperti kartu brosur.
     Ketuk untuk lihat versi besar (lightbox yang sudah ada).
     ============================================================ */
  .cert2-row{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 0;
  }
  .cert2-card{
    flex:0 0 auto;
    width:clamp(146px, 39vw, 330px);
    cursor:zoom-in;
    -webkit-tap-highlight-color:transparent;
  }
  .cert2-card img{
    display:block;
    width:100%;
    height:auto;                 /* rasio asli, tidak ada yang terpotong */
    border-radius:clamp(10px, 1.4vw, 16px);
    background:#ffffff;
    border:1px solid rgba(241,239,233,0.12);
    box-shadow:0 24px 50px -22px rgba(0,0,0,0.9);
    transition:transform .45s cubic-bezier(.34, 1.42, .58, 1),
               box-shadow .35s var(--ease);
  }
  .cert2-card:first-child{margin-right:-5%;z-index:2;}
  .cert2-card:last-child{z-index:1;}
  .cert2-card:first-child img{transform:rotate(-5deg);}
  .cert2-card:last-child img{transform:rotate(5deg);}
  .cert2-card:active img{opacity:0.85;}
  @media (hover:hover){
    .cert2-card:first-child:hover img{
      transform:rotate(-2deg) translateY(-12px) scale(1.04);
      box-shadow:0 34px 62px -20px rgba(0,0,0,0.95);
    }
    .cert2-card:last-child:hover img{
      transform:rotate(2deg) translateY(-12px) scale(1.04);
      box-shadow:0 34px 62px -20px rgba(0,0,0,0.95);
    }
    /* kartu yang tidak disorot menyibak menjauh */
    .cert2-card:first-child:hover + .cert2-card img{transform:rotate(7deg) translateX(22px);}
    .cert2-row:has(.cert2-card:last-child:hover) .cert2-card:first-child img{
      transform:rotate(-7deg) translateX(-22px);
    }
  }
  /* label kecil pemisah dua kelompok bukti */
  .cert2-sub{
    margin-bottom:6px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .cert2-sub-gap{margin-top:clamp(30px, 5vw, 44px);}

  /* ---------- kartu reputasi toko online ---------- */
  .rep-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(14px, 2.4vw, 22px);
    margin-top:4px;
  }
  /* Kartunya sengaja berlatar GELAP dengan tangkapan layar putih di
     dalamnya, bukan kartu putih polos. Alasannya: garis cahaya yang
     berputar hampir tidak terlihat kalau berjalan di atas tepi putih.
     Dengan bingkai gelap, cahayanya jadi kontras dan langsung kelihatan. */
  .rep-card{
    position:relative;
    display:block;
    margin:0;
    padding:clamp(9px, 1.4vw, 13px);
    border-radius:18px;
    background:var(--bg-surface);
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 20px 44px -24px rgba(0,0,0,0.9);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .rep-shot{
    display:block;
    border-radius:11px;
    overflow:hidden;
    background:#ffffff;
  }
  .rep-card img{
    display:block;
    width:100%;
    height:auto;      /* rasio asli tangkapan layar, tidak dipotong */
  }
  .rep-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:11px 10px 3px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--beam-bright);
  }
  .rep-cta svg{flex:none;display:block;transition:transform .25s var(--ease);}
  .rep-card:active{transform:scale(0.99);}
  @media (hover:hover){
    .rep-card:hover{
      transform:translateY(-4px);
      box-shadow:0 30px 56px -22px rgba(0,0,0,0.95);
    }
    .rep-card:hover .rep-cta svg{transform:translate(3px,-3px);}
  }
  /* garis cahaya di kartu reputasi dibuat paling menonjol di halaman:
     lebih tebal, lebih cepat, berkas terangnya lebih lebar, dan
     diberi pendar supaya benar-benar menarik mata */
  .rep-card .beam{--beam-w:3px;--beam-dur:8s;}
  /* berkas terangnya dibuat lebih lebar & lebih menyala daripada di
     section lain, karena ini penanda utama di halaman */
  .rep-card .beam::before{
    background:conic-gradient(
      from 0deg,
      transparent 0%,
      transparent 46%,
      var(--beam) 64%,
      #fff1d6 74%,
      var(--beam) 82%,
      transparent 96%,
      transparent 100%);
  }
  /* kartu kedua dimulai dari sudut berbeda, biar tidak berputar seragam */
  .rep-card:nth-child(2) .beam::before{animation-delay:-4s;}

  @media (min-width:820px){
    .rep-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  }
  @media (prefers-reduced-motion: reduce){
    .rep-card,
    .rep-cta svg{transition:none;}
  }

  .cert2-hint{
    margin-top:12px;
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
  }
  @media (prefers-reduced-motion: reduce){
    .cert2-card img{transition:none;}
  }

  /* ============================================================
     GARIS CAHAYA BERPUTAR (.has-beam + <span class="beam">)

     Seberkas cahaya yang berjalan mengelilingi tepi sebuah kotak.

     Cara kerjanya: <span class="beam"> dipasang menutupi kotaknya,
     lalu "dilubangi" pakai mask sehingga yang tersisa hanya bingkai
     setebal --beam-w. Di dalamnya ada satu lapisan conic-gradient
     besar yang DIPUTAR pakai transform: rotate().

     Kenapa transform, bukan menganimasikan sudut gradient:
     menganimasikan sudut butuh @property, dan itu (a) tidak jalan di
     browser lama, dan (b) di sebagian kasus gambarnya tidak digambar
     ulang walau nilainya berubah -- hasilnya bingkai diam padahal
     animasinya "berjalan". transform: rotate() didukung semua browser
     dan dijalankan di compositor, jadi mulus juga di HP.

     Animasinya berhenti selama kotaknya belum kelihatan di layar
     (menumpang penanda .is-visible dari .reveal) supaya tidak
     membebani HP saat bagian ini masih jauh dari pandangan.
     ============================================================ */
  .has-beam{position:relative;}
  .beam{
    position:absolute;
    inset:0;
    z-index:3;
    border-radius:inherit;
    pointer-events:none;
    overflow:hidden;
    padding:var(--beam-w, 1.6px);
    /* lubangi bagian tengahnya, sisakan bingkainya saja */
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
  .beam::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:150%;
    aspect-ratio:1;
    transform:translate(-50%, -50%) rotate(0deg);
    background:conic-gradient(
      from 0deg,
      transparent 0%,
      transparent 58%,
      var(--beam) 72%,
      #ffdca8 78%,
      transparent 90%,
      transparent 100%);
    animation:beam-spin var(--beam-dur, 12s) linear infinite;
    will-change:transform;
  }
  @keyframes beam-spin{
    from{transform:translate(-50%, -50%) rotate(0deg);}
    to{transform:translate(-50%, -50%) rotate(360deg);}
  }
  /* tanpa JS: langsung jalan. Dengan JS: diam dulu sampai kelihatan. */
  html.js .beam::before{animation-play-state:paused;}
  html.js .reveal.is-visible .beam::before,
  html.js .reveal.is-visible.has-beam .beam::before{animation-play-state:running;}

  /* ---------- pemakaian: kisi alasan memilih kami ---------- */
  .feat-grid .beam{--beam-w:1.6px;--beam-dur:14s;}

  /* ---------- pemakaian: foto toko ---------- */
  .kt-frame{
    position:relative;
    display:block;
    border-radius:clamp(14px, 2vw, 20px);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .kt-frame .beam{--beam-w:2px;--beam-dur:11s;}
  .kt-shot img{
    /* radius & bayangan pindah ke .kt-frame, gambar tinggal mengisi */
    border-radius:inherit;
    box-shadow:none;
    transition:none;
  }
  .kt-frame{
    box-shadow:0 26px 55px -22px rgba(0,0,0,0.92);
  }
  .kt-frame > img{
    border-radius:clamp(14px, 2vw, 20px);
    border:1px solid rgba(241,239,233,0.1);
  }
  @media (hover:hover){
    .kt-shot:hover .kt-frame{
      transform:translateY(-10px) scale(1.015);
      box-shadow:0 36px 68px -20px rgba(0,0,0,0.95);
    }
    /* aturan lama yang menggerakkan <img> dimatikan, sekarang yang
       bergerak bingkainya supaya garis cahayanya ikut naik */
    .kt-shot:hover img{transform:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .beam::before{animation:none;}
    .kt-frame{transition:none;}
  }

  /* ============================================================
     TOMBOL PELANGI (.btn-rainbow)
     Dibuat sama persis seperti komponen aslinya (versi dark mode):
     isi tombol PUTIH dengan teks gelap, sudut rounded-xl (12px), dan
     pelanginya hanya muncul di tepi BAWAH tombol plus seberkas
     cahaya buram di bawahnya.

     Tiga lapis background dalam satu elemen:
       1. putih polos                      -> mengisi bagian dalam
       2. putih memudar ke bawah           -> menutupi pelangi di
                                              sisi atas & samping
       3. gradient pelangi                 -> tersisa di tepi bawah
     Border dibuat transparan supaya lapisan 2 & 3 terlihat di situ.
     Semua lapisan digeser bersamaan (background-position 0% -> 200%,
     2 detik, linear) -- sama seperti aslinya.
     ============================================================ */
  :root{
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
    --rainbow: linear-gradient(90deg,
      hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)),
      hsl(var(--color-4)), hsl(var(--color-2)));
  }
  @keyframes rainbow{
    from{background-position:0%;}
    to{background-position:200%;}
  }

  .btn-rainbow,
  .btn-wa-lg.btn-rainbow,
  .btn-shop-teaser.btn-rainbow{
    --rb-speed:2s;
    border:2px solid transparent;
    border-radius:12px;
    color:#121213;
    box-shadow:none;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(#fff 50%, rgba(255,255,255,0.6) 80%, rgba(255,255,255,0)) border-box,
      var(--rainbow) border-box;
    background-size:200%;
    animation:rainbow var(--rb-speed) linear infinite;
  }
  /* cahaya pelangi buram di bawah tombol */
  .btn-rainbow::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-20%;
    z-index:0;
    width:60%;
    height:20%;
    transform:translateX(-50%);
    background:var(--rainbow);
    background-size:200%;
    filter:blur(12.8px);
    pointer-events:none;
    animation:rainbow var(--rb-speed) linear infinite;
  }
  .btn-rainbow > *{position:relative;z-index:1;}

  /* aturan lama memakai properti singkat `background` / `box-shadow`,
     kalau dibiarkan bakal menghapus lapisan gradient di atas */
  .btn-wa-lg.btn-rainbow:active,
  .btn-shop-teaser.btn-rainbow:active{
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(#fff 50%, rgba(255,255,255,0.6) 80%, rgba(255,255,255,0)) border-box,
      var(--rainbow) border-box;
    background-size:200%;
    transform:scale(0.97);
  }
  @media (hover:hover){
    .btn-wa-lg.btn-rainbow:hover,
    .btn-shop-teaser.btn-rainbow:hover{
      background:
        linear-gradient(#f2f2f3, #f2f2f3) padding-box,
        linear-gradient(#f2f2f3 50%, rgba(242,242,243,0.6) 80%, rgba(242,242,243,0)) border-box,
        var(--rainbow) border-box;
      background-size:200%;
      box-shadow:none;
    }
  }
  /* denyut cahaya hijau di tombol hero dimatikan -- isinya sudah putih,
     glow hijau di situ jadi tidak nyambung */
  .btn-wa-lg-ringed.btn-rainbow{
    animation:rainbow var(--rb-speed) linear infinite;
  }

  @media (prefers-reduced-motion: reduce){
    .btn-rainbow,
    .btn-rainbow::before,
    .btn-wa-lg-ringed.btn-rainbow{animation:none;}
  }

/* ---------- tombol "Bagikan" kecil di kartu produk ---------- */
.shop-card-share{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(16,18,26,0.7);
  border:1px solid rgba(245,169,76,0.55);
  color:var(--beam);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transition:background .2s var(--ease), transform .15s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.shop-card-share svg{width:15px;height:15px;}
.shop-card-share:active{transform:scale(0.9);}
@media (hover:hover){
  .shop-card-share:hover{background:var(--beam);border-color:var(--beam);color:#201c14;}
}

/* menu kecil "Salin Link / Bagikan via WhatsApp" -- fallback untuk
   browser yang belum dukung Web Share API asli (kebanyakan desktop) */
.dop-share-menu{
  position:fixed;
  z-index:9999;
  min-width:198px;
  background:var(--bg-surface);
  border:1px solid var(--line-soft);
  border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,0.85);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  animation:dop-menu-in .16s var(--ease);
}
@keyframes dop-menu-in{
  from{opacity:0; transform:translateY(-4px);}
  to{opacity:1; transform:translateY(0);}
}
.dop-share-menu button,
.dop-share-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:8px;
  background:transparent;
  border:0;
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
}
.dop-share-menu svg{flex:none;color:var(--beam);}
@media (hover:hover){
  .dop-share-menu button:hover,
  .dop-share-menu a:hover{background:var(--bg-void);}
}

/* notifikasi kecil "Link produk disalin" di bagian bawah layar */
.dop-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%, 10px);
  background:#1b1f2c;
  border:1px solid var(--line-soft);
  color:var(--text);
  padding:11px 20px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 16px 34px -14px rgba(0,0,0,0.9);
  opacity:0;
  z-index:10000;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none;
  white-space:nowrap;
}
.dop-toast.is-visible{opacity:1; transform:translate(-50%, 0);}

@media (prefers-reduced-motion: reduce){
  .dop-share-menu{animation:none;}
  .dop-toast{transition:none;}
}