/* ============ Kompas Medis — dark luxury system (dari referensi SuperDesign) ============ */
:root{
  --charcoal:#0D0D0D;--panel:#080808;--fg:#EAEAEA;
  --muted:rgba(234,234,234,.55);--faint:rgba(234,234,234,.35);
  --copper:#C5A059;--rose:#E5B299;--deep-gold:#8E6D3A;
  --hairline:rgba(255,255,255,.07);--hairline-strong:rgba(255,255,255,.14);
  --rose-30:rgba(229,178,153,.3);--copper-12:rgba(197,160,89,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--charcoal);color:var(--fg);font:300 15.5px/1.75 Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased;position:relative}
/* grain — material kertas gelap; di atas segalanya, tak pernah menghalangi */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.serif,h1,h2,h3,blockquote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:.005em}
em.arah{font-style:italic;color:var(--rose);font-weight:400}
a{color:inherit}
img{max-width:100%;display:block}
.kicker{font-size:11px;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--rose);display:flex;align-items:center;gap:16px}
.kicker::before{content:"";width:40px;height:1px;background:linear-gradient(90deg,var(--rose),transparent)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.lux-gradient{background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(197,160,89,.05) 100%)}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:500 12px/1 Montserrat,sans-serif;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;text-decoration:none;min-height:54px;padding:0 34px;transition:all .4s cubic-bezier(.165,.84,.44,1)}
.btn-outline{border:1px solid var(--rose-30);color:var(--fg);background:transparent}
.btn-outline:hover{background:var(--rose);color:var(--charcoal);border-color:var(--rose)}
.btn-fill{border:1px solid var(--rose);background:var(--rose);color:var(--charcoal)}
.btn-fill:hover{background:transparent;color:var(--rose)}
.btn[disabled]{opacity:.4;cursor:default}

/* ---------- nav ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(13,13,13,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:84px}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;font-family:Montserrat,sans-serif;font-size:15px;letter-spacing:.3em;text-transform:uppercase}
.logo b{font-weight:600}.logo span{font-weight:300;color:var(--muted)}
.logo svg{flex:none}
.nav{display:flex;gap:34px;margin-left:auto;font-size:11.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--muted);transition:color .3s}
.nav a:hover{color:var(--rose)}
.nav-cta{min-height:42px;padding:0 24px;font-size:10.5px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(32px,5vw,84px);align-items:center}
.hero h1{font-size:clamp(52px,6.6vw,108px);font-weight:400;max-width:13ch}
.hero h1 .fin{color:var(--copper)}
.hero p.lede{max-width:47ch;margin-top:30px;font-size:clamp(14.5px,1.25vw,17px);color:var(--muted);font-weight:300;line-height:1.9}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}
.hero-stats{display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin-top:clamp(40px,6vh,72px);flex-wrap:wrap}
.stat b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(34px,3vw,48px);line-height:1;display:block;color:var(--fg)}
.stat b i{font-style:normal;font-size:.5em;color:var(--copper);vertical-align:super}
.stat span{display:block;margin-top:8px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.stat-divider{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--rose),transparent);opacity:.6}
.hero-visual{position:relative}
.hero-visual .frame{position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--rose-30);pointer-events:none}
.hero-visual img{width:100%;height:clamp(380px,58vh,620px);object-fit:cover;filter:saturate(.82) contrast(1.04) brightness(.94)}
.hero-visual figcaption{position:absolute;left:0;bottom:0;background:rgba(13,13,13,.88);backdrop-filter:blur(8px);padding:14px 22px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--hairline);border-right:1px solid var(--hairline)}
/* koreografi masuk */
.lift{opacity:0;transform:translateY(26px);animation:lift .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
@keyframes lift{to{opacity:1;transform:none}}

/* ---------- band bersama ---------- */
section.band{padding:clamp(76px,11vh,130px) 0;border-top:1px solid var(--hairline)}
.band-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(36px,5vh,64px)}
.band-head h2{font-size:clamp(36px,4vw,60px);max-width:22ch}
.band-head h2 i{color:var(--rose)}
.band-head .sub{color:var(--muted);max-width:58ch;font-weight:300}
.band-split{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.link-quiet{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--rose);text-decoration:none;border-bottom:1px solid var(--rose-30);padding-bottom:6px;transition:border-color .3s}
.link-quiet:hover{border-color:var(--rose)}

/* ---------- spesialisasi (baris bernomor) ---------- */
.spec-list{border-top:1px solid var(--hairline)}
.spec-row{display:grid;grid-template-columns:90px minmax(0,.85fr) minmax(0,1.15fr) auto;gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(24px,3.4vh,38px) 4px;border-bottom:1px solid var(--hairline);text-decoration:none;transition:background .4s,padding-left .4s}
.spec-row:hover{background:var(--copper-12);padding-left:18px}
.spec-num{font-family:"Cormorant Garamond",serif;font-size:clamp(22px,2vw,30px);font-style:italic;color:var(--deep-gold)}
.spec-row h3{font-size:clamp(24px,2.4vw,34px);font-weight:500}
.spec-row p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.7}
.spec-row .go{font-size:18px;color:var(--rose);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.spec-row:hover .go{opacity:1;transform:none}

/* ---------- intake ---------- */
.band-panel{background:var(--panel)}
.intake-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(28px,4vw,64px);align-items:start}
.intake-card{border:1px solid var(--hairline);padding:clamp(26px,3.4vw,46px);background:var(--charcoal)}
.f-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--fg);margin:30px 0 14px;display:block}
.f-label:first-child{margin-top:0}
.f-label .opt{color:var(--faint);text-transform:none;letter-spacing:.04em;font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--hairline-strong);background:transparent;font:400 13px/1 Montserrat,sans-serif;letter-spacing:.06em;color:var(--fg);cursor:pointer;text-decoration:none;transition:all .35s cubic-bezier(.165,.84,.44,1)}
.chip .dot{width:5px;height:5px;background:var(--copper);transition:background .3s;transform:rotate(45deg)}
.chip:hover{border-color:var(--rose)}
.chip.on{background:var(--rose);border-color:var(--rose);color:var(--charcoal)}
.chip.on .dot{background:var(--charcoal)}
.chip:active{transform:scale(.97)}
.chip-check .box{width:16px;height:16px;border:1px solid var(--hairline-strong);display:grid;place-items:center;font-size:10px;transition:all .3s}
.chip-check.on .box{background:var(--charcoal);color:var(--rose);border-color:var(--charcoal)}
textarea{width:100%;min-height:100px;resize:vertical;border:1px solid var(--hairline-strong);background:var(--panel);padding:16px 18px;font:300 14.5px/1.7 Montserrat,sans-serif;color:var(--fg)}
textarea::placeholder{color:var(--faint)}
textarea:focus,input:focus{outline:1px solid var(--rose);outline-offset:1px}
.budget-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.budget-val{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;color:var(--rose);letter-spacing:.04em}
input[type=range]{width:100%;margin:18px 0 6px;accent-color:#C5A059;height:28px}
.intake-note{font-size:12px;color:var(--faint);text-align:center;margin-top:16px;font-weight:300}
.compass-side{position:sticky;top:108px}
.compass-card{border:1px solid var(--hairline);background:var(--charcoal);padding:30px;display:flex;flex-direction:column;align-items:center;gap:8px}
.compass-cap{font-size:12.5px;color:var(--muted);text-align:center;max-width:30ch;font-weight:300;line-height:1.7}
.compass-cap b{color:var(--fg);font-weight:500}
.compass-cap .deg{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--copper)}

/* ---------- perjalanan (concierge) ---------- */
.ethos{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(21px,2.2vw,30px);color:var(--muted);max-width:34ch;line-height:1.4}
.ethos b{color:var(--rose);font-weight:400}
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--hairline);margin-top:clamp(36px,5vh,60px)}
.wp{padding:clamp(28px,3.4vw,48px);border-left:1px solid var(--hairline)}
.wp:first-child{border-left:0}
.wp-num{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(30px,2.8vw,42px);color:var(--deep-gold);display:block}
.wp h3{font-size:clamp(22px,2.1vw,29px);font-weight:500;margin:18px 0 12px}
.wp p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.8}

/* ---------- peta arah ---------- */
.chart-panel{border:1px solid var(--hairline);background:var(--panel);padding:clamp(30px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:center}
.route-svg{width:100%;height:auto}
.route-arc{fill:none;stroke:var(--copper);stroke-width:1.4;stroke-dasharray:5 7;stroke-linecap:round;opacity:0}
.in .route-arc{opacity:.85;transition:opacity .7s ease}
.in .route-arc.a1{transition-delay:.1s}.in .route-arc.a2{transition-delay:.25s}.in .route-arc.a3{transition-delay:.4s}.in .route-arc.a4{transition-delay:.55s}.in .route-arc.a5{transition-delay:.7s}
.route-node{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.in .route-node{opacity:1;transform:none}
.in .n1{transition-delay:.3s}.in .n2{transition-delay:.45s}.in .n3{transition-delay:.6s}.in .n4{transition-delay:.75s}.in .n5{transition-delay:.9s}
.dest-list{display:flex;flex-direction:column}
.dest-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 22px;padding:19px 4px;border-top:1px solid var(--hairline);align-items:baseline;transition:background .35s,padding-left .35s}
.dest-row:first-child{border-top:0}
.dest-row:hover{background:var(--copper-12);padding-left:14px}
.dest-row .bearing{font-size:10.5px;letter-spacing:.2em;color:var(--copper)}
.dest-row b{font-family:"Cormorant Garamond",serif;font-size:23px;font-weight:500;color:var(--fg)}
.dest-row p{grid-column:2;font-size:13px;color:var(--muted);font-weight:300;line-height:1.65}

/* ---------- estimasi ---------- */
.est-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.est-card{border:1px solid var(--hairline);background:var(--panel);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;transition:border-color .4s,transform .4s}
.est-card:hover{border-color:var(--rose-30);transform:translateY(-4px)}
.est-cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.est-card h3{font-size:clamp(23px,2.2vw,30px);font-weight:500;margin:14px 0 4px}
.est-city{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.est-price{font-family:"Cormorant Garamond",serif;font-size:clamp(30px,2.8vw,40px);font-weight:500;color:var(--rose);margin:22px 0 4px}
.est-price small{font-size:.42em;color:var(--muted);font-family:Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.est-feats{list-style:none;margin:20px 0 26px;flex:1}
.est-feats li{padding:11px 0;border-top:1px solid var(--hairline);font-size:13.5px;font-weight:300;color:var(--muted);display:flex;gap:12px;align-items:baseline}
.est-feats li::before{content:"+";color:var(--copper);font-family:"Cormorant Garamond",serif}
.est-note{font-size:12px;color:var(--faint);margin-top:26px;max-width:64ch;font-weight:300}

/* ---------- resume ---------- */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}
.fhir-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.fhir-chip{font-size:10.5px;letter-spacing:.14em;border:1px solid var(--hairline-strong);padding:9px 16px;color:var(--muted);text-transform:uppercase}
.resume-demo{border:1px solid var(--hairline);background:var(--panel);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden}
.resume-demo::before{content:"";position:absolute;inset:10px;border:1px solid var(--hairline);pointer-events:none}
.resume-line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hairline);padding-bottom:11px;font-size:13.5px;font-weight:300;position:relative}
.resume-line .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);flex:none;padding-top:3px}
.resume-line .code{font-size:11px;color:var(--faint)}
.fhir-stamp{position:absolute;top:24px;right:24px;width:76px;height:76px;border-radius:50%;border:1px dashed var(--copper);display:grid;place-items:center;font-size:9px;letter-spacing:.26em;color:var(--copper);transform:rotate(-12deg);text-transform:uppercase}
.status-wait{color:var(--rose)}

/* ---------- kutipan ---------- */
.quote-band{position:relative;overflow:hidden;border:1px solid var(--hairline);background:linear-gradient(180deg,var(--panel),rgba(197,160,89,.06));padding:clamp(44px,6vw,88px);display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.quote-band blockquote{font-size:clamp(26px,3.2vw,44px);font-style:italic;font-weight:400;line-height:1.3;max-width:26ch;position:relative;z-index:1}
.quote-band blockquote i{color:var(--rose)}
.quote-band cite{font-style:normal;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1}
.quote-rose{position:absolute;right:-80px;bottom:-100px;width:360px;opacity:.06;pointer-events:none;color:var(--copper)}

/* ---------- pengetahuan ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.article-card{border:1px solid var(--hairline);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:14px;transition:border-color .4s,background .4s}
.article-card:hover{border-color:var(--rose-30);background:var(--copper-12)}
.article-card h3{font-size:clamp(21px,2vw,26px);font-weight:500;line-height:1.25}
.article-card h3 span{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .4s ease}
.article-card:hover h3 span{background-size:100% 1px}
.article-card p{color:var(--muted);font-size:13px;font-weight:300}
.tag-soon{align-self:flex-start;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);border:1px solid var(--rose-30);padding:6px 13px}

/* ---------- faq ---------- */
details.faq{border-bottom:1px solid var(--hairline);padding:4px 0}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:"Cormorant Garamond",serif;font-size:21px;font-weight:500}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:"Cormorant Garamond",serif;font-size:26px;color:var(--copper);transition:transform .25s;flex:none}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{color:var(--muted);padding:0 0 24px;max-width:66ch;font-size:14px;font-weight:300}

/* ---------- CTA akhir ---------- */
.final-cta{padding:clamp(90px,14vh,170px) 0;border-top:1px solid var(--hairline);text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(13,13,13,0),rgba(197,160,89,.05))}
.final-cta .kicker{justify-content:center}
.final-cta .kicker::before{display:none}
.final-cta h2{font-size:clamp(44px,5.4vw,84px);max-width:18ch;margin:26px auto 0}
.final-cta h2 i{color:var(--rose)}
.final-cta .btn{margin-top:44px}
.final-tags{margin-top:30px;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--hairline);padding:clamp(48px,7vh,80px) 0 44px;background:var(--panel)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.foot-brand p{color:var(--muted);font-size:13px;font-weight:300;max-width:34ch;margin-top:18px}
.foot-h{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);margin-bottom:20px}
.foot-links{display:flex;flex-direction:column;gap:12px;font-size:13.5px;font-weight:300}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--rose)}
.foot-base{margin-top:clamp(36px,5vh,56px);padding-top:28px;border-top:1px solid var(--hairline)}
.disclaimer{font-size:12px;color:var(--faint);max-width:76ch;font-weight:300;line-height:1.8}
.proto-note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-top:16px}

/* ---------- reveal + gerak ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.lift{opacity:1;transform:none;transition:none;animation:none}
  .route-arc,.route-node{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- responsif ---------- */
@media (max-width:1040px){
  .hero{min-height:0;padding:130px 0 70px}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:560px}
  .hero-visual img{height:clamp(280px,40vh,420px)}
  .intake-grid{grid-template-columns:1fr}
  .compass-side{position:static;order:-1}
  .split{grid-template-columns:1fr}
  .chart-panel{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .wp{border-left:0;border-top:1px solid var(--hairline)}
  .wp:first-child{border-top:0}
  .est-grid{grid-template-columns:1fr;max-width:560px}
  .spec-row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"num title go" "num desc go"}
  .spec-num{grid-area:num}.spec-row h3{grid-area:title}.spec-row p{grid-area:desc}.spec-row .go{grid-area:go}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .nav{display:none}
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:clamp(44px,11vw,60px)}
  .hero-stats{gap:18px}
  .stat-divider{display:none}
  .stat{min-width:40%}
  .dest-row{grid-template-columns:1fr}
  .dest-row p{grid-column:1}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- language switcher ---------- */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:26px;border:1px solid rgba(255,255,255,.14);flex:none}
.lang-switch a{display:grid;place-items:center;min-width:40px;min-height:32px;padding:0 9px;font:500 10.5px/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(234,234,234,.55);transition:color .3s,background .3s}
.lang-switch a:hover{color:#E5B299}
.lang-switch a[aria-current="true"]{background:#E5B299;color:#0D0D0D}
@media (max-width:720px){.lang-switch{margin-left:auto}}