/* css/ocean-sipenyu.css - Tema Si Penyu Ocean Nostalgia & Biota Laut Animasi */
/* Authentic color palette extracted directly from https://sipenyu.attractively.site */

:root {
    /* Exact Si Penyu Color Tokens */
    --ink: #eafcff !important;          /* text */
    --mist: #a9d3dc !important;         /* secondary text */
    --glass: rgba(6, 40, 58, 0.55) !important;
    --glass-2: rgba(10, 62, 84, 0.55) !important;
    --edge: rgba(160, 235, 245, 0.22) !important;
    --edge-hover: rgba(160, 235, 245, 0.45) !important;
    --sun: #ffd46b !important;          /* buoy yellow, main action */
    --sun-hover: #ffe08e !important;
    --sun-ink: #2b1c00 !important;
    --coral: #ff7f8e !important;        /* highlights */
    --glow: #74f5e2 !important;         /* bioluminescence */
    --abyss: #03111c !important;
    --r: 18px !important;

    /* V7 CRM Token Compatibility Aliases */
    --dark-bg: #03111c !important;
    --dark-surface: rgba(6, 40, 58, 0.55) !important;
    --glass-bg: rgba(6, 40, 58, 0.55) !important;
    --glass-bg-hover: rgba(10, 62, 84, 0.65) !important;
    --glass-border: rgba(160, 235, 245, 0.22) !important;
    --glass-border-subtle: rgba(160, 235, 245, 0.12) !important;
    --glass-border-hover: rgba(160, 235, 245, 0.45) !important;
    --glass-blur: blur(14px) saturate(1.2) !important;
    
    --penyu-sea-top: #34b2c8;
    --penyu-sea-mid1: #1a84a2;
    --penyu-sea-mid2: #0a4866;
    --penyu-sea-deep: #052034;
    --penyu-amber: #ffd46b;
    --penyu-amber-glow: rgba(255, 212, 107, 0.4);
    --penyu-cyan: #74f5e2;
    --penyu-cyan-glow: rgba(116, 245, 226, 0.35);
    
    --accent-blue: #74f5e2 !important;
    --accent-blue-core: #1a84a2 !important;
    --accent-glow: 0 4px 16px rgba(116, 245, 226, 0.35) !important;
    
    --text-main: #eafcff !important;
    --text-muted: #a9d3dc !important;
    --text-dim: #7da5af !important;
    
    --vibrant-gradient: linear-gradient(135deg, #ffd46b 0%, #f59e0b 100%) !important;
    --gradient-primary: linear-gradient(135deg, #ffd46b 0%, #f59e0b 100%) !important;
}

/* ============================================================ */
/* BODY & HTML OVERRIDE: REAL SI PENYU OCEAN GRADIENT          */
/* ============================================================ */
html, body {
    background-color: #03111c !important;
    background-image: linear-gradient(180deg, 
        #34b2c8 0%, 
        #1a84a2 18%, 
        #0a4866 50%, 
        #052034 80%, 
        #020a12 100%
    ) !important;
    background-attachment: fixed !important;
    color: #eafcff !important;
}

/* ============================================================ */
/* GLASS CARD & SURFACE COLOR HARMONIZATION (FROSTED SEA GLASS) */
/* ============================================================ */
.glass-card-v7, 
.card,
.card.fancy-card,
.games-table-card,
.kpi-card,
.collection-card-header,
.filter-search-box,
.login-form-container,
.glass-topbar,
.glass-sidebar-dock,
.cyber-card-mobile,
.modal-content,
.main-sidebar,
.app-sidebar {
    background: rgba(6, 40, 58, 0.55) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border: 1px solid rgba(160, 235, 245, 0.22) !important;
    box-shadow: 0 8px 32px rgba(2, 18, 28, 0.35) !important;
    color: #eafcff !important;
}

/* Inner tiles, sub-panels, input boxes, and list items */
.glass-kpi-tile,
.desktop-hero-perk,
.form-control,
.form-select,
.input-group-text,
.table tbody tr,
.list-group-item,
.card-header,
.card-footer {
    background: rgba(10, 62, 84, 0.5) !important;
    border-color: rgba(160, 235, 245, 0.18) !important;
    color: #eafcff !important;
}

.table {
    color: #eafcff !important;
}

.table thead th {
    background: rgba(6, 40, 58, 0.75) !important;
    border-color: rgba(160, 235, 245, 0.22) !important;
    color: #ffd46b !important;
}

/* Amber Highlights (Tombol Aksi Utama Si Penyu: #ffd46b) */
.btn-penyu-primary,
.btn-premium-gradient,
.btn-primary:not(.btn-qa-pill) {
    background: #ffd46b !important;
    color: #2b1c00 !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 212, 107, 0.6) !important;
    box-shadow: 0 8px 24px -8px rgba(255, 212, 107, 0.7) !important;
    transition: all 0.2s ease !important;
}
.btn-penyu-primary:hover,
.btn-premium-gradient:hover,
.btn-primary:not(.btn-qa-pill):hover {
    background: #ffe08e !important;
    color: #1a1000 !important;
    box-shadow: 0 10px 28px -6px rgba(255, 212, 107, 0.85) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================ */
/* 1. CAUSTIC SUNLIGHT RAYS (BERKAS CAHAYA MATAHARI BAWAH AIR)  */
/* ============================================================ */
.ocean-ambient-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden;
}

.ocean-light-rays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 750px;
    background: 
        radial-gradient(ellipse at 50% -10%, rgba(200, 255, 250, 0.38) 0%, rgba(52, 178, 200, 0.22) 45%, transparent 75%),
        repeating-linear-gradient(78deg, rgba(200, 255, 250, 0.1) 0px, rgba(200, 255, 250, 0.1) 36px, transparent 46px, transparent 140px);
    animation: rayPulse 7s ease-in-out infinite alternate;
}
@keyframes rayPulse {
    0% { opacity: 0.8; transform: scaleY(1); }
    100% { opacity: 1; transform: scaleY(1.08); }
}

/* ============================================================ */
/* 2. GELEMBUNG UDARA ALAMI (RISING BUBBLES)                    */
/* ============================================================ */
.ocean-bubble {
    position: absolute;
    bottom: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.85) 0%, rgba(116, 245, 226, 0.3) 55%, rgba(255, 255, 255, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 12px rgba(116, 245, 226, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.4);
    animation: riseAndWobble linear infinite;
    will-change: transform, opacity;
}
.ocean-bubble::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}
.ob-1 { width: 14px; height: 14px; left: 7%; animation-duration: 9s; animation-delay: 0s; }
.ob-2 { width: 22px; height: 22px; left: 18%; animation-duration: 13s; animation-delay: 2.5s; }
.ob-3 { width: 10px; height: 10px; left: 29%; animation-duration: 7s; animation-delay: 1.2s; }
.ob-4 { width: 18px; height: 18px; left: 42%; animation-duration: 11s; animation-delay: 4s; }
.ob-5 { width: 12px; height: 12px; left: 55%; animation-duration: 8.5s; animation-delay: 0.8s; }
.ob-6 { width: 26px; height: 26px; left: 68%; animation-duration: 15s; animation-delay: 3s; }
.ob-7 { width: 9px;  height: 9px;  left: 79%; animation-duration: 6.8s; animation-delay: 1.9s; }
.ob-8 { width: 16px; height: 16px; left: 88%; animation-duration: 10.5s; animation-delay: 5.2s; }
.ob-9 { width: 20px; height: 20px; left: 94%; animation-duration: 12s; animation-delay: 2.1s; }

@keyframes riseAndWobble {
    0% { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
    15% { opacity: 0.9; }
    50% { transform: translateY(-50vh) translateX(18px) scale(0.95); }
    85% { opacity: 0.8; }
    100% { transform: translateY(-110vh) translateX(-15px) scale(1.15); opacity: 0; }
}

/* ============================================================ */
/* 3. BIOTA LAUT: IKAN, UBUR-UBUR, LUMBA-LUMBA, KURA-KURA       */
/* ============================================================ */

/* A. IKAN-IKAN (SCHOOL OF FISH) */
.ocean-fish-school {
    position: absolute;
    top: 13%;
    left: -120px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    animation: swimFishRight 22s linear infinite;
    animation-delay: -5s;
    will-change: transform;
}
.ocean-fish-unit {
    display: inline-block;
    animation: fishFinWiggle 0.6s ease-in-out infinite alternate;
}
@keyframes swimFishRight {
    0% { transform: translateX(0) translateY(0); }
    35% { transform: translateX(40vw) translateY(-14px); }
    70% { transform: translateX(75vw) translateY(18px); }
    100% { transform: translateX(calc(100vw + 200px)) translateY(-8px); }
}
@keyframes fishFinWiggle {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-2px) rotate(2deg); }
}

/* B. UBUR-UBUR (JELLYFISH) */
.ocean-jellyfish-1 {
    position: absolute;
    bottom: -80px;
    left: 6%;
    animation: floatJellyfish 22s ease-in-out infinite;
    animation-delay: -8s;
    filter: drop-shadow(0 0 16px rgba(116, 245, 226, 0.7));
    will-change: transform;
}
.ocean-jellyfish-2 {
    position: absolute;
    bottom: -80px;
    left: 88%;
    animation: floatJellyfish 25s ease-in-out infinite;
    animation-delay: -14s;
    filter: drop-shadow(0 0 14px rgba(255, 127, 142, 0.6));
    transform: scale(0.85);
    will-change: transform;
}
.ocean-jelly-body {
    animation: jellyPulse 2.4s ease-in-out infinite alternate;
    transform-origin: top center;
}
@keyframes floatJellyfish {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.9; }
    50% { transform: translateY(-55vh) translateX(30px); }
    85% { opacity: 0.85; }
    100% { transform: translateY(-115vh) translateX(-20px); opacity: 0; }
}
@keyframes jellyPulse {
    0% { transform: scaleY(0.85) scaleX(1.1); }
    100% { transform: scaleY(1.15) scaleX(0.9); }
}

/* C. LUMBA-LUMBA (DOLPHIN) */
.ocean-dolphin {
    position: absolute;
    top: 18%;
    left: -180px;
    animation: swimDolphin 26s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: -16s;
    will-change: transform;
}
.ocean-dolphin-body {
    animation: dolphinUndulate 2.2s ease-in-out infinite alternate;
    transform-origin: center center;
}
@keyframes swimDolphin {
    0% { transform: translateX(0) translateY(0) rotate(-6deg); }
    25% { transform: translateX(28vw) translateY(-40px) rotate(8deg); }
    50% { transform: translateX(55vw) translateY(20px) rotate(-4deg); }
    75% { transform: translateX(82vw) translateY(-30px) rotate(6deg); }
    100% { transform: translateX(calc(100vw + 250px)) translateY(0) rotate(-4deg); }
}
@keyframes dolphinUndulate {
    0% { transform: scaleY(0.95) rotate(-2deg); }
    100% { transform: scaleY(1.05) rotate(2deg); }
}

/* D. KURA-KURA / SI PENYU (SEA TURTLE) */
.ocean-turtle {
    position: absolute;
    bottom: 30px;
    right: -160px;
    animation: swimTurtle 32s linear infinite;
    animation-delay: -10s;
    will-change: transform;
}
.ocean-turtle-body {
    animation: turtlePaddle 3.5s ease-in-out infinite alternate;
    transform-origin: center center;
}
@keyframes swimTurtle {
    0% { transform: translateX(0) translateY(0); }
    30% { transform: translateX(-35vw) translateY(25px); }
    65% { transform: translateX(-70vw) translateY(-15px); }
    100% { transform: translateX(calc(-100vw - 250px)) translateY(10px); }
}
@keyframes turtlePaddle {
    0% { transform: rotate(-3deg) translateY(0); }
    100% { transform: rotate(3deg) translateY(-4px); }
}

/* ============================================================ */
/* HIGH-CONTRAST TYPOGRAPHY (CRISP & READABLE OVER OCEAN)       */
/* ============================================================ */
.hero-retro-subtitle {
    font-size: 0.98rem !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    max-width: 580px !important;
    text-shadow: 0 1px 8px rgba(3, 17, 28, 0.9), 0 2px 18px rgba(3, 17, 28, 0.7) !important;
}

.hero-retro-title {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(3, 17, 28, 0.85) !important;
}

.text-muted,
.glass-card-subtitle,
.lead-subtitle {
    color: #eafcff !important;
    text-shadow: 0 1px 6px rgba(2, 18, 28, 0.5) !important;
}