:root{
  --black-950:#0b0906;
  --black-900:#141110;
  --black-800:#1c1815;
  --gold-500:#D4AF37;
  --gold-400:#E8C766;
  --gold-100:#F7ECC9;
  --cream:#F5F1E6;
  --gray-400:#A79C87;
  --gray-600:#7d7364;
  --radius:14px;
  --maxw:1180px;
  --font-head:'Sora',Arial,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black-950);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-head);margin:0 0 .5em;line-height:1.15;}
ul{margin:0;padding:0;}
.gold-text{
  background:linear-gradient(100deg,var(--gold-400),var(--gold-500) 60%,#a9822c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold-400),var(--gold-500));width:0%;z-index:999;transition:width .1s linear;}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:16px 0;transition:.3s;}
.nav.is-scrolled{background:rgba(11,9,6,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,175,55,.15);padding:10px 0;}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;}
.nav__brand img{height:36px;width:auto;}
.nav__links{display:flex;gap:28px;margin-left:auto;font-weight:600;font-size:.95rem;}
.nav__links a{color:var(--gray-400);transition:.2s;}
.nav__links a:hover{color:var(--gold-400);}
.nav__cta{
  background:linear-gradient(100deg,var(--gold-400),var(--gold-500));
  color:var(--black-950);font-weight:700;padding:10px 20px;border-radius:999px;font-size:.9rem;
  white-space:nowrap;
}
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;margin-left:auto;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;}
.nav__burger span{width:22px;height:2px;background:var(--gold-400);display:block;transition:.25s;}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__burger.is-open span:nth-child(2){opacity:0;}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* hero */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding:170px 24px 100px;background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(11,9,6,.94) 0%, rgba(11,9,6,.82) 38%, rgba(11,9,6,.45) 68%, rgba(11,9,6,.15) 100%),
             linear-gradient(0deg, rgba(11,9,6,.9), rgba(11,9,6,0) 40%);
  pointer-events:none;
}
.hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;min-width:0;}
.hero__text{max-width:640px;min-width:0;}
.hero__eyebrow{color:var(--gold-400);font-weight:600;font-size:.9rem;margin-bottom:14px;letter-spacing:.02em;}
.hero__title{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;text-shadow:0 4px 24px rgba(0,0,0,.5);overflow-wrap:anywhere;word-break:normal;}
.hero__desc{overflow-wrap:break-word;color:var(--gray-400);font-size:1.08rem;max-width:52ch;margin-bottom:32px;}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px;}
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:700;font-size:.98rem;transition:.25s;}
.btn--gold{background:linear-gradient(100deg,var(--gold-400),var(--gold-500));color:var(--black-950);}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,175,55,.3);}
.btn--ghost{border:1.5px solid rgba(232,231,224,.5);color:var(--cream);backdrop-filter:blur(4px);}
.btn--ghost:hover{border-color:var(--gold-400);color:var(--gold-400);}
.hero__stats{display:flex;gap:36px;}
.hero__stats strong{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--gold-400);}
.hero__stats span{color:var(--gray-400);font-size:.85rem;}

/* sections */
.section{padding:100px 24px;max-width:var(--maxw);margin:0 auto;}
.section--alt{background:var(--black-900);max-width:none;padding-left:0;padding-right:0;}
.section--alt>*{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;}
.section--dark{background:linear-gradient(160deg,var(--black-900),var(--black-950));max-width:none;border-top:1px solid rgba(212,175,55,.12);}
.section--dark>*{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;}
.section__head{text-align:center;max-width:640px;margin:0 auto 48px;}
.section__title{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;}
.section__lead{color:var(--gray-400);font-size:1.05rem;}
.section__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.section__grid p{color:var(--gray-400);}
.notice{border-left:3px solid var(--gold-500);padding:12px 16px;background:rgba(212,175,55,.06);border-radius:0 8px 8px 0;font-size:.92rem;}
.check-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.check-list li{position:relative;padding-left:32px;color:var(--gray-400);}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(212,175,55,.15);color:var(--gold-400);font-size:.8rem;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* cards (layanan) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.card{background:var(--black-800);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius);overflow:hidden;transition:.3s;}
.card:hover{border-color:rgba(212,175,55,.35);transform:translateY(-4px);}
.card img{aspect-ratio:4/3;object-fit:cover;}
.card__body{padding:26px 28px 30px;}
.card__body h3{font-size:1.35rem;color:var(--gold-400);}
.card__body p{color:var(--gray-400);}
.card__body ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.card__body ul li{position:relative;padding-left:20px;font-size:.92rem;color:var(--cream);}
.card__body ul li::before{content:'—';position:absolute;left:0;color:var(--gold-500);}

/* branches */
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.branch{background:var(--black-800);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius);padding:26px 22px;transition:.3s;}
.branch:hover{border-color:rgba(212,175,55,.4);}
.branch h3{color:var(--gold-400);font-size:1.1rem;}
.branch p{color:var(--gray-400);font-size:.92rem;min-height:60px;}
.branch__badge{display:inline-block;margin-top:10px;font-size:.78rem;font-weight:700;color:var(--black-950);background:var(--gold-400);padding:5px 12px;border-radius:999px;}


/* faq */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq__item{background:var(--black-800);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius);transition:border-color .3s;}
.faq__item[open]{border-color:rgba(212,175,55,.4);}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--cream);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:'+';flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(212,175,55,.15);color:var(--gold-400);font-size:1.15rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg);}
.faq__item summary:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px;border-radius:var(--radius);}
.faq__item p{margin:0;padding:0 22px 20px;color:var(--gray-400);font-size:.95rem;overflow-wrap:break-word;}
.faq__more{text-align:center;color:var(--gray-400);margin:14px 0 0;font-size:.95rem;}
.faq__more a{color:var(--gold-400);font-weight:600;}
.faq__more a:hover{text-decoration:underline;}

/* contact */
.contact{text-align:center;}
.contact .section__title,.contact .section__lead{max-width:640px;margin-left:auto;margin-right:auto;}
.contact__list{display:flex;flex-direction:column;gap:10px;align-items:center;margin:28px 0 34px;color:var(--gray-400);}
.contact__list a:hover{color:var(--gold-400);}

/* footer */
.footer{text-align:center;padding:50px 24px 40px;border-top:1px solid rgba(212,175,55,.1);}
.footer img{margin:0 auto 16px;}
.footer p{color:var(--gray-600);font-size:.85rem;max-width:620px;margin:6px auto;}
.footer__notice{color:var(--gold-500);}

/* floating WA */
.wa-float{
  position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#0b0906;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.4);z-index:800;animation:pulse 2.4s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .wa-float{animation:none;}
}

/* responsive */
@media (max-width:980px){
  .section__grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .branches{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .nav__inner{padding:0 16px;}
  .nav__brand img{height:28px;}
  .nav__links{
    position:fixed;top:0;right:0;height:100vh;width:72vw;max-width:280px;
    background:var(--black-900);flex-direction:column;padding:90px 28px;gap:20px;
    transform:translateX(100%);transition:.3s;border-left:1px solid rgba(212,175,55,.15);
  }
  .nav__links a{font-size:.88rem;}
  .nav__links.is-open{transform:translateX(0);}
  .nav__burger{display:flex;}
  .nav__cta{display:none;}

  .hero{padding:100px 18px 50px;min-height:66vh;background-position:65% center;}
  .hero__eyebrow{font-size:.78rem;margin-bottom:10px;}
  .hero__title{font-size:1.9rem;margin-bottom:.4em;}
  .hero__desc{font-size:.92rem;margin-bottom:22px;}
  .hero__actions{gap:10px;margin-bottom:28px;}
  .btn{padding:11px 22px;font-size:.86rem;}
  .hero__stats{gap:20px;}
  .hero__stats strong{font-size:1.15rem;}
  .hero__stats span{font-size:.72rem;}

  .section{padding:56px 18px;}
  .section--alt>*{padding-left:18px;padding-right:18px;}
  .section--dark>*{padding-left:18px;padding-right:18px;}
  .section__head{margin-bottom:30px;}
  .section__title{font-size:1.5rem;}
  .section__lead{font-size:.92rem;}
  .section__grid{gap:32px;}

  .cards{gap:18px;}
  .card__body{padding:18px 20px 22px;}
  .card__body h3{font-size:1.1rem;}
  .card__body p{font-size:.9rem;}

  .branches{grid-template-columns:1fr;gap:12px;}
  .branch{padding:18px 16px;}
  .branch h3{font-size:.98rem;}
  .branch p{font-size:.85rem;min-height:0;}


  .faq__item summary{padding:15px 16px;font-size:.92rem;}
  .faq__item p{padding:0 16px 16px;font-size:.88rem;}

  .breadcrumb{padding:88px 18px 0;}
  .city-hero{padding:22px 18px 40px;}
  .contact__list{font-size:.9rem;}
}
@media (max-width:480px){
  .hero__title{font-size:1.6rem;}
  .hero__stats{gap:16px;flex-wrap:wrap;}
  .btn{width:100%;text-align:center;}
  .hero__actions{flex-direction:column;}
  .section{padding:44px 16px;}
  .section__title{font-size:1.35rem;}
  .wa-float{width:48px;height:48px;bottom:16px;right:16px;}
}

/* city landing pages */
.breadcrumb{max-width:var(--maxw);margin:0 auto;padding:100px 24px 0;font-size:.82rem;color:var(--gray-600);}
.breadcrumb a{color:var(--gray-400);}
.breadcrumb a:hover{color:var(--gold-400);}
.city-hero{padding:32px 24px 60px;max-width:var(--maxw);margin:0 auto;}
.city-hero__inner{max-width:760px;}
.area-links{display:flex;flex-wrap:wrap;gap:12px;max-width:var(--maxw);margin:0 auto;}
.area-links a{padding:10px 18px;border:1px solid rgba(212,175,55,.25);border-radius:999px;color:var(--gold-400);font-size:.88rem;font-weight:600;transition:.25s;}
.area-links a:hover{border-color:var(--gold-400);background:rgba(212,175,55,.08);}
.branch__more{display:inline-block;margin-top:10px;margin-left:8px;font-size:.78rem;color:var(--gold-400);font-weight:600;}
.branch__more:hover{text-decoration:underline;}