/* Khusus beranda porto. Token warna ada di style.css */
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:#1a1209;padding:10px 16px;border-radius:10px;z-index:50}
.skip:focus{top:12px}
.small{font-size:.85rem;margin-top:14px}
.tag{display:inline-block;white-space:nowrap;margin:6px 0 0}
.kel{display:block;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:var(--gold);margin-bottom:6px}
.tnc{list-style:none;padding:0;display:grid;gap:12px;color:var(--mut)}
.tnc li{padding-left:22px;position:relative}
.tnc li:before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:.7rem;top:6px}
.tnc b{color:var(--tx);font-weight:500}
.faq{max-width:800px;display:grid;gap:10px;margin-top:20px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;list-style:none;font-weight:500;display:flex;justify-content:space-between;gap:14px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';color:var(--gold);font-size:1.4rem;transition:transform .25s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--mut);padding:0 0 16px}
.testi{min-height:0}
.btn,.chip,.burger,.nav{cursor:pointer}
nav.top ul{align-items:center}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--tx);transition:.25s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
@media(max-width:820px){
  .burger{display:block}
  nav.top ul#menu{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 20px;display:none}
  nav.top ul#menu.open{display:flex}
  nav.top ul#menu li{padding:4px 0}nav.top ul#menu a.l{display:block;padding:12px 0;font-size:1rem}
  nav.top ul#menu .btn{text-align:center;margin-top:6px}
}
.hero{min-height:100svh;display:grid;align-items:center;padding:110px 0 80px;position:relative;overflow:hidden}
.hero-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.hero-bg i:nth-child(1){width:520px;height:520px;background:#5a3a17;right:-120px;top:-100px}
.hero-bg i:nth-child(2){width:460px;height:460px;background:#5c1a26;left:-140px;bottom:-100px;opacity:.5;animation-delay:-6s}
/* garis cahaya seperti long exposure di foto mereka */
.hero-bg:before,.hero-bg:after{content:'';position:absolute;border-radius:50%;border:2px solid rgba(236,200,140,.4);filter:blur(1px);animation:spin 40s linear infinite}
.hero-bg:before{width:900px;height:380px;right:-260px;top:8%;transform:rotate(-24deg)}
.hero-bg:after{width:720px;height:300px;right:-120px;top:28%;transform:rotate(-30deg);border-color:rgba(217,168,159,.35);animation-duration:55s;animation-direction:reverse}
@keyframes spin{50%{transform:translateX(-30px) rotate(-20deg)}}
.hero-bg i:nth-child(3){width:260px;height:260px;background:#7a5a2a;right:30%;bottom:10%;opacity:.25;animation-delay:-11s}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.12)}}
.hero-in{position:relative}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .ln:nth-child(2){animation-delay:.12s}
.hero .eyebrow,.hero .lead,.hero .cta,.trust{animation:fade .9s .3s both}
.hero .cta{animation-delay:.45s}.trust{animation-delay:.6s}
@keyframes up{from{transform:translateY(100%);opacity:0}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn.sm{min-height:40px}
.trust{list-style:none;padding:0;display:flex;gap:28px;flex-wrap:wrap;margin-top:56px;color:var(--mut);font-size:.85rem}
.trust li{border-left:2px solid var(--gold);padding-left:12px}
.trust b{display:block;color:var(--tx);font-weight:500}
.scroll{position:absolute;bottom:26px;left:50%;width:26px;height:42px;border:1.5px solid var(--mut);border-radius:14px;transform:translateX(-50%)}
.scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite}
@keyframes wheel{50%{transform:translateY(12px);opacity:.2}}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:9px 16px;min-height:40px;font:inherit;font-size:.88rem;transition:.2s}
.chip:hover{color:var(--tx);border-color:var(--gold)}
.chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1a1209}
.gal{columns:3 260px;column-gap:14px}
.gal .ph{break-inside:avoid;margin-bottom:14px;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line);display:block;width:100%;padding:0;background:var(--card);color:inherit;text-align:left;font:inherit}
.gal .ph.empty{background:linear-gradient(145deg,var(--t1,#3a2a17),var(--t2,#1d1813))}
.gal .ph.empty:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 16px,#ffffff08 16px 17px)}
.gal .ph img{width:100%;height:auto;transition:transform .6s}
.gal .ph:hover img{transform:scale(1.05)}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(transparent,#000c);font-size:.85rem;opacity:0;transform:translateY(8px);transition:.3s}
.gal .ph:hover .cap,.gal .ph:focus-visible .cap{opacity:1;transform:none}
@media(hover:none){.gal .cap{opacity:1;transform:none}}
.gal .ph.empty .cap{opacity:1;transform:none;background:none;color:var(--mut)}
.svc .card svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;margin-bottom:14px}
.svc .card{transition:transform .3s,border-color .3s}.svc .card:hover{transform:translateY(-4px);border-color:var(--gold)}
#paket-list .card{display:flex;flex-direction:column}#paket-list .card ul{flex:1}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,#5a3a17,#17130f 70%);display:grid;place-items:end start;padding:20px;color:var(--mut);font-size:.85rem;position:relative}
.testi{position:relative;max-width:760px;min-height:210px;margin-top:18px}
.testi blockquote{position:absolute;inset:0 0 56px;opacity:0;visibility:hidden;transition:.5s}
.testi blockquote.on{opacity:1;visibility:visible;position:relative}
.testi p{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.25}
.testi cite{display:block;margin-top:14px;color:var(--gold);font-style:normal;font-size:.9rem}
.tctl{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--mut)}
.cta-band{text-align:center;background:radial-gradient(700px 320px at 50% 0,#5c1a26,transparent 70%),var(--bg2)}
.cta-band .btn{margin-top:22px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.flogo{font-family:var(--serif);font-size:1.3rem;color:var(--tx);font-weight:500}
footer a{color:var(--mut)}footer a:hover{color:var(--tx)}
dialog#lb{border:0;background:#000e;color:var(--tx);width:100%;max-width:100vw;height:100%;max-height:100vh;padding:0}
dialog#lb::backdrop{background:#000}
dialog#lb[open]{display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
#lbc{display:grid;place-items:center;height:100%;padding:60px 0 40px;text-align:center}
#lbc img{max-height:100%;max-width:100%;object-fit:contain}
#lbc .empty{width:min(80vw,520px);aspect-ratio:4/5;border-radius:16px;background:linear-gradient(145deg,#3a2a17,#1d1813);display:grid;place-items:center;color:var(--mut)}
#lbx{position:absolute;top:14px;right:14px}
.nav{background:none;border:0;color:var(--tx);font-size:2.6rem;height:100%}
.nav:hover{color:var(--gold)}
@media(max-width:560px){dialog#lb[open]{grid-template-columns:40px 1fr 40px}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}