/* ===== CUSTOM PROPERTIES ===== */
:root {
    --smg-pink: #e91e7b;
    --smg-magenta: #c2185b;
    --smg-magenta-dark: #8e0038;
    --smg-orange: #f5a623;
    --smg-orange-light: #fbc760;
    --smg-orange-dark: #d4880a;
    --smg-grad: linear-gradient(135deg, var(--smg-pink), var(--smg-orange));
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* --- Dark theme overrides --- */
[data-bs-theme="dark"] {
    --bs-body-bg: #0a0005;
    --bs-body-color: #f5e0ea;
    --bs-secondary-bg: #12000a;
    --bs-tertiary-bg: #1a0010;
    --bs-border-color: rgba(233, 30, 123, .12);
    --smg-text-heading: #ffffff;
    --smg-text-muted: rgba(245, 224, 234, .6);
    --smg-text-faint: rgba(245, 224, 234, .35);
    --smg-card-bg: rgba(233, 30, 123, .05);
    --smg-card-hover-border: var(--smg-orange-dark);
    --smg-nav-bg: rgba(10, 0, 5, .95);
    --smg-countdown-bg: linear-gradient(135deg, #4a0020, #6e0035);
    --smg-visual-bg: linear-gradient(135deg, #4a0020, #6e0035);
    --smg-gallery1: #6e0035;
    --smg-gallery2: #8e0038;
    --smg-gallery3: #4a0020;
    --smg-gallery4: #5c1030;
    --smg-gallery5: #3d0818;
    --smg-overlay: linear-gradient(to top, rgba(10, 0, 5, .6), transparent);
}

/* --- Light theme overrides --- */
[data-bs-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-body-color: #3d1028;
    --bs-secondary-bg: #fef2f7;
    --bs-tertiary-bg: #fff0f5;
    --bs-border-color: rgba(233, 30, 123, .1);
    --smg-text-heading: #1a0010;
    --smg-text-muted: rgba(60, 16, 40, .6);
    --smg-text-faint: rgba(60, 16, 40, .35);
    --smg-card-bg: rgba(233, 30, 123, .03);
    --smg-card-hover-border: var(--smg-pink);
    --smg-nav-bg: rgba(255, 255, 255, .95);
    --smg-countdown-bg: linear-gradient(135deg, #fce4ec, #ffecd2);
    --smg-visual-bg: linear-gradient(135deg, #fce4ec, #ffecd2);
    --smg-gallery1: #fce4ec;
    --smg-gallery2: #ffecd2;
    --smg-gallery3: #fff0f5;
    --smg-gallery4: #fce4ec;
    --smg-gallery5: #ffecd2;
    --smg-overlay: linear-gradient(to top, rgba(255, 255, 255, .5), transparent);
}

/* ===== GLOBAL ===== */
html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    overflow-x: hidden;
    transition: background-color .4s, color .4s
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--font-display)
}

/* ===== UTILITIES ===== */
.text-grad {
    background: var(--smg-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.bg-grad {
    background: var(--smg-grad)
}

.text-smg-muted {
    color: var(--smg-text-muted)
}

.text-smg-faint {
    color: var(--smg-text-faint)
}

.text-smg-heading {
    color: var(--smg-text-heading)
}

.bg-section-alt {
    background-color: var(--bs-secondary-bg);
    transition: background-color .4s
}

.bg-section {
    background-color: var(--bs-body-bg);
    transition: background-color .4s
}

.border-smg {
    border-color: var(--bs-border-color) !important
}

/* ===== LOADER ===== */
#loader {
    position: fixed;
    inset: 0;
    background: var(--bs-body-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s, visibility .6s
}

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

/* ===== NAVBAR ===== */
.navbar {
    transition: background-color .3s, box-shadow .3s, padding .3s
}

.navbar.scrolled {
    background-color: var(--smg-nav-bg) !important;
    box-shadow: 0 2px 30px rgba(233, 30, 123, .12);
    backdrop-filter: blur(15px)
}

.navbar-brand img {
    height: 40px;
    transition: height .3s
}

.navbar.scrolled .navbar-brand img {
    height: 32px
}

.nav-link {
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    position: relative;
    transition: color .3s
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: .5rem;
    right: .5rem;
    height: 2px;
    background: var(--smg-grad);
    transform: scaleX(0);
    transition: transform .3s
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1)
}

.nav-link:hover {
    color: var(--smg-orange) !important
}

/* Theme toggle */
.theme-toggle {
    width: 44px;
    height: 24px;
    border-radius: 50px;
    border: 2px solid var(--bs-border-color);
    background: var(--smg-card-bg);
    cursor: pointer;
    position: relative;
    transition: all .3s;
    padding: 0
}

.theme-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--smg-grad);
    transition: transform .3s
}

[data-bs-theme="light"] .theme-toggle::after {
    transform: translateX(20px)
}

.theme-toggle .t-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    pointer-events: none
}

.theme-toggle .t-sun {
    right: 4px
}

.theme-toggle .t-moon {
    left: 4px
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(233, 30, 123, .1) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(245, 166, 35, .06) 0%, transparent 50%);
    pointer-events: none
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.hero-bg .gl {
    position: absolute;
    background: rgba(233, 30, 123, .04)
}

.hero-bg .gl-h {
    width: 100%;
    height: 1px;
    left: 0
}

.hero-bg .gl-v {
    height: 100%;
    width: 1px;
    top: 0
}

.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    animation: heroFloat 8s infinite
}

.particle:nth-child(odd) {
    background: var(--smg-pink)
}

.particle:nth-child(even) {
    background: var(--smg-orange)
}

@keyframes heroFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh)
    }

    20% {
        opacity: .5
    }

    80% {
        opacity: .2
    }

    100% {
        opacity: 0;
        transform: translateY(-20vh)
    }
}

.hero-logo {
    max-width: clamp(260px, 45vw, 460px);
    filter: drop-shadow(0 0 40px rgba(233, 30, 123, .25))
}

[data-bs-theme="light"] .hero-logo {
    filter: drop-shadow(0 0 25px rgba(233, 30, 123, .12))
}

.hero-badge {
    border: 1px solid var(--bs-border-color)
}

.hero-badge .dot {
    width: 6px;
    height: 6px;
    background: var(--smg-pink);
    border-radius: 50%;
    animation: pulse 2s infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

/* ===== BUTTONS ===== */
.btn-grad {
    background: var(--smg-grad);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(233, 30, 123, .3)
}

.btn-grad:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(233, 30, 123, .45)
}

.btn-outline-smg {
    border: 1.5px solid var(--smg-card-hover-border);
    color: var(--smg-card-hover-border)
}

.btn-outline-smg:hover {
    background: rgba(233, 30, 123, .06);
    color: var(--smg-pink);
    transform: translateY(-2px)
}

/* Pulse/Vibrate Animation Button */
.btn-pulse {
    position: relative;
    transition: all .3s ease
}

.btn-pulse.active {
    animation: btn-shake .5s ease-in-out
}

@keyframes btn-shake {
    0% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(-4px)
    }

    20% {
        transform: translateX(4px)
    }

    30% {
        transform: translateX(-4px)
    }

    40% {
        transform: translateX(4px)
    }

    50% {
        transform: translateX(-4px)
    }

    60% {
        transform: translateX(4px)
    }

    70% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }

    90% {
        transform: translateX(-2px)
    }

    100% {
        transform: translateX(0)
    }
}

/* ===== COUNTDOWN ===== */
.countdown-bar {
    background: var(--smg-countdown-bg);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    transition: background .4s
}

.cd-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1
}

/* ===== CARDS / SHARED ===== */
.smg-card {
    background: var(--smg-card-bg);
    border: 1px solid var(--bs-border-color);
    transition: transform .3s, border-color .3s, background .4s
}

.smg-card:hover {
    transform: translateY(-4px);
    border-color: var(--smg-card-hover-border)
}

/* ===== ABOUT ===== */
.about-visual {
    background: var(--smg-visual-bg);
    transition: background .4s
}

.about-visual .year-watermark {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 900;
    color: rgba(233, 30, 123, .05)
}

.about-visual .logo-about {
    width: 100%;
    height: 100%;
    object-fit: cover;
    float: left;
}

/* ===== THEME CARD ===== */
.theme-card {
    background: linear-gradient(160deg, rgba(233, 30, 123, .07), rgba(245, 166, 35, .03));
    border: 1px solid var(--bs-border-color);
    transition: background .4s
}

.theme-card .quote-mark {
    font-size: 5rem;
    color: var(--smg-magenta-dark);
    opacity: .3;
    line-height: 1
}

/* ===== GALLERY ===== */
.gallery-item {
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s
}

.gallery-item:hover {
    transform: scale(1.02)
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--smg-overlay);
    pointer-events: none
}

.gallery-item .gi-label {
    z-index: 1
}

/* ===== NEWS ===== */
.news-item {
    transition: border-color .3s, background .3s
}

.news-item:hover {
    border-color: var(--smg-pink) !important;
    background: rgba(233, 30, 123, .04)
}

.news-item .ni-arrow {
    transition: transform .3s
}

.news-item:hover .ni-arrow {
    transform: translateX(4px)
}

/* ===== HASHTAGS ===== */
.hash-tag {
    transition: all .3s
}

.hash-tag:hover {
    background: var(--smg-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: scale(1.05)
}

/* ===== REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .7s, transform .7s
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

/* ===== ANIMATIONS FOR DECORATIVE ELEMENTS ===== */

/* Floating/bouncing animation */
@keyframes float-bounce {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* Spinning animation */
@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Swing animation */
@keyframes swing {

    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: top center;
    }

    50% {
        transform: rotate(5deg);
        transform-origin: top center;
    }
}

/* Bounce animation for balloons/elements */
@keyframes bounce-animation {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Fade in scale animation */
@keyframes fade-in-scale {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

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

/* Animation class styles */
.anim-float {
    animation: float-bounce 3s ease-in-out infinite;
}

.anim-spin {
    animation: spin-slow 20s linear infinite;
}

.anim-swing {
    animation: swing 2.5s ease-in-out infinite;
}

.anim-bounce {
    animation: bounce-animation 2s ease-in-out infinite;
}

.anim-bounce-delay-1 {
    animation-delay: 0.1s;
}

.anim-bounce-delay-2 {
    animation-delay: 0.2s;
}

.anim-bounce-delay-3 {
    animation-delay: 0.3s;
}

.section-decoration {
    opacity: 0.9;
    filter: drop-shadow(0 10px 20px rgba(233, 30, 123, 0.1));
    transition: filter 0.3s ease;
}

.section-decoration:hover {
    filter: drop-shadow(0 15px 30px rgba(233, 30, 123, 0.2));
}

/* Responsive decoration sizing */
@media (max-width: 768px) {
    .section-decoration {
        max-width: 100%;
        height: auto;
    }
}

/* ===== RESPONSIVE ===== */
@media(max-width:991.98px) {
    .navbar-collapse {
        background: var(--smg-nav-bg);
        border-radius: 0 0 1rem 1rem;
        padding: 1rem;
        margin-top: .5rem;
        backdrop-filter: blur(15px)
    }
}

/* ===== SERVICE CARDS (Layanan) ===== */

/* Category header */
.svc-category__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.svc-category__line {
    height: 2px;
    background: linear-gradient(to right, var(--bs-border-color), transparent);
    border: none;
}

/* Card base */
.svc-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    padding: 0;
    cursor: pointer;
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08), 0 0 0 1px var(--svc-color, var(--smg-pink));
    border-color: transparent;
}

/* Top accent strip */
.svc-card__accent {
    height: 5px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--svc-color), color-mix(in srgb, var(--svc-color) 60%, #fff));
    transition: height .3s ease;
}

.svc-card:hover .svc-card__accent {
    height: 6px;
}

/* Decorative background element */
.svc-card__deco {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--svc-light);
    opacity: .6;
    transition: all .4s ease;
    pointer-events: none;
}

.svc-card:hover .svc-card__deco {
    transform: scale(1.3);
    opacity: .9;
}

/* Card body */
.svc-card__body {
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
    z-index: 1;
}

/* Icon */
.svc-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--svc-color), color-mix(in srgb, var(--svc-color) 70%, #000));
    margin-bottom: 1rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--svc-color) 30%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}

.svc-card:hover .svc-card__icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--svc-color) 40%, transparent);
}

/* Title */
.svc-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--smg-text-heading);
    margin-bottom: .75rem;
    transition: color .3s;
}

.svc-card:hover .svc-card__title {
    color: var(--svc-color);
}

/* Meta slot */
.svc-card__meta {
    font-family: var(--font-body);
}

.svc-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.svc-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--svc-color);
    background: var(--svc-light);
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    transition: background .3s;
}

.svc-card:hover .svc-card__chip {
    background: color-mix(in srgb, var(--svc-color) 15%, transparent);
}

.svc-card__chip i {
    font-size: .75rem;
}

.svc-card__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--smg-text-muted);
}

.svc-card__date i {
    font-size: .75rem;
}

/* Arrow indicator */
.svc-card__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--svc-light);
    color: var(--svc-color);
    font-size: .85rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .3s ease;
    z-index: 1;
}

.svc-card:hover .svc-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Dark mode tweaks */
[data-bs-theme="dark"] .svc-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .svc-card:hover {
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3), 0 0 0 1px var(--svc-color);
}

[data-bs-theme="dark"] .svc-card__deco {
    opacity: .15;
}

[data-bs-theme="dark"] .svc-card:hover .svc-card__deco {
    opacity: .25;
}

/* Responsive */
@media (max-width: 767.98px) {
    .svc-card__body {
        padding: 1.25rem;
    }

    .svc-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        border-radius: 12px;
    }

    .svc-card__title {
        font-size: .92rem;
    }

    .svc-category__icon {
        width: 36px;
        height: 36px;
        font-size: .95rem;
        border-radius: 10px;
    }
}