/* ==========================================================================
   AzizCutOff — Barbershop Jakarta Pusat
   Stylesheet tunggal. Edit warna di :root, sisanya ikut berubah.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:        #0b0b0d;
  --ink-2:      #101014;
  --panel:      #141418;
  --panel-2:    #1a1a21;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  --text:       #f3eee5;
  --muted:      #a7a199;
  --muted-2:    #7d776f;

  --gold:       #e0b061;
  --gold-2:     #c9923f;
  --gold-soft:  rgba(224,176,97,.13);
  --gold-line:  rgba(224,176,97,.32);

  --green:      #4ade80;
  --red:        #f87171;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --wrap: 1180px;
  --pad:  clamp(18px, 4vw, 32px);

  --f-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --f-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 0 24px 60px -24px rgba(0,0,0,.75);
  --ease: cubic-bezier(.22,.68,0,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(224,176,97,.10), transparent 62%),
    radial-gradient(700px 500px at 0% 30%, rgba(224,176,97,.05), transparent 65%),
    var(--ink);
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
strong{ font-weight:700; color:var(--text); }
::selection{ background:var(--gold); color:#0b0b0d; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:1.15em; height:1.15em; flex:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#0b0b0d; padding:10px 16px; border-radius:0 0 8px 0; font-weight:700;
}
.skip:focus{ left:0; }
.nw{ white-space:nowrap; }

/* ---------- 3. TYPOGRAPHY HELPERS ---------- */
h1,h2,h3,.price,.fact__num,.step__num,.card__num,.why__tag-num{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:.015em;
  line-height:.94;
  text-transform:uppercase;
}
h1{ font-size:clamp(3.1rem, 7.2vw, 5.9rem); }
h2{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); margin-top:.28em; }
h3{ font-size:clamp(1.25rem, 1.9vw, 1.5rem); letter-spacing:.02em; line-height:1.08; }

.grad{
  background:linear-gradient(100deg,#f7e3b6 4%,var(--gold) 46%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lead{
  color:var(--muted);
  font-size:clamp(.98rem, 1.15vw, 1.075rem);
  line-height:1.75;
  max-width:56ch;
  margin-top:1.15em;
}
.lead strong{ color:var(--text); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:.71rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow__line{ display:block; width:26px; height:1px; background:var(--gold-line); }
.eyebrow--dark{ color:#3a2a0e; }
.eyebrow--dark .eyebrow__line{ background:rgba(0,0,0,.35); }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.86em 1.5em;
  border-radius:999px;
  font-size:.94rem; font-weight:700; letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn .ic{ width:1.15em; height:1.15em; }
.btn--lg{ padding:1.02em 1.75em; font-size:1rem; }
.btn--sm{ padding:.6em 1.1em; font-size:.82rem; }

.btn--gold{
  background:linear-gradient(150deg,#f0cd8c,var(--gold) 45%,var(--gold-2));
  color:#161006;
  box-shadow:0 12px 30px -14px rgba(224,176,97,.65);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(224,176,97,.8); }

.btn--ghost{
  border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02);
}
.btn--ghost:hover{ border-color:var(--gold-line); background:var(--gold-soft); transform:translateY(-2px); }

.btn--dark{ background:#0e0e11; color:var(--text); }
.btn--dark:hover{ transform:translateY(-2px); background:#000; box-shadow:0 16px 30px -18px rgba(0,0,0,.8); }

.btn--outline-dark{ border-color:rgba(0,0,0,.4); color:#1a1206; }
.btn--outline-dark:hover{ background:rgba(0,0,0,.08); transform:translateY(-2px); }

/* ---------- 5. HEADER ---------- */
.site-head{ position:sticky; top:0; z-index:100; }

.topbar{
  background:#08080a;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.76rem; color:var(--muted);
  max-height:44px; overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s;
}
.site-head.is-stuck .topbar{ max-height:0; opacity:0; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px; }
.topbar__status{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar__links{ display:flex; align-items:center; gap:22px; }
.topbar__links a{ display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.topbar__links a:hover{ color:var(--gold); }
.topbar__links .ic{ width:14px; height:14px; color:var(--gold); }

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.15);
}
.dot.is-closed{ background:var(--red); box-shadow:0 0 0 3px rgba(248,113,113,.15); }

.nav{
  background:rgba(11,11,13,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--gold-line);
  background:linear-gradient(160deg, rgba(224,176,97,.22), rgba(224,176,97,.04));
  color:var(--gold);
  transition:transform .3s var(--ease), border-color .3s;
}
.brand__mark .ic{ width:22px; height:22px; }
.brand:hover .brand__mark{ transform:rotate(-8deg); border-color:var(--gold); }
.brand__text{
  font-family:var(--f-display); font-size:1.42rem; letter-spacing:.05em;
  line-height:.9; text-transform:uppercase; display:block;
}
.brand__text em{ font-style:normal; color:var(--gold); }
.brand__text small{
  display:block; font-family:var(--f-body); font-size:.55rem; font-weight:600;
  letter-spacing:.17em; color:var(--muted-2); margin-top:6px; text-transform:uppercase;
}

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links > a:not(.btn){
  position:relative; font-size:.9rem; font-weight:500; color:var(--muted);
  padding:6px 0; transition:color .2s;
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav__links > a:not(.btn):hover{ color:var(--text); }
.nav__links > a:not(.btn):hover::after{ width:100%; }

.nav__toggle{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line-2); place-items:center; color:var(--text);
}
.nav__toggle .ic{ width:22px; height:22px; }
.nav__toggle .ic--close{ display:none; }
.nav__toggle[aria-expanded="true"] .ic--open{ display:none; }
.nav__toggle[aria-expanded="true"] .ic--close{ display:block; }

/* ---------- 6. HERO ---------- */
.hero{ position:relative; padding:clamp(44px,6vw,80px) 0 0; overflow:hidden; }
.hero__glow{
  position:absolute; z-index:-1; top:-160px; right:-120px;
  width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,176,97,.16), transparent 62%);
  filter:blur(20px);
}
.hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__title{ margin-top:.34em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2em; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,46px);
  margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--line);
}
.hero__facts li{ display:flex; flex-direction:column; gap:2px; }
.fact__num{ font-size:2.05rem; color:var(--text); letter-spacing:.03em; }
.fact__lbl{ font-size:.72rem; color:var(--muted-2); letter-spacing:.12em; text-transform:uppercase; font-weight:600; }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-lg);
  filter:contrast(1.03) saturate(.95);
}
.hero__frame{
  position:absolute; inset:0; translate:16px 16px;
  border:1px solid var(--gold-line); border-radius:var(--r-lg);
  z-index:-1;
}
.hero__chip{
  position:absolute; display:flex; align-items:center; gap:9px;
  border-radius:999px; padding:9px 15px; font-size:.78rem; font-weight:600;
}
.hero__chip--open{
  top:16px; left:16px;
  background:rgba(10,10,12,.72); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero__chip--price{
  right:18px; bottom:18px;
  flex-direction:column; align-items:flex-start; gap:1px;
  border-radius:14px; padding:14px 18px;
  background:linear-gradient(150deg,#f3d494,var(--gold) 55%,var(--gold-2));
  color:#191106;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
}
.chip__label{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; opacity:.62; }
.chip__value{ font-family:var(--f-display); font-size:1.6rem; line-height:1; letter-spacing:.03em; }
.chip__sub{ font-size:.7rem; font-weight:600; opacity:.72; }

.hero__notes{
  display:flex; flex-wrap:wrap; gap:12px 30px;
  margin-top:clamp(34px,5vw,60px); padding:18px 0;
  border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted);
}
.hero__notes p{ display:flex; align-items:center; gap:8px; }
.hero__notes .ic{ color:var(--gold); width:14px; height:14px; }

/* ---------- 7. MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--gold-line);
  background:linear-gradient(90deg, rgba(224,176,97,.06), rgba(224,176,97,.13), rgba(224,176,97,.06));
  overflow:hidden; padding:12px 0;
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 36s linear infinite;
}
.marquee span{
  font-family:var(--f-display); font-size:1.32rem; letter-spacing:.14em;
  color:rgba(243,238,229,.9); text-transform:uppercase; padding-left:26px;
}
.marquee i{ font-style:normal; color:var(--gold); font-size:.9rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 8. SECTIONS ---------- */
.section{ padding:clamp(64px,8vw,104px) 0; }
.section--alt{ background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)); border-block:1px solid rgba(255,255,255,.05); }
.sec-head{ max-width:760px; }
.sec-head__lead{ margin-top:1em; }
.sec-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; max-width:none; }
.sec-head--split > div{ max-width:640px; }
.sec-head__side{ max-width:34ch; font-size:.86rem; color:var(--muted-2); line-height:1.7; }

/* ---------- 9. SERVICE CARDS ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; margin-top:clamp(30px,4vw,46px);
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(170deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px 22px;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(360px 160px at 90% -10%, rgba(224,176,97,.14), transparent 70%);
  opacity:0; transition:opacity .35s;
}
.card:hover{ transform:translateY(-5px); border-color:var(--gold-line); box-shadow:var(--shadow); }
.card:hover::after{ opacity:1; }

.card__num{
  position:absolute; top:14px; right:20px;
  font-size:2.6rem; color:rgba(255,255,255,.055); letter-spacing:.04em;
  transition:color .35s;
}
.card:hover .card__num{ color:rgba(224,176,97,.28); }
.card h3{ margin-top:4px; padding-right:40px; }
.card > p:not(.meta){ margin-top:.7em; font-size:.875rem; line-height:1.7; color:var(--muted); }
.meta{
  display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:1.2em;
  font-size:.74rem; color:var(--muted-2); letter-spacing:.04em;
}
.meta .ic{ width:13px; height:13px; color:var(--gold-2); }
.card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:1em; padding-top:1em; border-top:1px dashed var(--line);
}
.price{
  font-size:2rem; letter-spacing:.03em; color:var(--gold);
  display:inline-flex; align-items:baseline; gap:.18em;
}
.price small{
  font-family:var(--f-body); font-size:.42em; font-weight:800; letter-spacing:.04em;
  color:var(--muted-2); text-transform:uppercase;
}
.price--lg{ font-size:2.7rem; color:#1a1206; }
.price--lg small{ color:rgba(26,18,6,.55); }

.card__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.79rem; font-weight:700; color:var(--gold);
  letter-spacing:.03em;
}
.card__link .ic{ width:14px; height:14px; transition:transform .3s var(--ease); }
.card__link:hover .ic{ transform:translateX(4px); }

.card--featured{ border-color:var(--gold-line); background:linear-gradient(170deg, rgba(224,176,97,.14), var(--panel) 62%); }
.badge{
  position:absolute; top:-1px; left:22px;
  background:var(--gold); color:#1a1206;
  font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px 4px; border-radius:0 0 8px 8px;
}
.card--featured h3{ padding-top:12px; }

.paket{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
  margin-top:18px; padding:clamp(24px,3vw,34px);
  border-radius:var(--r-lg);
  background:linear-gradient(120deg,#f2d296,var(--gold) 48%,var(--gold-2));
  color:#1a1206;
  position:relative; overflow:hidden;
}
.paket::before{
  content:""; position:absolute; right:-40px; top:-60px; width:280px; height:280px;
  border-radius:50%; border:1px solid rgba(0,0,0,.12);
}
.paket h3{ color:#1a1206; font-size:clamp(1.5rem,2.6vw,2rem); margin-top:.18em; max-width:22ch; }
.paket .eyebrow{ color:#2a1c06; }
.paket .eyebrow .eyebrow__line{ background:rgba(0,0,0,.35); }
.paket__sub{ font-size:.85rem; color:rgba(26,18,6,.72); margin-top:.6em; max-width:46ch; font-weight:500; }
.paket__buy{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.paket__buy .meta{ color:rgba(26,18,6,.6); padding-top:0; }
.paket__buy .meta .ic{ color:rgba(26,18,6,.5); }
.paket__buy .btn{ margin-top:6px; }

.note{ margin-top:22px; text-align:center; font-size:.79rem; color:var(--muted-2); }
.note a{ color:var(--gold); border-bottom:1px solid var(--gold-line); }

/* ---------- 10. WHY ---------- */
.why{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,72px); align-items:center; }
.checks{ display:grid; gap:18px; margin-top:2.2em; }
.checks li{ display:flex; gap:14px; }
.checks__ic{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--gold);
}
.checks__ic .ic{ width:15px; height:15px; }
.checks strong{ display:block; font-size:.95rem; }
.checks p{ font-size:.84rem; color:var(--muted); line-height:1.6; margin-top:2px; }

.why__media{ position:relative; }
.why__media img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--r-lg); }
.why__tag{
  position:absolute; left:-14px; bottom:-14px;
  background:linear-gradient(150deg,#f3d494,var(--gold-2));
  color:#1a1206; border-radius:14px; padding:14px 18px;
  display:flex; flex-direction:column; gap:0;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
}
.why__tag-num{ font-size:2.2rem; line-height:1; }
.why__tag-lbl{ font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; opacity:.7; line-height:1.35; }

/* ---------- 11. GALLERY ---------- */
.gal{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e f f";
  grid-auto-rows:clamp(150px,17vw,225px);
  gap:14px; margin-top:clamp(28px,4vw,44px);
}
.gal__item{
  position:relative; overflow:hidden; border-radius:var(--r); padding:0;
  border:1px solid var(--line); background:var(--panel);
  display:block;
}
.gal__item--a{ grid-area:a; }
.gal__item--b{ grid-area:b; }
.gal__item--c{ grid-area:c; }
.gal__item--d{ grid-area:d; }
.gal__item--e{ grid-area:e; }
.gal__item--f{ grid-area:f; }
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .4s; }
.gal__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(8,8,10,.55));
  opacity:0; transition:opacity .4s;
}
.gal__item:hover img, .gal__item:focus-visible img{ transform:scale(1.05); }
.gal__item:hover::after, .gal__item:focus-visible::after{ opacity:1; }
.gal__zoom{
  position:absolute; z-index:2; right:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.05em;
  padding:7px 12px; border-radius:999px;
  background:rgba(10,10,12,.7); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s var(--ease);
}
.gal__zoom .ic{ width:13px; height:13px; color:var(--gold); }
.gal__item:hover .gal__zoom, .gal__item:focus-visible .gal__zoom{ opacity:1; transform:none; }

/* ---------- 12. STEPS ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(30px,4vw,46px); counter-reset:s; }
.step{
  position:relative; padding:30px 26px 28px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(170deg, var(--panel-2), var(--panel));
  transition:border-color .3s, transform .35s var(--ease);
}
.step:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.step__num{
  font-size:3rem; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(224,176,97,.45);
  display:block; margin-bottom:.35em; letter-spacing:.04em;
}
.step h3{ font-size:1.4rem; }
.step p{ margin-top:.55em; font-size:.86rem; color:var(--muted); line-height:1.7; }

.cta-inline{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  margin-top:26px; padding:26px 30px; border-radius:var(--r-lg);
  border:1px solid var(--gold-line);
  background:linear-gradient(100deg, rgba(224,176,97,.12), rgba(224,176,97,.03));
}
.cta-inline h3{ font-size:1.45rem; }
.cta-inline p{ font-size:.85rem; color:var(--muted); margin-top:4px; }

/* ---------- 13. LOCATION ---------- */
.loc{ display:grid; grid-template-columns:1.12fr .88fr; gap:18px; margin-top:clamp(28px,4vw,44px); }
.loc__map{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  min-height:480px; background:var(--panel);
}
.loc__map iframe{ width:100%; height:100%; min-height:480px; filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.92) contrast(1.05); }
.loc__info{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
  padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:24px;
}
.loc__block + .loc__block{ border-top:1px solid var(--line); padding-top:24px; }
.loc__label{
  display:flex; align-items:center; gap:8px;
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.loc__label .ic{ width:14px; height:14px; }
.loc__addr{ margin-top:.7em; font-size:1rem; line-height:1.6; color:var(--text); font-weight:500; }
.loc__hint{ font-size:.75rem; color:var(--muted-2); margin-top:.9em; }
.link-arrow{
  display:inline-flex; align-items:center; gap:6px; margin-top:.9em;
  font-size:.8rem; font-weight:700; color:var(--gold);
  border-bottom:1px solid var(--gold-line); padding-bottom:2px;
}
.link-arrow .ic{ width:13px; height:13px; transition:transform .3s var(--ease); }
.link-arrow:hover .ic{ transform:translateX(3px); }

.hours{ width:100%; border-collapse:collapse; margin-top:.8em; font-size:.88rem; }
.hours th, .hours td{ padding:8px 0; text-align:left; font-weight:400; }
.hours th{ color:var(--muted); }
.hours td{ text-align:right; font-variant-numeric:tabular-nums; color:var(--text); font-weight:600; }
.hours tr + tr th, .hours tr + tr td{ border-top:1px dashed rgba(255,255,255,.07); }
.hours__now td{ text-align:right; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background:rgba(74,222,128,.13); color:var(--green); border:1px solid rgba(74,222,128,.3);
}
.pill.is-closed{ background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.3); }

.loc__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.loc__actions .btn{ flex:1 1 140px; }

/* ---------- 14. FAQ ---------- */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,64px); align-items:start; }
.faq__head .btn{ margin-top:1.8em; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-size:.97rem; font-weight:600; color:var(--text);
  transition:color .2s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold); }
.faq__item summary .ic{ width:17px; height:17px; color:var(--muted-2); flex:none; transition:transform .3s var(--ease), color .2s; }
.faq__item[open] summary{ color:var(--gold); }
.faq__item[open] summary .ic{ transform:rotate(180deg); color:var(--gold); }
.faq__item p{ padding:0 0 22px; font-size:.875rem; color:var(--muted); line-height:1.75; max-width:62ch; }

/* ---------- 15. CTA BAND ---------- */
.cta{
  background:linear-gradient(120deg,#f5d79d,var(--gold) 42%,var(--gold-2) 100%);
  color:#1a1206; padding:clamp(56px,7vw,88px) 0; position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 2px, transparent 2px 12px);
  pointer-events:none;
}
.cta__in{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta h2{ max-width:18ch; margin-top:.25em; color:#160f04; }
.cta .eyebrow{ justify-content:center; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2em; }
.cta__hours{
  display:flex; align-items:center; gap:8px; margin-top:1.6em;
  font-size:.8rem; font-weight:600; color:rgba(22,15,4,.65);
}
.cta__hours .ic{ width:14px; height:14px; }

/* ---------- 16. FOOTER ---------- */
.foot{ padding:clamp(48px,6vw,72px) 0 0; background:#08080a; border-top:1px solid var(--line); }
.foot__grid{ display:grid; grid-template-columns:1.6fr .9fr 1fr 1fr; gap:36px; }
.foot__brand p{ margin-top:1.1em; font-size:.84rem; color:var(--muted); line-height:1.7; max-width:34ch; }
.foot__social{ display:flex; gap:9px; margin-top:1.4em; }
.foot__social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--muted);
  transition:color .2s, border-color .2s, background .2s, transform .25s;
}
.foot__social a:hover{ color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft); transform:translateY(-2px); }
.foot__social .ic{ width:17px; height:17px; }

.foot__col h4{
  font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:1.2em;
}
.foot__col a{ display:block; font-size:.86rem; color:var(--muted); padding:4px 0; transition:color .2s; }
.foot__col a:hover{ color:var(--gold); }
.foot__addr, .foot__hours{ font-size:.84rem; color:var(--muted); line-height:1.7; margin-top:.4em; }
.foot__hours strong{ display:block; font-family:var(--f-display); font-size:1.4rem; letter-spacing:.04em; color:var(--text); margin-top:2px; }
.foot__badge{ display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--muted); margin-top:.9em; }

.foot__base{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(36px,5vw,56px); padding-block:20px 26px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.74rem; color:var(--muted-2);
}

/* ---------- 17. FLOATING WA ---------- */
.wa-float{
  position:fixed; z-index:90; right:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:9px;
  background:#25d366; color:#08130b;
  padding:13px 18px 13px 15px; border-radius:999px;
  font-size:.85rem; font-weight:800;
  box-shadow:0 16px 34px -14px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.35);
  animation:pulse 3.4s ease-out infinite;
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.02); }
.wa-float .ic{ width:20px; height:20px; }
@keyframes pulse{
  0%{ box-shadow:0 16px 34px -14px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.4); }
  60%{ box-shadow:0 16px 34px -14px rgba(37,211,102,.7), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 16px 34px -14px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- 18. LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:clamp(14px,3vw,40px);
  background:rgba(6,6,8,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lb[hidden]{ display:none; }
.lb__fig{ display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; }
.lb__fig img{ max-height:78vh; width:auto; max-width:100%; border-radius:12px; object-fit:contain; }
.lb__fig figcaption{
  display:flex; align-items:center; gap:14px; font-size:.82rem; color:var(--muted);
}
.lb__fig figcaption small{ color:var(--muted-2); font-variant-numeric:tabular-nums; }
.lb__nav, .lb__close{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text);
  transition:background .2s, border-color .2s;
}
.lb__nav:hover, .lb__close:hover{ background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold); }
.lb__nav .ic{ width:20px; height:20px; }
.lb__nav--prev .ic{ transform:rotate(180deg); }
.lb__close{ position:absolute; top:18px; right:18px; z-index:2; }

/* ---------- 19. REVEAL ---------- */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .hero__media{ max-width:520px; }
  .why{ grid-template-columns:1fr; }
  .why__media{ order:-1; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .loc{ grid-template-columns:1fr; }
  .loc__map, .loc__map iframe{ min-height:400px; }
  .faq{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .step__num{ font-size:2.6rem; }
}

@media (max-width:860px){
  .nav__toggle{ display:grid; }
  /* backdrop-filter bikin .nav jadi containing block buat fixed → matikan di mobile */
  .nav{
    background:#0b0b0d;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .nav__links{
    position:fixed; inset:0; z-index:120;
    flex-direction:column; justify-content:center; gap:6px;
    background:#0b0b0d;
    padding:88px var(--pad) 40px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links > a:not(.btn){ font-size:1.6rem; font-family:var(--f-display); letter-spacing:.04em; text-transform:uppercase; color:var(--text); padding:10px 0; }
  .nav__links > a:not(.btn)::after{ display:none; }
  .nav__links .nav__cta{ margin-top:22px; font-size:1rem; padding:1em 2em; }
  body.menu-open{ overflow:hidden; }
  body.menu-open .nav__toggle{ position:fixed; right:var(--pad); top:26px; z-index:130; }
  .topbar__addr{ display:none; }
  .gal{ grid-template-columns:repeat(2,1fr); grid-template-areas:"a a" "b b" "c d" "e f"; grid-auto-rows:clamp(160px,26vw,220px); }
  .steps{ grid-template-columns:1fr; }
  .cta-inline{ flex-direction:column; align-items:flex-start; }
  .paket{ grid-template-columns:1fr; gap:20px; }
  .paket__buy{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:16px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .sec-head--split{ flex-direction:column; align-items:flex-start; gap:16px; }
  .site-head.is-stuck .topbar{ max-height:38px; opacity:1; }
}

@media (max-width:620px){
  html{ scroll-padding-top:80px; }
  .hero{ padding-top:34px; }
  .hero__facts{ gap:24px; }
  .fact__num{ font-size:1.75rem; }
  .hero__actions .btn{ flex:1 1 100%; }
  .topbar__in{ height:34px; font-size:.7rem; }
  .topbar__links{ display:none; }
  .nav__in{ height:64px; }
  .brand__mark{ width:38px; height:38px; }
  .brand__text{ font-size:1.24rem; }
  .brand__text small{ font-size:.5rem; letter-spacing:.13em; }
  .cards{ grid-template-columns:1fr; }
  .card{ padding:22px 20px 20px; }
  .hero__chip--price{ right:12px; bottom:12px; padding:11px 14px; }
  .chip__value{ font-size:1.35rem; }
  .gal{ grid-template-areas:"a" "b" "c" "d" "e" "f"; grid-template-columns:1fr; grid-auto-rows:210px; }
  .why__tag{ left:8px; bottom:-12px; padding:11px 15px; }
  .why__tag-num{ font-size:1.8rem; }
  .loc__actions{ flex-direction:column; }
  .loc__actions .btn{ width:100%; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__base{ flex-direction:column; align-items:flex-start; gap:6px; }
  .wa-float{ padding:14px; right:14px; bottom:14px; }
  .wa-float__txt{ display:none; }
  .lb{ grid-template-columns:1fr; grid-template-rows:1fr auto; padding:16px; }
  .lb__fig{ grid-row:1; }
  .lb__nav{ position:fixed; bottom:22px; }
  .lb__nav--prev{ left:16px; }
  .lb__nav--next{ right:16px; }
  .lb__fig img{ max-height:70vh; }
  .cta__actions .btn{ flex:1 1 100%; }
}

/* ---------- 21. MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}
@media print{
  .site-head,.wa-float,.lb,.marquee,.cta{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
}