html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

section {
    scroll-margin-top: 70px;
}

/* ==================== NAVBAR ==================== */
header {


    z-index: 1030;

}

.navbar {
    backdrop-filter: blur(10px);
}

.navbar-brand {
    letter-spacing: 1px;
}

.nav-link {
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #ffffff !important;
}

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

.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);

    color: white;
}

.hero::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    top: -100px;
    right: -80px;

    animation: floating 6s ease-in-out infinite;
}

.hero::after {
    content: "";
    position: absolute;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

    bottom: -80px;
    left: -50px;

    animation: floating 8s ease-in-out infinite reverse;
}

/* ==================== FOTO PROFIL ==================== */

.profile-image {
    width: 250px;
    height: 250px;

    object-fit: cover;

    border: 6px solid rgba(255, 255, 255, 0.8);

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

    animation:
        fadeIn 1s ease-out,
        floating 5s ease-in-out infinite;
}

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

.btn-custom {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

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

.modern-card {
    border: none;
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.modern-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

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

.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: "";

    display: block;

    width: 50px;
    height: 4px;

    margin: 10px auto 0;

    border-radius: 10px;

    background-color: #0d6efd;
}



/* ==================== TABLE ==================== */

.table {
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

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

.social-btn {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ==================== ANIMATIONS ==================== */

.fade-up {
    animation: fadeUp 0.9s ease-out both;
}

.fade-in {
    animation: fadeIn 1.2s ease-out both;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes floating {

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

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

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

.back-to-top {
    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    position: fixed;
    right: 20px;
    bottom: 20px;

    z-index: 1000;

    text-decoration: none;
}

/* ==================== DARK MODE ==================== */
/* Palet navy gelap + aksen cyan/biru. Hanya aktif saat data-bs-theme="dark". */

[data-bs-theme="dark"] {
    --bs-body-bg: #0a0e17;
    --bs-body-bg-rgb: 10, 14, 23;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-secondary-bg: #1e293b;
    --bs-secondary-bg-rgb: 30, 41, 59;
    --bs-tertiary-bg: #0f1624;
    --bs-tertiary-bg-rgb: 15, 22, 36;
    --bs-secondary-color: #94a3b8;
    --bs-secondary-rgb: 148, 163, 184;
    --bs-border-color: #334155;
}

/* Navbar: bg-primary dibuat navy semi-transparan lewat variabelnya */
[data-bs-theme="dark"] .navbar {
    --bs-primary-rgb: 10, 14, 23;
    --bs-bg-opacity: 0.85;
    --bs-navbar-color: #cbd5e1;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .hero {
    background: linear-gradient(135deg, #0a0e17 0%, #12203a 100%);
}

[data-bs-theme="dark"] .profile-image {
    border-color: #38bdf8;
}

/* Tombol utama hero: cyan ke biru (cukup gelap agar teks putih kontrasnya >= 4,5:1) */
[data-bs-theme="dark"] .hero .btn-light {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, #0e7490, #2563eb);
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-btn-hover-border-color: #475569;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-active-border-color: #475569;
}

/* btn-dark dan bg-dark bawaan Bootstrap sama gelap dengan latar baru */
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: #273449;
    --bs-btn-hover-border-color: #475569;
    --bs-btn-active-bg: #273449;
    --bs-btn-active-border-color: #475569;
}

[data-bs-theme="dark"] footer {
    --bs-dark-rgb: 6, 9, 16;
    border-top: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .modern-card {
    --bs-card-bg: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .modern-card .table {
    --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .table-primary {
    --bs-table-bg: rgba(56, 189, 248, 0.15);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

/* ==================== ACCESSIBILITY ==================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 100px 0;
    }

    .profile-image {
        width: 200px;
        height: 200px;
    }
}