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

body {
    background-color: #050f20;
    color: #fff;
    overflow-x: hidden;
    font-family: 'Mulish', sans-serif;
}


#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(to right, #013d75, #007396);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.6), 0 0 20px rgba(14, 165, 233, 0.3);
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}


body {
    background: #030918;
    font-family: Inter, sans-serif;
    color: white;
}

h1,
h2 {
    font-family: 'Mulish', sans-serif;
}

p,
h4,
h3,
span {
    font-family: 'Mulish', sans-serif;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

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

.section {
    padding: 4rem 5%;
    max-width: 1600px;
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.more-btn {
    padding: 0.8rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.more-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================= GLOBAL ================= */
:root {
    --primary: #38bdf8;
    --secondary: #0ea5e9;
    --glass: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.15);
}


/* ================= NAVBAR ================= */
.navbar {
    position: fixed;
    width: 95vw;
    border-radius: 80px;
    margin: 25px;
    margin-top: 15px;
    top: 0;
    z-index: 1000;

    background: rgba(85, 115, 160, 0.253);

    backdrop-filter: blur(8px);

    border-bottom: 2px solid rgba(255, 255, 255, 0.253);
}

.logo img {
    width: 200px;
    height: auto;
    display: block;
}

.nav-container {
    height: 70px;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}


.nav-menu {
    display: flex;
    gap: 40px;
    margin-left: 40px;
}

.nav-menu a {
    text-decoration: none;

    color: #ffffff;

    transition: .3s;
}


.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
    width: 0;
    transition: width var(--transition);
}

.nav-menu a:hover {
    color: #6cddff;
}

.nav-menu a:hover::after {
    width: calc(100% - 2rem);
}

.nav-menu a.active {
    color: #2e9ecc;
    font-weight: 600;
}

.nav-menu a.active::after {
    width: calc(100% - 2rem);
}


/* ========== SCROLL REVEAL ========== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ================= SOUND ================= */
.sound-wrapper {
    position: relative;
    order: 1;
}


.sound-toggle {
    width: 110px;
    height: 44px;

    border: none;
    border-radius: 20px;
    padding: 10px;

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

    color: #2e9ecc;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: .3s;
}

.sound-toggle:hover {
    transform: translateY(-3px);
}

.sound-popup {
    position: absolute;

    top: 70px;
    right: 0;

    width: 240px;

    padding: 18px;

    border-radius: 24px;

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

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

    backdrop-filter: blur(20px);

    display: none;
    flex-direction: column;
    gap: 12px;

    box-shadow:
        0 10px 30px rgba(124, 199, 255, .18);
}

.sound-popup.active {
    display: flex;
}

.sound-header {
    padding-bottom: 8px;
}

.sound-header span {
    color: #0f4b68;
    font-weight: 600;
}

.sound-item {
    height: 48px;

    border: none;
    border-radius: 16px;

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

    color: #21546b;

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 18px;

    transition: .3s;
}

.sound-item:hover {
    background: #dff6ff;
}

.stop {
    background: #eef9ff;
}

/* ✅ STYLE POPUP KONFIRMASI */
.confirm-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.confirm-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.confirm-box {
    background: #fff;
    padding: 24px 30px;
    border-radius: 16px;
    text-align: center;
    color: #0f4b68;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.confirm-box p {
    margin: 0 0 16px;
    font-weight: 500;
    font-size: 15px;
}

.confirm-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.confirm-btn.yes {
    background: #2e9ecc;
    color: #fff;
}

.confirm-btn.no {
    background: #eee;
    color: #333;
}

.hamburger {
    display: none;
}

@media (max-width: 768px) {
    .nav-container {
        height: 70px;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;

        flex-direction: column;

        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);

        display: none;

        z-index: 999;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 16px 20px;
        color: #0b4863;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }

    .hamburger {
        display: block;
        order: 2;
        border: none;
        background: transparent;
        color: whitesmoke;
        font-size: 25px;
    }

    .sound-wrapper {
        order: 1;
    }

}

@media (max-width:480px) {
    .navbar {
        max-width: 92vw;
        margin: 15px;
    }

    .logo img {
        width: 130px;
    }

    .sound-toggle {
        width: 100px;
        height: 42px;
        margin-left: -20px;
    }

}

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


/* ========================= /
/ ROOT VARIABLES /
/ ========================= */
:root {
    --ocean-dark: #010B18;
    --ocean-medium: #022B4E;
    --ocean-light: #4CC9F0;
    --ocean-glow: rgba(76, 201, 240, 0.4);
    --text-white: #FFFFFF;
    --text-light: #E0F7FF;
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px var(--ocean-glow);
}

/* ========================= /
/ HERO /
/ ========================= */
.abyssal-hero-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--ocean-dark);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

.abyssal-hero-shell::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, var(--ocean-dark) 100%);
    pointer-events: none;
}

.abyssal-bg-stack {
    position: absolute;
    inset: 0;
}

.abyssal-bg-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: all 1.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.abyssal-bg-frame.active {
    opacity: 1;
    transform: scale(1);
}

.abyssal-bg-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75) contrast(1.1);
}

.abyssal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(1, 11, 24, 0.78) 0%,
            rgba(2, 43, 78, 0.45) 45%,
            rgba(1, 11, 24, 0.15) 100%);
}

.abyssal-hero-stage {
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 120px);
    padding: 40px 60px 140px;
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
}

/* ========================= /
/ LEFT CONTENT /
/ ========================= */
.abyssal-copy-column {
    max-width: 750px;
    margin-top: 90px;
}

.abyssal-content {
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.abyssal-content.fade-out {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    filter: blur(6px);
}

.abyssal-content.fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.abyssal-mini-label {
    display: inline-block;
    color: var(--ocean-light);
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    position: relative;
}

.abyssal-mini-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 40%;
    height: 2px;
    background: var(--ocean-light);
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

.abyssal-main-title {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    margin-bottom: 10px;
    font-family: 'Outfit', serif;
    font-weight: 500;
    color: var(--text-white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.abyssal-description {
    width: 100%;
    max-width: 580px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-light);
    opacity: 0.9;
    margin-bottom: 12px;
}

/* ========================= /
/ BUTTONS WITH EFFECTS /
/ ========================= */
.abyssal-action-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.abyssal-primary-btn {
    height: 52px;
    padding: 0 32px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--ocean-light), #219EBC);
    color: var(--ocean-dark);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 201, 240, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.abyssal-primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.abyssal-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(76, 201, 240, 0.45), var(--shadow-glow);
}

.abyssal-primary-btn:hover::before {
    left: 100%;
}

.abyssal-secondary-btn {
    height: 52px;
    padding: 0 36px;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.abyssal-secondary-btn:hover {
    border-color: var(--ocean-light);
    background: rgba(76, 201, 240, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2), 0 0 16px var(--ocean-glow);
    color: var(--ocean-light);
}

/* ========================= /
/ STATS GRID /
/ ========================= */
.abyssal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: linear-gradient(90deg, transparent, rgba(157, 227, 255, 0.15), transparent);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.abyssal-stat-card {
    padding: 18px 22px;
    background: rgba(1, 11, 24, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.abyssal-stat-card:last-child {
    border-right: none;
}

.abyssal-stat-card:hover {
    background: rgba(76, 201, 240, 0.1);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(76, 201, 240, 0.2);
}

.abyssal-stat-card span {
    display: block;
    opacity: 0.75;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 6px;
}

.abyssal-stat-card h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--ocean-light);
    text-shadow: 0 0 12px var(--ocean-glow);
}

/* ========================= /
/ BOTTOM CONTROLS /
/ ========================= */
.abyssal-bottom-controls {
    position: absolute;
    left: 60px;
    bottom: 48px;
    z-index: 30;
}

.abyssal-pagination {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.abyssal-pagination button {
    background: none;
    border: none;
    color: var(--text-white);
    opacity: 0.4;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 4px 0;
}

.abyssal-pagination button::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--ocean-light);
    box-shadow: var(--shadow-glow);
    transform: translateX(-50%);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.abyssal-pagination button:hover {
    opacity: 0.75;
    color: var(--ocean-light);
}

.abyssal-pagination button.active {
    opacity: 1;
    color: var(--ocean-light);
    text-shadow: 0 0 12px var(--ocean-glow);
}

.abyssal-pagination button.active::after {
    width: 100%;
}

.abyssal-progress-shell {
    width: 340px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.abyssal-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #219EBC, var(--ocean-light), #90E0EF);
    border-radius: 9999px;
    box-shadow: 0 0 12px var(--ocean-glow);
    animation: abyssalProgress 8s linear infinite;
}

@keyframes abyssalProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* ========================= /
/ RESPONSIVE /
/ ========================= */
@media(max-width: 1100px) {
    .abyssal-hero-stage {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .abyssal-main-title {
        font-size: 58px;
    }
}

@media(max-width: 768px) {
    .abyssal-hero-shell::after {
        height: 60%;
        background: linear-gradient(to bottom, transparent 0%, var(--ocean-dark) 100%);
    }

    .abyssal-hero-stage {
        padding: 140px 28px 0px;
    }

    .abyssal-copy-column {
        margin-top: 0;
    }

    .abyssal-main-title {
        font-size: 42px;
    }

    .abyssal-description {
        font-size: 16px;
    }

    .abyssal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abyssal-stat-card {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .abyssal-stat-card:nth-child(2n) {
        border-right: none;
    }

    .abyssal-stat-card:nth-child(3),
    .abyssal-stat-card:nth-child(4) {
        border-bottom: none;
    }

    .abyssal-stat-card h3 {
        font-size: 24px;
    }

    .abyssal-bottom-controls {
        left: 28px;
        bottom: 36px;
    }

    .abyssal-progress-shell {
        width: 260px;
    }
}


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

.kaelith-zonewrapper {
    position: relative;
    padding-bottom: 30px;
}


/* ===================================================== */
/* ROOT VARIABLES - TEMA LAUT KONSISTEN */
/* ===================================================== */
:root {
    --ocean-darkest: #010510;
    --ocean-dark: #02111F;
    --ocean-medium: #072F50;
    --ocean-light: #4CC9F0;
    --ocean-glow: rgba(76, 201, 240, 0.35);
    --ocean-pale: #BCEFFF;
    --text-white: #FFFFFF;
    --text-light: #E0F7FF;
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.15);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 24px var(--ocean-glow);
    --gradient-ocean: linear-gradient(135deg, var(--ocean-light), #219EBC);
}

.aethoria-depthworld {
    position: relative;
    background: var(--ocean-darkest);
}


/* ===================================================== */
/* HEADER INTRO */
/* ===================================================== */
.zonesintro {
    text-align: center;
    padding: 120px 24px 80px;
    background-image: url("header.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.zonesintro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #030918, transparent);
    z-index: 1;
}

.zonesintro::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--ocean-medium));
    z-index: 2;
}

.zonesintro>* {
    position: relative;
    z-index: 3;
}

.zonesintro p {
    color: var(--ocean-light);
    letter-spacing: 6px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 0 0 12px var(--ocean-glow);
}

.zonesintro h2 {
    color: var(--text-white);
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.05;
    margin-bottom: 20px;
    font-family: 'Outfit', serif;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.zonesintro span {
    color: rgba(255, 255, 255, 0.75);
    display: block;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 17px;
}

.kaelith-zonewrapper {
    position: relative;
    z-index: 2;
}

/* ===================================================== */
/* ZONE UTAMA */
/* ===================================================== */
.aquorix-zone {
    position: relative;
    margin-bottom: 2px;
    overflow: hidden;
}

.zyphora-zonehero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.zyphora-zonehero:hover {
    transform: scale(1.01);
}

.zyphora-backdrop {
    position: absolute;
    inset: 0;
    transform: scale(1.05);
    transition: transform 1.2s ease;
}

.zyphora-zonehero:hover .zyphora-backdrop {
    transform: scale(1);
}

.zyphora-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.1);
}

.zyphora-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(1, 11, 24, 0.92) 0%,
            rgba(2, 43, 78, 0.55) 45%,
            rgba(1, 11, 24, 0.2) 100%);
}

.lythera-zonecontent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
    padding: 60px 8% 80px 50px;
    position: relative;
    z-index: 2;
}

.elysium-zoneinfo {
    max-width: 520px;
    position: relative;
    z-index: 2;
}

.auralis-label {
    color: var(--ocean-light);
    letter-spacing: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.auralis-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 50%;
    height: 2px;
    background: var(--ocean-light);
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

.vorthalis-title {
    color: var(--text-white);
    font-size: clamp(40px, 6vw, 60px);
    line-height: 1.05;
    margin-bottom: 22px;
    font-family: 'Outfit';
    font-weight: 700;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.kairoth-depth {
    color: var(--ocean-pale);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kairoth-depth::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--ocean-light);
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

.mythral-description {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.85;
    margin-bottom: 32px;
    font-size: 17px;
}

.velora-trigger {
    padding: 16px 32px;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.velora-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.velora-trigger:hover {
    background: var(--gradient-ocean);
    color: var(--ocean-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(76, 201, 240, 0.4), var(--shadow-glow);
    border-color: transparent;
}

.velora-trigger:hover::before {
    left: 100%;
}

/* ===================================================== */
/* EXPAND / DROPDOWN */
/* ===================================================== */
.vexaris-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    background: linear-gradient(to bottom, transparent, rgba(1, 11, 24, 0.4));
}

.vexaris-expand.active {
    max-height: 1400px;
    border-top: 1px solid var(--glass-border);
}

.oralyth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr;
    gap: 32px;
    padding: 80px 8% 60px 50px;
    animation: fadeInUp 0.8s ease-out;
}

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

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

/* ===================================================== */
/* BAGIAN KIRI - GAMBAR */
/* ===================================================== */
.aetherix-showcase {
    border-radius: 24px;
    overflow: hidden;
    height: 420px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(76, 201, 240, 0.15);
    border: 1px solid var(--glass-border);
    transition: transform 0.4s ease;
}

.aetherix-showcase:hover {
    transform: translateY(-6px);
}

.aetherix-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.aetherix-showcase:hover img {
    transform: scale(1.08);
}

/* ===================================================== */
/* BAGIAN TENGAH - DESKRIPSI & FAKTA */
/* ===================================================== */
.xelthor-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-white);
    font-size: 32px;
    margin-bottom: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

.xelthor-heading i {
    color: var(--ocean-light);
    font-size: 28px;
    filter: drop-shadow(0 0 10px var(--ocean-glow));
}

.veltrion-lore p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.9;
    margin-bottom: 32px;
    font-size: 17px;
}

.nyxalis-facts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.orvex-factcard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.orvex-factcard:hover {
    background: rgba(76, 201, 240, 0.1);
    transform: translateX(8px);
    border-color: var(--ocean-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 12px var(--ocean-glow);
}

.orvex-factcard i {
    color: #F1FFA1;
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(241, 255, 161, 0.5));
}

/* ===================================================== */
/* BAGIAN KANAN - STATISTIK & MAKHLUK */
/* ===================================================== */
.aquavex-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.zythera-stats {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aerovex-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.aerovex-stat:hover {
    background: rgba(76, 201, 240, 0.1);
    transform: translateY(-3px);
    border-color: var(--ocean-light);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 14px var(--ocean-glow);
}

.aerovex-stathead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aerovex-stathead i {
    color: var(--ocean-light);
    font-size: 18px;
    filter: drop-shadow(0 0 8px var(--ocean-glow));
}

.aerovex-stathead span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    font-weight: 500;
}

.aerovex-stat h4 {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ocean-pale);
}

.cryonix-creatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cryovex-creaturecard {
    background: var(--glass-bg);
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 14px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.cryovex-creaturecard:hover {
    transform: translateY(-6px);
    border-color: var(--ocean-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 18px var(--ocean-glow);
}

.cryovex-creaturecard img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 12px;
    transition: transform 0.8s ease;
}

.cryovex-creaturecard:hover img {
    transform: scale(1.1);
}

.cryovex-creaturecard p {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
}

/* ===================================================== */
/* TOMBOL TUTUP */
/* ===================================================== */
.xerovian-collapsewrap {
    padding: 0 8% 70px;
    display: flex;
    justify-content: center;
}

.xerovian-collapsebtn {
    padding: 16px 36px;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s ease;
    box-shadow: var(--shadow-soft);
}

.xerovian-collapsebtn:hover {
    background: var(--gradient-ocean);
    color: var(--ocean-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(76, 201, 240, 0.4), var(--shadow-glow);
    border-color: transparent;
}

/* ===================================================== */
/* WARNA LATAR BERBEDA SETIAP ZONA */
/* ===================================================== */
.sunlight-zone {
    background: linear-gradient(to bottom, #010510, #072F50);
}

.twilight-zone {
    background: linear-gradient(to bottom, #072F50, #06101D);
}

.midnight-zone {
    background: linear-gradient(to bottom, #06101D, #040914);
}

.abyss-zone {
    background: linear-gradient(to bottom, #040914, #05172B);
}

.hadal-zone {
    background: linear-gradient(to bottom, #05172B, #000000);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}


/* ===================================================== */
/* RESPONSIVE - TETAP RAPI DI HP & TABLET */
/* ===================================================== */
@media(min-width: 769px) and (max-width: 1024px) {
    .lythera-zonecontent {
        flex-direction: column;
        text-align: center;
        padding: 80px 40px;
    }

    .oralyth-grid {
        grid-template-columns: 1fr;
        padding: 50px 30px 40px;
    }

    .vorthalis-title {
        font-size: 44px;
    }

    .aetherix-showcase {
        height: 320px;
    }
}

@media(max-width: 768px) {
    .zonesintro {
        padding: 90px 24px 60px;
    }

    .zonesintro h2 {
        font-size: 32px;
    }

    .lythera-zonecontent {
        padding: 70px 24px;
        min-height: auto;
    }

    .vorthalis-title {
        font-size: 30px;
    }

    .kairoth-depth {
        font-size: 18px;
    }

    .oralyth-grid {
        padding: 0 24px 50px;
        grid-template-columns: 1fr;
        padding-top: 30px;
    }

    .aetherix-showcase {
        height: 200px;
        width: 310px;
    }

    .velora-trigger {
        width: 100%;
    }

    .nyxalis-facts {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        width: 310px;
        gap: 18px;
    }


    .zythera-stats {
        flex-direction: row;
        overflow-x: auto;
        width: 310px;
    }

    .orvex-factcard {
        width: 265px;
        flex-shrink: 0;
    }

    .cryonix-creatures {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width:480px) {
    .aetherix-showcase {
        height: 200px;
        width: 310px;
    }

    .nyxalis-facts {
        width: 310px;
    }

    .zythera-stats {
        width: 310px;
    }
}

/* ===================================================== */
/* ROOT VARIABLES - TEMA LAUT KONSISTEN */
/* ===================================================== */
:root {
    --ocean-darkest: #010510;
    --ocean-dark: #02111F;
    --ocean-medium: #072F50;
    --ocean-light: #4CC9F0;
    --ocean-glow: rgba(76, 201, 240, 0.35);
    --ocean-pale: #BCEFFF;
    --text-white: #FFFFFF;
    --text-light: #E0F7FF;
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.15);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 24px var(--ocean-glow);
    --gradient-ocean: linear-gradient(135deg, var(--ocean-light), #219EBC);
}

.aqx-orbit {
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 48px;
    padding: 80px 64px;
    background-size: cover;
    background-position: center;
    background-image: url(orbitbackground.jpeg);
    color: var(--text-light);
    min-height: 620px;
    transition: background 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    isolation: isolate;
}

.aqx-orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(1, 5, 16, 0.9) 0%,
            rgba(2, 17, 31, 0.6) 40%,
            rgba(2, 17, 31, 0.6) 60%,
            rgba(1, 5, 16, 0.9) 100%);
    z-index: -1;
}

.aqx-orbit::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--ocean-darkest));
    z-index: -1;
    pointer-events: none;
}

.top-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, transparent, var(--ocean-darkest));
    z-index: 1;
}

/* ===================================================== */
/* LEFT PANEL */
/* ===================================================== */
.aqx-pulse {
    width: 26%;
    margin-top: 60px;
    position: relative;
    z-index: 2;
    animation: fadeInLeft 1s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.aqx-heading {
    font-size: 3rem;
    line-height: 1.1;
    font-family: 'Mulish', serif;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 16px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-top: 20px;
}

.aqx-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 2px;
    background: var(--ocean-light);
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

.aqx-subcopy {
    margin: 24px 0 32px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    font-size: 20px;
}

.aqx-cta {
    padding: 14px 30px;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--gradient-ocean);
    color: var(--ocean-dark);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 15px rgba(76, 201, 240, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.aqx-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.aqx-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(76, 201, 240, 0.45), var(--shadow-glow);
}

.aqx-cta:hover::before {
    left: 100%;
}

/* ===================================================== */
/* MAP AREA */
/* ===================================================== */
.aqx-atlas {
    position: relative;
    width: 42%;
    height: 320px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 1.2s ease-out;
    margin-top: -40px;
}

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

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

.aqx-atlas-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(76, 201, 240, 0.2));
    transition: transform 0.8s ease;
}

.aqx-atlas:hover .aqx-atlas-img {
    transform: scale(1.03);
}

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

.aqx-atlas {
    width: 42%;
    height: 500px;
}

.aqx-atlas-card {
    position: relative;
    width: 100%;
    height: 360px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(180deg,
            rgba(2, 17, 36, 0.411),
            rgba(8, 16, 39, 0.02));

    backdrop-filter: blur(10px);

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .15);

    transition: .5s;
}

.aqx-atlas-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        0 0 50px rgba(76, 201, 240, .15);
}

.aqx-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .05) 1px,
            transparent 1px);

    background-size: 40px 40px;

    pointer-events: none;
}


.aqx-map-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
}

.aqx-map-wrapper:active {
    cursor: grabbing;
}

.aqx-map-draggable {
    position: relative;

    width: 100%;
    height: 100%;

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

    transform-origin: center;
}

.aqx-atlas-img {
    width: 135%;
    height: auto;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    filter:
        drop-shadow(0 0 50px rgba(76, 201, 240, .25));
}

.aqx-node.is-active::after {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 2px solid #4cc9f0;

    animation: ringPulse 1.5s infinite;
}

@keyframes ringPulse {

    0% {
        transform: scale(.5);
        opacity: 1;
    }

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

}

/* ===================================================== */
/* MARKER / TITIK LOKASI */
/* ===================================================== */
.aqx-node {
    position: absolute;
    width: 28px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: url('location.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 12px rgba(76, 201, 240, 0.6));
    animation: aqxPulse 3s infinite ease-in-out;
}

@keyframes aqxPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(76, 201, 240, 0.6));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(76, 201, 240, 0.9));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(76, 201, 240, 0.6));
    }
}

.aqx-node:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0 25px rgba(76, 201, 240, 1));
    z-index: 3;
}

.aqx-node.is-active {
    position: absolute;
    z-index: 10;
}

.aqx-node.is-active::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 260px;
    height: 260px;

    transform:
        translate(-50%, -50%) rotate(0deg);

    transform-origin: center;

    background: conic-gradient(from 0deg,
            rgba(76, 201, 240, 0.0) 0deg,
            rgba(76, 201, 240, 0.05) 40deg,
            rgba(76, 201, 240, 0.25) 80deg,
            rgba(76, 201, 240, 0.6) 100deg,
            rgba(76, 201, 240, 0.0) 160deg);

    filter: blur(2px);

    border-radius: 50%;

    animation: flashlightSweep 2.8s linear infinite;

    pointer-events: none;
}

.aqx-node.is-active::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    background: #4cc9f0;

    border-radius: 50%;

    box-shadow:
        0 0 10px #4cc9f0,
        0 0 25px rgba(76, 201, 240, .8),
        0 0 50px rgba(76, 201, 240, .4);

    animation: pulseCore 1.5s infinite;
}

@keyframes flashlightSweep {

    0% {
        transform:
            translate(-50%, -50%) rotate(-40deg) scale(0.2);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform:
            translate(-50%, -50%) rotate(160deg) scale(1.2);
        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%) rotate(300deg) scale(1.6);
        opacity: 0;
    }

}

@keyframes pulseCore {

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

    50% {
        transform: translate(-50%, -50%) scale(1.4);
    }
}

/* ===================================================== */
/* DETAIL PANEL */
/* ===================================================== */
.aqx-vault {
    position: relative;
    overflow: hidden;
    width: 32%;
    height: 360px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    z-index: 2;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    animation: fadeInRight 1.4s ease-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

.aqx-vault:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.35), 0 0 24px rgba(76, 201, 240, 0.15);
}

.aqx-content,
.aqx-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

/* ===================================================== */
/* KONTEN DALAM PANEL */
/* ===================================================== */
.aqx-visual {
    width: 140px;
    height: 140px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
    margin-left: 25%;
    margin-top: 7%;
}

.aqx-visual:hover {
    transform: scale(1.05);
}

.aqx-title {
    font-size: 2rem;
    font-family: 'Mulish';
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.aqx-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin: 0;
    width: 280px;
}

/* STATISTIK */
.aqx-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    margin: 8px 0;
}

.aqx-metric {
    background: rgba(76, 201, 240, 0.12);
    border: 1px solid rgba(76, 201, 240, 0.25);
    padding: 12px 8px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ocean-pale);
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.aqx-metric:hover {
    background: rgba(76, 201, 240, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 12px var(--ocean-glow);
}

/* DAFTAR MAKHLUK */
.aqx-fauna {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
}

.aqx-creature {
    text-align: center;
    transition: all 0.4s ease;
}

.aqx-creature:hover {
    transform: translateY(-4px);
}

.aqx-creature img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.6s ease;
}

.aqx-creature:hover img {
    transform: scale(1.08);
    border-color: var(--ocean-light);
    box-shadow: 0 0 18px var(--ocean-glow);
}

.aqx-creature span {
    display: block;
    font-size: 12px;
    margin-top: 8px;
    color: var(--text-light);
    font-weight: 500;
}

/* ===================================================== */
/* RESPONSIVE DESIGN */
/* ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .aqx-orbit {
        flex-wrap: wrap;
        gap: 32px;
        padding: 60px 40px;
        min-height: 720px;
    }

    .aqx-pulse {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .aqx-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .aqx-atlas,
    .aqx-vault {
        width: 48%;
        margin-top: 20px;
    }

    .aqx-atlas {
        height: 260px;
    }

    .aqx-vault {
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .aqx-orbit {
        flex-direction: column;
        gap: 24px;
        padding: 50px 24px;
        min-height: 920px;
    }

    .aqx-pulse,
    .aqx-atlas,
    .aqx-vault {
        width: 100%;
    }

    .aqx-pulse {
        text-align: center;
    }

    .aqx-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .aqx-atlas {
        height: 220px;
        margin-top: 50px;
    }

    .aqx-vault {
        min-height: 340px;
        padding: 24px 20px;
        margin-top: 70px;
    }

    .aqx-metrics {
        gap: 8px;
    }

    .aqx-fauna {
        gap: 10px;
    }

    .aqx-heading {
        font-size: 2.4rem;
    }

    .aqx-subcopy {
        width: 300px;
        margin-left: 25px;
    }
}


/* =========================================================
MYSTERIES OF THE DEEP - LAYOUT VERTIKAL KANAN
========================================================= */
:root {
    --ocean-1: #010b1d;
    --ocean-2: #021530;
    --ocean-3: #05244a;
    --ocean-accent: #48d2ff;
    --ocean-glow: rgba(72, 210, 255, 0.4);
    --text-white: #ffffff;
    --text-light: #d6edff;
    --glass: rgba(255, 255, 255, 0.07);
    --border: rgba(72, 210, 255, 0.2);
    --border-active: rgba(72, 210, 255, 0.6);
}

.mystery-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #010510, var(--ocean-1), #030918);
    padding: 40px;
}

/* Efek Latar */
.mystery-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ocean-particles {
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(72, 210, 255, 0.3), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(72, 210, 255, 0.25), transparent);
    background-size: 200% 200%;
    animation: floatParticles 35s linear infinite;
}

@keyframes floatParticles {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-2%, 100px);
    }
}

/* Kontainer Utama */
.mystery-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

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

.mystery-section-title {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    position: relative;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 20px;

    border-radius: 999px;

    background: rgba(72, 210, 255, .08);
    border: 1px solid rgba(72, 210, 255, .25);

    color: var(--ocean-accent);

    font-size: .9rem;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);
}

.mystery-section-title h2 {
    margin-top: 22px;
    margin-bottom: 18px;

    color: #fff;

    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;

    line-height: 1.1;

    text-shadow:
        0 0 25px rgba(72, 210, 255, .2),
        0 0 50px rgba(72, 210, 255, .1);
}

.mystery-section-title p {
    color: var(--text-light);

    line-height: 1.8;
    opacity: .85;

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

.section-line {
    width: 180px;
    height: 2px;

    margin: 28px auto 0;

    background: linear-gradient(90deg,
            transparent,
            var(--ocean-accent),
            transparent);

    box-shadow: 0 0 20px var(--ocean-glow);
}

/* Header Atas */
.mystery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.mystery-index {
    font-size: 1.1rem;
    color: var(--text-light);
    letter-spacing: 3px;
    background: var(--glass);
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.nav-dots {
    display: flex;
    gap: 12px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: all 0.4s ease;
}

.dot.active {
    background: var(--ocean-accent);
    box-shadow: 0 0 15px var(--ocean-glow);
    transform: scale(1.3);
}

.dot:hover {
    border-color: var(--ocean-accent);
    box-shadow: 0 0 10px var(--ocean-glow);
}

/* =========================================================
TATA LETAK UTAMA
========================================================= */
.mystery-layout {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 35px;
    align-items: stretch;
    min-height: 75vh;
}

/* =========================================================
KIRI: TAMPILAN UTAMA BESAR
========================================================= */
.main-display {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(72, 210, 255, 0.15);
}

.display-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.display-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease, opacity 0.6s ease;
    transform: scale(1.05);
}

.main-display:hover .display-bg img {
    transform: scale(1);
}

.display-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(1, 11, 29, 0.452) 0%,
            rgba(2, 21, 48, 0.534) 100%);
    backdrop-filter: blur(2px);
}

.display-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    z-index: 5;
}

.display-title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-white);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 25px var(--ocean-glow);
    transition: all 0.5s ease;
}

.display-desc {
    color: var(--text-light);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 650px;
    margin-bottom: 40px;
    opacity: 0.9;
    transition: all 0.5s ease;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    transition: all 0.5s ease;
}

.fact-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 18px;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.fact-card:hover {
    transform: translateY(-4px);
    border-color: var(--ocean-accent);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 20px var(--ocean-glow);
    background: rgba(72, 210, 255, 0.08);
}

.fact-card h4 {
    color: var(--ocean-accent);
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.fact-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.9;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text-white);
    font-size: 1.3rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
    z-index: 10;
}

.nav-btn:hover {
    border-color: var(--ocean-accent);
    background: rgba(72, 210, 255, 0.15);
    box-shadow: 0 0 25px var(--ocean-glow);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* =========================================================
KANAN: SIDEBAR VERTIKAL
========================================================= */
.sidebar-thumbs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-title {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin: 0;
}

.thumb-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.thumb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 2px solid transparent;
    background: var(--glass);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
}

.thumb-item.active {
    border-color: var(--border-active);
    box-shadow: 0 0 25px var(--ocean-glow);
    transform: translateX(-6px);
    background: rgba(72, 210, 255, 0.1);
}

.thumb-item:hover {
    transform: translateX(-4px);
    border-color: rgba(72, 210, 255, 0.4);
}

.thumb-item img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.6s ease;
}

.thumb-item:hover img {
    transform: scale(1.1);
}

.thumb-info {
    flex: 1;
}

.thumb-num {
    display: inline-block;
    color: var(--ocean-accent);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
    background: rgba(72, 210, 255, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
}

.thumb-info h5 {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

/* Efek Transisi */
.fade-change {
    opacity: 0;
    transform: translateY(20px);
}

/* =========================================================
RESPONSIF
========================================================= */
@media (max-width: 1024px) {
    .mystery-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .main-display {
        min-height: 550px;
    }

    .thumb-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media(max-width: 768px) {
    .mystery-section {
        padding: 30px;
    }

    .mystery-layout {
        min-height: auto;
    }

    .main-display {
        min-height: 600px;
        width: 300px;
        left: -5%;
        order: 2;
    }

    .display-content {
        padding: 30px;
    }

    .display-desc {
        font-size: 1rem;
    }


    .thumb-item {
        padding: 10px;
    }

    .thumb-item img {
        width: 60px;
        height: 60px;
    }

    .display-title {
        font-size: 1.4rem;
        margin-top: 0;
        line-height: 1.2;
    }

    .facts-grid {
        grid-template-columns: 1fr;
        gap: 12px;

        height: 200px;
        overflow-y: auto;

        margin-top: 20px;
    }

    .prev-btn,
    .next-btn {
        display: none;
    }

    .thumb-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 14px;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .thumb-list::-webkit-scrollbar {
        height: 4px;
    }

    .thumb-list::-webkit-scrollbar-thumb {
        background: rgba(72, 210, 255, .4);
        border-radius: 999px;
    }

    .sidebar-thumbs {
        margin-top: 30px;
        width: 300px;
        margin-left: -5%;
        order: 1;
    }

    .sidebar-title {
        margin-bottom: 10px;
    }

    .thumb-item {
        flex: 0 0 240px;
        flex-shrink: 0;

        scroll-snap-align: start;
    }

    .thumb-item.active {
        transform: none;
        box-shadow: 0 0 15px var(--ocean-glow);
    }

}

@media (max-width:480px) {
    .mystery-section {
        padding: 30px;
    }
}

/* ==========================================
   VARIABEL DASAR
========================================== */
:root {
    --aqua-dark: #01141d;
    --aqua-primary: #165c9d;
    --aqua-secondary: #00b4d8;
    --aqua-light: #90e0ef;
    --aqua-pale: #caf0f8;
    --aqua-white: #ffffff;
    --aqua-bg-card: #f8fcff;
    --shadow-sm: 0 2px 8px rgba(0, 180, 216, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}

/* ==========================================
   SECTION UTAMA
========================================== */
.aqua-realm {
    position: relative;
    padding: 80px 5% 60px;
    max-width: 1400px;
    margin: 0 auto;
    background: url(backcreatures.jpg) center/cover no-repeat;
    min-height: 100vh;
    overflow: hidden;
    z-index: 1;
    margin-top: 50px;
}

.aqua-realm::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 20%,
            rgba(1, 20, 29, 0.7) 60%,
            #030918 100%);
    pointer-events: none;
    z-index: -1;
}

/* WAVE TOP */
.wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

.wave-top svg {
    display: block;
    width: 100%;
    height: 100px;
}

.wave-top path {
    fill: #030918;
}

.aqua-container {
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

/* ==========================================
   HEADER JUDUL
========================================== */
.aqua-header {
    text-align: center;
    margin-bottom: 30px;
}

.aqua-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--aqua-white);
    margin: 0 0 8px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aqua-subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: var(--aqua-light);
    margin: 0;
    opacity: 0.9;
}

/* ==========================================
   TABS NAVIGASI
========================================== */
.aqua-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.aqua-tabshell {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    justify-content: center;
}

.aqua-tab {
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: var(--aqua-white);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.aqua-tab i {
    font-size: 1rem;
}

.aqua-tab:hover {
    background: rgba(255, 255, 255, 0.12);
}

.active-tab {
    background: var(--aqua-white);
    color: var(--aqua-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ==========================================
   KONTEN UTAMA - DIPERBAIKI AGAR RAPI
========================================== */
.aqua-main-container {
    background: linear-gradient(to bottom right, #74d8ff36, #1f527433);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* Gambar lebih lebar dari teks */
    gap: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid #a4dcff7c;
    max-width: 1100px;
    margin: 0 auto;
    height: auto;
    min-height: 550px;
    /* Tinggi minimal pas */
    overflow: hidden;
}

/* RESPONSIVE: HP jadi 1 kolom */
@media (max-width: 900px) {
    .aqua-main-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   BAGIAN MEDIA (GAMBAR + THUMBNAIL)
========================================== */
.aqua-media {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aqua-main-image {
    width: 600px;
    height: 380px;
    /* Ukuran gambar pas */
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #eaf6fc;
    display: flex;
    align-items: center;
    justify-content: center;
}

#aquaMainImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Gambar pas potongannya */
    transition: transform 0.4s ease;
}

#aquaMainImg:hover {
    transform: scale(1.02);
}

/* THUMBNAIL SCROLL - TOMBOL DIPERBAIKI */
.aqua-scroll-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to bottom right, #74d8ff33, #3289c433);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid #aee7ff49;
    width: 600px;
}

.scroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--aqua-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
    font-size: 1rem;
    z-index: 2;
}

.scroll-btn:hover {
    background: var(--aqua-secondary);
    transform: scale(1.1);
}

.scroll-btn:disabled {
    background: #b0c4d0;
    cursor: not-allowed;
    transform: none;
}

.aqua-scrollrack {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px 0;
    flex: 1;
    scroll-snap-type: x mandatory;
}

/* Sembunyikan scrollbar tapi tetap bisa geser */
.aqua-scrollrack::-webkit-scrollbar {
    height: 4px;
}

.aqua-scrollrack::-webkit-scrollbar-thumb {
    background: var(--aqua-secondary);
    border-radius: 2px;
}

/* Gaya card kecil */
.aqua-thumbunit {
    min-width: 75px;
    cursor: pointer;
    text-align: center;
    opacity: 0.65;
    transition: var(--transition);
    scroll-snap-align: start;
}

.aqua-thumbunit img {
    width: 70px;
    height: 55px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    margin-bottom: 4px;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
}

.aqua-thumbunit p {
    margin: 0;
    font-size: 0.75rem;
    color: #c6edff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aqua-thumbunit.active-thumb {
    opacity: 1;
    transform: translateY(-4px);
}

.aqua-thumbunit.active-thumb img {
    border-color: var(--aqua-secondary);
    box-shadow: 0 4px 10px rgba(0, 180, 216, 0.25);
}

/* ==========================================
   BAGIAN INFORMASI / TEKS - DIPERBAIKI AGAR TIDAK KEPOTONG
========================================== */
.aqua-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    overflow-y: auto;
    /* Kalau panjang, bisa di-scroll */
    max-height: 520px;
}

/* Styling Scroll di dalam teks */
.aqua-info::-webkit-scrollbar {
    width: 4px;
}

.aqua-info::-webkit-scrollbar-thumb {
    background: var(--aqua-secondary);
    border-radius: 2px;
}

.aqua-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.aqua-icon {
    font-size: 1.4rem;
    color: var(--aqua-secondary);
}

#aquaTitle {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--ocean-pale);
    margin: 0;
    line-height: 1.2;
}

.aqua-zone {
    display: inline-block;
    background: rgba(89, 151, 209, 0.08);
    color: var(--ocean-accent);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid rgba(22, 92, 157, 0.1);
    margin-bottom: 10px;
}

#aquaDesc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #94cfff;
    margin: 0;
    text-align: justify;
}

.aqua-role-section h4 {
    font-size: 1.15rem;
    color: var(--ocean-light);
    margin: 8px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 15px;
}

#aquaRole {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#aquaRole li {
    list-style: none;
    padding: 12px 17px;
    background: rgba(73, 197, 255, 0.116);
    border-radius: var(--radius-sm);
    color: #c7efff;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-left: 3px solid var(--aqua-secondary);
    transition: var(--transition);
    line-height: 1.4;
}

#aquaRole li:hover {
    background: rgba(0, 180, 216, 0.1);
}

#aquaRole li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--aqua-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* =========================================================
OCEAN MODULE
ISOLATED CSS
========================================================= */

#nvx-ocean-module {
    width: 100%;
    overflow: hidden;
    background: #00040c;
    color: #fff;
    position: relative;
}

/* reset only module */
#nvx-ocean-module * {
    box-sizing: border-box;
}

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

#nvx-ocean-module img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
KEHIDUPAN MIKRO LAUT - DESAIN ALUR KEDALAMAN
========================================================= */
:root {
    --ocean-surface: #0A2342;
    --ocean-mid: #051A36;
    --ocean-deep: #020e1f;
    --ocean-abyss: #010510;
    --ocean-light: #4CC9F0;
    --ocean-glow: rgba(76, 201, 240, 0.35);
    --ocean-pale: #BCEFFF;
    --text-white: #FFFFFF;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(76, 201, 240, 0.18);
}

#nvx-ocean-module .zephos-microverse {
    padding: 120px 8%;
    background: linear-gradient(180deg, var(--ocean-darkest), var(--ocean-deep), var(--ocean-abyss));
    position: relative;
    overflow: hidden;
}

/* Latar seperti butiran air mengambang */
#nvx-ocean-module .zephos-microverse::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(76, 201, 240, 0.1), transparent),
        radial-gradient(1.5px 1.5px at 50% 85%, rgba(255, 255, 255, 0.1), transparent);
    background-size: 300% 300%;
    animation: floatParticles 40s linear infinite;
    pointer-events: none;
}

@keyframes floatParticles {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-1%, 120px);
    }
}

#nvx-ocean-module .draeven-titlezone {
    text-align: center;
    margin-bottom: 90px;
    position: relative;
    z-index: 2;
    animation: fadeInUp 1s ease-out;
}

#nvx-ocean-module .draeven-titlezone .zyphera-signaltext {
    color: var(--ocean-light);
    font-size: 14px;
    letter-spacing: 4px;
    margin-bottom: 18px;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 0 12px var(--ocean-glow);
}

#nvx-ocean-module .draeven-titlezone .kaeloris-depthtitle {
    font-size: clamp(32px, 5vw, 42px);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--text-white);
}

#nvx-ocean-module .draeven-titlezone .kaeloris-depthtitle span {
    color: var(--ocean-light);
    text-shadow: 0 0 15px var(--ocean-glow);
}

#nvx-ocean-module .draeven-titlezone .ornavex-paragraphflow {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================================
ALUR KEDALAMAN
========================================================= */
#nvx-ocean-module .thalassa-depthflow {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 2;
}



/* Lapisan kedalaman */
#nvx-ocean-module .depth-layer {
    position: relative;
    margin: 30px 0;
}

/* Bentuk konten tidak beraturan */
#nvx-ocean-module .micro-shape {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 40px 10px;
    backdrop-filter: blur(12px);
    position: relative;
    max-width: 75%;
    transition: all 0.5s ease;
}

#nvx-ocean-module .shape-2,
#nvx-ocean-module .shape-4 {
    margin-left: auto;
    border-radius: 10px 40px;
}

#nvx-ocean-module .micro-shape:hover {
    transform: translateY(-8px);
    border-color: rgba(76, 201, 240, 0.4);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25), 0 0 25px var(--ocean-glow);
    background: rgba(76, 201, 240, 0.06);
}

/* Visual mikro */
#nvx-ocean-module .micro-visual {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(76, 201, 240, 0.3);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 25px rgba(76, 201, 240, 0.2);
}

#nvx-ocean-module .micro-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

#nvx-ocean-module .micro-shape:hover .micro-visual img {
    transform: scale(1.1);
}

#nvx-ocean-module .micro-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#nvx-ocean-module .micro-shape:hover .micro-glow {
    opacity: 1;
}

/* Informasi teks */
#nvx-ocean-module .micro-info h3 {
    font-size: 22px;
    color: var(--ocean-pale);
    margin-bottom: 8px;
    font-weight: 600;
}

#nvx-ocean-module .micro-role {
    display: inline-block;
    font-size: 14px;
    color: var(--ocean-light);
    background: rgba(76, 201, 240, 0.12);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

#nvx-ocean-module .micro-info p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

/* Penghubung tetesan air */
#nvx-ocean-module .current-line {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 3;
}

#nvx-ocean-module .droplet {
    width: 10px;
    height: 16px;
    background: rgba(76, 201, 240, 0.4);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: dropFlow 3s ease-in-out infinite;
}

#nvx-ocean-module .droplet:nth-child(2) {
    animation-delay: 0.8s;
}

#nvx-ocean-module .droplet:nth-child(3) {
    animation-delay: 1.6s;
}

@keyframes dropFlow {

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

    50% {
        transform: translateY(15px) scale(0.8);
        opacity: 0.7;
    }
}

/* Info band */
#nvx-ocean-module .lythera-infoband {
    margin-top: 80px;
    border: 1px solid var(--border);
    padding: 24px 32px;
    border-radius: 20px;
    background: var(--glass);
    text-align: center;
    color: var(--ocean-pale);
    font-weight: 500;
    line-height: 1.7;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
    z-index: 2;
    position: relative;
}

#nvx-ocean-module .lythera-infoband:hover {
    border-color: rgba(76, 201, 240, 0.4);
    box-shadow: 0 0 25px var(--ocean-glow);
    transform: translateY(-3px);
}

/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 768px) {
    #nvx-ocean-module .zephos-microverse {
        padding: 80px 24px;
    }

    #nvx-ocean-module .thalassa-depthflow::after {
        left: 20px;
    }

    #nvx-ocean-module .micro-shape {
        flex-direction: column;
        text-align: center;
        max-width: 90%;
        margin-left: 30px !important;
        border-radius: 30px !important;
    }

    #nvx-ocean-module .micro-visual {
        width: 100px;
        height: 100px;
    }
}

@media (max-width:480px) {
    .thalassa-depthflow {
        width: 320px;
        left: -20px;
    }
}

/* =========================================================
FOOD CHAIN - DESAIN DIPERBARUI
========================================================= */
:root {
    --ocean-darkest: #010510;
    --ocean-dark: #02111F;
    --ocean-medium: #072F50;
    --ocean-light: #4CC9F0;
    --ocean-glow: rgba(76, 201, 240, 0.35);
    --ocean-pale: #BCEFFF;
    --text-white: #FFFFFF;
    --text-light: #E0F7FF;
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.15);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 24px var(--ocean-glow);
    --gradient-ocean: linear-gradient(135deg, var(--ocean-light), #219EBC);
}

#nvx-ocean-module .nytheriq-currentflow {
    padding: 120px 8%;
    background: linear-gradient(180deg,
            var(--ocean-darkest) 0%,
            #041228 40%,
            var(--ocean-darkest) 100%);
    position: relative;
    overflow: hidden;
}

/* Efek partikel latar */
#nvx-ocean-module .nytheriq-currentflow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 30% 20%, rgba(76, 201, 240, 0.25), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(188, 239, 255, 0.2), transparent),
        radial-gradient(1px 1px at 50% 80%, rgba(255, 255, 255, 0.15), transparent);
    background-size: 100% 100%;
    animation: floatParticles 25s linear infinite;
    pointer-events: none;
}

@keyframes floatParticles {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-120px);
    }
}

#nvx-ocean-module .draeven-titlezone {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
    animation: fadeInUp 1s ease-out;
}

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

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

#nvx-ocean-module .draeven-titlezone .zyphera-signaltext {
    color: var(--ocean-light);
    font-size: 14px;
    letter-spacing: 4px;
    margin-bottom: 18px;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 0 12px var(--ocean-glow);
}

#nvx-ocean-module .draeven-titlezone .kaeloris-depthtitle {
    font-size: clamp(32px, 5vw, 42px);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

#nvx-ocean-module .draeven-titlezone .kaeloris-depthtitle span {
    background: var(--gradient-ocean);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

#nvx-ocean-module .draeven-titlezone .ornavex-paragraphflow {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
}

/* =========================================================
Rantai Makanan Utama
========================================================= */
#nvx-ocean-module .draevok-chaingrid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    animation: fadeIn 1.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Unit Setiap Tingkatan */
#nvx-ocean-module .xynthar-nodeunit {
    width: 190px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
}

#nvx-ocean-module .xynthar-nodeunit:hover {
    transform: translateY(-8px);
}

/* Lingkaran Gambar */
#nvx-ocean-module .vaelorbit-sphere {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 24px;
    border: 2px solid rgba(76, 201, 240, 0.3);
    position: relative;
    box-shadow:
        0 0 30px rgba(76, 202, 240, 0.11),
        inset 0 0 25px rgba(76, 202, 240, 0.089);
    transition: all 0.5s ease;
    animation: sphereGlow 4s infinite ease-in-out;
}

@keyframes sphereGlow {

    0%,
    100% {
        border-color: rgba(76, 202, 240, 0.288);
        box-shadow: 0 0 30px rgba(76, 202, 240, 0.13), inset 0 0 25px rgba(76, 201, 240, 0.15);
    }

    50% {
        border-color: rgba(76, 201, 240, 0.5);
        box-shadow: 0 0 45px rgba(76, 202, 240, 0.205), inset 0 0 35px rgba(76, 201, 240, 0.25);
    }
}

#nvx-ocean-module .xynthar-nodeunit:hover .vaelorbit-sphere {
    transform: scale(1.05);
    border-color: var(--ocean-light);
    box-shadow:
        0 0 50px rgba(76, 201, 240, 0.5),
        inset 0 0 40px rgba(76, 201, 240, 0.3);
    animation: none;
}

#nvx-ocean-module .vaelorbit-sphere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

#nvx-ocean-module .xynthar-nodeunit:hover .vaelorbit-sphere img {
    transform: scale(1.12);
}

/* Teks */
#nvx-ocean-module .qorvex-textside h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-white);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

#nvx-ocean-module .qorvex-textside p {
    color: var(--ocean-pale);
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Kotak Keterangan */
#nvx-ocean-module .kairoth-detailnote {
    margin-top: 16px;
    border: 1px solid var(--glass-border);
    padding: 18px 14px;
    border-radius: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    height: 110px;
    text-align: center;
    font-size: 16px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#nvx-ocean-module .xynthar-nodeunit:hover .kairoth-detailnote {
    border-color: rgba(76, 201, 240, 0.4);
    background: rgba(76, 201, 240, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), 0 0 16px var(--ocean-glow);
}

/* Panah Penghubung */
#nvx-ocean-module .zytherin-arrowflux {
    font-size: 55px;
    color: var(--ocean-light);
    margin-top: 75px;
    text-shadow: 0 0 20px var(--ocean-glow);
    animation: arrowPulse 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

@keyframes arrowPulse {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(4px);
        opacity: 1;
    }
}

#nvx-ocean-module .draevok-chaingrid:hover .zytherin-arrowflux {
    animation: none;
    transform: scale(1.1);
    color: #80e9ff;
}

/* Info Band */
#nvx-ocean-module .lythera-infoband {
    margin-top: 70px;
    border: 1px solid var(--glass-border);
    padding: 22px 32px;
    border-radius: 16px;
    background: linear-gradient(135deg,
            rgba(3, 29, 53, 0.7),
            rgba(5, 56, 104, 0.6),
            rgba(43, 111, 159, 0.5));
    text-align: center;
    color: var(--ocean-pale);
    font-weight: 500;
    line-height: 1.7;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 2;
    animation: fadeInUp 1.6s ease-out;
}

#nvx-ocean-module .lythera-infoband:hover {
    border-color: rgba(76, 201, 240, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 20px var(--ocean-glow);
    transform: translateY(-3px);
}

/* =========================================================
Responsif
========================================================= */
@media (max-width: 1200px) {
    #nvx-ocean-module .draevok-chaingrid {
        align-items: center;
    }

    #nvx-ocean-module .zytherin-arrowflux {
        transform: rotate(90deg);
        margin: 10px 0;
        font-size: 45px;
    }

    #nvx-ocean-module .zytherin-arrowflux:hover {
        transform: rotate(90deg) scale(1.1);
    }
}

@media (max-width: 768px) {
    #nvx-ocean-module .nytheriq-currentflow {
        padding: 80px 24px;
    }

    #nvx-ocean-module .xynthar-nodeunit {
        width: 240px;
    }

    #nvx-ocean-module .vaelorbit-sphere {
        width: 170px;
        height: 170px;
        left: 15%;
    }

    #nvx-ocean-module .kairoth-detailnote {
        height: auto;
        min-height: 90px;
    }

    .zytherin-arrowflux {
        display: none;
    }
}

@media (max-width:480px) {
    .zytherin-arrowflux {
        display: none;
    }
}

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

.ocean-facts {
    padding: 120px 8%;
    background: #010510;
}

.fact-section-title {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    position: relative;
}

.fact-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 20px;

    border-radius: 999px;

    background: rgba(72, 210, 255, .08);
    border: 1px solid rgba(72, 210, 255, .25);

    color: var(--ocean-accent);

    font-size: .9rem;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);
}

.fact-section-title h2 {
    margin-top: 22px;
    margin-bottom: 18px;

    color: #fff;

    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;

    line-height: 1.1;

    text-shadow:
        0 0 25px rgba(72, 210, 255, .2),
        0 0 50px rgba(72, 210, 255, .1);
}

.fact-section-title p {
    color: var(--text-light);

    line-height: 1.8;
    opacity: .85;

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


/* =======================================
GRID
======================================= */

.md-fact-grid {
    display: grid;

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

    grid-template-rows:
        240px 240px 220px 240px;

    gap: 24px;
}

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

.md-fact-card {
    position: relative;
    overflow: hidden;

    border-radius: 28px;

    display: flex;
    align-items: flex-end;

    min-height: 220px;

    border: 1px solid rgba(114, 234, 255, 0.192);
    box-shadow: 0 0 10px #3fc1f51e;
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

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

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .4);
}

/* =======================================
IMAGE
======================================= */

.md-fact-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(.45);

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

.md-fact-card:hover img {
    transform: scale(1.08);
    filter: brightness(1);
}

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

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

    background:
        linear-gradient(to top,
            rgba(3, 19, 34, 0.452),
            rgba(2, 15, 41, 0.185));

    transition: .8s ease;
}

.md-fact-card:hover .facts-overlay {
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .55),
            rgba(0, 0, 0, .1));
}

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

.content-fact {
    position: relative;
    z-index: 2;

    padding: 30px;
}

.content-fact span {
    font-size: 2rem;
    display: block;
    margin-bottom: 12px;
}

.content-fact h3 {
    color: white;
    margin-bottom: 10px;

    font-size: 1.4rem;
}

.content-fact p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.7;
}

/* =======================================
BENTO POSITION
======================================= */

.mountain {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.mountain h3 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.oxygen {
    grid-column: 3;
    grid-row: 1;
}

.gold {
    grid-column: 3;
    grid-row: 2;
}

.explore {
    grid-column: 1 / 4;
    grid-row: 3;
}

.river {
    grid-column: 1;
    grid-row: 4;
}

.immortal {
    grid-column: 2;
    grid-row: 4;
}

.ancient {
    grid-column: 3;
    grid-row: 4;
}

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

@media (max-width:992px) {

    .md-fact-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows: auto;
    }

    .mountain {
        grid-column: 1 / 3;
        grid-row: auto;
        min-height: 450px;
    }

    .explore {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .oxygen,
    .gold,
    .river,
    .immortal,
    .ancient {
        grid-column: auto;
        grid-row: auto;
    }

}

@media (max-width:768px) {

    .ocean-facts {
        padding: 80px 20px;
    }

    .md-fact-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .md-fact-card {
        min-height: 260px;
    }

    .mountain {
        min-height: 400px;
    }

    .explore {
        min-height: 320px;
    }

    .content-fact {
        padding: 24px;
    }

    .content-fact span {
        font-size: 1.8rem;
    }

    .content-fact h3 {
        font-size: 1.2rem;
    }

    .content-fact p {
        font-size: .92rem;
    }

}

/* === BASE & SECTION === */
.aqua-chronicle {
    position: relative;
    overflow: hidden;
    padding: 140px 60px;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 180, 255, 0.18), transparent 50%),
        radial-gradient(circle at 80% 100%, rgb(89 139 255 / 12%), transparent 50%),
        linear-gradient(180deg, #010914 0%, #021526 50%, #010914 100%);
    min-height: 100vh;
}

/* WAVE TOP */
.wave-aqua {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}

.wave-aqua svg {
    display: block;
    width: 100%;
    height: 100px;
}

.wave-aqua path {
    fill: #030918;
}

.aqua-container {
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

.aqua-chronicle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 50 Q25 30 50 50 T100 50" fill="none" stroke="rgba(62,231,255,0.03)" stroke-width="1"/></svg>');
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

/* === ANIMASI MUNCUL === */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* === CAHAYA LATAR === */
.abyssal-lumen {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, rgba(62, 152, 255, 0.12), transparent 70%);
    filter: blur(60px);
    animation: gentleGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

@keyframes gentleGlow {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translateX(-50%) scale(1.05);
        opacity: 0.9;
    }
}

/* === HERO SECTION === */
.marine-voyage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.tidal-narrative {
    max-width: 580px;
}

.current-tag {
    display: inline-block;
    color: #3EE7FF;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(62, 231, 255, 0.08);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(62, 231, 255, 0.15);
    margin-bottom: 24px;
}

.tidal-narrative h2 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1.1;
    font-weight: 800;
    font-family: 'Mulish', sans-serif;
    margin-bottom: 24px;
}

.tidal-narrative h2 span {
    background: linear-gradient(90deg, #3EE7FF, #64E8FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tidal-narrative p {
    color: #B8D2E3;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* === STATISTIK === */
.reef-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.nautilus-card {
    background: linear-gradient(145deg, rgba(12, 35, 60, 0.7), rgba(5, 18, 35, 0.8));
    border: 1px solid rgba(62, 231, 255, 0.18);
    border-radius: 20px;
    padding: 28px 16px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.nautilus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(62, 231, 255, 0.08), transparent);
    transition: left 0.6s ease;
}

.nautilus-card:hover {
    transform: translateY(-6px);
    border-color: rgba(62, 231, 255, 0.4);
    box-shadow: 0 12px 32px rgba(0, 180, 255, 0.15);
}

.nautilus-card:hover::before {
    left: 100%;
}

.coral-emblem {
    font-size: 2rem;
    margin-bottom: 16px;
    color: #3EE7FF;
}

.reef-data h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.reef-data span {
    color: #9DB7C7;
    font-size: 0.9rem;
}

/* === GAMBAR HERO === */
.pelagic-frame {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 580px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(62, 231, 255, 0.12);
}

.pelagic-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.pelagic-frame:hover img {
    transform: scale(1.05);
}

.pelagic-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 11, 22, 0.85), transparent 50%);
}

.drift-signal {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    color: white;
    font-size: 0.95rem;
}

.scroll-indicator {
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.6);
    margin: 12px auto 0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3EE7FF;
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
    }

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

/* === TIMELINE === */
.deep-current {
    position: relative;
    margin-top: 160px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    z-index: 2;
}

.hydro-line {
    position: absolute;
    left: 9px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #3EE7FF 0%, rgba(62, 231, 255, 0.05) 100%);
    border-radius: 2px;
}

.trench-node {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    position: relative;
}

.epoch-shell {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.luminous-orb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3EE7FF;
    margin-top: 6px;
    position: relative;
}

.pulse {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(62, 231, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(62, 231, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(62, 231, 255, 0);
    }
}

.epoch-content h3 {
    font-size: 2.8rem;
    color: #3EE7FF;
    font-weight: 800;
    line-height: 1;
}

.epoch-content span {
    color: #82A6BB;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.atlantis-panel {
    display: grid;
    grid-template-columns: 90px 1fr 280px;
    align-items: center;
    gap: 30px;
    background: linear-gradient(145deg, rgba(12, 35, 60, 0.75), rgba(5, 18, 35, 0.85));
    border: 1px solid rgba(62, 231, 255, 0.18);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(20px);
    transition: all 0.4s ease;
}

.atlantis-panel:hover {
    transform: translateX(8px);
    border-color: rgba(62, 231, 255, 0.35);
    box-shadow: 0 8px 28px rgba(0, 180, 255, 0.12);
}

.tidal-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(62, 231, 255, 0.1);
    font-size: 1.8rem;
    color: #3EE7FF;
    border: 1px solid rgba(62, 231, 255, 0.2);
}

.tidal-copy h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
}

.tidal-copy p {
    color: #A9C4D4;
    line-height: 1.7;
    font-size: 1rem;
}

.tidal-preview {
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(62, 231, 255, 0.15);
}

.tidal-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tidal-preview:hover img {
    transform: scale(1.1);
}

/* === KUTIPAN === */
.ocean-manifesto {
    margin-top: 120px;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.quote-decoration {
    font-size: 4rem;
    color: rgba(62, 231, 255, 0.2);
    line-height: 1;
}

.ocean-manifesto p {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #CDE5F4;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
}

.ocean-manifesto span {
    color: #3EE7FF;
    font-weight: 600;
}

/* === RESPONSIF - TABLET === */
@media (min-width: 768px) and (max-width: 1024px) {
    .aqua-chronicle {
        padding: 100px 40px;
    }

    .marine-voyage {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pelagic-frame {
        height: 450px;
    }

    .trench-node {
        grid-template-columns: 140px 1fr;
        gap: 24px;
    }

    .atlantis-panel {
        grid-template-columns: 70px 1fr 220px;
        gap: 20px;
        padding: 20px;
    }

    .tidal-preview {
        height: 160px;
    }
}

/* === RESPONSIF - MOBILE === */
@media (max-width: 767px) {
    .aqua-chronicle {
        padding: 80px 20px;
    }

    .luminous-orb {
        margin-left: -4%;
    }

    .marine-voyage {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pelagic-frame {
        height: 280px;
        order: 1;
    }

    .tidal-narrative {
        order: 2;
        text-align: center;
    }

    .reef-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .nautilus-card {
        padding: 20px 12px;
    }

    .coral-emblem {
        font-size: 1.6rem;
    }

    .reef-data h3 {
        font-size: 1.5rem;
    }

    .deep-current {
        margin-top: 100px;
        gap: 40px;
    }

    .trench-node {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hydro-line {
        left: 9px;
    }

    .epoch-shell {
        margin-left: 12px;
    }

    .atlantis-panel {
        grid-template-columns: 1fr;
        text-align: center;
        margin-left: 30px;
        padding: 24px;
    }

    .tidal-icon {
        margin: 0 auto;
    }

    .tidal-preview {
        height: 160px;
        width: 100%;
    }

    .drift-signal {
        font-size: 0.8rem;
    }
}

/* QUOTE / KUTIPAN */
.aqua-quote {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    margin-top: 25px;
}

.aqua-quote i {
    font-size: 1.8rem;
    color: #00b4d8;
    margin-top: 5px;
}

.quote-content h4 {
    margin: 0 0 8px 0;
    color: #90e0ef;
}

.quote-content p {
    margin: 0;
    color: #e0f7fa;
    font-size: 1.05rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .aqua-visual img {
        width: 300px;
        height: 320px;
    }

    .aqua-scroll-wrapper {
        width: 280px;
        margin-left: 6px;
    }

    .aqua-scroll-wrapper img {
        width: 70px;
        height: 60px;
    }

    .aquamainvisual {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .aqua-tabs-wrapper {
        position: relative;
        overflow: hidden;
        padding: 0 3px;
    }

    .aqua-tabshell {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 10px;
        scroll-behavior: smooth;
    }

    .aqua-tabshell::-webkit-scrollbar {
        display: none;
    }

    .aqua-tabs-wrapper::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 100%;
        background: linear-gradient(to left, #001022 0%, #001d3d91 40%, transparent 100%);
        pointer-events: none;
    }

    .aqua-tabs-wrapper::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        background: linear-gradient(to right, #001022 0%, #001d3d91 40%, transparent 100%);
        pointer-events: none;
        border-top-left-radius: 15px;
    }

    .aqua-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .aqua-tabs-wrapper {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        overflow: hidden;
        /* penting biar kepotong */
        transition: all 0.3s ease;
    }

    /* kiri aktif */
    .aqua-tabs-wrapper.left-rounded {
        border-top-left-radius: 16px;
    }

    /* kanan aktif */
    .aqua-tabs-wrapper.right-rounded {
        border-top-right-radius: 16px;
        bottom: -10px;
    }

    .aqua-main-container {
        gap: 0;
        height: 800px;
        position: relative;
        padding: 15px;
    }

    .aqua-main-card {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0;
    }

    .aqua-main-image {
        width: 290px;
        height: 220px;
    }

    .aqua-visual img {
        width: 310px;
        height: 200px;
    }

    .aqua-scrollrack {
        width: 100%;
    }

    .aqua-scroll-wrapper {
        width: 290px;
        padding: 5px;
    }

    .aqua-thumbunit img {
        width: 60px;
        height: 50px;
    }

    .aqua-thumbunit {
        min-width: 65px;
    }

    .aqua-info {
        width: 300px;
    }
}

/* Creatures Section */


.species-count {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.creatures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.creature-card {
    text-align: center;
}

.creature-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

/* Indonesian Section */



.indo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.indo-card {
    display: flex;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    align-items: center;
}

.indo-card img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.card-text h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.card-text p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Quotes & Back to Top */
.quotes-section {
    padding: 4rem 5%;
    text-align: center;
    background: linear-gradient(to bottom, #0a486b, #0c2439);
}

.quote {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.back-to-top {
    padding: 0.8rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
}

.back-to-top:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Mobile Styles */
.mobile-nav,
.mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {

    .desktop-nav,
    .desktop-only {
        display: none;
    }

    .hero {
        height: 30vh;
    }

    /* Filter Menu Mobile */
    .filter-menu {
        gap: 0.5rem;
        padding: 1rem 5%;
        overflow-x: auto;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .filter-btn {
        flex-shrink: 0;
    }

    .zones-grid {
        width: 350px;
        height: 450px;
    }

    /* Carousel Styles */
    .carousel-container {
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .carousel-track {
        display: flex;
        gap: 1.5rem;
        padding: 0 0.5rem;
    }

    .carousel-card {
        flex-shrink: 0;
        width: 220px;
        text-align: center;
    }

    .carousel-card img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }

    /* Indonesian Mobile */
    .indo-mobile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .indo-mobile-card {
        text-align: center;
    }

    .indo-mobile-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }

    .more-indo-text,
    .more-creatures-text {
        text-align: center;
        margin: 1.5rem 0 1rem;
        opacity: 0.8;
    }

    .mobile-more {
        display: block;
        margin: 0 auto;
    }

    /* Adjust Sections */
    .section {
        padding: 4rem 2rem;
    }

    .quotes-section {
        padding: 2rem 5%;
        margin-bottom: 6rem;
        /* Ruang untuk mobile navbar */
    }
}

/* NAV */
.aq-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.aq-prev {
    left: 20px;
}

.aq-next {
    right: 20px;
}



/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

.slider-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

.slider-wrapper {
    overflow: hidden;
    height: 300px;
}

.slider {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.slide h3 {
    margin: 10px 0;
    font-size: 22px;
}

.slide p {
    color: #555;
    font-size: 16px;
}

.prev-btn,
.next-btn {
    position: absolute;
    top: 95%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    left: 70px;
}

.prev-btn:hover,
.next-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* ================= FOOTER ================= */
.footer {
    padding: 90px 7% 30px;

    background: #00060e;
    margin-top: -40px;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;

    gap: 40px;

    padding-bottom: 50px;
}

.footer-brand h3 {
    color: #0d4b66;

    margin-bottom: 18px;
}

.footer-brand p {
    color: #5f7d8d;

    line-height: 1.8;
}

.footer-links h4,
.footer-social h4 {
    margin-bottom: 18px;

    color: #0b4863;
}

.footer-links a {
    display: block;

    margin-bottom: 12px;

    color: #63808f;

    text-decoration: none;
}

.social-icons {
    display: flex;
    gap: 18px;
}

.social-icons a {
    font-size: 20px;

    color: #53cfff;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, .05);

    padding-top: 25px;

    text-align: center;

    color: #6f8d9b;
}

.earthicon,
.shieldicon,
.usericon,
.watericon {
    color: #54b7cf;
}

.seedicon {
    color: #2dd4bf;
}

.trashicon {
    color: #a7f3d0;
}

.bottleicon,
.hearticon {
    color: #fda4af;
}

.handicon {
    color: #fff3e4;
}

.boardicon {
    color: #dfc7ff;
}

.temperatureicon {
    color: #d16a6a;
}