/* css/index.css — dipisah otomatis dari index.html */

/* ===== ANIMASI & UTILITY ===== */
        @keyframes float {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
        html {
            scroll-behavior: smooth;
        }

        /* ===== GLASSMORPHISM ===== */
        .glass-card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        }

        /* ===== LIGHT MODE ===== */
        .light-mode {
            --bg-main: #f8fafc;
            --text-main: #0f172a;
            background-color: var(--bg-main) !important;
            color: var(--text-main) !important;
        }
        .light-mode .bg-grid {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
        }
        .light-mode nav {
            background-color: rgba(241, 245, 249, 0.92) !important;
            border-color: #e2e8f0 !important;
        }
        .light-mode nav a:not(.bg-gradient-to-r) {
            color: #1e293b;
        }
        .light-mode nav a:not(.bg-gradient-to-r):hover,
        .light-mode nav a.text-cyan-400 {
            color: #0284c7 !important;
        }
        .light-mode nav .text-slate-400 {
            color: #475569 !important;
        }
        .light-mode .glass-card {
            background: rgba(255, 255, 255, 0.75);
            border-color: #e2e8f0;
            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06);
        }
        .light-mode .glass-card .text-white {
            color: #0f172a !important;
        }
        .light-mode .glass-card .text-slate-300 {
            color: #334155 !important;
        }
        .light-mode .glass-card .text-slate-400 {
            color: #475569 !important;
        }
        .light-mode .glass-card .border-slate-700 {
            border-color: #e2e8f0 !important;
        }
        .light-mode .glass-card .border-slate-800 {
            border-color: #e2e8f0 !important;
        }
        .light-mode h1,
        .light-mode h2,
        .light-mode h3,
        .light-mode h4 {
            color: #0f172a !important;
        }
        .light-mode h1 span {
            background: linear-gradient(to right, #0284c7, #2563eb, #c026d3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent !important;
        }
        .light-mode section.bg-slate-950\/40,
        .light-mode section.bg-slate-950\/20,
        .light-mode section.bg-slate-950,
        .light-mode footer.bg-slate-950 {
            background-color: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
        }
        .light-mode section .border-slate-800 {
            border-color: #e2e8f0 !important;
        }
        .light-mode section .border-slate-900 {
            border-color: #e2e8f0 !important;
        }
        .light-mode input,
        .light-mode textarea {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }
        .light-mode input::placeholder,
        .light-mode textarea::placeholder {
            color: #94a3b8 !important;
        }
        .light-mode input:focus,
        .light-mode textarea:focus {
            border-color: #38bdf8 !important;
        }
        .light-mode label.text-slate-300 {
            color: #334155 !important;
        }
        .light-mode #mobileMenu {
            background-color: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
        }
        .light-mode #mobileMenu a:not(.bg-gradient-to-r) {
            color: #1e293b !important;
        }
        .light-mode #mobileMenu a:not(.bg-gradient-to-r):hover {
            background-color: #e2e8f0 !important;
            color: #0284c7 !important;
        }
        .light-mode #mobileMenu .text-slate-300 {
            color: #334155 !important;
        }
        .light-mode footer .text-slate-400 {
            color: #475569 !important;
        }
        .light-mode footer .text-slate-600 {
            color: #64748b !important;
        }
        .light-mode footer .border-slate-900 {
            border-color: #e2e8f0 !important;
        }
        .light-mode footer h4.text-white {
            color: #0f172a !important;
        }
        .light-mode footer .text-cyan-400 {
            color: #0891b2 !important;
        }
        .light-mode footer .text-fuchsia-400 {
            color: #c026d3 !important;
        }
        .light-mode footer .text-blue-400 {
            color: #2563eb !important;
        }
        .light-mode .text-white.font-extrabold {
            color: #0f172a !important;
        }
        .gallery-img-placeholder {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            font-size: 2.5rem;
        }
        .light-mode .gallery-img-placeholder {
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
            color: #94a3b8;
        }
        .light-mode .glass-card .text-slate-400.font-mono {
            color: #64748b !important;
        }
        .light-mode footer ul a {
            color: #475569 !important;
        }
        .light-mode footer ul a:hover {
            color: #0f172a !important;
        }
        .light-mode #notif-sukses {
            background-color: rgba(16, 185, 129, 0.1) !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
            color: #059669 !important;
        }
        .light-mode #notif-error {
            background-color: rgba(239, 68, 68, 0.1) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
            color: #dc2626 !important;
        }
        .light-mode .glass-card:hover {
            border-color: #94a3b8 !important;
        }

        /* ===== ANIMASI MOTIVASI ===== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes fadeOutDown {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-12px);
            }
        }
        .quote-fade-in {
            animation: fadeInUp 0.7s ease forwards;
        }
        .quote-fade-out {
            animation: fadeOutDown 0.5s ease forwards;
        }
        @keyframes pulsePlaceholder {
            0%,
            100% {
                opacity: 0.4;
            }
            50% {
                opacity: 1;
            }
        }
        .placeholder-pulse {
            animation: pulsePlaceholder 2s ease-in-out infinite;
        }

        /* ===== PERBAIKAN MOBILE MENU - HALUS ===== */
        #mobileMenu {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease-in-out,
                margin 0.3s ease-in-out;
            margin-top: 0;
        }
        #mobileMenu:not(.hidden) {
            max-height: 600px;
            opacity: 1;
            margin-top: 0.5rem;
        }
        #mobileMenu a {
            transform: translateX(-8px);
            opacity: 0;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }
        #mobileMenu:not(.hidden) a {
            transform: translateX(0);
            opacity: 1;
        }
        #mobileMenu:not(.hidden) a:nth-child(1) {
            transition-delay: 0.05s;
        }
        #mobileMenu:not(.hidden) a:nth-child(2) {
            transition-delay: 0.1s;
        }
        #mobileMenu:not(.hidden) a:nth-child(3) {
            transition-delay: 0.15s;
        }
        #mobileMenu:not(.hidden) a:nth-child(4) {
            transition-delay: 0.2s;
        }
        #mobileMenu:not(.hidden) a:nth-child(5) {
            transition-delay: 0.25s;
        }
        #mobileMenu:not(.hidden) a:nth-child(6) {
            transition-delay: 0.3s;
        }

        /* ===== ULTRA-SMALL DEVICES (≤ 320px) ===== */
        @media screen and (max-width: 320px) {
            .ultra-small\:hidden {
                display: none !important;
            }
            .ultra-small\:block {
                display: block !important;
            }
            .ultra-small\:flex {
                display: flex !important;
            }
            .ultra-small\:flex-col {
                flex-direction: column !important;
            }
            .ultra-small\:text-xs {
                font-size: 0.5rem !important;
            }
            .ultra-small\:text-sm {
                font-size: 0.6rem !important;
            }
            .ultra-small\:text-base {
                font-size: 0.7rem !important;
            }
            .ultra-small\:text-lg {
                font-size: 0.8rem !important;
            }
            .ultra-small\:text-xl {
                font-size: 0.9rem !important;
            }
            .ultra-small\:p-1 {
                padding: 0.25rem !important;
            }
            .ultra-small\:p-2 {
                padding: 0.5rem !important;
            }
            .ultra-small\:p-3 {
                padding: 0.75rem !important;
            }
            .ultra-small\:gap-1 {
                gap: 0.25rem !important;
            }
            .ultra-small\:gap-2 {
                gap: 0.5rem !important;
            }
            .ultra-small\:w-full {
                width: 100% !important;
            }
            .ultra-small\:text-center {
                text-align: center !important;
            }
            .ultra-small\:grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            }
            .ultra-small\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .ultra-small\:flex-wrap {
                flex-wrap: wrap !important;
            }
            .ultra-small\:justify-center {
                justify-content: center !important;
            }
            .ultra-small\:items-center {
                align-items: center !important;
            }
            .ultra-small\:mx-auto {
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .ultra-small\:my-1 {
                margin-top: 0.25rem !important;
                margin-bottom: 0.25rem !important;
            }
            .ultra-small\:mb-1 {
                margin-bottom: 0.25rem !important;
            }
            .ultra-small\:mt-1 {
                margin-top: 0.25rem !important;
            }
            .ultra-small\:rounded-lg {
                border-radius: 0.5rem !important;
            }
            .ultra-small\:text-ellipsis {
                text-overflow: ellipsis !important;
                overflow: hidden !important;
                white-space: nowrap !important;
            }
        }

        /* Animasi loading spinner */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }

        /* ===== GALERI LAZY LOAD ===== */
        .gallery-img {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .gallery-img.loaded {
            opacity: 1;
        }
        .gallery-img-placeholder {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            font-size: 2.5rem;
            min-height: 120px;
        }
        .light-mode .gallery-img-placeholder {
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
            color: #94a3b8;
        }

        /* ===== NAVBAR MEMBER AREA BUTTON ===== */
        .member-btn {
            background: linear-gradient(135deg, #d946ef, #ec4899);
            transition: all 0.3s ease;
        }
        .member-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(217, 70, 239, 0.3);
        }
        .light-mode .member-btn {
            color: #0f172a;
        }

        /* ===== SUPABASE GALERI STYLES ===== */
        .gallery-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;
            grid-column: 1 / -1;
        }
        .gallery-error {
            grid-column: 1 / -1;
            text-align: center;
            padding: 2rem;
            color: #ef4444;
        }
        .gallery-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 2rem;
            color: #64748b;
        }
        .gallery-img-container {
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem;
            aspect-ratio: 4/3;
            background: #0f172a;
        }
        .gallery-img-container img,
        .gallery-img-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .gallery-img-container .play-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }
        .gallery-img-container .play-overlay i {
            font-size: 3rem;
            color: white;
            opacity: 0.8;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        .gallery-type-badge {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            padding: 0.2rem 0.6rem;
            border-radius: 0.5rem;
            font-size: 0.6rem;
            color: #94a3b8;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }