/* ============================================================
   HIGHLAND URBAN NUSANTARA — DESIGN TOKENS
   ============================================================ */
:root{
  /* Warna: tanah vulkanik, hutan dataran tinggi berkabut, kertas kraft kemasan kopi */
  --forest-950:#12241a;
  --forest-900:#17301f;
  --forest-800:#1f3d29;
  --forest-700:#2c4f36;
  --soil-700:#6b3421;
  --soil-600:#833f28;
  --soil-500:#9a4d30;
  --gold-500:#b8873b;
  --gold-400:#cf9f52;
  --parchment-50:#f8f4ea;
  --parchment-100:#f0e9d8;
  --parchment-200:#e5dac0;
  --char-900:#211c16;
  --char-700:#4a4238;
  --char-500:#786e5f;
  --mist-300:#c9d3c3;

  --font-display:'Fraunces', serif;
  --font-body:'Public Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1180px;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--char-900);
  background:var(--parchment-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px;}
.hun-container{max-width:var(--container); margin:0 auto; padding:0 1.5rem;}
@media (min-width:768px){ .hun-container{padding:0 2.5rem;} }
section[id]{ scroll-margin-top: 88px; }

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.55rem;
}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:0.5;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--font-body); font-weight:700; font-size:0.92rem;
  padding:0.95rem 1.7rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--soil-600); color:var(--parchment-50); box-shadow:0 6px 18px rgba(107,52,33,0.28); }
.btn-primary:hover{ background:var(--soil-700); box-shadow:0 8px 22px rgba(107,52,33,0.38); }
.btn-ghost-light{ background:transparent; border-color:rgba(248,244,234,0.4); color:var(--parchment-50); }
.btn-ghost-light:hover{ border-color:var(--parchment-50); background:rgba(248,244,234,0.08); }
.btn-ghost-dark{ background:transparent; border-color:rgba(33,28,22,0.25); color:var(--char-900); }
.btn-ghost-dark:hover{ border-color:var(--char-900); background:rgba(33,28,22,0.05); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:0.8rem; }

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:100;
  background:rgba(18,36,26,0.92);
  backdrop-filter:blur(10px);
  transition: box-shadow .25s ease;
}
header.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem 0; }
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--parchment-50); }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-word{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:0.01em; line-height:1.15; }
.brand-word small{ display:block; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.16em; font-weight:400; opacity:0.7; text-transform:uppercase; margin-top:0.15rem; }

.nav-links{ display:none; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0; }
.nav-links a{ color:var(--parchment-100); text-decoration:none; font-size:0.88rem; font-weight:500; opacity:0.85; transition:opacity .15s; position:relative; }
.nav-links a:hover{ opacity:1; }
@media (min-width:960px){ .nav-links{ display:flex; } }

.nav-right{ display:flex; align-items:center; gap:0.9rem; }
.cart-btn{
  position:relative; background:transparent; border:1px solid rgba(248,244,234,0.35); color:var(--parchment-50);
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.cart-btn:hover{ border-color:var(--parchment-50); background:rgba(248,244,234,0.08); }
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--gold-500); color:var(--char-900);
  font-family:var(--font-mono); font-size:0.62rem; font-weight:700; min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 2px;
}
.menu-toggle{ display:flex; background:none; border:none; color:var(--parchment-50); cursor:pointer; padding:0.4rem; }
@media (min-width:960px){ .menu-toggle{ display:none; } }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; background:var(--forest-950); z-index:200;
  display:flex; flex-direction:column; padding:1.5rem; transform:translateX(100%);
  transition:transform .3s ease; overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:3rem; }
.mobile-menu-close{ background:none; border:none; color:var(--parchment-50); cursor:pointer; padding:0.4rem; }
.mobile-menu ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.9rem; }
.mobile-menu a{ color:var(--parchment-50); text-decoration:none; font-family:var(--font-display); font-size:1.9rem; font-weight:500; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; background:var(--forest-950); color:var(--parchment-50);
  padding:2rem 0 6rem; overflow:hidden;
}
.hero-contours{ position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.55; pointer-events:none; }
.hero-contours svg{ width:100%; height:100%; }
.hero-inner{ position:relative; z-index:2; padding-top:7rem; display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:960px){ .hero-inner{ grid-template-columns:1.15fr 1fr; gap:2rem; } }
.hero-copy{ min-width:0; }
.hero-visual{ display:flex; justify-content:center; align-items:center; }
.hero-visual img{
  width:100%; max-width:560px; height:auto;
  filter:drop-shadow(0 25px 45px rgba(0,0,0,0.5));
}
@media (max-width:959px){ .hero-visual{ order:-1; max-width:340px; margin:0 auto; } .hero-visual img{ max-width:340px; } }
.hero-stamp{ color:var(--gold-400); margin-bottom:1.75rem; }
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.04; max-width:15ch; font-weight:600;
  color:var(--parchment-50);
}
.hero h1 em{ font-style:italic; font-weight:400; color:var(--gold-400); }
.hero-sub{
  margin-top:1.6rem; max-width:46ch; font-size:1.08rem; color:var(--mist-300); line-height:1.65;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
.hero-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2rem; margin-top:4.5rem;
  padding-top:2rem; border-top:1px solid rgba(248,244,234,0.14); max-width:640px;
}
@media (min-width:640px){ .hero-stats{ grid-template-columns:repeat(4,1fr); } }
.hero-stat-num{ font-family:var(--font-mono); font-size:1.05rem; font-weight:700; color:var(--parchment-50); }
.hero-stat-label{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--mist-300); opacity:0.75; margin-top:0.3rem; }

/* ============================================================
   SIGNATURE: PERJALANAN KETINGGIAN (journey / contour line)
   ============================================================ */
.journey{ background:var(--forest-900); color:var(--parchment-50); padding:6rem 0 7rem; position:relative; }
.journey-head{ max-width:640px; margin-bottom:4rem; }
.journey-head .eyebrow{ color:var(--gold-400); margin-bottom:1.1rem; }
.journey-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--parchment-50); }
.journey-head p{ margin-top:1.1rem; color:var(--mist-300); font-size:1rem; max-width:52ch; }

.journey-path-wrap{ position:relative; }
.journey-line-svg{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
.journey-line-svg path{
  fill:none; stroke:var(--gold-500); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1 1; stroke-dashoffset:1; vector-effect:non-scaling-stroke;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}
.journey-line-svg path.drawn{ stroke-dashoffset:0; }

.journey-stages{
  display:grid; grid-template-columns:1fr; gap:2.25rem; position:relative; z-index:2;
}
@media (min-width:900px){ .journey-stages{ grid-template-columns:repeat(5,1fr); gap:1.25rem; } }
.stage{
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.stage.in{ opacity:1; transform:translateY(0); }
.stage-num{ font-family:var(--font-mono); font-size:0.72rem; color:var(--gold-400); letter-spacing:0.08em; }
.stage-dot{
  width:11px; height:11px; border-radius:50%; background:var(--gold-500); margin:0.85rem 0 1.1rem;
  box-shadow:0 0 0 5px rgba(184,135,59,0.16);
}
.stage h3{ font-size:1.08rem; color:var(--parchment-50); font-weight:600; margin-bottom:0.5rem; }
.stage p{ font-size:0.86rem; color:var(--mist-300); margin:0; line-height:1.6; }

/* ============================================================
   PRODUK / VARIAN
   ============================================================ */
.section{ padding:6rem 0; }
.section-light{ background:var(--parchment-50); }
.section-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:640px; margin-bottom:3.25rem; }
.section-head .eyebrow{ color:var(--soil-600); }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--char-900); }
.section-head p{ color:var(--char-700); font-size:1rem; max-width:54ch; margin:0; }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

.product-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; }
@media (min-width:680px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }

.product-card{
  background:#fff; border:1px solid var(--parchment-200); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(33,28,22,0.1); }
.product-visual{
  position:relative; aspect-ratio:4/3.1; display:flex; align-items:flex-end; padding:1.25rem;
  background: radial-gradient(circle at 30% 20%, var(--pv-a,#2c4f36), var(--pv-b,#12241a));
}
.product-visual .bag{
  width:78%; margin:0 auto 0; position:relative; z-index:2;
}
.product-tag{
  position:absolute; top:1rem; left:1rem; background:rgba(248,244,234,0.92); color:var(--char-900);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.3rem 0.6rem; border-radius:20px; z-index:3; font-weight:700;
}
.product-body{ padding:1.5rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:0.85rem; flex:1; }
.product-name{ font-family:var(--font-display); font-size:1.22rem; font-weight:600; }
.product-process{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--soil-600); }
.product-notes{ font-size:0.87rem; color:var(--char-700); line-height:1.55; margin:0; }
.product-meta{ display:flex; gap:1rem; font-family:var(--font-mono); font-size:0.7rem; color:var(--char-500); padding:0.7rem 0; border-top:1px dashed var(--parchment-200); border-bottom:1px dashed var(--parchment-200); }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:0.2rem; }
.product-price{ font-family:var(--font-mono); font-weight:700; font-size:1.02rem; }
.product-price small{ display:block; font-weight:400; font-size:0.63rem; color:var(--char-500); text-transform:uppercase; letter-spacing:0.04em; }
.add-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--char-900); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s ease; flex-shrink:0;
}
.add-btn:hover{ background:var(--char-900); color:var(--parchment-50); transform:rotate(90deg); }
.add-btn.added{ background:var(--soil-600); border-color:var(--soil-600); color:#fff; transform:none; }

/* ============================================================
   ORIGIN / WHY ORGANIC
   ============================================================ */
.origin{ background:var(--parchment-100); }
.origin-grid{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media (min-width:900px){ .origin-grid{ grid-template-columns:1fr 0.9fr; gap:4.5rem; } }
.origin-copy .eyebrow{ color:var(--soil-600); margin-bottom:1.1rem; }
.origin-copy h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:1.3rem; }
.origin-copy p{ color:var(--char-700); font-size:1rem; margin:0 0 1.1rem; max-width:52ch; }
.origin-copy p:last-of-type{ margin-bottom:0; }

.badge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.badge-card{
  background:#fff; border:1px solid var(--parchment-200); border-radius:var(--radius);
  padding:1.3rem 1.15rem; display:flex; flex-direction:column; gap:0.7rem;
}
.badge-icon{ width:30px; height:30px; color:var(--soil-600); }
.badge-card h4{ font-family:var(--font-body); font-weight:700; font-size:0.86rem; color:var(--char-900); }
.badge-card p{ margin:0; font-size:0.76rem; color:var(--char-500); line-height:1.5; }

/* ============================================================
   CARA SEDUH
   ============================================================ */
.brew-tabs{ display:flex; gap:0.6rem; margin-bottom:2.25rem; flex-wrap:wrap; }
.brew-tab{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.03em; text-transform:uppercase;
  padding:0.6rem 1.1rem; border-radius:20px; border:1px solid var(--parchment-200); background:transparent;
  color:var(--char-700); cursor:pointer; transition:all .15s;
}
.brew-tab.active{ background:var(--char-900); border-color:var(--char-900); color:var(--parchment-50); }
.brew-panels{ position:relative; }
.brew-panel{ display:none; grid-template-columns:1fr; gap:2.5rem; }
.brew-panel.active{ display:grid; }
@media (min-width:800px){ .brew-panel{ grid-template-columns:0.85fr 1fr; align-items:start; } }
.brew-visual{
  aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(160deg,var(--forest-800),var(--forest-950));
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.brew-visual svg{ width:52%; opacity:0.92; }
.brew-steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.brew-steps li{
  counter-increment:step; position:relative; padding-left:3rem; padding-bottom:1.6rem; margin-bottom:0;
  border-left:1px solid var(--parchment-200); margin-left:0.95rem;
}
.brew-steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.brew-steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:-0.95rem; top:0; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.68rem; font-weight:700; color:var(--soil-600);
  background:var(--parchment-50); border:1px solid var(--soil-600); width:1.9rem; height:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.brew-steps h4{ font-family:var(--font-body); font-weight:700; font-size:0.95rem; margin:0 0 0.35rem; }
.brew-steps p{ margin:0; font-size:0.86rem; color:var(--char-700); }

/* ============================================================
   TESTIMONI
   ============================================================ */
.testi-strip{ background:var(--forest-950); color:var(--parchment-50); }
.testi-strip .section-head .eyebrow{ color:var(--gold-400); }
.testi-strip .section-head h2{ color:var(--parchment-50); }
.testi-strip .section-head p{ color:var(--mist-300); }
.testi-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:800px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
.testi-card{
  background:var(--forest-900); border:1px solid rgba(248,244,234,0.1); border-radius:var(--radius);
  padding:1.75rem; display:flex; flex-direction:column; gap:1.15rem;
}
.testi-quote{ font-family:var(--font-display); font-style:italic; font-size:1.08rem; line-height:1.55; color:var(--parchment-100); margin:0; }
.testi-who{ display:flex; align-items:center; gap:0.75rem; margin-top:auto; }
.testi-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--gold-500); color:var(--char-900);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:0.8rem; flex-shrink:0;
}
.testi-name{ font-size:0.84rem; font-weight:700; color:var(--parchment-50); }
.testi-role{ font-size:0.74rem; color:var(--mist-300); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--parchment-200); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:1.4rem 0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-body);
  font-weight:700; font-size:1rem; color:var(--char-900);
}
.faq-q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--char-900); transition:transform .25s ease; }
.faq-q .plus::before{ width:100%; height:1.5px; top:50%; left:0; transform:translateY(-50%); }
.faq-q .plus::after{ width:1.5px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.faq-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ margin:0 0 1.4rem; font-size:0.9rem; color:var(--char-700); max-width:60ch; line-height:1.6; }

/* ============================================================
   NEWSLETTER / CTA
   ============================================================ */
.cta-band{ background:var(--soil-700); color:var(--parchment-50); padding:5rem 0; position:relative; overflow:hidden; }
.cta-inner{ position:relative; z-index:2; display:flex; flex-direction:column; gap:2rem; align-items:flex-start; }
@media (min-width:900px){ .cta-inner{ flex-direction:row; align-items:center; justify-content:space-between; } }
.cta-inner h2{ font-size:clamp(1.8rem,3.2vw,2.3rem); color:var(--parchment-50); max-width:16ch; }
.cta-form{ display:flex; gap:0.7rem; flex-wrap:wrap; width:100%; max-width:440px; }
.cta-form input{
  flex:1; min-width:180px; padding:0.9rem 1.1rem; border-radius:var(--radius); border:1px solid rgba(248,244,234,0.4);
  background:rgba(248,244,234,0.08); color:var(--parchment-50); font-family:var(--font-body); font-size:0.9rem;
}
.cta-form input::placeholder{ color:rgba(248,244,234,0.55); }
.cta-note{ font-size:0.76rem; color:rgba(248,244,234,0.7); margin-top:0.7rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--forest-950); color:var(--mist-300); padding:4.5rem 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1fr; gap:2.75rem; padding-bottom:3rem; border-bottom:1px solid rgba(248,244,234,0.1); }
@media (min-width:800px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-brand .brand{ margin-bottom:1rem; }
.footer-brand p{ font-size:0.85rem; max-width:32ch; color:var(--mist-300); line-height:1.6; }
.footer-col h5{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-400); margin:0 0 1.1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a{ color:var(--mist-300); text-decoration:none; font-size:0.86rem; opacity:0.85; }
.footer-col a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ display:flex; flex-direction:column; gap:1rem; padding-top:1.75rem; font-size:0.76rem; color:rgba(201,211,195,0.6); }
@media (min-width:700px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-socials{ display:flex; gap:0.85rem; }
.footer-socials a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(248,244,234,0.18); display:flex; align-items:center; justify-content:center; color:var(--mist-300); text-decoration:none; transition:all .15s; }
.footer-socials a:hover{ border-color:var(--gold-400); color:var(--gold-400); }

/* reveal-on-scroll generic */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   OVERLAY (dipakai bareng drawer & modal)
   ============================================================ */
.overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(18,17,14,0.5); z-index:290;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:100%; max-width:420px; z-index:300;
  background:var(--parchment-50); box-shadow:-12px 0 32px rgba(0,0,0,0.18);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{ transform:translateX(0); }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.5rem; border-bottom:1px solid var(--parchment-200); flex-shrink:0;
}
.drawer-head h3{ font-size:1.2rem; }
.drawer-close{ background:none; border:none; cursor:pointer; color:var(--char-900); padding:0.3rem; display:flex; }
.modal-back{ background:none; border:none; cursor:pointer; color:var(--char-900); padding:0.3rem; display:none; }

.drawer-body{ flex:1; overflow-y:auto; padding:0.5rem 1.5rem; }
.cart-item{ display:flex; gap:0.9rem; padding:1.15rem 0; border-bottom:1px dashed var(--parchment-200); }
.cart-item-visual{
  width:52px; height:52px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.6rem; color:#fff; text-align:center; line-height:1.2;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-weight:700; font-size:0.88rem; margin-bottom:0.15rem; }
.cart-item-unit{ font-size:0.72rem; color:var(--char-500); font-family:var(--font-mono); }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:0.6rem; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--parchment-200); border-radius:20px; }
.qty-stepper button{
  width:26px; height:26px; border:none; background:none; cursor:pointer; font-size:0.95rem; color:var(--char-900);
  display:flex; align-items:center; justify-content:center;
}
.qty-stepper button:hover{ color:var(--soil-600); }
.qty-stepper span{ min-width:22px; text-align:center; font-family:var(--font-mono); font-size:0.8rem; font-weight:600; }
.cart-item-price{ font-family:var(--font-mono); font-size:0.85rem; font-weight:700; }
.cart-item-remove{ background:none; border:none; cursor:pointer; color:var(--char-500); font-size:0.72rem; text-decoration:underline; padding:0; margin-top:0.4rem; }
.cart-item-remove:hover{ color:var(--soil-600); }

.drawer-empty{
  display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:0.9rem; padding:2rem; color:var(--char-500);
}
.drawer-empty p{ margin:0; font-size:0.9rem; }
.drawer-foot{ padding:1.3rem 1.5rem 1.6rem; border-top:1px solid var(--parchment-200); flex-shrink:0; }
.drawer-row{ display:flex; align-items:center; justify-content:space-between; font-size:0.95rem; font-weight:700; }
.drawer-row span:last-child{ font-family:var(--font-mono); }
.drawer-note{ font-size:0.72rem; color:var(--char-500); margin-top:0.5rem; line-height:1.5; }

/* Empty-state toggling via JS adding .is-empty on drawer */
.cart-drawer.is-empty .drawer-body{ display:none; }
.cart-drawer.is-empty .drawer-empty{ display:flex; }
.cart-drawer.is-empty .drawer-foot{ display:none; }

/* ============================================================
   CHECKOUT MODAL
   ============================================================ */
.modal-wrap{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:310; display:flex; align-items:center; justify-content:center;
  padding:1.25rem; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-wrap.open{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--parchment-50); width:100%; max-width:520px; max-height:88vh; border-radius:6px;
  display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(0,0,0,0.35);
  transform:translateY(14px) scale(0.98); transition:transform .25s ease; position:relative; overflow:hidden;
}
.modal-wrap.open .modal-card{ transform:translateY(0) scale(1); }
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:1.3rem 1.5rem; border-bottom:1px solid var(--parchment-200); flex-shrink:0;
}
.modal-head h3{ font-size:1.15rem; flex:1; }
.modal-body{ flex:1; overflow-y:auto; padding:1.3rem 1.5rem; }
.checkout-summary{
  background:#fff; border:1px solid var(--parchment-200); border-radius:6px; padding:0.9rem 1.05rem;
  margin-bottom:1.4rem; display:flex; flex-direction:column; gap:0.5rem;
}
.checkout-summary-row{ display:flex; justify-content:space-between; font-size:0.82rem; }
.checkout-summary-row .csr-name{ color:var(--char-700); }
.checkout-summary-row .csr-price{ font-family:var(--font-mono); color:var(--char-900); font-weight:600; }

.checkout-form{ display:flex; flex-direction:column; gap:1.05rem; }
.field-group{ display:flex; flex-direction:column; gap:0.4rem; }
.field-group label{ font-size:0.76rem; font-weight:700; color:var(--char-700); }
.field-group input, .field-group textarea, .field-group select{
  border:1px solid var(--parchment-200); border-radius:6px; padding:0.7rem 0.85rem;
  font-family:var(--font-body); font-size:0.9rem; background:#fff; color:var(--char-900); resize:vertical;
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus{ border-color:var(--soil-500); }
.field-group.invalid input, .field-group.invalid textarea{ border-color:#c0392b; background:#fdf2f0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } .cart-drawer{ max-width:100%; } }

.modal-foot{ padding:1.2rem 1.5rem 1.5rem; border-top:1px solid var(--parchment-200); flex-shrink:0; }
.modal-note{ font-size:0.72rem; color:var(--char-500); margin-top:0.65rem; text-align:center; line-height:1.5; }

.modal-success{
  display:none; flex-direction:column; align-items:center; text-align:center; gap:0.9rem;
  padding:3rem 2rem; flex:1;
}
.modal-success h3{ font-size:1.3rem; }
.modal-success p{ font-size:0.87rem; color:var(--char-700); max-width:34ch; margin:0; }
.modal-wrap.success .modal-body,
.modal-wrap.success .modal-foot,
.modal-wrap.success .modal-back{ display:none; }
.modal-wrap.success .modal-success{ display:flex; }

body.no-scroll{ overflow:hidden; }

/* ============================================================
   TAMBAHAN — halaman produk/keranjang/checkout/lacak (bukan drawer/modal)
   Dipakai supaya SATU sistem desain konsisten di semua halaman publik.
   ============================================================ */
.page-head{ padding:3.5rem 0 2rem; }
.page-head h1{ font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--char-900); }
.page-head p{ color:var(--char-700); margin-top:0.5rem; font-size:0.92rem; }
.back-link{ font-size:0.85rem; color:var(--soil-600); text-decoration:none; display:inline-block; margin-bottom:1rem; }
.back-link:hover{ text-decoration:underline; }
.content-box{ background:#fff; border:1px solid var(--parchment-200); border-radius:var(--radius); padding:1.75rem; }
.content-box + .content-box{ margin-top:1.25rem; }
.status-pill{ display:inline-block; font-size:0.68rem; font-weight:700; padding:0.35rem 0.85rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; }
.status-pending{ background:#fdf3e0; color:#92620d; }
.status-paid{ background:#e3f0ff; color:#1c5aa8; }
.status-processing{ background:#eee6ff; color:#5b3aa8; }
.status-shipped{ background:#f3e6ff; color:#7a2fa8; }
.status-completed{ background:#e2f6ea; color:#1f7a44; }
.status-cancelled{ background:#fde8e4; color:#a8331c; }
.empty-state{ text-align:center; padding:4.5rem 1rem; color:var(--char-500); }
.empty-state p{ margin-bottom:1.25rem; font-size:0.92rem; }
.order-item-row{ display:flex; justify-content:space-between; gap:1rem; padding:0.8rem 0; border-bottom:1px dashed var(--parchment-200); font-size:0.88rem; }
.order-item-row:last-child{ border-bottom:none; }
.totals-row{ display:flex; justify-content:space-between; padding:0.35rem 0; font-size:0.9rem; color:var(--char-700); }
.totals-row.grand{ font-weight:700; color:var(--char-900); border-top:1px dashed var(--parchment-200); margin-top:0.5rem; padding-top:0.8rem; font-size:1rem; }
.two-col{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:860px){ .two-col{ grid-template-columns:1fr 380px; align-items:start; } }
.two-col .content-box{ position:sticky; top:6.5rem; }
.detail-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:800px){ .detail-grid{ grid-template-columns:1fr 1fr; } }
.detail-visual{ aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.detail-meta-row{ display:flex; gap:1.5rem; font-family:var(--font-mono); font-size:0.85rem; color:var(--char-500); padding:1rem 0; border-top:1px dashed var(--parchment-200); border-bottom:1px dashed var(--parchment-200); margin:1.25rem 0; }
.qty-input{ width:70px; border:1px solid var(--parchment-200); border-radius:6px; padding:0.65rem; font-family:var(--font-body); font-size:0.9rem; text-align:center; }

/* ============================================================
   ANIMASI HERO — entrance bertahap, garis kontur bergerak, angka statistik
   ============================================================ */
.hero-contours svg{
  animation: heroLinesDrift 22s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heroLinesDrift{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-16px,-10px) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-contours svg{ animation: none; }
}

/* Stagger delay untuk elemen .reveal di hero (dipakai bareng kelas .reveal yang sudah ada) */
.reveal.d1{ transition-delay: .05s; }
.reveal.d2{ transition-delay: .15s; }
.reveal.d3{ transition-delay: .28s; }
.reveal.d4{ transition-delay: .40s; }
.reveal.d5{ transition-delay: .52s; }

/* Tombol hero: sedikit "hidup" saat hover, bukan cuma ganti warna */
.hero-cta .btn{ transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hero-cta .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.hero-cta .btn:active{ transform: translateY(0); }

.hero-stat-num{ display:inline-block; }

/* ============================================================
   HERO VIDEO BACKGROUND + ANIMASI AMBIENT (uap kopi & biji melayang)
   ============================================================ */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:0;
  transition:opacity 1.2s ease;
}
.hero-video.is-ready{ opacity:0.75; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,36,26,0.55) 0%, rgba(18,36,26,0.75) 55%, rgba(18,36,26,0.92) 100%);
}
.hero-contours{ z-index:1; }

.hero-ambient{
  position:absolute; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
  transition: transform .3s ease-out;
}
@media (max-width:900px){ .hero-ambient{ opacity:0.6; } }

/* Dua "cangkir" sumber uap, posisi berbeda supaya lebih ramai & tidak simetris kaku */
.coffee-cup-wrap{ position:absolute; width:200px; height:280px; opacity:0.55; }
.coffee-cup-wrap.cup-a{ right:6%; bottom:6%; }
.coffee-cup-wrap.cup-b{ right:32%; bottom:2%; width:150px; height:220px; opacity:0.4; }
@media (max-width:1100px){ .coffee-cup-wrap.cup-b{ display:none; } }

.steam-svg{ position:absolute; inset:0; width:100%; height:100%; }
.cup-svg{ position:absolute; left:50%; bottom:0; width:70%; transform:translateX(-50%); }

.steam-path{
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: steamRise 6.5s ease-in-out infinite;
  opacity:0;
}
.steam-path.s1{ animation-delay: 0s; }
.steam-path.s2{ animation-delay: 1.4s; }
.steam-path.s3{ animation-delay: 2.8s; }
.steam-path.s4{ animation-delay: 4.2s; }
@keyframes steamRise{
  0%   { stroke-dashoffset:220; opacity:0; }
  15%  { opacity:0.55; }
  55%  { stroke-dashoffset:0; opacity:0.4; }
  85%  { opacity:0; }
  100% { stroke-dashoffset:0; opacity:0; }
}

/* Biji kopi melayang, tersebar lebih luas di seluruh hero */
.bean{
  position:absolute; font-size:1.4rem; opacity:0.3; filter:saturate(0.7) brightness(1.3);
  animation: beanFloat 11s ease-in-out infinite;
}
.bean-1{ left:58%; top:22%; animation-delay:0s; }
.bean-2{ left:78%; top:15%; animation-delay:2.2s; font-size:1.1rem; }
.bean-3{ left:88%; top:45%; animation-delay:4.4s; font-size:1.6rem; }
.bean-4{ left:66%; top:65%; animation-delay:6.6s; font-size:1.2rem; }
.bean-5{ left:48%; top:8%; animation-delay:8.8s; font-size:1rem; }
@keyframes beanFloat{
  0%   { transform: translateY(0) rotate(0deg); opacity:0.12; }
  50%  { transform: translateY(-36px) rotate(180deg); opacity:0.38; }
  100% { transform: translateY(0) rotate(360deg); opacity:0.12; }
}

/* Titik-titik aroma kecil, kelap-kelip halus, mengisi ruang kosong */
.dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--gold-400); opacity:0;
  animation: dotTwinkle 4.5s ease-in-out infinite;
}
.dot-1{ left:35%; top:30%; animation-delay:0s; }
.dot-2{ left:52%; top:50%; animation-delay:.8s; }
.dot-3{ left:75%; top:28%; animation-delay:1.6s; }
.dot-4{ left:62%; top:75%; animation-delay:2.4s; }
.dot-5{ left:85%; top:62%; animation-delay:3.2s; }
.dot-6{ left:42%; top:68%; animation-delay:4s; }
@keyframes dotTwinkle{
  0%, 100% { opacity:0; transform:scale(0.6); }
  50% { opacity:0.65; transform:scale(1.3); }
}

/* Partikel semburan saat hero diklik (dibuat dinamis lewat JS) */
.click-particle{
  position:absolute; pointer-events:none; z-index:3;
  font-size:1rem; color:var(--gold-400);
  animation: clickBurst .9s ease-out forwards;
}
@keyframes clickBurst{
  0%   { transform: translate(0,0) scale(0.6); opacity:1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .steam-path, .bean, .dot{ animation:none; opacity:0.12; }
  .hero-ambient{ transition:none; }
}


/* ============================================================
   CEK ONGKIR OTOMATIS — dropdown pencarian tujuan & pilihan kurir
   ============================================================ */
.city-suggestion-list{
  position:absolute; top:2px; left:0; right:0; z-index:50;
  background:#fff; border:1px solid var(--parchment-200); border-radius:8px;
  box-shadow:0 10px 24px rgba(18,36,26,0.14); max-height:220px; overflow-y:auto;
}
.city-suggestion-item{
  padding:0.65rem 0.85rem; font-size:0.85rem; cursor:pointer; border-bottom:1px solid var(--parchment-100);
}
.city-suggestion-item:last-child{ border-bottom:none; }
.city-suggestion-item:hover, .city-suggestion-item.active{ background:var(--parchment-50); }
.city-suggestion-item small{ display:block; color:var(--char-500); font-size:0.72rem; margin-top:0.1rem; }

.shipping-option{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  border:1px solid var(--parchment-200); border-radius:8px; padding:0.7rem 0.9rem;
  cursor:pointer; font-size:0.85rem; transition:border-color .15s ease, background .15s ease;
}
.shipping-option:hover{ background:var(--parchment-50); }
.shipping-option.selected{ border-color:var(--soil-500); background:#fdf7ee; }
.shipping-option input[type="radio"]{ width:auto; margin-right:0.6rem; }
.shipping-option .so-name{ font-weight:700; color:var(--char-900); }
.shipping-option .so-etd{ font-size:0.76rem; color:var(--char-500); }
.shipping-option .so-price{ font-family:var(--font-mono); font-weight:700; white-space:nowrap; }