/* invitation.id — base style (font rounded komersial-aman: Nunito) */
:root{
  --brand:#c9a24b; --brand-dark:#8a6a25;
  --ink:#2b2b2b; --muted:#6f6f6f; --bg:#ffffff; --soft:#f7f5ef; --line:#ececec;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito',-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:1080px;margin:0 auto;padding:0 18px}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:5px;font-weight:700;border:2px solid var(--brand);background:var(--brand);color:#2b2b2b;cursor:pointer}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none;color:#fff}
.btn.outline{background:#fff;color:var(--brand-dark)}
.btn.lg{padding:.9rem 1.8rem;font-size:1.05rem}
.muted{color:var(--muted)}
.center{text-align:center}

/* Navbar diperbesar */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;font-weight:800;font-size:1.6rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--brand)}
.nav ul{display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.nav ul a{color:var(--ink);font-weight:600;font-size:1.08rem;padding:.6rem .9rem;border-radius:5px}
.nav ul a:hover{background:var(--soft);text-decoration:none}
.nav .cta a{background:var(--brand);color:#2b2b2b}
.nav .cta a:hover{background:var(--brand-dark)}

section{padding:72px 0}
.hero{background:linear-gradient(180deg,var(--soft),#fff)}
.hero h1{font-size:2.6rem;font-weight:800;line-height:1.15;margin:.2rem 0}
.hero .lead{font-size:1.2rem;color:#555;max-width:620px}
.h-title{font-size:2rem;font-weight:800;text-align:center;margin:0 0 8px}
.h-sub{text-align:center;color:var(--muted);margin:0 0 36px}

.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:840px){.grid.c3,.grid.c4{grid-template-columns:1fr 1fr}.hero h1{font-size:2rem}}
@media(max-width:520px){.grid.c3,.grid.c4{grid-template-columns:1fr}.nav ul a{padding:.5rem .6rem;font-size:1rem}}

.card{border:1px solid var(--line);border-radius:5px;padding:22px;background:#fff;transition:.2s}
.card:hover{box-shadow:0 12px 30px rgba(0,0,0,.07);transform:translateY(-3px)}
.svc{text-align:center}.svc .ic{font-size:2.2rem}
.price{border:1px solid var(--line);border-radius:5px;padding:28px;text-align:center}
.price.pop{border:2px solid var(--brand);box-shadow:0 14px 34px rgba(201,162,75,.18)}
.price .amt{font-size:2rem;font-weight:800;color:var(--ink)}
.price ul{list-style:none;padding:0;margin:16px 0;text-align:left}
.price li{padding:6px 0;border-bottom:1px dashed var(--line)}
.badge{display:inline-block;background:#eef7f0;color:#3f9d6a;font-size:.72rem;font-weight:800;padding:3px 12px;border-radius:5px;letter-spacing:.5px}

footer{background:#23201b;color:#cbc6bd;padding:48px 0 24px}
footer a{color:#e8c878}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:680px){footer .cols{grid-template-columns:1fr}}
footer .bot{border-top:1px solid #3a352d;margin-top:28px;padding-top:16px;text-align:center;font-size:.9rem}

/* form */
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:.7rem .9rem;border:1px solid #d8d8d8;border-radius:5px;font:inherit}
.box{max-width:460px;margin:60px auto;padding:30px;border:1px solid var(--line);border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.05)}

/* footer mini di undangan gratis/premium */
.inv-credit{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:.8rem;background:rgba(0,0,0,.55);color:#fff;padding:6px}
.inv-credit a{color:#ffd98a}

/* Header area member di HP: menu bagian beranda (Beranda/Layanan/Harga/Cara Kerja) disembunyikan
   supaya logo + tombol Dashboard/Login + pengalih produk muat satu baris tanpa meluber (≥320px). */
.nav .brand{flex-shrink:0}
.nav ul a{white-space:nowrap}
@media(max-width:840px){.nav .nav-sec{display:none}}
@media(max-width:400px){.nav .container{gap:8px}.nav ul{gap:2px}.nav .brand img{height:28px}.nav ul a{padding:.45rem .7rem;font-size:.92rem}}