/* ============================================================
   WEDDING INVITATION - MAIN STYLESHEET
   Tema: Putih + Navy Jeans + Gold Aksen
   Konsep: Clean, Modern, Elegan, Casual Premium
   Nama Tamu: Auto-Shrink (Opsi 1) + Wrap (Opsi 2)
   ============================================================ */

:root {
    /* ============================================
       PALET WARNA — Putih + Navy Jeans + Gold
       ============================================ */
    --navy: #2C3E5C;
    --navy-dark: #1A2739;
    --navy-light: #4A5F85;
    --navy-soft: #8DA0BF;
    --navy-pale: #E4EAF3;

    --gold: #C9A961;
    --gold-light: #E0C88E;
    --gold-pale: #F4EBD5;

    --white: #FFFFFF;
    --white-soft: #F7F9FC;
    --white-warm: #FAF8F3;
    --white-blue: #F0F4F9;

    --text-dark: #2C3E5C;
    --text-mid: #6B7A94;
    --text-light: #96A3B8;

    /* ALIAS AGAR KOMPATIBEL DENGAN KODE LAMA */
    --sage: #4A5F85;
    --sage-dark: #2C3E5C;
    --sage-light: #E4EAF3;
    --burgundy: #2C3E5C;
    --burgundy-light: #4A5F85;
    --cream: #FFFFFF;
    --ivory: #F7F9FC;
    --soft-white: #FFFFFF;

    /* FONTS */
    --font-serif: 'Cormorant Garamond', serif;
    --font-script: 'Great Vibes', cursive;
    --font-sans: 'Poppins', sans-serif;

    /* TRANSISI */
    --t-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: var(--white);
    overflow-x: hidden;
    line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading-screen {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .8s ease, visibility .8s ease;
}
#loading-screen.hidden { opacity: 0; visibility: hidden; }
.loading-content { text-align: center; }
.loading-ring {
    width: 60px; height: 60px;
    border: 3px solid var(--navy-pale);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    font-family: var(--font-serif);
    color: var(--navy);
    letter-spacing: 3px;
    font-size: 14px;
}

/* ============================================================
   NAVBAR FLOATING
   ============================================================ */
.navbar-floating {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(44, 62, 92, .10);
    border: 1px solid rgba(44, 62, 92, .06);
    padding: 10px 24px;
    transition: all .4s var(--t-smooth);
    max-width: 95%;
}
.navbar-floating.scrolled {
    top: 10px;
    box-shadow: 0 6px 30px rgba(44, 62, 92, .15);
}
.nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--navy);
    font-size: 16px;
    white-space: nowrap;
}
.nav-logo i { color: var(--gold); font-size: 14px; }
.nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
}
.nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: .5px;
    transition: color .3s ease;
    position: relative;
    padding: 4px 0;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1px;
    background: var(--navy);
    transition: all .3s ease;
    transform: translateX(-50%);
}
.nav-link:hover, .nav-link.active { color: var(--navy); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 4px;
}
.nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--navy);
    transition: all .3s ease;
}

/* ============================================================
   MUSIC TOGGLE
   ============================================================ */
.music-toggle {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 20px rgba(44, 62, 92, .35);
    transition: all .3s ease;
}
.music-toggle:hover {
    transform: scale(1.1);
    background: var(--navy-light);
    box-shadow: 0 8px 28px rgba(44, 62, 92, .45);
}
.music-toggle.playing i { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ============================================================
   OPENING SECTION — SKY & LANDSCAPE (Navy Tint)
   ============================================================ */
.opening-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(ellipse 200px 40px at 15% 12%, rgba(255,255,255,.95) 0%, transparent 60%),
        radial-gradient(ellipse 260px 50px at 45% 8%,  rgba(255,255,255,.85) 0%, transparent 60%),
        radial-gradient(ellipse 180px 35px at 75% 15%, rgba(255,255,255,.9) 0%, transparent 60%),
        radial-gradient(ellipse 220px 45px at 90% 10%, rgba(255,255,255,.8) 0%, transparent 60%),
        linear-gradient(to bottom,
            #B8D4E8 0%,
            #D4E5F0 18%,
            #EDF3F8 30%,
            #C8D8E5 42%,
            #8DA0BF 55%,
            #5A6F90 68%,
            #3D5071 80%,
            #2C3E5C 100%);
    background-size: 100% 100%;
}

.opening-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='mtn' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23667a99'/><stop offset='35%' stop-color='%234a5f85'/><stop offset='70%' stop-color='%23354a6b'/><stop offset='100%' stop-color='%232c3e5c'/></linearGradient><linearGradient id='snow' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23ffffff' stop-opacity='0.95'/><stop offset='100%' stop-color='%23d8e2ea' stop-opacity='0.7'/></linearGradient></defs><path d='M0,320 L120,260 L220,290 L340,200 L420,240 L540,140 L640,210 L720,120 L820,190 L920,150 L1020,230 L1120,180 L1240,240 L1340,190 L1440,260 L1440,600 L0,600 Z' fill='%234a5f85' opacity='0.35'/><path d='M0,360 L180,290 L320,340 L460,240 L580,300 L720,180 L860,270 L980,210 L1120,280 L1260,220 L1440,300 L1440,600 L0,600 Z' fill='url(%23mtn)'/><path d='M680,220 L720,120 L760,220 L740,210 L720,230 L700,210 Z' fill='url(%23snow)'/><path d='M600,260 L640,190 L680,260 Z' fill='url(%23snow)' opacity='0.7'/><path d='M800,240 L840,170 L880,240 Z' fill='url(%23snow)' opacity='0.65'/></svg>");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.opening-section::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><g fill='%23354a6b'><polygon points='0,400 0,180 30,220 60,160 90,220 120,140 150,220 180,170 210,220 240,150 270,220 300,180 330,220 360,160 390,220 420,140 450,220 480,180 510,220 540,150 570,220 600,170 630,220 660,160 690,220 720,140 750,220 780,180 810,220 840,150 870,220 900,170 930,220 960,160 990,220 1020,140 1050,220 1080,180 1110,220 1140,150 1170,220 1200,170 1230,220 1260,160 1290,220 1320,140 1350,220 1380,180 1410,220 1440,160 1440,400'/></g><g fill='%231a2739'><polygon points='0,400 0,260 40,300 80,240 120,300 160,230 200,300 240,250 280,300 320,235 360,300 400,255 440,300 480,240 520,300 560,250 600,300 640,235 680,300 720,255 760,300 800,240 840,300 880,250 920,300 960,235 1000,300 1040,255 1080,300 1120,240 1160,300 1200,250 1240,300 1280,235 1320,300 1360,255 1400,300 1440,240 1440,400'/></g></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.opening-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 3;
    opacity: .85;
}

.opening-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(26,39,57,.20) 0%,
        rgba(26,39,57,.30) 40%,
        rgba(26,39,57,.50) 100%);
    z-index: 4;
    pointer-events: none;
}

.opening-content {
    position: relative;
    z-index: 5;
    padding: 40px 20px;
    color: #fff;
    max-width: 700px;
    width: 100%;
    text-shadow: 0 2px 12px rgba(26,39,57,.45);
}

/* --- Label "THE WEDDING OF" --- */
.opening-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeUpSmooth 1.2s var(--t-smooth) .6s forwards;
}
.label-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E0C88E, transparent);
    box-shadow: 0 0 8px rgba(224,200,142,.6);
}
.label-text {
    font-family: var(--font-serif);
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 600;
    letter-spacing: 10px;
    color: #1A2739;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9E6 50%, #E0C88E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    position: relative;
    padding: 4px 8px;
    filter:
        drop-shadow(0 2px 8px rgba(26,39,57,.9))
        drop-shadow(0 0 20px rgba(201,169,97,.7));
    text-transform: uppercase;
}

/* --- FOTO MEMPELAI --- */
.opening-photos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 34px;
    opacity: 0;
    animation: fadeUpSmooth 1.2s var(--t-smooth) .9s forwards;
}
.opening-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow:
        0 12px 40px rgba(26,39,57,.5),
        0 0 0 4px rgba(255,255,255,.25);
    transition: transform .6s var(--t-smooth), box-shadow .6s ease;
    position: relative;
    flex-shrink: 0;
}
.opening-photo::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(224,200,142,.5);
    animation: rotateOrnament 30s linear infinite;
    pointer-events: none;
}
.opening-photo:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow:
        0 18px 50px rgba(26,39,57,.6),
        0 0 0 4px rgba(255,255,255,.4),
        0 0 30px rgba(201,169,97,.55);
}
.opening-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--t-smooth);
}
.opening-photo:hover img { transform: scale(1.12); }

.opening-amp {
    font-family: var(--font-script);
    font-size: 62px;
    color: var(--gold-light);
    line-height: 1;
    text-shadow: 0 2px 20px rgba(26,39,57,.6), 0 0 30px rgba(224,200,142,.4);
    animation: ampPulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

/* --- NAMA MEMPELAI --- */
.opening-names {
    font-family: var(--font-script);
    font-size: clamp(52px, 9vw, 100px);
    color: #fff;
    margin: 24px 0 16px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    text-shadow: 0 2px 30px rgba(26,39,57,.6), 0 0 60px rgba(201,169,97,.3);
    opacity: 0;
    animation: fadeUpSmooth 1.4s var(--t-smooth) 1.2s forwards;
    font-weight: 400;
}
.opening-names .name-part {
    display: inline-block;
    transition: transform .5s var(--t-smooth);
    position: relative;
}
.opening-names .name-part::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 1px;
    background: var(--gold-light);
    transition: width .6s var(--t-smooth);
}
.opening-names .name-part:hover::after { width: 70%; }
.opening-names .name-amp {
    display: inline-block;
    font-size: .65em;
    color: var(--gold-light);
    text-shadow: 0 0 30px rgba(224,200,142,.6);
}

/* --- TANGGAL --- */
.opening-date-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 42px;
    opacity: 0;
    animation: fadeUpSmooth 1.2s var(--t-smooth) 1.5s forwards;
}
.date-ornament {
    display: inline-block;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.opening-date {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: 4px;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(26,39,57,.55);
    text-transform: uppercase;
    font-weight: 400;
}

/* ============================================================
   TOMBOL BUKA UNDANGAN — Navy & Gold Premium
   ============================================================ */
.btn-open-invitation {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 42px;
    background: linear-gradient(135deg, #C9A961 0%, #E0C88E 50%, #C9A961 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 50px;
    color: #1A2739;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    animation:
        fadeUpSmooth 1.2s var(--t-smooth) 1.8s forwards,
        goldShimmer 3s ease-in-out 3s infinite;
    box-shadow:
        0 10px 30px rgba(26,39,57,.4),
        0 0 0 0 rgba(201,169,97,.6),
        inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .4s var(--t-smooth), box-shadow .4s ease;
    z-index: 1;
}
.btn-open-invitation::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    background: linear-gradient(135deg, #E0C88E, #C9A961, #E0C88E);
    opacity: 0;
    z-index: -1;
    filter: blur(12px);
    transition: opacity .4s ease;
}
.btn-open-invitation::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.8), transparent);
    transform: skewX(-20deg);
    animation: shineSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}
.btn-open-invitation .btn-icon,
.btn-open-invitation .btn-text {
    position: relative;
    z-index: 2;
    color: #1A2739;
}
.btn-open-invitation .btn-icon {
    font-size: 18px;
    display: inline-flex;
    animation: envelopeShake 3s ease-in-out infinite;
}
.btn-open-invitation:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 18px 45px rgba(26,39,57,.5),
        0 0 40px rgba(224,200,142,.7),
        inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-open-invitation:hover::before { opacity: 1; }
.btn-open-invitation:active { transform: translateY(-2px) scale(1); }

/* ============================================================
   ✨ PERSONALISASI NAMA TAMU
   Opsi 1: Auto-Shrink Font
   Opsi 2: Wrap ke Baris Berikutnya
   ============================================================ */
.guest-greeting {
    margin-bottom: 26px;
    color: #fff;
    opacity: 0;
    animation: fadeDownSmooth 1.3s var(--t-smooth) .2s forwards;
}

.guest-to {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 6px;
    color: var(--gold-light);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-shadow: 0 2px 10px rgba(26,39,57,.6);
    font-weight: 400;
}

/* OPSI 2: Membolehkan nama wrap ke baris berikutnya */
.guest-name-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 10px auto;
    flex-wrap: wrap;                    /* ← kunci Opsi 2 */
    max-width: 92vw;
    width: 100%;
}

.guest-ornament-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    flex-shrink: 0;
}

/* OPSI 1: Auto-shrink font — makin panjang nama, makin kecil */
.guest-name {
    font-family: var(--font-script) !important;
    /* clamp: min 22px, ideal 5vw, max 64px */
    font-size: clamp(22px, 5vw, 64px) !important;
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9E6 40%, #E0C88E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: guestGlow 4s ease-in-out infinite;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.guest-sub {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: rgba(255,255,255,.9);
    max-width: 440px;
    margin: 8px auto 0;
    line-height: 1.7;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(26,39,57,.5);
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    z-index: 5;
    animation: bounce 2s infinite;
    opacity: .7;
}
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 10px); }
}

.opening-section.hidden {
    transform: translateY(-100vh);
    opacity: 0;
    pointer-events: none;
    transition: transform 1s var(--t-smooth), opacity 1s ease;
}

/* ============================================================
   KEYFRAMES GLOBAL
   ============================================================ */
@keyframes fadeUpSmooth {
    0%   { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDownSmooth {
    0%   { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes rotateOrnament {
    to { transform: rotate(360deg); }
}
@keyframes ampPulse {
    0%, 100% { transform: scale(1);    text-shadow: 0 2px 20px rgba(26,39,57,.6), 0 0 30px rgba(224,200,142,.4); }
    50%      { transform: scale(1.08); text-shadow: 0 2px 20px rgba(26,39,57,.6), 0 0 45px rgba(224,200,142,.75); }
}
@keyframes envelopeShake {
    0%, 90%, 100% { transform: rotate(0); }
    93%           { transform: rotate(-12deg); }
    96%           { transform: rotate(12deg); }
}
@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes shineSweep {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}
@keyframes guestGlow {
    0%, 100% { filter: drop-shadow(0 3px 20px rgba(26,39,57,.65)) drop-shadow(0 0 15px rgba(201,169,97,.4)); }
    50%      { filter: drop-shadow(0 3px 20px rgba(26,39,57,.65)) drop-shadow(0 0 35px rgba(201,169,97,.85)); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   SECTION HEADING
   ============================================================ */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}
.section-sub {
    font-family: var(--font-serif);
    font-size: 13px;
    letter-spacing: 5px;
    color: var(--gold);
    margin-bottom: 10px;
}
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 48px);
    color: var(--navy);
    font-weight: 500;
    margin-bottom: 15px;
}
.section-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gold);
}
.section-ornament span {
    width: 50px; height: 1px;
    background: var(--gold);
}
.section-ornament i { font-size: 12px; }

/* ============================================================
   SALAM SECTION
   ============================================================ */
.salam-section { padding: 100px 20px; background: var(--white); }
.salam-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.ornament-top, .ornament-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--navy);
    margin-bottom: 30px;
}
.ornament-bottom { margin-top: 30px; margin-bottom: 0; }
.orn-line { width: 60px; height: 1px; background: var(--navy-soft); }
.salam-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3.5vw, 32px);
    color: var(--navy);
    font-weight: 500;
    margin-bottom: 25px;
    font-style: italic;
}
.salam-text { color: var(--text-mid); font-size: 15px; line-height: 1.9; }

/* ============================================================
   MEMPELAI SECTION
   ============================================================ */
.mempelai-section { padding: 100px 20px; background: var(--white-soft); }
.mempelai-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}
.mempelai-card { text-align: center; }
.mempelai-photo-wrap {
    width: 260px; height: 260px;
    margin: 0 auto 25px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--navy);
    outline: 1px solid var(--gold);
    outline-offset: 6px;
    box-shadow: 0 10px 40px rgba(44,62,92,.15);
    transition: transform .5s var(--t-smooth);
}
.mempelai-photo-wrap:hover { transform: scale(1.03); }
.mempelai-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mempelai-name {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--navy);
    font-weight: 600;
    margin-bottom: 6px;
}
.mempelai-nickname {
    font-family: var(--font-script);
    font-size: 26px;
    color: var(--gold);
    margin-bottom: 18px;
}
.mempelai-parents-label {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--navy-light);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.mempelai-parents { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.mempelai-ig {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--navy);
    border: 1px solid var(--navy);
    padding: 6px 16px;
    border-radius: 50px;
    transition: all .3s ease;
}
.mempelai-ig:hover { background: var(--navy); color: #fff; }
.mempelai-amp {
    font-family: var(--font-script);
    font-size: 72px;
    color: var(--gold);
    line-height: 1;
}

/* ============================================================
   QUOTE SECTION — Navy Gradient
   ============================================================ */
.quote-section {
    position: relative;
    padding: 120px 20px;
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%);
    overflow: hidden;
}
.quote-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.quote-inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.quote-icon {
    font-size: 60px;
    color: var(--gold-light);
    opacity: .7;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}
.quote-text {
    font-family: var(--font-serif);
    font-size: clamp(18px, 2.5vw, 24px);
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 25px;
}
.quote-source {
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--gold-light);
    font-weight: 500;
}

/* ============================================================
   ACARA SECTION
   ============================================================ */
.acara-section { padding: 100px 20px; background: var(--white); }
.acara-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.acara-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(44,62,92,.08);
    border: 1px solid var(--navy-pale);
    transition: transform .4s var(--t-smooth), box-shadow .4s ease, border-color .4s ease;
}
.acara-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(44,62,92,.15);
    border-color: var(--gold);
}
.acara-icon {
    width: 60px; height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.acara-title {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--navy);
    letter-spacing: 3px;
    font-weight: 600;
}
.acara-divider {
    width: 40px; height: 2px;
    background: var(--gold);
    margin: 15px auto 25px;
}
.acara-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    margin-bottom: 18px;
    color: var(--text-mid);
    font-size: 14px;
}
.acara-row i {
    color: var(--navy);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}
.acara-row strong {
    display: block;
    color: var(--text-dark);
    margin-bottom: 4px;
    font-weight: 600;
}
.acara-row p { font-size: 13px; margin: 0; line-height: 1.6; }
.btn-maps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-top: 15px;
    transition: all .3s ease;
}
.btn-maps:hover {
    background: var(--navy-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44,62,92,.3);
}

/* ============================================================
   COUNTDOWN SECTION
   ============================================================ */
.countdown-section { padding: 100px 20px; background: var(--white-soft); }
.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
}
.countdown-box {
    background: var(--white);
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 6px 25px rgba(44,62,92,.08);
    border-bottom: 3px solid var(--gold);
    transition: transform .3s ease;
}
.countdown-box:hover { transform: translateY(-4px); }
.countdown-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 42px);
    color: var(--navy);
    font-weight: 600;
    line-height: 1;
}
.countdown-label {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--navy-light);
    margin-top: 8px;
    text-transform: uppercase;
}

/* ============================================================
   LOVE STORY (TIMELINE)
   ============================================================ */
.lovestory-section { padding: 100px 20px; background: var(--white); }
.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--navy-soft), var(--navy), var(--navy-soft), transparent);
    transform: translateX(-50%);
}
.timeline-item {
    position: relative;
    width: 50%;
    padding: 0 40px 50px 0;
}
.timeline-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 50px 40px;
}
.timeline-dot {
    position: absolute;
    top: 10px; right: -10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--gold);
    border: 4px solid var(--white);
    box-shadow: 0 0 0 3px var(--navy);
    z-index: 2;
}
.timeline-item:nth-child(even) .timeline-dot { left: -10px; right: auto; }
.timeline-content {
    background: var(--white);
    padding: 25px 28px;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(44,62,92,.08);
    border-left: 4px solid var(--navy);
    transition: transform .4s var(--t-smooth);
}
.timeline-content:hover { transform: translateY(-4px); }
.timeline-year {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--gold);
    background: rgba(201,169,97,.12);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}
.timeline-content h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight: 600;
}
.timeline-content p { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin: 0; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section { padding: 100px 20px; background: var(--white-soft); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    aspect-ratio: 1;
    box-shadow: 0 6px 20px rgba(44,62,92,.08);
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--t-smooth);
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,39,57,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s ease;
    color: #fff;
    font-size: 30px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Video di gallery grid */
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--t-smooth);
}
.gallery-item:hover video { transform: scale(1.05); }

/* LIGHTBOX */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(26,39,57,.96);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    transition: opacity .3s ease;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    animation: zoomIn .4s var(--t-smooth);
}
.lightbox-video {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    animation: zoomIn .4s var(--t-smooth);
    background: #000;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 50px; height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,.3);
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* ============================================================
   RSVP FORM
   ============================================================ */
.rsvp-section { padding: 100px 20px; background: var(--white); }
.rsvp-wrapper { max-width: 620px; margin: 0 auto; }
.rsvp-form, .ucapan-form {
    background: var(--white);
    padding: 40px 32px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(44,62,92,.08);
    border: 1px solid var(--navy-pale);
}
.form-group { margin-bottom: 22px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 8px;
    letter-spacing: .5px;
}
.form-group label i { color: var(--gold); margin-right: 4px; }
.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--navy-pale);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--white-soft);
    transition: border-color .3s ease, box-shadow .3s ease;
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(44,62,92,.12);
    background: var(--white);
}
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-item {
    flex: 1;
    min-width: 110px;
    cursor: pointer;
    position: relative;
}
.radio-item input { position: absolute; opacity: 0; }
.radio-item span {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid var(--navy-pale);
    font-size: 13px;
    color: var(--text-mid);
    transition: all .3s ease;
}
.radio-item input:checked + span {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: 0 4px 12px rgba(44,62,92,.25);
}
.btn-submit {
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-submit:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(44,62,92,.25);
}
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.form-alert {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    display: none;
    text-align: center;
}
.form-alert.show { display: block; animation: fadeInUp .4s ease; }
.form-alert.success {
    background: rgba(44,62,92,.08);
    color: var(--navy);
    border: 1px solid var(--navy-soft);
}
.form-alert.error {
    background: rgba(220,53,69,.1);
    color: #b02a37;
    border: 1px solid #dc3545;
}

/* ============================================================
   UCAPAN SECTION
   ============================================================ */
.ucapan-section { padding: 100px 20px; background: var(--white-soft); }
.ucapan-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.ucapan-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 8px;
}
.ucapan-list::-webkit-scrollbar { width: 6px; }
.ucapan-list::-webkit-scrollbar-track { background: var(--navy-pale); border-radius: 10px; }
.ucapan-list::-webkit-scrollbar-thumb { background: var(--navy-soft); border-radius: 10px; }
.ucapan-loading, .ucapan-empty {
    text-align: center;
    color: var(--text-mid);
    font-size: 13px;
    padding: 30px 0;
    font-style: italic;
}
.ucapan-item {
    background: var(--white);
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 15px rgba(44,62,92,.06);
    border-left: 3px solid var(--navy);
    animation: fadeInUp .5s ease;
}
.ucapan-item .u-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.ucapan-item .u-name {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--navy);
    font-weight: 600;
}
.ucapan-item .u-date { font-size: 11px; color: var(--text-mid); letter-spacing: .5px; }
.ucapan-item .u-text {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.7;
    font-style: italic;
    margin: 0;
}

/* ============================================================
   GIFT SECTION
   ============================================================ */
.gift-section { padding: 100px 20px; background: var(--white); }
.gift-desc {
    max-width: 600px;
    margin: 15px auto 0;
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.8;
}
.gift-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}
.gift-card {
    background: linear-gradient(160deg, var(--white) 0%, var(--white-blue) 100%);
    padding: 40px 28px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--navy-pale);
    box-shadow: 0 10px 40px rgba(44,62,92,.08);
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--t-smooth), border-color .4s ease;
}
.gift-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
}
.gift-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--navy), var(--gold), var(--navy));
}
.gift-icon {
    width: 65px; height: 65px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.gift-card h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--navy);
    letter-spacing: 3px;
    font-weight: 600;
}
.gift-divider { width: 40px; height: 2px; background: var(--gold); margin: 15px auto 20px; }
.gift-label {
    font-size: 13px;
    color: var(--text-mid);
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.gift-number {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.gift-holder { font-size: 13px; color: var(--text-mid); margin-bottom: 20px; }
.btn-copy {
    background: transparent;
    border: 1.5px solid var(--navy);
    color: var(--navy);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-copy:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px);
}
.btn-copy.copied { background: var(--gold); border-color: var(--gold); color: #1A2739; }

/* ============================================================
   CLOSING SECTION
   ============================================================ */
.closing-section {
    padding: 100px 20px 60px;
    background: linear-gradient(180deg, var(--white-soft) 0%, var(--white) 100%);
    text-align: center;
}
.closing-inner { max-width: 600px; margin: 0 auto; }
.closing-thanks { font-size: 14px; color: var(--text-mid); line-height: 1.9; margin-bottom: 25px; }
.closing-label { font-size: 13px; color: var(--navy); letter-spacing: 1px; margin-bottom: 20px; }
.closing-photo {
    width: 180px; height: 180px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--navy);
    outline: 1px solid var(--gold);
    outline-offset: 6px;
    box-shadow: 0 10px 40px rgba(44,62,92,.15);
}
.closing-photo img { width: 100%; height: 100%; object-fit: cover; }
.closing-names {
    font-family: var(--font-script);
    font-size: clamp(32px, 5vw, 48px);
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 25px;
}
.closing-names span {
    display: block;
    font-size: .7em;
    color: var(--gold);
    margin: 4px 0;
}
.closing-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gold);
    margin-bottom: 30px;
}
.closing-ornament span { width: 50px; height: 1px; background: var(--gold); }
.closing-ornament i { font-size: 12px; }
.closing-footer { font-size: 12px; color: var(--text-mid); letter-spacing: 1px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--t-smooth), transform .9s var(--t-smooth);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   BODY LOCK SAAT OPENING AKTIF
   ============================================================ */
body.opening-locked {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}
body.opening-locked #salam,
body.opening-locked #mempelai,
body.opening-locked #quote,
body.opening-locked #acara,
body.opening-locked #countdown,
body.opening-locked #lovestory,
body.opening-locked #gallery,
body.opening-locked #rsvp,
body.opening-locked #ucapan,
body.opening-locked #gift,
body.opening-locked #closing {
    visibility: hidden;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 992px) {
    .nav-menu { gap: 14px; }
    .nav-link { font-size: 12px; }
    .mempelai-grid { grid-template-columns: 1fr; gap: 30px; }
    .mempelai-amp { font-size: 50px; margin: -10px 0; }
    .ucapan-wrapper { grid-template-columns: 1fr; }
    .ucapan-list { max-height: 400px; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .navbar-floating {
        top: 12px; left: 12px; right: 12px;
        transform: none;
        padding: 10px 16px;
        border-radius: 16px;
    }
    .nav-inner { justify-content: space-between; width: 100%; }
    .nav-logo span { font-size: 14px; }
    .nav-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        background: var(--white);
        border-radius: 16px;
        flex-direction: column;
        padding: 16px;
        gap: 4px;
        box-shadow: 0 10px 40px rgba(44,62,92,.15);
        border: 1px solid var(--navy-pale);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all .3s ease;
    }
    .nav-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-link {
        display: block;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
    }
    .nav-link:hover, .nav-link.active { background: var(--navy-pale); }
    .nav-link::after { display: none; }
    .nav-toggle { display: flex; }
    .nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Opening — mobile */
    .opening-photo { width: 100px; height: 100px; }
    .opening-photo::after { inset: -6px; }
    .opening-amp { font-size: 46px; }
    .label-text { font-size: 14px; letter-spacing: 6px; }
    .label-line { width: 40px; height: 1.5px; }
    .opening-names { font-size: clamp(44px, 13vw, 72px); gap: 14px; }
    .opening-names .name-amp { font-size: .55em; }
    .opening-date { font-size: 13px; letter-spacing: 3px; }
    .date-ornament { width: 20px; }
    .btn-open-invitation {
        padding: 15px 32px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* Nama tamu — mobile (auto-shrink lebih agresif) */
    .guest-name { font-size: clamp(20px, 6vw, 44px) !important; }
    .guest-ornament-line { width: 24px; }
    .guest-sub { font-size: 11.5px; }

    /* Layout umum */
    .acara-grid { grid-template-columns: 1fr; }
    .countdown-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .countdown-box { padding: 20px 10px; }

    /* Timeline */
    .timeline::before { left: 20px; }
    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 40px 50px;
    }
    .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 10px; right: auto;
    }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Gift */
    .gift-grid { grid-template-columns: 1fr; }

    /* Mempelai */
    .mempelai-photo-wrap { width: 220px; height: 220px; }
    .mempelai-name { font-size: 22px; }

    /* Music */
    .music-toggle {
        width: 44px; height: 44px;
        bottom: 16px; right: 16px;
        font-size: 18px;
    }

    /* Lightbox */
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 20px; }

    /* Section */
    .section-heading { margin-bottom: 40px; }
    .rsvp-form, .ucapan-form { padding: 28px 20px; }
}

@media (max-width: 480px) {
    .opening-photos { gap: 12px; }
    .opening-photo { width: 82px; height: 82px; border-width: 2px; }
    .opening-amp { font-size: 38px; }
    .mempelai-photo-wrap { width: 190px; height: 190px; }
    .countdown-num { font-size: 26px; }
    .timeline-content { padding: 20px; }
    .timeline-content h3 { font-size: 18px; }

    .opening-names { font-size: clamp(38px, 14vw, 60px); gap: 10px; }
    .label-text { font-size: 12px; letter-spacing: 4px; }
    .label-line { width: 28px; height: 1px; }

    /* Nama tamu — HP kecil: font minimum 18px */
    .guest-name { font-size: clamp(18px, 7vw, 36px) !important; }
    .guest-ornament-line { width: 18px; }

    .btn-open-invitation {
        padding: 14px 26px;
        font-size: 10.5px;
    }
}

/* ============================================================
   HP SANGAT KECIL — sembunyikan garis ornamen nama tamu
   supaya nama tetap punya ruang lebih
   ============================================================ */
@media (max-width: 380px) {
    .guest-name-wrap { gap: 8px; }
    .guest-ornament-line { display: none; }
    .guest-name { font-size: clamp(16px, 6.5vw, 30px) !important; }
}