:root{
  --olive:#6F6C3B;--olive-d:#55532C;--cream:#F6EEDC;--paper:#FBF7EE;--maroon:#8E2B2B;--maroon-d:#6F1F1F;
  --butter:#F3E2A2;--pink:#F4CBD1;--mint:#A9D8BD;--sky:#C7DCEC;--lilac:#D9D3EE;--cocoa:#3A2A21;--muted:#7A6A5E;
  --r:26px;--shadow:0 14px 34px rgba(58,42,33,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--cocoa);background:var(--paper);line-height:1.65;font-size:16.5px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:700;line-height:1.12;margin:0 0 .45em;letter-spacing:-.01em}
p{margin:0 0 1em}
svg{width:1em;height:1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.hand{font-family:"Gochi Hand",cursive;color:var(--maroon);font-size:24px;margin:0 0 4px;transform:rotate(-2deg);display:inline-block}
.row{display:flex;gap:12px;flex-wrap:wrap}
.center{text-align:center;margin-top:30px}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-radius:999px;padding:13px 24px;border:0;cursor:pointer;font:inherit;font-weight:800;transition:transform .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn svg{width:18px;height:18px}
.btn-maroon{background:var(--maroon);color:#fff;box-shadow:0 8px 0 var(--maroon-d)}
.btn-maroon:hover{background:#A03434}
.btn-cream{background:var(--cream);color:var(--cocoa);box-shadow:0 8px 0 #D9CBA8}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,247,238,.9);backdrop-filter:blur(12px);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 6px 24px rgba(58,42,33,.08)}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:8px;color:var(--maroon)}
.logo .flower{width:34px;height:34px;color:var(--maroon);transition:transform .6s}
.logo:hover .flower{transform:rotate(72deg)}
.logo span{font-family:"Gochi Hand",cursive;font-size:30px;line-height:1;color:var(--cocoa)}
.logo span b{font-weight:400;color:var(--maroon);margin-left:2px}
.logo.light span{color:var(--cream)}.logo.light .flower{color:var(--pink)}
.menu{display:flex;gap:6px;margin-left:auto}
.menu a{padding:8px 14px;border-radius:999px;font-weight:700}
.menu a:hover{background:var(--cream)}
.nav-cta{padding:10px 20px;box-shadow:0 5px 0 var(--maroon-d)}
.burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--cream);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{width:20px;height:2.5px;background:var(--cocoa);border-radius:2px;transition:.2s}
.nav.open .burger i:first-child{transform:translateY(4.2px) rotate(45deg)}
.nav.open .burger i:last-child{transform:translateY(-4.2px) rotate(-45deg)}

/* hero */
.hero{position:relative;background:var(--olive);color:var(--cream);overflow:hidden;border-radius:0 0 48px 48px}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:64px 20px 80px;position:relative;z-index:1}
.hero .hand{color:var(--butter);font-size:28px}
.hero h1{font-size:clamp(38px,5.4vw,66px);color:#FFF8E8}
.hero h1 em{font-style:italic;color:var(--pink)}
.hero .lead{font-size:18px;color:#ECE5CC;max-width:520px;margin-bottom:28px}
.blob{position:absolute;border-radius:50%;opacity:.9;filter:drop-shadow(0 8px 0 rgba(0,0,0,.08))}
.blob::before,.blob::after{content:"";position:absolute;border-radius:50%;background:inherit}
/* bentuk awan/bunga seperti properti foto byJuju */
.b1{width:120px;height:90px;background:var(--butter);left:-30px;top:40px}
.b1::before{width:80px;height:80px;left:50px;top:-30px}.b1::after{width:70px;height:70px;left:90px;top:20px}
.b2{width:90px;height:70px;background:var(--sky);left:42%;bottom:30px}
.b2::before{width:60px;height:60px;left:40px;top:-24px}.b2::after{width:56px;height:56px;left:70px;top:12px}
.b3{width:70px;height:70px;background:var(--pink);right:3%;top:30px}
.b3::before{width:50px;height:50px;left:40px;top:-14px}.b3::after{width:46px;height:46px;left:-20px;top:30px}
.b4{width:60px;height:60px;background:var(--lilac);left:8%;bottom:60px}
.b4::before{width:40px;height:40px;left:36px;top:-12px}.b4::after{width:36px;height:36px;left:40px;top:30px}
.hero-art{position:relative;height:540px}
.arch{position:absolute;margin:0;overflow:hidden;border-radius:999px 999px 28px 28px;border:6px solid var(--cream);box-shadow:0 20px 40px rgba(0,0,0,.22);background:var(--cream)}
.arch img{width:100%;height:100%;object-fit:cover}
.a1{width:44%;height:76%;left:0;top:8%;transform:rotate(-4deg);z-index:2}
.a2{width:40%;height:62%;right:4%;top:0;transform:rotate(4deg)}
.a3{width:42%;height:52%;right:14%;bottom:0;transform:rotate(-2deg);z-index:3}
.sticker{position:absolute;left:38%;top:-4px;z-index:4;background:var(--maroon);color:#fff;font-family:"Gochi Hand",cursive;font-size:19px;line-height:1.05;text-align:center;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;transform:rotate(-12deg);box-shadow:0 8px 20px rgba(0,0,0,.25);animation:wob 4s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-4deg) scale(1.05)}}

/* ribbon */
.ribbon{background:var(--maroon);color:var(--cream);overflow:hidden;padding:12px 0;margin-top:-24px;position:relative;z-index:2;transform:rotate(-1.2deg);width:104%;margin-left:-2%}
.ribbon-in{display:flex;gap:30px;width:max-content;animation:marq 28s linear infinite;font-family:"Gochi Hand",cursive;font-size:22px;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:90px 0}
.head{text-align:center;max-width:640px;margin:0 auto 40px}
.head h2{font-size:clamp(32px,4vw,48px)}
.head p:not(.hand){color:var(--muted);font-size:17.5px}

/* koleksi */
.tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.tabs button{border:2px solid var(--cocoa);background:transparent;border-radius:999px;padding:8px 18px;font:inherit;font-weight:800;cursor:pointer;color:var(--cocoa);transition:.15s}
.tabs button.on,.tabs button:hover{background:var(--cocoa);color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .25s;position:relative}
.card:nth-child(3n+1){transform:rotate(-.6deg)}.card:nth-child(3n+3){transform:rotate(.6deg)}
.card:hover{transform:translateY(-6px) rotate(0)}
.card .im{aspect-ratio:4/5;overflow:hidden;background:var(--cream)}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .im img{transform:scale(1.05)}
.card .bd{padding:18px 20px 22px}
.card h3{font-size:22px;margin-bottom:4px}
.card p{color:var(--muted);font-size:15px;margin:0}
.card .lbl{position:absolute;top:14px;left:14px;background:var(--cream);color:var(--maroon);font-family:"Gochi Hand",cursive;font-size:18px;padding:3px 12px;border-radius:999px;transform:rotate(-3deg)}
.card .dots{display:flex;gap:6px;margin-top:12px}
.card .dots i{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #E3D8C3}

/* cerita */
.cerita{background:var(--cream);border-radius:48px;margin:0 12px}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.cerita h2{font-size:clamp(30px,3.6vw,44px)}
.polaroids{position:relative;height:520px}
.pol{position:absolute;margin:0;background:#fff;padding:12px 12px 46px;box-shadow:var(--shadow);width:62%}
.pol img{aspect-ratio:3/4;object-fit:cover;width:100%}
.pol figcaption{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-family:"Gochi Hand",cursive;font-size:22px}
.p1{left:0;top:30px;transform:rotate(-6deg)}
.p2{right:0;top:0;transform:rotate(5deg)}
.pol::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;background:rgba(243,226,162,.85);transform:translateX(-50%) rotate(-3deg)}
.vals{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.vals li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start}
.vals span{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--maroon);font-size:20px}
.vals b{display:block}
.vals li{color:var(--muted);font-size:15px}
.vals li b{color:var(--cocoa);font-size:16.5px}

/* detail */
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.details figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.details img{aspect-ratio:1;object-fit:cover;width:100%}
.details figcaption{padding:16px 20px 20px;color:var(--muted);font-size:15px}
.details figcaption b{display:block;font-family:Fraunces,serif;font-size:20px;color:var(--cocoa)}

/* event */
.event-sec{background:repeating-conic-gradient(#E4ECF5 0 25%,#F6F8FB 0 50%) 0 0/36px 36px}
.event{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;background:var(--paper);border:3px dashed var(--maroon);border-radius:32px;padding:36px}
.event img{border-radius:20px;box-shadow:var(--shadow);transform:rotate(-2deg)}
.event h2{font-size:clamp(28px,3.4vw,40px);color:var(--maroon)}
.event dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:16px 0 18px;font-size:17px}
.event dt{color:var(--muted)}.event dd{margin:0;font-weight:800}

/* belanja */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shop-card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;transition:transform .2s}
.shop-card:hover{transform:translateY(-5px)}
.shop-card .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:10px}
.shop-card .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.shopee{background:#FFE4DA;color:#EE4D2D}.ic.ig{background:var(--pink);color:var(--maroon)}.ic.bazaar{background:var(--butter);color:var(--olive-d)}
.shop-card b{font-family:Fraunces,serif;font-size:22px}
.shop-card span{color:var(--muted);font-size:15px;flex:1}
.shop-card i{font-style:normal;font-weight:800;color:var(--maroon);margin-top:8px}

/* instagram */
.ig-sec{background:var(--olive);color:var(--cream);border-radius:48px 48px 0 0}
.ig-sec .hand{color:var(--butter)}
.ig-sec .head p:not(.hand){color:#E5DEC3}
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.igrid a{aspect-ratio:1;overflow:hidden;border-radius:16px;position:relative}
.igrid img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.igrid a:hover img{transform:scale(1.08)}
.igrid a::after{content:"";position:absolute;inset:0;background:rgba(142,43,43,.0);transition:.2s}
.igrid a:hover::after{background:rgba(142,43,43,.25)}

/* footer */
.foot{background:var(--olive-d);color:#D9D2B6;padding:50px 0 24px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.foot p{margin-top:12px;font-size:15px}
.foot-links a{display:block;margin-bottom:8px;font-weight:700}
.foot-links a:hover{color:var(--butter)}
.copy{text-align:center;font-size:13.5px;margin-top:30px;opacity:.8}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(40,30,20,.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:var(--paper);border-radius:28px;max-width:860px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;position:relative;animation:pop .25s}
@keyframes pop{from{transform:scale(.95);opacity:0}}
.modal-box img{width:100%;height:100%;object-fit:cover;min-height:360px}
.modal-box .bd{padding:34px 30px}
.modal-box h3{font-size:30px}
.modal-box .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;font-size:24px;cursor:pointer;z-index:2;box-shadow:var(--shadow)}
.modal-box ul{padding-left:20px;color:var(--muted)}
.modal-box .row{margin-top:20px}

/* install banner */
.install{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:430px;margin:0 auto;background:#fff;border-radius:22px;box-shadow:0 20px 50px rgba(58,42,33,.3);padding:14px;display:flex;gap:12px;align-items:center}
.install img{width:48px;height:48px;border-radius:14px}
.install div{flex:1;font-size:13.5px;line-height:1.35}.install div b{display:block;font-size:15px}
.install .x{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer}
.install .btn{padding:9px 16px;box-shadow:0 4px 0 var(--maroon-d)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.card.rv.in:nth-child(3n+1){transform:rotate(-.6deg)}.card.rv.in:nth-child(3n+3){transform:rotate(.6deg)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation:none!important}}

@media (max-width:960px){
  .menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:var(--paper);padding:10px 16px 20px;box-shadow:0 20px 40px rgba(58,42,33,.12);transform:translateY(-130%);transition:transform .25s;margin:0}
  .nav.open .menu{transform:none}
  .menu a{padding:13px 16px;border-radius:14px}
  .burger{display:flex}.nav-cta{margin-left:auto}
  .hero-in{grid-template-columns:1fr;padding:44px 20px 70px}
  .hero-art{height:420px}
  .split,.event{grid-template-columns:1fr}
  .polaroids{height:440px;max-width:520px;margin:0 auto;width:100%}
  .cards{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:1fr}
  .igrid{grid-template-columns:repeat(3,1fr)}
  .event img{max-width:360px;margin:0 auto}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .nav-in{height:64px;gap:12px}.menu{inset:64px 0 auto 0}
  .logo span{font-size:26px}.logo .flower{width:28px;height:28px}
  .nav-cta{padding:9px 16px}
  .sec{padding:64px 0}
  .hero{border-radius:0 0 32px 32px}
  .hero-art{height:340px}
  .b1{transform:scale(.55);left:auto;right:-50px;top:auto;bottom:24px}
  .b3{transform:scale(.6);top:auto;bottom:46%;right:-40px}
  .sticker{width:84px;height:84px;font-size:16px}
  .cards{grid-template-columns:1fr 1fr;gap:14px}
  .card .bd{padding:12px 12px 14px}.card h3{font-size:17px}.card p{font-size:13px}
  .card .lbl{font-size:14px;top:8px;left:8px}
  .details{grid-template-columns:1fr}
  .cerita{margin:0 6px;border-radius:32px}
  .polaroids{height:360px}
  .event{padding:22px}
  .foot-in{grid-template-columns:1fr 1fr}.foot-in>div:first-child{grid-column:1/-1}
  .modal-box{grid-template-columns:1fr}.modal-box img{min-height:0;max-height:52vh}
  .modal-box .bd{padding:22px}
  .ig-sec{border-radius:32px 32px 0 0}
}