/* AVANA - dibangun dari avana-prototype.html oleh build-joomla.ps1, versi 2.6.1 */
:root{
  --cobalt:#0a2177; --ocean:#0f46cb; --bluegreen:#179ec5; --teal-ink:#0a5f7a; --gold:#f69c00;
  --ink:#0f0f0f; --ink-soft:#454c60; --ink-faint:#5b6478;
  --night:#0a1330;
  --paper:#fafafa; --panel:#e9edfb; --tint:#f2f5fe; --line:#dde2f1; --line-strong:#7a8cc4; --white:#ffffff;
  --grad:linear-gradient(128deg,#0a2177 0%,#0f46cb 54%,#179ec5 118%);
  --green:#15825a; --green-bg:#e7f7ef;
  --font:'Poppins','Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Rubik','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Rubik','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* elevasi: 3 token, dipakai berdasarkan peran bukan selera */
  --sh-1:0 1px 2px rgba(10,33,119,.06);
  --sh-2:0 4px 16px -6px rgba(10,33,119,.16);
  --sh-3:0 20px 44px -22px rgba(10,33,119,.32);
  /* motion: 2 durasi, 1 kurva */
  --t-fast:.16s;
  --t-base:.34s;   /* angka drawer: dipakai untuk SEMUA gerakan */
  --t-slow:.5s;    /* suasana: cahaya, pancaran, pudar masuk */
  --ease:cubic-bezier(.23,1,.32,1);  /* meluncur berhenti, bukan tiba */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;
  /* sisakan ruang bilah gulir selamanya. tanpa ini, mengunci scroll saat
     drawer dibuka menghilangkan bilah gulir dan seluruh halaman melompat. */
  scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--ocean);outline-offset:2px;border-radius:4px}
/* judul untuk pembaca layar: memperbaiki urutan heading tanpa mengubah tampilan */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-0px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cobalt);color:#fff;padding:8px 16px;border-radius:0 0 8px 0;font-size:12px;font-weight:600}
.skip:focus{left:0}
h1,h2,h3,h4{margin:0;font-weight:700;font-family:var(--display);letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
address{font-style:normal}
a,button,[role=button],summary,label,select{cursor:pointer}
a[href="#"]:not([data-x]):not([data-jump]):not([data-cat]):not([data-region]){cursor:default}
code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* hormati pengguna yang mematikan animasi di setelan sistem */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,56px)}
.band{padding-block:clamp(40px,6.9vw,88px)}
.band.dim{background:var(--panel)}
.band.tight{padding-block:clamp(24px,4.4vw,56px)}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:700;color:var(--cobalt);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.section-head p{max-width:42ch;color:var(--ink-soft);font-size:14px;padding-bottom:4px}
/* tombol: cahaya menyebar dari tengah saat disorot. background-image dipakai
   sebagai lapisan cahaya supaya tidak perlu elemen tambahan di dalam tombol. */
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;font-family:inherit;gap:8px;font-weight:700;font-size:14px;padding:12px 20px;border-radius:8px;white-space:nowrap;border:none;cursor:pointer;
  background-image:linear-gradient(100deg,transparent 38%,var(--sheen,transparent) 50%,transparent 62%);
  background-repeat:no-repeat;background-position:100% 50%;background-size:300% 100%}
.btn:hover{background-position:0% 50%}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-solid{background-color:var(--cobalt);color:#fff;--sheen:rgba(255,255,255,.3)}
.btn-gold{background-color:var(--gold);color:var(--cobalt);--sheen:rgba(255,255,255,.45)}
.btn-wa{background-color:var(--green);color:#fff;--sheen:rgba(255,255,255,.32)}
.btn-ghost{border:1px solid var(--line-strong);background-color:#fff;color:var(--cobalt)}
.btn-cart{background-color:var(--white);border:1px solid var(--cobalt);color:var(--cobalt)}
.btn-lg{font-size:14px;padding:12px 24px}
/* keranjang ikut keluarga pil yang sama dengan menu nav */
.cart-link{position:relative;display:inline-flex;align-items:center;gap:12px;padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--ink-soft);
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.cart-link:hover{background-color:var(--tint);color:var(--cobalt)}
.cart-link svg{width:19px;height:19px}
.cart-ic{position:relative;display:inline-flex}
/* angka dikunci ke tinggi kotak lewat line-height, bukan flex: flex ikut metrik font dan membuat digit turun */
.cart-count{position:absolute;top:-8px;right:-10px;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--gold);color:var(--cobalt);font-family:'Rubik',system-ui,sans-serif;font-size:12px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fafafa;pointer-events:none}
.cart-count[hidden]{display:none}
/* angka keranjang memantul sekali saat barang masuk: umpan balik, bukan hiasan */
.cart-count.bump{animation:cartBump var(--t-base) var(--ease)}
@keyframes cartBump{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1)}}
.btn-cart.done{background-color:var(--green);border-color:var(--green);color:#fff}
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;font-weight:500;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink-soft)}
.chip--cct::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.filter{font-size:12px;font-weight:500;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);cursor:pointer;transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.filter:hover{background-color:var(--tint);border-color:var(--line-strong);color:var(--cobalt)}
header{border-bottom:1px solid var(--line);background:#fafafa;position:sticky;top:0;z-index:50;
  transition:box-shadow var(--t-base) ease,background var(--t-base) ease}
/* garis tipis gradien di bawah header, muncul begitu halaman digeser */
header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);
  opacity:0;transition:opacity var(--t-base) ease;pointer-events:none}
header.scrolled::after{opacity:.92}
header.scrolled{background:rgba(250,250,250,.82);
  box-shadow:0 6px 22px -14px rgba(15,15,15,.22),inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%)}
header.scrolled .header-row{padding-block:12px}
.header-row{display:flex;align-items:center;gap:24px;padding-block:16px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo .mark{display:block;width:94px;height:26px;background:url(../images/ui/logo-mark.png) left center/contain no-repeat}
/* ---- search: elemen paling menonjol di header ---- */
.hsearch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 12px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  transition:border-color var(--t-fast) ease,box-shadow var(--t-base) var(--ease)}
.hsearch:focus-within{border-color:var(--ocean);box-shadow:0 0 0 4px rgba(15,70,203,.12)}
.hsearch svg{width:18px;height:18px;color:var(--ink-faint);flex-shrink:0}
.hsearch input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--font);font-size:14px;color:var(--ink)}
.hsearch input::placeholder{color:var(--ink-faint)}
.hsearch button{flex-shrink:0;height:36px;padding:0 20px;border:none;border-radius:999px;background:var(--grad);color:#fff;
  font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease)}
.hsearch button:hover{box-shadow:0 0 0 5px rgba(15,70,203,.14)}
.hsearch button:active{transform:scale(.96)}
/* ---- panel saran pencarian: riwayat, saran produk/kategori/blog ---- */
.hsearch{position:relative}
.hsearch .hs-back{display:none;flex-shrink:0;width:40px;height:40px;padding:0;align-items:center;justify-content:center;border-radius:999px;background:none;color:var(--ink)}
.hsearch .hs-back:hover{box-shadow:none;background:var(--tint)}
.hsearch .hs-back:active{transform:none}
.hsearch .hs-back svg{width:22px;height:22px;color:var(--ink)}
.hs-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);padding:8px 0}
.hs-panel[hidden]{display:none}
.hs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.hsearch .hs-clear{height:auto;padding:0;border-radius:0;background:none;color:var(--ocean);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.hsearch .hs-clear:hover{box-shadow:none;text-decoration:underline}
.hs-list{list-style:none;margin:0;padding:0}
.hs-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px;cursor:pointer;color:var(--ink)}
.hs-opt:hover,.hs-opt[aria-selected="true"]{background:var(--tint)}
.hs-ic{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--panel);color:var(--cobalt);display:grid;place-items:center}
.hsearch .hs-ic svg{width:16px;height:16px;color:currentColor}
.hs-tx{display:flex;flex-direction:column;min-width:0}
.hs-main{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-main b{font-weight:700;color:var(--cobalt)}
.hs-sub{margin-top:0px;font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 12px}
.hsearch .hs-chip{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);font-family:var(--font);font-size:12px;font-weight:500}
.hsearch .hs-chip:hover{box-shadow:none;border-color:var(--cobalt);color:var(--cobalt)}
.hsearch .hs-chip:active{transform:none}
.hs-empty{padding:12px 16px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
/* kotak cari sudah punya cincin fokus sendiri, jadi input di dalamnya tidak perlu garis kedua */
.hsearch input:focus,.hsearch input:focus-visible{outline:none;box-shadow:none}
/* di HP, pencarian dibuka jadi layar penuh seperti aplikasi marketplace */
@media(max-width:640px){
  .hsearch.is-open{position:fixed;left:0;right:0;top:0;z-index:90;height:64px;padding:0 16px 0 8px;border:none;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
  .hsearch.is-open .hs-back{display:flex}
  .hsearch.is-open>svg{display:none}
  .hsearch.is-open input{font-size:16px}
  .hs-panel{position:fixed;left:0;right:0;top:64px;bottom:0;max-height:none;border:none;border-radius:0;box-shadow:none}
  .hs-lock body{overflow:hidden}
  /* header yang sudah digeser memakai backdrop-filter, dan itu mengurung elemen fixed di dalamnya. matikan saat pencarian layar penuh terbuka */
  .hs-lock header,.hs-lock header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hs-lock .fab{display:none}
}
/* ---- baris nav di bawah search ---- */
/* tombol Kategori dan menu berkelompok di kiri, catatan garansi didorong
   ke kanan. space-between dengan tiga anak akan merenggangkan menunya. */
.nav-row{display:flex;align-items:center;gap:16px;padding-bottom:12px}
.nav-row .nav-note{margin-left:auto}
/* nav jadi pil: area kliknya lebih besar dan halaman aktif langsung kebaca */
.primary-nav{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ink-soft)}
.primary-nav a{padding:8px 12px;border-radius:999px;white-space:nowrap;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.primary-nav a:hover{background-color:var(--tint);color:var(--cobalt)}
.primary-nav a[aria-current=page]{background-color:var(--panel);color:var(--cobalt);font-weight:600}
.nav-note{font-size:12px;color:var(--ink-faint);white-space:nowrap}
/* mega menu Produk: kategori langsung terlihat dari menu utama, tidak disembunyikan di hamburger */
.nav-mega{display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:14px;line-height:inherit;color:inherit;background:none;border:none;padding:8px 12px 8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.nav-mega svg{width:16px;height:16px;transition:transform var(--t-base) var(--ease)}
.nav-mega:hover,.nav-mega[aria-expanded="true"]{background-color:var(--tint);color:var(--cobalt)}
.nav-mega[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-mega.cur{background-color:var(--panel);color:var(--cobalt);font-weight:600}
.nav-mega:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(15,15,15,.28);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s linear var(--t-base)}
.mega.on{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s}
.mega-in{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding-block:24px}
.mega-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mega-grid a{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);
  transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.mega-grid a:hover{border-color:var(--cobalt);background-color:var(--tint)}
.mega-grid .mi{width:36px;height:36px;border-radius:8px;background:var(--tint);color:var(--cobalt);display:grid;place-items:center}
.mega-grid .mi svg{width:20px;height:20px}
.mega-grid b{font-family:'Rubik',system-ui,sans-serif;font-size:14px;font-weight:700;line-height:1.3;color:var(--cobalt)}
.mega-grid p{font-size:12px;line-height:1.5;color:var(--ink-soft)}
.mega-grid .w{margin-top:auto;font-size:12px;color:var(--ink-faint)}
.mega-side{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;background:var(--panel)}
.mega-side b{font-family:'Rubik',system-ui,sans-serif;font-size:14px;color:var(--cobalt)}
.mega-side p{font-size:12px;line-height:1.5;color:var(--ink-soft)}
.mega-side .mega-link{font-size:14px;font-weight:600;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.mega-side .btn{margin-top:auto;align-self:flex-start}
@media(max-width:1180px){.mega-in{grid-template-columns:minmax(0,1fr)}
  .mega-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}.mega-side .btn{margin-top:0;margin-left:auto}}
/* menu sekunder di kanan: isinya sama dengan bagian "Lainnya" di drawer HP dan footer */
.nav-sec{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-sec a{padding:8px 8px;border-radius:999px;font-size:12px;color:var(--ink-faint);white-space:nowrap;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.nav-sec a:hover{background-color:var(--tint);color:var(--cobalt)}
.nav-sec a[aria-current=page]{color:var(--cobalt);font-weight:600}
@media(max-width:1100px){.nav-sec{display:none}}
@media(max-width:900px){.mega{display:none}}
@media(prefers-reduced-motion:reduce){.mega,.mega.on,.nav-mega svg{transition:none}}
@media(max-width:900px){.nav-row{display:none}}
@media(max-width:640px){.hsearch>button[type="submit"]{display:none}.hsearch{padding-right:12px}}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--white);cursor:pointer;padding:0;flex-shrink:0}
.nav-toggle:hover{background:var(--tint);border-color:var(--line-strong)}
.nav-toggle span{display:block;width:16px;height:2px;border-radius:4px;background:var(--ink);margin:0 auto;transition:transform var(--t-base) var(--ease),opacity var(--t-fast) ease}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ---- drawer menu HP: panel geser + scrim, bukan daftar dorong ---- */
.scrim{position:fixed;inset:0;background:rgba(10,19,48,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--t-base) var(--ease);z-index:60}
.scrim.on{opacity:1}
.scrim[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(94vw,420px);background:var(--white);z-index:70;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(101%);transition:transform var(--t-base) var(--ease);box-shadow:var(--sh-3)}
.drawer.on{transform:none}
.drawer[hidden]{display:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:1}
.drawer-x{width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:background var(--t-fast) ease,border-color var(--t-fast) ease}
.drawer-x:hover{background:var(--tint);border-color:#c3ccec}
.drawer-x svg{width:18px;height:18px}
.drawer-sec{padding:16px 20px 4px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
/* grid ikon + label, pola mega-menu kategori */
.drawer nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,164px),1fr));gap:4px;padding:4px 12px 8px}
.drawer nav a{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px;border-radius:8px;
  font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);
  transition:background var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.drawer nav a:hover{background:var(--tint)}
.drawer nav a:active{transform:scale(.97)}
.mi{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--panel);color:var(--cobalt);
  display:flex;align-items:center;justify-content:center;transition:background var(--t-fast) ease,color var(--t-fast) ease}
.drawer nav a:hover .mi{background:var(--cobalt);color:#fff}
.mi svg{width:20px;height:20px}
.drawer-div{height:1px;background:var(--line);margin:8px 20px}
.drawer-foot{margin-top:auto;padding:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.drawer-foot .btn{width:100%}
.drawer-note{font-size:12px;color:var(--ink-faint);text-align:center}
/* muncul bertahap saat drawer dibuka */
.drawer.on nav a{animation:drwIn var(--t-base) var(--ease) backwards}
.drawer.on nav a:nth-child(1){animation-delay:.04s}
.drawer.on nav a:nth-child(2){animation-delay:.08s}
.drawer.on nav a:nth-child(3){animation-delay:.12s}
.drawer.on nav a:nth-child(4){animation-delay:.16s}
.drawer.on nav a:nth-child(5){animation-delay:.2s}
.drawer.on nav a:nth-child(6){animation-delay:.24s}
.drawer-top-r{display:flex;align-items:center;gap:12px}
@keyframes drwIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* drawer kini dipakai di dua tempat: hamburger di HP dan tombol Kategori di
   desktop. jadi jangan disembunyikan di layar lebar. */
.header-right{display:flex;align-items:center;gap:12px}
/* switch bahasa: satu jempol yang bergeser, bukan dua tombol yang berganti warna */
.lang-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--white);flex-shrink:0;isolation:isolate}
.lang-switch--drawer{display:none}
.ls-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--cobalt);
  box-shadow:0 1px 3px rgba(10,33,119,.3);transition:transform var(--t-base) var(--ease);z-index:-1}
.lang-switch[data-l="en"] .ls-thumb{transform:translateX(100%)}
.lang-switch button{min-width:32px;font-family:var(--mono);font-size:12px;font-weight:700;padding:4px 8px;border:none;border-radius:999px;background:none;color:var(--ink-faint);cursor:pointer;line-height:1.2;transition:color var(--t-base) var(--ease)}
.lang-switch button:hover{color:var(--cobalt)}
.lang-switch button.on,.lang-switch button.on:hover{color:#fff}
.lang-switch button:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
/* saat bahasa berganti, isi halaman meredup sebentar supaya pergantian teks tidak terasa berkedip */
main,footer,.primary-nav,.nav-sec{transition:opacity var(--t-fast) ease}
.lang-swap main,.lang-swap footer,.lang-swap .primary-nav,.lang-swap .nav-sec{opacity:.25}
@media(prefers-reduced-motion:reduce){.ls-thumb{transition:none}.lang-swap main,.lang-swap footer,.lang-swap .primary-nav,.lang-swap .nav-sec{opacity:1}}
.p-hero{padding-block:clamp(24px,4.4vw,56px) 40px;border-bottom:3px solid transparent;border-image:var(--grad) 1;background:linear-gradient(180deg,var(--tint),var(--white))}
.p-hero .crumbs a{color:var(--ocean)}
.p-hero h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;max-width:20ch}
.p-hero .lead{margin-top:16px;max-width:60ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.p-hero .hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.crumbs{font-size:12px;color:var(--ink-faint);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
/* ---- kartu produk: padat, gambar 1:1, judul 2 baris ---- */
.card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.card:hover{border-color:var(--line-strong)}
/* SELURUH kartu bisa diklik, bukan cuma tautan kecil di bawah. area tautan
   "Lihat detail" dibentangkan menutupi kartu lewat elemen semu, jadi tidak
   perlu membungkus kartu dengan <a> (itu akan menaruh <button> di dalam <a>,
   yang tidak sah). tombol keranjang diangkat supaya tetap bisa ditekan. */
.card{cursor:pointer}
.card .actions .btn-ghost::after{content:'';position:absolute;inset:0;z-index:1}
.card .photo,.card h3{pointer-events:none}
.card .photo{position:relative;display:flex;align-items:center;justify-content:center;background:var(--white);aspect-ratio:1/1;padding:16px;overflow:hidden;border-bottom:1px solid var(--line)}
.card .photo .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-faint);border:1px dashed #c7ccd6;border-radius:8px;background:linear-gradient(160deg,#eef1fb,var(--panel))}
.card .photo .ph svg{width:40px;height:40px;opacity:.5}
.card .photo .ph span{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.card .photo--img{padding:16px}
.card .photo img{width:100%;height:100%;object-fit:contain;transition:transform var(--t-base) var(--ease)}
.card:hover .photo img{transform:scale(1.03)}
.card .body{padding:16px;display:flex;flex-direction:column;flex:1}
.card .kat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
/* penanda tegangan. angkanya yang jadi isi, warnanya yang jadi penilaian:
   hijau = tahan listrik naik-turun, kuning = perlu listrik stabil. */
.volt{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-family:var(--mono);font-size:12px;
  font-weight:600;padding:4px 8px;border-radius:999px;white-space:nowrap}
.volt svg{width:12px;height:12px;flex-shrink:0}
.volt--lebar{background:#e7f7ef;color:#106b4a}
.volt--sempit{background:#fff6e6;color:#8a5200}
.volt--campur{background:var(--tint);color:var(--ink-soft)}
.card h3{margin-top:8px;font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .kode{margin-top:4px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.card .blurb{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px}
.card .meta .chip:nth-child(n+4){display:none}
.card .actions{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.card .actions .btn{font-size:14px;padding:12px 16px;width:100%}
.card .actions .btn-ghost{order:2;padding:4px;border:none;background:none;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
/* "Lihat detail" itu link teks, bukan tombol. tidak bergerak sama sekali:
   tanpa naik, tanpa sapuan, tanpa bayangan. cuma warnanya menguat. */
.card .actions .btn-ghost,.tri-foot .btn-ghost{--sheen:transparent;background-image:none}
.card .actions .btn-ghost:hover,.card .actions .btn-ghost:active{color:var(--ocean);background-color:transparent;
  box-shadow:none;transform:none}
footer{background:var(--cobalt);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;padding-block:clamp(24px,4.4vw,56px) 40px}
.footer-about .logo .mark{width:118px;height:32px;filter:brightness(0) invert(1)}
.footer-about p{margin-top:16px;font-size:14px;line-height:1.7;max-width:38ch;color:rgba(255,255,255,.7)}
.footer-about .sig{margin-top:12px;font-size:12px;font-style:italic;color:rgba(255,255,255,.9);max-width:34ch;line-height:1.6}
.footer-col h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer-col h2.mt{margin-top:24px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col a,.footer-col address{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78)}
.footer-col a{transition:color var(--t-fast) ease}
.footer-col a:hover{color:#fff}
.marketplace-list{flex-direction:row!important;flex-wrap:wrap;gap:8px 16px!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:22px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.55);flex-wrap:wrap;gap:8px}
.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;padding:12px 16px 12px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 8px 24px -6px rgba(0,0,0,.30)}
.fab svg{width:24px;height:24px}
.cta-final{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;background:var(--grad);border:none;border-radius:16px;padding:40px;color:#fff;box-shadow:0 26px 50px -24px rgba(10,33,119,.5)}
.cta-final h2{font-size:clamp(20px,2.2vw,24px);max-width:24ch;color:#fff}
.cta-final p{margin-top:8px;font-size:14px;color:rgba(255,255,255,.84);max-width:52ch;line-height:1.7}
.cta-final .btn-ghost{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.cta-final .btn-ghost:hover{background-color:rgba(255,255,255,.22)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.steps .num{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.08em;font-family:var(--mono)}
.steps h3{margin-top:8px;font-size:16px}
.steps p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat-row .n{font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--cobalt);letter-spacing:-.02em}
.stat-row .l{margin-top:4px;font-size:12px;color:var(--ink-soft);line-height:1.55}
/* --- efek minimalis --- */
.card,.cat-card,.artikel-card,.bucket,.pillar,.kanal,.mat,.ev,.tema,.cf-card,.proj,.testi,.vm{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
/* kartu TIDAK melompat dan TIDAK berbayang saat disorot. umpan baliknya
   cuma garis tepi yang menguat: cukup jelas, nol perpindahan. */
.card:hover,.cat-card:hover,.artikel-card:hover,.bucket:hover,.pillar:hover,.kanal:hover,.mat:hover,.ev:hover,.tema:hover,.cf-card:hover,.proj:hover{border-color:var(--line-strong)}
/* ---- bayangan tombol disusun tiga slot, bukan satu nilai yang saling menimpa:
   --edge  tepi benda (cahaya dari atas, bayangan di bawah)
   --ring  riak saat disorot
   --glow  pancaran, hanya untuk aksi utama
   jumlah lapisan per varian harus tetap di semua state supaya transisinya mulus.
   properti yang dianimasikan disebut satu per satu, bukan "all". */
.btn{--edge:0 0 0 0 rgba(0,0,0,0);--ring:0 0 0 0 rgba(10,33,119,0);--glow:0 0 0 0 rgba(0,0,0,0);
  box-shadow:var(--edge),var(--ring),var(--glow);
  transition:background-position var(--t-slow) var(--ease),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
  box-shadow var(--t-base) var(--ease),border-color var(--t-fast) ease,transform var(--t-fast) var(--ease)}
/* tombol berisi terasa seperti benda padat yang kena cahaya dari atas */
.btn-solid,.btn-gold,.btn-wa{--edge:inset 0 2px 6px rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.2),0 4px 10px -4px rgba(10,33,119,.34)}
.btn:hover{--ring:0 0 0 5px rgba(10,33,119,.09);transform:translateY(-2px)}
.btn-ghost:hover,.btn-cart:hover{background-color:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.btn-solid:hover{background-color:var(--ocean)}
.btn-gold:hover{background-color:#ffb733}
.btn-wa:hover{background-color:#22b877}
.btn:active{--ring:0 0 0 2px rgba(10,33,119,.18);transform:translateY(0) scale(.97)}
/* ---- pancaran cahaya: hanya aksi utama di hero dan di penutup halaman.
   warnanya ikut warna tombolnya sendiri; di atas pita gradien jadi putih
   karena biru di atas biru tidak kelihatan. ---- */
.hero-cta .btn-solid{--glow:0 0 40px -10px rgba(15,70,203,.75)}
.hero-cta .btn-gold{--glow:0 0 40px -10px rgba(246,156,0,.8)}
.hero-cta .btn-wa{--glow:0 0 40px -10px rgba(26,158,107,.75)}
.hero-cta .btn-solid:hover{--glow:0 0 58px -10px rgba(15,70,203,.95)}
.hero-cta .btn-gold:hover{--glow:0 0 58px -10px rgba(246,156,0,1)}
.hero-cta .btn-wa:hover{--glow:0 0 58px -10px rgba(26,158,107,.95)}
.cta-final .btn-solid,.cta-final .btn-gold,.cta-final .btn-wa{--glow:0 0 36px -8px rgba(255,255,255,.5)}
.cta-final .btn-solid:hover,.cta-final .btn-gold:hover,.cta-final .btn-wa:hover{--glow:0 0 54px -8px rgba(255,255,255,.72)}
/* panah "Baca" bergerak maju, sejalan dengan arah yang ditunjuknya */
.artikel-card .more{transition:transform var(--t-base) var(--ease),color var(--t-fast) ease}
.artikel-card:hover .more{transform:translateX(4px);color:var(--ocean)}
/* di atas latar gelap cahayanya putih, tulisannya jadi biru */
.hero .btn-ghost,.story .btn-ghost,.oneroom .btn-ghost,.cta-final .btn-ghost,
.tc-hero .btn-ghost,.um-hero .btn-ghost,.kr-hero .btn-ghost{--sheen:rgba(255,255,255,.22)}
.hero .btn-ghost:hover,.story .btn-ghost:hover,.oneroom .btn-ghost:hover,.cta-final .btn-ghost:hover,
.tc-hero .btn-ghost:hover,.um-hero .btn-ghost:hover,.kr-hero .btn-ghost:hover{background-color:#fff;color:var(--cobalt);border-color:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.filter,.loc-tabs button,.loker-filters button,.lang-switch button,.toc a,.testi-dots button{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
input,textarea,select{transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease}
input:focus,textarea:focus,select:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(15,70,203,.12);outline:none}
/* ---- reveal: wadah naik, isinya menajam satu per satu ----
   arah masuk tiap anak diatur lewat --tx/--ty supaya aturan .in tetap menang
   tanpa perlu perang specificity. blur hanya di anak, bukan di wadah:
   wadah itu selebar halaman, mengaburkan lapisan sebesar itu bikin berat. */
/* WADAH HANYA MEMUDAR, TIDAK BERGERAK.
   Kalau wadah ikut bergerak sementara isinya juga bergerak, jalur tiap anak
   di layar jadi jumlah dua easing dengan durasi berbeda. Itu yang bikin
   gerakannya terasa kasar. Satu lapisan gerak saja, seperti drawer. */
.fx [data-reveal]{opacity:0}
.fx [data-reveal].in{opacity:1;transition:opacity var(--t-slow) var(--ease)}
.fx [data-reveal] > *{opacity:0;transform:translate(var(--tx,0),var(--ty,14px))}
.fx [data-reveal].in > *{opacity:1;transform:none;
  transition:opacity var(--t-base) var(--ease) var(--d,0s),transform var(--t-base) var(--ease) var(--d,0s)}
.fx [data-reveal].in > *:nth-child(2){--d:.045s}
.fx [data-reveal].in > *:nth-child(3){--d:.09s}
.fx [data-reveal].in > *:nth-child(4){--d:.135s}
.fx [data-reveal].in > *:nth-child(5){--d:.18s}
.fx [data-reveal].in > *:nth-child(6){--d:.225s}
.fx [data-reveal].in > *:nth-child(n+7){--d:.27s}
/* dua bagian besar berjalan saling mendekat, bukan sama-sama naik */
.fx .tri[data-reveal] > *:nth-child(1),.fx .story-inner[data-reveal] > *:nth-child(1),
.fx .oneroom-inner[data-reveal] > *:nth-child(1),.fx .teks-dua[data-reveal] > *:nth-child(1),
.fx .tt-bento[data-reveal] > *:nth-child(1){--tx:-18px;--ty:0}
.fx .tri[data-reveal] > *:nth-child(2),.fx .story-inner[data-reveal] > *:nth-child(2),
.fx .oneroom-inner[data-reveal] > *:nth-child(2),.fx .teks-dua[data-reveal] > *:nth-child(2),
.fx .tt-bento[data-reveal] > *:nth-child(2){--tx:18px;--ty:0}
@media(max-width:900px){.fx [data-reveal] > *{--tx:0!important;--ty:14px!important}}
@media(prefers-reduced-motion:reduce){.fx [data-reveal],.fx [data-reveal].in,.fx [data-reveal] > *,.fx [data-reveal].in > *{opacity:1;transform:none;transition:none}}
.no-anim [data-reveal],.no-anim [data-reveal].in,.no-anim [data-reveal] > *,.no-anim [data-reveal].in > *,.no-anim .route{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;z-index:120;transition:transform .1s linear;pointer-events:none}
.testi-dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.testi-dots button{position:relative;width:8px;height:8px;border-radius:999px;border:none;padding:0;background:#c7cee6;cursor:pointer}
.testi-dots button::after{content:'';position:absolute;inset:-16px}
.testi-dots button:hover{background:var(--line-strong)}
.testi-dots button.on{background:var(--cobalt);width:20px;border-radius:999px}
.tabel-wrap tbody tr{cursor:pointer;transition:background var(--t-fast) ease}
.tabel-wrap tbody tr:hover{background:var(--tint)}
.tabel-wrap tbody tr.sel{background:#e4ebff}
.tabel-wrap tbody tr.sel th{color:var(--cobalt)}
.sku-pick{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--cobalt);font-weight:600}
.loc-list div[data-region]{transition:opacity var(--t-fast) ease}
@media(prefers-reduced-motion:reduce){.scrollbar{transition:none}}
@media(max-width:760px){
 .testi-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-22px;padding:4px 20px 8px;scrollbar-width:none;grid-template-columns:none}
 .testi-grid::-webkit-scrollbar{display:none}
 .testi-grid>.testi{scroll-snap-align:center;min-width:82%;flex:0 0 auto}
 .testi-dots{display:flex}
}
.contoh-note{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
/* footer newsletter + social (di footer cobalt) */
.footer-nl{border-bottom:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.footer-nl .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-block:30px}
.footer-nl h2{font-size:14px;color:#fff}
.footer-nl p{margin-top:4px;font-size:12px;color:rgba(255,255,255,.68);max-width:46ch}
.nl-form{display:flex;gap:8px;flex-wrap:wrap}
.nl-form input{font-family:inherit;font-size:14px;padding:12px 12px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.1);min-width:230px;color:#fff}
.nl-form input::placeholder{color:rgba(255,255,255,.55)}
.nl-form .btn-solid{background-color:var(--gold);color:var(--cobalt);--sheen:rgba(255,255,255,.45)}
.social{display:flex;gap:8px;margin-top:16px}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);transition:border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-base) var(--ease),background var(--t-fast) ease}
.social a:hover{border-color:#fff;color:var(--cobalt);background:#fff;transform:translateY(-2px)}
.social svg{width:17px;height:17px}
/* katalog + sort + locator + usecase */
.sort-select{font-family:inherit;font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink-soft)}
.locator{border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
.loc-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:16px;border-bottom:1px solid var(--line)}
.loc-tabs button{font-size:12px;font-weight:500;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);cursor:pointer}
.loc-tabs button:hover{background:var(--tint);border-color:var(--line-strong);color:var(--cobalt)}
.loc-tabs button.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.loc-tabs button.on:hover{background:var(--ocean);color:#fff}
.loc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0px;background:var(--line)}
.loc-list div{background:var(--white);padding:16px 16px}
.loc-list b{font-size:14px}
.loc-list span{display:block;margin-top:4px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.usecase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.usecase div{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(155deg,#eef1f8,var(--panel));border:1px solid var(--line);display:flex;align-items:flex-end;padding:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
@media(max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.steps,.stat-row{grid-template-columns:1fr}.testi-grid,.usecase{grid-template-columns:1fr}}
@media(max-width:900px){.primary-nav{display:none}.nav-toggle{display:flex}.loc-list{grid-template-columns:1fr}.cart-link .cart-lbl{display:none}.header-right .btn-solid{display:none}}
@media(max-width:640px){.wrap{padding-inline:22px}.header-row{gap:8px}.header-right{gap:8px}.cart-link .cart-lbl{display:none}.header-right .lang-switch{display:none}.lang-switch--drawer{display:inline-grid}.footer-nl .wrap{padding-block:24px}}
@media(max-width:560px){.header-right .btn-solid{display:none}}
@keyframes grpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tt-clients li{flex:0 0 184px;display:flex;align-items:center;justify-content:center;min-height:72px;padding:16px;text-align:center;border:1px solid var(--line);border-radius:12px;background:var(--white);
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1.35;color:var(--ink-soft)}
/* tombol Tanya kami: masuk halus setelah halaman tenang, berdenyut dua kali untuk memberi tahu dia ada, lalu diam */
.fab{isolation:isolate;background:linear-gradient(135deg,#1fae76 0%,#15825a 100%);box-shadow:0 10px 28px -8px rgba(21,130,90,.55),inset 0 1px 0 rgba(255,255,255,.22);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.fab-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.fab-shine::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.34) 50%,transparent 100%);transform:translateX(-180%)}
.fab::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;border:1.5px solid rgba(31,174,118,.6);opacity:0}
.fab svg{position:relative;transition:transform var(--t-base) var(--ease)}
.fx .fab{animation:fabIn .7s var(--ease) 1s backwards}
.fx .fab svg{animation:fabIcon .6s var(--ease) 1.3s backwards}
.fx .fab-shine::after{animation:fabShine 3.2s var(--ease) 2.2s 2}
.fx .fab::before{animation:fabRing 3.2s var(--ease) 2.2s 2}
.fab:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(21,130,90,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.fab:hover .fab-shine::after{animation:none;transform:translateX(260%);transition:transform .9s var(--ease)}
.fab:hover svg{transform:rotate(-12deg) scale(1.08)}
.fab:active{transform:translateY(0) scale(.97)}
@keyframes fabIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes fabIcon{from{opacity:0;transform:rotate(-40deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes fabShine{0%{transform:translateX(-180%)}40%,100%{transform:translateX(260%)}}
@keyframes fabRing{0%{opacity:.9;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.18,1.45)}}
@media(prefers-reduced-motion:reduce){.fx .fab,.fx .fab svg,.fx .fab-shine::after,.fx .fab::before{animation:none}.fab:hover .fab-shine::after{transition:none}}
@media(prefers-reduced-motion:reduce){.fx .fab,.fx .fab::before{animation:none}.fab,.fab svg{transition:none}}
/* ---- beranda: masalah → jawaban ---- */
.ms-head{max-width:760px}
.ms-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.ms-head .lead{margin-top:16px;max-width:60ch;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.ms-list{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ms-item{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color var(--t-fast) ease}
.ms-item:hover{border-color:var(--line-strong)}
.ms-q{flex:1;padding:24px 24px 20px}
.ms-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:8px;background:#fff6e6;color:#8a5200}
.ms-ic svg{width:20px;height:20px}
.ms-q h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.ms-q p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ms-a{display:flex;align-items:center;gap:16px;padding:16px 24px;background:var(--tint);border-top:1px solid var(--line);color:var(--ink);transition:background-color var(--t-fast) ease}
.ms-a:hover{background:var(--panel)}
.ms-a img{flex-shrink:0;width:56px;height:56px;padding:4px;object-fit:contain;background:#fff;border-radius:8px}
.ms-a .t{display:flex;flex:1;flex-direction:column;min-width:0}
.ms-a small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.ms-a b{margin-top:0px;font-size:16px;color:var(--cobalt)}
.ms-a em{font-style:normal;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.ms-a>svg{flex-shrink:0;width:20px;height:20px;color:var(--cobalt);transition:transform var(--t-base) var(--ease)}
.ms-a:hover>svg{transform:translateX(4px)}
@media(max-width:760px){.ms-list{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:32px}.ms-q{padding:20px}.ms-a{padding:12px 20px}}
.hp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.hp-tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  font-family:inherit;font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.hp-tab span{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.hp-tab:hover{border-color:var(--cobalt);color:var(--cobalt)}
.hp-tab.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.hp-tab.is-on span{color:rgba(255,255,255,.75)}
.hp-tab:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.hp-grid>.card[hidden]{display:none}
.hp-grid>.card.is-in{animation:grpIn var(--t-base) var(--ease)}
.hp-foot{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hp-all{font-size:14px;font-weight:700;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.hp-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-22px;padding-inline:22px;scrollbar-width:none}.hp-tabs::-webkit-scrollbar{display:none}.hp-tab{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.hp-grid>.card.is-in{animation:none}}
.hero{position:relative;overflow:hidden;background:#05091c;isolation:isolate;border-bottom:3px solid transparent;border-image:var(--grad) 1}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#05091c 0%,rgba(7,15,44,.62) 30%,rgba(7,15,44,0) 52%),linear-gradient(to bottom,rgba(5,9,28,0) 58%,rgba(10,33,119,.4))}
.hero-inner{position:relative;z-index:2;padding-block:clamp(40px,6.9vw,88px);min-height:440px;display:flex;align-items:center}
.hero-copy{max-width:33rem}
.hero .eyebrow{color:var(--gold)}
.hero .tc-lockup{display:block;height:40px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1)}
.hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.1;max-width:15ch;letter-spacing:-.02em;color:#fff}
.hero .lead{margin-top:20px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.74);max-width:44ch}
.hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
/* tiap keterangan jadi butir sendiri: tidak ada pemisah yang menggantung
   di awal baris saat teksnya melipat di layar sempit */
.hero-note{margin-top:20px;display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.72)}
.hero-note li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-note li+li::before{content:"";width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.4);flex-shrink:0}
.hero .btn-ghost{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);color:#fff}
.hero-cap{position:absolute;right:26px;bottom:20px;z-index:2;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6);text-shadow:0 1px 6px rgba(0,0,0,.55)}
.store-band{border-bottom:1px solid var(--line);background:var(--white)}
.statement{padding-block:clamp(32px,4.7vw,60px);background:var(--white);border-bottom:1px solid var(--line)}
.statement p{max-width:56ch;margin-inline:auto;text-align:center;font-size:clamp(16px,1.9vw,20px);line-height:1.65;color:var(--ink);font-weight:500}
.statement b{color:var(--cobalt)}
/* ---- rail kategori: pintasan ke 5 kelompok pemakaian ---- */
.catrail-wrap{background:var(--white);border-bottom:1px solid var(--line)}
.catrail{display:flex;gap:8px;overflow-x:auto;padding-block:16px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
/* di tengah saat muat, tetap bisa digeser penuh saat tidak muat.
   margin auto pada dua elemen semu menyerap ruang sisa dan menyusut jadi nol
   begitu isinya melebihi lebar. justify-content:center akan memotong ikon
   pertama saat digeser, jadi tidak dipakai. */
.catrail::before,.catrail::after{content:'';flex:0 0 auto;margin:auto}
.catrail::-webkit-scrollbar{display:none}
.catrail a{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:12px 8px;border-radius:12px;text-align:center;
  transition:background var(--t-fast) ease,transform var(--t-base) var(--ease)}
.catrail a:hover{background:var(--tint);transform:translateY(-2px)}
.catrail .ic{width:48px;height:48px;border-radius:999px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--cobalt);
  transition:background var(--t-fast) ease,box-shadow var(--t-base) var(--ease)}
.catrail a:hover .ic{background:var(--white);box-shadow:var(--sh-2)}
.catrail .ic svg{width:24px;height:24px}
.catrail span{font-size:12px;line-height:1.35;color:var(--ink-soft);font-weight:500}
.store-inner{padding-block:20px;display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap}
.store-inner .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-faint)}
.store-inner a{font-weight:800;font-size:14px;color:var(--ink-soft);transition:color var(--t-fast) ease}
.store-inner a:hover{color:var(--cobalt)}
.store-inner .off{margin-left:auto;font-size:12px;color:var(--ink-faint)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px 16px;display:flex;flex-direction:column;gap:4px}
.cat-card .c{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);font-family:var(--mono)}
.cat-card h3{font-size:14px}
.cat-card p{font-size:12px;color:var(--ink-soft);line-height:1.5}
.story{background:var(--night);color:#fff}
.story-inner{padding-block:clamp(40px,6.2vw,80px);display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.story h2{font-size:clamp(24px,2.8vw,36px);line-height:1.25;max-width:20ch}
.story p{margin-top:16px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.72);max-width:46ch}
.story .story-count{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--gold)}
.story .btn-ghost{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.dots i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12)}
.dots i.on{background:var(--gold);box-shadow:0 0 12px rgba(246,156,0,.5)}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 16px}
.pillar .ic{width:38px;height:38px;border-radius:8px;background:var(--cobalt);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.pillar:nth-child(2n) .ic{background:var(--gold)}
.pillar .ic svg{width:19px;height:19px;color:#fff}
.pillar:nth-child(2n) .ic svg{color:var(--cobalt)}
.pillar h3{font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.pillar p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.6}
.buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bucket{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.bucket .top{height:120px;background:linear-gradient(150deg,var(--cobalt),var(--ocean));display:flex;align-items:flex-end;padding:20px}
.bucket .top h3{color:#fff;font-size:18px}
.bucket:nth-child(2) .top{background:linear-gradient(150deg,var(--ocean),var(--bluegreen))}
.bucket:nth-child(3) .top{background:linear-gradient(150deg,var(--night),var(--ocean))}
.bucket .bd{padding:20px;display:flex;flex-direction:column;flex:1}
.bucket .bd p{font-size:14px;color:var(--ink-soft);line-height:1.65}
/* satu nama per baris. tidak ada pemisah yang bisa menggantung, tidak ada
   nama yang terpotong, dan tidak ada wadah tambahan di dalam kartu:
   kartunya sendiri sudah jadi wadahnya. nama kelas dibuat spesifik karena
   ".list" dipakai halaman lain dan CSS-nya menyatu di bundle prototype. */
.bucket .katlist{margin-top:12px;display:flex;flex-direction:column;gap:0px}
.bucket .katlist li{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-soft)}
/* tautan ketiga kartu sejajar walau isinya beda panjang */
.bucket .bd a{margin-top:auto;padding-top:16px;display:inline-block;font-weight:700;font-size:12px;color:var(--cobalt)}
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.hstats .n{font-size:clamp(24px,3.2vw,36px);font-weight:800;color:var(--cobalt);letter-spacing:-.02em}
.hstats .l{margin-top:4px;font-size:12px;color:var(--ink-soft);line-height:1.5}
.clients{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;justify-content:center}
.clients span{font-weight:800;font-size:14px;color:var(--ink-soft);letter-spacing:.01em}
/* Tri-Colours: satu unit, tiga suhu cahaya */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:stretch}
.tri-stage{position:relative;overflow:hidden;min-height:360px;border:1px solid var(--line);border-radius:16px;background:#080f26}
.tri-fix{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:min(64%,304px);height:14px;border-radius:4px;background:#161f3d;transition:box-shadow var(--t-slow) ease}
.tri-fix .lit,.tri-cone .lit{position:absolute;inset:0;opacity:0;transition:opacity var(--t-slow) ease}
.tri-fix .l30{background:#ffb457}
.tri-fix .l40{background:#ffe7c6}
.tri-fix .l65{background:#d6e8ff}
.tri-cone{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:min(100%,520px);height:232px;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.tri-cone .l30{background:linear-gradient(180deg,rgba(255,168,64,.62),rgba(255,168,64,0))}
.tri-cone .l40{background:linear-gradient(180deg,rgba(255,226,182,.58),rgba(255,226,182,0))}
.tri-cone .l65{background:linear-gradient(180deg,rgba(176,212,255,.58),rgba(176,212,255,0))}
.tri-surface{position:absolute;left:0;right:0;bottom:0;height:88px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.tri-stage[data-cct="3000"] .l30,.tri-stage[data-cct="4000"] .l40,.tri-stage[data-cct="6500"] .l65{opacity:1}
.tri-stage[data-cct="3000"] .tri-fix{box-shadow:0 0 56px 10px rgba(255,168,64,.42)}
.tri-stage[data-cct="4000"] .tri-fix{box-shadow:0 0 56px 10px rgba(255,226,182,.40)}
.tri-stage[data-cct="6500"] .tri-fix{box-shadow:0 0 56px 10px rgba(176,212,255,.42)}
.tri-meter{position:absolute;left:20px;bottom:20px;display:flex;align-items:baseline;gap:8px}
.tri-meter b{font-family:var(--mono);font-size:20px;color:#ffffff;letter-spacing:.02em}
.tri-meter span{font-size:12px;color:rgba(255,255,255,.74)}
.tri-ctl{display:flex;flex-direction:column;justify-content:center;gap:24px}
.tri-sw{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;background:var(--tint);border:1px solid var(--line);border-radius:12px}
.tri-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:8px;background:var(--white);box-shadow:0 6px 16px -8px rgba(10,33,119,.45);transition:transform var(--t-base) var(--ease)}
.tri-sw[data-i="1"] .tri-thumb{transform:translateX(100%)}
.tri-sw[data-i="2"] .tri-thumb{transform:translateX(200%)}
.tri-sw button{position:relative;z-index:1;background:none;border:0;padding:12px 8px;border-radius:8px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink-faint);cursor:pointer;transition:color var(--t-fast) ease}
.tri-sw button[aria-selected="true"]{color:var(--cobalt)}
.tri-sw button:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
/* ketiga deskripsi menempati SEL GRID YANG SAMA, jadi tingginya selalu
   setinggi yang terpanjang. tanpa ini, ganti suhu bikin tombol di bawahnya
   melompat karena jumlah label ruangan tiap suhu beda. */
.tri-descs{display:grid}
.tri-desc{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none}
.tri-desc.on{opacity:1;visibility:visible;pointer-events:auto;animation:triIn var(--t-base) var(--ease) both}
@keyframes triIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tri-desc h3{font-size:20px;line-height:1.3}
.tri-desc p{margin-top:12px;font-size:14px;color:var(--ink-soft);line-height:1.65}
.tri-rooms{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.tri-rooms li{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.tri-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.tri-note{flex:1 1 220px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);line-height:1.6}
.oneroom{background:var(--night);color:#fff}
.oneroom-inner{padding-block:clamp(32px,5.6vw,72px);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.oneroom h2{font-size:clamp(24px,2.8vw,30px);line-height:1.25;max-width:18ch}
.oneroom p{margin-top:16px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.74);max-width:46ch}
.oneroom .btn-ghost{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.oneroom-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
.orc-ph{aspect-ratio:16/10;background:linear-gradient(150deg,#12203f,#0a1330)}
.orc-b{padding:20px}
.orc-b b{font-size:14px}
.orc-b span{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6)}
.certrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.certrow .c{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--white)}
.certrow .c svg{width:15px;height:15px;color:var(--bluegreen)}
.readrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.pillars{grid-template-columns:1fr 1fr}.buckets{grid-template-columns:1fr}.hstats{grid-template-columns:1fr 1fr}.readrow{grid-template-columns:1fr}.oneroom-inner{grid-template-columns:1fr;gap:24px}}
@media(max-width:900px){.feat-grid,.why-grid{grid-template-columns:1fr}.story-inner{grid-template-columns:1fr;gap:32px}.hero-bg img{object-position:82% center}.hero::before{background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 40%,#000 84%)}.hero-inner{padding-block:clamp(96px,15.6vw,200px) clamp(24px,4.1vw,52px)}.hero-copy{max-width:none}.hero .lead{max-width:none}.hero-cap{display:none}}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.search-box{position:relative;flex:1;min-width:260px;max-width:480px}
.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-faint)}
.search-box input{width:100%;font-family:inherit;font-size:14px;padding:12px 12px 12px 40px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)}
.grp-block[hidden],#ukuran-lubang[hidden]{display:none}
.grp-block.is-in{animation:grpIn var(--t-base) var(--ease)}
@media(prefers-reduced-motion:reduce){.grp-block.is-in{animation:none}}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.filters-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.filter{font-size:12px;font-weight:500;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);cursor:pointer}
.filter.is-active{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.filter .n{font-family:var(--mono);font-size:12px;opacity:.6;margin-left:4px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.hasil{font-size:12px;color:var(--ink-faint)}
.grp-block{margin-top:56px;scroll-margin-top:24px}
.grp-block:first-of-type{margin-top:40px}
.grp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:24px;border-bottom:2px solid var(--cobalt)}
.grp-no{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.grp-head h2{margin-top:8px;font-size:clamp(20px,2.3vw,24px)}
.grp-head p{margin-top:8px;font-size:14px;color:var(--ink-soft);max-width:54ch;line-height:1.6}
.grp-spec{flex-shrink:0;font-family:var(--mono);font-size:12px;color:var(--ink-faint);background:var(--panel);border-radius:999px;padding:4px 12px}
.grp-count{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
@media(max-width:1080px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.prod-grid{grid-template-columns:1fr}}
/* ---- alat cek ukuran lubang plafon ---- */
.lb{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.lb-top{padding:24px;border-bottom:1px solid var(--line);background:var(--tint)}
.lb-top h2{font-size:20px;line-height:1.3;max-width:28ch}
.lb-top p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:56ch}
.lb-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px;padding:24px;
  border-bottom:1px solid var(--line)}
.lb-ctl label{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.lb-ctl select{width:100%;font-family:var(--font);font-size:14px;padding:12px;border:1px solid var(--line);
  border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer}
.lb-ctl select:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
/* pilihan yang tidak berlaku harus KELIHATAN tidak berlaku, bukan cuma mati */
.lb-ctl select:disabled{background:var(--panel);color:var(--ink-faint);cursor:not-allowed;
  border-color:var(--line);opacity:1}
.lb-ctl label:has(+select:disabled),.lb-ctl div:has(select:disabled) label{color:var(--ink-faint);opacity:.7}
.lb-out{padding:24px}
.lb-name{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:16px}
.lb-tabel{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.lb-tabel table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.lb-tabel thead th{text-align:left;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);padding:12px 16px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.lb-tabel tbody th,.lb-tabel tbody td{padding:12px 16px;border-bottom:1px solid var(--panel);text-align:left;
  font-weight:400;color:var(--ink-soft)}
.lb-tabel tbody tr:last-child th,.lb-tabel tbody tr:last-child td{border-bottom:none}
.lb-tabel tbody th{font-weight:700;color:var(--ink)}
/* angka lubang itu jawaban yang dicari, jadi dibikin paling menonjol */
.lb-tabel .jawab{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--cobalt)}
.lb-tabel .kode code{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--panel);
  padding:0px 8px;border-radius:4px;color:var(--ink)}
.lb-kosong{padding:24px;background:var(--tint);border:1px solid var(--line);border-radius:12px}
.lb-kosong b{display:block;font-size:14px;color:var(--cobalt)}
.lb-kosong p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:60ch}
.lb-kosong .btn{margin-top:16px}
.lb-note{margin-top:16px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-faint);max-width:64ch}
.lb-foot{padding:16px 24px;border-top:1px solid var(--line);background:var(--tint);
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-faint)}
.detail{padding-block:40px clamp(32px,5vw,64px);background:var(--white);border-bottom:1px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.foto{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.foto img{width:100%;height:100%;object-fit:contain}
.foto .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-faint);border:1px dashed #c7ccd6;border-radius:8px}
.foto .ph svg{width:56px;height:56px;opacity:.5}
.foto .ph span{font-family:var(--mono);font-size:12px;text-transform:uppercase;opacity:.7}
.info .kat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.info h1{margin-top:8px;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.02em;line-height:1.15}
.info .kode{margin-top:8px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.info .pitch{margin-top:16px;font-size:16px;line-height:1.75;color:var(--ink);max-width:46ch;font-weight:500}
.info .blurb{margin-top:12px;font-size:14px;line-height:1.75;color:var(--ink-soft);max-width:50ch}
.ringkas{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:0px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ringkas>div{background:var(--white);padding:16px 12px}
.ringkas dt{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.ringkas dd{margin:4px 0 0;font-size:14px;font-weight:700}
.garansi{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gold);background:#fff6e6;padding:8px 12px;border-radius:999px}
.beli{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.beli .btn{width:100%}
.beli-note{margin-top:12px;font-size:12px;color:var(--ink-soft);line-height:1.7}
.beli-note a{color:var(--cobalt);font-weight:600}
.benefit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.benefit>div{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px}
.benefit b{font-size:16px;line-height:1.35}
.benefit p{margin-top:8px;font-size:14px;color:var(--ink-soft);line-height:1.6}
/* angka kunci jadi label di atas, bukan catatan kecil di bawah */
.benefit .spec{order:-1;align-self:flex-start;margin:0 0 12px;padding:4px 8px;border-radius:999px;background:var(--tint);font-family:var(--mono);font-size:12px;font-weight:700;line-height:1.4;color:var(--teal-ink)}
.tabel-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
tbody th,tbody td{padding:12px 16px;border-bottom:1px solid var(--panel);text-align:left;font-weight:400;color:var(--ink-soft)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
tbody th{font-weight:700;color:var(--ink)}
.sku code{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--panel);padding:0px 8px;border-radius:4px;color:var(--ink)}
.terkait-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.detail-grid{grid-template-columns:1fr;gap:24px}.ringkas{grid-template-columns:1fr 1fr}.benefit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.benefit{grid-template-columns:1fr;gap:12px}.benefit>div{padding:16px}}
.tc-hero{padding-block:clamp(32px,5vw,64px) clamp(24px,4.4vw,56px);background:var(--grad);color:#fff;border-bottom:none}
.tc-hero .crumbs{color:rgba(255,255,255,.5)}
.tc-hero .tc-lockup{display:block;height:34px;width:auto;margin:4px 0 20px;filter:brightness(0) invert(1)}
.tc-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.1;max-width:16ch;letter-spacing:-.02em}
.tc-hero .lead{margin-top:20px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.72);max-width:52ch}
.tc-hero .hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.tc-hero .btn-ghost{background-color:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.tc-hero .tag{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55)}
.insight{max-width:62ch}
.insight p{font-size:16px;line-height:1.85;color:var(--ink-soft)}
.insight p b{color:var(--ink)}
.beat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.beat{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.beat .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold)}
.beat h3{margin-top:8px;font-size:14px}
.beat p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.6}
.tema-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tema{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.tema h3{font-size:18px}
.tema .prompt{margin-top:12px;font-size:14px;font-style:italic;color:var(--ink);line-height:1.6}
.tema .bridge{margin-top:12px;padding-top:12px;border-top:1px solid var(--panel);font-size:12px;color:var(--ink-soft);line-height:1.6}
.install{background:var(--cobalt);color:#fff}
.install-inner{padding-block:clamp(32px,5.6vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.install h2{font-size:clamp(24px,2.8vw,30px);line-height:1.25;max-width:18ch}
.install p{margin-top:16px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.8);max-width:44ch}
.bigdots{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.bigdots i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14)}
.bigdots i.on{background:var(--gold)}
.juri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.juri div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px}
.juri b{font-size:14px}
.juri span{display:block;margin-top:4px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.juri p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.55}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cerita-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cerita-card .thumb{height:170px;background:linear-gradient(160deg,#eef1f8,var(--panel));display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.05em}
.cerita-card .cb{padding:20px}
.cerita-card .tema-lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.cerita-card h3{margin-top:8px;font-size:14px;line-height:1.4}
.cerita-card p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.55}
.artikel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.artikel-card{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.artikel-card .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.artikel-card h3{font-size:16px;line-height:1.4;max-width:34ch}
.artikel-card p{font-size:12px;color:var(--ink-soft);line-height:1.6}
.artikel-card{position:relative;cursor:pointer}
.artikel-card .more{margin-top:auto;font-weight:700;font-size:12px;color:var(--cobalt)}
/* seluruh kartu artikel bisa diklik, pola sama dengan kartu produk */
.artikel-card .more::after{content:'';position:absolute;inset:0}
.kirim-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px}
.kirim-form .field{margin-bottom:16px}
.kirim-form label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
.kirim-form input,.kirim-form textarea,.kirim-form select{width:100%;font-family:inherit;font-size:14px;padding:12px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.kirim-form textarea{min-height:70px;resize:vertical}
.kf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kf-beats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kf-upload{margin-top:4px;border:1.5px dashed #b9c2e8;border-radius:8px;padding:20px;display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:12px;background:var(--tint)}
.kf-upload svg{width:22px;height:22px;color:var(--cobalt);flex-shrink:0}
.kf-actions{margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kf-note{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
@media(max-width:1000px){.beat-grid{grid-template-columns:1fr 1fr}.tema-grid,.juri,.galeri,.artikel-grid{grid-template-columns:1fr}.install-inner{grid-template-columns:1fr;gap:32px}.kf-row,.kf-beats{grid-template-columns:1fr}}
.cfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cf-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cf-card .thumb{aspect-ratio:16/10;background:linear-gradient(155deg,#e7ecfb,var(--panel));display:flex;align-items:flex-end;padding:12px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.05em}
.cf-card .cb{padding:20px;display:flex;flex-direction:column;flex:1}
.cf-card .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.cf-card h3{margin-top:8px;font-size:14px;line-height:1.4}
.cf-card .q{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.55;flex:1}
.cf-card .by{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.cf-more{margin-top:32px;text-align:center}
@media(max-width:1000px){.cfeed{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cfeed{grid-template-columns:1fr}}
.c-hero{padding-block:clamp(24px,3.8vw,48px) 40px;background:var(--white);border-bottom:1px solid var(--line)}
.c-hero .tema{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.c-hero h1{margin-top:12px;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.02em;line-height:1.15;max-width:20ch}
.c-hero .by{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);display:flex;gap:8px}
.c-video{aspect-ratio:16/9;background:linear-gradient(160deg,#eef1f8,var(--panel));border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.06em;margin-top:32px}
.prosa{max-width:64ch;margin-top:40px}
.prosa h2{margin-top:40px;font-size:20px}
.prosa p{margin-top:16px;font-size:16px;line-height:1.85;color:var(--ink-soft)}
.prosa .beat-lbl{margin-top:40px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.prosa blockquote{margin:24px 0 0;padding:16px 20px;background:var(--panel);border-left:3px solid var(--cobalt);border-radius:0 8px 8px 0;font-size:16px;line-height:1.7;color:var(--ink);font-style:italic}
.prod-mention{margin-top:32px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;gap:16px;align-items:center}
.prod-mention .box{width:64px;height:64px;border:1px dashed #c7ccd6;border-radius:8px;flex-shrink:0}
.prod-mention b{font-size:14px}
.prod-mention p{margin-top:4px;font-size:12px;color:var(--ink-soft)}
.lain{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lain a{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.lain .t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-ink)}
.lain h3{margin-top:8px;font-size:16px;line-height:1.35}
@media(max-width:820px){.lain{grid-template-columns:1fr}}
.stats-band{border-block:1px solid var(--line);background:var(--white)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);padding-block:32px;gap:24px}
.stats .n{font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--cobalt);letter-spacing:-.02em}
.stats .l{margin-top:4px;font-size:12px;color:var(--ink-faint)}
.teks-dua{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.teks-dua h2{font-size:clamp(20px,2.4vw,30px);max-width:16ch}
.tt-prosa{display:flex;flex-direction:column;gap:16px}
.tt-prosa p{font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:62ch}
.tt-prosa b{color:var(--cobalt)}
/* ---- hero gelap + bola cahaya ---- */
.tt-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;
  border-bottom:3px solid transparent;border-image:var(--grad) 1}
.tt-hero-inner{position:relative;z-index:1;padding-block:clamp(40px,6.9vw,88px)}
.tt-glow{position:absolute;right:-80px;top:-140px;width:460px;height:460px;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle,rgba(246,156,0,.3),rgba(246,156,0,0) 68%);filter:blur(24px)}
.fx .tt-glow{animation:glowIn var(--t-slow) var(--ease) both}
@keyframes glowIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.tt-hero .crumbs{color:rgba(255,255,255,.52)}
.tt-hero .crumbs a{color:rgba(255,255,255,.82)}
.tt-hero h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;max-width:19ch;color:#fff}
.tt-hero .lead{margin-top:20px;max-width:54ch;font-size:16px;line-height:1.75;color:rgba(255,255,255,.72)}
.tt-hero .kicker{margin-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gold)}
/* ---- bento asimetris: visi sempit, misi lebar ---- */
.tt-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:start}
.tt-visi{grid-column:span 2}
.tt-misi{grid-column:span 4}
.tt-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.tt-card:hover{border-color:#b3bce8;box-shadow:var(--sh-2)}
/* tekstur kisi tipis, mengacu ke gambar kerja instalasi listrik */
.tt-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(158deg,#000,transparent 60%);mask-image:linear-gradient(158deg,#000,transparent 60%)}
.tt-card > *{position:relative}
.tt-card h3{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.tt-visi .big{margin-top:16px;font-family:var(--display);font-size:20px;font-weight:700;line-height:1.35;color:var(--ink)}
.tt-visi .big em{display:block;font-style:normal;color:var(--ocean)}
.tt-visi p{margin-top:16px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.tt-misi > p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink);max-width:44ch;font-weight:500}
.tt-misi-list{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));gap:12px}
.tt-misi-list li{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.tt-misi-list .ic{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--panel);color:var(--cobalt);
  display:flex;align-items:center;justify-content:center}
.tt-misi-list .ic svg{width:18px;height:18px}
.tt-misi-list p{font-size:14px;line-height:1.6;color:var(--ink-soft)}
/* ---- jangkauan: baris bergaris, bukan kotak lagi ---- */
.tt-reach{display:flex;flex-direction:column}
.tt-reach li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:32px;padding-block:24px;
  border-top:1px solid var(--line);align-items:start}
.tt-reach li:last-child{border-bottom:1px solid var(--line)}
.tt-reach h3{font-size:18px;color:var(--cobalt);line-height:1.35}
.tt-reach p{font-size:14px;line-height:1.7;color:var(--ink-soft)}
/* ---- pelat klien: penampung untuk logo asli ---- */
/* pelat klien berjalan dari kanan ke kiri tanpa putus: dua salinan daftar digeser -50% lalu mengulang.
   berhenti saat disorot supaya namanya bisa dibaca, dan diam total untuk pengguna reduced motion */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tt-clients{display:flex;gap:12px;padding-right:12px;flex-shrink:0}
.tt-clients li{flex:0 0 184px}
@media(prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee-track{animation:none;width:auto}.tt-clients{flex-wrap:wrap;padding-right:0}.tt-clients[aria-hidden]{display:none}}
.tt-clients li{display:flex;align-items:center;justify-content:center;min-height:72px;padding:16px;text-align:center;
  border:1px solid var(--line);border-radius:12px;background:var(--white);
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1.35;color:var(--ink-soft)}
@media(max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}.teks-dua{grid-template-columns:1fr;gap:24px}}
@media(max-width:900px){.tt-bento{grid-template-columns:1fr}.tt-visi,.tt-misi{grid-column:auto}}
@media(max-width:760px){.tt-reach li{grid-template-columns:1fr;gap:8px}}
/* ==== Tentang B2B: cahaya sebagai materi, angka yang bisa dicek ====
   motion hanya transform, opacity, clip-path. satu kurva (--ease), tiga durasi.
   sorot cahaya mengikuti kursor hanya di perangkat ber-mouse, mati untuk reduced motion */
.tb-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;--mx:72%;--my:26%}
.tb-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000,transparent 70%);mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000,transparent 70%)}
.tb-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px circle at var(--mx) var(--my),rgba(246,156,0,.16),transparent 60%)}
.tb-beam{position:absolute;top:0;right:4%;width:min(46vw,640px);height:100%;margin:0;pointer-events:none}
.tb-beam::before{content:'';position:absolute;top:-12px;left:50%;width:140px;height:24px;margin-left:-64px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,200,.85),rgba(246,156,0,0))}
.tb-beam span{position:absolute;top:0;left:50%;width:100%;height:100%;translate:-50% 0;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,214,140,.32),rgba(246,156,0,.08) 45%,transparent 82%);
  clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);mix-blend-mode:screen}
.tb-beam .b1{rotate:10deg;opacity:.55}
.tb-beam .b2{rotate:-8deg;opacity:.32;width:78%}
.tb-beam .b3{rotate:24deg;opacity:.2;width:58%}
.tb-hero-in{position:relative;z-index:1;padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,64px)}
.tb-hero .crumbs{color:rgba(255,255,255,.52)}
.tb-hero .crumbs a{color:rgba(255,255,255,.82)}
.tb-kicker{margin-top:24px;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.tb-kicker::before{content:'';width:28px;height:1px;background:currentColor}
.tb-hero h1{margin-top:20px;font-size:clamp(36px,5.4vw,56px);line-height:1.04;letter-spacing:-.035em;max-width:14ch;color:#fff;text-wrap:balance}
.tb-hero h1 em{font-style:normal;color:var(--gold)}
.tb-hero .lead{margin-top:24px;max-width:56ch;font-size:16px;line-height:1.75;color:rgba(255,255,255,.74)}
.tb-hero .hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.btn.tb-ghost{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}
.btn.tb-ghost:hover{background-color:rgba(255,255,255,.08)}
.tb-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;border-top:1px solid rgba(255,255,255,.12)}
.tb-stats>div{padding:24px 24px 40px 0}
.tb-stats>div+div{padding-left:24px;border-left:1px solid rgba(255,255,255,.12)}
.tb-stats dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tb-stats dd{margin:12px 0 0;font-family:var(--display);font-size:clamp(30px,3vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-stats dd.gold{color:var(--gold)}
.tb-sec{scroll-margin-top:var(--tb-scroll,180px)}
.tb-trust{padding-block:40px;background:var(--white);border-bottom:1px solid var(--line)}
.tb-trust-lbl{margin-bottom:20px;font-size:14px;color:var(--ink-soft);text-align:center}
/* layanan: judul menempel, daftar bernomor */
.tb-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(40px,6vw,96px);align-items:start}
.tb-side{position:sticky;top:calc(var(--hdr-h,128px) + 32px)}
.tb-side h2{margin-top:12px;font-size:clamp(30px,3.2vw,44px);line-height:1.12;letter-spacing:-.02em}
.tb-side p{margin-top:16px;max-width:40ch;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.tb-offer{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.tb-offer li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.tb-offer li::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.tb-offer li:hover::before{transform:scaleX(1)}
.tb-offer .no{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink-faint);transition:color var(--t-fast) ease}
.tb-offer li:hover .no{color:#8a5200}
.tb-offer .k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a5200}
.tb-offer h3{margin-top:8px;font-size:clamp(20px,2.2vw,30px);line-height:1.2;letter-spacing:-.01em}
.tb-offer p{margin-top:12px;max-width:52ch;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.tb-offer a{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:700;color:var(--cobalt)}
.tb-offer a::after{content:'\2192';transition:transform var(--t-base) var(--ease)}
.tb-offer a:hover::after{transform:translateX(4px)}
/* angka: pita gelap */
.tb-dark{position:relative;overflow:hidden;background:var(--night);color:#fff;padding-block:clamp(64px,8vw,112px);--mx:30%;--my:40%}
.tb-dark::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--mx) var(--my),rgba(246,156,0,.12),transparent 60%)}
.tb-dark .wrap{position:relative;z-index:1}
.tb-dark .section-head h2{color:#fff}
.tb-dark .section-head p{color:rgba(255,255,255,.66)}
.tb-dark .eyebrow{color:var(--gold)}
.tb-spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.tb-spec>div{padding:32px 20px 8px 0}
.tb-spec>div+div{padding-left:20px;border-left:1px solid rgba(255,255,255,.1)}
.tb-spec b{display:block;font-family:var(--display);font-size:clamp(20px,1.9vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-spec span{display:block;margin-top:8px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.62)}
/* cerita: garis waktu, garisnya terisi mengikuti gulir kalau browser mendukung */
.tb-time{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:40px}
.tb-time::before,.tb-time::after{content:'';position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line)}
.tb-time::after{background:linear-gradient(90deg,var(--gold),var(--cobalt));transform-origin:left}
.tb-time li{position:relative}
.tb-time li::before{content:'';position:absolute;top:-40px;left:0;width:15px;height:15px;box-sizing:border-box;border-radius:50%;background:var(--white);border:2px solid var(--cobalt)}
.tb-time li:last-child::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(246,156,0,.18)}
.tb-time .yr{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a5200}
.tb-time h3{margin-top:8px;font-size:18px;line-height:1.3}
.tb-time p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.tb-cta{position:relative;overflow:hidden;background:var(--night);color:#fff;--mx:80%;--my:50%}
.tb-cta::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--mx) var(--my),rgba(246,156,0,.14),transparent 60%)}
.tb-cta-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,auto);gap:40px;align-items:center;padding-block:clamp(56px,7vw,96px)}
.tb-cta h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.025em;max-width:16ch;color:#fff}
.tb-cta p{margin-top:16px;max-width:50ch;font-size:14px;line-height:1.7;color:rgba(255,255,255,.72)}
.tb-cta .acts{display:flex;flex-direction:column;gap:12px}
.tb-cta .acts .btn{width:100%}
/* motion masuk hero: berurutan, sekali saja */
.fx .tb-hero .tb-copy>*{animation:tbUp var(--t-slow) var(--ease) backwards}
.fx .tb-hero .tb-copy>:nth-child(2){animation-delay:.08s}
.fx .tb-hero .tb-copy>:nth-child(3){animation:tbRise .8s var(--ease) .14s backwards}
.fx .tb-hero .tb-copy>:nth-child(4){animation-delay:.28s}
.fx .tb-hero .tb-copy>:nth-child(5){animation-delay:.36s}
.fx .tb-beam span{animation:tbBeam 1.1s var(--ease) .2s backwards}
.fx .tb-beam .b2{animation-delay:.34s}
.fx .tb-beam .b3{animation-delay:.48s}
.fx .tb-stats>div{animation:tbUp var(--t-slow) var(--ease) backwards}
.fx .tb-stats>div:nth-child(1){animation-delay:.44s}
.fx .tb-stats>div:nth-child(2){animation-delay:.5s}
.fx .tb-stats>div:nth-child(3){animation-delay:.56s}
.fx .tb-stats>div:nth-child(4){animation-delay:.62s}
.fx .tb-stats>div:nth-child(5){animation-delay:.68s}
@supports (animation-timeline:view()){.fx .tb-time::after{animation:tbLine linear both;animation-timeline:view();animation-range:entry 30% cover 55%}}
@keyframes tbBeam{from{opacity:0;scale:1 .4}}
@keyframes tbLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tbLineY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.fx .tb-hero .tb-copy>*,.fx .tb-beam span,.fx .tb-stats>div,.fx .tb-time::after{animation:none}.tb-offer li::before,.tb-offer a::after{transition:none}}
.no-anim .tb-hero .tb-copy>*,.no-anim .tb-beam span,.no-anim .tb-stats>div,.no-anim .tb-time::after{animation:none!important}
@media(max-width:1100px){.tb-spec{grid-template-columns:minmax(0,1fr)}.tb-spec>div,.tb-spec>div+div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;border-left:none;border-bottom:1px solid rgba(255,255,255,.1)}.tb-spec span{margin-top:0;text-align:right;max-width:52%}}
@media(max-width:980px){
  .tb-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tb-stats>div:nth-child(4){padding-left:0;border-left:none}
  .tb-stats>div:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)}
  .tb-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .tb-side{position:static}
  .tb-time{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:0;padding-left:40px}
  .tb-time::before,.tb-time::after{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .tb-time::after{background:linear-gradient(180deg,var(--gold),var(--cobalt));transform-origin:top}
  @supports (animation-timeline:view()){.fx .tb-time::after{animation-name:tbLineY}}
  .tb-time li::before{top:2px;left:-40px}
  .tb-cta-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .tb-beam{right:-18%;width:92vw;opacity:.7}
}
@media(max-width:640px){
  .tb-stats{grid-template-columns:minmax(0,1fr)}
  .tb-stats>div,.tb-stats>div+div,.tb-stats>div:nth-child(4){display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-left:none;border-top:1px solid rgba(255,255,255,.12)}
  .tb-stats dd{margin:0;font-size:24px}
  .tb-offer li{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .tb-spec>div,.tb-spec>div+div{flex-direction:column;gap:4px}
  .tb-spec span{text-align:left;max-width:none}
  .tb-hero .lead{font-size:16px}
}
.skala{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.skala div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.skala .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.06em}
.skala h3{margin-top:8px;font-size:16px}
.skala p{margin-top:8px;font-size:14px;color:var(--ink-soft);line-height:1.65}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.proj .ph{height:170px;background:linear-gradient(155deg,#e7ecfb,var(--panel));display:flex;align-items:flex-end;padding:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
.proj .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.proj h3{margin-top:8px;font-size:14px;line-height:1.4}
.proj p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.6}
@media(max-width:1000px){.skala,.proj-grid{grid-template-columns:1fr}}
.kr-hero{padding-block:clamp(32px,4.7vw,60px) 44px;background:var(--night);color:#fff;border-bottom:none}
.kr-hero .crumbs{color:rgba(255,255,255,.5)}
.kr-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.1;max-width:16ch;letter-spacing:-.02em}
.kr-hero .lead{margin-top:20px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.72);max-width:52ch}
.kr-hero .hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.kr-hero .btn-ghost{background-color:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.kr-hero .mini{margin-top:20px;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55)}
.loker-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.loker-head h2{font-size:clamp(20px,2.4vw,30px)}
.loker-head .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.loker-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.loker-filters .grp{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.loker-filters .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
.loker-filters button{font-size:12px;font-weight:500;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft)}
.loker-filters button.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.loker-grid{display:flex;flex-direction:column;gap:12px}
.loker{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.loker h3{font-size:16px}
.loker .meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.loker .tag{font-family:var(--mono);font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft)}
.loker .tag.dept{color:var(--teal-ink);border-color:#cbe7f0}
.loker .btn{font-size:12px;padding:8px 16px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.testi .q{font-size:14px;line-height:1.7;color:var(--ink);flex:1}
.testi .q::before{content:'\201C';font-size:36px;color:var(--gold);line-height:0;display:block;margin-bottom:8px}
.testi .p{margin-top:20px;padding-top:16px;border-top:1px solid var(--panel)}
.testi .p b{font-size:14px}
.testi .p span{display:block;margin-top:4px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.life{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.life div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px}
.life b{font-size:14px}
.life p{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.6}
.pool{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:40px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.pool h2{font-size:clamp(20px,2.2vw,24px)}
.pool p{margin-top:8px;font-size:14px;color:var(--ink-soft);max-width:50ch;line-height:1.7}
.pool p a{color:var(--cobalt);font-weight:600}
@media(max-width:1000px){.testi-grid{grid-template-columns:1fr}.life{grid-template-columns:1fr 1fr}.loker{grid-template-columns:1fr}.loker .btn{justify-self:start}}
.ke-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.cart-lines{display:flex;flex-direction:column;gap:12px}
.cart-line{display:grid;grid-template-columns:60px 1fr auto auto;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 16px}
.cl-thumb{width:60px;height:60px;border:1px dashed #c7ccd6;border-radius:8px;background:linear-gradient(160deg,#eef1f8,var(--panel));overflow:hidden}
.cl-thumb:has(img){border-style:solid;border-color:var(--line);background:#fff}
.cl-thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}
.cl-main .cl-kat{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-ink)}
.cl-main h3{margin-top:4px;font-size:14px}
.cl-qty{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 8px}
/* sasaran tekan diperbesar ke 32px dan area sentuhnya dilebarkan lewat elemen
   semu, jadi tampilannya tetap ringkas tapi mudah ditekan di HP */
.cl-qty button{position:relative;width:32px;height:32px;border:none;background:var(--panel);border-radius:999px;font-weight:700;color:var(--cobalt);cursor:pointer;font-size:16px;line-height:1;transition:background-color var(--t-fast) ease}
.cl-qty button:hover{background:var(--panel);filter:none;color:var(--ocean)}
.cl-qty button::after{content:'';position:absolute;inset:-6px}
.cl-qty span{font-family:var(--mono);font-size:12px;min-width:16px;text-align:center}
.cl-rm{border:none;background:none;font-size:12px;color:var(--ink-faint);cursor:pointer;text-decoration:underline}
.cart-empty{background:var(--white);border:1px dashed var(--line);border-radius:12px;padding:40px 24px;text-align:center;font-size:14px;color:var(--ink-soft)}
.cart-empty a{color:var(--cobalt);font-weight:600}
.ringkas-box{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;position:sticky;top:24px}
.ringkas-box h2{font-size:16px;margin-bottom:16px}
.ringkas-box .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--ink-soft)}
.ringkas-box .row b{color:var(--ink)}
.ringkas-box .harga-note{margin:12px 0;padding:12px 12px;background:#fff6e6;border-radius:8px;font-size:12px;line-height:1.6;color:#8a6400}
.ringkas-box .btn{width:100%;margin-top:8px}
.ringkas-box .mp-alt{margin-top:16px;padding-top:12px;border-top:1px solid var(--panel);font-size:12px;color:var(--ink-soft);line-height:1.7}
.ringkas-box .mp-alt a{color:var(--cobalt);font-weight:600}
@media(max-width:940px){.ke-layout{grid-template-columns:1fr}.ringkas-box{position:static}}
@media(max-width:560px){.cart-line{grid-template-columns:1fr auto;grid-auto-flow:row}.cl-thumb{display:none}.cl-rm{grid-column:2}}
.co-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.co-form{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px}
.co-form h2{font-size:16px;margin-bottom:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
.field input,.field textarea{width:100%;font-family:inherit;font-size:14px;padding:12px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.field [aria-invalid="true"]{border-color:#c0392b;background:#fff5f4}
.field textarea{min-height:76px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-sum{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;position:sticky;top:24px}
.co-sum h2{font-size:16px;margin-bottom:12px}
.co-sum ul{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
.co-sum li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--panel)}
.co-sum li:last-child{border-bottom:none}
.co-sum .btn{width:100%}
.co-sum .co-note{margin-top:12px;font-size:12px;color:var(--ink-faint);line-height:1.65}
.co-err{margin-top:12px;font-size:12px;line-height:1.5;color:#b42318}
.co-done{margin-top:16px;padding:16px;border-radius:12px;background:var(--green-bg);color:#0d5a3f;font-size:12px;line-height:1.6}
.co-done p{margin-top:4px}
.co-wa-link{display:inline-block;margin-top:8px;color:var(--cobalt);font-weight:600;text-decoration:underline;cursor:pointer}
.co-sum .co-alt{margin-top:12px;padding-top:12px;border-top:1px solid var(--panel);font-size:12px;color:var(--ink-soft);line-height:1.7}
.co-sum .co-alt a{color:var(--cobalt);font-weight:600}
@media(max-width:940px){.co-layout{grid-template-columns:1fr}.co-sum{position:static}.two{grid-template-columns:1fr}}
.kanal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kanal{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.kanal h2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.kanal .isi{font-size:16px;font-weight:700;word-break:break-word}
.kanal .sub{font-size:12px;color:var(--ink-soft);line-height:1.6}
.kanal .sub{margin-bottom:8px}
.kanal .btn{margin-top:auto}
.alamat-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.alamat-grid h2{font-size:20px}
.alamat-grid address{margin-top:0;font-size:14px;line-height:1.8;color:var(--ink-soft)}
.alamat-grid .jam{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.kotak{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px}
.kotak h3{font-size:18px;margin-bottom:16px}
.kotak ol{counter-reset:l;display:flex;flex-direction:column;gap:12px}
.kotak li{counter-increment:l;position:relative;padding-left:32px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.kotak li::before{content:counter(l);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--cobalt);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.kotak .note{margin-top:20px;padding-top:16px;border-top:1px solid var(--panel);font-size:12px;color:var(--ink-faint)}
.mp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* kartu marketplace: warna brand masing-masing, slot logo siap diisi */
.mp{position:relative;display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:16px;overflow:hidden;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.mp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand,var(--cobalt))}
.mp:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--brand,var(--cobalt))}
.mp .mp-logo{flex-shrink:0;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--brand,var(--cobalt));color:#fff;font-family:var(--display);font-weight:800;font-size:18px;line-height:1}
.mp .mp-logo img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.mp .mp-txt{display:flex;flex-direction:column;gap:0px;min-width:0}
.mp b{font-size:14px;color:var(--ink)}
.mp span{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.kanal-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.kanal-grid,.mp-grid{grid-template-columns:minmax(0,1fr)}}
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:24px}
.toc-judul{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.toc ul{display:flex;flex-direction:column;gap:0px}
.toc a{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-soft)}
.toc a.on{background:var(--panel);color:var(--cobalt)}
.toc .n{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.kat+.kat{margin-top:48px}
.kat h2{font-size:clamp(18px,2vw,24px)}
.kat-desc{margin-top:8px;font-size:14px;color:var(--ink-soft)}
.list{margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
.qa{border-bottom:1px solid var(--panel)}
.qa:last-child{border-bottom:none}
.qa summary{display:flex;justify-content:space-between;gap:20px;padding:16px 20px;font-size:14px;font-weight:600;list-style:none}
.qa summary svg{width:18px;height:18px;color:var(--ink-faint)}
.qa[open] summary{color:var(--cobalt)}
.qa .jawab{padding:0 20px 20px;font-size:14px;line-height:1.75;color:var(--ink-soft);max-width:68ch}
.qa .jawab b{color:var(--ink)}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr;gap:24px}.toc{position:static}.toc ul{flex-direction:row;flex-wrap:wrap;gap:8px}.toc a{border:1px solid var(--line);background:var(--white)}}
.bl-hero{padding-block:clamp(24px,3.8vw,48px) 40px;background:linear-gradient(180deg,var(--tint),var(--white));border-bottom:1px solid var(--line)}
.bl-hero h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em}
.bl-hero .lead{margin-top:16px;max-width:58ch;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.bl-count{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
/* thumbnail: foto produk yang dibahas, di atas latar warna topik. slot yang sama nanti diisi foto artikel asli */
.bl-thumb{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:var(--panel);aspect-ratio:16/10}
.bl-thumb img{width:64%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.bl-thumb .bl-ic svg{width:48px;height:48px;color:var(--cobalt);opacity:.5}
.bl-thumb[data-k="menentukan-watt"]{background:linear-gradient(150deg,#eef3ff,#d9e3ff)}
.bl-thumb[data-k="warna-cahaya"]{background:linear-gradient(150deg,#fff7ea,#ffe4b8)}
.bl-thumb[data-k="awet-aman"]{background:linear-gradient(150deg,#ecf8f2,#cdeedf)}
.bl-thumb[data-k="untuk-usaha"]{background:linear-gradient(150deg,#eaf6fb,#c9e8f3)}
.bl-thumb[data-k="siaga"]{background:linear-gradient(150deg,#f2f0fd,#dcd7f9)}
.bl-lead .lbl,.bl-mini .lbl,.bl-card .lbl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.bl-meta{margin-top:12px;font-size:12px;color:var(--ink-faint)}
.bl-meta span{white-space:nowrap}
.bl-lead h3,.bl-mini h3,.bl-card h3{transition:color var(--t-fast) ease}
.bl-lead:hover h3,.bl-mini:hover h3,.bl-card:hover h3{color:var(--cobalt)}
/* seluruh kartu bisa diklik lewat tautan yang dibentangkan, pola sama dengan kartu produk */
.bl-lead,.bl-mini,.bl-card{position:relative;cursor:pointer}
.bl-lead .more::after,.bl-mini .more::after,.bl-card .more::after{content:'';position:absolute;inset:0}
/* ---- terbaru: satu tulisan besar + tiga tulisan ringkas, pola halaman berita ---- */
.bl-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
.bl-lead .bl-thumb{aspect-ratio:16/9;border-radius:12px}
.bl-lead .lbl{margin-top:20px}
.bl-lead h3{margin-top:8px;font-size:clamp(20px,2.2vw,30px);line-height:1.25;letter-spacing:-.01em;max-width:30ch}
.bl-lead .dek{margin-top:12px;font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:60ch}
.bl-lead .more{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--cobalt)}
.bl-side{display:flex;flex-direction:column}
.bl-mini{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start;padding-block:16px;border-bottom:1px solid var(--line)}
.bl-mini:first-child{padding-top:0}
.bl-mini:last-child{border-bottom:none}
.bl-mini .bl-thumb{aspect-ratio:4/3}
.bl-mini h3{margin-top:4px;font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-mini .bl-meta{margin-top:8px}
.bl-mini .more,.bl-card .more{font-size:0}
/* ---- semua tulisan + saringan topik ---- */
.bl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.bl-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  font-family:inherit;font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.bl-chip span{font-family:var(--mono);font-size:12px;color:var(--ink-faint);transition:color var(--t-fast) ease}
.bl-chip:hover{border-color:var(--cobalt);color:var(--cobalt)}
.bl-chip.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.bl-chip.is-on span{color:rgba(255,255,255,.75)}
.bl-chip:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bl-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color var(--t-base) var(--ease)}
.bl-card[hidden]{display:none}
.bl-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:32px}
.bl-pager[hidden]{display:none}
.bl-pg{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color var(--t-fast) ease,color var(--t-fast) ease,background-color var(--t-fast) ease}
.bl-pg:hover:not(:disabled):not(.is-on){border-color:var(--line-strong);color:var(--cobalt)}
.bl-pg.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff;cursor:default}
.bl-pg:disabled{opacity:.4;cursor:default}
.bl-pg svg{width:18px;height:18px}
.bl-card:hover{border-color:var(--line-strong)}
.bl-card .bl-thumb{border-radius:0}
.bl-card .bl-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px}
.bl-card h3{margin-top:8px;font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .dek{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .bl-meta{margin-top:auto;padding-top:16px}
.bl-empty{padding:24px;text-align:center;font-size:14px;color:var(--ink-soft)}
/* ---- topik: kotak sama tinggi, tombol selalu di dasar kotak ---- */
.bl-clusters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.bl-cluster{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px}
.bl-cluster .ic{width:40px;height:40px;border-radius:8px;background:var(--panel);color:var(--cobalt);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.bl-cluster .ic svg{width:20px;height:20px}
.bl-cluster h3{font-size:16px;line-height:1.35}
.bl-cluster .n{margin-top:4px;font-size:12px;color:var(--ink-faint)}
.bl-cluster ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-cluster li a{font-size:14px;line-height:1.5;color:var(--ink-soft);transition:color var(--t-fast) ease}
.bl-cluster li a:hover{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.bl-topic-btn{margin-top:16px;align-self:flex-start;padding:0;border:none;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--cobalt);cursor:pointer}
.bl-topic-btn:hover{text-decoration:underline;text-underline-offset:3px}
/* di bawah 5 kolom, topik jadi rel geser supaya tidak ada kotak yang jatuh sendirian di baris bawah */
@media(max-width:1180px){.bl-clusters{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.bl-cluster{flex:0 0 min(300px,80%);scroll-snap-align:start}}
@media(max-width:980px){.bl-top{grid-template-columns:minmax(0,1fr);gap:32px}.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .bl-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .bl-card{flex-direction:row}
  .bl-card .bl-thumb{flex:0 0 112px;aspect-ratio:auto}
  .bl-card .bl-body{padding:12px 16px}
  .bl-card h3{margin-top:4px;font-size:14px;-webkit-line-clamp:3}
  .bl-card .dek{display:none}
  .bl-card .bl-meta{padding-top:8px}
  .bl-mini{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .bl-mini h3{font-size:14px}
  .bl-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-22px;padding-inline:22px;scrollbar-width:none}
  .bl-filter::-webkit-scrollbar{display:none}
  .bl-chip{flex-shrink:0}
}
.bp-hero{padding-block:40px 32px;background:var(--white);border-bottom:1px solid var(--line)}
.bp-hero .lbl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.bp-hero h1{margin-top:12px;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.02em;line-height:1.2;max-width:32ch}
.bp-hero .dek{margin-top:16px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:60ch}
.bp-meta{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.bp-meta .who{font-weight:600;color:var(--ink-soft)}
/* dua kolom: isi kiri, daftar isi menempel di kanan */
.bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:56px;align-items:start}
.bp-toc{position:sticky;top:96px;border-left:2px solid var(--line);padding-left:16px}
.bp-toc p{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.bp-toc ul{display:flex;flex-direction:column;gap:8px}
.bp-toc a{font-size:14px;line-height:1.5;color:var(--ink-soft);transition:color var(--t-fast) ease}
.bp-toc a:hover{color:var(--cobalt)}
/* prosa: ukuran baris dijaga supaya nyaman dibaca */
.bp-body{max-width:66ch}
.bp-body h2{margin-top:40px;font-size:24px;line-height:1.3;scroll-margin-top:112px}
.bp-body h3{margin-top:32px;font-size:18px;line-height:1.35}
.bp-body p{margin-top:16px;font-size:16px;line-height:1.85;color:var(--ink-soft)}
.bp-body p b{color:var(--ink)}
.bp-body ul{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.bp-body ul li{position:relative;padding-left:20px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.bp-body ul li::before{content:'';position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:999px;background:var(--bluegreen)}
.bp-body .tabel-wrap{margin-top:24px}
.bp-note{margin-top:24px;padding:20px;background:var(--tint);border:1px solid var(--line);border-radius:12px}
.bp-note b{display:block;font-size:14px;color:var(--cobalt)}
.bp-note p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
/* tautan ke produk: alasan tulisan ini ada */
.bp-prod{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:24px;
  background:var(--panel);border-radius:16px}
.bp-prod div{flex:1 1 220px}
.bp-prod b{font-size:16px}
.bp-prod p{margin-top:4px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.bp-faq{margin-top:40px}
.bp-faq h2{margin-bottom:8px}
.bp-faq details{border-bottom:1px solid var(--line)}
.bp-faq summary{padding:16px 0;font-weight:700;font-size:16px;line-height:1.45;list-style:none;display:flex;justify-content:space-between;gap:16px}
.bp-faq summary::-webkit-details-marker{display:none}
.bp-faq summary::after{content:'+';font-family:var(--mono);font-weight:400;font-size:20px;color:var(--cobalt);flex-shrink:0}
.bp-faq details[open] summary::after{content:'\2013'}
.bp-faq details p{padding-bottom:16px;font-size:14px;line-height:1.8;color:var(--ink-soft);max-width:62ch}
.bp-author{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.bp-author .av{width:48px;height:48px;border-radius:999px;background:var(--grad);flex-shrink:0}
.bp-author b{font-size:14px}
.bp-author p{margin-top:4px;font-size:12px;line-height:1.6;color:var(--ink-soft);max-width:52ch}
@media(max-width:980px){.bp-layout{grid-template-columns:minmax(0,1fr);gap:32px}.bp-toc{position:static;order:-1}}
/* ==== grid fluid: menyesuaikan lebar, tanpa lompatan breakpoint ==== */
.feat-grid,.prod-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,216px),1fr))}
.stat-row,.hstats{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.cat-grid,.pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.steps,.buckets,.readrow,.usecase{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.testi-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.loc-list,.toko-list,.val-grid,.mat-grid,.ev-grid,.data-grid,.skala,.proj-grid,
.tema-grid,.juri,.galeri,.artikel-grid,.life,.loker-grid,.beat-grid,.cfeed,
.flow,.terkait-grid,.kf-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* empat alasan stok: dua kolom supaya tidak ada kotak yang tertinggal sendirian */
.val-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.val-grid{grid-template-columns:minmax(0,1fr)}}
.story-inner,.oneroom-inner,.install-inner,.alamat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* footer: kolom tentang lebih lebar, 4 kolom tautan sama rata. auto-fit sengaja tidak dipakai:
   auto-fit bikin kolom terakhir jatuh sendirian di baris bawah (footer "pincang") */
.footer-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.35fr);gap:40px}
@media(max-width:1080px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}.footer-about{grid-column:1/-1}.footer-about p{max-width:64ch}}
@media(max-width:640px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.footer-grid>.footer-col:last-child,.footer-grid>.footer-col:nth-last-child(2){grid-column:1/-1}.footer-grid>.footer-col:nth-last-child(2) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}}
/* ==== kartu produk: 3 kolom di tablet, 2 kolom padat di HP seperti marketplace ==== */
@media(max-width:900px){.feat-grid:has(>.card),.prod-grid,.terkait-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}}
@media(max-width:640px){
  .feat-grid:has(>.card),.prod-grid,.terkait-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .card{border-radius:8px}
  .card .photo,.card .photo--img{padding:8px}
  .card .body{padding:8px 12px 12px}
  .card .kat{font-size:12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card h3{margin-top:4px;font-size:14px;line-height:1.3}
  .card .kode,.card .blurb,.card .meta .chip:nth-child(n+2){display:none}
  .card .volt{margin-top:4px;padding:2px 6px}
  .card .meta{margin-top:4px}
  .card .actions{padding-top:8px;gap:0}
  .card .actions .btn{padding:8px;font-size:12px}
  /* "Lihat detail" disembunyikan tapi tautannya tetap membentang di seluruh kartu */
  .card .actions .btn-ghost{height:0;padding:0;margin:0;border:0;overflow:hidden;font-size:0}
  /* deretan pendek (unggulan, terkait) jadi rel geser seperti marketplace: kartu ketiga mengintip sebagai tanda bisa digeser,
     jadi tidak ada kartu yang tertinggal sendirian di baris bawah */
  .feat-grid:has(>.card),.terkait-grid{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:-22px;padding:0 22px 4px;scroll-padding-inline:22px;scrollbar-width:none}
  .feat-grid:has(>.card)::-webkit-scrollbar,.terkait-grid::-webkit-scrollbar{display:none}
  .feat-grid:has(>.card)>.card,.terkait-grid>.card{scroll-snap-align:start}
}
/* tab produk beranda maksimal 4 kartu: di tablet 2 kolom supaya tidak ada kartu sendirian */
@media(min-width:641px) and (max-width:900px){.feat-grid.hp-grid:has(>.card){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* ==== VIBE: bahasa visual halaman Tentang dipakai di seluruh situs ====
   pembuka gelap bercahaya, label bergaris emas, judul tegas, pita ajakan gelap bersorot, strip angka.
   selektor diawali body supaya menang atas CSS halaman di bundle maupun file per halaman */
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero){position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:#fff;border-bottom:1px solid rgba(246,156,0,.28);border-image:none;padding-block:clamp(48px,6.5vw,88px) clamp(40px,4.5vw,60px);--mx:76%;--my:18%}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000,transparent 70%);mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000,transparent 70%)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px circle at var(--mx) var(--my),rgba(246,156,0,.15),transparent 60%),
    conic-gradient(from 168deg at 78% -6%,transparent 0deg,rgba(255,214,140,.13) 9deg,transparent 18deg,transparent 24deg,rgba(255,214,140,.07) 30deg,transparent 40deg)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) h1{color:#fff;font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
body .bp-hero h1{font-size:clamp(28px,3.6vw,46px);line-height:1.14;max-width:28ch}
body .c-hero h1{max-width:22ch}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .crumbs{color:rgba(255,255,255,.52)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .crumbs a{color:rgba(255,255,255,.82)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) :is(.lead,.dek){color:rgba(255,255,255,.74)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .lead b{color:#fff}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) :is(.tema,.lbl){display:inline-flex;align-items:center;gap:12px;color:var(--gold);letter-spacing:.1em}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) :is(.tema,.lbl)::before{content:'';width:28px;height:1px;background:currentColor}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) :is(.by,.bp-meta,.bl-count,.tag,.mini){color:rgba(255,255,255,.6)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .bp-meta .who{color:#fff}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .c-video{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .btn-ghost{background-color:transparent;border-color:rgba(255,255,255,.3);color:#fff}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero) .btn-ghost:hover{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
body .p-hero .btn-solid{background-color:var(--gold);color:var(--cobalt)}
body .toc a.btn-wa,body .toc a.btn-wa:hover{color:#fff;justify-content:center}
/* label kecil: garis emas di depan, sama dengan kicker Tentang */
body .eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:.1em}
body .eyebrow::before{content:'';flex:0 0 28px;height:1px;background:var(--gold)}
body .eyebrow[style*="text-align:center"]{justify-content:center}
body .section-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.025em}
/* pita ajakan: gelap bersorot cahaya, seperti penutup Tentang */
body .cta-final{isolation:isolate;background:var(--night);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:clamp(32px,5vw,64px);box-shadow:0 30px 60px -32px rgba(10,19,48,.7);--mx:84%;--my:30%}
body .cta-final::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(246,156,0,.18),transparent 60%),conic-gradient(from 170deg at 86% -12%,transparent 0deg,rgba(255,214,140,.1) 12deg,transparent 24deg)}
body .cta-final h2{font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
body .cta-final p{color:rgba(255,255,255,.72)}
/* strip angka beranda: label di atas, angka besar, garis pemisah */
body .hstats{gap:0;text-align:left;border-top:1px solid var(--line)}
body .hstats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:24px 24px 8px 0}
body .hstats>div+div{padding-left:24px;border-left:1px solid var(--line)}
body .hstats .n{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
body .hstats .l{margin:0 0 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:1000px){body .hstats>div:nth-child(odd){padding-left:0;border-left:none}body .hstats>div:nth-child(n+3){border-top:1px solid var(--line)}}
/* motion masuk pembuka: berurutan, judul naik terbuka, cahaya menyala sekali */
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>*{animation:tbUp var(--t-slow) var(--ease) backwards}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>:nth-child(2){animation-delay:.08s}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>:nth-child(3){animation-delay:.16s}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>:nth-child(4){animation-delay:.26s}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>:nth-child(n+5){animation-delay:.34s}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>h1{animation-name:tbRise;animation-duration:.8s}
.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{animation:vbGlow 1.2s var(--ease) .1s backwards}
@keyframes tbUp{from{opacity:0;transform:translateY(16px)}}
@keyframes tbRise{from{opacity:0;transform:translateY(32px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
@keyframes vbGlow{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>*,.fx :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{animation:none}}
.no-anim :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)>.wrap>*,.no-anim :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{animation:none!important}
[hidden]{display:none!important}
.route{animation:routeIn .42s cubic-bezier(.23,1,.32,1)}
@keyframes routeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.route{animation:none}}
/* parallax pembuka beranda saat scroll (hanya transform/opacity) */
.fx .hero-bg img{transform:translate3d(0,var(--py,0px),0) scale(1.1);will-change:transform}
.fx .hero-copy{transform:translate3d(0,var(--cy,0px),0);opacity:var(--co,1)}
.no-anim .hero-bg img,.no-anim .hero-copy{transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.fx .hero-bg img{transform:none;will-change:auto}.fx .hero-copy{transform:none;opacity:1}}
/* strip angka Tentang: 4 kotak */
.tb-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){
  .tb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-stats>div:nth-child(3){padding-left:0;border-left:none}
  .tb-stats>div:nth-child(4){padding-left:24px;border-left:1px solid rgba(255,255,255,.12)}
  .tb-stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
}
@media(max-width:640px){
  .tb-stats{grid-template-columns:minmax(0,1fr)}
  .tb-stats>div,.tb-stats>div+div,.tb-stats>div:nth-child(3),.tb-stats>div:nth-child(4){padding:16px 0;border-left:none;border-top:1px solid rgba(255,255,255,.12)}
}
/* unduh katalog: isi data dulu */
.kdl{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.kdl[hidden]{display:none}
.kdl-back{position:absolute;inset:0;background:rgba(5,9,28,.64)}
.kdl-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--white);border-radius:16px;padding:32px 28px 24px;box-shadow:0 24px 60px rgba(5,9,28,.35)}
.fx .kdl:not([hidden]) .kdl-box{animation:tbUp var(--t-base) var(--ease)}
.fx .kdl:not([hidden]) .kdl-back{animation:vbGlow var(--t-base) var(--ease)}
.kdl-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:transparent;border-radius:999px;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;transition:background var(--t-fast) ease}
.kdl-x:hover{background:var(--tint)}
.kdl-x svg{width:20px;height:20px}
.kdl h2{font-size:clamp(22px,4vw,26px);line-height:1.2;margin:8px 48px 8px 0}
.kdl-sub{color:var(--ink-soft);margin:0 0 20px;font-size:15px}
.kdl-form .field{margin-bottom:14px}
.kdl .field input,.kdl .field select{width:100%;font-family:inherit;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.kdl .field [aria-invalid="true"]{border-color:#c0392b;background:#fff5f4}
.kdl-ok{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-soft);margin:4px 0 14px}
.kdl-ok input{margin:2px 0 0;width:18px;height:18px;flex:0 0 18px;accent-color:var(--cobalt)}
.kdl-err{margin:0 0 12px;color:#b42318;font-size:14px;font-weight:600}
.kdl-note{margin:12px 0 0;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.kdl .btn-lg{width:100%;justify-content:center}
.kdl-done{text-align:center;padding:12px 0 4px}
.kdl-done h2{margin:0 0 8px}
.kdl-done p{color:var(--ink-soft);margin:0 0 20px}
.kdl-done .btn+.btn{margin-top:10px}
html.kdl-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.fx .kdl .kdl-box,.fx .kdl .kdl-back{animation:none}}
.no-anim .kdl .kdl-box,.no-anim .kdl .kdl-back{animation:none!important}
/* revisi 01 Okt: tombol nonaktif, kotak produk di cerita */
.btn.is-off{opacity:.45;pointer-events:none}
.prod-mention .box{border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.prod-mention .box img{width:100%;height:100%;object-fit:contain;padding:6px}
.prod-mention .pm-link{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--cobalt)}
.prod-mention .pm-link:hover{text-decoration:underline}
/* foto ilustrasi cerita */
.cerita-card .thumb,.cf-card .thumb{padding:0;overflow:hidden}
.cerita-card .thumb img,.cf-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.c-video{overflow:hidden}
.c-video img{width:100%;height:100%;object-fit:cover;display:block}
.orc-ph{overflow:hidden}
.orc-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* ===== Tentang Kami bergaya company profile (1 Okt) ===== */
.tb-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.tb-photo{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.35);aspect-ratio:4/5;max-width:420px;width:100%;justify-self:end;background:#0f1a3d}
.tb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tb-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:12px;color:rgba(255,255,255,.9);background:linear-gradient(to top,rgba(5,9,28,.9),rgba(5,9,28,0))}
.fx .tb-hero .tb-photo{animation:tbUp var(--t-slow) var(--ease) .3s backwards}
@media(prefers-reduced-motion:reduce){.fx .tb-hero .tb-photo{animation:none}}
.no-anim .tb-hero .tb-photo{animation:none!important}
.tb-prosa p{font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:62ch}
.tb-prosa p+p{margin-top:16px}
.tb-prosa b{color:var(--ink)}
.vm-visi{position:relative;overflow:hidden;background:var(--night);color:#fff;border-radius:18px;padding:clamp(28px,4vw,48px);isolation:isolate}
.vm-visi::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at 85% 20%,rgba(246,156,0,.22),transparent 60%)}
.vm-lbl{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.vm-big{margin-top:14px;font-family:var(--display);font-size:clamp(22px,2.6vw,34px);font-weight:700;line-height:1.3;letter-spacing:-.01em;max-width:30ch;color:#fff}
.vm-big em{font-style:normal;color:var(--gold)}
.vm-misi{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vm-misi li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.vm-misi .no{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:#8a5200}
.vm-misi p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink)}
.tb-prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tb-prod{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--night);color:#fff;isolation:isolate;border:1px solid var(--line)}
.tb-prod img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tb-prod .t{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;background:linear-gradient(to top,rgba(5,9,28,.94) 30%,rgba(5,9,28,0))}
.tb-prod h3{font-size:20px;color:#fff;line-height:1.2}
.tb-prod p{margin-top:6px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.82)}
.jr-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.jr-copy h2{margin-top:12px;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.02em}
.jr-points{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.jr-points li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.jr-points li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--gold)}
.jr-points b{color:var(--ink)}
.jr-points a{color:var(--cobalt);font-weight:700}
.jr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;aspect-ratio:4/3}
.jr-grid img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--line)}
.jr-grid .a{grid-column:1/3;grid-row:1}
.jr-grid .b{grid-column:3;grid-row:1/3}
.jr-grid .c{grid-column:1;grid-row:2}
.jr-grid .d{grid-column:2;grid-row:2}
@media(max-width:980px){
  .tb-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .tb-photo{max-width:none;aspect-ratio:16/10;justify-self:stretch}
  .vm-misi{grid-template-columns:1fr 1fr}
  .jr-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .jr-grid{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-auto-rows:160px;grid-template-rows:none}
  .jr-grid .a,.jr-grid .b{grid-column:1/3;grid-row:auto}
  .jr-grid .c,.jr-grid .d{grid-column:auto;grid-row:auto}
}
@media(max-width:800px){.tb-prod-grid{grid-template-columns:minmax(0,1fr)}.tb-prod{aspect-ratio:16/9}}
@media(max-width:560px){.vm-misi{grid-template-columns:minmax(0,1fr)}}
/* ===== Kenapa AVANA: kartu angka (1 Okt) ===== */
.pillars.pl-v2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto;gap:14px}
.pl-v2 .pillar{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;justify-content:flex-start}
.pl-v2 .pillar .big{display:block;font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--cobalt);font-variant-numeric:tabular-nums}
.pl-v2 .pillar h3{margin-top:12px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.pl-v2 .pillar p{margin-top:6px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.pl-v2 .pillar--hero{grid-row:span 2;position:relative;overflow:hidden;background:var(--night);border-color:transparent;color:#fff;padding:28px;justify-content:space-between;gap:24px;isolation:isolate}
.pl-v2 .pillar--hero::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at 90% 0%,rgba(246,156,0,.28),transparent 60%)}
.pl-v2 .pillar--hero .big{font-size:clamp(44px,5vw,64px);color:var(--gold)}
.pl-v2 .pillar--hero h3{color:#fff;font-size:18px}
.pl-v2 .pillar--hero p{color:rgba(255,255,255,.74);font-size:14px;max-width:34ch}
.pl-v2 .pillar--hero .btn{align-self:flex-start}
@media(max-width:1000px){.pillars.pl-v2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pl-v2 .pillar--hero{grid-column:1/3;grid-row:auto}}
@media(max-width:560px){.pillars.pl-v2{grid-template-columns:minmax(0,1fr)}.pl-v2 .pillar--hero{grid-column:auto}}
/* ===== Revisi 3 (1 Okt): eyebrow pil tanpa garis, chip USP berwarna, ikon pilar & misi, 5 kelompok produk ===== */
body .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--cobalt);font-size:11px;letter-spacing:.1em;margin-bottom:14px}
body .eyebrow::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
body .eyebrow[style*="text-align:center"]{display:flex;width:max-content;margin-inline:auto}
body .hero .eyebrow,body .tb-dark .eyebrow,body .eyebrow[style*="--gold"],body .oneroom .eyebrow,body .story .eyebrow{background:rgba(246,156,0,.16);color:var(--gold)}
body .tb-kicker{padding:6px 12px;border-radius:999px;background:rgba(246,156,0,.16);gap:8px}
body .tb-kicker::before{width:6px;height:6px;border-radius:50%;background:var(--gold)}
body .vm-lbl{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(246,156,0,.16)}
body .jr-points li{padding-left:24px}
body .jr-points li::before{top:8px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
body .certrow .c{background:var(--cobalt);color:#fff;border-color:transparent;font-size:13px;padding:10px 18px}
body .certrow .c:nth-child(2n){background:var(--gold);color:var(--night)}
body .certrow .c svg{color:currentColor}
.pl-v2 .pillar .ic{width:38px;height:38px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--cobalt);margin-bottom:14px}
.pl-v2 .pillar .ic svg{width:19px;height:19px}
.pl-v2 .pillar--hero .ic{background:rgba(246,156,0,.18);color:var(--gold);width:44px;height:44px}
.pl-v2 .pillar--hero .ic svg{width:22px;height:22px}
.vm-misi .ic{width:38px;height:38px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--cobalt);margin-bottom:12px}
.vm-misi .ic svg{width:19px;height:19px}
.tb-prod-grid.pg5{grid-template-columns:repeat(6,minmax(0,1fr))}
.pg5 .tb-prod:nth-child(-n+3){grid-column:span 2}
.pg5 .tb-prod:nth-child(n+4){grid-column:span 3;aspect-ratio:16/8}
.tb-prod .w{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gold)}
@media(max-width:980px){.tb-prod-grid.pg5{grid-template-columns:repeat(2,minmax(0,1fr))}.pg5 .tb-prod:nth-child(-n+3),.pg5 .tb-prod:nth-child(n+4){grid-column:auto;aspect-ratio:4/3}.pg5 .tb-prod:last-child{grid-column:1/3;aspect-ratio:16/8}}
@media(max-width:800px){.tb-prod-grid.pg5{grid-template-columns:minmax(0,1fr)}.pg5 .tb-prod,.pg5 .tb-prod:last-child{grid-column:auto;aspect-ratio:16/9}}
/* ===== AUDIT DESAIN 1 Okt 2026: blok terakhir, menimpa aturan lama =====
   WARNA = PERAN. Emas: satu aksi utama per band. Hijau: WhatsApp, selalu. Kobalt: aksi sistem/form. Ghost: navigasi sekunder.
   SKALA: semua judul lewat token; angka statistik tidak lebih besar dari h1.
   CAHAYA: satu berkas halus di pembuka halaman; selebihnya cahaya datang dari foto. */
:root{--t-h1:clamp(34px,4.4vw,56px);--t-h1-sm:clamp(28px,3.4vw,44px);--t-h2:clamp(26px,3vw,40px);--t-h2-sub:clamp(20px,2.2vw,26px);--t-h3:18px;--t-lead:18px;--t-stat:clamp(28px,3vw,40px);--sp-band:clamp(48px,6vw,80px);--sp-hero:clamp(32px,4.5vw,56px);--teal-ink:var(--cobalt);--grad:linear-gradient(128deg,var(--night) 0%,var(--cobalt) 100%)}
@media(max-width:640px){:root{--t-h3:16px;--t-lead:16px}}
button,input,select,textarea{font-family:inherit}
/* skala huruf */
.hero h1,body :is(.p-hero,.bl-hero,.tc-hero,.kr-hero) h1,.tb-hero h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.025em}
body :is(.bp-hero,.c-hero) h1,.info h1{font-size:var(--t-h1-sm);line-height:1.12}
body .section-head h2,.ms-head h2,.story h2,.oneroom h2,body .cta-final h2,.tb-side h2,.jr-copy h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.02em}
.grp-head h2,.faq-isi .kat h2{font-size:var(--t-h2-sub);line-height:1.2}
.card h3,.cf-card h3,.bl-card h3,.proj h3{font-size:var(--t-h3);line-height:1.3}
.hero .lead,body :is(.p-hero,.bl-hero,.tc-hero,.kr-hero) .lead,.tb-hero .lead,.ms-head .lead{font-size:var(--t-lead);line-height:1.6}
.story p:not(.eyebrow):not(.contoh-note),.oneroom p:not(.eyebrow){font-size:16px;line-height:1.7}
.tb-stats dd{font-size:var(--t-stat)}
/* pembuka halaman: satu berkas halus, tanpa kisi dan bercak emas */
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero){padding-block:var(--sp-hero) clamp(28px,3.5vw,44px);border-bottom:0}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::before{display:none}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{background:conic-gradient(from 168deg at 78% -6%,transparent 0deg,rgba(255,214,140,.13) 9deg,transparent 18deg)}
.tb-hero::before,.tb-hero::after{display:none}
.tb-beam .b2,.tb-beam .b3{display:none}
.tb-hero-in{padding-block:var(--sp-hero) clamp(28px,3vw,40px)}
body .cta-final::before,.vm-visi::after,.pl-v2 .pillar--hero::after{display:none}
body .cta-final{border:0;box-shadow:none}
.crumbs{margin-bottom:12px}
/* ritme: dua band sewarna yang bersebelahan tidak menumpuk jarak */
.band{padding-block:var(--sp-band)}
.band:not(.dim)+.band:not(.dim),.band.dim+.band.dim{padding-top:0}
.section-head{margin-bottom:32px}
/* warna tombol mengikuti peran */
.btn-wa-ghost{background-color:#fff;border:1px solid var(--green);color:var(--green)}
.btn-wa svg,.btn-wa-ghost svg{width:18px;height:18px;flex-shrink:0}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero,.tc-hero,.kr-hero) .btn-wa-ghost{background-color:transparent;border-color:rgba(255,255,255,.3);color:#fff}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero,.tc-hero,.kr-hero) .btn-wa-ghost svg{color:#22b877}
.pl-v2 .pillar--hero .btn-ghost{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.hero-cta .btn,.cta-final .btn,.oneroom .btn,.story .btn{--glow:0 0 0 0 transparent}
.tb-hero h1 em{color:inherit}
header::after{background:var(--line)}
.bl-thumb[data-k]{background:var(--panel)}
@media(max-width:900px){.header-right .btn-wa{display:none}}
/* beranda: pembuka */
.hero{background:var(--night);border-bottom:0;border-image:none}
.hero-bg{overflow:hidden}
.hero::before{background:linear-gradient(90deg,var(--night) 0%,rgba(10,19,48,.62) 30%,rgba(10,19,48,0) 52%)}
.hero .lead{color:rgba(255,255,255,.82);max-width:42ch}
.hero-note{margin-top:24px;gap:8px 16px;align-items:center;font-family:var(--font);font-size:14px;font-weight:600;color:rgba(255,255,255,.86)}
.hero-note li:first-child{padding:6px 12px 6px 10px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#fff}
.hero-note li:first-child::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
.hero-note li+li::before{display:none}
.hero-note{column-gap:20px}
@media(max-width:900px){
  .hero{--ph:min(62vw,340px)}
  .hero-bg{inset:0 0 auto 0;height:var(--ph)}
  .hero-bg img{width:170%;max-width:none;margin-left:-70%;object-position:100% 25%}
  .hero::before{inset:0 0 auto 0;height:var(--ph);background:linear-gradient(to bottom,rgba(10,19,48,.1) 0%,rgba(10,19,48,0) 35%,rgba(10,19,48,.6) 78%,var(--night) 100%)}
  .hero-inner{min-height:0;align-items:flex-start;padding-block:calc(var(--ph) - 36px) 32px}
  .hero .tc-lockup{height:30px;margin-bottom:14px}
  .hero .lead{max-width:none}
}
@media(max-width:640px){.hero-note{font-size:13px;gap:8px 12px}}
/* beranda: pilar lebih tenang, band cerita berisi cerita */
.pl-v2 .pillar--hero{justify-content:flex-start;gap:16px}
.pl-v2 .pillar.pillar--hero .big{font-size:clamp(36px,3.6vw,48px)}
.pl-v2 .pillar--hero .btn{margin-top:8px}
.pl-v2 .pillar .big{font-size:clamp(20px,1.8vw,24px);line-height:1.15}
.pl-v2 .pillar h3{font-size:16px;margin-top:8px}
.story-inner{display:block}
.story-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.story-head p:not(.eyebrow){margin-top:12px;max-width:52ch}
.story .cfeed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0}
.story .cf-card{color:var(--ink);border-color:transparent}
.story .cf-card h3{color:var(--ink)}
.story .cf-card p{max-width:none}
.story .cf-card .q{color:var(--ink);font-size:14px;line-height:1.55}
.story .cf-card .by{margin-top:12px;font-size:12px;color:var(--ink-faint)}
.story .contoh-note{color:rgba(255,255,255,.6);font-size:12px;margin-top:16px}
@media(max-width:640px){
  .pillars.pl-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pl-v2 .pillar--hero{grid-column:1/-1;padding:22px 20px}
  .pl-v2 .pillar{padding:14px}
  .pl-v2 .pillar .big{font-size:18px}
  .pl-v2 .pillar h3{font-size:14px}
  .pl-v2 .pillar:not(.pillar--hero) .ic{width:32px;height:32px;margin-bottom:10px}
  .story .cfeed{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-22px;padding-inline:22px;scrollbar-width:none}
  .story .cfeed::-webkit-scrollbar{display:none}
  .story .cf-card{flex:0 0 80%;scroll-snap-align:center}
}
/* cerita */
:is(.tc-hero,.p-hero) .tb-photo{aspect-ratio:4/3;max-width:460px}
.cf-card .q{margin-top:10px;line-height:1.55;color:var(--ink)}
.cf-card .by{font-size:12px}
/* katalog: lampu terlihat di layar pertama, kartu ringkas */
[data-route="produk"] .p-hero{padding-block:32px 28px}
[data-route="produk"] .band.tight{padding-top:24px}
.toolbar .katalog-dl{font-size:14px;font-weight:700;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.filter{font-size:14px;font-weight:600;padding:8px 14px}
.grp-block{margin-top:64px}
.grp-block:first-of-type{margin-top:32px}
.grp-head{border-bottom:0;padding-bottom:0;margin-bottom:20px;align-items:baseline}
.grp-spec{background:none;padding:0;border-radius:0}
.card .body>.kat{order:1}
.card .body>h3,.card .body>.kode{order:2}
.card .body>.blurb{order:3}
.card .body>.meta{order:4}
.card .body>.volt{order:5}
.card .body>.actions{order:6}
.card h3{margin-top:6px}
.card .meta{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink-soft)}
.card .meta .chip{display:inline;padding:0;border:0;background:none;font-size:inherit}
.card .meta .chip b{font-weight:500}
.card .meta .chip+.chip::before{content:'\00a0\00b7\00a0'}
.card .volt,.card .volt--lebar,.card .volt--sempit,.card .volt--campur{align-self:flex-start;margin-top:4px;padding:0;background:none;color:var(--ink-soft)}
.card .actions{gap:0;padding-top:12px}
.card .actions .btn-ghost{height:0;padding:0;margin:0;border:0;overflow:visible;font-size:0;position:static}
.card{position:relative}
.card .actions .btn-cart{position:relative;z-index:2}
@media(max-width:640px){
  .filters.grp-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-22px;padding-inline:22px;scrollbar-width:none}
  .filters.grp-filter::-webkit-scrollbar{display:none}
  .filters.grp-filter .filter{flex-shrink:0}
  .card .kat{white-space:normal;overflow:visible;text-overflow:clip;font-size:11px;letter-spacing:.02em;line-height:1.3;min-height:2.6em}
}
/* halaman produk: satu urutan beli */
.detail .crumbs>:nth-child(5),.detail .crumbs>:nth-child(6){display:none}
.info .pitch{margin-top:12px;font-size:var(--t-lead);font-weight:600;line-height:1.5}
.garansi{margin-top:16px;color:#8a5200;background:#fff6e6}
.beli{margin-top:16px;gap:10px}
.beli-lbl{margin-top:6px;font-size:14px;color:var(--ink-soft)}
.beli-row{display:flex;gap:10px}
.beli-row .btn{flex:1;min-width:0;padding-inline:12px;width:auto}
.info .blurb{margin-top:24px;font-size:16px}
.info .ringkas{margin-top:20px}
@media(max-width:640px){.foto{aspect-ratio:3/2;padding:12px}.detail .crumbs{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}}
/* tidak ada kotak foto kosong */
.proj .bd{padding:20px}
.usecase{gap:10px}
.usecase div{aspect-ratio:auto;min-height:0;align-items:center;padding:14px 16px;background:var(--white);font-family:var(--font);font-size:14px;color:var(--ink)}
@media(max-width:640px){.proj-grid{gap:10px}.proj .bd{padding:16px}}
/* tentang */
.tb-hero h1{max-width:16ch}
/* HP: tabel bisa digeser dengan tanda, carousel testimoni, tombol WA Bantuan, FAB bulat */
@media(max-width:640px){
  table,.lb-tabel table{min-width:0;font-size:13px}
  .tabel-wrap table{width:max-content;min-width:100%}
  .tabel-wrap th,.tabel-wrap td,.lb-tabel th,.lb-tabel td{padding:10px 8px}
  .tabel-wrap thead th,.lb-tabel thead th{font-size:11px;letter-spacing:.02em}
  .tabel-wrap tbody th{position:sticky;left:0;z-index:1;background:var(--white)}
  .tabel-wrap{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/32px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(10,19,48,.2),transparent) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(10,19,48,.2),transparent) right center/12px 100% no-repeat scroll}
}
@media(max-width:760px){
  body .testi-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-22px;padding:4px 22px 8px;scrollbar-width:none}
  body .testi-grid::-webkit-scrollbar{display:none}
  body .testi-grid>.testi{flex:0 0 82%;min-width:0;scroll-snap-align:center}
  .testi-dots{display:flex}
}
@media(min-width:761px){.testi-dots{display:none}}
@media(max-width:900px){
  body .toc a.btn-wa{background-color:var(--green);border-color:transparent;color:#fff}
  .fab{right:16px;bottom:16px;width:52px;height:52px;padding:0;justify-content:center}
  .fab>span:not(.fab-shine){display:none}
  footer{padding-bottom:76px}
}
/* ===== Tinjauan putaran 2 (1 Okt): 8 perbaikan ===== */
body :is(.c-hero,.bp-hero) :is(.tema,.lbl){display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0 0 14px;padding:6px 12px;border:0;border-radius:999px;background:rgba(246,156,0,.16);color:var(--gold);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
body :is(.c-hero,.bp-hero) :is(.tema,.lbl)::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pl-v2 .pillar:not(.pillar--hero) .ic svg{color:var(--cobalt)}
.bl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
body .wrap.cta-final{width:min(100% - 2*clamp(16px,4vw,56px),1088px);max-width:none}
@media(max-width:640px){body .wrap.cta-final{width:calc(100% - 44px)}}
@media(min-width:901px){.hero-note{width:max-content;max-width:calc(100vw - 112px)}.hero-note li{text-shadow:0 1px 8px rgba(10,19,48,.8)}}
.tb-prod .t{padding-top:44px;background:linear-gradient(to top,rgba(5,9,28,.94) 0%,rgba(5,9,28,.8) 60%,rgba(5,9,28,0) 100%)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero,.tc-hero,.kr-hero) .btn-wa-ghost{border-color:rgba(34,184,119,.75)}
.prosa .beat-lbl,.skala .n{color:#8a5200}
.hero .lead,.tb-hero .lead{text-wrap:balance}
body .tc-hero h1{text-wrap:wrap;max-width:9.6em}
/* ===== Tentang: rak produk menggantikan ubin foto (2 Okt 2026). Kolom kanan = rak pajang berisi foto produk asli dari katalog; papan rak menyala emas dan raknya terang saat baris disorot. ===== */
.rak{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3vw,44px);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.rak::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-slow) var(--ease)}
.rak:hover::after,.rak:focus-visible::after{transform:scaleX(1)}
.rak:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.rak-t{min-width:0;padding-block:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px)}
body .rak h3{margin:0 0 6px;font-family:var(--display);font-size:clamp(21px,2.2vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink);transition:color var(--t-fast) var(--ease)}
body .rak:hover h3{color:var(--cobalt)}
.rak .d{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.rak .isi{margin:0 0 14px;max-width:54ch;font-size:13px;line-height:1.6;color:var(--ink-faint)}
.rak .m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a5200}
.rak .m b{font-weight:700;color:var(--cobalt)}
.rak .m svg{width:16px;height:16px;margin-left:-8px;color:var(--cobalt);transition:transform var(--t-fast) var(--ease)}
.rak:hover .m svg{transform:translateX(4px)}
.rak-p{--s:1;display:flex;justify-content:space-around;align-items:flex-end;gap:12px;min-width:0;padding:22px clamp(16px,2.4vw,32px) 0;background:var(--panel);box-shadow:inset 0 -2px 0 rgba(10,33,119,.16);overflow:hidden;transition:background-color var(--t-slow) var(--ease)}
.rak:first-child .rak-p{border-radius:16px 16px 0 0}
.rak:hover .rak-p,.rak:focus-visible .rak-p{background:#fff}
.rak-p img{--H:calc(var(--h,100px)*var(--s));flex:0 0 auto;display:block;width:auto;max-width:none;height:var(--H);margin:calc(var(--H)*var(--mt,0)*-1) calc(var(--H)*var(--a,1)*var(--mr,0)*-1) calc(var(--H)*var(--mb,0)*-1) calc(var(--H)*var(--a,1)*var(--ml,0)*-1);mix-blend-mode:multiply;transition:transform var(--t-slow) var(--ease)}
.rak-p img[data-prod-img="Streetlight"]{filter:brightness(1.02)}
.rak:hover .rak-p img{transform:translateY(-5px)}
.rak:hover .rak-p img:nth-child(2n){transition-delay:.05s}
@media(max-width:1100px){.rak-p{--s:.86}}
@media(max-width:900px){
  .rak{grid-template-columns:minmax(0,1fr)}
  .rak-t{padding-bottom:14px}
  .rak-p,.rak:first-child .rak-p{--s:.8;padding:20px 16px 0;border-radius:12px 12px 0 0}
}
@media(max-width:480px){.rak-p,.rak:first-child .rak-p{--s:.62;gap:10px;padding-inline:14px}}
@media(max-width:380px){.rak-p,.rak:first-child .rak-p{--s:.56;gap:8px}}
@media(max-width:340px){.rak-p,.rak:first-child .rak-p{--s:.48}}
@media(prefers-reduced-motion:reduce){.rak::after,.rak-p,.rak-p img,.rak .m svg{transition:none}}
/* ===== Rev 9 (2 Okt 2026): hasil banding dengan situs produk asli (Philips, IKEA, Hannochs).
   Label polos tanpa pil, halaman transaksi ringkas, daftar dan foto produk asli menggantikan deretan kartu seragam. ===== */
/* 1. label kecil di atas judul: teks polos, tanpa pil dan tanpa titik emas */
body .eyebrow,body .eyebrow[style*="text-align:center"]{display:block;width:auto;margin-inline:0;padding:0;border-radius:0;background:none;font-size:12px;letter-spacing:.08em;margin-bottom:10px}
body .hero .eyebrow,body .tb-dark .eyebrow,body .eyebrow[style*="--gold"],body .oneroom .eyebrow,body .story .eyebrow{background:none}
body .tb-kicker,body .vm-lbl,body :is(.c-hero,.bp-hero) :is(.tema,.lbl){display:block;width:auto;padding:0;border-radius:0;background:none}
body .eyebrow::before,body .tb-kicker::before,body :is(.c-hero,.bp-hero) :is(.tema,.lbl)::before{content:none;display:none}
.hero-note li:first-child{padding:0;border:0;border-radius:0}
.hero-note li:first-child::before{display:none}
@media(min-width:641px){.hero-note li+li{padding-left:20px;border-left:1px solid rgba(255,255,255,.3)}}
/* 2. pembuka gelap: berkas cahaya tipis dibuang, di pembuka pendek terbaca seperti goresan */
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero)::after{display:none}
/* 3. keranjang dan checkout: pembuka polos dan ringkas, isi langsung terlihat */
body .p-hero--plain{background:none;color:var(--ink);padding-block:clamp(20px,3vw,32px) 0;overflow:visible}
body .p-hero--plain h1{color:var(--ink);font-size:var(--t-h1-sm);max-width:none}
body .p-hero--plain .lead{margin-top:8px;font-size:16px;color:var(--ink-soft)}
body .p-hero--plain .crumbs{color:var(--ink-faint)}
body .p-hero--plain .crumbs a{color:var(--ink-soft)}
.p-hero--plain+.band.tight{padding-top:24px}
.co-contoh{grid-column:1/-1;margin-top:4px}
/* 4. katalog: judul kelompok di kiri, produk di kanan; kelompok berisi satu produk tampil sebagai kartu mendatar */
@media(min-width:1000px){
  .grp-block{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);column-gap:40px;align-items:start}
  .grp-block>.grp-head{display:block;position:sticky;top:calc(var(--hdr-h,128px) + 20px);margin:0}
  .grp-block>.grp-head p{max-width:none}
  .grp-block>.grp-head .grp-spec{display:block;margin-top:14px;font-weight:600;color:#8a5200}
  .grp-block>.prod-grid{grid-column:2/3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .grp-block>.grp-count{grid-column:2/3}
  .grp-block>.prod-grid:has(>.card:only-child)>.card{grid-column:1/-1;flex-direction:row}
  .grp-block>.prod-grid:has(>.card:only-child)>.card .photo{flex:0 0 34%;aspect-ratio:auto;padding:24px;border-bottom:0;border-right:1px solid var(--line)}
  .grp-block>.prod-grid:has(>.card:only-child)>.card .photo img{width:auto;max-width:100%;height:210px}
  .grp-block>.prod-grid:has(>.card:only-child)>.card .body{justify-content:center;padding:28px 32px}
  .grp-block>.prod-grid:has(>.card:only-child)>.card .blurb{display:block;overflow:visible;-webkit-line-clamp:unset;max-width:52ch}
  .grp-block>.prod-grid:has(>.card:only-child)>.card .actions .btn-cart{width:auto;align-self:flex-start;padding-inline:28px}
}
/* 5. proyek: daftar baris menggantikan enam kartu teks */
.proj-list{border-top:1px solid rgba(10,33,119,.22)}
.proj-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.5fr) minmax(0,2fr);column-gap:32px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(10,33,119,.12)}
.proj-row--head{padding:10px 0;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
body .proj-row h3{margin:0;font-size:17px;line-height:1.35}
.proj-row .lbl{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a5200}
.proj-row p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:760px){
  .proj-row{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:16px 0}
  .proj-row--head{display:none}
  .proj-row .lbl{order:-1}
}
/* 6. testimoni di desktop: kutipan berjajar dengan garis pemisah, bukan tiga kartu */
@media(min-width:761px){
  body .testi-grid{gap:0}
  body .testi{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 32px}
  body .testi:first-child{padding-left:0;border-left:0}
  body .testi:last-child{padding-right:0}
  body .testi .q{font-size:17px;line-height:1.6}
  body .testi .p{border-top:0;padding-top:0}
}
/* 7. topik blog di desktop: kolom bergaris atas, tanpa kotak ikon */
@media(min-width:1181px){
  .bl-cluster{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:16px 0 0}
  .bl-cluster .ic{display:none}
}
/* 8. kelebihan produk: kolom bergaris atas, label angka polos */
.benefit{gap:24px 28px}
.benefit>div{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:16px 0 0}
.benefit .spec{margin-bottom:10px;padding:0;border-radius:0;background:none;font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a5200}
/* 9. tipografi kecil: baris terakhir paragraf tidak menyisakan satu kata, angka sejajar */
p,li,dd,figcaption{text-wrap:pretty}
table,.tb-stats dd,.rak .m,.card .meta,.ringkas{font-variant-numeric:tabular-nums}
/* ===== Rev 10 (2 Okt 2026): tiga toko resmi (Shopee, Tokopedia, TikTok Shop). Ikon dipotong dari logo yang dikirim pemilik
   (sumber: staging-web-avana/03-gambar/marketplace, alat: rev-02okt/logo-mp.ps1); selalu tampil di atas ubin putih. ===== */
.mp-ic{display:inline-block;flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff center/auto 72% no-repeat;vertical-align:middle}
.mp-ic--shopee{background-image:url(../images/ui/mp-ic-shopee.png)}
.mp-ic--tokopedia{background-image:url(../images/ui/mp-ic-tokopedia.png)}
.mp-ic--tiktokshop{background-image:url(../images/ui/mp-ic-tiktokshop.png)}
.store-inner a.store-mp{display:inline-flex;align-items:center;gap:8px}
.store-inner .mp-ic{width:32px;height:32px}
.mp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.mp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.mp-grid{grid-template-columns:minmax(0,1fr)}}
.mp::before{display:none}
.mp .mp-ic{width:44px;height:44px;border-radius:10px}
.beli-row .btn{gap:8px;padding-inline:8px;font-size:13px}
.beli-row .mp-ic{width:24px;height:24px;border-radius:6px}
@media(max-width:480px){.beli-row .btn{flex-direction:column;gap:6px;padding:10px 4px;font-size:12px;line-height:1.2;white-space:normal}}
.tb-offer .mp-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
.tb-offer .mp-links a{margin-top:0}
.tb-offer .mp-links a::after{display:none}
.mp-links .mp-ic{width:24px;height:24px;border-radius:6px}
/* footer: tiga toko dengan logonya, satu per baris di layar lebar, berjajar di HP */
.footer-col ul.marketplace-list{flex-direction:column!important;gap:10px!important}
.marketplace-list a{display:inline-flex;align-items:center;gap:10px}
.marketplace-list .mp-ic{width:26px;height:26px;border-radius:7px;border-color:transparent}
@media(max-width:640px){.footer-col ul.marketplace-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px!important}}
/* strip "Tersedia di" di HP: label satu baris sendiri, tiga toko berjajar tiga kolom (ikon di atas nama) supaya tidak patah 1+2 */
@media(max-width:600px){
  .store-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
  .store-inner .lbl,.store-inner .off{grid-column:1/-1;margin-left:0}
  .store-inner a.store-mp{flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;line-height:1.2}
  .store-inner .mp-ic{width:40px;height:40px;border-radius:10px}
}
/* ===== Rev 11 (2 Okt 2026): hasil QA/QC web + HP (alat: 05-uji-regresi/alat/qa) ===== */
/* nama produk dan judul artikel tidak boleh terpotong; uraian kartu produk tampil utuh di layar lebar (di HP memang disembunyikan) */
.card h3,.bl-card h3{display:block;overflow:visible;-webkit-line-clamp:unset}
@media(min-width:641px){.card .blurb{display:block;overflow:visible;-webkit-line-clamp:unset}}
/* titik slider testimoni: area sentuh 24px per titik, titiknya sendiri tetap kecil */
.testi-dots{gap:0}
.testi-dots button,.testi-dots button.on{width:24px;height:24px;background:none;border-radius:0}
.testi-dots button.on{width:36px}
.testi-dots button::after{inset:auto;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:#c7cee6;transition:background var(--t-fast) var(--ease)}
.testi-dots button:hover{background:none}
.testi-dots button:hover::after{background:var(--line-strong)}
.testi-dots button.on::after{width:20px;margin-left:-10px;background:var(--cobalt)}
/* kontras label kolom footer (dulu 4,47:1, di bawah ambang 4,5) */
.footer-col h2{color:rgba(255,255,255,.64)}
/* layar lebar: tombol melayang tidak lagi menutupi baris hak cipta di ujung halaman (HP sudah punya ruang ini) */
@media(min-width:901px){footer{padding-bottom:64px}}
/* alat cek lubang plafon di HP: baris tidak patah, tabel digeser ke samping dengan tanda bayangan seperti tabel lain */
@media(max-width:640px){
  .lb-tabel table{width:max-content;min-width:100%}
  .lb-tabel th,.lb-tabel td{white-space:nowrap}
  .lb-tabel{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/32px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(10,19,48,.2),transparent) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(10,19,48,.2),transparent) right center/12px 100% no-repeat scroll}
}
/* topik blog: tanpa kotak ikon di semua lebar, sama dengan versi web */
.bl-cluster .ic{display:none}
/* Kontak: tombol WhatsApp per topik, pesannya sudah terisi */
.wa-topik{margin-top:28px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.wa-topik-l{font-size:14px;color:var(--ink-soft)}
.wa-topik-b{display:flex;flex-wrap:wrap;gap:10px}
.wa-topik .btn{padding:10px 14px;font-size:13px;gap:8px}
.wa-topik .btn svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:640px){.wa-topik-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.wa-topik .btn{width:100%;padding-inline:8px;white-space:normal;text-align:center;line-height:1.25}}
/* aksi di dalam jawaban FAQ dan di akhir artikel klaim garansi */
.jw-aksi{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.jw-aksi .btn{padding:10px 16px;font-size:13px}
.jw-link{font-size:14px;font-weight:700;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.bp-wa{margin-top:28px}
/* kotak spesifikasi produk: sel kosong di baris terakhir tidak lagi tampil sebagai blok abu-abu */
.ringkas{background:var(--white)}
/* hero beranda: foto baru 16:9 (lampu meja + penulis, kiri gelap untuk teks). Bingkainya diatur per lebar layar
   supaya lampu dan penulisnya selalu masuk: layar lebar ikut meninggi, tablet dan HP diperbesar ke sisi kanan foto. */
@media(min-width:901px){
  /* di layar lebar yang lebih sempit dari 1440 px fotonya digeser ke kanan, supaya buku dan penulisnya tidak tertimpa teks */
  .hero-bg img{object-position:50% 3%;margin-left:clamp(0px,calc((1440px - 100vw)*.6),22%)}
  /* REV 27 (7 Okt 2026): tepi kiri foto dilembutkan; tanpa ini, saat foto digeser ke kanan ada garis tegak antara latar navy dan foto */
  .hero-bg img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 280px);mask-image:linear-gradient(90deg,transparent 0,#000 280px)}
  .hero-inner{min-height:clamp(440px,34vw,680px)}
  .hero::before{background:linear-gradient(90deg,var(--night) 0%,rgba(10,19,48,.7) 32%,rgba(10,19,48,0) 58%)}
}
@media(min-width:1921px){.hero-bg{left:auto;width:1920px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}}
@media(max-width:900px){.hero-bg img{width:130%;margin-left:-30%;object-position:100% 12%}}
@media(max-width:640px){.hero-bg img{width:170%;margin-left:-70%;object-position:100% 10%}}
/* ================= REV 12 (3 Okt 2026): warna mengikuti panduan merek + rombak 4 section + gerak =================
   Palet resmi AVANA: #0a2177 navy, #0f46cb biru, #179ec5 cyan, #f69c00 emas, #0f0f0f tinta, #fafafa kertas (+ putih).
   Warna turunan HANYA campuran warna-warna itu (color-mix), tidak ada hue lain.
   Emas tidak dipakai untuk teks kecil di latar terang (kontras 2:1); untuk itu dipakai navy/biru.
   Hover kartu memakai properti `translate`, bukan `transform`, karena `transform` anak langsung wadah reveal dikunci oleh aturan reveal. */
:root{
 --navy:#0a2177;--blue:#0f46cb;--cyan:#179ec5;--gold:#f69c00;--ink:#0f0f0f;--paper:#fafafa;--white:#ffffff;
 --cobalt:#0a2177;--ocean:#0f46cb;--bluegreen:#179ec5;--night:#0a2177;
 --panel:color-mix(in srgb,#0a2177 6%,#fafafa);
 --tint:color-mix(in srgb,#0a2177 3%,#ffffff);
 --line:color-mix(in srgb,#0a2177 12%,#ffffff);
 --line-strong:color-mix(in srgb,#0a2177 38%,#ffffff);
 --ink-soft:color-mix(in srgb,#0f0f0f 78%,#fafafa);
 --ink-faint:color-mix(in srgb,#0f0f0f 64%,#fafafa);
 --green:#0f46cb;--green-bg:color-mix(in srgb,#179ec5 12%,#ffffff);
 --teal-ink:#0f46cb;
 --gold-tint:color-mix(in srgb,#f69c00 12%,#ffffff);
 --cyan-tint:color-mix(in srgb,#179ec5 10%,#ffffff);
 --grad:linear-gradient(120deg,#0a2177 0%,#0f46cb 62%,#179ec5 100%);
 --deep:radial-gradient(70% 90% at 95% 0%,color-mix(in srgb,#179ec5 30%,transparent) 0%,transparent 62%),radial-gradient(60% 85% at 0% 100%,color-mix(in srgb,#0f46cb 70%,transparent) 0%,transparent 70%),#0a2177;
}
/* ---- latar gelap: navy merek + cahaya biru/cyan, bukan navy kehitaman ---- */
.hero{background:#0a2177}
.hero::before{background:linear-gradient(90deg,#0a2177 0%,rgba(10,33,119,.7) 32%,rgba(10,33,119,0) 58%)}
@media(max-width:900px){.hero::before{background:linear-gradient(to bottom,rgba(10,33,119,.1) 0%,rgba(10,33,119,0) 35%,rgba(10,33,119,.6) 78%,#0a2177 100%)}}
.oneroom,.story,.tb-hero,.vm-visi,body .cta-final{background:var(--deep)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero):not(.p-hero--plain){background:var(--deep)}
body :is(.p-hero,.bl-hero,.bp-hero,.c-hero,.tc-hero,.kr-hero)::after{background:conic-gradient(from 168deg at 78% -6%,transparent 0deg,color-mix(in srgb,#f69c00 16%,transparent) 9deg,transparent 18deg)}
.orc-ph{background:var(--deep)}
/* ---- tombol: WhatsApp pakai biru merek + ikon WA; di latar gelap jadi emas supaya tetap paling menonjol ---- */
.btn-wa{background-color:#0f46cb;color:#ffffff}
.btn-wa:hover{background-color:#0a2177}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.bl-hero,.tc-hero,.kr-hero) .btn-wa{background-color:#f69c00;color:#0a2177;--sheen:rgba(255,255,255,.45)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.bl-hero,.tc-hero,.kr-hero) .btn-wa:hover{background-color:color-mix(in srgb,#f69c00 82%,#ffffff)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost svg{color:#179ec5}
.btn-gold:hover{background-color:color-mix(in srgb,#f69c00 82%,#ffffff)}
/* ---- label kecil: dulu cokelat-emas #8a5200 (di luar palet) -> biru merek ---- */
.eyebrow{color:#0f46cb}
.tb-offer li:hover .no,.tb-offer .k,.tb-time .yr,.vm-misi .no,.prosa .beat-lbl,.skala .n,.rak .m,.proj-row .lbl,.benefit .spec,.grp-block>.grp-head .grp-spec{color:#0f46cb}
.volt--sempit{background:var(--gold-tint);color:#0a2177}
.volt--lebar{background:var(--cyan-tint);color:#0a2177}
.ms-ic{background:var(--gold-tint);color:#0a2177}
.garansi{color:#0a2177;background:var(--gold-tint)}
.ringkas-box .harga-note{background:var(--gold-tint);color:var(--ink)}
/* ---- isian salah: emas + navy (palet merek tidak punya merah) ---- */
.field [aria-invalid="true"],.kdl .field [aria-invalid="true"]{border-color:#f69c00;background:var(--gold-tint)}
.co-err,.kdl-err{color:#0a2177}
.co-err:not(:empty)::before,.kdl-err:not(:empty)::before{content:'!';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#f69c00;color:#0a2177;font-weight:800;font-size:12px;line-height:1;vertical-align:-3px}
/* ---- tirai, bayangan, dan bidang kosong: turunan navy/tinta ---- */
.scrim{background:rgba(15,15,15,.5)}
.kdl-back{background:rgba(15,15,15,.6)}
.kdl-box{box-shadow:0 24px 60px rgba(10,33,119,.3)}
.tb-photo figcaption{background:linear-gradient(to top,rgba(15,15,15,.82),rgba(15,15,15,0))}
.tb-prod .t{background:linear-gradient(to top,rgba(10,33,119,.94) 0%,rgba(10,33,119,.8) 60%,rgba(10,33,119,0) 100%)}
body .cta-final{box-shadow:0 30px 60px -32px rgba(10,33,119,.6)}
@media(min-width:901px){.hero-note li{text-shadow:0 1px 8px rgba(15,15,15,.55)}}
.tabel-wrap tbody tr.sel{background:color-mix(in srgb,#0f46cb 10%,#ffffff)}
.card .photo .ph,.usecase div,.cerita-card .thumb,.cf-card .thumb,.c-video,.proj .ph,.cl-thumb{background:linear-gradient(160deg,var(--tint),var(--panel))}
.testi-dots button::after{background:var(--line-strong)}
.testi-dots button.on::after{background:#0a2177}
.bl-thumb[data-k="menentukan-watt"]{background:linear-gradient(150deg,color-mix(in srgb,#0f46cb 8%,#ffffff),color-mix(in srgb,#0f46cb 22%,#ffffff))}
.bl-thumb[data-k="warna-cahaya"]{background:linear-gradient(150deg,color-mix(in srgb,#f69c00 8%,#ffffff),color-mix(in srgb,#f69c00 26%,#ffffff))}
.bl-thumb[data-k="awet-aman"]{background:linear-gradient(150deg,color-mix(in srgb,#0a2177 6%,#ffffff),color-mix(in srgb,#0a2177 18%,#ffffff))}
.bl-thumb[data-k="untuk-usaha"]{background:linear-gradient(150deg,color-mix(in srgb,#179ec5 8%,#ffffff),color-mix(in srgb,#179ec5 24%,#ffffff))}
.bl-thumb[data-k="siaga"]{background:linear-gradient(150deg,color-mix(in srgb,#f69c00 10%,#ffffff),color-mix(in srgb,#0a2177 14%,#ffffff))}
.tri-fix .l30{background:color-mix(in srgb,#f69c00 70%,#ffffff)}
.tri-fix .l40{background:color-mix(in srgb,#f69c00 22%,#ffffff)}
.tri-fix .l65{background:color-mix(in srgb,#179ec5 22%,#ffffff)}
/* ================= komponen bersama ================= */
/* Aturan gerak sistem tetap berlaku: satu kurva var(--ease), durasi var(--t-fast) warna / var(--t-base) gerak / var(--t-slow) cahaya.
   Kartu TIDAK melompat dan TIDAK berbayang saat disorot (umpan baliknya border-color); geraknya ada DI DALAM kartu:
   produk terangkat sedikit di panggung, panah bergeser, sorot cahaya mengikuti kursor. */
/* panggung produk: foto berdiri di lantai terang, disorot cahaya hangat dari atas.
   Foto katalog berlatar putih -> mix-blend-mode multiply supaya putihnya hilang; potongan tepi putih memakai --mt/--mr/--mb/--ml
   (rumus sama dengan rak lama, angka per foto sudah diukur). Ukuran ikut lebar kartu lewat container query. */
.kg,.sk{container-type:inline-size}
.pentas{--s:1;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,1.6vw,20px);
 padding:30px 18px 16px;background:linear-gradient(180deg,color-mix(in srgb,#0a2177 6%,#ffffff) 0%,#ffffff 74%)}
/* cahaya "menyala" sekali saat kartu muncul (ikut urutan --d dari reveal), tidak berulang */
.pentas::before{content:'';position:absolute;inset:0;z-index:-1;transform-origin:50% 0;
 background:radial-gradient(60% 72% at 50% 0%,color-mix(in srgb,#f69c00 24%,transparent) 0%,color-mix(in srgb,#179ec5 8%,transparent) 58%,transparent 100%);
 transition:opacity var(--t-slow) var(--ease) calc(var(--d,0s) + .2s),transform var(--t-slow) var(--ease) calc(var(--d,0s) + .2s)}
.pentas::after{content:'';position:absolute;z-index:-1;left:12%;right:12%;bottom:9px;height:16px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,#0a2177 15%,transparent),transparent)}
.fx [data-reveal]:not(.in) .pentas::before{opacity:0;transform:scaleY(.6)}
.pentas img{--H:calc(var(--h,100px)*var(--s));flex:0 0 auto;display:block;width:auto;max-width:none;height:var(--H);
 margin:calc(var(--H)*var(--mt,0)*-1) calc(var(--H)*var(--a,1)*var(--mr,0)*-1) calc(var(--H)*var(--mb,0)*-1) calc(var(--H)*var(--a,1)*var(--ml,0)*-1);
 mix-blend-mode:multiply;transition:translate var(--t-base) var(--ease)}
.pentas img[data-prod-img="Streetlight"]{filter:brightness(1.02)}
@container (max-width:360px){.pentas{--s:.88;gap:12px}}
@container (max-width:300px){.pentas{--s:.76}}
/* sorot cahaya mengikuti kursor ([data-spot] diisi --mx/--my oleh skrip) */
.kg::after,.bz::after,.sk::after,.tp::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,#179ec5 12%,transparent),transparent 62%);transition:opacity var(--t-slow) var(--ease)}
@media(hover:hover){.kg:hover::after,.bz:hover::after,.sk:hover::after,.tp:hover::after{opacity:1}}
/* aturan reveal menimpa transition anak langsung; border-color tetap dapat transisi warna */
.fx :is(.kg-grid,.bz-grid,.sk-grid,.tp-grid)[data-reveal].in > *{transition:opacity var(--t-base) var(--ease) var(--d,0s),transform var(--t-base) var(--ease) var(--d,0s),border-color var(--t-fast) var(--ease)}
.kg:focus-visible,.sk-go:focus-visible,.tp-btn:focus-visible,.bz .mp-links a:focus-visible{outline:3px solid #f69c00;outline-offset:3px}
/* ================= Tentang: lima kelompok lampu (bento) ================= */
.kg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kg{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:20px;background:#ffffff;border:1px solid var(--line);overflow:hidden;color:var(--ink);text-decoration:none;
 transition:border-color var(--t-fast) var(--ease)}
.kg--lebar{grid-column:span 2}
.kg .pentas{height:212px;flex:0 0 auto}
.kg-t{position:relative;display:flex;flex-direction:column;gap:6px;flex:1;padding:20px 76px 22px 22px}
body .kg-t h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.015em;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.kg-t p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.kg-t .kg-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px;font-size:14px;font-variant-numeric:tabular-nums}
.kg-m span{color:var(--ink-faint)}
.kg-m span::after{content:'';display:inline-block;width:4px;height:4px;margin-left:10px;border-radius:50%;background:#f69c00;vertical-align:middle}
.kg-m b{font-weight:700;color:#0a2177}
.kg-go{position:absolute;right:20px;bottom:22px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--panel);color:#0a2177;
 transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.kg-go svg{width:18px;height:18px;transition:translate var(--t-base) var(--ease)}
@media(hover:hover){
 .kg:hover{border-color:color-mix(in srgb,#0a2177 34%,#ffffff)}
 body .kg:hover h3{color:#0a2177}
 .kg:hover .pentas img{translate:0 -6px}
 .kg:hover .pentas img:nth-child(2){transition-delay:.04s}
 .kg:hover .pentas img:nth-child(3){transition-delay:.08s}
 .kg:hover .pentas img:nth-child(4){transition-delay:.12s}
 .kg:hover .pentas img:nth-child(5){transition-delay:.16s}
 .kg:hover .kg-go{background:#f69c00;color:#0a2177}
 .kg:hover .kg-go svg{translate:3px 0}
}
@media(max-width:1023px){.kg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .kg-grid{grid-template-columns:minmax(0,1fr);gap:10px}
 .kg--lebar{grid-column:auto}
 .kg{flex-direction:row;align-items:stretch;border-radius:16px}
 .kg .pentas{--s:.62;flex:0 0 104px;height:auto;min-height:112px;padding:14px 6px 10px;gap:0}
 .kg .pentas img:nth-child(n+2){display:none}
 .kg .pentas::after{left:16%;right:16%;bottom:6px;height:10px}
 .kg-t{justify-content:center;gap:3px;padding:14px 58px 14px 16px}
 body .kg-t h3{font-size:18px}
 .kg-t p{font-size:14px;line-height:1.45}
 .kg-t .kg-m{margin-top:4px;font-size:13px}
 .kg-go{right:12px;top:50%;bottom:auto;width:36px;height:36px;margin-top:-18px}
}
/* ================= Tentang: tiga cara belanja untuk usaha ================= */
.bz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bz{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 24px 24px;border-radius:20px;background:#ffffff;border:1px solid var(--line);
 transition:border-color var(--t-fast) var(--ease)}
.bz-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px;background:var(--panel);color:#0a2177;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.bz-ic svg{width:26px;height:26px}
.bz-k{font-size:14px;font-weight:600;color:#0f46cb}
body .bz h3{margin:0;font-size:clamp(20px,1.7vw,23px);line-height:1.25;letter-spacing:-.015em}
.bz p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.bz-cta{align-self:stretch;margin-top:auto;padding-top:18px}
.bz-cta .btn{margin:0}
.bz .mp-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.bz .mp-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0;padding:12px 6px 10px;border-radius:12px;border:1px solid var(--line);background:#ffffff;
 font-size:13px;font-weight:600;line-height:1.2;text-align:center;color:var(--ink);text-decoration:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.bz .mp-links a::after{display:none}
.bz .mp-links .mp-ic{width:30px;height:30px;border-radius:8px}
@media(hover:hover){
 .bz:hover{border-color:color-mix(in srgb,#0a2177 34%,#ffffff)}
 .bz:hover .bz-ic{background:#0a2177;color:#f69c00}
 .bz .mp-links a:hover{border-color:#0a2177;color:#0a2177}
}
@media(max-width:900px){.bz-grid{grid-template-columns:minmax(0,1fr);gap:12px}.bz{padding:22px 20px 20px}.bz-cta{padding-top:14px}}
/* ================= Proyek: pilihan menurut jenis bangunan ================= */
.sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sk{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:20px;background:#ffffff;border:1px solid var(--line);overflow:hidden;
 transition:border-color var(--t-fast) var(--ease)}
.sk .pentas{height:212px;flex:0 0 auto}
.sk-t{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1;padding:20px 22px 22px}
.sk-h{display:flex;align-items:center;gap:12px}
.sk-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel);color:#0a2177;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sk-ic svg{width:22px;height:22px}
body .sk-t h3{margin:0;font-size:clamp(20px,1.6vw,22px);line-height:1.25;letter-spacing:-.015em}
.sk-t p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.sk-p{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px;padding:0;list-style:none}
.sk-p li{margin:0;padding:0}
.sk-p li::before{display:none}
.sk-p a{position:relative;z-index:3;display:inline-block;padding:7px 11px;border-radius:999px;background:var(--panel);color:#0a2177;font-size:13px;font-weight:600;line-height:1.15;text-decoration:none;
 transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sk-p a:hover{background:#0a2177;color:#ffffff}
.sk-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#0a2177;text-decoration:none}
/* seluruh kartu bisa diklik ke katalog; chip produk tetap tautan sendiri (z-index di atas) */
.sk-go::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.sk-go svg{width:18px;height:18px;transition:translate var(--t-base) var(--ease)}
@media(hover:hover){
 .sk:hover{border-color:color-mix(in srgb,#0a2177 34%,#ffffff)}
 .sk:hover .pentas img{translate:0 -6px}
 .sk:hover .pentas img:nth-child(2){transition-delay:.04s}
 .sk:hover .pentas img:nth-child(3){transition-delay:.08s}
 .sk:hover .sk-ic{background:#0a2177;color:#f69c00}
 .sk:hover .sk-go{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#f69c00;text-decoration-thickness:2px}
 .sk:hover .sk-go svg{translate:4px 0}
}
@media(max-width:900px){.sk-grid{grid-template-columns:minmax(0,1fr);gap:12px}.sk .pentas{height:196px}}
/* ================= Blog: jelajahi per topik ================= */
.tp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tp{position:relative;isolation:isolate;grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:20px;background:#ffffff;border:1px solid var(--line);
 transition:border-color var(--t-fast) var(--ease)}
.tp:nth-child(n+4){grid-column:span 3}
.tp-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;color:#ffffff;background:linear-gradient(135deg,#0a2177,#0f46cb)}
.tp-ic svg{width:24px;height:24px}
.tp[data-k="warna-cahaya"] .tp-ic{background:linear-gradient(135deg,#f69c00,color-mix(in srgb,#f69c00 60%,#ffffff));color:#0a2177}
.tp[data-k="awet-aman"] .tp-ic{background:linear-gradient(135deg,#0f46cb,#179ec5)}
.tp[data-k="untuk-usaha"] .tp-ic{background:linear-gradient(135deg,#179ec5,color-mix(in srgb,#179ec5 55%,#ffffff));color:#0a2177}
.tp[data-k="siaga"] .tp-ic{background:linear-gradient(135deg,#0f0f0f,#0a2177);color:#f69c00}
body .tp h3{margin:0 0 10px;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.tp ul{display:flex;flex-direction:column;align-self:stretch;flex:1;margin:0 0 18px;padding:0;list-style:none}
.tp li{margin:0;padding:0}
.tp li::before{display:none}
.tp li a{position:relative;z-index:3;display:block;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink-soft);text-decoration:none;
 transition:color var(--t-fast) var(--ease)}
.tp li:first-child a{border-top:0;padding-top:2px}
.tp li a:hover{color:#0a2177;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#f69c00}
/* seluruh kartu = tombol topik; tautan artikel tetap tautan sendiri (z-index di atas) */
.tp-btn{position:static;display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong);background:#ffffff;
 color:#0a2177;font-family:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tp-btn::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.tp-btn svg{width:16px;height:16px;transition:translate var(--t-base) var(--ease)}
.tp-btn:hover{background:#0a2177;border-color:#0a2177;color:#ffffff}
.tp-btn:hover svg{translate:3px 0}
@media(hover:hover){.tp:hover{border-color:color-mix(in srgb,#0a2177 34%,#ffffff)}}
@media(max-width:1023px){.tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tp,.tp:nth-child(n+4){grid-column:auto}.tp:nth-child(5){grid-column:1/-1}}
@media(max-width:640px){
 .tp-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-22px;padding:4px 22px 16px;scroll-padding-inline:22px;scrollbar-width:none}
 .tp-grid::-webkit-scrollbar{display:none}
 .tp,.tp:nth-child(5){flex:0 0 84%;scroll-snap-align:start;padding:20px}
}
/* gerak dikurangi: tanpa geser dan tanpa nyala bertahap */
@media(prefers-reduced-motion:reduce){
 .pentas img,.pentas::before,.kg-go svg,.sk-go svg,.tp-btn svg{transition:none!important}
 .kg:hover .pentas img,.sk:hover .pentas img,.kg:hover .kg-go svg,.sk:hover .sk-go svg,.tp-btn:hover svg{translate:none}
}
/* ===== REV 12b (3 Okt 2026): sisa warna di luar palet hasil audit warna (alat: 05-uji-regresi/alat/qa/warna-audit.ps1) ===== */
/* tombol WhatsApp di latar gelap: garis cyan, cahaya emas (dulu hijau) */
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost{border-color:color-mix(in srgb,#179ec5 75%,transparent)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost:hover{border-color:#179ec5;background-color:rgba(255,255,255,.08)}
.hero-cta .btn-wa{--glow:0 0 40px -10px color-mix(in srgb,#f69c00 70%,transparent)}
.hero-cta .btn-wa:hover{--glow:0 0 58px -10px color-mix(in srgb,#f69c00 90%,transparent)}
/* tombol melayang "Tanya kami": emas + teks navy (kontras 6,5:1), terlihat di atas latar terang maupun gelap */
.fab{background:linear-gradient(135deg,color-mix(in srgb,#f69c00 80%,#ffffff) 0%,#f69c00 100%);color:#0a2177;box-shadow:0 10px 28px -8px color-mix(in srgb,#f69c00 65%,transparent),0 4px 12px -6px rgba(10,33,119,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.fab::before{border-color:color-mix(in srgb,#f69c00 65%,transparent)}
.fab:hover{box-shadow:0 18px 36px -12px color-mix(in srgb,#f69c00 75%,transparent),0 6px 16px -8px rgba(10,33,119,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.fab-shine::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%)}
/* pesan pesanan terkirim */
.co-done{color:#0a2177}
/* bayangan: tinta merek, bukan hitam murni */
.btn-solid,.btn-gold,.btn-wa{--edge:inset 0 2px 6px rgba(255,255,255,.22),inset 0 -3px 8px rgba(15,15,15,.2),0 4px 10px -4px rgba(10,33,119,.34)}
.hero-cap{text-shadow:0 1px 6px rgba(15,15,15,.55)}
.tb-photo{box-shadow:0 30px 60px rgba(15,15,15,.35)}
/* Tri-Colours: warna cahaya 3000K/4000K/6500K diturunkan dari emas dan cyan-biru merek */
.tri-fix .l30{background:color-mix(in srgb,#f69c00 85%,#ffffff)}
.tri-fix .l40{background:color-mix(in srgb,#f69c00 28%,#ffffff)}
.tri-fix .l65{background:color-mix(in srgb,color-mix(in srgb,#179ec5 67%,#0f46cb) 30%,#ffffff)}
.tri-cone .l30{background:linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,#f69c00 85%,#ffffff) 62%,transparent),transparent)}
.tri-cone .l40{background:linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,#f69c00 28%,#ffffff) 58%,transparent),transparent)}
.tri-cone .l65{background:linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,color-mix(in srgb,#179ec5 67%,#0f46cb) 30%,#ffffff) 58%,transparent),transparent)}
.tri-stage[data-cct="3000"] .tri-fix{box-shadow:0 0 56px 10px color-mix(in srgb,color-mix(in srgb,#f69c00 85%,#ffffff) 42%,transparent)}
.tri-stage[data-cct="4000"] .tri-fix{box-shadow:0 0 56px 10px color-mix(in srgb,color-mix(in srgb,#f69c00 28%,#ffffff) 40%,transparent)}
.tri-stage[data-cct="6500"] .tri-fix{box-shadow:0 0 56px 10px color-mix(in srgb,color-mix(in srgb,color-mix(in srgb,#179ec5 67%,#0f46cb) 30%,#ffffff) 42%,transparent)}
/* kartu cara belanja: ikon di ubin bergradien merek (sama keluarga dengan ikon topik blog) */
.bz-ic{background:linear-gradient(135deg,#0a2177,#0f46cb);color:#ffffff}
@media(hover:hover){.bz:hover .bz-ic{background:linear-gradient(135deg,#0a2177,#0a2177);color:#f69c00}}
/* ===== REV 12c (3 Okt 2026): rapikan tampilan HP untuk kartu baru ===== */
/* titik emas pemisah "watt • N produk": ikut item kedua dan terpotong otomatis kalau item itu turun ke baris baru */
.kg-t .kg-m{gap:2px 24px;overflow:hidden}
.kg-m span::after{display:none}
.kg-m span,.kg-m b{position:relative;margin-left:-14px;padding-left:14px}
.kg-m b::before{content:'';position:absolute;left:3px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#f69c00}
@media(max-width:640px){
 .kg .pentas{flex-basis:92px}
 .kg-t{padding-right:46px}
 .kg-go{right:10px;width:30px;height:30px;margin-top:-15px;background:none}
 .kg-go svg{width:20px;height:20px}
 .pentas::before{background:radial-gradient(75% 62% at 50% 0%,color-mix(in srgb,#f69c00 16%,transparent) 0%,color-mix(in srgb,#179ec5 6%,transparent) 60%,transparent 100%)}
 .sk .pentas{--s:.8;height:158px;padding-top:22px}
 .sk-t{padding:18px 18px 20px;gap:8px}
 .sk-p{gap:6px}
 .sk-p a{padding:6px 10px;font-size:12.5px}
 .bz .mp-links a{padding:12px 4px 10px;font-size:12px}
}
/* ===== REV 12d (3 Okt 2026): masukan user setelah lihat v51 ===== */
/* 1) ubin ikon seragam = gradien biru -> cyan merek (dipilih user dari ikon topik "Awet dan aman"); disorot: navy + ikon emas */
:root{--ikon-grad:linear-gradient(135deg,#0f46cb 0%,#179ec5 100%)}
.pl-v2 .pillar .ic,.pl-v2 .pillar--hero .ic,.vm-misi .ic,.mega-grid .mi,.drawer nav .mi,.bz-ic,.sk-ic,.tp .tp-ic,.tp[data-k] .tp-ic{background:var(--ikon-grad);color:#ffffff}
.pillar .ic svg,.pl-v2 .pillar--hero .ic svg,.pl-v2 .pillar:not(.pillar--hero) .ic svg{color:#ffffff}
.drawer nav a:hover .mi,.mega-grid a:hover .mi{background:#0a2177;color:#f69c00}
@media(hover:hover){.bz:hover .bz-ic,.sk:hover .sk-ic{background:#0a2177;color:#f69c00}}
/* 2) logo pihak lain ikut warna mereknya: tombol WhatsApp = hijau WhatsApp (bukan biru/emas).
      #15825a: hijau WA yang tetap terbaca dengan teks putih (kontras 4,8:1); #25d366 (hijau resmi WA) untuk ikon/garis di latar gelap. */
:root{--wa:#15825a;--wa-gelap:#0e6a48;--wa-terang:#25d366}
.btn-wa,body .toc a.btn-wa{background-color:var(--wa);color:#ffffff}
.btn-wa:hover{background-color:var(--wa-gelap)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.bl-hero,.tc-hero,.kr-hero) .btn-wa{background-color:var(--wa);color:#ffffff;--sheen:rgba(255,255,255,.32)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.bl-hero,.tc-hero,.kr-hero) .btn-wa:hover{background-color:var(--wa-gelap)}
.btn-wa-ghost{border-color:var(--wa);color:var(--wa)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost{border-color:color-mix(in srgb,#25d366 70%,transparent);color:#ffffff}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost:hover{border-color:#25d366;background-color:rgba(255,255,255,.08)}
:is(.hero,.oneroom,.story,.cta-final,.tb-hero,.p-hero:not(.p-hero--plain),.tc-hero,.kr-hero) .btn-wa-ghost svg{color:#25d366}
.hero-cta .btn-wa{--glow:0 0 40px -10px rgba(37,211,102,.5)}
.hero-cta .btn-wa:hover{--glow:0 0 58px -10px rgba(37,211,102,.7)}
.fab{background:linear-gradient(135deg,#15825a 0%,#0e6a48 100%);color:#ffffff;box-shadow:0 10px 28px -8px rgba(21,130,90,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.fab::before{border-color:rgba(37,211,102,.6)}
.fab:hover{box-shadow:0 18px 36px -12px rgba(21,130,90,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.fab-shine::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.34) 50%,transparent 100%)}
/* 3) hero berfoto (Terangkan Ceritamu, Tentang, Proyek) menyatu seperti Beranda: foto tanpa bingkai memudar ke navy.
      Latar tanpa cahaya cyan di kanan atas supaya tidak ada sambungan warna dengan tepi foto. */
body :is(.tc-hero,.tb-hero,.p-hero):has(.tb-hero-grid>.tb-photo){background:radial-gradient(60% 85% at 0% 100%,color-mix(in srgb,#0f46cb 70%,transparent) 0%,transparent 70%),#0a2177}
:is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid:has(>.tb-photo){position:static}
:is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-copy{position:relative;z-index:2}
.tb-hero>.wrap:not(.tb-hero-grid){position:relative;z-index:2}
.tb-hero:has(.tb-photo) .tb-beam{display:none}
:is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo{position:absolute;z-index:0;margin:0;max-width:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#0a2177;justify-self:auto}
:is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo img{width:100%;height:100%;object-fit:cover}
.tb-hero .tb-hero-grid>.tb-photo img{object-position:50% 28%}
:is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo::after{content:'';position:absolute;inset:0;pointer-events:none}
@media(min-width:981px){
 :is(.tc-hero,.p-hero) .tb-hero-grid:has(>.tb-photo){grid-template-columns:minmax(0,1fr);min-height:clamp(400px,31vw,540px);align-content:center}
 .tb-hero .tb-hero-grid:has(>.tb-photo){grid-template-columns:minmax(0,1fr);min-height:clamp(380px,30vw,520px);align-content:center}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-copy{max-width:600px}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo{top:0;right:0;bottom:0;width:60%}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo::after{background:linear-gradient(90deg,#0a2177 0%,rgba(10,33,119,.84) 14%,rgba(10,33,119,.36) 40%,rgba(10,33,119,0) 66%),linear-gradient(to top,rgba(10,33,119,.55) 0%,rgba(10,33,119,0) 34%)}
 .tb-hero .tb-hero-grid>.tb-photo::after{background:linear-gradient(90deg,#0a2177 0%,rgba(10,33,119,.84) 14%,rgba(10,33,119,.36) 40%,rgba(10,33,119,0) 66%),linear-gradient(to top,#0a2177 0%,rgba(10,33,119,.85) 20%,rgba(10,33,119,0) 52%)}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo figcaption{z-index:1;left:auto;right:26px;bottom:20px;padding:0;background:none;font-size:12px;color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(15,15,15,.55)}
 .tb-hero .tb-hero-grid>.tb-photo figcaption{top:22px;bottom:auto}
}
@media(max-width:980px){
 :is(.tc-hero,.tb-hero,.p-hero){--ph:min(62vw,380px)}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo{top:0;left:0;right:0;width:auto;height:var(--ph)}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo::after{background:linear-gradient(to bottom,rgba(10,33,119,.12) 0%,rgba(10,33,119,0) 35%,rgba(10,33,119,.62) 78%,#0a2177 100%)}
 :is(.tc-hero,.tb-hero,.p-hero) .tb-hero-grid>.tb-photo figcaption{display:none}
 body :is(.tc-hero,.p-hero):has(.tb-hero-grid>.tb-photo){padding-top:calc(var(--ph) - 40px)}
 .tb-hero .tb-hero-in:has(>.tb-photo){padding-top:calc(var(--ph) - 40px)}
}
/* 4) panggung produk: gradien biru -> cyan merek supaya lampu putih tidak "nyaru".
      Foto katalog tetap JPG berlatar putih; latarnya dibuang lewat mask transparansi per foto (03-gambar/produk-mask,
      dibuat alat rev-03okt/mask-produk.ps1). Peramban tanpa dukungan mask tetap memakai panggung terang + multiply. */
@supports ((-webkit-mask-image:none) or (mask-image:none)){
 .pentas{background:linear-gradient(160deg,#0f46cb 0%,#179ec5 100%)}
 .pentas::before{background:radial-gradient(62% 72% at 50% 0%,rgba(255,255,255,.32) 0%,rgba(255,255,255,.08) 55%,transparent 100%)}
 .pentas::after{background:radial-gradient(closest-side,rgba(10,33,119,.45),transparent)}
 .pentas img{mix-blend-mode:normal;-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 .pentas img[data-prod-img="Streetlight"]{filter:none}
 .pentas img[data-prod-img="Adjustable Spotlight"]{--m:url(../images/ui/s-img-data-prod-img-adjustable-spotlight.png)}
 .pentas img[data-prod-img="Candle Series"]{--m:url(../images/ui/pentas-img-data-prod-img-candle-series.png)}
 .pentas img[data-prod-img="Emergency Bulb"]{--m:url(../images/ui/pentas-img-data-prod-img-emergency-bulb.png)}
 .pentas img[data-prod-img="Floodlight"]{--m:url(../images/ui/pentas-img-data-prod-img-floodlight.png)}
 .pentas img[data-prod-img="Highbay Mountain"]{--m:url(../images/ui/entas-img-data-prod-img-highbay-mountain.png)}
 .pentas img[data-prod-img="Panel Light Slim & Surface"]{--m:url(../images/ui/g-data-prod-img-panel-light-slim-surface.png)}
 .pentas img[data-prod-img="Regular Bulb"]{--m:url(../images/ui/pentas-img-data-prod-img-regular-bulb.png)}
 .pentas img[data-prod-img="Spot MR16 & PAR16"]{--m:url(../images/ui/pentas-img-data-prod-img-spot-mr16-par16.png)}
 .pentas img[data-prod-img="Streetlight"]{--m:url(../images/ui/pentas-img-data-prod-img-streetlight.png)}
 .pentas img[data-prod-img="T-Bulb"]{--m:url(../images/ui/pentas-img-data-prod-img-t-bulb.png)}
 .pentas img[data-prod-img="Tri-Colours Panel Light"]{--m:url(../images/ui/mg-data-prod-img-tri-colours-panel-light.png)}
 .pentas img[data-prod-img="Tube Light T8 & T5"]{--m:url(../images/ui/entas-img-data-prod-img-tube-light-t8-t5.png)}
}
@media(max-width:640px){@supports ((-webkit-mask-image:none) or (mask-image:none)){.pentas::before{background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.26) 0%,transparent 100%)}}}
/* ===== REV 12e (3 Okt 2026): pesanan WhatsApp lengkap = pilih daya/warna/kode SKU + jumlah di halaman produk dan keranjang ===== */
.vp{display:grid;gap:14px;margin:0 0 16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff}
.vp-g{display:grid;gap:8px}
.vp-l{font-size:13px;font-weight:700;color:var(--ink)}
.vp-o{display:flex;flex-wrap:wrap;gap:8px}
.vp-b{min-height:40px;margin:0;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;background:#ffffff;color:#0a2177;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;
 transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.vp-b code{font-family:inherit}
.vp-b:hover{border-color:#0a2177}
.vp-b[aria-pressed="true"]{background:#0a2177;border-color:#0a2177;color:#ffffff}
.vp-b:focus-visible,.vp-qn button:focus-visible,.vp-qn input:focus-visible,.cl-pilih select:focus-visible{outline:3px solid #f69c00;outline-offset:2px}
.vp-k{margin:0;font-size:14px;color:var(--ink-soft)}
.vp-k code{font-family:inherit;font-weight:700;color:#0a2177;letter-spacing:.01em}
.vp-k0{color:var(--ink-faint)}
.vp-q{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vp-qn{display:inline-flex;align-items:center;gap:6px}
.vp-qn button{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:10px;background:#ffffff;color:#0a2177;font-family:inherit;font-size:18px;font-weight:700;line-height:1;cursor:pointer}
.vp-qn button:hover{border-color:#0a2177}
.vp-qn input{width:72px;height:40px;border:1px solid var(--line-strong);border-radius:10px;background:#ffffff;color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;text-align:center;-moz-appearance:textfield}
.vp-qn input::-webkit-outer-spin-button,.vp-qn input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vp-msg{margin:0;font-size:14px;font-weight:600;color:#0a2177}
.vp-msg::before{content:'!';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#f69c00;color:#0a2177;font-weight:800;font-size:12px;line-height:1;vertical-align:-3px}
.vp--perlu{border-color:#f69c00;box-shadow:0 0 0 3px var(--gold-tint)}
/* keranjang: varian + kode di bawah nama; barang tanpa varian bisa dipilih langsung */
.cl-var{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.cl-var code{font-family:inherit;font-weight:700;color:#0a2177}
.cl-pilih{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.cl-pilih label{display:grid;gap:4px;min-width:0}
.cl-pl{font-size:12px;font-weight:700;color:var(--ink-soft)}
.cl-pilih select{max-width:100%;min-height:40px;padding:6px 32px 6px 10px;border:1px solid var(--line-strong);border-radius:10px;background:#ffffff;color:var(--ink);font-family:inherit;font-size:14px}
.cl-hint{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#0a2177}
.cl-hint::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#f69c00;vertical-align:1px}
#checkout-summary small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--ink-soft)}
@media(max-width:640px){.vp{padding:14px}.vp-b{padding:8px 12px;font-size:13.5px}.cl-pilih{flex-direction:column}.cl-pilih label,.cl-pilih select{width:100%}}
/* ===== REV 12f (3 Okt 2026): HP — tombol "Masukkan ke keranjang" menempel di bawah layar halaman produk.
   Pemilih varian mendorong tombol ke luar layar pertama; aturan sistem: aksi utama HP selalu terlihat (pola Tokopedia/Shopee).
   Tekan tanpa memilih -> pemilih diberi tanda dan fokus pindah ke sana. ===== */
@media(max-width:640px){
 .route[data-route="produk-detail"]:not([hidden]) .detail .beli>[data-add]{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:55;width:auto;margin:0;box-shadow:0 12px 28px -12px rgba(10,33,119,.55)}
 body:has(.route[data-route="produk-detail"]:not([hidden])) .fab{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
 body:has(.route[data-route="produk-detail"]:not([hidden])) footer{padding-bottom:84px}
 .hs-lock .route[data-route="produk-detail"] .detail .beli>[data-add]{display:none}
}
/* REV 13 (4 Okt 2026): gerak. Lampu menyala di pembuka Beranda, pil menu ikut kursor, bohlam saat pesanan terkirim,
   kartu angka kaca di Tentang. Aturan sistem gerak tetap: satu kurva --ease, hanya opacity/transform/clip-path,
   tidak ada yang berulang, semua berhenti saat prefers-reduced-motion. Warna = palet merek atau campurannya. */

/* ---- 1. Lampu menyala di pembuka Beranda ----
   Tiga lapis di atas foto. Kotaknya disamakan dengan kotak <img> lewat JS (--lb-*) dan ikut transform foto,
   jadi cahaya tetap di kap lampu saat parallax. Lapis gelap hanya ada selama html.lampu-siap (sekali per sesi). */
@property --k{syntax:'<number>';inherits:false;initial-value:0}
.hero-bg{--lampu-gelap:color-mix(in srgb,#0a2177 22%,#0f0f0f);--lampu-krem:color-mix(in srgb,#f69c00 30%,#fafafa)}
.hero-bg>.lampu-l{position:absolute;left:var(--lb-l,0px);top:var(--lb-t,0px);width:var(--lb-w,100%);height:var(--lb-h,100%);pointer-events:none}
.fx .hero-bg>.lampu-l{transform:translate3d(0,var(--py,0px),0) scale(1.1)}
.hero-bg>.lampu-gelap,.hero-bg>.lampu-sebar{display:none;opacity:0}
.hero-bg>.lampu-gelap{background:color-mix(in srgb,var(--lampu-gelap) 80%,transparent)}
.hero-bg>.lampu-sebar{--k:0;background:radial-gradient(circle at var(--lx,52%) var(--ly,17%),transparent 0,transparent calc(var(--lr,220px)*(.3 + var(--k)*7)),color-mix(in srgb,var(--lampu-gelap) 80%,transparent) calc(var(--lr,220px)*(1.7 + var(--k)*7)))}
.hero-bg>.lampu-cahaya{background:radial-gradient(circle at var(--lx,52%) var(--ly,17%),color-mix(in srgb,var(--lampu-krem) 60%,transparent) 0,color-mix(in srgb,#f69c00 30%,transparent) calc(var(--lr,220px)*.22),color-mix(in srgb,#f69c00 10%,transparent) calc(var(--lr,220px)*.55),transparent var(--lr,220px));mix-blend-mode:screen;opacity:.35}
/* keadaan awal: kamar gelap, lampu padam (kelas di <html> dipasang skrip kecil di <head>, sebelum gambar pertama) */
.lampu-siap .hero-bg>.lampu-gelap,.lampu-siap .hero-bg>.lampu-sebar{display:block}
.lampu-siap .hero:not(.lampu-klik) .lampu-gelap,.lampu-siap .hero:not(.lampu-nyala) .lampu-sebar{opacity:1}
.lampu-siap .hero:not(.lampu-klik) .lampu-cahaya{opacity:0}
/* cadangan: kalau skrip tidak sempat jalan, kamar terang sendiri setelah 2,5 detik */
.lampu-siap .hero:not(.lampu-jalan) :is(.lampu-gelap,.lampu-sebar){animation:lampuAman .3s linear 2.5s forwards}
@keyframes lampuAman{to{opacity:0}}
/* klik: lampu langsung nyala (LED tidak berkedip), lalu cahaya menyebar ke seluruh kamar.
   Satu-satunya gerak yang lebih panjang dari --t-slow, dan hanya sekali per sesi. */
.hero.lampu-klik .lampu-gelap{opacity:0;transition:opacity 90ms linear}
.hero.lampu-klik .lampu-cahaya{opacity:1;transition:opacity 90ms linear}
.hero.lampu-nyala .lampu-sebar{--k:1;opacity:0;transition:--k 1s var(--ease),opacity 1s var(--ease)}
.hero.lampu-nyala .lampu-cahaya{opacity:.35;transition:opacity 1.2s var(--ease)}
.hero.lampu-instan .lampu-l{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.hero-bg>.lampu-gelap,.hero-bg>.lampu-sebar{display:none!important}}
/* ---- 2. Pil menu yang ikut kursor ----
   Satu pil di belakang tautan, bergeser lewat clip-path (bukan left/width), diam di halaman aktif. */
.punya-pil{position:relative}
.punya-pil>a,.punya-pil>.nav-mega{position:relative;z-index:1}
.punya-pil>a:hover,.punya-pil>a[aria-current=page],.punya-pil>.nav-mega:hover,.punya-pil>.nav-mega[aria-expanded="true"],.punya-pil>.nav-mega.cur{background-color:transparent}
.nav-pil{position:absolute;left:0;right:0;top:var(--pt,0px);height:var(--ph2,36px);z-index:0;border-radius:999px;background:var(--panel);pointer-events:none;opacity:0;
  clip-path:inset(0 calc(100% - var(--px,0px) - var(--pw,0px)) 0 var(--px,0px) round 999px);
  transition:clip-path var(--t-base) var(--ease),opacity var(--t-fast) var(--ease)}
.nav-pil.on{opacity:1}
.nav-pil.instan{transition:opacity var(--t-fast) var(--ease)}
.nav-sec .nav-pil{background:var(--tint)}
@media(prefers-reduced-motion:reduce){.nav-pil,.nav-pil.instan{transition:none}}
/* ---- 3. Bohlam menyala saat pesanan terkirim ---- */
.co-done{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
.co-done>:not(.co-bohlam){grid-column:2}
.co-bohlam{grid-row:1/span 3;position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#ffffff;color:#0a2177;box-shadow:inset 0 0 0 1px color-mix(in srgb,#0a2177 14%,#ffffff)}
.co-bohlam::before{content:'';position:absolute;inset:-6px;border-radius:16px;background:radial-gradient(circle,color-mix(in srgb,#f69c00 50%,transparent) 0,transparent 70%);opacity:0;transform:scale(.6);pointer-events:none}
.co-bohlam svg{position:relative;width:26px;height:26px;overflow:visible}
.co-bohlam .kaca{fill:transparent}
.co-bohlam .sinar{stroke-dasharray:3;stroke-dashoffset:3;opacity:0}
.co-done.nyala .co-bohlam{background:#0a2177;color:#f69c00;box-shadow:inset 0 0 0 1px #0a2177,0 8px 20px -10px color-mix(in srgb,#f69c00 90%,transparent);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-slow) var(--ease)}
.co-done.nyala .co-bohlam .kaca{fill:#f69c00;transition:fill var(--t-fast) var(--ease)}
.co-done.nyala .co-bohlam::before{animation:coHalo .7s var(--ease) .1s both}
.co-done.nyala .co-bohlam .sinar{animation:coSinar .4s var(--ease) .18s forwards}
@keyframes coHalo{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes coSinar{to{stroke-dashoffset:0;opacity:1}}
.co-done.muncul{animation:coMuncul var(--t-base) var(--ease)}
@keyframes coMuncul{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.co-done.nyala .co-bohlam .sinar{animation:none;stroke-dashoffset:0;opacity:1}.co-done.nyala .co-bohlam::before{animation:none}.co-done.muncul{animation:none}}
/* ---- 4. Kartu angka kaca di hero Tentang Kami ----
   Kartunya tidak bisa diklik, jadi hover cukup garisnya yang menyala; kartu tidak naik dan tidak membesar. */
.tb-hero .tb-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;border:0!important;margin-top:8px}
.tb-hero .tb-stats>div{position:relative;isolation:isolate;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:22px 22px 20px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 40px -24px rgba(10,33,119,.75);transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.tb-hero>.wrap:not(.tb-hero-grid){padding-bottom:44px}
.tb-hero .tb-stats dt{display:block;min-height:40px;padding-right:56px;font-size:14px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.7)!important}
.tb-hero .tb-stats dd{margin:0!important;font-size:clamp(30px,2.8vw,40px)!important;font-weight:800;line-height:1.05;color:#fff}
.tb-hero .tb-stats dd.gold{color:#f69c00}
.tb-hero .tb-stats dd.ts-note{display:flex;white-space:normal!important;align-items:flex-start;align-self:stretch;max-width:100%;gap:8px;min-width:0;overflow-wrap:anywhere;font-size:13px!important;font-weight:600;line-height:1.35;color:color-mix(in srgb,#179ec5 45%,#ffffff)}
.tb-hero .tb-stats dd.ts-note::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#179ec5;box-shadow:0 0 0 3px rgba(23,158,197,.22);margin-top:.45em}
.ts-ic{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#0f46cb 0%,#179ec5 100%);box-shadow:0 8px 18px -8px rgba(23,158,197,.7);transition:scale var(--t-base) var(--ease)}
.ts-ic svg{width:22px;height:22px}
@media(hover:hover){.tb-hero .tb-stats>div:hover{border-color:rgba(255,255,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 26px 48px -20px rgba(23,158,197,.5)}.tb-hero .tb-stats>div:hover .ts-ic{scale:1.06}}
@media(prefers-reduced-motion:reduce){.tb-hero .tb-stats>div,.ts-ic{transition:none}}
@media(max-width:900px){.tb-hero .tb-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.tb-hero .tb-stats>div{padding:16px 14px 14px!important;border-radius:16px}.ts-ic{top:12px;right:12px;width:36px;height:36px;border-radius:10px}.ts-ic svg{width:18px;height:18px}.tb-hero .tb-stats dt{min-height:36px;padding-right:42px;font-size:12.5px!important}.tb-hero>.wrap:not(.tb-hero-grid){padding-bottom:28px}.tb-hero .tb-stats dd{font-size:26px!important}.tb-hero .tb-stats dd.ts-note{font-size:12px!important}}
/* REV 13b (4 Okt 2026): masuk halaman ala Rlikes.jsx (geser 40px, 0,8 detik) atas permintaan user. Sebelumnya 10px, 0,42 detik. Kurva tetap --ease. */
.route{animation:routeIn .8s var(--ease)}
@keyframes routeIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
/* REV 15 (5 Okt 2026): cerita asli Pak Neno Galih, cerita proyek (pengganti tabel proyek), dan penanda Mockup di semua isi contoh. */
.cf-card,.sk{position:relative}
.cf-tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--white);color:var(--cobalt);border:1px solid var(--line-strong);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.cf-tag--asli{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.cf-tag--asli::before{content:'';width:6px;height:6px;border-radius:50%;background:#f69c00}
.mock-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--gold-tint);border:1px solid color-mix(in srgb,#f69c00 55%,#ffffff);color:#0a2177;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.asli-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:#f69c00;color:#0a2177;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.prosa figure.c-foto{margin:28px 0 0}
.prosa figure.c-foto img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.prosa figure.c-foto figcaption{margin-top:8px;font-size:12px;line-height:1.6;color:var(--ink-faint)}
.prosa .cerita-sumber{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.prosa .cerita-sumber a{color:var(--cobalt);font-weight:600;text-decoration:underline}
.prosa .cerita-ajak{margin-top:12px;font-size:14px;font-weight:600;color:var(--cobalt)}
.c-hero .c-video.ps-stage{aspect-ratio:auto;height:clamp(180px,26vw,260px);padding:0;overflow:hidden;border:0;display:block}
.c-hero .c-video.ps-stage .pentas{height:100%;--s:1.15;padding-top:28px;border-radius:12px}
.c-hero .by .mock-badge,.c-hero .by .asli-badge{margin-right:4px}
.sk-grid.ps-grid .sk .lbl{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.sk-grid.ps-grid .sk-h{margin-bottom:0}
.fx :is(.ps-grid)[data-reveal].in > *{transition:opacity var(--t-base) var(--ease) var(--d,0s),transform var(--t-base) var(--ease) var(--d,0s),border-color var(--t-fast) var(--ease)}
@media(max-width:640px){.cf-tag{top:10px;left:10px}}
/* REV 15b (5 Okt 2026): rapikan REV 15. Foto Pak Neno tidak dipotong di hero, penanda pindah ke bawah foto kartu cerita. */
.c-hero .c-video.neno{aspect-ratio:810/650;max-width:560px;width:100%;border:0;overflow:hidden}
.c-hero .c-video.neno img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.cf-card .thumb{position:relative}
.cf-card .cf-tag{top:auto;bottom:12px}
/* REV 15c (5 Okt 2026): lencana Cerita asli / Mockup tidak melipat jadi dua baris di HP. */
.asli-badge,.mock-badge{white-space:nowrap;flex:0 0 auto;align-self:center}
.c-hero .by{flex-wrap:wrap;row-gap:8px}
/* REV 15e (5 Okt 2026): pembuka cerita Pak Neno berfoto menyatu (memakai gaya hero Terangkan Ceritamu), penanda New story. */
.tb-copy .neno-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;font-size:14px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.82)}
.tb-copy .neno-by .asli-badge{flex:0 0 auto;white-space:nowrap}
.tb-copy .neno-by>span:not(.asli-badge){min-width:0}
/* REV 15f (5 Okt 2026): label bidang di pembuka cerita berwarna emas supaya terbaca di latar navy. */
.tc-hero .tb-copy .eyebrow{color:#f69c00}
/* REV 16 (5 Okt 2026): daya, sudut, dan umur lampu dibuat mencolok di kartu produk; "+ Keranjang" membuka jendela pilih daya & jumlah
   (seperti e-commerce); baris keranjang bisa diubah daya, warna, dan jumlahnya; kode SKU tidak ditampilkan ke pembeli. */
.card .meta.meta--spek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--tint);overflow:hidden}
.card .meta--spek .chip{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 10px;border:0;border-radius:0;background:transparent}
.card .meta--spek .chip+.chip{border-left:1px solid var(--line)}
.card .meta--spek .cl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--ink-faint)}
.card .meta--spek .chip b{font-family:var(--font);font-size:14px;font-weight:700;line-height:1.25;color:var(--cobalt);white-space:normal;overflow-wrap:anywhere}
.card .meta--spek .chip--daya b{font-size:15px}
@media(max-width:640px){
  .card .meta.meta--spek{grid-template-columns:minmax(0,1fr);margin-top:6px;border-radius:8px}
  .card .meta--spek .chip{flex-direction:row;align-items:baseline;justify-content:space-between;gap:6px;padding:4px 8px}
  .card .meta--spek .chip+.chip{border-left:0;border-top:1px solid var(--line)}
  .card .meta--spek .cl{font-size:10px;letter-spacing:.04em}
  .card .meta--spek .chip b{font-size:12.5px;text-align:right}
  .card .meta--spek .chip--daya b{font-size:13px}
}
/* jendela pilih daya & jumlah */
div.qa{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
div.qa[hidden]{display:none}
.qa-bg{position:absolute;inset:0;background:color-mix(in srgb,#0a2177 55%,transparent);animation:qaBg var(--t-base) var(--ease)}
.qa-box{position:relative;width:min(100%,520px);max-height:min(88vh,740px);overflow:auto;background:var(--white);border-radius:16px;padding:20px;box-shadow:0 30px 60px -30px rgba(10,33,119,.6);animation:qaMasuk var(--t-base) var(--ease)}
.qa-box:focus{outline:none}
.qa-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--cobalt);font-size:22px;line-height:1;cursor:pointer}
.qa-x:hover{border-color:var(--line-strong)}
.qa-kepala{display:flex;gap:14px;align-items:center;padding-right:44px}
.qa-foto{flex:0 0 72px;width:72px;height:72px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden}
.qa-foto img{width:100%;height:100%;object-fit:contain;padding:6px}
.qa-teks{min-width:0}
.qa-kat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.qa-box h2{margin-top:2px;font-size:18px;line-height:1.3}
.qa-spek{margin-top:4px;font-size:13px;font-weight:600;line-height:1.4;color:var(--cobalt)}
.qa-isi{margin-top:16px}
.qa-aksi{margin-top:16px}
.qa-aksi .btn{width:100%}
html.qa-buka{overflow:hidden}
@keyframes qaMasuk{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes qaBg{from{opacity:0}to{opacity:1}}
@media(max-width:640px){div.qa{place-items:end center;padding:0}.qa-box{width:100%;border-radius:16px 16px 0 0;max-height:88vh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.qa-box,.qa-bg{animation:none}}
/* kode SKU: kecil dan redup, bukan bagian utama */
.vp-k--kecil{margin-top:8px;font-size:11px;line-height:1.4;color:var(--ink-faint)}
.vp-k--kecil code{font-size:11px;background:none;padding:0;color:var(--ink-faint)}
.vp-k--kecil:empty{display:none}
/* jumlah di keranjang bisa diketik */
.cl-qty .cl-qn{width:44px;padding:0;border:0;background:transparent;text-align:center;font:inherit;font-weight:600;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.cl-qty .cl-qn::-webkit-outer-spin-button,.cl-qty .cl-qn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cl-qty .cl-qn:focus-visible{outline:2px solid var(--ocean);outline-offset:2px;border-radius:6px}
/* REV 16b (5 Okt 2026): chip spesifikasi tidak memakai titik pemisah lama. */
.card .meta--spek .chip::before,.card .meta--spek .chip::after{content:none!important;display:none!important}
/* REV 16c (5 Okt 2026): kolom spesifikasi: angka tidak dipotong di tengah (200/220 derajat tetap utuh). */
.card .meta.meta--spek{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
.card .meta--spek .chip b{overflow-wrap:normal;word-break:normal}
@media(max-width:640px){.card .meta.meta--spek{grid-template-columns:minmax(0,1fr)}}
/* REV 16d (5 Okt 2026): baris keranjang di HP: foto dan pilihan di atas, jumlah dan Hapus di bawah (pilihan tidak terpotong). */
@media(max-width:560px){
 .cart-line{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"th main main" "qty qty rm";gap:12px}
 .cart-line .cl-thumb{grid-area:th;display:block;width:56px;height:56px}
 .cart-line .cl-main{grid-area:main;min-width:0}
 .cart-line .cl-qty{grid-area:qty;justify-self:start}
 .cart-line .cl-rm{grid-area:rm;justify-self:end;align-self:center}
 .cl-pilih label{flex:1 1 128px}
 .cl-pilih select{width:100%}
}
/* REV 16e (5 Okt 2026): rapikan baris keranjang di HP: semua rata atas, pilihan tidak melar vertikal. */
.cart-line .cl-pilih{align-items:flex-start}
.cart-line .cl-pilih select{height:44px;min-height:44px}
@media(max-width:560px){
 .cart-line{align-items:start}
 .cart-line .cl-thumb{align-self:start}
 .cart-line .cl-rm{align-self:center}
}
/* REV 16f (5 Okt 2026): kolom baris keranjang di HP dikunci (ada gaya sebaris yang menimpa kolom), supaya foto tetap 56px. */
@media(max-width:560px){
 .cart-lines>.cart-line{grid-template-columns:56px minmax(0,1fr) auto!important}
}
/* REV 16g (5 Okt 2026): pilihan daya & warna di keranjang HP berjajar ke samping (bukan menumpuk tinggi). */
.cart-line .cl-pilih{flex-direction:row}
@media(max-width:560px){.cart-line .cl-pilih label{flex:1 1 128px;height:auto}}
/* REV 17 (5 Okt 2026): blog satu topik (Menentukan watt), tulisan ringkas tanpa tanya jawab; semua tanya jawab di Bantuan dengan kotak cari dan saringan kategori. */
.faq-cari{position:relative;margin-bottom:20px}
.faq-cari svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--ink-faint);pointer-events:none}
.faq-cari input{width:100%;min-height:48px;padding:10px 16px 10px 44px;border:1px solid var(--line-strong);border-radius:12px;background:var(--white);font:inherit;font-size:15px;color:var(--ink)}
.faq-cari input:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.faq-kosong{padding:24px;border:1px dashed var(--line-strong);border-radius:12px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.faq-isi .kat[hidden],.faq-isi .qa[hidden]{display:none}
.toc a[data-faq]{cursor:pointer}
.bl-hero .bl-count{margin-top:12px}
/* REV 18 (5 Okt 2026): kartu produk (garansi, nilai sudut tidak terpotong), galeri foto produk, penampil inspirasi ruangan (klik ganti foto). */
@media(min-width:641px){.card .meta.meta--spek{grid-template-columns:repeat(3,auto)}}
.card .meta--spek .chip b{overflow-wrap:normal}
.card .gar-mini{order:5;display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-soft)}
.card .gar-mini svg{width:15px;height:15px;flex:none;color:#179ec5}
@media(max-width:640px){.card .gar-mini{margin-top:6px;font-size:11.5px}.card .gar-mini svg{width:13px;height:13px}}
/* galeri foto di halaman produk */
.foto.foto--gal{padding:0;overflow:hidden;position:relative;aspect-ratio:1;display:block}
.gal,.gal-track{width:100%;height:100%}
.gal{position:relative}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:2px solid #0f46cb;outline-offset:-3px}
.gal-s{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;background:var(--white)}
.gal-s img{display:block;width:100%;height:100%;object-fit:cover}
.gal-s--prod img{object-fit:contain;padding:8%;box-sizing:border-box}
.gal-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#fafafa 92%,transparent);color:#0a2177;box-shadow:0 6px 16px -6px rgba(10,33,119,.45);cursor:pointer;transition:opacity var(--t-fast) var(--ease),scale var(--t-fast) var(--ease)}
.gal-nav svg{width:20px;height:20px}
.gal-nav:hover{scale:1.06}
.gal-nav:active{scale:.96}
.gal-nav:focus-visible{outline:2px solid #0f46cb;outline-offset:2px}
.gal-nav[disabled]{opacity:0;pointer-events:none}
.gal-prev{left:12px}
.gal-next{right:12px}
.gal-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gal-dot{pointer-events:auto;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,#0a2177 28%,transparent);cursor:pointer;transition:width var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.gal-dot.on{width:22px;background:#0f46cb}
.gal-dot:focus-visible{outline:2px solid #0f46cb;outline-offset:3px}
.gal-cnt{position:absolute;top:12px;right:12px;z-index:2;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,#0a2177 80%,transparent);color:#fafafa;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:640px){.gal-nav{width:36px;height:36px}.gal-prev{left:8px}.gal-next{right:8px}.foto.foto--gal{aspect-ratio:1;padding:0}}
/* REV 20 (6 Okt 2026): lencana "New story" hanya untuk cerita baru; hilang sendiri 30 hari setelah data-baru */
[data-baru][hidden]{display:none!important}
/* REV 25 (7 Okt 2026): panel lampu minimalis di kanan bawah foto: 5 baris lampu dengan titik warna (Netral hanya panel) + baris "Semua lampu". Kartu tanpa tombol warna. */
.ll{max-width:1088px;margin:0 auto;--t-ll:.9s}
.ll-frame{position:relative}
.ll-stage{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#0a2177;isolation:isolate;box-shadow:0 30px 60px -36px rgba(10,33,119,.6)}
.ll-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.ll-s{position:absolute;inset:0;margin:0;opacity:0;mix-blend-mode:lighten;transition:opacity var(--t-ll) var(--ease);will-change:opacity}
.ll-s.is-on{opacity:1}
.ll-s img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ll-cap{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;gap:6px;align-items:baseline;max-width:calc(100% - 270px);padding:6px 14px;border-radius:99px;background:color-mix(in srgb,#0a2177 82%,transparent);color:#fafafa;font-size:13px;font-weight:600;line-height:1.3}
.ll-cap i{font-style:normal;color:#f69c00}
.ll-count{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;gap:4px;align-items:baseline;padding:5px 14px;border-radius:99px;background:color-mix(in srgb,#0a2177 82%,transparent);color:#fafafa;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.ll-count b{font-weight:700;color:#f69c00}
.ll-tag{position:absolute;top:16px;right:16px;z-index:3;padding:4px 12px;border-radius:99px;background:color-mix(in srgb,#fafafa 86%,transparent);color:#0a2177;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
/* panel lampu: kanan bawah foto, tampil setelah ada lampu yang menyala */
.ll-panel{position:absolute;right:16px;bottom:16px;z-index:4;width:236px;padding:10px 12px 10px;border-radius:14px;background:color-mix(in srgb,#0a2177 84%,transparent);color:#fafafa;font-size:12px;font-weight:600;opacity:0;visibility:hidden;translate:0 8px;transition:opacity var(--t-base) var(--ease),translate var(--t-base) var(--ease),visibility 0s linear var(--t-base)}
.ll.is-nyala .ll-panel{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--t-base) var(--ease),translate var(--t-base) var(--ease)}
.ll-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;opacity:.5;transition:opacity var(--t-base) var(--ease)}
.ll-row.is-lit{opacity:1}
.ll-row>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-dots{display:flex;gap:6px;flex:none}
.ll-pw,.ll-w{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.ll-pw i,.ll-w i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,33,119,.35);transition:scale var(--t-fast) var(--ease)}
.ll-pw[data-warna="putih"] i,.ll-w[data-semua="putih"] i{background:#f4f8ff}
.ll-pw[data-warna="netral"] i{background:#ffe9c2}
.ll-pw[data-warna="kuning"] i,.ll-w[data-semua="kuning"] i{background:#f6b64a}
.ll-pw:hover i,.ll-w:hover i{scale:1.15}
.ll-pw[aria-pressed="true"] i,.ll-w[aria-pressed="true"] i{box-shadow:0 0 0 2px #0a2177,0 0 0 4px #f69c00}
.ll-pw:focus-visible,.ll-w:focus-visible{outline:2px solid #f69c00;outline-offset:1px}
.ll-semua{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,#fafafa 22%,transparent)}
.ll-btn{position:absolute;left:50%;top:100%;translate:-50% -50%;z-index:4;width:68px;height:68px;border-radius:50%;border:4px solid transparent;background:linear-gradient(#fafafa,#fafafa) padding-box,linear-gradient(135deg,#0f46cb,#179ec5) border-box;color:#0a2177;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -10px rgba(10,33,119,.65);transition:scale var(--t-fast) var(--ease)}
.ll-btn svg{width:30px;height:30px}
.ll-btn .ll-ic-ulang{display:none}
.ll.is-akhir .ll-btn .ll-ic-klik{display:none}
.ll.is-akhir .ll-btn .ll-ic-ulang{display:block}
.ll-btn:hover{scale:1.06}
.ll-btn:active{scale:.94}
.ll-btn:focus-visible{outline:3px solid #f69c00;outline-offset:4px}
.ll-btn::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #0f46cb;opacity:0;animation:llPulse 2.2s var(--ease) infinite}
.ll.is-dipakai .ll-btn::before{animation:none}
@keyframes llPulse{0%{opacity:.7;scale:.85}100%{opacity:0;scale:1.3}}
.ll-steps{position:relative;list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ll-step{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-top:3px solid var(--line-strong);opacity:.55;cursor:pointer;transition:opacity var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.ll-step.is-lit{opacity:1;border-top-color:#f69c00}
.ll-step.is-now{border-top-color:#0f46cb}
.ll-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);font-size:13px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.ll-step h3{margin:6px 0 0;font-size:17px;line-height:1.25}
.ll-step .ll-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0f46cb}
.ll-step p.ll-d{margin:2px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.ll-step p.ll-cct{margin:2px 0 0;font-size:12px;color:var(--ink-faint)}
.ll-step a{margin-top:6px;font-size:14px;font-weight:700;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.ll-step a:focus-visible{outline:2px solid #0f46cb;outline-offset:3px}
@media(max-width:900px){
  .ll-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,300px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-top:52px;padding-bottom:4px}
  .ll-steps::-webkit-scrollbar{display:none}
  .ll-step{scroll-snap-align:start}
}
@media(max-width:640px){
  .ll-stage{aspect-ratio:4/3;border-radius:16px}
  .ll-cap{left:12px;bottom:auto;top:44px;font-size:12px;max-width:calc(100% - 24px)}
  .ll-count{top:12px;left:12px}.ll-tag{top:12px;right:12px}
  .ll-frame{padding-bottom:244px}
  .ll-panel{right:0;left:0;bottom:auto;top:calc(100% - 244px + 46px);width:auto;translate:0 0;background:#0a2177}
  .ll.is-nyala .ll-panel{translate:0 0}
  .ll-btn{width:62px;height:62px;top:calc(100% - 244px)}
  .ll-steps{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.ll-btn::before{animation:none}.ll-s,.ll-panel{transition:none}}
/* REV 22 (6 Okt 2026): SEO. Judul kartu blog jadi tautan, gambar sampul + "Baca juga" di tulisan, "Panduan terkait" di halaman produk. */
.bl-lead h3 a,.bl-mini h3 a,.bl-card h3 a{color:inherit;text-decoration:none}
.bl-lead h3 a:focus-visible,.bl-mini h3 a:focus-visible,.bl-card h3 a:focus-visible{outline:2px solid #0f46cb;outline-offset:3px;border-radius:4px}
.bp-cover{margin:0 0 28px}
.bp-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--tint)}
.bp-body p.bp-baca{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;line-height:1.8}
.bp-body p.bp-baca a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pg-terkait[hidden]{display:none}
.pt-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-list li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--white);transition:border-color var(--t-base) var(--ease)}
.pt-list li:hover{border-color:var(--line-strong)}
.pt-list a{font-weight:700;font-size:16px;line-height:1.4;color:var(--ink);text-decoration:none}
.pt-list a:hover{color:var(--cobalt)}
.pt-list a:focus-visible{outline:2px solid #0f46cb;outline-offset:3px;border-radius:4px}
.pt-list span{font-size:13px;color:var(--ink-faint)}
@media(max-width:900px){.pt-list{grid-template-columns:minmax(0,1fr)}}
/* REV 26 (7 Okt 2026): (a) HP: deretan kartu produk tidak lagi rel geser, tetap grid statis yang kartunya mengecil (gaya Tokopedia);
   (b) ikon kartu angka Tentang jadi ubin putih + ikon navy supaya tidak nyaru dengan latar; (c) ubin "Produk kami" di Tentang memakai foto lampu saat dipakai;
   (d) slide foto di kartu katalog untuk produk yang punya lebih dari satu foto. */
@media(max-width:900px){
  .feat-grid:has(>.card){grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;scroll-snap-type:none;margin-inline:0;padding:0}
  .feat-grid.hp-grid:has(>.card){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .feat-grid:has(>.card){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  /* .terkait-grid (3 produk terkait) tetap rel geser di HP: 3 kartu dalam 2 kolom jadi pincang, 3 kolom terlalu sempit */
}
.ts-ic{background:#fafafa;color:#0a2177;box-shadow:0 8px 18px -8px rgba(10,33,119,.5)}
.tb-hero .tb-stats>div:hover .ts-ic{background:#f69c00;color:#0a2177}
.kg .kg-foto{position:relative;flex:0 0 auto;height:212px;overflow:hidden;background:#0a2177}
.kg .kg-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:scale var(--t-slow) var(--ease)}
.kg:hover .kg-foto img{scale:1.04}
@media(max-width:900px){.kg .kg-foto{height:176px}}
@media(max-width:640px){.kg .kg-foto{flex:0 0 112px;height:auto;min-height:104px;align-self:stretch}.kg:hover .kg-foto img{scale:1}}
.card .photo--gal{display:block;padding:0}
.card .photo--gal .gal{height:100%}
.card .photo--gal .gal-s{background:var(--white)}
.card .photo--gal .gal-s--prod img{object-fit:contain;padding:12%}
.card .photo--gal .gal-s img{transition:none}
.card .photo--gal .gal-track,.card .photo--gal .gal-nav,.card .photo--gal .gal-dots{pointer-events:auto}
.card .photo--gal .gal-nav{z-index:2;width:28px;height:28px;box-shadow:0 4px 12px -4px rgba(10,33,119,.5)}
.card .photo--gal .gal-nav svg{width:16px;height:16px}
.card .photo--gal .gal-prev{left:8px}
.card .photo--gal .gal-next{right:8px}
.card .photo--gal .gal-dots{z-index:2;bottom:8px;gap:4px}
.card .photo--gal .gal-dot{width:6px;height:6px}
.card .photo--gal .gal-dot.on{width:16px}
.card .photo--gal .gal-cnt{display:none}
@media(max-width:640px){.card .photo--gal .gal-nav{width:24px;height:24px}.card .photo--gal .gal-nav svg{width:14px;height:14px}}
/* REV 28 (7 Okt 2026): (a) hook pencahayaan berlapis + paragraf pembuka; (b) kartu langkah jadi ubin ringkas + panel keterangan lampu aktif (.ll-detail, dibuat JS);
   (c) "Yang kamu dapat": kartu garansi selebar grid dengan foto ruangan, 4 kartu lain jadi ubin mendatar; (d) testimoni = skor Tokopedia asli + 3 ulasan pembeli;
   (e) kartu cerita Mockup di beranda jadi kartu "Segera" (bohlam menyala saat disorot); (f) footer disederhanakan (3 kolom). */
/* (a) hook */
.ll-lead{margin:12px 0 0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
/* (b) ubin langkah */
.ll-steps{margin-top:56px;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ll-step{opacity:1;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:14px 16px;gap:4px;align-items:flex-start;transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.ll-step:hover{border-color:var(--line-strong)}
.ll-step .ll-d,.ll-step .ll-cct,.ll-step>a{display:none}
.ll-step h3{margin-top:8px;font-size:15px;line-height:1.3;color:var(--ink-soft)}
.ll-step .ll-k{color:var(--ink-faint)}
.ll-step.is-lit{border-color:color-mix(in srgb,#f69c00 55%,var(--line))}
.ll-step.is-lit h3{color:var(--ink)}
.ll-step.is-lit .ll-k{color:#0f46cb}
.ll-step.is-lit .ll-n{background:#f69c00;border-color:#f69c00;color:#0a2177}
.ll-step.is-now{border-color:#0f46cb;background:color-mix(in srgb,#0f46cb 6%,#fafafa);box-shadow:0 0 0 3px color-mix(in srgb,#0f46cb 14%,transparent)}
.ll-step.is-now .ll-n{background:#0f46cb;border-color:#0f46cb;color:#fafafa}
.ll-detail{margin-top:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 28px;align-items:center;padding:22px 26px;border-radius:16px;background:#0a2177;color:#fafafa}
.ll-detail .lld-no{font-family:var(--display);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#f69c00;font-variant-numeric:tabular-nums;min-width:58px}
.ll-detail .lld-no small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,#fafafa 60%,transparent);margin-top:4px}
.ll-detail h3{margin:0;font-size:18px;line-height:1.3;color:#fafafa}
.ll-detail .lld-k{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#179ec5}
.ll-detail p.lld-d{margin:6px 0 0;font-size:14px;line-height:1.65;color:color-mix(in srgb,#fafafa 80%,transparent);max-width:60ch}
.ll-detail .lld-side{display:flex;flex-direction:column;align-items:flex-start;gap:10px;justify-self:end}
.ll-detail .lld-cct{margin:0;font-size:12px;color:color-mix(in srgb,#fafafa 65%,transparent);white-space:nowrap}
.ll-detail .lld-cct b{color:#fafafa;font-weight:600}
.ll-detail a.btn{margin:0;padding:10px 16px;font-size:13px;white-space:nowrap}
.ll-detail.is-off{grid-template-columns:auto minmax(0,1fr)}
.ll-detail.is-off .lld-no{color:#179ec5}
@media(max-width:900px){
  .ll-detail{grid-template-columns:auto minmax(0,1fr)}
  .ll-detail .lld-side{grid-column:1/-1;justify-self:start;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px}
}
@media(max-width:640px){
  .ll-steps{margin-top:12px;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:6px;padding-bottom:0}
  .ll-step{padding:10px 4px 8px;align-items:center;text-align:center;gap:2px;border-radius:12px}
  .ll-step .ll-n{width:24px;height:24px;font-size:12px}
  .ll-step h3{margin-top:6px;font-size:11px;line-height:1.25}
  .ll-step .ll-k{display:none}
  .ll-detail{padding:16px;gap:10px 14px}
  .ll-detail .lld-no{font-size:30px;min-width:44px}
  .ll-detail h3{font-size:16px}
  .ll-detail .lld-cct{white-space:normal}
}
/* (c) Yang kamu dapat */
.pillars.pl-v2{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pl-v2 .pillar--hero{grid-column:1/-1;grid-row:auto;min-height:250px;padding:32px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;align-content:space-between;gap:20px;background:linear-gradient(90deg,#0a2177 0 30%,color-mix(in srgb,#0a2177 62%,transparent) 46%,color-mix(in srgb,#0a2177 10%,transparent) 68%,transparent 100%),var(--pl-foto,none) right center/cover no-repeat #0a2177;background-clip:padding-box}
.pl-v2 .pillar--hero::after{background:none}
/* lapisan gelap dipindah ke background elemen (lapisan ganda), bukan ::after, supaya pasti di atas foto */
.pl-v2 .pillar--hero>div,.pl-v2 .pillar--hero .btn{grid-column:1}
.pl-v2 .pillar--hero .btn{align-self:end;justify-self:start;margin-top:0}
.pl-v2 .pillar:not(.pillar--hero){flex-direction:row;align-items:flex-start;gap:14px;padding:18px}
.pl-v2 .pillar:not(.pillar--hero) .ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;margin:0;background:color-mix(in srgb,#0f46cb 10%,#fafafa)}
.pl-v2 .pillar:not(.pillar--hero) .ic svg{color:#0f46cb;width:20px;height:20px}
.pl-v2 .pillar .pl-t{min-width:0}
.pl-v2 .pillar:not(.pillar--hero) .big{font-size:20px}
.pl-v2 .pillar:not(.pillar--hero) h3{margin-top:4px;font-size:14px}
.pl-v2 .pillar:not(.pillar--hero) p{margin-top:4px;font-size:13px}
@media(max-width:900px){
  .pillars.pl-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-v2 .pillar--hero{grid-template-columns:minmax(0,1fr);background:linear-gradient(90deg,#0a2177 0 38%,color-mix(in srgb,#0a2177 62%,transparent) 58%,color-mix(in srgb,#0a2177 12%,transparent) 100%),var(--pl-foto,none) 72% center/cover no-repeat #0a2177}
}
@media(max-width:640px){
  .pillars.pl-v2{grid-template-columns:minmax(0,1fr)}
  .pl-v2 .pillar--hero{min-height:380px;padding:22px;align-content:start;gap:16px;background:linear-gradient(180deg,#0a2177 0 40%,color-mix(in srgb,#0a2177 70%,transparent) 54%,color-mix(in srgb,#0a2177 8%,transparent) 100%),var(--pl-foto,none) center bottom/cover no-repeat #0a2177}
  .pl-v2 .pillar--hero>div{align-self:start}
}
/* (d) testimoni: skor Tokopedia + ulasan */
.testi-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:20px;align-items:stretch}
.testi-score{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:26px 24px;border-radius:14px;background:#0a2177;color:#fafafa;text-decoration:none;transition:background-color var(--t-fast) var(--ease)}
.testi-score:hover{background:#0f46cb}
.testi-score .ts-big{font-family:var(--display);font-size:56px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.testi-score .ts-big small{font-size:20px;font-weight:700;color:color-mix(in srgb,#fafafa 60%,transparent);margin-left:4px}
.testi-score .ts-stars{display:flex;gap:3px;color:#f69c00;margin:4px 0 8px}
.testi-score .ts-stars svg{width:18px;height:18px}
.testi-score .ts-meta{font-size:13px;color:color-mix(in srgb,#fafafa 78%,transparent)}
.testi-score .ts-meta b{color:#fafafa;font-weight:700}
.testi-score .ts-src{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#f69c00}
.testi-score .ts-src svg{width:14px;height:14px}
.testi .p span{font-family:inherit}
@media(max-width:900px){
  .testi-wrap{grid-template-columns:minmax(0,1fr)}
  .testi-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:18px 20px}
  .testi-score .ts-stars{margin:0}
  .testi-score .ts-src{margin:0 0 0 auto}
}
@media(max-width:760px){
  .testi-wrap{display:block}
  .testi-score{margin-bottom:12px}
}
/* (e) kartu cerita Segera */
.cf-card--soon{cursor:default}
.cf-card--soon .thumb{position:relative;background:#0a2177;display:grid;place-items:center;aspect-ratio:16/10;padding:0}
.cf-card--soon .soon-bulb{width:64px;height:64px;color:color-mix(in srgb,#fafafa 36%,transparent);transition:color var(--t-slow) var(--ease),filter var(--t-slow) var(--ease)}
.cf-card--soon:hover .soon-bulb{color:#f69c00;filter:drop-shadow(0 0 18px color-mix(in srgb,#f69c00 70%,transparent))}
.cf-card--soon .cf-tag--soon{background:color-mix(in srgb,#fafafa 14%,transparent);color:#fafafa;border-color:color-mix(in srgb,#fafafa 30%,transparent)}
.cf-card--soon .soon-hint{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f69c00;opacity:0;transition:opacity var(--t-base) var(--ease)}
.cf-card--soon:hover .soon-hint{opacity:1}
.cf-card--soon .by a{color:#0f46cb;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* (f) footer */
footer .footer-grid.footer-v2{grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:40px;padding-block:44px 36px}
.footer-v2 .footer-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.footer-v2 .footer-about .sig{margin-top:10px}
.footer-v2 .footer-col ul.marketplace-list{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
.footer-v2 .footer-col ul.marketplace-list a{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid color-mix(in srgb,#fafafa 22%,transparent);border-radius:10px}
.footer-v2 .footer-col ul.marketplace-list a:hover{border-color:#fafafa}
@media(max-width:900px){
  footer .footer-grid.footer-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .footer-v2 .footer-about{grid-column:1/-1}
}
@media(max-width:640px){
  footer .footer-grid.footer-v2{grid-template-columns:minmax(0,1fr);gap:28px}
  .footer-v2 .footer-grid>.footer-col,.footer-v2 .footer-about{grid-column:auto}
}
/* REV 29 (7 Okt 2026): kartu "Masalah lampu" diberi warna supaya lebih menonjol: blok masalah bertint cobalt + garis emas di kiri, judul navy,
   baris produk putih dengan panah di lingkaran emas; sorot = bingkai cobalt + bayangan navy. */
.ms-item{border-color:color-mix(in srgb,#0f46cb 16%,#fafafa);box-shadow:0 10px 24px -20px color-mix(in srgb,#0a2177 60%,transparent);transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.ms-item:hover{border-color:#0f46cb;box-shadow:0 18px 36px -20px color-mix(in srgb,#0a2177 55%,transparent)}
.ms-q{position:relative;background:linear-gradient(135deg,color-mix(in srgb,#0f46cb 11%,#fafafa),color-mix(in srgb,#179ec5 9%,#fafafa));border-left:5px solid #f69c00}
.ms-q h3{color:#0a2177}
.ms-q p{color:color-mix(in srgb,#0a2177 72%,#0f0f0f)}
.ms-a{background:#fafafa;border-top:1px solid color-mix(in srgb,#0f46cb 14%,#fafafa)}
.ms-a:hover{background:color-mix(in srgb,#f69c00 8%,#fafafa)}
.ms-a img{background:#fafafa;border:1px solid color-mix(in srgb,#0f46cb 12%,#fafafa)}
.ms-a b{color:#0f46cb}
.ms-a>svg{box-sizing:content-box;width:18px;height:18px;padding:9px;border-radius:50%;background:#f69c00;color:#0a2177}
.ms-a:hover>svg{transform:translateX(4px);background:#0f46cb;color:#fafafa}
@media(max-width:640px){.ms-q{border-left-width:4px}}
/* REV 30 (7 Okt 2026): testimoni = tab per sumber (Tokopedia / Shopee / TikTok Shop) + slider ulasan dengan panah dan titik.
   Tokopedia berisi 5 ulasan asli + bilah skor; Shopee dan TikTok Shop berisi kartu "menyusul" sampai ulasannya diambil. */
.testi-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.testi-tabs button{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:12px;border:1px solid var(--line);background:#fafafa;color:#0a2177;font-family:inherit;font-weight:700;font-size:14px;line-height:1.2;text-align:left;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.testi-tabs button .mp-ic{width:32px;height:32px;border-radius:8px}
.testi-tabs button .lbl{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.testi-tabs button small{font-size:11px;font-weight:600;color:var(--ink-faint)}
.testi-tabs button:hover{border-color:color-mix(in srgb,#0f46cb 40%,var(--line))}
.testi-tabs button.on{border-color:#0f46cb;background:color-mix(in srgb,#0f46cb 7%,#fafafa);box-shadow:0 0 0 3px color-mix(in srgb,#0f46cb 12%,transparent)}
.testi-tabs button.on small{color:#0f46cb}
.testi-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:14px 18px;border-radius:12px;background:#0a2177;color:#fafafa;margin-bottom:16px}
.testi-bar .ts-big{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.testi-bar .ts-big small{font-size:14px;font-weight:700;color:color-mix(in srgb,#fafafa 60%,transparent);margin-left:2px}
.testi-bar .ts-stars{display:flex;gap:2px;color:#f69c00}
.testi-bar .ts-stars svg{width:16px;height:16px}
.testi-bar .ts-meta{font-size:13px;color:color-mix(in srgb,#fafafa 80%,transparent)}
.testi-bar .ts-meta b{color:#fafafa;font-weight:700}
.testi-bar .ts-src{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#f69c00;text-decoration:none}
.testi-bar .ts-src:hover{color:#fafafa}
.testi-bar .ts-src svg{width:14px;height:14px}
.testi-slider{position:relative}
.testi-slider .testi-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:0;padding:4px 2px 8px;scrollbar-width:none;grid-template-columns:none}
.testi-slider .testi-grid::-webkit-scrollbar{display:none}
.testi-slider .testi-grid::after{content:'';flex:0 0 calc((100% - 32px)/3*2 + 32px)}
/* ruang kosong di ujung: tiap kartu bisa jadi slide sendiri (5 kartu = 5 slide) */
.testi-slider .testi-grid>.testi{flex:0 0 calc((100% - 32px)/3);min-width:0;scroll-snap-align:start;background:#fafafa;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:none}
.testi-slider .testi-grid>.testi .q{font-size:14px;line-height:1.7;color:var(--ink);flex:1}
.testi-slider .testi-grid>.testi .p span{font-family:inherit}
.testi-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,#0f46cb 25%,#fafafa);background:#fafafa;color:#0a2177;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -10px color-mix(in srgb,#0a2177 50%,transparent);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.testi-nav svg{width:18px;height:18px}
.testi-prev{left:-19px}
.testi-next{right:-19px}
.testi-nav:hover{background:#0f46cb;color:#fafafa;border-color:#0f46cb}
.testi-nav[disabled]{opacity:.35;pointer-events:none}
.testi-slider .testi-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.testi-soon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;border-radius:14px;border:1px dashed color-mix(in srgb,#0f46cb 35%,#fafafa);background:color-mix(in srgb,#0f46cb 5%,#fafafa)}
.testi-soon .mp-ic{width:46px;height:46px;border-radius:10px}
.testi-soon h3{margin:0;font-size:16px;line-height:1.3;color:#0a2177}
.testi-soon p{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.testi-soon a.btn{white-space:nowrap;margin:0}
@media(max-width:900px){
  .testi-slider .testi-grid>.testi{flex-basis:calc((100% - 16px)/2)}
  .testi-slider .testi-grid::after{flex-basis:calc((100% - 16px)/2 + 16px)}
}
@media(max-width:760px){
  .testi-slider .testi-grid{margin-inline:0;padding:4px 0 8px}
  .testi-slider .testi-grid>.testi{flex-basis:84%;min-width:0}
  .testi-slider .testi-grid::after{flex-basis:calc(16% - 16px)}
  .testi-nav{width:34px;height:34px}
  .testi-prev{left:-8px}
  .testi-next{right:-8px}
  .testi-bar .ts-src{margin-left:0}
  .testi-soon{grid-template-columns:auto minmax(0,1fr)}
  .testi-soon a.btn{grid-column:1/-1;justify-self:start}
}
/* REV 31 (7 Okt 2026): kartu jenis bangunan (Proyek) memakai foto ruangan saat lampu dipakai, bukan panggung produk; galeri cerita memakai kartu Segera per kategori. */
.sk .sk-foto{position:relative;flex:0 0 auto;height:212px;overflow:hidden;background:#0a2177}
.sk .sk-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:scale var(--t-slow) var(--ease)}
.sk:hover .sk-foto img{scale:1.04}
@media(max-width:900px){.sk .sk-foto{height:184px}}
@media(max-width:640px){.sk .sk-foto{height:176px}.sk:hover .sk-foto img{scale:1}}
/* REV 33 (7 Okt 2026): parallax hero beranda dibalik dan diperbesar: saat halaman digulir, foto ikut "menunduk" (bergeser ke atas lebih cepat dari halaman),
   seperti sudut pandang kamera yang menengok ke bawah. Foto diperbesar 1.24x supaya ada ruang geser tanpa tepi kosong. JS: --py = -min(p*hh*.22, hh*.14). */
.fx .hero-bg img,.fx .hero-bg>.lampu-l{transform:translate3d(0,var(--py,0px),0) scale(1.24)}
@media(prefers-reduced-motion:reduce){.fx .hero-bg img,.fx .hero-bg>.lampu-l{transform:none;will-change:auto}}
/* REV 37 (7 Okt 2026): parallax "3D" untuk semua pembuka halaman: foto bergeser ke atas lebih cepat dari halaman sambil membesar pelan (--py, --pz),
   teks pembuka bergeser turun & memudar (--cy, --co) sehingga foto dan teks terasa berlapis. Home: skala dasar dinaikkan ke 1.3 supaya geseran lebih terasa. */
.fx .hero-bg img,.fx .hero-bg>.lampu-l{transform:translate3d(0,var(--py,0px),0) scale(calc(1.3 + var(--pz,0)))}
.fx .tc-hero .tb-photo,.fx .p-hero .tb-photo,.fx .tb-hero .tb-photo,.fx .c-hero .tb-photo{overflow:hidden}
.fx .tc-hero .tb-photo img,.fx .p-hero .tb-photo img,.fx .tb-hero .tb-photo img,.fx .c-hero .tb-photo img{transform:translate3d(0,var(--py,0px),0) scale(calc(1.22 + var(--pz,0)));transform-origin:50% 45%;will-change:transform}
.fx .tc-hero .tb-copy,.fx .p-hero .tb-copy,.fx .tb-hero .tb-copy,.fx .c-hero .tb-copy{transform:translate3d(0,var(--cy,0px),0);opacity:var(--co,1);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .fx .hero-bg img,.fx .hero-bg>.lampu-l,.fx .tc-hero .tb-photo img,.fx .p-hero .tb-photo img,.fx .tb-hero .tb-photo img,.fx .c-hero .tb-photo img{transform:none;will-change:auto}
  .fx .tc-hero .tb-copy,.fx .p-hero .tb-copy,.fx .tb-hero .tb-copy,.fx .c-hero .tb-copy{transform:none;opacity:1}
}
/* REV 38 (7 Okt 2026): section pencahayaan berlapis dipadatkan supaya muat satu layar: foto 16:9 dibatasi 46vh (maks 460px), ubin & panel lebih ringkas. */
#inspirasi{padding-block:clamp(28px,4vw,48px)}
#inspirasi .section-head{margin-bottom:16px}
#inspirasi h2{font-size:clamp(26px,2.6vw,36px)}
#inspirasi .ll-lead{margin-top:8px;font-size:15px}
.ll-stage{aspect-ratio:16/9;max-height:min(78vh,640px);width:100%}
/* REV 48: batas tinggi dilonggarkan, foto 16:9 tampil utuh di web (user: versi web gepeng) */
.ll-base,.ll-s img{object-position:50% 8%}
/* REV 43: foto v4 16:9, panel plafon di tepi atas harus tetap terlihat */
.ll-steps{margin-top:36px;gap:8px}
.ll-step{padding:10px 14px;gap:2px}
.ll-step h3{margin-top:6px;font-size:14px}
.ll-step .ll-k{font-size:11px}
.ll-n{width:24px;height:24px;font-size:12px}
.ll-detail{margin-top:10px;padding:14px 20px;gap:8px 22px}
.ll-detail .lld-no{font-size:30px;min-width:46px}
.ll-detail h3{font-size:16px}
.ll-detail p.lld-d{font-size:13px;line-height:1.55}
.ll-detail a.btn{padding:8px 14px;font-size:12px}
@media(max-width:900px){.ll-stage{max-height:none}}
@media(max-width:640px){.ll-stage{aspect-ratio:4/3}.ll-steps{margin-top:12px}}
/* REV 39 (7 Okt 2026): (a) semua section ikut motion reveal: isi .wrap tiap section muncul naik halus berurutan (anak-anaknya diberi jeda bertahap);
   (b) pindah halaman: halaman baru masuk dari ATAS (bukan terdorong dari bawah) dan lompat ke atas tanpa gulir terlihat (html.jump). */
.fx .wrap[data-reveal]>*{--ty:16px}
.fx .wrap[data-reveal].in>*{transition:opacity var(--t-slow) var(--ease) var(--d,0s),transform var(--t-slow) var(--ease) var(--d,0s)}
.fx .wrap[data-reveal].in>*:nth-child(n+7){--d:.27s}
html.jump{scroll-behavior:auto!important}
.fx .route{animation:routeIn .55s var(--ease)}
@keyframes routeIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fx .route{animation:none}}
/* REV 40 (7 Okt 2026): di halaman Kontak, testimoni disambung ke section "Toko resmi kami di marketplace" sebagai satu narasi (tanpa judul besar terpisah). */
.testi-sambung{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.section-head--sambung{margin-bottom:18px}
.section-head--sambung h3{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.01em}
@media(max-width:640px){.testi-sambung{margin-top:28px;padding-top:24px}}
/* REV 42 (7 Okt 2026): (a) panel warna pindah ke KIRI bawah foto supaya lampu gantung di kanan tidak tertutup; keterangan pindah ke kanan bawah;
   (b) strip rak dapat pilihan warna sesuai katalog (Biru, Hijau, Merah, Pink): lapisan kuning yang sama diberi filter hue, tanpa foto baru. */
@media(min-width:641px){
  .ll-panel{left:16px;right:auto;width:252px;padding:8px 10px;font-size:11px} /* panel dipadatkan supaya tidak menutupi lampu dinding di foto baru */
  .ll-panel .ll-row{min-height:22px}
  .ll-panel .ll-pw,.ll-panel .ll-w{width:18px;height:18px}
  .ll-panel .ll-pw i,.ll-panel .ll-w i{width:12px;height:12px}
  .ll-panel .ll-semua{margin-top:6px;padding-top:6px}
  .ll-panel .ll-dots{gap:8px} /* jarak titik supaya cincin pilihan tidak menempel titik sebelah */
  .ll-cap{left:auto;right:16px;max-width:calc(100% - 290px)}
}
.ll-s[data-tint="biru"]{filter:hue-rotate(190deg) saturate(1.5)}
.ll-s[data-tint="hijau"]{filter:hue-rotate(80deg) saturate(1.3)}
.ll-s[data-tint="merah"]{filter:hue-rotate(-28deg) saturate(1.9)}
.ll-s[data-tint="pink"]{filter:hue-rotate(290deg) saturate(1.5)}
.ll-pw[data-warna="biru"] i{background:#2f7bff}
.ll-pw[data-warna="hijau"] i{background:#2ecc71}
.ll-pw[data-warna="merah"] i{background:#ff4d4d}
.ll-pw[data-warna="pink"] i{background:#ff6fb5}
/* REV 44 (7 Okt 2026): panel warna TIDAK lagi menutupi foto di desktop: titik warna lampu yang aktif + "Semua lampu" ditampilkan di panel keterangan
   (.ll-detail) di bawah ubin langkah; keterangan lampu kembali ke kiri bawah foto. Di HP panel statis di bawah foto tetap. Foto berlapis v5 16:9. */
@media(min-width:641px){
  .ll-panel{display:none}
  .ll-cap{left:16px;right:auto;max-width:calc(100% - 32px)}
  .ll-detail .lld-cct-teks{display:none}
}
.ll-detail .lld-warna{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:12px;color:color-mix(in srgb,#fafafa 70%,transparent)}
.ll-detail .lld-warna b{color:#fafafa;font-weight:600}
.ll-detail .lld-dots{display:inline-flex;gap:8px}
.ll-detail .lld-semua{display:inline-flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid color-mix(in srgb,#fafafa 22%,transparent)}
.ll-detail .ll-pw,.ll-detail .ll-w{width:20px;height:20px}
.ll-detail .ll-pw i,.ll-detail .ll-w i{width:13px;height:13px}
@media(max-width:640px){
  .ll-detail .lld-dots,.ll-detail .lld-semua{display:none}
}
/* REV 45 (7 Okt 2026): user minta panel warna kembali ke POJOK KIRI BAWAH foto (bukan di bar keterangan). Panel overlay ringkas (Rev 42) ditampilkan lagi
   di desktop; titik warna di bar keterangan disembunyikan (teks warna tetap). Foto berlapis v6 dirancang agar pojok kiri bawah hanya sofa. */
@media(min-width:641px){
  .ll-panel{display:block}
  .ll-detail .lld-dots,.ll-detail .lld-semua{display:none}
  .ll-detail .lld-cct-teks{display:inline}
  .ll-cap{left:auto;right:16px;max-width:calc(100% - 290px)}
}
/* REV 47 (7 Okt 2026): perbaikan hasil QA go-live (qa-golive.js + qa-sweep): (a) sasaran sentuh HP: tautan teks (footer, katalog, produk terkait,
   sumber ulasan, kartu bangunan, Baca artikel, logo) diberi area sentuh >= 36px lewat padding + margin negatif (tata letak tidak bergeser);
   panah galeri kartu 32px, titik galeri punya area sentuh 32px; (b) label 10px di kartu produk HP dinaikkan ke 11px; (c) label cyan 11px di bar
   keterangan berlapis dicerahkan supaya kontras > 4,5 (sebelumnya pas 4,50). */
@media(max-width:640px){
  .footer-col a,.toolbar .katalog-dl,.pm-link,.ts-src,.sk-go,a.more,.crumbs a,.footer-bottom a{display:inline-block;padding-block:8px;margin-block:-8px}
  .footer-col ul{gap:10px}
  .logo{padding-block:7px;margin-block:-7px}
  .card .photo--gal .gal-nav{width:32px;height:32px}
  .card .photo--gal .gal-nav svg{width:16px;height:16px}
  .card .meta--spek .cl{font-size:11px}
}
.gal-dot{position:relative}
.gal-dot::after{content:'';position:absolute;inset:-12px}
.ll-detail .lld-k{color:color-mix(in srgb,#179ec5 72%,#fafafa)}
/* REV 49 (7 Okt 2026): (a) HP: ruang 244px di bawah foto berlapis (tempat panel warna) tadinya selalu dipesan walau semua lampu mati -> jadi celah kosong
   besar. Sekarang ruangnya baru dibuka saat ada lampu nyala (--ll-pad), tombol bulat dan panel ikut variabel yang sama. (b) kartu "Cerita lain" versi Segera. */
@media(max-width:640px){
  .ll-frame{--ll-pad:40px;padding-bottom:var(--ll-pad);transition:padding-bottom var(--t-base) var(--ease)}
  .ll.is-nyala .ll-frame{--ll-pad:244px}
  .ll-btn{top:calc(100% - var(--ll-pad))}
  .ll-panel{top:calc(100% - var(--ll-pad) + 46px)}
}
.lain a{position:relative}
.lain a.lain--soon{background:color-mix(in srgb,#0a2177 5%,#fafafa);border-style:dashed}
.lain a.lain--soon h3{color:color-mix(in srgb,#0a2177 70%,#fafafa)}
.lain .lain-soon{position:absolute;top:18px;right:18px;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,#0a2177 45%,#fafafa);background:#fafafa;color:#0a2177;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.lain a.lain--soon .t{padding-right:84px;display:block}
/* REV 50 (7 Okt 2026): (a) slider ulasan per HALAMAN: web 3 kartu/halaman, tablet 2, HP 1; 6 ulasan per tab = 2 halaman penuh di web. Spacer ujung (Rev 36)
   dimatikan di >=641 karena halaman sudah pas. (b) footer diringkas (user: "ini gede bgt"): tautan Jelajahi jadi satu baris, jarak/huruf dikecilkan.
   (c) tombol checkout jadi tautan WhatsApp langsung (window.open sering diblokir, mis. di artifact). */
@media(min-width:641px){
  .testi-slider .testi-grid::after{flex-basis:0;flex-grow:0}
}
@media(min-width:901px){footer .footer-grid.footer-v2{grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr) minmax(0,1.3fr);gap:32px;padding-block:30px 24px}}
.footer-v2 .footer-about .sig{margin-top:6px;font-size:12px}
.footer-v2 .social{margin-top:12px}
.footer-v2 .social a{width:30px;height:30px}
.footer-v2 .social a svg{width:15px;height:15px}
.footer-v2 .footer-col h2{font-size:11px;margin-bottom:10px}
.footer-v2 .footer-col{font-size:13px}
.footer-v2 .footer-col ul{gap:6px}
.footer-v2 .footer-links ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 18px}
.footer-v2 .footer-links li{white-space:nowrap}
.footer-v2 .footer-col address{font-style:normal;line-height:1.5;color:color-mix(in srgb,#fafafa 78%,transparent)}
.footer-v2 .footer-col ul.marketplace-list{margin-top:2px;gap:6px!important}
.footer-v2 .footer-col ul.marketplace-list a{padding:3px 8px 3px 4px;font-size:13px;gap:6px}
.footer-v2 .footer-col ul.marketplace-list .mp-ic{width:22px;height:22px}
footer .footer-bottom{padding-block:12px;font-size:11px}
@media(max-width:900px){
  footer .footer-grid.footer-v2{gap:24px 20px;padding-block:26px 20px}
}
@media(max-width:640px){
  footer .footer-grid.footer-v2{gap:20px;padding-block:24px 18px}
  .footer-v2 .footer-links ul{gap:4px 14px}
  .footer-v2 .footer-col a{padding-block:6px;margin-block:-6px}
}
/* REV 51 (7 Okt 2026): (a) titik slider ulasan: user "motionnya aneh" (titik aktif melar 8->20 px + tombol 24->36 px, baris loncat) -> semua titik bulatan
   9 px sama besar, aktif hanya ganti warna + membesar 1,35x; tombol tetap 24 px (sasaran sentuh). (b) 9 ulasan per tab = 3 halaman x 3 kartu di web. */
.testi-slider .testi-dots{gap:4px}
.testi-slider .testi-dots button,.testi-slider .testi-dots button.on{width:24px;height:24px;background:none;border-radius:0;transition:none}
.testi-slider .testi-dots button::after{content:'';position:absolute;inset:auto;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:color-mix(in srgb,#0a2177 24%,#fafafa);transform:scale(1);transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.testi-slider .testi-dots button:hover{background:none}
.testi-slider .testi-dots button:hover::after{background:color-mix(in srgb,#0a2177 55%,#fafafa)}
.testi-slider .testi-dots button.on::after{width:9px;margin-left:-4.5px;background:#0a2177;transform:scale(1.35)}
/* REV 54 (8 Okt 2026): marquee klien memakai logo asli (kartu putih, tinggi seragam 40 px, lebar mengikuti). Pertamina masih teks (logo belum ada). */
.tt-clients.tt-logos{gap:14px;padding-right:14px;align-items:center}
.tt-clients.tt-logos li{flex:0 0 auto;height:68px;padding:0 18px;display:flex;align-items:center;justify-content:center;background:#fafafa;border:1px solid color-mix(in srgb,#0a2177 12%,#fafafa);border-radius:12px;box-shadow:none}
.tt-clients.tt-logos img{display:block;height:40px;width:auto;max-width:170px;object-fit:contain}
.tt-clients.tt-logos li.teks{font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.08em;color:#0a2177}
@media(max-width:640px){
  .tt-clients.tt-logos{gap:10px;padding-right:10px}
  .tt-clients.tt-logos li{height:56px;padding:0 14px}
  .tt-clients.tt-logos img{height:32px;max-width:140px}
  .tt-clients.tt-logos li.teks{font-size:12px}
}
/* REV 55 (8 Okt 2026): logo wall tanpa kotak (menimpa Rev 54): logo transparan sejajar, tinggi seragam 38 px, jarak lega. */
.tt-clients.tt-logos{gap:0;padding-right:0;align-items:center}
.tt-clients.tt-logos li,.tt-clients.tt-logos li.teks{flex:0 0 auto;height:auto;padding:0 34px;background:none;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center}
.tt-clients.tt-logos img{display:block;height:38px;width:auto;max-width:168px;object-fit:contain}
@media(max-width:640px){
  .tt-clients.tt-logos li{padding:0 20px}
  .tt-clients.tt-logos img{height:30px;max-width:130px}
}
/* REV 56 (8 Okt 2026): logo wall "eksklusif" (user: "lebih profesional, lebih exclusive"): logo monokrom gelap seragam, warna asli saat disorot;
   ukuran diseimbangkan lewat kotak proporsi (max 150x46, HP 120x36) supaya logo tegak (Tzu Chi, Morich) tidak kalah kecil; jarak 40 px. */
.tt-clients.tt-logos li{padding:0 40px}
.tt-clients.tt-logos img{height:auto;width:auto;max-height:46px;max-width:150px;filter:grayscale(1) brightness(.5) contrast(1.1);opacity:.55;transition:filter var(--t-base) var(--ease),opacity var(--t-base) var(--ease)}
.tt-clients.tt-logos li:hover img,.tt-clients.tt-logos li:focus-within img{filter:none;opacity:1}
.marquee:has(.tt-logos) .marquee-track{animation-duration:48s}
@media(max-width:640px){
  .tt-clients.tt-logos li{padding:0 24px}
  .tt-clients.tt-logos img{max-height:36px;max-width:120px}
}
@media(prefers-reduced-motion:reduce){.tt-clients.tt-logos img{transition:none}}
/* REV 57 (8 Okt 2026): user: monokrom "jelek", kembali BERWARNA; jarak antar logo dirapikan: tiap logo di slot lebar tetap 190 px (HP 150) dan
   dipusatkan, kotak proporsi logo max 150x46 (HP 120x36), jadi irama jarak rata walau lebar logo beda-beda. Menimpa filter Rev 56. */
.tt-clients.tt-logos li{width:190px;padding:0;justify-content:center}
.tt-clients.tt-logos img,.tt-clients.tt-logos li:hover img,.tt-clients.tt-logos li:focus-within img{filter:none;opacity:1;transition:none}
@media(max-width:640px){
  .tt-clients.tt-logos li{width:150px;padding:0}
}
/* REV 58 (8 Okt 2026): hirarki footer (user: "hirarkinya bisa dibenerin"): Jelajahi jadi 2 kolom rapi (bukan baris mengalir), nomor WhatsApp jadi
   kontak utama (tebal, putih penuh), alamat lebih kecil & redup, label kolom lebih halus, irama vertikal seragam. Menimpa Rev 50. */
@media(min-width:901px){
  footer .footer-grid.footer-v2{grid-template-columns:minmax(0,1.25fr) minmax(0,1.35fr) minmax(0,1.4fr);gap:48px;padding-block:40px 28px}
}
.footer-v2 .footer-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 28px}
.footer-v2 .footer-links li{white-space:normal}
.footer-v2 .footer-col h2{margin-bottom:12px;font-size:11px;letter-spacing:.14em;color:color-mix(in srgb,#fafafa 64%,transparent)}
.footer-v2 .footer-col{font-size:14px}
.footer-v2 .footer-col a{color:color-mix(in srgb,#fafafa 85%,transparent)}
.footer-v2 .footer-col a:hover{color:#fafafa}
.footer-v2 .footer-col ul:not(.marketplace-list) li:first-child a[href^="https://wa.me"]{font-weight:700;font-size:15px;color:#fafafa}
.footer-v2 .footer-col address{margin-top:4px;font-size:13px;line-height:1.55;color:color-mix(in srgb,#fafafa 62%,transparent)}
.footer-v2 .footer-col h2+ul.marketplace-list,.footer-v2 .footer-col ul.marketplace-list{margin-top:2px}
.footer-v2 .footer-col ul.marketplace-list a{color:#fafafa}
.footer-v2 .footer-about .sig{color:color-mix(in srgb,#fafafa 72%,transparent)}
footer .footer-bottom{color:color-mix(in srgb,#fafafa 50%,transparent)}
@media(max-width:640px){
  .footer-v2 .footer-links ul{gap:6px 20px}
}
/* ---- tambahan khusus Joomla (build-joomla.ps1): pesan sistem, halaman bawaan Joomla, halaman galat ---- */
#system-message-container{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,56px)}
#system-message-container:empty{display:none}
#system-message-container joomla-alert,#system-message-container .alert{display:block;margin:16px 0 0;padding:14px 18px;border-radius:10px;border:1px solid var(--line-strong);background:var(--tint);color:var(--ink);font-size:15px;line-height:1.5}
.jkonten{padding-block:clamp(32px,5vw,64px)}
.jkonten>*{max-width:760px}
.jkonten h1{font-size:var(--t-h1-sm);line-height:1.15;margin-bottom:16px}
.jkonten h2{font-size:var(--t-h2-sub);line-height:1.25;margin:32px 0 12px}
.jkonten h3{font-size:18px;margin:24px 0 8px}
.jkonten p,.jkonten ul,.jkonten ol{margin:0 0 16px}
.jkonten img{max-width:100%;height:auto;border-radius:8px}
.jkonten a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.jkonten table{border-collapse:collapse;width:100%}
.jkonten th,.jkonten td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.galat-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:560px){.galat-cta .btn{width:100%}}