/* NikahLink landing — melati (putih), tinta (hijau tua), daun (hijau), kelopak (merah muda), emas */
@property --halo{syntax:'<color>';inherits:true;initial-value:#cfe2d9}
:root{--melati:#F8F9F5;--kabut:#EAEEE7;--tinta:#16231F;--mut:#586661;--daun:#1E5E4E;--daun-d:#154538;--kelopak:#F2DDE0;--emas:#B48A34;--line:rgba(22,35,31,.14);
--hf:"Gloock",Georgia,serif;--bf:"Plus Jakarta Sans",system-ui,sans-serif;--halo:#cfe2d9;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--melati);color:var(--tinta);font:400 1.05rem/1.7 var(--bf);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
h1,h2{font-family:var(--hf);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.06}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.12}
h3{font:700 1.05rem/1.4 var(--bf)}
p{margin:0}
a{color:inherit}
:is(a,button,summary):focus-visible{outline:3px solid var(--emas);outline-offset:3px;border-radius:8px}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--daun);color:#fff;font:700 .95rem var(--bf);text-decoration:none;border:1.5px solid var(--daun);cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--daun-d);transform:translateY(-1px)}
.btn.big{min-height:52px;padding:0 28px;font-size:1rem}
.btn.ghost{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn.ghost:hover{background:var(--tinta);color:#fff}
.btn.light{background:#fff;color:var(--tinta);border-color:#fff}
.btn.light:hover{background:var(--kelopak);color:var(--tinta)}
.btn.ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.ghost-l:hover{background:rgba(255,255,255,.12)}

/* Header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;padding:12px max(20px,calc((100vw - var(--max))/2));background:rgba(248,249,245,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;font:400 1.5rem var(--hf);text-decoration:none}
.brand svg{width:22px;height:22px;fill:var(--daun)}
.brand.sm{font-size:1.2rem}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{font-weight:500;font-size:.95rem;text-decoration:none;color:var(--mut)}
.top nav a:hover{color:var(--tinta)}
.top-act{display:flex;align-items:center;gap:14px}
.link{font-weight:700;font-size:.92rem;text-decoration:none}
.link:hover{text-decoration:underline}
/* Label tombol header: pendek di layar kecil */
.top .btn{white-space:nowrap}.top .sm{display:none}
@media(max-width:900px){.top nav{display:none}.top-act{margin-left:auto}}
@media(max-width:480px){.top .link{display:none}.top .lg{display:none}.top .sm{display:inline}}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:var(--max);margin:0 auto;padding:56px 20px 72px}
.lead{margin-top:22px;max-width:34em;font-size:1.15rem;color:var(--mut)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cta-row.mid{justify-content:center}
.checks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:8px}
.checks li{position:relative;padding-left:28px;color:var(--tinta);font-weight:500}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:2.5px solid var(--daun);border-bottom:2.5px solid var(--daun);transform:rotate(-45deg) scale(.9)}
.stage{position:relative;display:grid;justify-items:center;gap:22px;overflow-x:clip;width:100%}
.halo{position:absolute;top:2%;left:50%;width:min(130%,560px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--halo),transparent 72%);transition:--halo .9s ease}
.phone{--pw:clamp(250px,26vw,310px);position:relative;width:var(--pw);padding:9px;border-radius:44px;background:var(--tinta);box-shadow:0 40px 70px -20px rgba(22,35,31,.45),0 0 0 1.5px rgba(255,255,255,.12) inset}
.notch{position:absolute;top:16px;left:50%;width:70px;height:18px;transform:translateX(-50%);border-radius:99px;background:#0b1412;z-index:2}
.screen{position:relative;width:100%;aspect-ratio:390/780;border-radius:36px;overflow:hidden;background:#fff}
.screen iframe{position:absolute;top:0;left:0;width:390px;height:780px;border:0;transform-origin:0 0}
.picker{position:relative;display:grid;gap:12px;justify-items:center;text-align:center;max-width:380px}
.dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dot{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px rgba(22,35,31,.25);cursor:pointer;transition:transform .2s}
.dot:hover{transform:scale(1.12)}
.dot[aria-pressed=true]{box-shadow:0 0 0 2px var(--tinta);transform:scale(1.15)}
.picked{display:grid;gap:2px;font-size:.92rem;color:var(--mut)}
.picked strong{font-size:1.02rem;color:var(--tinta)}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:36px}.phone{--pw:min(76vw,300px)}}

/* Bagian umum */
.sec{max-width:var(--max);margin:0 auto;padding:84px 20px}
.head{max-width:44rem;margin-bottom:34px}
.head p{margin-top:12px;color:var(--mut)}

/* Galeri tema */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 18px;scrollbar-width:none}
.chips button{flex:none;min-height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:transparent;font:500 .92rem var(--bf);color:var(--tinta);cursor:pointer}
.chips button.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.th{display:grid;gap:4px;text-decoration:none;align-content:start}
.th[hidden]{display:none}
.th-view{position:relative;display:block;aspect-ratio:390/640;overflow:hidden;border-radius:18px;background:var(--a);box-shadow:0 18px 34px -18px rgba(22,35,31,.5);transition:transform .3s}
.th:hover .th-view,.th:focus-visible .th-view{transform:translateY(-4px)}
.th-view iframe{position:absolute;top:0;left:0;width:390px;height:640px;border:0;transform-origin:0 0;pointer-events:none}
.th-view em{position:absolute;top:10px;left:10px;padding:2px 10px;border-radius:99px;background:var(--tinta);color:#fff;font:700 .72rem var(--bf);font-style:normal}
.th-view b{position:absolute;left:10px;right:10px;bottom:10px;padding:9px;border-radius:12px;background:rgba(255,255,255,.94);color:var(--tinta);font:700 .85rem var(--bf);text-align:center;opacity:0;transform:translateY(6px);transition:.25s}
.th:hover b,.th:focus-visible b{opacity:1;transform:none}
.th-name{margin-top:10px;font:700 1.02rem var(--bf)}
.th-desc{font-size:.88rem;line-height:1.5;color:var(--mut)}
@media(max-width:980px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr);gap:22px 14px}.th-view b{opacity:1;transform:none;font-size:.78rem}}

/* Fitur */
.band{background:var(--kabut)}
.band.tint{background:var(--kelopak)}
.band .inner{padding-block:84px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.two h3{font:400 1.5rem var(--hf);margin-bottom:6px;padding-bottom:12px;border-bottom:2px solid var(--tinta)}
dl{margin:0}
dl>div{padding:16px 0;border-bottom:1px solid var(--line)}
dt{font-weight:700}
dd{margin:2px 0 0;color:var(--mut);font-size:.98rem}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:40px}}

/* Cara kerja */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 24px 0 0;border-top:2px solid var(--tinta)}
.steps li::before{content:counter(s);display:block;margin:-18px 0 14px;width:34px;height:34px;border-radius:50%;background:var(--melati);border:2px solid var(--tinta);display:grid;place-items:center;font:700 .9rem var(--bf)}
.steps h3{margin-bottom:6px}
.steps p{color:var(--mut);font-size:.97rem}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:34px 18px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* Harga */
.price{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.price .head{margin:0}
.plan{background:#fff;border-radius:26px;padding:34px 32px;box-shadow:0 30px 50px -30px rgba(22,35,31,.4)}
.amount{font:400 2.8rem/1.1 var(--hf)}
.amount span{font-size:1.3rem;margin-right:6px;color:var(--mut)}
.plan-note{margin-top:4px;color:var(--mut);font-size:.95rem}
.plan ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:10px}
.plan li{position:relative;padding-left:28px}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:15px;height:8px;border-left:2.5px solid var(--daun);border-bottom:2.5px solid var(--daun);transform:rotate(-45deg)}
@media(max-width:820px){.price{grid-template-columns:1fr;gap:30px}}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq .head{margin:0}
@media(max-width:820px){.faq{grid-template-columns:1fr;gap:26px}}
.qa{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 1.6rem var(--bf);transition:transform .25s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 40px 22px 0;color:var(--mut)}

/* Penutup */
.finale{background:var(--tinta);color:#fff;text-align:center;padding:90px 20px}
.finale h2{max-width:20em;margin:0 auto}
.finale p{margin-top:14px;color:rgba(255,255,255,.75)}
.finale .cta-row{margin-top:30px}
.foot{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:30px 20px;font-size:.92rem;color:var(--mut)}
.foot span:nth-child(2){display:flex;gap:22px}
.foot a{text-decoration:none;font-weight:500}.foot a:hover{text-decoration:underline}

/* ---------- Katalog, paket, detail (gaya festa) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.h1s{font:400 clamp(2.2rem,5vw,3.4rem)/1.1 var(--hf);letter-spacing:-.01em}
.top nav a[aria-current]{color:var(--tinta)}
.th-row{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;color:var(--mut)}
.th-price{font-weight:700;color:var(--tinta)}

/* Deretan tema (geser ke samping) */
.strip-sec{max-width:var(--max);margin:0 auto;padding:8px 20px 72px}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.more{font-weight:700;font-size:.95rem;text-decoration:none;border-bottom:2px solid var(--tinta)}
.strip{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 22px;scroll-snap-type:x proximity;scrollbar-width:thin}
.strip .th{flex:0 0 clamp(150px,38vw,200px);scroll-snap-align:start}

/* Paket */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:26px;padding:30px 28px;box-shadow:0 30px 50px -34px rgba(22,35,31,.45)}
.plan.hl{outline:2.5px solid var(--daun)}
.plan-badge{position:absolute;top:-13px;left:24px;padding:3px 14px;border-radius:99px;background:var(--daun);color:#fff;font:700 .78rem var(--bf)}
.plan h3{font:400 1.7rem var(--hf)}
.plan-tag{margin-top:4px;color:var(--mut);font-size:.95rem;min-height:3em}
.amount{margin-top:14px;font:400 2.3rem/1.1 var(--hf)}
.plan-note{margin-top:2px;color:var(--mut);font-size:.92rem}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:9px;font-size:.97rem}
.plan li{position:relative;padding-left:26px}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:7px;border-left:2.5px solid var(--daun);border-bottom:2.5px solid var(--daun);transform:rotate(-45deg)}
.btn.wide{width:100%;margin-top:auto}
@media(max-width:900px){.plans{grid-template-columns:1fr;gap:26px}.plan-tag{min-height:0}}
.compare{margin-top:28px}
.compare summary{display:inline-block;padding:0 0 4px;border-bottom:2px solid var(--tinta);font-weight:700;cursor:pointer}
.compare summary::after{content:none}
.compare[open] summary{margin-bottom:18px}
.tbl{overflow-x:auto;background:#fff;border-radius:18px}
.tbl table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:700 1rem var(--bf)}
.tbl thead small{display:block;font-weight:500;color:var(--mut)}
.tbl tbody th{font-weight:700;width:26%}
.tbl tr:last-child>*{border-bottom:0}
.common-h{margin:38px 0 14px;font:400 1.5rem var(--hf)}
.common{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px}
.common.one{grid-template-columns:1fr}
.common li{position:relative;padding-left:26px}
.common li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:7px;border-left:2.5px solid var(--daun);border-bottom:2.5px solid var(--daun);transform:rotate(-45deg)}
@media(max-width:820px){.common{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.common{grid-template-columns:1fr}}

/* Testimoni (hanya tampil bila diisi) */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quotes figure{margin:0;padding:24px;background:#fff;border-radius:20px;border:1px solid var(--line)}
.quotes blockquote{margin:0 0 14px;font:400 1.25rem/1.4 var(--hf)}
.quotes figcaption{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--mut)}
.quotes strong{color:var(--tinta)}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* Katalog */
.cat-tools{display:grid;gap:14px;margin-bottom:26px}
.search input{width:100%;max-width:30rem;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:500 1rem var(--bf);color:var(--tinta)}
.search input:focus-visible{outline:3px solid var(--emas);outline-offset:2px}
.empty{padding:40px 0;text-align:center;color:var(--mut)}
.cat .gallery{margin-top:0}

/* Detail tema */
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:26px;font-size:.92rem;color:var(--mut)}
.crumb a{font-weight:700;color:var(--tinta);text-decoration:none}.crumb a:hover{text-decoration:underline}
.det{padding-top:36px}
.det-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.det-stage{position:sticky;top:96px;display:grid;justify-items:center;overflow-x:clip}
.det-stage .halo{top:6%}
.det-tags{margin-top:8px;color:var(--mut);font-weight:500}
.tag-b{margin-left:8px;padding:2px 10px;border-radius:99px;background:var(--tinta);color:#fff;font-size:.75rem}
.lead.sm{margin-top:14px;font-size:1.08rem}
.pick{margin:28px 0;padding:22px;background:#fff;border-radius:22px;box-shadow:0 24px 44px -30px rgba(22,35,31,.45);display:grid;gap:12px}
.pick-h{font:700 1rem var(--bf);margin:0 0 2px}
.pick-opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.opt:has(input:checked){border-color:var(--daun);background:#F1F7F4}
.opt input{accent-color:var(--daun);width:18px;height:18px;margin:0}
.opt span{display:grid;flex:1}.opt small{color:var(--mut)}
.opt b{font-weight:700}
.btn.wide{margin-top:0}
.specs{margin:0 0 8px}
.specs>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--mut)}.specs dd{margin:0;font-weight:700;text-align:right}
.sw{display:flex;gap:6px;justify-content:flex-end}.sw i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(22,35,31,.25)}
@media(max-width:860px){.det-grid{grid-template-columns:1fr;gap:34px}.det-stage{position:relative;top:0}}