:root{

/* =========================================
MAIN SOFT BROWN THEME
TUKAR WARNA DEKAT SINI SAHAJA
========================================= */

/* MAIN */
--barbie:#A97862;
--barbie-dark:#8D624F;
--barbie-deep:#704A3A;

/* ACCENT */
--hot:#C99A7E;

/* BACKGROUND */
--light-pink:#F8F2EE;
--soft-pink:#EEE0D7;

/* SURFACE */
--white:#FFFFFF;

/* TEXT */
--text:#30231E;
--muted:#92796E;
--muted-strong:#725C52;

/* BORDER */
--line:#E4D2C8;
--line-strong:#CBAE9E;

/* =========================================
OLD VARIABLE ALIASES
========================================= */

--brown:var(--barbie);
--brown2:var(--barbie-dark);
--brown3:var(--barbie-deep);

--cream:var(--light-pink);
--paper:var(--white);

--gold:var(--hot);
--gold2:var(--soft-pink);

/* =========================================
OVERLAY
========================================= */

--overlay:rgba(48,35,30,.55);

/* =========================================
SHADOW
========================================= */

--shadow:0 12px 30px rgba(74,49,39,.13);
--shadow-soft:0 7px 20px rgba(74,49,39,.08);
--shadow-card:0 8px 18px rgba(74,49,39,.10);
--shadow-strong:0 25px 60px rgba(48,35,30,.25);

/* =========================================
WHITE OPACITY
========================================= */

--white-10:rgba(255,255,255,.10);
--white-35:rgba(255,255,255,.35);
--white-45:rgba(255,255,255,.45);
--white-55:rgba(255,255,255,.55);
--white-65:rgba(255,255,255,.65);
--white-90:rgba(255,255,255,.90);

}



/* =========================================
MAIN
========================================= */

*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:var(--light-pink);
color:var(--text);
font-family:"DM Sans",sans-serif;
}

body.intro-active{
overflow:hidden;
}

button,
input,
select,
textarea{
font:inherit;
}

button{
cursor:pointer;
}

.hidden{
display:none!important;
}

/* =========================================
SITE
========================================= */

.site{
width:100%;
max-width:520px;
min-height:100vh;
margin:auto;
background:var(--light-pink);
position:relative;
overflow:hidden;
}

/* =========================================
INTRO
========================================= */

body.intro-active{
overflow:hidden;
}

.intro{
position:fixed;
inset:0;
z-index:99999;

display:flex;
align-items:center;
justify-content:center;

background:var(--light-pink);

overflow:hidden;

opacity:1;
visibility:visible;

transition:
opacity .55s ease,
visibility .55s ease;
}

.intro.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}


/* =========================================
INTRO STAGE
========================================= */

.intro-stage{
position:relative;

width:100%;
max-width:430px;

height:100dvh;
min-height:600px;

overflow:hidden;

transform:translate3d(0,0,0);
opacity:1;

will-change:
transform,
opacity;
}


/* =========================================
PASSPORT
========================================= */

.intro-passport{
position:absolute;

z-index:10;

left:50%;
top:50%;

width:250px;
height:370px;

border-radius:13px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.04),
transparent 30%
),
repeating-linear-gradient(
35deg,
rgba(255,255,255,.018) 0 1px,
transparent 1px 4px
),
var(--barbie);

box-shadow:
0 18px 35px rgba(80,40,58,.20),
0 5px 10px rgba(80,40,58,.12),
inset 0 0 0 2px var(--barbie-deep),
inset 0 0 0 5px var(--soft-pink);

opacity:0;

transform:
translate(-50%,-44%)
scale(.95);

animation:
introPassportEnter
.75s
cubic-bezier(.2,.8,.2,1)
.08s
forwards;
}


@keyframes introPassportEnter{

0%{
opacity:0;

transform:
translate(-50%,-44%)
scale(.95);
}

100%{
opacity:1;

transform:
translate(-50%,-50%)
scale(1);
}

}


.intro-passport-inner{
position:absolute;

inset:8px;

border:
1px solid
var(--white-55);

border-radius:8px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

color:var(--white);

text-align:center;

overflow:visible;
}


.intro-script{
font-family:"Allura",cursive;

font-size:32px;
font-weight:400;

line-height:.9;

margin:
0 0 3px;
}


.intro-title{
font-family:
"Cormorant Garamond",
serif;

font-size:29px;
font-weight:500;

letter-spacing:2px;

line-height:1;

margin:0;
}


.intro-plane{
display:block;

margin:
7px 0 2px;

font-size:11px;

color:var(--hot);
}


/* =========================================
INTRO FLOWER
========================================= */

.intro-passport .mini-monogram{
position:relative;

z-index:20;

width:155px;
height:155px;

min-width:155px;
min-height:155px;

margin:
5px auto 6px;

padding:0;

display:flex;
align-items:center;
justify-content:center;

border:0;
border-radius:0;

background:transparent;

box-shadow:none;

overflow:visible;
}


.intro-passport .mini-monogram img{
display:block;

width:155px;
height:155px;

max-width:155px;
max-height:155px;

object-fit:contain;

margin:0;
padding:0;

opacity:0;

transform:
scale(.86)
translateY(5px);

filter:none;

animation:
introFlowerReveal
.85s
cubic-bezier(.22,1,.36,1)
.4s
forwards;
}


@keyframes introFlowerReveal{

0%{
opacity:0;

transform:
scale(.86)
translateY(5px);
}

100%{
opacity:1;

transform:
scale(1)
translateY(0);
}

}


.intro-couple{
font-family:
"Cormorant Garamond",
serif;

font-size:16px;
font-weight:600;

letter-spacing:.7px;

line-height:1;

margin-top:3px;
}


.intro-date{
font-family:
"Cormorant Garamond",
serif;

font-size:14px;
font-weight:600;

letter-spacing:1.5px;

line-height:1;

margin-top:7px;
}


/* =========================================
BOARDING PASS
========================================= */

.intro-ticket{
position:absolute;

z-index:5;

left:50%;
top:50%;

width:245px;
height:445px;

border:
1px solid
var(--line);

border-radius:
18px 18px 10px 10px;

background:var(--white);

box-shadow:
0 14px 30px
rgba(80,40,58,.12);

overflow:hidden;

/*
MULA DARI BAWAH
*/
transform:
translate(-50%,80%);

animation:
introTicketSlide
1.35s
cubic-bezier(.18,.85,.2,1)
.48s
forwards;
}


@keyframes introTicketSlide{

0%{
transform:
translate(-50%,80%);
}

100%{
transform:
translate(-50%,-50%);
}

}


.intro-ticket-top{
position:absolute;

top:0;
left:0;
right:0;

height:43px;

display:flex;
align-items:center;
justify-content:center;

background:var(--barbie);

color:var(--white);

font-family:
"Cormorant Garamond",
serif;

font-size:15px;
font-weight:600;

letter-spacing:1.4px;
}


.intro-ticket-body{
position:absolute;

top:43px;
left:0;
right:0;
bottom:62px;

padding:
22px 20px;

background:var(--white);
}


.ticket-label{
font-size:8px;

letter-spacing:1.6px;

color:var(--muted);
}


.ticket-name{
font-family:
"Cormorant Garamond",
serif;

font-size:20px;
font-weight:600;

margin-top:4px;
}


.ticket-meta{
display:flex;
flex-direction:column;

gap:13px;

margin-top:20px;
}


.ticket-meta small{
display:block;

font-size:7px;

letter-spacing:1.3px;

color:var(--muted);
}


.ticket-meta strong{
display:block;

font-family:
"Cormorant Garamond",
serif;

font-size:13px;

margin-top:2px;
}


/* =========================================
BARCODE
========================================= */

.intro-ticket-barcode{
position:absolute;

left:24px;
right:24px;

bottom:13px;

height:42px;

background:
repeating-linear-gradient(
90deg,
var(--text) 0 2px,
transparent 2px 4px,
var(--text) 4px 5px,
transparent 5px 8px,
var(--text) 8px 11px,
transparent 11px 13px
);
}


/* =========================================
OPEN BUTTON
========================================= */

.intro-open{
position:absolute;

z-index:30;

left:50%;

top:
calc(50% + 245px);

transform:
translateX(-50%);

display:flex;
align-items:center;
justify-content:center;

gap:7px;

border:0;

background:transparent;

color:var(--muted-strong);

font-family:
"Cormorant Garamond",
serif;

font-size:13px;

letter-spacing:1.5px;

opacity:0;

pointer-events:none;

animation:
introOpenShow
.4s
ease
1.8s
forwards;
}


.intro-open i{
font-size:11px;

color:var(--barbie);
}


@keyframes introOpenShow{

100%{
opacity:1;

pointer-events:auto;
}

}


/* =========================================
OPEN TRANSITION
SELURUH SET NAIK SEKALI
========================================= */

.intro-stage.opening{
animation:
introStageExit
.85s
cubic-bezier(.4,0,.2,1)
forwards;
}


@keyframes introStageExit{

0%{
transform:translate3d(0,0,0);
opacity:1;
}

50%{
transform:translate3d(0,-52vh,0);
opacity:.8;
}

100%{
transform:translate3d(0,-105vh,0);
opacity:0;
}

}


.intro-stage.opening .intro-passport{
animation:none;

opacity:1;

transform:
translate(-50%,-50%)
scale(1);
}


/*
TICKET KEKAL DI POSISI AKHIR
*/

.intro-stage.opening .intro-ticket{
animation:none;

opacity:1;

transform:
translate(-50%,-50%);
}


/*
OPEN BUTTON HILANG
*/

.intro-stage.opening .intro-open{
animation:none;

opacity:0;

pointer-events:none;

transition:
opacity .2s ease;
}


/* =========================================
INTRO MOBILE / IPHONE SE
========================================= */

@media(max-height:700px){

.intro-stage{
min-height:560px;
}


.intro-passport{
width:215px;
height:320px;
}


.intro-script{
font-size:27px;
}


.intro-title{
font-size:25px;
}


.intro-passport .mini-monogram{
width:125px;
height:125px;

min-width:125px;
min-height:125px;

margin:
2px auto 3px;
}


.intro-passport .mini-monogram img{
width:125px;
height:125px;

max-width:125px;
max-height:125px;
}


.intro-couple{
font-size:14px;
}


.intro-date{
font-size:12px;

margin-top:5px;
}


.intro-ticket{
width:210px;
height:390px;
}


.intro-ticket-top{
height:38px;

font-size:14px;
}


.intro-ticket-body{
top:38px;

bottom:57px;
}


.intro-ticket-barcode{
left:21px;
right:21px;

bottom:12px;

height:38px;
}


.intro-open{
top:
calc(50% + 205px);
}

}

/* =========================================
MAIN PAGE
========================================= */

.main{
padding:22px 16px 105px;
opacity:0;
transform:translateY(20px);
transition:.8s ease;
}

.main.show{
opacity:1;
transform:none;
}

.topline{
text-align:center;
margin:0 0 15px;
}

.topline i{
font-size:17px;
color:var(--barbie);
}

.topline p{
margin:5px 0 0;
font-family:"Cormorant Garamond",serif;
font-size:12px;
letter-spacing:2.6px;
line-height:1.15;
}

/* =========================================
PASSPORT + RSVP CARD
========================================= */

.two-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px;
margin-bottom:13px;
}

.passport-card{
min-height:278px;
border-radius:8px;
background:var(--barbie);
color:var(--white);
padding:17px 12px;
text-align:center;
position:relative;
box-shadow:var(--shadow);
}

.passport-card:after{
content:"";
position:absolute;
inset:6px;
border:1px solid var(--white-45);
border-radius:6px;
}

.passport-card>*{
position:relative;
z-index:2;
}

.passport-card .script{
font-family:"Cormorant Garamond",serif;
font-size:17px;
font-style:italic;
}

.passport-card h3{
font-family:"Cormorant Garamond",serif;
font-size:26px;
font-weight:500;
margin:0 0 12px;
}


/* MAIN PASSPORT FLOWER - KEEP SMALL */

.passport-card .mini-monogram{
width:105px;
height:105px;
margin:8px auto;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:0;
background:transparent;
overflow:hidden;
}

.passport-card .mini-monogram img{
display:block;
width:100%;
height:100%;
max-width:105px;
max-height:105px;
object-fit:contain;
margin:0;
padding:0;
opacity:1;
transform:none;
animation:none;
filter:none;
}

.passport-card strong{
font-family:"Cormorant Garamond",serif;
font-size:14px;
letter-spacing:.7px;
}

.passport-card .date{
margin-top:5px;
font-size:11px;
letter-spacing:2px;
}

.rsvp-mini{
min-height:278px;
background:var(--white);
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
}

.mini-head{
background:var(--barbie);
color:var(--white);
font-family:"Cormorant Garamond",serif;
font-size:22px;
letter-spacing:2px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.rsvp-mini .content{
padding:16px 12px 8px;
text-align:center;
font-size:10px;
line-height:1.6;
flex:1;
}

.rsvp-mini .plane{
font-size:28px;
color:var(--hot);
margin:7px 0 12px;
}

.dark-btn{
border:0;
background:var(--barbie);
color:var(--white);
border-radius:99px;
padding:10px 18px;
font-size:11px;
}

.barcode{
height:38px;
margin:10px 13px 9px;
background:repeating-linear-gradient(
90deg,
var(--text) 0 2px,
transparent 2px 4px,
var(--text) 4px 6px,
transparent 6px 8px,
var(--text) 8px 11px,
transparent 11px 13px
);
}

/* =========================================
MAIN TICKET
========================================= */

.ticket{
background:var(--white);
border:1px solid var(--line);
border-radius:7px;
box-shadow:0 5px 18px rgba(80,40,58,.06);
overflow:hidden;
margin-bottom:14px;
}

.ticket-main{
display:grid;
grid-template-columns:44px 1fr;
}

.ticket-side{
background:var(--barbie);
color:var(--white);
writing-mode:vertical-rl;
transform:rotate(180deg);
display:flex;
align-items:center;
justify-content:center;
font-family:"Cormorant Garamond",serif;
font-size:12px;
letter-spacing:2px;
}

.ticket-content{
padding:14px 12px;
}

.invited{
font-size:8px;
letter-spacing:1.1px;
text-align:center;
color:var(--muted);
}

.couple{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:8px 0 13px;
font-family:"Cormorant Garamond",serif;
font-size:29px;
}

.couple em{
font-size:16px;
}

.flight-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);
}

.flight-meta div{
padding:8px 5px;
border-right:1px solid var(--line);
font-size:8px;
}

.flight-meta div:last-child{
border-right:0;
}

.flight-meta strong{
display:block;
font-size:8px;
margin-bottom:2px;
}

/* =========================================
TRAVEL MEMORY + SAVE THE DATE
========================================= */

.travel-memory-section{
position:relative;
display:grid;
grid-template-columns:1.25fr .85fr;
gap:14px;
min-height:300px;
padding:20px 12px 24px;
overflow:hidden;
background:var(--light-pink);
}


/* =========================================
LEFT - HALL MEMORY
========================================= */

.hall-memory{
position:relative;
min-height:270px;
cursor:pointer;
}


/* POLAROID */

.hall-polaroid{
position:absolute;
width:112px;
padding:7px 7px 24px;
background:var(--white);
box-shadow:0 7px 16px rgba(80,40,58,.16);
transition:.25s ease;
}

.hall-polaroid img{
display:block;
width:100%;
height:90px;
object-fit:cover;
}

.polaroid-caption{
position:absolute;
left:5px;
right:5px;
bottom:6px;
text-align:center;
font-family:"Cormorant Garamond",serif;
font-style:italic;
font-size:12px;
color:var(--muted-strong);
}


/* FIRST PHOTO */

.hall-polaroid-one{
top:8px;
left:20px;
transform:rotate(-5deg);
z-index:2;
}


/* SECOND PHOTO */

.hall-polaroid-two{
top:128px;
left:82px;
transform:rotate(7deg);
z-index:3;
}

.hall-polaroid-two img{
height:82px;
}


/* TAP EFFECT */

.hall-memory:active .hall-polaroid-one{
transform:rotate(-5deg) scale(.97);
}

.hall-memory:active .hall-polaroid-two{
transform:rotate(7deg) scale(.97);
}


/* =========================================
AIRPLANE
========================================= */

.memory-plane{
position:absolute;
top:83px;
right:7px;
font-size:23px;
color:var(--barbie);
transform:rotate(-20deg);
z-index:4;
}


/* =========================================
DOTTED TRAVEL PATH
========================================= */

.flight-path{
position:absolute;
border:1.5px dashed var(--line-strong);
opacity:.75;
}

.path-one{
width:110px;
height:92px;
top:48px;
left:3px;

border-right:0;
border-top-color:transparent;

border-radius:50%;

transform:rotate(-12deg);
}


/* =========================================
LOCATION HINT
========================================= */

.location-hint{
position:absolute;
left:5px;
bottom:1px;

display:flex;
align-items:center;
gap:5px;

font-family:"Montserrat",sans-serif;
font-size:7px;
letter-spacing:.7px;
color:var(--muted);
}

.location-hint i{
font-size:11px;
color:var(--hot);
}


/* =========================================
SAVE THE DATE CARD
========================================= */

.save-date-ticket{
position:relative;
align-self:center;

min-height:225px;
padding:31px 13px 20px;

background:var(--white);

border:1px solid var(--line);
border-radius:3px;

box-shadow:
0 8px 18px rgba(80,40,58,.10);

text-align:center;

transform:rotate(3deg);

cursor:pointer;

transition:
transform .25s ease,
box-shadow .25s ease;
}

.save-date-ticket:active{
transform:rotate(3deg) scale(.97);
}


/* PIN */

.save-pin{
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);

width:9px;
height:9px;

border-radius:50%;
background:var(--soft-pink);

box-shadow:
inset 0 1px 2px rgba(0,0,0,.15),
0 1px 2px rgba(0,0,0,.08);
}


/* TITLE */

.save-title{
font-family:"Cormorant Garamond",serif;
font-size:22px;
font-style:italic;
line-height:1;
color:var(--text);
}


/* RINGS */

.save-rings{
margin-top:12px;

font-family:"Cormorant Garamond",serif;
font-size:24px;
color:var(--muted-strong);
}


/* DATE */

.save-date{
margin-top:8px;

font-family:"Cormorant Garamond",serif;
font-size:25px;
font-weight:500;
letter-spacing:2px;

color:var(--text);
}


/* LINE */

.save-line{
width:72%;
height:1px;

margin:13px auto 11px;

background:var(--hot);
}


/* REMINDER */

.save-reminder{
font-family:"Montserrat",sans-serif;
font-size:7px;
font-weight:500;
line-height:1.5;
letter-spacing:.8px;

color:var(--muted-strong);
}


/* PLANE */

.save-plane{
position:absolute;

left:50%;
bottom:12px;

transform:translateX(-50%) rotate(-8deg);

font-size:15px;
color:var(--hot);
}


/* =========================================
MOBILE - IPHONE SE
========================================= */

@media(max-width:390px){

.travel-memory-section{
grid-template-columns:1.2fr .8fr;
gap:10px;
padding:18px 10px 22px;
min-height:285px;
}

.hall-memory{
min-height:255px;
}

.hall-polaroid{
width:102px;
padding:6px 6px 22px;
}

.hall-polaroid img{
height:80px;
}

.hall-polaroid-one{
left:14px;
}

.hall-polaroid-two{
left:67px;
top:121px;
}

.hall-polaroid-two img{
height:76px;
}

.memory-plane{
top:79px;
right:3px;
font-size:20px;
}

.save-date-ticket{
min-height:215px;
padding-left:9px;
padding-right:9px;
}

.save-title{
font-size:19px;
}

.save-date{
font-size:22px;
}

}

/* =========================================
COUNTDOWN
========================================= */

.section-bar{
height:48px;
background:var(--barbie);
color:var(--white);
display:flex;
align-items:center;
justify-content:center;
position:relative;
font-family:"Cormorant Garamond",serif;
font-size:25px;
letter-spacing:4px;
margin-bottom:10px;
}

.section-bar i{
position:absolute;
right:15px;
font-size:18px;
}

.countdown-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-bottom:15px;
}

.countbox{
border:1px dashed var(--line-strong);
border-radius:16px;
padding:12px 3px;
text-align:center;
background:var(--white);
}

.countbox strong{
font-family:"Cormorant Garamond",serif;
font-size:27px;
font-weight:500;
display:block;
color:var(--barbie);
}

.countbox span{
font-size:9px;
color:var(--muted-strong);
}

/* =========================================
FAMILY
========================================= */

.family{
background:
radial-gradient(circle at top right,rgba(245,138,181,.15),transparent 32%),
linear-gradient(145deg,var(--barbie),var(--barbie-dark));
color:var(--white);
padding:25px 17px 26px;
border-radius:7px;
text-align:center;
margin-bottom:14px;
font-weight: 800;
}

.arabic img{
height: 70px;
width: auto;
}

.gratitude{
font-family:"Cormorant Garamond",serif;
font-size:17px;
margin-bottom:22px;
}

.parents{
  width:100%;
  max-width:360px;
  margin:0 auto;
  text-align:center;
}

.parent-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.parent-title{
  font-size:11px;
  font-weight:400;
  line-height:1;
  opacity:.82;
  margin-bottom:5px;
  min-height:11px;
}

.parent-title-space{
  visibility:hidden;
}

.parent-name{
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  font-weight:600;
  line-height:1.05;
  text-align:center;
}

.parent-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:16px;
  align-items:end;
}

.parents-divider-row{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  column-gap:8px;
  align-items:center;
  margin:0px 0;
}

.parents-line{
  width:1px;
  height:56px;
  background:var(--white-35);
  justify-self:center;
}

.parent-and{
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  font-weight:600;
  line-height:1;
  color:white;
}

.parent-bottom{
  align-items:start;
}

.gold-divider{
width:120px;
height:1px;
background:linear-gradient(
90deg,
transparent,
var(--soft-pink),
transparent
);
margin:8px auto 24px;
}

.invite-copy{
font-family:"Cormorant Garamond",serif;
font-size:15px;
line-height:1.25;
margin-bottom:22px;
}

.full-couple{
font-family:"Italiana",serif;
font-size:22px;
line-height:1.4;
letter-spacing:1.8px;
}

.full-couple span{
display:block;
font-family:"Cormorant Garamond",serif;
font-size:22px;
margin:6px;
}

/* =========================================
WEDDING TIMELINE
========================================= */

.timeline{
  padding:45px 28px 55px;
  text-align:center;
  background:var(--white);
  color:var(--barbie);
}

.timeline h2{
  margin:0 0 38px;
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--barbie);
}

.timeline-list{
  position:relative;
  max-width:390px;
  margin:0 auto;
}

.timeline-item{
  display:grid;
  grid-template-columns:95px 24px 1fr;
  align-items:center;
  min-height:112px;
  position:relative;
}

.timeline-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  color:var(--hot);
}

.timeline-track{
  position:relative;
  align-self:stretch;
  display:flex;
  justify-content:center;
  align-items:center;
}

.timeline-track::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:var(--hot);
  transform:translateX(-50%);
}

.timeline-item:first-child .timeline-track::before{
  top:50%;
}

.timeline-item:last-child .timeline-track::before{
  bottom:50%;
}

.timeline-dot{
  position:relative;
  z-index:2;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--barbie);
}

.timeline-info{
  text-align:left;
  padding-left:20px;
}

.timeline-info strong{
  display:block;
  margin-bottom:6px;
  font-family:"Cormorant Garamond",serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:2px;
  line-height:1;
}

.timeline-info span{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:2px;
  line-height:1.25;
  color:var(--muted-strong);
}

/* MOBILE */
@media(max-width:480px){

  .timeline{
    padding:40px 18px 50px;
  }

  .timeline h2{
    font-size:22px;
    letter-spacing:4px;
    margin-bottom:32px;
  }

  .timeline-item{
    grid-template-columns:82px 22px 1fr;
    min-height:105px;
  }

  .timeline-icon{
    font-size:34px;
  }

  .timeline-info{
    padding-left:15px;
  }

  .timeline-info strong{
    font-size:15px;
  }

  .timeline-info span{
    font-size:14px;
    letter-spacing:1.5px;
  }

  .timeline-dot{
    width:12px;
    height:12px;
  }
}

/* =========================================
CONTACT SECTION - COMPACT
========================================= */

.contact-section{
width:100%;
height:105px;
min-height:0;
padding:12px 20px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

background:linear-gradient(
180deg,
var(--barbie) 0%,
var(--barbie-dark) 100%
);

color:var(--white);
text-align:center;
cursor:pointer;
}

.contact-icon-wrap{
width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:5px;

border:1.5px solid var(--white-90);
border-radius:50%;

font-size:18px;
color:var(--white);
}

.contact-title{
font-family:"Cormorant Garamond",serif;
font-size:19px;
font-weight:600;
letter-spacing:2.5px;
line-height:1;
color:var(--white);
}

.contact-sub{
margin-top:5px;

font-family:"DM Sans",sans-serif;
font-size:6.5px;
letter-spacing:1.2px;
text-transform:uppercase;

color:var(--white-65);
}
/* =========================================
DRESS CODE
========================================= */

.dresscode{
  padding:55px 25px;
  background:var(--barbie);
  color:var(--white);
  text-align:center;
}

.dresscode-inner{
  max-width:420px;
  margin:0 auto;
}

.dresscode-small{
  font-family:"Montserrat",sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:4px;
  opacity:.75;
  margin-bottom:13px;
}

.dresscode h2{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
  font-weight:500;
  letter-spacing:4px;
  line-height:1.1;
}

.dresscode-divider{
  width:55px;
  height:1px;
  background:var(--white-55);
  margin:20px auto;
}

.dresscode p{
  max-width:330px;
  margin:0 auto;
  font-family:"Cormorant Garamond",serif;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  opacity:.9;
}

@media(max-width:480px){

  .dresscode{
    padding:48px 22px;
  }

  .dresscode h2{
    font-size:25px;
    letter-spacing:3px;
  }

  .dresscode p{
    font-size:15px;
  }
}

/* =========================================
GUESTBOOK
========================================= */

.guestbook{
margin:20px 0 24px;
border:1px solid var(--line);
border-radius:9px;
overflow:hidden;
background:var(--white);
box-shadow:var(--shadow-soft);
}

.guestbook-title{
height:50px;
display:flex;
align-items:center;
justify-content:center;
gap:11px;
background:var(--barbie);
color:var(--white);
font-family:"Cormorant Garamond",serif;
font-size:19px;
letter-spacing:2.5px;
}

.guestbook-title i{
font-size:17px;
}

.guestbook-slider{
position:relative;
height:230px;
overflow:hidden;
touch-action:pan-y;
background:var(--white);
}

.wish-track{
display:flex;
height:100%;
transition:transform .42s cubic-bezier(.2,.7,.2,1);
}

.wish-slide{
min-width:100%;
height:100%;
padding:30px 52px 38px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
background:
radial-gradient(circle at 50% 40%,var(--white) 0,var(--white) 100%);
}

.quote-mark{
font-family:"Cormorant Garamond",serif;
font-size:44px;
line-height:.5;
color:var(--hot);
margin-bottom:8px;
}

.wish-text{
font-family:"Cormorant Garamond",serif;
font-size:25px;
font-weight:500;
line-height:1.3;
margin:4px 0 14px;
max-width:300px;
}

.wish-name{
font-family:"DM Sans",sans-serif;
font-size:12px;
font-weight:600;
letter-spacing:.5px;
}

.slide-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
border-radius:50%;
border:0;
background:var(--soft-pink);
color:var(--barbie);
z-index:5;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 3px 9px rgba(80,40,58,.08);
}

.slide-arrow.left{
left:9px;
}

.slide-arrow.right{
right:9px;
}

.dots{
position:absolute;
bottom:13px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:6;
}

.dot{
width:7px;
height:7px;
border:1px solid var(--line-strong);
border-radius:50%;
background:transparent;
transition:.25s;
}

.dot.active{
background:var(--barbie);
transform:scale(1.15);
}


/* =========================================
FOOTER
========================================= */

.footer{
width:100%;
margin-top:34px;
padding:26px 16px 120px;
text-align:center;
background:var(--light-pink);
color:var(--text);
position:relative;
}

.footer>i{
font-size:18px;
color:var(--text);
margin-bottom:10px;
}

.footer p{
margin:0;
font-family:"Cormorant Garamond",serif;
font-size:11px;
font-weight:500;
line-height:1.5;
letter-spacing:1.6px;
color:var(--muted);
}

.footer-barcode{
width:210px;
max-width:80%;
height:43px;
margin:13px auto 12px;
background:
repeating-linear-gradient(
90deg,
var(--text) 0,
var(--text) 2px,
transparent 2px,
transparent 4px,
var(--text) 4px,
var(--text) 5px,
transparent 5px,
transparent 7px,
var(--text) 7px,
var(--text) 10px,
transparent 10px,
transparent 12px
);
}

.footer-logo{
font-family:"Cormorant Garamond",serif;
font-size:28px;
font-weight:500;
letter-spacing:7px;
color:var(--text);
margin-top:4px;
}

/* =========================================
DESIGNED & DEVELOPED BY
========================================= */

/* =========================================
DEVELOPER CREDIT
========================================= */

.developer-credit{
width:100%;
margin-top:34px;
padding-top:22px;
text-align:center;
}

.credit-line{
width:55px;
height:1px;
margin:0 auto 15px;
background:linear-gradient(
90deg,
transparent,
var(--hot),
transparent
);
}

.credit-small{
font-family:"DM Sans",sans-serif;
font-size:5px;
font-weight:500;
letter-spacing:2.7px;
color:var(--muted-strong);
text-transform:uppercase;
}

.credit-name a{
display:inline-block;
font-family:"Allura",cursive;
font-size:20px;
font-weight:400;
line-height:1.15;
color:var(--barbie);
text-decoration:none !important;
border:0;
outline:0;
transition:
transform .25s ease,
color .25s ease;
}

.credit-name a:visited{
color:var(--barbie);
text-decoration:none;
}

.credit-name a:hover{
color:var(--hot);
text-decoration:none;
transform:translateY(-1px);
}

.credit-name a:active{
color:var(--barbie);
text-decoration:none;
transform:scale(.98);
}

.credit-name a:focus{
outline:none;
text-decoration:none;
}

.credit-mark{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:90px;
margin:13px auto 0;
color:var(--hot);
font-size:9px;
}

.credit-mark::before,
.credit-mark::after{
content:"";
width:24px;
height:1px;
background:linear-gradient(
90deg,
transparent,
var(--soft-pink)
);
}

.credit-mark::after{
background:linear-gradient(
90deg,
var(--soft-pink),
transparent
);
}

/* =========================================
MOBILE
========================================= */

@media(max-width:480px){

.footer{
margin-top:28px;
padding:24px 12px 115px;
}

.footer-barcode{
width:205px;
height:40px;
}

.footer-logo{
font-size:27px;
}

.developer-credit{
margin-top:30px;
padding-top:20px;
}

.credit-name{
font-size:32px;
}

}


/* =========================================
MODALS
========================================= */

.modal{
position:fixed;
inset:0;
z-index:1000;
background:var(--overlay);
display:flex;
align-items:center;
justify-content:center;
padding:18px;
opacity:0;
visibility:hidden;
transition:.3s;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}

.modal.show{
opacity:1;
visibility:visible;
}

.modal-card{
width:min(100%,430px);
max-height:90vh;
overflow:auto;
background:var(--white);
border-radius:15px;
padding:25px 22px;
box-shadow:var(--shadow-strong);
position:relative;
transform:translateY(20px) scale(.98);
transition:.3s;
}

.modal.show .modal-card{
transform:none;
}

.modal-close{
position:absolute;
right:14px;
top:12px;
border:0;
background:none;
font-size:22px;
color:var(--text);
}

.modal-icon{
display:block;
text-align:center;
font-size:25px;
color:var(--barbie);
margin-bottom:4px;
}

.modal-title{
font-family:"Cormorant Garamond",serif;
text-align:center;
font-size:30px;
font-weight:500;
margin:4px 0 15px;
letter-spacing:1px;
}

.modal-sub{
text-align:center;
font-size:13px;
line-height:1.55;
margin-bottom:18px;
}

.modal-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.modal-buttons a,
.modal-buttons button{
border:0;
background:var(--barbie);
color:var(--white);
border-radius:14px;
padding:13px 10px;
text-decoration:none;
text-align:center;
}

/* =========================================
LOCATION MODAL
========================================= */

.location-img{
height:190px;
border-radius:10px;
background:
url("../assets/hall.jpg")
center/cover no-repeat;
margin-bottom:13px;
border:1px solid var(--line);
overflow:hidden;
}

.location-info{
text-align:center;
font-size:13px;
line-height:1.45;
margin-bottom:17px;
}

/* =========================================
RSVP FORM
========================================= */

.form-group{
margin-bottom:15px;
}

.form-group label{
display:block;
font-size:13px;
font-weight:600;
margin-bottom:6px;
}

.form-control{
width:100%;
height:48px;
border:1px solid var(--line);
border-radius:8px;
background:var(--white);
padding:0 13px;
outline:0;
color:var(--text);
}

.form-control:focus{
border-color:var(--barbie);
box-shadow:
0 0 0 3px rgba(240,111,165,.12);
}

textarea.form-control{
height:135px;
padding-top:12px;
resize:none;
}

.char-count{
font-size:10px;
color:var(--muted);
text-align:right;
margin-top:4px;
}

.submit-btn{
width:100%;
height:50px;
border:0;
border-radius:10px;
background:var(--barbie);
color:var(--white);
font-size:14px;
}

.submit-btn:disabled{
opacity:.65;
cursor:not-allowed;
}

/* =========================================
CONTACT
========================================= */

.contact-list{
display:flex;
flex-direction:column;
gap:10px;
width:100%;
}

.contact-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) 38px 38px;
align-items:center;
gap:7px;
padding:12px 12px;
border:1px solid var(--line);
border-radius:10px;
background:var(--white);
overflow:hidden;
}

.contact-info{
min-width:0;
overflow:hidden;
}

.contact-name{
display:block;
font-size:13px;
font-weight:600;
line-height:1.25;
color:var(--text);
white-space:normal;
}

.contact-phone{
display:block;
margin-top:3px;
font-size:11px !important;
font-weight:400;
line-height:1.2;
letter-spacing:0;
color:var(--muted) !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* PHONE + WHATSAPP ICON SAHAJA */

.contact-row>a{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
margin:0;
border:0;
text-decoration:none;
font-size:18px !important;
line-height:1;
color:var(--barbie);
}

/* JANGAN BAGI STYLE LINK KENA NOMBOR */

.contact-info a,
.contact-phone a{
width:auto !important;
height:auto !important;
display:inline !important;
font-size:11px !important;
font-weight:400 !important;
line-height:1.2 !important;
color:var(--muted) !important;
text-decoration:none !important;
}

/* =========================================
CONTACT MOBILE
========================================= */

@media(max-width:390px){

.contact-row{
grid-template-columns:minmax(0,1fr) 34px 34px;
gap:5px;
padding:11px 10px;
}

.contact-row>a{
width:34px;
height:34px;
min-width:34px;
font-size:17px !important;
}

.contact-name{
font-size:12px;
}

.contact-phone,
.contact-phone a{
font-size:10px !important;
}

}

/* =========================================
SUCCESS
========================================= */

.success-card{
text-align:center;
}

.success-icon{
width:65px;
height:65px;
border-radius:50%;
background:var(--barbie);
color:var(--white);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
margin:0 auto 12px;
}

/* =========================================
MOBILE 390PX
========================================= */

@media(max-width:390px){

.main{
padding-left:11px;
padding-right:11px;
}

.intro-scene{
inset:80px 0 0;
}

.passport-intro{
width:67%;
}

.passport-title{
font-size:27px;
}

.passport-emblem{
width:150px;
height:137px;
}

.passport-emblem:before{
width:115px;
height:115px;
}

.passport-monogram{
font-size:47px;
}

.passport-couple{
font-size:15px;
}

.boarding-pass{
width:75%;
height:365px;
}

.cabin-drawer{
height:165px;
}

.open-invitation{
bottom:34px;
height:50px;
}

.passport-card h3{
font-size:22px;
}

.couple{
font-size:25px;
}

.family{
padding-left:12px;
padding-right:12px;
}

.parent-name{
font-size:15px;
}

.full-couple{
font-size:19px;
}

.guestbook-slider{
height:240px;
}

.wish-slide{
padding-left:45px;
padding-right:45px;
}

.wish-text{
font-size:24px;
}

.hall-card.location-card{
min-height:260px;
}

.hall-name{
font-size:20px;
}

}

/* =========================================
SMALL MOBILE
========================================= */

@media(max-width:350px){

.guestbook-slider{
height:250px;
}

.wish-text{
font-size:22px;
}

.location-tap{
font-size:8px;
padding:0 9px;
}

.hall-name{
font-size:18px;
}

}

/* =========================================
CUSTOM RSVP SELECT
========================================= */

.custom-select{
position:relative;
width:100%;
}

.custom-select-trigger{
width:100%;
height:48px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 14px;

border:1px solid var(--line);
border-radius:8px;

background:var(--white);
color:var(--text);

font-size:14px;
text-align:left;
}

.custom-select-trigger i{
font-size:10px;
transition:transform .2s ease;
}

.custom-select.open .custom-select-trigger i{
transform:rotate(180deg);
}

.custom-select-menu{
position:absolute;
z-index:50;

top:calc(100% + 5px);
left:0;
right:0;

padding:5px;

background:var(--white);

border:1px solid var(--line);
border-radius:8px;

box-shadow:0 8px 18px rgba(80,40,58,.12);

opacity:0;
visibility:hidden;

transform:translateY(-5px);

transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}

.custom-select.open .custom-select-menu{
opacity:1;
visibility:visible;
transform:none;
}

.custom-select-menu button{
width:100%;
height:40px;

display:flex;
align-items:center;

padding:0 12px;

border:0;
border-radius:6px;

background:transparent;

font-size:14px;
color:var(--text);

text-align:left;
}

.custom-select-menu button:hover{
background:var(--light-pink);
}

.custom-select-menu button:active{
background:var(--soft-pink);
}