/* ==========================================================
   AURORA WEDDING WEBSITE
   MAIN.CSS
   Part 1 : Foundation
   Version : 1.0
========================================================== */



/* ==========================================================
   CSS RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    padding:0;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

picture{
    display:block;
}

video{
    display:block;
    width:100%;
    height:100%;
}

button,
input,
textarea{
    border:none;
    outline:none;
    background:none;
    font:inherit;
}

button{
    cursor:pointer;
}

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}



/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

    /* COLORS */

    --color-primary:#D6B36A;
    --color-secondary:#E8D9B5;

    --color-white:#FFFFFF;

    --color-black:#000000;

    --color-bg:#0D1117;

    --color-surface:rgba(255,255,255,.08);

    --color-border:rgba(255,255,255,.15);

    --color-overlay:rgba(0,0,0,.55);

    --color-text:#F5F5F5;

    --color-muted:#CFCFCF;

    --color-shadow:rgba(0,0,0,.25);



    /* TYPOGRAPHY */

    --font-heading:"Cormorant Garamond",serif;

    --font-body:"Poppins",sans-serif;



    /* FONT SIZE */

    --fs-hero:5rem;

    --fs-h1:3.5rem;

    --fs-h2:2.5rem;

    --fs-h3:1.5rem;

    --fs-body:1rem;

    --fs-small:.9rem;



    /* FONT WEIGHT */

    --fw-light:300;

    --fw-regular:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;



    /* SPACING */

    --space-xs:.5rem;

    --space-sm:1rem;

    --space-md:2rem;

    --space-lg:4rem;

    --space-xl:6rem;

    --space-xxl:8rem;



    /* BORDER */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:40px;

    --radius-round:999px;



    /* SHADOW */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.15);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.25);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.35);



    /* TRANSITION */

    --transition-fast:.25s ease;

    --transition-normal:.4s ease;

    --transition-slow:.8s ease;



    /* Z-INDEX */

    --z-video:-3;

    --z-overlay:-2;

    --z-content:10;

    --z-menu:50;

    --z-loader:9999;

}



/* ==========================================================
   GLOBAL
========================================================== */

html,
body{

    width:100%;

    min-height:100%;

    overflow-x:hidden;

}

body{

    position:relative;

    background:var(--color-bg);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:var(--fs-body);

    font-weight:var(--fw-regular);

    line-height:1.8;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

body.lock-scroll{
    overflow: hidden;
    height: 100vh;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    font-weight:var(--fw-semibold);

    line-height:1.2;

    color:var(--color-white);

}

h1{

    font-size:var(--fs-h1);

}

h2{

    font-size:var(--fs-h2);

}

h3{

    font-size:var(--fs-h3);

}

p{

    color:var(--color-muted);

}

strong{

    font-weight:var(--fw-bold);

}

small{

    font-size:var(--fs-small);

}



/* ==========================================================
   SECTION
========================================================== */

.section{

    position:relative;

    width:100%;

    padding:var(--space-xxl) 8%;

}

.section-header{

    width:100%;

    max-width:720px;

    margin:0 auto var(--space-lg);

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--color-white);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-title{

    width:100%;

    max-width:720px;

    margin:0 auto var(--space-lg);

    text-align:center;
	
	color:var(--color-primary);

}

.section-description{

    max-width:620px;

    margin:0 auto;

}



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

.btn-primary,
.btn-secondary,
.btn-outline{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:.5rem;

    min-width:180px;

    padding:15px 34px;

    border-radius:var(--radius-round);

    transition:var(--transition-normal);

    font-weight:500;

}

.btn-primary{

    background:var(--color-primary);

    color:var(--color-black);

}

.btn-secondary{

    background:rgba(255,255,255,.08);

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

    color:var(--color-white);

}

.btn-outline{

    border:1px solid var(--color-primary);

    color:var(--color-primary);

}



/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#caa45b;

}



/* ==========================================================
   UTILITY
========================================================== */

.text-center{

    text-align:center;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}

.w-100{

    width:100%;

}

.hidden{

    display:none;

}

/* ==========================================================
   LOADER
========================================================== */

#loader{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-bg);

    z-index:var(--z-loader);

    overflow:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}



/* ==========================================================
   LOADER HIDDEN
========================================================== */

#loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}



/* ==========================================================
   LOADER CONTENT
========================================================== */

.loader-content{

    width:min(420px,90vw);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:32px;

}



/* ==========================================================
   LOADER LOGO
========================================================== */

.loader-logo{

    font-family:var(--font-heading);

    font-size:3.2rem;

    font-weight:600;

    letter-spacing:6px;

    color:var(--color-white);

    text-transform:uppercase;

    user-select:none;

}



/* ==========================================================
   LOADER LINE
========================================================== */

.loader-line{

    position:relative;

    width:240px;

    height:3px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.12);

}



/* ==========================================================
   LOADER PROGRESS
========================================================== */

.loader-line span{

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:100%;

    border-radius:999px;

    background:var(--color-primary);

}



/* ==========================================================
   LOADER BACKDROP
========================================================== */

#loader::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(214,179,106,.12),
            transparent 65%
        );

    pointer-events:none;

}



/* ==========================================================
   LOADER GLOW
========================================================== */

.loader-logo::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

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

    width:260px;

    height:260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,179,106,.08),
            transparent 70%
        );

    filter:blur(35px);

    z-index:-1;

}



/* ==========================================================
   LOADER TEXT SELECTION
========================================================== */

.loader-logo{

    position:relative;

    isolation:isolate;

}



/* ==========================================================
   PREVENT SCROLL WHILE LOADING
========================================================== */

body.loading{

    overflow:hidden;

}



/* ==========================================================
   LOADER RESPONSIVE BASE
========================================================== */

@media (max-width:768px){

    .loader-logo{

        font-size:2.4rem;

        letter-spacing:4px;

    }

    .loader-line{

        width:180px;

    }

}

/* ==========================================================
   BACKGROUND VIDEO
========================================================== */

#video-container{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    overflow:hidden;

    z-index:var(--z-video);

    pointer-events:none;

}

#bgVideo{

    position:absolute;

    top:50%;

    left:50%;

    width:100%;

    height:100%;

    object-fit:cover;

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

    user-select:none;

    -webkit-user-drag:none;

}



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

.overlay-dark,
.overlay-gradient,
.overlay-noise{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    pointer-events:none;

}



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

.overlay-dark{

    background:rgba(0,0,0,.45);

    z-index:var(--z-overlay);

}



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

.overlay-gradient{

    background:

        linear-gradient(
            to bottom,

            rgba(13,17,23,.20) 0%,

            rgba(13,17,23,.45) 30%,

            rgba(13,17,23,.72) 70%,

            rgba(13,17,23,.90) 100%

        );

    z-index:calc(var(--z-overlay) + 1);

}



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

.overlay-noise{

    background-image:

        radial-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:6px 6px;

    opacity:.18;

    mix-blend-mode:soft-light;

    z-index:calc(var(--z-overlay) + 2);

}



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

#aurora{

    position:relative;

    width:100%;

    min-height:100vh;

    z-index:var(--z-content);

}



/* ==========================================================
   GLOBAL CONTENT LAYER
========================================================== */

#aurora > section,
#aurora > footer{

    position:relative;

    z-index:2;

}



/* ==========================================================
   SECTION BACKDROP
========================================================== */

.section{

    background:transparent;

}



/* ==========================================================
   IMAGE DEFAULT
========================================================== */

.section img{

    user-select:none;

    -webkit-user-drag:none;

}



/* ==========================================================
   VIDEO SAFETY
========================================================== */

#video-container video{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}



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

@media (max-width:768px){

    #bgVideo{

        width:auto;

        min-width:100%;

        min-height:100%;

    }

    .overlay-dark{

        background:rgba(0,0,0,.52);

    }

    .overlay-noise{

        opacity:.12;

    }

}

/* ==========================================================
   HERO SECTION
========================================================== */

#hero{

    position:relative;

    width:100%;

    min-height:100svh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:120px 8% 80px;
	
	padding-top:40px;

}



/* ==========================================================
   HERO CONTAINER
========================================================== */

.hero-container{

    width:100%;

    max-width:1400px;

    display:grid;

    grid-template-columns:520px 1fr;

    align-items:center;

    justify-content:center;

    gap:120px;

}



/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:space-between;

    height:100%;

}



/* ==========================================================
   HERO OVERLINE
========================================================== */

.hero-overline{

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}



/* ==========================================================
   HERO TITLE
========================================================== */

.hero-title{

    font-family:'Dancing Script',cursive;
	margin-bottom:18px;

    font-size:clamp(4rem,8vw,6.5rem);

    font-weight:600;

    line-height:.95;

    color:var(--color-white);

}

.hero-title span{

    display:block;

    color:var(--color-primary);

}



/* ==========================================================
   HERO DATE
========================================================== */

.hero-date{

    margin-bottom:6px;

    font-size:1rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--color-secondary);

}

.hero-wedding-date{

    margin-bottom:28px;

    font-size:2.1rem;

    font-weight:500;

    color:var(--color-white);

}



/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.hero-description{

    max-width:520px;

    margin-bottom:40px;

    color:var(--color-muted);

}



/* ==========================================================
   HERO ACTION
========================================================== */

.hero-action{

    display:flex;

    align-items:center;

    gap:18px;

}



/* ==========================================================
   HERO IMAGE
========================================================== */

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* ==========================================================
   HERO IMAGE FRAME
========================================================== */

.hero-image::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:

        radial-gradient(

            circle,

            rgba(214,179,106,.10),

            transparent 70%

        );

    backdrop-filter:blur(10px);

}



/* ==========================================================
   HERO PHOTO
========================================================== */

.hero-image img{

    position:relative;

    width:min(100%,520px);

    z-index:2;

    filter:

        drop-shadow(

            0 25px 60px

            rgba(0,0,0,.45)

        );

}



/* ==========================================================
   HERO CONTENT SPACING
========================================================== */

.hero-content>*{

    position:relative;

    z-index:2;

}



/* ==========================================================
   HERO BUTTON
========================================================== */

.hero-action .btn-primary{

    min-width:220px;

    height:58px;

}



/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .hero-container{

        max-width:1600px;

    }

    .hero-image img{

        width:600px;

    }

    .hero-image::before{

        width:600px;

        height:600px;

    }

}



/* ==========================================================
   INVITEE SECTION
========================================================== */

#invitee{


    position: relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;   /* bukan center */

    padding-top:0px;        /* atur tinggi dari atas */

    padding-bottom:30px;

    min-height:auto;


}



/* ==========================================================
   INVITEE CARD
========================================================== */

.invitee-card{

 
	width:100%;
	max-width:520px;
	margin:0 auto;

    background:none;
    border:none;
    box-shadow:none;
    backdrop-filter:none;

    padding:0;

    text-align:center;

}



/* ==========================================================
   INVITEE LABEL
========================================================== */

.invitee-label{

    margin-bottom:18px;

    letter-spacing:6px;

    color:var(--color-primary);

    font-size:.9rem;
	
	

}



/* ==========================================================
   GUEST NAME
========================================================== */

#guestName{

    font-family:var(--font-heading);

    font-size:3rem;

    font-weight:500;

    color:#fff;

    line-height:1.3;

    margin-bottom:26px;
}



/* ==========================================================
   INVITEE NOTE
========================================================== */

.invitee-note{

    max-width:500px;

    margin:0 auto 38px;

    font-size:1.15rem;

    line-height:1.8;

    color:rgba(255,255,255,.82);

}



/* ==========================================================
   INVITEE BUTTON
========================================================== */

.invitee-card .btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:290px;
    height:64px;

    line-height:1;

    padding:0 28px;
	background:var(--gold);
	

}

/* ==========================================================
   HERO HIDE
========================================================== */

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

    transform:translateY(-30px);

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

.hero-hide{
    animation:heroExit .8s forwards;
}

@keyframes heroExit{

    from{
        opacity:1;
        transform:scale(1);
    }

    to{
        opacity:0;
        transform:scale(1.05);
        visibility:hidden;
    }

}


/* ==========================================================
   MUSIC BUTTON
========================================================== */

.music-button{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    color:var(--color-white);

    box-shadow:var(--shadow-md);

    z-index:200;

    transition:var(--transition-normal);

}



/* ==========================================================
   MUSIC ICON
========================================================== */

.music-button svg{

    width:22px;

    height:22px;

}



/* ==========================================================
   MUSIC HOVER
========================================================== */

.music-button:hover{

    background:var(--color-primary);

    color:var(--color-black);

    transform:translateY(-4px);

}



/* ==========================================================
   MUSIC ACTIVE
========================================================== */

.music-button.active{

    background:var(--color-primary);

    color:var(--color-black);

}



/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    width:30px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:8px;

    border:2px solid rgba(255,255,255,.25);

    border-radius:999px;

    z-index:20;

}



/* ==========================================================
   SCROLL DOT
========================================================== */

.scroll-indicator span{

    width:6px;

    height:12px;

    border-radius:999px;

    background:var(--color-primary);

}



/* ==========================================================
   LANDING SPACING
========================================================== */

#hero,
#invitee{

    overflow:hidden;

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .invitee-card{

        padding:40px 32px;

    }

}



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

@media (max-width:768px){

    .music-button{

        right:20px;

        bottom:20px;

        width:54px;

        height:54px;

    }

    .invitee-card{

        padding:32px 24px;

    }

    #guestName{

        font-size:1.7rem;

    }

    .scroll-indicator{

        bottom:24px;

    }

}

/* ==========================================================
   OUR STORY
========================================================== */

#story{

    position:relative;

    overflow:hidden;
	
	padding-top:120px;

}

/* ==========================================================
   BRIDE HEADER
========================================================== */

.bride-header{

    margin-top:-40px;

    margin-bottom:-20px;

}
/* ==========================================================
   BRIDE GROOM NAME
========================================================== */

.bride-name {

    font-family:'Dancing Script',cursive;

    color:var(--color-primary);
	
	margin-bottom:28px;

    font-size:2rem;

    font-weight:500;
	
}

.groom-name{

    font-family:'Dancing Script',cursive;

    color:var(--color-primary);
	
	margin-bottom:28px;

    font-size:2.1rem;

    font-weight:500;
	
}


/* ==========================================================
   STORY WRAPPER
========================================================== */

.story-wrapper{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:60px;

    align-items:stretch;

}



/* ==========================================================
   STORY CARD
========================================================== */

.story-card{

    position:relative;

	padding:150px 36px 45px;

    margin-top:120px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

    overflow:visible;

    text-align:center;
	z-index:1;

}



/* ==========================================================
   STORY CARD BORDER EFFECT
========================================================== */

.story-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(214,179,106,.08);

    pointer-events:none;

}



/* ==========================================================
   STORY ICON
========================================================== */

.story-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    border-radius:50%;

    background:rgba(214,179,106,.12);

    color:var(--color-primary);

    font-size:1.8rem;

}

/* ==========================================================
   COUPLE ITEM
========================================================== */

.couple-item{

    position:relative;

    padding-top:0;
	
	margin-bottom:170px;

}



/* ==========================================================
   COUPLE PHOTO
========================================================== */

.couple-photo{

    position:absolute;

    left:50%;
    top:-65px;

    transform:translateX(-50%);

    width:210px;
    height:230px;

    overflow:hidden;

    border-radius:26px;

    border:3px solid rgba(214,179,106,.45);

    background:#222;

    box-shadow:
        0 18px 40px rgba(0,0,0,.30);

    z-index:5;

}

.couple-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 15%;

    transition:transform .4s ease;

}

.couple-item:hover .couple-photo img{

    transform:scale(1.04);

}


/* ==========================================================
   STORY TITLE
========================================================== */

.story-card h3{

    margin-bottom:18px;

    color:var(--color-primary);
	
	font-size:2.2rem;

}



/* ==========================================================
   STORY TEXT
========================================================== */

.story-card p{

    color:var(--color-muted);
	
	line-height:1.9;

}

.story-card h4{

    font-family:'Cormorant Garamond',serif;

    color:var(--color-primary);

    font-size:1.4rem;

    margin-bottom:8px;

}

.story-card h2{

    font-family:'Dancing Script',cursive;

    font-size:2.4rem;

    margin-bottom:20px;

}



/* ==========================================================
   STORY HOVER
========================================================== */

.story-card:hover{

    transform:translateY(-10px);

    border-color:rgba(214,179,106,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}



/* ==========================================================
   STORY ICON HOVER
========================================================== */

.story-card:hover .story-icon{

    background:rgba(214,179,106,.20);

}



/* ==========================================================
   STORY GRID SPACING
========================================================== */

.story-wrapper > *{

    min-height:220px;

    display:flex;

    flex-direction:column;

}



/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .story-wrapper{

        max-width:1320px;

        gap:40px;

    }

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .story-wrapper{

        grid-template-columns:1fr;

        gap:28px;

    }

}



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

@media (max-width:768px){

    .story-card{

	margin-top:150px;

    padding:180px 36px 45px;

    }

    .story-icon{

        width:60px;

        height:60px;

        margin-bottom:20px;

        font-size:1.5rem;

    }

    .story-wrapper > *{

        min-height:auto;

    }
	
	
    .story-wrapper{

        grid-template-columns:1fr;

    }

    .bride-header{

         margin-top:-80px;
		margin-bottom:120px;

    }
	
	 .couple-item{
        margin-bottom:140px;
    }

	
	.couple-photo{

        top:-45px;

        width:190px;
        height:210px;

    }


}


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

#countdown{

    position:relative;

    overflow:hidden;

}



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

.countdown-wrapper{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    align-items:center;

}



/* ==========================================================
   COUNT BOX
========================================================== */

.count-box{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:42px 20px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

    transition:var(--transition-normal);

}



/* ==========================================================
   COUNT BOX BORDER
========================================================== */

.count-box::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(214,179,106,.08);

    pointer-events:none;

}



/* ==========================================================
   COUNT NUMBER
========================================================== */

.count-box span{

    display:block;

    margin-bottom:10px;

    font-family:var(--font-heading);

    font-size:4rem;

    font-weight:700;

    line-height:1;

    color:var(--color-primary);

}



/* ==========================================================
   COUNT LABEL
========================================================== */

.count-box small{

    font-size:.95rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--color-muted);

}



/* ==========================================================
   COUNT HOVER
========================================================== */

.count-box:hover{

    transform:translateY(-8px);

    border-color:rgba(214,179,106,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}



/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .countdown-wrapper{

        max-width:1200px;

    }

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .countdown-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

}



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

@media (max-width:768px){

    .countdown-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .count-box{

        padding:32px 16px;

    }

    .count-box span{

        font-size:2.8rem;

    }

}



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

@media (max-width:480px){

    .countdown-wrapper{

        grid-template-columns:1fr 1fr;

    }

    .count-box{

        padding:26px 14px;

    }

    .count-box span{

        font-size:2.3rem;

    }

    .count-box small{

        font-size:.75rem;

        letter-spacing:1px;

    }

}

/* ==========================================================
   WEDDING EVENT
========================================================== */

#event{

    position:relative;

    overflow:hidden;

}



/* ==========================================================
   EVENT WRAPPER
========================================================== */

.event-wrapper{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:flex;

    grid-template-columns:repeat(1,1fr);

    gap:36px;

    align-items:stretch;
	
	justify-content:center;

    gap:36px;

    flex-wrap:wrap;

}



/* ==========================================================
   EVENT CARD
========================================================== */

.event-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:48px 36px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

    transition:var(--transition-normal);

    overflow:hidden;

}



/* ==========================================================
   EVENT BORDER
========================================================== */

.event-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(214,179,106,.08);

    pointer-events:none;

}



/* ==========================================================
   EVENT TITLE
========================================================== */

.event-card h3{

    margin-bottom:24px;

    font-size:2rem;

    color:var(--color-white);

}



/* ==========================================================
   EVENT DATE
========================================================== */

.event-date{
    display:flex;
    flex-direction:column;
    align-items:center;

    color:var(--color-primary);
    font-family:'Dancing Script', cursive;
    font-size:2.5rem;
    font-weight:500;
    line-height:1.15;
    margin-bottom:18px;
}

.event-date span{
    display:block;
}



/* ==========================================================
   EVENT TIME
========================================================== */

.event-time{

    margin-bottom:10px;

    color:var(--color-white);

    font-size:1.8rem;

}



/* ==========================================================
   EVENT LOCATION
========================================================== */

.event-location{

    margin-bottom:32px;

    color:var(--color-muted);

    max-width:320px;

}
.event-location strong{
    display: inline-block;
    font-weight: 700;
    color: var(--color-primary); /* warna emas tema Aurora */
    letter-spacing: .5px;
    margin-bottom: 6px;
}



/* ==========================================================
   EVENT BUTTON
========================================================== */

.event-card .btn-outline{

    min-width:190px;

}



/* ==========================================================
   EVENT HOVER
========================================================== */

.event-card:hover{

    transform:translateY(-10px);

    border-color:rgba(214,179,106,.25);

    box-shadow:0 28px 60px rgba(0,0,0,.35);

}



/* ==========================================================
   EVENT BUTTON HOVER
========================================================== */

.event-card:hover .btn-outline{

    background:var(--color-primary);

    color:var(--color-black);

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .event-wrapper{

        grid-template-columns:1fr;

        gap:28px;

    }

}



@media (max-width:768px){

    .event-card{

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

        margin:0 auto;

        padding:44px 28px;

        border-radius:26px;

    }

    .event-card h3{

        font-size:2rem;

        margin-bottom:20px;

    }

    .event-date{

        font-size:2.1rem;

        line-height:1.35;

        margin-bottom:18px;

    }

    .event-time{

        font-size:1.5rem;

        margin-bottom:24px;

    }

    .event-location{

        max-width:340px;

        margin:0 auto 34px;

        font-size:1rem;

        line-height:1.8;

    }

    .event-card .btn-outline{

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

    }

}

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

@media (max-width:480px){

    .event-card{

        max-width:380px;

        padding:38px 24px;

    }

    .event-card h3{

        font-size:1.9rem;

        margin-bottom:18px;

    }

    .event-date{

        font-size:2.1rem;

        line-height:1.4;

        margin-bottom:18px;

    }

    .event-time{

        font-size:1.5rem;

        margin-bottom:22px;

    }

    .event-location{

        max-width:300px;

        margin:0 auto 30px;

        font-size:.98rem;

        line-height:1.75;

    }

    .event-card .btn-outline{

        max-width:260px;

    }

}

/* ==========================================================
   GALLERY
========================================================== */

#gallery{

    position:relative;

    overflow:hidden;

}



/* ==========================================================
   GALLERY GRID
========================================================== */

.gallery-grid{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    gap:24px;
	
	column-count:3;

    column-gap:24px;

    max-width:1200px;

    margin:0 auto;

}



/* ==========================================================
   GALLERY ITEM
========================================================== */

.gallery-item{

    position:relative;
	
	break-inside:avoid;

    margin-bottom:24px;

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    /*backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);*/

    box-shadow:var(--shadow-md);

}



/* ==========================================================
   GALLERY IMAGE
========================================================== */

.gallery-item img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
	
	  /*-webkit-transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;*/

}



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

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.35),

            transparent

        );

    opacity:0;

    transition:var(--transition-normal);

    z-index:1;

}



/* ==========================================================
   GALLERY HOVER
========================================================== */

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover img{

    transform:scale(1.08);

}



/* ==========================================================
   GALLERY BORDER EFFECT
========================================================== */

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(214,179,106,.08);

    pointer-events:none;

}

/* ==========================================================
GALLERY LIGHT BOX
========================================================== */

.lightbox{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.92);
    z-index:99999;
	touch-action:none;

    overscroll-behavior:contain;
}

.lightbox.active{
    display:flex;
}

.lightbox-image{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
	touch-action:pan-x;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:absolute;
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    z-index:100000;
}

.lightbox-close{
    top:20px;
    right:24px;
    font-size:42px;
}

.lightbox-prev{
    left:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:48px;
}

.lightbox-next{
    right:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:48px;
}

.lightbox-counter{
    position:absolute;
    bottom:24px;
    color:#fff;
}

body.lightbox-open{
    overflow:hidden;
	
	touch-action:none;
	
	/*position:fixed;

    width:100%;

    inset:0;*/

    
}
/* ==========================================
   GALLERY VIDEOS
========================================== */

.gallery-videos{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}


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

@media (max-width:768px){

    .gallery-grid{

        column-count:2;
        column-gap:16px;

    }

    .gallery-item{

        border-radius:var(--radius-md);

    }

}


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

@media (max-width:480px){

    .gallery-grid{
        column-count:2;
        column-gap:12px;
    }

    .gallery-item{
        margin-bottom:12px;
        border-radius:18px;
    }

}

/* ==========================================
   YOUTUBE VIDEO SECTION
========================================== */

.gallery-videos {
    width: 100%;

    margin-top: 40px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* ==========================================
   VIDEO CARD
========================================== */

.youtube-card {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    min-width: 0;

    overflow: hidden;

    border-radius: 20px;

    background: #000;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .12);
}


/* ==========================================
   THUMBNAIL
========================================== */

.youtube-thumbnail {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    cursor: pointer;
}


/* ==========================================
   IMAGE
========================================== */

.youtube-thumbnail img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    cursor: pointer;

    transition:
        transform .5s ease;
}


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

.youtube-thumbnail::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, .18);

    pointer-events: none;

    transition:
        background .3s ease;
}


/* ==========================================
   PLAY BUTTON
========================================== */

.youtube-play {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 68px;
    height: 68px;

    padding: 0;

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

    z-index: 10;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .94);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .25);

    transition:
        transform .3s ease,
        background .3s ease;
}


/* ==========================================
   PLAY ICON
========================================== */

.youtube-play span {

    display: block;

    margin-left: 4px;

    font-size: 22px;

    line-height: 1;

    color: #333;
}


/* ==========================================
   HOVER
========================================== */

.youtube-card:hover
.youtube-thumbnail img {

    transform:
        scale(1.04);
}


.youtube-card:hover
.youtube-thumbnail::after {

    background:
        rgba(0, 0, 0, .28);
}


.youtube-card:hover
.youtube-play {

    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: #fff;
}


/* ==========================================
   YOUTUBE IFRAME
========================================== */

.youtube-card iframe {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    display: block;

    border: 0;
}


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

@media (max-width: 768px) {

    .gallery-videos {

        grid-template-columns:
            1fr;

        gap: 20px;

        margin-top: 30px;
    }


    .youtube-card {

        width: 100%;

        aspect-ratio: 16 / 9;

        border-radius: 16px;
    }


    .youtube-play {

        width: 58px;
        height: 58px;
    }


    .youtube-play span {

        font-size: 19px;
    }

}

/* ==========================================================
   RSVP & WISHES
   PART 1 - LAYOUT
========================================================== */

/* ==========================================================
   RSVP SECTION
========================================================== */

#rsvp{

    position:relative;

    overflow:hidden;

}


/* ==========================================================
   RSVP WRAPPER
========================================================== */

.rsvp-wrapper{

    width:100%;

    max-width:760px;

    margin:60px auto 0;

}


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

.rsvp-form{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:48px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}


/* ==========================================================
   GLASS HIGHLIGHT
========================================================== */

.rsvp-form::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        transparent 45%,
        transparent 100%
    );

    pointer-events:none;

}


/* ==========================================================
   FORM GROUP
========================================================== */

.form-group{

    display:flex;

    flex-direction:column;

    gap:12px;

    position:relative;

}


/* ==========================================================
   FORM LABEL
========================================================== */

.form-group label{

    color:var(--color-light);

    font-weight:600;

    font-size:.95rem;

    letter-spacing:.4px;

}


/* ==========================================================
   ATTENDANCE GROUP
========================================================== */

.attendance-group{

    display:flex;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}


.attendance-group label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

}


/* ==========================================================
   WISHES WRAPPER
========================================================== */

.wishes-wrapper{

    width:100%;

    max-width:760px;

    margin:80px auto 0;

}


/* ==========================================================
   WISHES HEADER
========================================================== */

.wishes-header{

    text-align:center;

    margin-bottom:36px;

}


.wishes-header h3{

    margin-bottom:12px;

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:600;

    color:var(--color-light);

}


.wishes-header p{

    max-width:560px;

    margin:0 auto;

    line-height:1.8;

    color:var(--color-muted);

}


/* ==========================================================
   WISH LIST WRAPPER
========================================================== */

.wish-list-wrapper{

    position:relative;

    width:100%;

}


/* ==========================================================
   WISH LIST
========================================================== */

.wish-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    min-height:120px;

}


/* ==========================================================
   RSVP STATUS
========================================================== */

.rsvp-status{

    margin-top:8px;

    min-height:24px;

    font-size:.95rem;

    text-align:center;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .rsvp-form{

        padding:40px;

    }

}


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

@media (max-width:768px){

    .rsvp-wrapper,
    .wishes-wrapper{

        max-width:100%;

    }

    .rsvp-form{

        padding:28px;

        border-radius:var(--radius-md);

    }

    .attendance-group{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

    }

}


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

@media (max-width:480px){

    .rsvp-form{

        padding:22px;

    }

    .wishes-header h3{

        font-size:1.6rem;

    }

}

/* ==========================================================
   RSVP & WISHES
   PART 2 - FORM COMPONENT
========================================================== */

/* ==========================================================
   INPUT
========================================================== */

.rsvp-form input[type="text"],
.rsvp-form select,
.rsvp-form textarea{

    width:100%;

    padding:16px 20px;

    border:none;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    color:var(--color-light);

    font-family:var(--font-body);

    font-size:1rem;

    transition:
        background .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        transform .25s ease;

    appearance:none;

}


/* ==========================================================
   SELECT
========================================================== */

#rsvp-form select{

    appearance:none;
    -webkit-appearance:none;

    width:100%;

    background:#2e3138;

    color:#ffffff;

    border:1px solid rgba(214,179,106,.45);

    border-radius:18px;

    padding:16px 20px;

    font-size:16px;

}

#rsvp-form option{

    background:#2b2d33;

    color:#ffffff;

}


/* ==========================================================
   TEXTAREA
========================================================== */

.rsvp-form textarea{

    resize:vertical;

    min-height:150px;

    line-height:1.8;

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder{

    color:rgba(255,255,255,.45);

}


/* ==========================================================
   FOCUS
========================================================== */

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{

    outline:none;

    border-color:var(--color-primary);

    background:rgba(255,255,255,.08);

    box-shadow:

        0 0 0 4px rgba(214,179,106,.12);

}


/* ==========================================================
   HOVER
========================================================== */

.rsvp-form input:hover,
.rsvp-form select:hover,
.rsvp-form textarea:hover{

    border-color:rgba(214,179,106,.35);

}


/* ==========================================================
   DISABLED
========================================================== */

.rsvp-form input:disabled,
.rsvp-form select:disabled,
.rsvp-form textarea:disabled{

    opacity:.55;

    cursor:not-allowed;

}


/* ==========================================================
   INVALID
========================================================== */

.rsvp-form input:invalid{

    box-shadow:none;

}


/* ==========================================================
   RADIO DEFAULT
========================================================== */

.attendance-group input[type="radio"]{

    accent-color:var(--color-primary);

    width:18px;

    height:18px;

}


/* ==========================================================
   CHARACTER COUNTER
========================================================== */

.character-counter{

    text-align:right;

    margin-top:8px;

    font-size:.82rem;

    color:var(--color-muted);

}


/* ==========================================================
   HELPER TEXT
========================================================== */

.form-helper{

    margin-top:4px;

    font-size:.85rem;

    color:var(--color-muted);

}


/* ==========================================================
   ERROR MESSAGE
========================================================== */

.form-error{

    display:none;

    margin-top:6px;

    font-size:.85rem;

    color:#ffb3b3;

}

.form-error.show{

    display:block;

}


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

@media (max-width:768px){

    .rsvp-form input[type="text"],
    .rsvp-form select,
    .rsvp-form textarea{

        padding:15px 16px;

        font-size:.95rem;

    }

    .rsvp-form textarea{

        min-height:130px;

    }

}


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

@media (max-width:480px){

    .rsvp-form input[type="text"],
    .rsvp-form select,
    .rsvp-form textarea{

        padding:14px 15px;

    }

}

/* ==========================================================
   RSVP & WISHES
   PART 3 - INTERACTIVE COMPONENT
========================================================== */

/* ==========================================================
   CUSTOM RADIO
========================================================== */

.attendance-group{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.attendance-group label{

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border:1px solid rgba(255,255,255,.10);

    border-radius:999px;

    background:rgba(255,255,255,.05);

    cursor:pointer;

    transition:all .35s ease;

}

.attendance-group label:hover{

    border-color:rgba(214,179,106,.45);

    background:rgba(255,255,255,.08);

}

.attendance-group input[type="radio"]{

    appearance:none;

    -webkit-appearance:none;

    width:20px;

    height:20px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    background:transparent;

    position:relative;

    transition:.30s;

}

.attendance-group input[type="radio"]::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:50%;

    background:var(--color-primary);

    transform:scale(0);

    transition:.25s;

}

.attendance-group input[type="radio"]:checked{

    border-color:var(--color-primary);

}

.attendance-group input[type="radio"]:checked::before{

    transform:scale(1);

}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

#submit-rsvp{

    width:100%;

    margin-top:10px;

}


/* ==========================================================
   BUTTON LOADING
========================================================== */

#submit-rsvp.loading{

    pointer-events:none;

    opacity:.8;

}

#submit-rsvp.loading::after{

    content:"";

    display:inline-block;

    width:18px;

    height:18px;

    margin-left:10px;

    border:2px solid rgba(255,255,255,.30);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:rsvp-spin .8s linear infinite;

}


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

#submit-rsvp.success{

    background:#3dbb73;

    border-color:#3dbb73;

}


/* ==========================================================
   BUTTON ERROR
========================================================== */

#submit-rsvp.error{

    background:#d95b5b;

    border-color:#d95b5b;

}


/* ==========================================================
   RSVP STATUS
========================================================== */

.rsvp-status{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:28px;

    margin-top:18px;

    font-size:.95rem;

    font-weight:500;

    transition:.35s ease;

}

.rsvp-status.success{

    color:#7be4a7;

}

.rsvp-status.error{

    color:#ffb2b2;

}

.rsvp-status.loading{

    color:var(--color-primary);

}


/* ==========================================================
   BUTTON DISABLED
========================================================== */

#submit-rsvp:disabled{

    cursor:not-allowed;

    opacity:.65;

}


/* ==========================================================
   FORM LOCK
========================================================== */

.rsvp-form.loading{

    pointer-events:none;

}


/* ==========================================================
   SPINNER
========================================================== */

@keyframes rsvp-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   MICRO INTERACTION
========================================================== */

.rsvp-form{

    transition:transform .35s ease;

}

.rsvp-form:hover{

    transform:translateY(-3px);

}


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

@media (max-width:768px){

    .attendance-group{

        flex-direction:column;

        align-items:stretch;

    }

    .attendance-group label{

        width:100%;

        justify-content:flex-start;

    }

}

/* ==========================================================
   RSVP & WISHES
   PART 4 - WISH CARD
========================================================== */

/* ==========================================================
   WISH CARD
========================================================== */

.wish-card{

    min-height:auto;

	position:relative;

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:24px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.wish-card:hover{

    transform:translateY(-4px);

    border-color:rgba(214,179,106,.25);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}


/* ==========================================================
   GLASS EFFECT
========================================================== */

.wish-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 45%

    );

    pointer-events:none;

}


/* ==========================================================
   AVATAR
========================================================== */

.wish-avatar{

    flex-shrink:0;

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:.5px;
	
	margin-bottom:16px;

}


/* ==========================================================
   CONTENT
========================================================== */

.wish-content{

    flex:1;

    min-width:0;

}


/* ==========================================================
   HEADER
========================================================== */

.wish-header{


	display:grid;

    grid-template-columns:1fr auto;

    align-items:start;

    gap:10px;

}


/* ==========================================================
   NAME
========================================================== */

.wish-name{

    font-size:1rem;

    font-weight:700;

    color:var(--color-light);
	
	overflow:hidden;
    text-overflow:ellipsis;

}


/* ==========================================================
   BADGE
========================================================== */

.wish-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.3px;
	
	white-space:nowrap;

}

.wish-badge.hadir{

    background:rgba(83,191,121,.18);

    color:#8ee7af;

}

.wish-badge.tidak-hadir{

    background:rgba(255,102,102,.15);

    color:#ffb0b0;

}


/* ==========================================================
   MESSAGE
========================================================== */

.wish-message{

    line-height:1.9;

    color:var(--color-muted);

    word-break:break-word;

}


/* ==========================================================
   TIME
========================================================== */

.wish-time{

    margin-top:14px;

    font-size:.82rem;

    color:rgba(255,255,255,.45);

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.wish-empty{

    padding:60px 30px;

    text-align:center;

    border:1px dashed rgba(255,255,255,.10);

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.03);

}

.wish-empty h4{

    margin-bottom:12px;

    color:var(--color-light);

    font-size:1.2rem;

}

.wish-empty p{

    color:var(--color-muted);

    line-height:1.8;

}


/* ==========================================================
   SCROLL AREA
========================================================== */

.wish-list{

    max-height:650px;

    overflow-y:auto;

    padding-right:8px;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.wish-list::-webkit-scrollbar{

    width:6px;

}

.wish-list::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:rgba(214,179,106,.35);

}

.wish-list::-webkit-scrollbar-track{

    background:transparent;

}


/* ==========================================================
   DIVIDER
========================================================== */

.wish-card + .wish-card{

    margin-top:2px;

}


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

@media (max-width:768px){

    .wish-card{

        padding:20px;

        gap:14px;

    }

    .wish-avatar{

        width:48px;

        height:48px;

        font-size:1rem;

    }

    .wish-header{

        display:grid;
        grid-template-columns:1fr auto;
        gap:8px;
        align-items:center;

    }

}


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

<@media (max-width:480px){

    .wish-card{
        display:flex;
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
    }

    .wish-avatar{
        flex:0 0 48px;
        width:48px;
        height:48px;
        margin:0;
    }

    .wish-content{
        flex:1;
        min-width:0;
    }

}

/* ==========================================================
   RSVP & WISHES
   PART 5 - ANIMATION & FINISHING
========================================================== */

/* ==========================================================
   WISH CARD ANIMATION
========================================================== */

.wish-card{

    opacity:0;

    transform:translateY(20px);

    animation:wishFadeUp .6s ease forwards;

}

@keyframes wishFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   RSVP STATUS ANIMATION
========================================================== */

.rsvp-status{

    opacity:0;

    transform:translateY(8px);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.rsvp-status.show{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   SKELETON LOADING
========================================================== */

.skeleton-card{

    position:relative;

    overflow:hidden;

    height:140px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.05);

}

.skeleton-card::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    animation:skeletonLoading 1.5s infinite;

}

@keyframes skeletonLoading{

    to{

        transform:translateX(100%);

    }

}


/* ==========================================================
   BUTTON TRANSITION
========================================================== */

#submit-rsvp{

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        opacity .30s ease,

        background .30s ease;

}

#submit-rsvp:hover{

    transform:translateY(-2px);

}

#submit-rsvp:active{

    transform:scale(.98);

}


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

.rsvp-status.success{

    color:#7ee3a9;

}

.rsvp-status.success::before{

    content:"✓";

    margin-right:8px;

}


/* ==========================================================
   ERROR MESSAGE
========================================================== */

.rsvp-status.error{

    color:#ffb0b0;

}

.rsvp-status.error::before{

    content:"⚠";

    margin-right:8px;

}


/* ==========================================================
   LOADING MESSAGE
========================================================== */

.rsvp-status.loading{

    color:var(--color-primary);

}

.rsvp-status.loading::before{

    content:"";

    width:14px;

    height:14px;

    margin-right:10px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

    border-top-color:var(--color-primary);

    animation:rsvpSpin .8s linear infinite;

}


/* ==========================================================
   SPINNER
========================================================== */

@keyframes rsvpSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   EMPTY STATE ICON
========================================================== */

.wish-empty::before{

    content:"🤍";

    display:block;

    font-size:2rem;

    margin-bottom:18px;

    opacity:.85;

}


/* ==========================================================
   SCROLL SMOOTH
========================================================== */

.wish-list{

    scroll-behavior:smooth;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .wish-list{

        max-height:580px;

    }

}


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

@media (max-width:768px){

    .wish-list{

        max-height:500px;

    }

    .skeleton-card{

        height:120px;

    }

}


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

@media (max-width:480px){

    .wish-list{

        max-height:450px;

    }

    .wish-card{

        animation-duration:.45s;

    }

}

/* ==========================================================
   WEDDING GIFT
========================================================== */

#gift{

    position:relative;

    overflow:hidden;

}

/* ==========================================
   TOAST NOTIFICATION
========================================== */

.toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%) translateY(30px);

    padding:14px 26px;

    background:rgba(25,25,25,.95);

    color:#fff;

    border:1px solid rgba(214,179,106,.35);

    border-radius:50px;

    font-size:.95rem;

    font-weight:500;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}



/* ==========================================================
   GIFT WRAPPER
========================================================== */

.gift-wrapper{

    width:100%;

    max-width:760px;

    margin:0 auto;

    display:grid;

    justify-content:center;
	
	gap:28px;

    align-items:center;
	 
	grid-template-columns:repeat(2,1fr);
}






/* ==========================================================
   GIFT CARD
========================================================== */

.gift-card{

    position:relative;

    width:100%;

    padding:48px 40px;

    text-align:center;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    transition:var(--transition-normal);

}



/* ==========================================================
   GIFT BORDER
========================================================== */

.gift-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(214,179,106,.08);

    pointer-events:none;

}



/* ==========================================================
   BANK NAME
========================================================== */

.gift-card h3{

    margin-bottom:18px;

    font-size:2rem;

    color:var(--color-white);

}



/* ==========================================================
   ACCOUNT NAME
========================================================== */

.account-name{

    margin-bottom:12px;

    color:var(--color-muted);

    font-weight:500;

}



/* ==========================================================
   ACCOUNT NUMBER
========================================================== */

.account-number{

    margin-bottom:30px;

    font-family:var(--font-heading);

    font-size:2.3rem;

    font-weight:700;

    letter-spacing:2px;

    color:var(--color-primary);

    word-break:break-word;

}



/* ==========================================================
   COPY BUTTON
========================================================== */

#copyRekening{

    min-width:240px;

}



/* ==========================================================
   GIFT HOVER
========================================================== */

.gift-card:hover{

    transform:translateY(-8px);

    border-color:rgba(214,179,106,.25);

    box-shadow:0 28px 65px rgba(0,0,0,.35);

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .gift-card{

        padding:42px 32px;

    }

}



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

@media (max-width:768px){

    
    .gift-wrapper{

        grid-template-columns:1fr;
        max-width:420px;
        gap:20px;

    }
	
	.gift-card{

        padding:32px 24px;

    }

    .gift-card h3{

        font-size:1.7rem;

    }

    .account-number{

        font-size:1.9rem;

    }

    #copyRekening{

        width:100%;

    }

}



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

@media (max-width:480px){

    
    .gift-wrapper{

        grid-template-columns:1fr;
        max-width:420px;
        gap:20px;

    }
	
	.gift-card{

        padding:28px 20px;

    }

    .account-number{

        font-size:1.6rem;

        letter-spacing:1px;

    }

}

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

#footer{

    position:relative;

    overflow:hidden;

    padding:80px 8% 50px;

    border-top:1px solid rgba(255,255,255,.08);

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,.02),

            rgba(255,255,255,.05)

        );

}



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

.footer-content{

    width:100%;

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}



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

.footer-content h3{

    margin-bottom:18px;

    font-family:var(--font-heading);

    font-size:2.8rem;

    font-weight:600;

    color:var(--color-white);

}



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

.footer-content p{

    max-width:520px;

    margin-bottom:28px;

    color:var(--color-muted);

    line-height:1.9;

}



/* ==========================================================
   COPYRIGHT
========================================================== */

.footer-content small{

    display:block;

    color:rgba(255,255,255,.55);

    letter-spacing:1px;

}



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

.footer-content::before{

    content:"";

    width:80px;

    height:2px;

    margin-bottom:30px;

    border-radius:999px;

    background:var(--color-primary);

}



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

#footer ::selection{

    background:var(--color-primary);

    color:var(--color-black);

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    #footer{

        padding:70px 7% 45px;

    }

}



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

@media (max-width:768px){

    #footer{

        padding:60px 6% 40px;

    }

    .footer-content h3{

        font-size:2.2rem;

    }

    .footer-content p{

        margin-bottom:22px;

    }

}



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

@media (max-width:480px){

    .footer-content h3{

        font-size:1.9rem;

    }

    .footer-content small{

        font-size:.8rem;

    }

}

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

@media (max-width:768px){

    #hero{
		min-height:100dvh;
		display:flex;
		flex-direction:column;

		justify-content:center;

		align-items:center;

		gap:15px;

		padding:40px 24px 60px;
	}

    #invitee{
        width:100%;
        max-width:420px;
        margin-top:0;
        padding:0;
    }

    .invitee-card{
        padding:0;
    }

    .invitee-label{
        margin-bottom:16px;
    }

    #guestName{
        font-size:2rem;
        line-height:1.4;
        margin-bottom:24px;
    }

    .invitee-note{
        font-size:1rem;
        line-height:1.8;
        margin-bottom:32px;
    }

	.hero-container{
		width:100%;

		display:flex;
		flex-direction:column;

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

		max-width:100%;

		grid-template-columns:none;
	}

    .hero-content{
		width:100%;

		display:flex;
		flex-direction:column;

		align-items:center;
		text-align:center;

		padding:0;
	}

    .hero-title{
        font-size:4rem;
        line-height:.9;
    }

    .hero-wedding-date{
        margin-top:12px;
        font-size:1.7rem;
    }

}

/* ==========================================================
   INSTAGRAM
========================================================== */

.couple-instagram{

    margin-top:28px;

}

.couple-instagram a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    text-decoration:none;

    color:var(--color-primary);

    background:rgba(214,179,106,.08);

    border:1px solid rgba(214,179,106,.18);

    transition:.3s;

}

.couple-instagram a:hover{

    background:rgba(214,179,106,.15);

    transform:translateY(-2px);

}

.couple-instagram i{

    font-size:1.1rem;

}

/* ==========================================================
   SINGLE EVENT CARD
========================================================== */

.event-card{

    max-width:600px;

    width:100%;

    margin:0 auto;
	
	padding:60px 50px;

}