/* =========================================================
   KASUR TAJIMA — Modern Stylesheet
   Palet: Navy premium + Gold + Cream
   ========================================================= */

:root{
  --navy:#14224d;
  --navy-2:#1c2f63;
  --navy-soft:#27407f;
  --gold:#f2a900;
  --gold-2:#ffc333;
  --cream:#f7f1e6;
  --cream-2:#fbf6ec;
  --ink:#1a2238;
  --muted:#647089;
  --line:#e7e2d6;
  --white:#ffffff;
  --green:#25d366;
  --shadow-sm:0 4px 14px rgba(20,34,77,.07);
  --shadow:0 18px 45px rgba(20,34,77,.10);
  --shadow-lg:0 30px 70px rgba(20,34,77,.16);
  --radius:18px;
  --radius-lg:26px;
  --container:1180px;
  --t:.32s cubic-bezier(.22,.61,.36,1);
  --ff:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fh:'Poppins',var(--ff);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--ff);
  color:var(--ink);
  background:var(--cream-2);
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
/* Kunci scroll latar saat menu mobile terbuka */
body.nav-open{overflow:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.18;color:var(--navy);font-weight:700}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.hide-sm{display:inline-flex}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--fh);font-weight:600;font-size:.95rem;
  padding:.78rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  transition:var(--t);white-space:nowrap;line-height:1;
}
.btn i{font-size:1.08em}
.btn--primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3a2a00;box-shadow:0 10px 24px rgba(242,169,0,.35)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(242,169,0,.45)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--wa{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.35)}
.btn--wa:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn--ghost{background:transparent;border:1.6px solid var(--line);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn--lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn--block{display:flex;width:100%;justify-content:center}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:999px;font-family:var(--fh);
}
.badge--gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3a2a00}
.badge--navy{background:var(--navy);color:#fff}
.badge--soft{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.badge--green{background:rgba(37,211,102,.15);color:#0f8a3c}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy);color:#d9e0f3;font-size:.84rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:1rem}
.topbar__left{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.topbar__left i,.topbar__right i{color:var(--gold-2)}
.topbar__right{display:flex;gap:1.1rem;align-items:center}
.topbar__right a{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--t)}
.topbar__right a:hover{background:rgba(255,255,255,.12)}
.topbar__right a i{color:#fff}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:60;background:rgba(251,246,236,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:var(--t);
}
.navbar.is-scrolled{background:rgba(255,255,255,.96);box-shadow:var(--shadow-sm)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:1rem}
.brand{display:flex;flex-direction:column;line-height:1}
.brand__logo{font-family:var(--fh);font-weight:800;font-size:1.55rem;letter-spacing:.06em;color:var(--navy)}
.brand__logo sup{color:var(--gold);font-size:.6em}
.brand__logo--light{color:#fff}
.brand__tag{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:3px}
.nav{display:flex;align-items:center;gap:.4rem}
.nav__link{
  font-family:var(--fh);font-weight:600;font-size:.95rem;color:var(--navy);
  padding:.55rem .85rem;border-radius:999px;position:relative;transition:var(--t)
}
.nav__link:hover{color:var(--navy-soft);background:rgba(20,34,77,.05)}
.nav__link.is-active{color:var(--gold)}
.nav__link.is-active::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--gold);border-radius:2px}
.nav__cta{margin-left:.5rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav__toggle span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:var(--t)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Header di dalam drawer (hanya tampil di mobile) */
.nav__head{display:none}
.nav__close{display:none}

/* ---------- Section heading ---------- */
.section{padding:84px 0}
.section--tight{padding:60px 0}
.section--cream{background:var(--cream)}
.section--navy{background:var(--navy);color:#eaeefb}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center}
.section-head--left{margin-left:0;text-align:left}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fh);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.7rem}
.section-head p{color:var(--muted);font-size:1.05rem}
.section--navy .section-head h2{color:#fff}
.section--navy .eyebrow{color:var(--gold-2)}
.section--navy .section-head p{color:#b9c4e6}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 520px at 88% -8%,rgba(242,169,0,.18),transparent 60%),
  linear-gradient(160deg,#fbf6ec 0%,#f3ecdc 55%,#efe6d2 100%)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 0 80px}
.hero__badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.07;letter-spacing:-.02em}
.hero h1 .hl{color:var(--gold);position:relative}
.hero__lead{color:var(--muted);font-size:1.12rem;margin:1.2rem 0 1.8rem;max-width:520px}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.hero__stats{display:flex;gap:2rem;flex-wrap:wrap}
.hero__stat b{font-family:var(--fh);font-size:1.7rem;color:var(--navy);display:block;line-height:1}
.hero__stat span{font-size:.86rem;color:var(--muted)}
.hero__media{position:relative}
.hero__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;z-index:2}
.hero__media::after{content:"";position:absolute;inset:auto -22px -22px auto;width:78%;height:78%;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-radius:var(--radius-lg);opacity:.18;z-index:1}
.hero__float{
  position:absolute;z-index:3;background:#fff;border-radius:16px;padding:.9rem 1.1rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.9rem
}
.hero__float i{font-size:1.5rem;color:var(--gold)}
.hero__float small{display:block;color:var(--muted);font-weight:500;font-size:.76rem}
.hero__float--1{top:18px;left:-18px}
.hero__float--2{bottom:24px;right:-12px}
.hero__wave{display:block;width:100%;margin-bottom:-7px}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:30px 0}
.trust__item{display:flex;align-items:center;gap:.85rem;justify-content:center;text-align:left}
.trust__item i{font-size:1.9rem;color:var(--gold-2)}
.trust__item b{display:block;font-family:var(--fh);font-size:1.02rem}
.trust__item span{font-size:.82rem;color:#aebbe0}

/* ---------- Feature cards ---------- */
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;
  transition:var(--t);position:relative;overflow:hidden
}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.feature__ico{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;
  background:linear-gradient(135deg,rgba(242,169,0,.16),rgba(242,169,0,.06));color:var(--gold);margin-bottom:1.1rem
}
.feature h3{font-size:1.2rem;margin-bottom:.5rem}
.feature p{color:var(--muted);font-size:.96rem}

/* ---------- Product cards ---------- */
.products__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{
  background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:var(--t)
}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover .pcard__media img{transform:scale(1.07)}
.pcard__badge{position:absolute;top:14px;left:14px}
.pcard__disc{position:absolute;top:14px;right:14px;background:#e63946;color:#fff;font-weight:700;font-size:.78rem;padding:.35rem .6rem;border-radius:10px;font-family:var(--fh)}
.pcard__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard__cat{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);margin-bottom:.35rem}
.pcard__title{font-size:1.18rem;margin-bottom:.5rem}
.pcard__title a:hover{color:var(--navy-soft)}
.pcard__meta{display:flex;align-items:center;gap:.8rem;font-size:.82rem;color:var(--muted);margin-bottom:.7rem}
.pcard__meta .star{color:var(--gold)}
.pcard__desc{font-size:.9rem;color:var(--muted);margin-bottom:1rem;flex:1}
.pcard__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.chip{font-size:.74rem;font-weight:600;background:var(--cream);color:var(--navy);padding:.3rem .6rem;border-radius:8px}
.pcard__price{display:flex;align-items:baseline;gap:.55rem;margin-bottom:1rem}
.pcard__price .now{font-family:var(--fh);font-weight:800;font-size:1.4rem;color:var(--navy)}
.pcard__price .was{font-size:.9rem;color:#aa9;text-decoration:line-through}
.pcard__price .pre{font-size:.78rem;color:var(--muted)}
.pcard__actions{display:flex;gap:.5rem}
.pcard__actions .btn{flex:1;justify-content:center;padding:.7rem 1rem;font-size:.88rem}

/* ---------- Density comparison ---------- */
.density__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;transition:var(--t);position:relative}
.dcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.dcard--featured{border:2px solid var(--gold);box-shadow:var(--shadow)}
.dcard--featured::before{content:"Terlaris";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3a2a00;font-size:.72rem;font-weight:800;font-family:var(--fh);padding:.25rem .8rem;border-radius:999px}
.dcard__num{width:74px;height:74px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-family:var(--fh);font-weight:800;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy-soft))}
.dcard--featured .dcard__num{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3a2a00}
.dcard h3{font-size:1.05rem;margin-bottom:.3rem}
.dcard__tag{font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.dcard__price{font-family:var(--fh);font-weight:800;font-size:1.25rem;color:var(--navy);margin-bottom:.2rem}
.dcard__war{font-size:.82rem;color:var(--green);font-weight:600;margin-bottom:1.1rem}
.dcard .btn{width:100%;justify-content:center;padding:.6rem;font-size:.86rem}

/* ---------- Size guide table ---------- */
.guide{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.guide__media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.size-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);font-size:.92rem}
.size-table th{background:var(--navy);color:#fff;font-family:var(--fh);font-weight:600;text-align:left;padding:.85rem 1rem;font-size:.86rem}
.size-table td{padding:.78rem 1rem;border-bottom:1px solid var(--line)}
.size-table tr:last-child td{border-bottom:0}
.size-table tr:nth-child(even) td{background:var(--cream-2)}
.size-table .w{font-family:var(--fh);font-weight:700;color:var(--navy)}
.heights{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.heights span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem .85rem;font-weight:600;font-size:.88rem;color:var(--navy)}

/* ---------- Testimonials ---------- */
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:var(--t)}
.testi:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.testi__stars{color:var(--gold);margin-bottom:.8rem;font-size:1rem}
.testi__text{color:var(--ink);font-size:.98rem;margin-bottom:1.2rem;font-style:italic}
.testi__who{display:flex;align-items:center;gap:.8rem}
.testi__ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-soft));color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:700}
.testi__who b{display:block;font-family:var(--fh);font-size:.95rem}
.testi__who span{font-size:.82rem;color:var(--muted)}

/* ---------- Blog cards ---------- */
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:var(--t)}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.bcard__media{aspect-ratio:16/10;overflow:hidden}
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bcard:hover .bcard__media img{transform:scale(1.06)}
.bcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.bcard__meta{display:flex;gap:.8rem;align-items:center;margin-bottom:.7rem;font-size:.8rem;color:var(--muted)}
.bcard__cat{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bcard h3{font-size:1.15rem;margin-bottom:.5rem}
.bcard h3 a:hover{color:var(--navy-soft)}
.bcard p{color:var(--muted);font-size:.92rem;margin-bottom:1rem;flex:1}
.bcard__more{font-weight:700;color:var(--navy);font-family:var(--fh);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}
.bcard__more i{transition:var(--t)}
.bcard:hover .bcard__more i{transform:translateX(4px)}

/* ---------- Page hero (inner) ---------- */
.page-hero{background:
  radial-gradient(700px 360px at 85% -20%,rgba(242,169,0,.20),transparent 60%),
  linear-gradient(160deg,var(--navy),var(--navy-2));
  color:#fff;padding:64px 0 70px;position:relative;text-align:center}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3rem);margin-bottom:.6rem}
.page-hero p{color:#bcc8ea;max-width:600px;margin:0 auto;font-size:1.05rem}
.crumb{display:inline-flex;gap:.5rem;align-items:center;font-size:.85rem;color:#9fb0de;margin-bottom:1rem;justify-content:center}
.crumb a:hover{color:var(--gold-2)}
.crumb i{font-size:.7rem}

/* ---------- Product detail ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pd__gallery{position:sticky;top:96px}
.pd__main{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--cream);aspect-ratio:1/1}
.pd__main img{width:100%;height:100%;object-fit:cover}
.pd__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.pd__thumb{border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;aspect-ratio:1/1;background:var(--cream)}
.pd__thumb.is-active{border-color:var(--gold)}
.pd__thumb img{width:100%;height:100%;object-fit:cover}
.pd__cat{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.pd h1{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:.4rem 0 .6rem}
.pd__rate{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--muted);margin-bottom:1.2rem}
.pd__rate .star{color:var(--gold)}
.pd__price{display:flex;align-items:baseline;gap:.8rem;background:var(--cream);border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.3rem}
.pd__price .now{font-family:var(--fh);font-weight:800;font-size:2rem;color:var(--navy)}
.pd__price .was{text-decoration:line-through;color:#aa9}
.pd__price .save{margin-left:auto;background:#e63946;color:#fff;font-weight:700;font-size:.8rem;padding:.3rem .65rem;border-radius:8px}
.pd__desc{color:var(--muted);margin-bottom:1.4rem}
.pd__opt{margin-bottom:1.2rem}
.pd__opt h4{font-size:.92rem;margin-bottom:.6rem;color:var(--navy)}
.pd__opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{padding:.55rem .9rem;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:.88rem;cursor:pointer;transition:var(--t);background:#fff;color:var(--navy)}
.opt:hover{border-color:var(--gold)}
.opt.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pd__buy{display:flex;gap:.7rem;margin:1.6rem 0 1.4rem;flex-wrap:wrap}
.pd__buy .btn{flex:1;min-width:160px;justify-content:center}
.pd__feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.pd__feat h4{margin-bottom:.8rem;font-size:1rem}
.pd__feat li{display:flex;gap:.7rem;align-items:flex-start;padding:.4rem 0;font-size:.94rem;color:var(--ink)}
.pd__feat li i{color:var(--green);font-size:1.1rem;margin-top:2px}

/* ---------- About ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.story__media{position:relative}
.story__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.story__exp{position:absolute;bottom:-22px;right:-10px;background:var(--gold);color:#3a2a00;border-radius:18px;padding:1rem 1.3rem;box-shadow:var(--shadow);text-align:center}
.story__exp b{font-family:var(--fh);font-size:2rem;display:block;line-height:1}
.story__exp span{font-size:.82rem;font-weight:600}
.story p{color:var(--muted);margin-bottom:1rem}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{text-align:center;padding:30px 24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);transition:var(--t)}
.value:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.value__ico{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;background:linear-gradient(135deg,var(--navy),var(--navy-soft));color:var(--gold-2)}
.value h3{font-size:1.15rem;margin-bottom:.5rem}
.value p{color:var(--muted);font-size:.94rem}
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stats-band b{font-family:var(--fh);font-size:2.6rem;color:var(--gold-2);display:block;line-height:1}
.stats-band span{color:#bcc8ea;font-size:.92rem}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.contact__info{display:flex;flex-direction:column;gap:1rem}
.cinfo{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:var(--t)}
.cinfo:hover{box-shadow:var(--shadow-sm);transform:translateX(4px)}
.cinfo__ico{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:linear-gradient(135deg,rgba(242,169,0,.16),rgba(242,169,0,.05));color:var(--gold)}
.cinfo b{font-family:var(--fh);display:block;margin-bottom:.15rem}
.cinfo p{color:var(--muted);font-size:.92rem}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm)}
.form-card h3{margin-bottom:.4rem}
.form-card>p{color:var(--muted);margin-bottom:1.5rem;font-size:.95rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--navy)}
.field input,.field textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--ff);font-size:.95rem;transition:var(--t);background:var(--cream-2)
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(242,169,0,.12)}
.field textarea{resize:vertical;min-height:130px}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.3rem;font-size:.92rem;display:flex;gap:.6rem;align-items:flex-start}
.alert i{font-size:1.2rem;margin-top:1px}
.alert--ok{background:rgba(37,211,102,.12);color:#0f7a36;border:1px solid rgba(37,211,102,.3)}
.alert--err{background:rgba(230,57,70,.1);color:#c1121f;border:1px solid rgba(230,57,70,.25)}
.alert--err ul{margin:.3rem 0 0 1rem;list-style:disc}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:2.5rem;border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:340px;border:0;display:block}

/* ---------- Article ---------- */
.article{max-width:760px;margin:0 auto}
.article__hero{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:2rem;aspect-ratio:16/9}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__meta{display:flex;gap:1rem;align-items:center;color:var(--muted);font-size:.88rem;margin-bottom:1.5rem;flex-wrap:wrap}
.article__body p{margin-bottom:1.2rem;color:#384055;font-size:1.05rem}
.article__body p:first-of-type::first-letter{font-size:3.2rem;font-family:var(--fh);font-weight:800;color:var(--gold);float:left;line-height:.8;margin:.1rem .6rem 0 0}

/* ---------- Filter bar ---------- */
.filterbar{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.filterbar button{
  padding:.6rem 1.2rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--fh);font-weight:600;font-size:.9rem;color:var(--navy);cursor:pointer;transition:var(--t)
}
.filterbar button:hover{border-color:var(--gold)}
.filterbar button.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Floating WA & to-top ---------- */
.wa-float{
  position:fixed;bottom:26px;left:26px;z-index:70;background:var(--green);color:#fff;
  display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:999px;
  box-shadow:0 12px 30px rgba(37,211,102,.4);font-weight:600;font-family:var(--fh);font-size:.92rem;
  transition:var(--t)
}
.wa-float i{font-size:1.4rem}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}
.to-top{
  position:fixed;bottom:26px;right:26px;z-index:70;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--navy);color:#fff;font-size:1.1rem;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(14px);transition:var(--t);box-shadow:var(--shadow)
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--gold);color:#3a2a00}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--gold),var(--gold-2));position:relative;overflow:hidden}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:48px 0;position:relative;z-index:2}
.cta-band h2{color:#3a2a00;font-size:clamp(1.5rem,3vw,2.1rem)}
.cta-band p{color:#5a4500;font-weight:500;margin-top:.3rem}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#aebbe0;padding:64px 0 0}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;gap:38px;padding-bottom:48px}
.footer__col h4{color:#fff;font-size:1.05rem;margin-bottom:1.1rem}
.footer__col a{display:block;color:#aebbe0;padding:.32rem 0;font-size:.92rem;transition:var(--t)}
.footer__col a:hover{color:var(--gold-2);padding-left:5px}
.footer__col p{font-size:.9rem;margin-bottom:.7rem;display:flex;gap:.6rem;align-items:flex-start}
.footer__col p i{color:var(--gold-2);margin-top:3px}
.footer__tag{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin:.2rem 0 1rem}
.footer__desc{font-size:.92rem;line-height:1.7}
.footer__socials{display:flex;gap:.6rem;margin-top:1.2rem}
.footer__socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:1.1rem;transition:var(--t)}
.footer__socials a:hover{background:var(--gold);color:#3a2a00;padding:0;transform:translateY(-3px)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:.85rem;flex-wrap:wrap;gap:.6rem}
.footer__pay i{color:var(--green)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:32px;padding:48px 0 60px}
  .hero__media{max-width:520px;margin:0 auto}
  .features__grid,.products__grid,.testi__grid,.blog__grid,.values__grid{grid-template-columns:repeat(2,1fr)}
  .density__grid{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .guide,.pd,.story,.contact{grid-template-columns:1fr;gap:32px}
  .pd__gallery{position:static}
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .stats-band{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}
@media (max-width:760px){
  .hide-sm{display:none}
  /* Matikan backdrop-filter di mobile: properti ini membuat drawer (position:fixed)
     terjebak di dalam navbar sehingga tingginya hanya setinggi navbar. */
  .navbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream-2)}
  .navbar.is-scrolled{background:#fff}
  .navbar__inner{min-height:64px}
  .brand__logo{font-size:1.35rem}
  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(84%,330px);max-width:100%;
    background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:.3rem;padding:0 20px calc(24px + env(safe-area-inset-bottom,0px));
    box-shadow:-20px 0 50px rgba(0,0,0,.18);transform:translateX(100%);
    transition:transform .35s ease;z-index:65;overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  .nav.is-open{transform:translateX(0)}
  /* Header drawer: logo + tombol tutup */
  .nav__head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    min-height:64px;padding:14px 0 12px;margin-bottom:10px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:#fff;z-index:2
  }
  .nav__head .brand__logo{font-size:1.45rem}
  .nav__close{
    display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;cursor:pointer;
    background:var(--cream);color:var(--navy);border-radius:50%;font-size:1.15rem;transition:var(--t)
  }
  .nav__close:hover{background:var(--navy);color:#fff}
  .nav__link{padding:.9rem .8rem;border-radius:12px;font-size:1.02rem;border-bottom:1px solid var(--line)}
  .nav__link:last-of-type{border-bottom:0}
  .nav__link.is-active::after{display:none}
  .nav__link.is-active{background:var(--cream);color:var(--gold)}
  .nav__cta{margin:1rem 0 0;justify-content:center;padding:.95rem;font-size:1rem}
  .nav__toggle{display:flex;z-index:60}
  .nav-overlay{z-index:57}
  .navbar{z-index:62}
  .section{padding:56px 0}
  .cta-band__inner{flex-direction:column;text-align:center}
  .footer__bottom-inner{flex-direction:column;text-align:center}
  .wa-float span{display:none}
  .wa-float{width:54px;height:54px;padding:0;gap:0;justify-content:center;border-radius:50%;left:18px;bottom:18px}
  .wa-float i{font-size:1.6rem}
  .to-top{right:18px;bottom:80px}
}
@media (max-width:540px){
  .features__grid,.products__grid,.testi__grid,.blog__grid,.values__grid,.density__grid,.trust__grid,.footer__grid,.stats-band{grid-template-columns:1fr}
  .pd__thumbs{grid-template-columns:repeat(4,1fr)}
  .hero__float{display:none}
  .hero__stats{gap:1.3rem}
}

/* nav overlay */
.nav-overlay{position:fixed;inset:0;background:rgba(20,34,77,.45);opacity:0;visibility:hidden;transition:var(--t);z-index:54}
.nav-overlay.show{opacity:1;visibility:visible}