/* ==========================================================
   WEDDING INVITATION
   Style.css
   ========================================================== */


/* ==========================================================
   01. IMPORT FONT
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jura:wght@300;400&display=swap');


/* ==========================================================
   02. RESET
   ========================================================== */

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


/* ==========================================================
   03. ROOT
   ========================================================== */

:root{

    /* Colors */
	--gold:#b9935a;
    --gold-light:#d7b987;

    --text:#2d2d2d;
    --text-soft:#666;
    --text-light:#888;

    --white:#ffffff;
    --bg:#ffffff;
    --bg-soft:#faf8f4;

    --text:#ffffff;
    --text-light:#bbbbbb;
    --text-muted:#999999;
    --text-soft:#888888;

    /* Font */

    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Jura',sans-serif;

    /* Couple Card */

    --side-width:110px;
    --overlay-gap:25px;

    /* Radius */

    --radius-sm:10px;
    --radius-md:20px;
    --radius-lg:28px;
    --radius-full:999px;

    /* Transition */

    --transition:.3s ease;

}


/* ==========================================================
   04. BASE
   ========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--serif);

	background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}


/* ==========================================================
   05. COMMON
   ========================================================== */

img{

    display:block;

    max-width:100%;

}

button{

    font:inherit;

    cursor:pointer;

}

a{

    color:inherit;

    text-decoration:none;

}

section{

    position:relative;

}


/* ==========================================================
   06. REUSABLE SECTION
   ========================================================== */

.section-intro{

    margin-bottom:1rem;

    font-family:var(--sans);

    font-size:1rem;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:var(--gold);

    text-align:center;

}

.section-desc{

    max-width:500px;

    margin:0 auto 4rem;

    color:#aaa;

    font-size:1rem;

    font-style:italic;

    line-height:1.8;

    text-align:center;

}


/* ==========================================================
   07. BUTTON BASE
   ========================================================== */

.btn-open,
.btn-map,
.btn-toggle-gift,
.btn-copy,
.btn-submit{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:.5rem;

    transition:var(--transition);

}

.btn-open:hover,
.btn-map:hover,
.btn-toggle-gift:hover,
.btn-submit:hover{

    background:var(--gold);

    color:var(--dark);

}


/* ==========================================================
   08. COVER
   ========================================================== */

#cover-screen{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    text-align:center;

    padding:70px 35px 60px;

    background:
        linear-gradient(
            rgba(26,22,18,.45),
            rgba(26,22,18,.72)
        ),
        url("../gallery/CP-95586.webp")
        center center/cover no-repeat;

    transition:.8s;

}

.cover-top{

    margin-top:20px;

}

.cover-bottom{

    width:100%;

    max-width:420px;

}

#cover-screen.hidden{

    opacity:0;

    pointer-events:none;

    transform:translateY(-20px);

}

.cover-ornament{

    margin-bottom:1.5rem;

    color:var(--gold);

    font-size:2rem;

    letter-spacing:.30em;

    opacity:.6;

}

.cover-to{

    margin-bottom:.5rem;

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.75rem;

    letter-spacing:.25em;

    text-transform:uppercase;

}

.cover-guest{

    min-height:2.5rem;

    margin-bottom:.5rem;

    color:var(--cream);

    font-size:1.8rem;

    font-style:italic;

    font-weight:300;

}

.cover-note{

    margin-bottom:3rem;

    color:#888;

    font-family:var(--sans);

    font-size:.65rem;

    letter-spacing:.10em;

}

.cover-names{

    margin-bottom:.5rem;

    color:var(--gold);

    font-size:3.5rem;

    font-weight:300;

    letter-spacing:.05em;

    line-height:1.1;

}

.cover-subtitle{

    margin-bottom:8px;

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.75rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    opacity:.8;

}

.btn-open{

    padding:.9rem 2.5rem;

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

    background:transparent;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.75rem;

    letter-spacing:.25em;

    text-transform:uppercase;

}


/* ==========================================================
   09. MAIN CONTENT
   ========================================================== */

#main-content{

    display:none;

}

#main-content.visible{

    display:block;

}


/* ==========================================================
   10. HERO
   ========================================================== */

.hero{   
    display:flex;

    flex-direction:column;

    align-items:center;

    min-height:100svh;

    padding:70px 30px 50px;

    text-align:center;

    background:

        linear-gradient(
            to bottom,
            rgba(26,22,18,.45),
            rgba(26,22,18,.70)
        ),

        url("../gallery/CP-95585.webp")
        center/cover no-repeat;

}

.hero-content{

    margin-top:30px;

}

.hero-bottom{

    width:100%;

    max-width:700px;
	
	margin-top: auto;

}

.hero-top{

    margin-bottom:1rem;

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.70rem;

    letter-spacing:.40em;

    text-transform:uppercase;

    opacity:0;

    animation:fadeDown 1s .3s forwards;

}

.hero-names{

    margin-bottom:1rem;

    color:var(--cream);

    font-size:clamp(3rem,12vw,6rem);

    font-weight:300;

    line-height:1;

    opacity:0;

    animation:fadeUp 1s .6s forwards;

}

.hero-names span{

    color:var(--gold);

}

.hero-date{

    margin-bottom:3rem;

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.75rem;

    letter-spacing:.30em;

    text-transform:uppercase;

    opacity:0;

    animation:fadeUp 1s .9s forwards;

}


/* ==========================================================
   11. COUNTDOWN
   ========================================================== */

.countdown{

    display:flex;

    gap:2rem;
	
	justify-content:center;

    margin-bottom:50px;

    opacity:0;

    animation:fadeUp 1s 1.1s forwards;

}

.cd-unit{

    text-align:center;

}

.cd-num{

    display:block;

    color:var(--gold);

    font-size:2.5rem;

    font-weight:300;

    line-height:1;

    font-variant-numeric:tabular-nums;

}

.cd-label{

    display:block;

    margin-top:.25rem;

    color:var(--cream-dark);

    font-family:var(--sans);

    font-size:.60rem;

    letter-spacing:.20em;

    text-transform:uppercase;

}

/* ==========================================================
   12. QURAN VERSE
   ========================================================== */

.verse-section{

    padding:6rem 2rem;

    background:var(--dark);

    text-align:center;

}

.verse-icon{

    margin-bottom:15px;

    color:var(--gold);

    font-size:30px;

    opacity:.5;

}

.verse-text{

    max-width:620px;

    margin:auto;

    color:var(--cream);

    font-size:clamp(1rem,3vw,1.3rem);

    font-style:italic;

    font-weight:300;

    line-height:1;

}

.verse-ref{
	margin-top: 8px;
	
    color:var(--gold);

    font-family:var(--sans);

    font-size:.7rem;

    letter-spacing:.25em;

}


/* ==========================================================
   13. COUPLE
   ========================================================== */

.couple-section{

    padding:3rem 2rem;

    background:#1f1a14;

}

.couple-grid{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:2rem;

    align-items:center;

    max-width:900px;

    margin:auto;

}


/* ==========================================================
   PERSON CARD
   ========================================================== */

.person-card{

    position:relative;

    height:720px;

    overflow:hidden;

    border-radius:30px;

}

.person-photo{

    width:100%;

    height:100%;

    object-fit:cover;

}

.person-side-title{

    position:absolute;

    top:0;

    right:0;

    display:flex;

    justify-content:center;

    align-items:center;

    width:var(--side-width);

    height:100%;

    background:linear-gradient(#e4ddd6,#b4a598);

    color:#fff;

    writing-mode:vertical-rl;

    text-orientation:mixed;

    font-family:var(--serif);

    font-size:44px;

    letter-spacing:6px;

}

.person-overlay{

    position:absolute;

    left:24px;

    right:calc(var(--side-width) + 20px);

    bottom:24px;

    padding:22px 22px 18px;

    border-radius:20px;

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

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

    backdrop-filter:blur(18px);

}

.person-role{

    margin-bottom:1rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.6rem;

    letter-spacing:.3em;

    text-transform:uppercase;

}

.person-name{

    margin-bottom:10px;

    font-size:30px;

    line-height:1.15;

    color:#fff;

}

.person-parent{

    margin-bottom:16px;

    color:#f3f3f3;

    font-size:.95rem;

    line-height:1.6;

}


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

.person-instagram{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    margin:0 auto;

    border-radius:50%;

    background:#b5a193;

    color:#fff;

    transition:.3s;

}

.person-instagram:hover{

    background:#9c8879;

    transform:translateY(-3px);

}

.person-instagram svg{

    width:18px;

    height:18px;

}


/* ==========================================================
   AMPERSAND
   ========================================================== */

.couple-ampersand{

    color:var(--gold);

    font-size:5rem;

    font-weight:300;

    line-height:1;

    opacity:.4;

}


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

@media (max-width:768px){

    :root{

        --side-width:80px;

        --overlay-gap:15px;

    }

    .person-card{

        height:620px;

    }

    .person-side-title{

        font-size:38px;

    }

    .person-overlay{

        padding:22px;

    }

    .person-name{

        font-size:36px;

    }

    .person-parent{

        font-size:17px;

    }

}


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

@media (max-width:640px){

    .couple-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .couple-ampersand{

        order:0;

        justify-self:center;

        align-self:center;

        font-size:4rem;

        margin:.5rem 0;

    }

}

/* ==========================================================
   14. EVENT
   ========================================================== */

.event-section{

    padding:3rem 2rem;

    background:var(--dark);

    text-align:center;

}

.event-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

    max-width:800px;

    margin:3rem auto 0;

}

.event-card{

    position:relative;

    padding:3rem 2rem;

    border:1px solid rgba(184,156,110,.30);

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

}

.event-type-badge{

    position:absolute;

    top:-.9rem;

    left:50%;

    transform:translateX(-50%);

    padding:0 1rem;

    background:var(--dark);

    color:var(--gold);

    font-family:var(--sans);

    font-size:.60rem;

    letter-spacing:.30em;

    text-transform:uppercase;

    white-space:nowrap;

}

.event-name{

    margin-bottom:1.5rem;

    color:var(--cream);

    font-size:1.8rem;

    font-weight:300;

}

.event-divider{

    width:40px;

    height:1px;

    margin:0 auto 1.5rem;

    background:var(--gold);

    opacity:.5;

}

.event-detail{

    margin-bottom:.5rem;

    color:#aaa;

    font-family:var(--sans);

    font-size:.75rem;

    letter-spacing:.10em;

    line-height:1.7;

}

.event-detail strong{

    display:block;

    margin-bottom:.2rem;

    color:var(--cream);

    font-weight:400;

}

.btn-map{

    margin-top:1.5rem;

    padding:.65rem 1.6rem;

    border:1px solid rgba(184,156,110,.35);

    background:transparent;

    color:black;

    font-family:var(--sans);

    font-size:.65rem;

    letter-spacing:.20em;

    text-transform:uppercase;

}

.btn-map:hover{

    border-color:var(--gold);

}


/* ==========================================================
   15. GALLERY
   ========================================================== */

.gallery-section{

    padding:3rem 2rem;

    background:#1f1a14;

}

.gallery-section h2{

    margin-bottom:3rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:1rem;

    letter-spacing:.35em;

    text-align:center;

    text-transform:uppercase;

}

.gallery-grid{

    display:grid;

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

    gap:.5rem;

    max-width:900px;

    margin:auto;

}

.gallery-item{

    overflow:hidden;

    aspect-ratio:3/4;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.gallery-item:hover img{

    transform:scale(1.05);

}


/* ==========================================================
   16. LIGHTBOX
   ========================================================== */

.lightbox{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    justify-content:center;

    align-items:center;

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

}

.lightbox.open{

    display:flex;

}

.lightbox img{

    max-width:90vw;

    max-height:90vh;

    object-fit:contain;

}

.lightbox-close{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    border:none;

    background:none;

    color:#fff;

    font-size:2rem;

    line-height:1;

    cursor:pointer;

    transition:var(--transition);

}

.lightbox-close:hover{

    transform:rotate(90deg);

    color:var(--gold);

}


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

@media (max-width:480px){

    .gallery-grid{

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

    }

}

/* ==========================================================
   17. LOVE STORY
   ========================================================== */

.story-section{

    padding:3rem 2rem;

    background:var(--dark);

}

.story-section h2{

    margin-bottom:4rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.70rem;

    letter-spacing:.35em;

    text-align:center;

    text-transform:uppercase;

}

.timeline{

    position:relative;

    max-width:600px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:24px;

    width:1px;

    background:rgba(184,156,110,.20);

}

.timeline-item{

    position:relative;

    display:flex;

    gap:2rem;

    margin-bottom:3.5rem;

}

.timeline-dot{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    width:48px;

    height:48px;

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

    border-radius:50%;

    background:var(--dark);

    color:var(--gold);

}

.timeline-content{

    flex:1;

    padding-top:.4rem;

}

.timeline-img{

    width:100%;

    max-height:300px;

    margin-bottom:1rem;

    object-fit:cover;

    aspect-ratio:3/4;

}

.timeline-title{

    margin-bottom:.75rem;

    color:var(--gold);

    font-size:1.35rem;

    font-weight:300;

}

.timeline-desc{

    color:#999;

    font-size:.9rem;

    line-height:1.9;

}


/* ==========================================================
   18. WEDDING GIFT
   ========================================================== */

.gift-section{

    padding:6rem 2rem;

    background:#1f1a14;

    text-align:center;

}

.gift-section h2{

    margin-bottom:.75rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:1rem;

    letter-spacing:.35em;

    text-transform:uppercase;

}

.gift-desc{

    max-width:500px;

    margin:0 auto 2.5rem;

    color:#888;

    font-size:.9rem;

    font-style:italic;

    line-height:1.8;

}

.btn-toggle-gift{

    padding:.85rem 2rem;

    margin-bottom:2.5rem;

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

    background:transparent;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.70rem;

    letter-spacing:.20em;

    text-transform:uppercase;

}

.gift-cards{

    display:none;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:1.5rem;

    max-width:800px;

    margin:0 auto;

}

.gift-cards.open{

    display:grid;

}

.bank-card{

    padding:2rem 1.5rem;

    border:1px solid rgba(184,156,110,.25);

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

    text-align:left;

}

.bank-logo{

    padding-bottom:1rem;

    margin-bottom:1.5rem;

    border-bottom:1px solid rgba(184,156,110,.2);

    color:var(--gold);

    font-family:var(--sans);

    font-size:1.15rem;

}

.bank-number{

    margin-bottom:.35rem;

    color:black;

    font-family:var(--sans);

    font-size:1.05rem;

    letter-spacing:.15em;

}

.bank-name{

    margin-bottom:1.5rem;

    color:#888;

    font-size:.85rem;

}

.btn-copy{

    padding:.55rem 1rem;

    border:1px solid rgba(184,156,110,.30);

    background:transparent;

    color:black);

    font-family:var(--sans);

    font-size:.65rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.btn-copy:hover{

    background:var(--gold);

    color:var(--dark);

}

.btn-copy.copied{

    border-color:#4caf50;

    color:#4caf50;

}


/* ==========================================================
   19. RSVP / WISHES
   ========================================================== */

.wishes-section{

    padding:3rem 2rem;

    background:#16120e;

}

.wishes-section h2{

    margin-bottom:.5rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:1rem;

    letter-spacing:.35em;

    text-align:center;

    text-transform:uppercase;

}

.wish-form{

    max-width:520px;

    margin:0 auto;

}

.form-field{

    margin-bottom:1.3rem;

}

.form-field label{

    display:block;

    margin-bottom:.5rem;

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.65rem;

    letter-spacing:.2em;

    text-transform:uppercase;

}

.form-field input,

.form-field select,

.form-field textarea{

    width:100%;

    padding:.85rem 1rem;

    border:1px solid rgba(184,156,110,.25);

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

    color:var(--cream);

    font-family:var(--serif);

    font-size:.95rem;

    outline:none;

    transition:var(--transition);

}

.form-field input:focus,

.form-field select:focus,

.form-field textarea:focus{

    border-color:var(--gold);

}

.form-field textarea{

    resize:vertical;

    min-height:120px;

}

.form-field input::placeholder,

.form-field textarea::placeholder{

    color:#555;

}

.form-field select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    padding-right:2.5rem;

    background-repeat:no-repeat;

    background-position:right 1rem center;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b89c6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

}

.form-field select option{

    background:#1a1612;

}

.btn-submit{

    width:100%;

    padding:1rem;

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

    background:transparent;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.7rem;

    letter-spacing:.3em;

    text-transform:uppercase;

}

.wishes-list{

    max-width:520px;

    margin:3rem auto 0;

}

.wish-item{

    margin-bottom:1.5rem;

    padding:1rem 1rem 1rem 1.5rem;

    border-left:2px solid rgba(184,156,110,.30);

}

.wish-author{

    margin-bottom:.3rem;

    color:var(--gold);

    font-family:var(--sans);

    font-size:.70rem;

    letter-spacing:.10em;

}

.wish-attendance{

    display:inline-block;

    margin-bottom:.6rem;

    padding:.15rem .6rem;

    border:1px solid rgba(184,156,110,.30);

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.60rem;

    letter-spacing:.10em;

}

.wish-attendance.hadir{

    color:#4caf50;

    border-color:#4caf5066;

}

.wish-attendance.tidak{

    color:#f44336;

    border-color:#f4433666;

}

.wish-message{

    color:#bbb;

    font-size:.9rem;

    font-style:italic;

    line-height:1.8;

}

/* ==========================================================
   20. CLOSING
   ========================================================== */

.closing-section{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:60svh;

    padding:4rem 2rem;

    text-align:center;

    background:
        linear-gradient(
            to bottom,
            rgba(26,22,18,.60),
            rgba(26,22,18,.80)
        ),
        url("../gallery/CP-95585.webp")
        center/cover no-repeat;

}

.closing-inner{

    max-width:600px;

}

.closing-names{

    margin-bottom:1rem;

    color:var(--cream);

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

    font-weight:300;

    line-height:1;

}

.closing-tagline{

    color:var(--gold-light);

    font-family:var(--sans);

    font-size:.7rem;

    letter-spacing:.30em;

    text-transform:uppercase;

}


/* ==========================================================
   21. FOOTER
   ========================================================== */

footer{

    padding:2rem;

    background:#111;

    text-align:center;

}

.footer-text{

    color:#999;

    font-size:.9rem;

    line-height:1.8;

}

.footer-text a{

    color:var(--gold);

}

.footer-text a:hover{

    opacity:.8;

}


/* ==========================================================
   22. FLOATING MUSIC
   ========================================================== */

.music-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

    display:flex;

    justify-content:center;

    align-items:center;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(184,156,110,.95);

    color:#fff;

    font-size:24px;

    cursor:pointer;

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

    transition:var(--transition);

}

.music-btn:hover{

    transform:translateY(-3px);

}

.music-btn.playing{

    animation:rotateMusic 6s linear infinite;

}


/* ==========================================================
   23. REVEAL
   ========================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

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

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   24. KEYFRAMES
   ========================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes rotateMusic{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   25. SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#1a1612;

}

::-webkit-scrollbar-thumb{

    background:rgba(184,156,110,.50);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}


/* ==========================================================
   26. RESPONSIVE
   ========================================================== */

@media (max-width:992px){

    .countdown{

        gap:1.25rem;

    }

    .hero-names{

        font-size:4.5rem;

    }

}

@media (max-width:768px){

    section{

        padding-left:1.5rem;

        padding-right:1.5rem;

    }

    .hero{

        padding:2rem 1.5rem;

    }

    .countdown{

        gap:1rem;

    }

    .cd-num{

        font-size:2rem;

    }

    .event-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .timeline-item{

        gap:1.25rem;

    }

}

@media (max-width:576px){

    .cover-names{

        font-size:2.8rem;

    }

    .hero-names{

        font-size:3.2rem;

    }

    .countdown{

        flex-wrap:wrap;

        justify-content:center;

    }

    .timeline::before{

        left:22px;

    }

    .timeline-dot{

        width:44px;

        height:44px;

    }

    .music-btn{

        width:52px;

        height:52px;

        font-size:20px;

    }

}


@keyframes verseReveal{

    from{

        opacity:0;

        transform:translateY(20px);

        filter:blur(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);

    }

}

.hero-bottom .verse-icon,
.hero-bottom .verse-text,
.hero-bottom .verse-ref{

    opacity:0;

}

.hero-bottom .verse-icon{

    animation:fadeUp .8s ease forwards;

    animation-delay:1.8s;

}

.hero-bottom .verse-text{

    animation:verseReveal 1.2s ease forwards;

    animation-delay:2.2s;

}

.hero-bottom .verse-ref{

    animation:fadeUp .8s ease forwards;

    animation-delay:2.8s;

}

.cover-subtitle,
.cover-names,
.cover-to,
.cover-guest,
.cover-note,
.btn-open{

    color:#fff;

}

.btn-open{

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

}

.btn-open:hover{

    background:white;
    color:#222;

}

.hero-top,
.hero-names,
.hero-date,
.cd-label,
.verse-text,
.verse-ref,
.verse-icon{

    color:white;

}

.cd-num{

    color:#e4c38a;

}

.couple-section{

    background:#ffffff;

}

.section-intro{

    color:black;

}

.section-desc{

    color:#777;

}

.person-overlay{

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

    border:2px solid white;

}

.person-name{

    color:#222;

}

.person-parent{

    color:#666;

}

.event-section{

    background:#f7f3ed;

}

.event-card{

    background:white;

    border:1px solid #ececec;

    border-radius:20px;

}

.event-name{

    color:#222;

}

.event-detail{

    color:#666;

}

.event-detail strong{

    color:#222;

}

.gallery-section h2{

    color:var(--gold);

}

.gallery-item{

    border-radius:14px;

}

.story-section{

    background:#ffffff;

}
.timeline-title{

    color:var(--gold);

}

.timeline-desc{

    color:#666;

}
.gift-section{

    background:#f6f1ea;

}
.bank-card{

    background:#faf8f4;

    border-radius:20px;

}
.wishes-section{

    background:#2c2622;

}
.wishes-section h2{

    color:var(--gold);

}
.wishes-section .section-desc{

    color:#d4d4d4;

}
.wish-message{

    color:#ddd;

}

.wish-author{

    color:var(--gold);

}
.form-field label{

    color:#d4bc8e;

}

.form-field input,
.form-field textarea,
.form-field select{

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

    color:#fff;

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

}

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

    color:#aaa;

}
footer{

    background:#ffffff;

    border-top:1px solid #eee;

}
/* Bride title di kiri */
.person-card-left .person-side-title{

    left:0;
    right:auto;

    writing-mode:vertical-lr;

}

/* Overlay menyesuaikan karena title pindah ke kiri */
.person-card-left .person-overlay{

    left:calc(var(--side-width) + var(--overlay-gap));
    right:var(--overlay-gap);

}