:root {
            /* [DIUBAH] Variabel Warna Hijau diganti Biru */
            --primary-blue: #3B82F6; /* blue-500 */
            --primary-blue-dark: #1D4ED8; /* blue-700 */
            --primary-blue-light: #DBEAFE; /* blue-100 */
            /* [BARU] Variabel Warna Hijau untuk Cek Kelulusan */
            --primary-green: #10B981; /* emerald-500 */
            --primary-green-dark: #065F46; /* emerald-900 */
            
            --text-dark: #1f2937; /* Gray 800 */
            --text-medium: #4b5563; /* Gray 600 */
            --text-light: #6b7280; /* Gray 500 */
            --bg-light: #f9fafb; /* Gray 50 */
            --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            --card-shadow-hover: 0 20px 35px -8px rgba(0, 0, 0, 0.1), 0 10px 15px -8px rgba(0, 0, 0, 0.08);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-medium);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .glass-effect {
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
        }

        .section-card {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 1.25rem; /* 20px */
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: var(--card-shadow);
            transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
        }

        /* [DIUBAH] Efek hover disesuaikan dengan warna biru */
        .section-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.08); /* Biru */
            border-color: rgba(59, 130, 246, 0.3); /* Biru */
        }

        /* ATURAN NAVIGASI BAWAH */
        .nav-container {
            padding: 0.5rem; /* p-2 */
        }
        .mobile-nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            border-radius: 1rem; /* rounded-2xl */
            border: 1px solid rgba(229, 231, 235, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .mobile-nav .nav-item {
            position: relative;
            isolation: isolate;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--text-medium);
            padding: 0.75rem 0.25rem;
            width: 20%;
            height: 100%;
            transition: color 0.2s ease-out, transform 0.2s ease-out;
            cursor: pointer;
            text-decoration: none;
            gap: 0.25rem;
        }
        .mobile-nav .nav-item .fa-solid, .mobile-nav .nav-item .fas {
            font-size: 1.5rem; /* 24px */
            height: 1.5rem;
            position: relative; /* Tambahkan ini agar z-index bekerja jika diperlukan */
            z-index: 1; /* Pastikan ikon di bawah bintang */
        }
        .mobile-nav .nav-item .nav-text {
            font-size: 0.7rem;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

        /* [DIUBAH] Warna hover & active jadi biru */
        .mobile-nav .nav-item:hover {
            transform: translateY(-2px);
            color: var(--primary-blue-dark);
        }
        .mobile-nav .nav-item:active,
        .mobile-nav .nav-item.active {
            color: var(--primary-blue-dark);
            font-weight: 600;
            transform: translateY(-2px);
        }
        /* [AKHIR] ATURAN NAVIGASI BAWAH */

        /* [BARU] Aturan untuk indikator SPMB */
        .nav-item-spmb {
            position: relative; /* Untuk positioning bintang */
            overflow: visible !important; /* Memastikan bintang terlihat jika di luar batas */
        }

        /* [PERUBAHAN] Penyesuaian posisi bintang ke kanan atas icon */
        .spmb-indicator {
            position: absolute;
            top: 0.5rem; /* Sesuaikan vertikal agar pas di atas ikon */
            /* Menggunakan left dan transform untuk centering relatif */
            left: calc(50% + 0.6rem); /* Mulai dari tengah, geser sedikit ke kanan (sesuaikan 0.6rem) */
            transform: translateX(-50%); /* Center bintangnya sendiri */
            color: #F59E0B; /* amber-500 */
            font-size: 0.6rem; /* Lebih kecil dari teks */
            animation: pulse-star 1.5s infinite ease-in-out;
            text-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
            z-index: 2; /* Pastikan bintang di atas ikon */
        }
        /* [AKHIR PERUBAHAN] */

        /* [PERUBAHAN] Hapus translateX dari animasi, biarkan transform asal */
        @keyframes pulse-star {
            0%, 100% {
                transform: scale(1) translateX(-50%); /* Kembalikan translateX untuk centering */
                opacity: 1;
            }
            50% {
                transform: scale(1.3) translateX(-50%); /* Kembalikan translateX untuk centering */
                opacity: 0.7;
            }
        }
        /* [AKHIR PERUBAHAN] */

        /* [BARU] Aturan hover khusus untuk ikon SPMB */
        .nav-item-spmb:hover .fa-user-graduate {
            color: #EF4444; /* red-500, warna yang berbeda */
            transform: scale(1.1); /* Sedikit membesar */
        }

        /* Memastikan teks tetap biru saat di-hover, sesuai aturan .nav-item:hover */
        .nav-item-spmb:hover {
            color: var(--primary-blue-dark); /* Teks akan mewarisi ini */
        }

        .nav-item-spmb:hover .nav-text {
            color: var(--primary-blue-dark); /* Menegaskan warna teks */
        }

        /* Mengatur transisi pada ikon spmb */
        .nav-item-spmb .fa-user-graduate {
            transition: color 0.2s ease-out, transform 0.2s ease-out;
        }
        /* [AKHIR] Aturan Indikator SPMB */

        /* ======================================= */
        /* [BARU] CSS untuk Tombol Cek Kelulusan */
        /* ======================================= */

        @keyframes magnify-in-out {
            0%, 100% {
                transform: scale(1) translate(-50%, -50%);
                opacity: 0;
            }
            50% {
                transform: scale(1.2) translate(-50%, -50%);
                opacity: 1;
            }
        }

        .magnifying-glass-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 1.5rem;
            color: white;
            /* Mulai tersembunyi */
            transform: scale(0.8) translate(-50%, -50%); 
            opacity: 0;
            transition: all 0.3s ease;
        }

        #check-spmb-btn:hover .magnifying-glass-indicator {
            opacity: 1;
            transform: scale(1) translate(-50%, -50%);
            /* Animasi pulse saat hover */
            animation: magnify-in-out 1.5s infinite ease-in-out; 
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        /* Modifikasi warna focus input di modal check-spmb-modal */
        #check-spmb-modal .creative-input:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); /* Sesuai emerald-500 */
        }

        /* Status Lulus di Modal Profil (Tambahkan glow hijau baru) */
        .status-display.animate-glow[style*="10b981"] {
            --glow-color: #10b98130; 
            --glow-color-strong: #10b98160;
            animation: pulse-glow 3s infinite ease-in-out;
        }

        /* ======================================= */
        /* [AKHIR] CSS untuk Tombol Cek Kelulusan */
        /* ======================================= */


        .fade-in-up {
            opacity: 0;
            transform: translateY(35px);
            transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }

        .hero-slider-container {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
            border-radius: 0 0 2.5rem 2.5rem;
            z-index: 1; /* [DIUBAH] z-index ditambah */
        }
        .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: scale(1.1); }
        .hero-slide.active { opacity: 1; transform: scale(1); }
        .hero-slide img { width: 100%; height: 100%; object-fit: cover; }

        /* [DIUBAH] Gradien overlay disesuaikan sedikit */
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 20, 80, 0.7), rgba(0,0,0,0.1)); /* Nuansa biru gelap */
            z-index: 2; /* [DIUBAH] z-index ditambah */
        }

        /* [BARU] Efek blur di bawah slider */
        .hero-slider-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px; /* Ketinggian fade, bisa disesuaikan */
            /* Gradien dari warna background body ke transparan */
            background: linear-gradient(to top, var(--bg-light) 8%, rgba(249, 250, 251, 0) 100%);
            z-index: 3; /* Di atas overlay gelap, di bawah teks */
            border-radius: 0 0 2.5rem 2.5rem;
        }

        .nav-link { position: relative; padding: 0.25rem 0; }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 3px;
            /* [DIUBAH] Warna garis bawah jadi biru */
            background-color: var(--primary-blue);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }
        .nav-link:hover::after, .nav-link.active::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        /* [DIUBAH] Warna teks aktif jadi biru gelap */
        .nav-link.active { color: var(--primary-blue-dark); font-weight: 600; }

        .modal-overlay {
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .modal-content {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 1.5rem;
            border: 1px solid rgba(0,0,0,0.05);
            max-width: 800px;
            width: 100%;
            transform: scale(0.95) translateY(10px);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            max-height: 90vh;
            overflow-y: auto;
        }
        #auth-modal-content { max-width: 450px; }
        .modal-transition.active .modal-content { transform: scale(1) translateY(0); }

        .creative-input, .creative-select {
            width: 100%;
            padding: 0.85rem 1.25rem;
            border-radius: 0.75rem;
            background-color: #f3f4f6;
            border: 2px solid transparent;
            transition: all 0.3s;
            appearance: none;
            font-weight: 500;
        }
        /* [DIUBAH] Warna border focus jadi biru */
        .creative-input:focus, .creative-select:focus {
            outline: none;
            border-color: var(--primary-blue);
            background-color: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Biru */
        }

        /* [DIUBAH] Warna border tab auth jadi biru */
        .auth-tab { cursor: pointer; padding: 0.5rem 1rem; border-bottom: 3px solid transparent; transition: all 0.3s; }
        .auth-tab.active { border-bottom-color: var(--primary-blue); color: var(--primary-blue-dark); font-weight: 600; }

        .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

        .marquee-container { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); cursor: grab; }
        .marquee-container.grabbing { cursor: grabbing; }
        .marquee-track { display: flex; will-change: transform; }
        .marquee-item { flex-shrink: 0; width: auto; height: 180px; margin: 0 0.75rem; border-radius: 1rem; box-shadow: var(--card-shadow); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        /* [DIUBAH] Shadow hover marquee jadi biru */
        .marquee-item:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2); } /* Biru */

        .album-card { position: relative; cursor: pointer; overflow: hidden; border-radius: 1.25rem; box-shadow: var(--card-shadow); transition: transform 0.3s, box-shadow 0.3s; }
        .album-card:hover { transform: translateY(-8px); box-shadow: var(--card-shadow-hover); }
        .album-card:hover .album-slide { transform: scale(1.1); }
        .album-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%); display: flex; align-items: flex-end; padding: 1.25rem; z-index: 2; }
        .album-title { color: white; font-weight: 700; font-size: 1.25rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); }
        #album-modal-content { max-width: 90vw; max-height: 90vh; width: 100%; }
        #album-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
        .album-slideshow-container { position: relative; width: 100%; height: 100%; }
        .album-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out, transform 0.3s; }
        .album-slide.active { opacity: 1; }

        #calendar-grid { grid-template-rows: auto repeat(6, 1fr); }
        .calendar-day { transition: all 0.25s ease; position: relative; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
        /* [DIUBAH] Warna kalender event jadi biru */
        .calendar-day.has-event { background-color: var(--primary-blue-light); font-weight: bold; color: var(--primary-blue-dark); cursor: pointer; }
        .calendar-day.has-event:hover { background-color: #BFDBFE; transform: scale(1.1); } /* blue-200 */
        .calendar-day.today { border: 2px solid var(--primary-blue); }
        .calendar-day.sunday { color: #ef4444; }
        .calendar-day.holiday { background-color: #fee2e2; color: #b91c1c; font-weight: bold; }
        .event-item.highlight { background-color: var(--primary-blue-light); transform: scale(1.02); }

        @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px var(--glow-color), 0 0 25px var(--glow-color-strong); } 50% { box-shadow: 0 0 25px var(--glow-color-strong), 0 0 40px var(--glow-color); } }
        /* [PERUBAHAN] Penyesuaian Style Status Display */
        .status-display { 
            text-align: center; 
            padding: 1rem 1rem; /* Padding dikurangi sedikit */
            border-radius: 1.25rem; 
            transition: all 0.3s ease; 
            position: relative; 
            overflow: hidden; 
        }
        .status-display .status-label {
            font-size: 0.75rem; /* text-xs */
            font-weight: 700;
            margin-bottom: 0.25rem;
            letter-spacing: 0.05em; /* tracking-wider */
            text-transform: uppercase;
        }
        .status-display .status-value {
            font-size: 1.5rem; /* text-2xl (kecilkan dari 4xl) */
            font-weight: 800;
            line-height: 1.2;
        }
        .status-display .status-message {
            font-size: 0.875rem; /* text-sm (lebih detail) */
            line-height: 1.4;
            margin-top: 0.5rem;
        }
        .status-display.animate-glow { animation: pulse-glow 3s infinite ease-in-out; }
        /* [AKHIR PERUBAHAN] */

        .social-icon { display: inline-flex; justify-content: center; align-items: center; width: 52px; height: 52px; border-radius: 50%; background-color: white; color: #475569; font-size: 1.35rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: var(--card-shadow); }
        .social-icon:hover { transform: translateY(-8px) scale(1.1); color: white; box-shadow: var(--card-shadow-hover); }
        /* Warna hover ikon sosial media tidak diubah karena spesifik brand */
        .facebook-icon:hover { background-color: #1877F2; }
        .instagram-icon:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf4p-3 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
        .youtube-icon:hover { background-color: #FF0000; }
        .tiktok-icon:hover { background-color: #000000; }
        .whatsapp-icon:hover { background-color: #25D366; }

        @keyframes fadeInViewer { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .viewer-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); color: white; background-color: rgba(0,0,0,0.3); border-radius: 50%; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; transition: background-color 0.2s; cursor: pointer; z-index: 90; }
        .viewer-nav-btn:hover { background-color: rgba(0,0,0,0.6); }
        #viewer-image { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; animation: fadeInViewer 0.4s ease-out forwards; }

        #user-profile-dropdown.active {
            opacity: 1;
        }

        /* [BARU] Aturan untuk menyembunyikan scrollbar */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* ======================================= */
        /* [BARU] ENHANCEMENT: Visual Improvements   */
        /* ======================================= */

        /* Ken Burns Effect for Hero Slides */
        .hero-slide img {
            animation: kenBurns 12s ease-in-out infinite alternate;
        }
        .hero-slide:nth-child(2) img { animation-delay: -4s; animation-duration: 14s; }
        .hero-slide:nth-child(3) img { animation-delay: -8s; animation-duration: 10s; }
        @keyframes kenBurns {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.08) translate(-1%, -1%); }
        }

        /* Article Card Enhancement */
        .article-card {
            position: relative;
            overflow: hidden;
        }
        .article-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .article-card:hover::after {
            transform: scaleX(1);
        }
        .article-card .read-more-indicator {
            position: absolute;
            bottom: 1.25rem;
            right: 1.25rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(8px);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
            z-index: 2;
        }
        .article-card:hover .read-more-indicator {
            opacity: 1;
            transform: translateY(0);
        }
        .article-card .read-more-indicator i {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }
        .article-card:hover .read-more-indicator i {
            transform: translateX(2px);
        }

        /* Article image zoom on hover */
        .article-card .article-img-wrapper {
            overflow: hidden;
        }
        .article-card .article-img-wrapper img {
            transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .article-card:hover .article-img-wrapper img {
            transform: scale(1.08);
        }

        /* Page Transition */
        #main-content, #article-detail-page {
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .page-exit {
            opacity: 0;
            transform: translateY(20px);
        }
        .page-enter {
            opacity: 0;
            transform: translateY(-20px);
        }

        /* Section Title Enhancement */
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
            border-radius: 2px;
        }

        /* Scroll to Top Button */
        #scroll-to-top {
            position: fixed;
            bottom: 6.5rem;
            right: 1.25rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--primary-blue);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 25;
        }
        #scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        #scroll-to-top:hover {
            background: var(--primary-blue-dark);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
        }

        /* Footer Enhancement */
        footer {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
            position: relative;
            overflow: hidden;
        }
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
        }

        /* Highlights card improvement */
        .highlight-card-enhanced {
            position: relative;
            overflow: hidden;
        }
        .highlight-card-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary-blue), var(--primary-blue-dark));
            border-radius: 4px 0 0 4px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .highlight-card-enhanced:hover::before {
            opacity: 1;
        }

        /* Smooth image loading */
        img {
            background-color: #f1f5f9;
        }

        /* Mobile bottom nav fix for 6 items */
        @media (max-width: 640px) {
            .mobile-nav .nav-item .fa-solid, .mobile-nav .nav-item .fas {
                font-size: 1.2rem;
                height: 1.2rem;
            }
            .mobile-nav .nav-item .nav-text {
                font-size: 0.6rem;
            }
            .mobile-nav .nav-item {
                padding: 0.5rem 0.15rem;
            }
        }

        /* Hero dots indicator */
        .hero-dots {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }
        .hero-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .hero-dot.active {
            background: white;
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        .hero-dot:hover {
            background: rgba(255, 255, 255, 0.7);
        }

        /* All Articles Modal Card */
        .all-articles-card {
            cursor: pointer;
            border-radius: 1rem;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            background: white;
            box-shadow: var(--card-shadow);
        }
        .all-articles-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--card-shadow-hover);
        }
        .all-articles-card img {
            transition: transform 0.5s ease;
        }
        .all-articles-card:hover img {
            transform: scale(1.05);
        }

        /* Better detail page image */
        #detail-image {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        /* Article detail content styling */
        #detail-content p {
            margin-bottom: 1rem;
        }
        #detail-content img {
            border-radius: 0.75rem;
            cursor: pointer;
        }

        /* Gallery card enhanced hover - search icon overlay */
        .album-card::after {
            content: '\f002';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            color: white;
            font-size: 1.5rem;
            z-index: 5;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            pointer-events: none;
        }
        .album-card:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Social media icon subtle animation */
        @keyframes socialFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        .social-icon:nth-child(1) { animation: socialFloat 3s ease-in-out infinite 0s; }
        .social-icon:nth-child(2) { animation: socialFloat 3s ease-in-out infinite 0.3s; }
        .social-icon:nth-child(3) { animation: socialFloat 3s ease-in-out infinite 0.6s; }
        .social-icon:nth-child(4) { animation: socialFloat 3s ease-in-out infinite 0.9s; }
        .social-icon:nth-child(5) { animation: socialFloat 3s ease-in-out infinite 1.2s; }