/* =========================================================
   HAPPY ANNIVERSARY WEBSITE
   BARUNA ❤️ HEMA ERA
   NEW DARK ROMANTIC DESIGN
========================================================= */


/* =========================================================
   GOOGLE FONT
========================================================= */

:root {

    --bg-main: #0d0509;
    --bg-dark: #12060c;
    --bg-wine: #210b15;
    --bg-card: rgba(255,255,255,.07);

    --wine: #6f1d3b;
    --rose: #e85d8f;
    --pink: #ff8fb5;
    --soft-pink: #ffc4d8;

    --gold: #e7bd83;
    --white: #ffffff;
    --text: rgba(255,255,255,.86);
    --muted: rgba(255,255,255,.55);

    --border: rgba(255,255,255,.12);

    --shadow:
        0 25px 80px rgba(0,0,0,.45);

}


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

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

html {
    scroll-behavior: smooth;
}

body {

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

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(130,25,65,.18),
            transparent 35%
        ),
        var(--bg-main);

    color: var(--text);

    overflow-x: hidden;
}


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

::selection {

    background: var(--rose);

    color: white;
}


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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #090306;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            #8d294f,
            #e85d8f
        );

    border-radius: 20px;
}


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

section {

    position: relative;

    width: 100%;

    overflow: hidden;
}


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

#loading {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(130,30,70,.28),
            transparent 50%
        ),
        #0b0307;

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

#loading.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* HEART LOADER */

.loader-heart {

    width: 58px;
    height: 58px;

    position: relative;

    transform: rotate(45deg);

    background: var(--rose);

    animation:
        loaderHeartbeat 1.2s ease-in-out infinite;

    box-shadow:
        0 0 20px rgba(232,93,143,.6),
        0 0 60px rgba(232,93,143,.25);
}

.loader-heart::before,
.loader-heart::after {

    content: "";

    position: absolute;

    width: 58px;
    height: 58px;

    background: var(--rose);

    border-radius: 50%;
}

.loader-heart::before {

    top: -29px;
    left: 0;
}

.loader-heart::after {

    top: 0;
    left: -29px;
}

@keyframes loaderHeartbeat {

    0%,
    100% {
        transform: rotate(45deg) scale(.85);
    }

    50% {
        transform: rotate(45deg) scale(1);
    }
}


#loading h2 {

    margin-top: 65px;

    font-family: "Great Vibes", cursive;

    font-size: clamp(45px, 7vw, 70px);

    font-weight: 400;

    color: white;
}

#loading h2::after {

    content: "";

    display: block;

    width: 80px;
    height: 1px;

    margin: 15px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}

#loading p {

    font-family: "Great Vibes", cursive;

    font-size: 32px;

    color: var(--soft-pink);
}


/* =========================================================
   WELCOME SCREEN
========================================================= */

.welcome-page {

    position: fixed;

    inset: 0;

    z-index: 9999;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(232,93,143,.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(111,29,59,.25),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #0b0307,
            #1a0710,
            #0b0307
        );

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.welcome-page.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.welcome-box {

    width: min(650px, 92%);

    padding: 65px 45px;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

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

    backdrop-filter: blur(20px);

    box-shadow:
        var(--shadow),
        0 0 80px rgba(232,93,143,.08);

    animation:
        welcomeAppear 1.2s ease;
}

@keyframes welcomeAppear {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.welcome-box h3 {

    margin-bottom: 15px;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--gold);
}


.welcome-box h1 {

    font-family: "Great Vibes", cursive;

    font-size: clamp(55px, 8vw, 90px);

    font-weight: 400;

    line-height: 1;

    color: white;

    text-shadow:
        0 0 20px rgba(255,130,175,.35);
}


.welcome-box p {

    max-width: 500px;

    margin: 30px auto;

    font-size: 14px;

    line-height: 2;

    color: var(--muted);
}


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

button {

    font-family: "Poppins", sans-serif;
}


/* WELCOME BUTTON */

#startJourney {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 30px;

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

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--rose),
            #a52f59
        );

    color: white;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 12px 35px rgba(232,93,143,.25);

    transition: .35s;
}

#startJourney:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(232,93,143,.4);
}


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

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 80px;

    padding: 0 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 2000;

    transition: .4s;
}


header.active {

    background:
        rgba(10,3,7,.72);

    backdrop-filter: blur(18px);

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

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}


/* LOGO */

.logo {

    font-family: "Great Vibes", cursive;

    font-size: 42px;

    font-weight: 600;

    color: white;

    text-shadow:
        0 0 15px rgba(232,93,143,.45);
}

.logo:first-letter {

    color: var(--pink);
}


/* NAV */

nav {

    display: flex;

    align-items: center;

    gap: 30px;
}

nav a {

    position: relative;

    text-decoration: none;

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

    font-size: 13px;

    font-weight: 500;

    transition: .3s;
}

nav a:hover {

    color: white;
}

nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 0;

    height: 2px;

    transform: translateX(-50%);

    background: var(--rose);

    transition: .3s;
}

nav a:hover::after {

    width: 100%;
}


/* MOBILE MENU */

.menu-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;
}

.menu-toggle span {

    width: 27px;

    height: 2px;

    background: white;

    border-radius: 5px;
}


/* =====================================================
   HERO — CINEMATIC LOVE STORY
===================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;

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

    overflow: hidden;
    text-align: center;
    isolation: isolate;

    background: #0b0307;
}


/* =====================================================
   FOTO BACKGROUND
===================================================== */

.hero-photo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -5;
    overflow: hidden;

    transform: scale(1.03);
}

.hero-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        brightness(.72)
        saturate(.85)
        contrast(1.05);

    transform: scale(1.02);

    animation: heroPhotoZoom 12s ease-out forwards;
}

@keyframes heroPhotoZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1.02);
    }
}


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

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            180deg,
            rgba(5, 2, 7, .48) 0%,
            rgba(8, 3, 10, .18) 35%,
            rgba(8, 3, 10, .30) 55%,
            rgba(8, 3, 10, .92) 100%
        );

    pointer-events: none;
}


/* VIGNETTE */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0,0,0,.38) 100%
        );
}


/* =====================================================
   SOFT PINK GLOW
===================================================== */

.hero-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 45%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232,93,143,.16),
            transparent 68%
        );

    filter: blur(25px);

    z-index: -2;

    pointer-events: none;

    animation: heroGlow 5s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% {
        opacity: .65;
        transform: translate(-50%, -50%) scale(1);
    }

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


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

.hero-content {
    position: relative;

    width: min(900px, 92%);

    padding: 40px 20px 70px;

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

    z-index: 5;

    animation: heroContentIn 1.2s ease both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================================
   SMALL TITLE
===================================================== */

.hero-subtitle {
    position: relative;

    margin: 0 0 22px;

    padding: 8px 18px;

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

    letter-spacing: 5px;

    text-transform: uppercase;

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

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

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

    border-radius: 100px;

    backdrop-filter: blur(12px);

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

.hero-subtitle::before,
.hero-subtitle::after {
    content: "♥";

    margin: 0 8px;

    color: var(--rose);

    font-size: 8px;
}


/* =====================================================
   NAMES
===================================================== */

.hero-names {
    margin: 0;

    font-family: "Great Vibes", cursive;

    font-size: clamp(75px, 10vw, 140px);

    font-weight: 400;

    line-height: .82;

    color: white;

    letter-spacing: -1px;

    white-space: nowrap;

    text-shadow:
        0 5px 30px rgba(0,0,0,.65),
        0 0 30px rgba(255,110,160,.28);

    filter: drop-shadow(
        0 10px 20px rgba(0,0,0,.25)
    );
}


/* HEART DI ANTARA NAMA */

.hero-names span {
    position: relative;

    display: inline-flex;

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

    width: 55px;
    height: 55px;

    margin: 0 15px;

    font-family: Arial, sans-serif;

    font-size: 25px;

    color: #ff91b7;

    vertical-align: middle;

    animation: heroHeart 2s ease-in-out infinite;
}

.hero-names span::before {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255,143,181,.35);

    border-radius: 50%;

    box-shadow:
        0 0 25px rgba(232,93,143,.18);
}


/* =====================================================
   HEART ANIMATION
===================================================== */

@keyframes heroHeart {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}


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

.hero-date {
    position: relative;

    margin-top: 30px;

    padding-top: 18px;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 5px;

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

    text-transform: uppercase;
}

.hero-date::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


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

.hero-description {
    max-width: 580px;

    margin: 24px auto 32px;

    font-size: 14px;

    font-weight: 300;

    line-height: 2;

    letter-spacing: .2px;

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

    text-shadow:
        0 2px 12px rgba(0,0,0,.8);
}


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

.hero-button {
    position: relative;

    display: inline-flex;

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

    gap: 14px;

    min-width: 215px;

    padding: 15px 28px;

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

    border-radius: 100px;

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

    backdrop-filter: blur(14px);

    color: white;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .5px;

    cursor: pointer;

    box-shadow:
        0 15px 40px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.12);

    overflow: hidden;

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


/* kilauan button */

.hero-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .7s ease;
}

.hero-button:hover::before {
    left: 150%;
}


.hero-button:hover {
    transform:
        translateY(-5px)
        scale(1.03);

    background:
        linear-gradient(
            135deg,
            rgba(232,93,143,.85),
            rgba(158,49,88,.85)
        );

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.4),
        0 0 35px rgba(232,93,143,.28);
}


/* ICON BUTTON */

.hero-button i {
    font-size: 12px;

    color: #ffc4d8;

    transition: .4s;
}

.hero-button:hover i {
    color: white;

    transform:
        translateX(4px)
        scale(1.15);
}


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

@media (max-width: 600px) {

    .hero {
        min-height: 100svh;
    }

    .hero-photo img {
        object-position: center;
    }

    .hero-content {
        width: 94%;

        padding:
            30px 12px 60px;
    }

    .hero-subtitle {
        margin-bottom: 22px;

        padding: 7px 14px;

        font-size: 8px;

        letter-spacing: 3px;
    }

    .hero-subtitle::before,
    .hero-subtitle::after {
        margin: 0 5px;
    }

    .hero-names {
        font-size: clamp(
            60px,
            18vw,
            90px
        );

        line-height: .9;

        white-space: normal;
    }

    .hero-names span {
        width: 38px;
        height: 38px;

        margin: 0 5px;

        font-size: 17px;
    }

    .hero-date {
        margin-top: 25px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .hero-description {
        max-width: 340px;

        margin:
            22px auto 28px;

        font-size: 12px;

        line-height: 1.9;
    }

    .hero-button {
        min-width: 195px;

        padding: 13px 22px;

        font-size: 11px;
    }

    .hero-glow {
        width: 380px;
        height: 380px;
    }
}


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

#loveMessage {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 20px;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(232,93,143,.15),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #180710,
            #0e0409
        );
}


#loveMessage .letter-card {

    position: relative;

    width: min(760px, 94%);

    min-height: 520px;

    padding: 65px 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

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

    backdrop-filter: blur(20px);

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


.letter-progress {

    position: absolute;

    top: 25px;
    right: 30px;

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--muted);
}


#letterTitle {

    margin-bottom: 35px;

    font-family: "Great Vibes", cursive;

    font-size: clamp(45px, 6vw, 65px);

    font-weight: 400;

    color: var(--soft-pink);
}


#typing {

    max-width: 570px;

    min-height: 180px;

    white-space: pre-line;

    font-size: 15px;

    line-height: 2;

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


.love-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding: 14px 27px;

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

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--rose),
            #9e3158
        );

    color: white;

    cursor: pointer;

    font-size: 13px;

    font-weight: 600;

    transition: .35s;
}

.love-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(232,93,143,.3);
}


/* =========================================================
   GENERAL TITLES
========================================================= */

.story-page h1,
.gallery-page h1,
.video-page h1,
.chat-page h1,
.reason-page h1,
.countdown-page h1,
.letter-page h1,
.gift-page h1 {

    font-family: "Great Vibes", cursive;

    font-size: clamp(50px, 7vw, 75px);

    font-weight: 400;

    color: white;

    text-align: center;

    text-shadow:
        0 0 20px rgba(232,93,143,.3);
}


.story-page > p,
.gallery-page > p,
.video-page > p,
.chat-page > p,
.reason-page > p,
.countdown-page > p,
.gift-page > p {

    max-width: 650px;

    margin: 15px auto 50px;

    text-align: center;

    font-size: 14px;

    line-height: 2;

    color: var(--muted);
}


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

.story-page {

    padding: 120px 8%;

    background:
        linear-gradient(
            180deg,
            #0e0409,
            #180710
        );
}


.timeline {

    position: relative;

    max-width: 850px;

    margin: auto;

    display: grid;

    gap: 25px;
}


.timeline::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            var(--rose),
            transparent
        );

    opacity: .5;
}


.timeline .card {

    position: relative;

    width: 47%;

    padding: 30px;

    border-radius: 25px;

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

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

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

    transition: .5s;
}


.timeline .card:nth-child(even) {

    margin-left: auto;
}


.timeline .card:hover {

    transform: translateY(-5px);

    background:
        rgba(232,93,143,.08);

    border-color:
        rgba(232,93,143,.3);
}


.timeline .card h2 {

    margin-bottom: 12px;

    font-size: 20px;

    color: var(--soft-pink);
}


.timeline .card p {

    font-size: 13px;

    line-height: 1.9;

    color: var(--muted);
}


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

.gallery-page {

    padding: 120px 7%;

    background:
        #0d0509;
}


.gallery-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 15px;
}


.gallery-grid img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    display: block;

    border-radius: 20px;

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

    cursor: pointer;

    transition: .5s;

    filter:
        saturate(.85)
        brightness(.85);
}


.gallery-grid img:hover {

    transform: scale(1.03);

    filter:
        saturate(1)
        brightness(1);

    box-shadow:
        0 20px 50px rgba(0,0,0,.5),
        0 0 25px rgba(232,93,143,.15);
}


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

.video-page {

    padding: 120px 7%;

    background:
        linear-gradient(
            180deg,
            #0d0509,
            #170710
        );
}


.video-container {

    position: relative;

    max-width: 900px;

    margin: auto;

    overflow: hidden;

    border-radius: 30px;

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);
}


.video-container video {

    display: block;

    width: 100%;

    max-height: 650px;

    object-fit: contain;

    background: black;
}


.video-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

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

    transition: .4s;
}


.video-overlay.hide {

    opacity: 0;

    pointer-events: none;
}


.video-overlay button {

    width: 80px;
    height: 80px;

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

    border-radius: 50%;

    background:
        rgba(232,93,143,.8);

    color: white;

    font-size: 25px;

    cursor: pointer;

    transition: .3s;
}


.video-overlay button:hover {

    transform: scale(1.1);

    background:
        var(--rose);
}


/* =========================================================
   CHAT
========================================================= */

.chat-page {

    padding: 120px 20px;

    background:
        #0e0409;
}


.chat-container {

    max-width: 700px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.chat {

    width: fit-content;

    max-width: 70%;

    padding: 15px 20px;

    border-radius: 20px;

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

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

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


.chat.left {

    align-self: flex-start;

    border-bottom-left-radius: 5px;
}


.chat.right {

    align-self: flex-end;

    border-bottom-right-radius: 5px;

    background:
        rgba(232,93,143,.12);
}


.chat .name {

    display: block;

    margin-bottom: 6px;

    color: var(--soft-pink);

    font-size: 11px;

    font-weight: 600;
}


.chat p {

    font-size: 13px;

    line-height: 1.7;

    color: rgba(255,255,255,.8);
}


.chat small {

    display: block;

    margin-top: 6px;

    font-size: 9px;

    color: rgba(255,255,255,.3);
}


/* =========================================================
   REASONS
========================================================= */

.reason-page {

    padding: 120px 7%;

    background:
        linear-gradient(
            180deg,
            #0e0409,
            #180710
        );
}


.reason-grid {

    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.reason-card {

    min-height: 140px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 22px;

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

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

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

    font-size: 13px;

    line-height: 1.7;

    transition: .4s;
}


.reason-card:hover {

    transform: translateY(-7px);

    background:
        rgba(232,93,143,.1);

    border-color:
        rgba(232,93,143,.3);
}


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

.countdown-page {

    padding: 120px 20px;

    text-align: center;

    background:
        #0d0509;
}


.count-box {

    max-width: 800px;

    margin: auto;

    display: grid;

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

    gap: 15px;
}


.count-item {

    padding: 35px 15px;

    border-radius: 25px;

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

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

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


.count-item h2 {

    font-size: 40px;

    color: var(--soft-pink);

    font-weight: 500;
}


.count-item span {

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--muted);
}


/* =========================================================
   LOVE LETTER
========================================================= */

.letter-page {

    min-height: 100vh;

    padding: 120px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(232,93,143,.12),
            transparent 50%
        ),
        #11050b;
}


.letter-page .letter-card {

    width: min(760px, 94%);

    padding: 65px;

    border-radius: 35px;

    text-align: center;

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

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

    backdrop-filter: blur(15px);

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


.letter-page .typing {

    margin-top: 30px;

    white-space: pre-line;

    font-size: 15px;

    line-height: 2;

    color: rgba(255,255,255,.78);
}


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

.gift-page {

    min-height: 80vh;

    padding: 120px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #11050b,
            #1d0812
        );
}


.gift-box {

    position: relative;

    width: 130px;
    height: 130px;

    margin-top: 30px;

    cursor: pointer;

    transition: .5s;
}


.gift-box:hover {

    transform:
        translateY(-10px)
        rotate(-2deg);
}


.gift-body {

    position: absolute;

    bottom: 0;

    width: 130px;
    height: 95px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #b63262,
            #6f1d3b
        );

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


.gift-lid {

    position: absolute;

    top: 20px;

    left: -8px;

    width: 146px;
    height: 35px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #d44d7b,
            #8b274c
        );

    z-index: 2;
}


.gift-box span {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

    font-size: 55px;
}


/* =========================================================
   SURPRISE
========================================================= */

.surprise-page {

    min-height: 100vh;

    padding: 100px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        radial-gradient(
            circle at center,
            rgba(232,93,143,.18),
            transparent 50%
        ),

        linear-gradient(
            135deg,
            #160711,
            #2b0d20,
            #0c0308
        );
}


.surprise-content {

    width: min(700px, 94%);

    padding: 60px 45px;

    border-radius: 35px;

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

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

    backdrop-filter: blur(20px);

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


.surprise-content h1 {

    font-family: "Great Vibes", cursive;

    font-size: clamp(50px, 7vw, 80px);

    font-weight: 400;

    color: white;
}


.surprise-content h2 {

    margin: 10px 0 30px;

    font-family: "Great Vibes", cursive;

    font-size: clamp(55px, 8vw, 90px);

    font-weight: 400;

    color: var(--soft-pink);
}


.surprise-content p {

    max-width: 550px;

    margin: auto auto 35px;

    white-space: pre-line;

    font-size: 14px;

    line-height: 2;

    color: rgba(255,255,255,.8);
}


#fireworkBtn {

    padding: 15px 35px;

    border: none;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--rose),
            #9e3158
        );

    color: white;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 12px 35px rgba(232,93,143,.3);

    transition: .35s;
}


#fireworkBtn:hover {

    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 20px 45px rgba(232,93,143,.45);
}


/* =========================================================
   HIDE NIGHT PAGE
========================================================= */

.night-page {

    display: none !important;
}


/* =========================================================
   ENDING
========================================================= */

.ending {

    min-height: 100vh;

    padding: 100px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(232,93,143,.18),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #160711,
            #0d0509
        );
}


.ending-content {

    position: relative;

    width: min(700px, 94%);

    padding: 50px 30px;
}


.ending-heart {

    font-size: 45px;

    animation:
        endingHeart 1.8s infinite;

    filter:
        drop-shadow(
            0 0 15px rgba(232,93,143,.6)
        );
}


@keyframes endingHeart {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}


.ending-small {

    display: block;

    margin: 15px 0;

    font-size: 10px;

    letter-spacing: 5px;

    color: var(--muted);
}


.ending h1 {

    font-family: "Great Vibes", cursive;

    font-size: clamp(70px, 10vw, 110px);

    font-weight: 400;

    line-height: 1;

    color: white;
}


.ending h1 span {

    color: var(--rose);
}


.ending-line {

    width: 90px;

    height: 1px;

    margin: 30px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


.ending p {

    max-width: 570px;

    margin: 0 auto 20px;

    font-size: 14px;

    line-height: 2;

    color: var(--muted);
}


.ending-promise {

    font-size: 13px !important;
}


.ending h2 {

    margin: 30px auto;

    max-width: 600px;

    font-family: "Great Vibes", cursive;

    font-size: clamp(30px, 5vw, 45px);

    font-weight: 400;

    color: var(--soft-pink);
}


.ending-names {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 35px;

    font-family: "Great Vibes", cursive;

    font-size: 36px;

    color: white;
}


.ending-names strong {

    color: var(--rose);

    font-family: Arial, sans-serif;

    font-size: 20px;
}


.ending-date {

    margin-top: 15px;

    font-size: 9px;

    letter-spacing: 5px;

    color: rgba(255,255,255,.3);
}


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

.anniversary-footer {

    position: relative;

    padding: 75px 20px 30px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #0d0509,
            #070204
        );

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


.footer-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

    margin: auto;
}


.footer-symbol {

    font-family: "Great Vibes", cursive;

    font-size: 55px;

    color: white;

    text-shadow:
        0 0 20px rgba(232,93,143,.35);
}


.footer-symbol span {

    color: var(--rose);

    font-family: Arial, sans-serif;

    font-size: 30px;
}


.footer-quote {

    max-width: 520px;

    margin: 20px auto;

    font-family: "Great Vibes", cursive;

    font-size: 25px;

    line-height: 1.6;

    color: rgba(255,255,255,.65);
}


.footer-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 30px auto;
}


.footer-divider::before,
.footer-divider::after {

    content: "";

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25)
        );
}


.footer-divider span {

    color: var(--rose);
}


.footer-made,
.footer-for {

    font-size: 11px;

    line-height: 2;

    color: rgba(255,255,255,.4);
}


.footer-made span {

    color: var(--rose);
}


.footer-made strong,
.footer-for strong {

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

    font-weight: 500;
}


.footer-love {

    margin-top: 25px;

    font-size: 14px;

    letter-spacing: 4px;

    opacity: .7;

    animation:
        footerPulse 2s infinite;
}


@keyframes footerPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}


.footer-copy {

    display: block;

    margin-top: 30px;

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.2);
}


/* =========================================================
   LIGHTBOX
========================================================= */

#lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

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


#lightboxImage {

    max-width: 90%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 15px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.8);
}


#closeLightbox {

    position: absolute;

    top: 25px;
    right: 35px;

    color: white;

    font-size: 40px;

    cursor: pointer;

    z-index: 5;
}


/* =========================================================
   BACK TO TOP
========================================================= */

#topBtn {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 3000;

    display: none;

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background:
        rgba(232,93,143,.85);

    color: white;

    font-size: 18px;

    cursor: pointer;

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

    transition: .3s;
}


#topBtn:hover {

    transform: translateY(-4px);

    background: var(--rose);
}


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

#musicButton {

    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 3000;

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

    color: white;

    cursor: pointer;

    transition: .3s;
}


#musicButton:hover {

    transform: scale(1.08);

    background:
        var(--rose);
}


/* =========================================================
   FLOATING HEARTS
========================================================= */

.hearts {

    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;
}


.hearts span {

    position: absolute;

    bottom: -50px;

    color: rgba(232,93,143,.18);

    animation:
        floatingHeart linear forwards;
}


@keyframes floatingHeart {

    from {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {

        transform:
            translateY(-110vh)
            rotate(360deg);

        opacity: 0;
    }
}


/* =========================================================
   HEART EXPLOSION
========================================================= */

.heart {

    position: fixed;

    z-index: 99999;

    pointer-events: none;

    animation:
        heartExplosion 3s ease-out forwards;
}


@keyframes heartExplosion {

    to {

        transform:
            translate(
                var(--x),
                var(--y)
            )
            rotate(360deg)
            scale(.2);

        opacity: 0;
    }
}


/* =========================================================
   FIREWORK
========================================================= */

.firework {

    position: fixed;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9990;

    animation:
        fireworkExplosion 1.5s ease-out forwards;
}


@keyframes fireworkExplosion {

    to {

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(.2);

        opacity: 0;
    }
}


/* =========================================================
   SAKURA
========================================================= */

.sakura {

    position: fixed;

    top: -40px;

    z-index: 2;

    pointer-events: none;

    animation:
        sakuraFall linear forwards;
}


@keyframes sakuraFall {

    to {

        transform:
            translateY(110vh)
            rotate(360deg);

        opacity: 0;
    }
}


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

.fade-section {

    opacity: 0;

    transform: translateY(30px);

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


.fade-section.show {

    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 900px) {

    nav {

        gap: 15px;
    }

    nav a {

        font-size: 11px;
    }

    .gallery-grid {

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

    .reason-grid {

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

}


@media (max-width: 700px) {

    header {

        height: 70px;

        padding: 0 20px;
    }

    .logo {

        font-size: 36px;
    }

    nav {

        position: absolute;

        top: 70px;

        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        gap: 20px;

        padding: 25px;

        text-align: center;

        background:
            rgba(10,3,7,.96);

        backdrop-filter: blur(20px);
    }

    nav.show {

        display: flex;
    }

    .menu-toggle {

        display: flex;
    }

    .timeline::before {

        display: none;
    }

    .timeline .card {

        width: 100%;

        margin: 0 !important;
    }

    .count-box {

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

}


@media (max-width: 600px) {

    .welcome-box {

        padding: 50px 25px;
    }

    .welcome-box h1 {

        font-size: 58px;
    }

    #loveMessage .letter-card {

        min-height: 550px;

        padding:
            60px 25px 40px;
    }

    #typing {

        font-size: 13px;

        line-height: 1.9;
    }

    .gallery-grid {

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

        gap: 10px;
    }

    .gallery-grid img {

        height: 200px;

        border-radius: 15px;
    }

    .reason-grid {

        grid-template-columns:
            1fr;
    }

    .chat {

        max-width: 85%;
    }

    .letter-page .letter-card {

        padding: 45px 25px;
    }

    .surprise-content {

        padding: 50px 25px;
    }

    .ending-content {

        padding: 40px 15px;
    }

    .ending-names {

        font-size: 30px;

        gap: 12px;
    }

    .footer-quote {

        font-size: 22px;
    }

}


@media (max-width: 380px) {

    .welcome-box h1 {

        font-size: 48px;
    }

    .count-item h2 {

        font-size: 32px;
    }

    .ending h1 {

        font-size: 62px;
    }

}
```css
/* =========================================================
   HERO TEXT & BUTTON - FINAL POLISH
   Khusus HTML hero yang sekarang
   Tambahkan di PALING BAWAH style.css
========================================================= */


/* =========================================================
   HERO SUBTITLE
   Happy 1st Anniversary
========================================================= */

.hero-content h3 {

    margin: 0 0 18px;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 6px;

    text-transform: uppercase;

    color: #f7d9e5;

    text-shadow:
        0 2px 12px rgba(0,0,0,.8),
        0 0 20px rgba(232,93,143,.3);

    position: relative;

}


/* garis kecil kiri */

.hero-content h3::before {

    content: "";

    display: inline-block;

    width: 45px;
    height: 1px;

    margin-right: 14px;

    vertical-align: middle;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(231,189,131,.8)
        );
}


/* garis kecil kanan */

.hero-content h3::after {

    content: "";

    display: inline-block;

    width: 45px;
    height: 1px;

    margin-left: 14px;

    vertical-align: middle;

    background:
        linear-gradient(
            90deg,
            rgba(231,189,131,.8),
            transparent
        );
}


/* =========================================================
   NAMA
   Baruna ❤️ Era
========================================================= */

.hero-content h1 {

    margin: 0;

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(75px, 10vw, 130px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: 1px;

    color: #ffffff;

    text-shadow:

        0 5px 25px rgba(0,0,0,.75),

        0 0 20px rgba(255,143,181,.35),

        0 0 55px rgba(232,93,143,.15);

}


/* =========================================================
   HEART
========================================================= */

.hero-content h1 span {

    display: inline-block;

    margin:
        0 12px;

    font-family:
        Arial,
        sans-serif;

    font-size: .38em;

    color: #ff8fb5;

    text-shadow:

        0 0 8px rgba(255,143,181,.8),

        0 0 20px rgba(232,93,143,.6);

    animation:
        heroLoveHeart 1.8s ease-in-out infinite;

}


@keyframes heroLoveHeart {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

}


/* =========================================================
   TANGGAL
========================================================= */

.hero-content h2 {

    position: relative;

    margin:
        25px 0 0;

    padding-top: 18px;

    font-family:
        "Cormorant Garamond",
        "Poppins",
        serif;

    font-size: 20px;

    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #f1d6df;

    text-shadow:
        0 2px 10px rgba(0,0,0,.8);

}


/* simbol kecil di atas tanggal */

.hero-content h2::before {

    content: "✦";

    position: absolute;

    top: -4px;

    left: 50%;

    transform:
        translateX(-50%);

    color: #e7bd83;

    font-size: 9px;

}


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

.hero-content p {

    max-width: 570px;

    margin:
        25px auto 32px;

    font-family:
        "Cormorant Garamond",
        "Poppins",
        serif;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.55;

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

    text-shadow:
        0 2px 10px rgba(0,0,0,.85);

}


/* =========================================================
   BUTTON
   Open Our Story ❤️
========================================================= */

#openBtn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 220px;

    padding:
        15px 30px;

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

    border-radius: 100px;

    background:

        linear-gradient(
            135deg,
            rgba(232,93,143,.9),
            rgba(111,29,59,.95)
        );

    color: white;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    overflow: hidden;

    box-shadow:

        0 12px 35px
        rgba(0,0,0,.4),

        0 0 25px
        rgba(232,93,143,.25),

        inset 0 1px 0
        rgba(255,255,255,.25);

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

}


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

#openBtn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

}


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

#openBtn::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

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

    box-shadow:
        inset 0 0 15px
        rgba(255,255,255,.08);

    pointer-events: none;

}


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

#openBtn:hover {

    transform:
        translateY(-5px)
        scale(1.04);

    background:

        linear-gradient(
            135deg,
            #ed6b99,
            #7f2447
        );

    box-shadow:

        0 18px 45px
        rgba(0,0,0,.45),

        0 0 40px
        rgba(232,93,143,.5),

        inset 0 1px 0
        rgba(255,255,255,.35);

}


/* shine bergerak */

#openBtn:hover::before {

    left: 150%;

}


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

#openBtn span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

    border-radius: 50%;

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

    color:
        #ffd3e1;

    font-size: 12px;

    transition: .35s;

}


#openBtn:hover span {

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

    color: white;

    transform:
        scale(1.15);

}


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

@media (max-width: 600px) {

    .hero-content h3 {

        font-size: 8px;

        letter-spacing: 3px;

        margin-bottom: 20px;

    }

    .hero-content h3::before,
    .hero-content h3::after {

        width: 20px;

    }

    .hero-content h3::before {

        margin-right: 8px;

    }

    .hero-content h3::after {

        margin-left: 8px;

    }


    .hero-content h1 {

        font-size:
            clamp(
                60px,
                17vw,
                90px
            );

        line-height: .95;

    }


    .hero-content h1 span {

        margin:
            0 5px;

        font-size: .35em;

    }


    .hero-content h2 {

        font-size: 15px;

        letter-spacing: 3px;

        margin-top: 25px;

    }


    .hero-content p {

        max-width: 330px;

        font-size: 17px;

        line-height: 1.55;

        margin:
            20px auto 28px;

    }


    #openBtn {

        min-width: 200px;

        padding:
            14px 23px;

        font-size: 10px;

        letter-spacing: 1px;

    }

}
```
```css
/* =========================================================
   ✦ PREMIUM ANNIVERSARY NAVBAR LOGO
   B ♥ E
   Tambahkan di PALING BAWAH CSS
========================================================= */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-family: "Great Vibes", cursive;
    font-size: 42px;
    font-weight: 400;

    color: #fff;

    text-decoration: none;

    position: relative;

    padding: 5px 12px;

    line-height: 1;

    transition: all .4s ease;

    text-shadow:
        0 0 10px rgba(255,143,181,.25),
        0 0 25px rgba(232,93,143,.15);
}


/* HURUF B & E */
.logo-letter {
    display: inline-block;

    font-family: "Great Vibes", cursive;

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

    color: #fff;

    transition:
        transform .4s ease,
        color .4s ease,
        text-shadow .4s ease;
}


/* HATI DI TENGAH */
.logo-heart {
    display: inline-flex;

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

    width: 25px;
    height: 25px;

    margin: 0 2px;

    font-family: Arial, sans-serif;

    font-size: 20px;

    color: #ff7fa9;

    filter:
        drop-shadow(0 0 5px rgba(255,90,140,.8))
        drop-shadow(0 0 12px rgba(255,90,140,.45));

    animation:
        logoHeartBeat 1.8s ease-in-out infinite;

    transition: all .4s ease;
}


/* GARIS ELEGAN DI BAWAH LOGO */
.logo::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -4px;

    width: 0;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #e7bd83,
            #ff8fb5,
            #e7bd83,
            transparent
        );

    opacity: 0;

    transition:
        width .4s ease,
        opacity .4s ease;
}


/* HOVER LOGO */
.logo:hover {
    transform: translateY(-2px);

    text-shadow:
        0 0 12px rgba(255,143,181,.45),
        0 0 30px rgba(232,93,143,.25);
}


.logo:hover .logo-letter:first-child {
    color: #ffc4d8;

    transform: translateX(-3px);

    text-shadow:
        0 0 15px rgba(255,143,181,.5);
}


.logo:hover .logo-letter:last-child {
    color: #ffc4d8;

    transform: translateX(3px);

    text-shadow:
        0 0 15px rgba(255,143,181,.5);
}


.logo:hover .logo-heart {
    color: #ff9fbe;

    transform: scale(1.2);

    filter:
        drop-shadow(0 0 8px rgba(255,90,140,1))
        drop-shadow(0 0 20px rgba(255,90,140,.7));
}


.logo:hover::after {
    width: 75px;

    opacity: 1;
}


/* ANIMASI HATI */
@keyframes logoHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.18);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.12);
    }

    60% {
        transform: scale(1);
    }
}


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

@media (max-width: 700px) {

    .logo {
        font-size: 36px;

        gap: 6px;

        padding: 4px 8px;
    }

    .logo-letter {
        font-size: 38px;
    }

    .logo-heart {
        width: 21px;
        height: 21px;

        font-size: 17px;
    }

}
```