body { background-color: #0b1120; color: #f8fafc; overflow-x: hidden; }

        /* Premium Glassmorphism */
        .glass { 
            background: rgba(11, 17, 32, 0.7); 
            backdrop-filter: blur(16px); 
            -webkit-backdrop-filter: blur(16px); 
            border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }

        /* Floating Controls (High-End Cyber-punk feel) */
        .glass-panel { 
            background: rgba(15, 23, 42, 0.6); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(59, 130, 246, 0.2); 
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .site-logo-wrap {
            width: clamp(74px, 12vw, 132px);
            height: 48px;
        }

        .site-logo {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 132px;
            max-height: 48px;
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Custom Scrollbar minimalis untuk bagian desktop */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0b1120; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }

        .loader { border-top-color: #0ea5e9; -webkit-animation: spinner 1s linear infinite; animation: spinner 1s linear infinite; }
        @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .portal-loader-shell {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 18px;
            overflow: hidden;
        }

        .portal-loader-orbit {
            position: absolute;
            width: min(68vw, 380px);
            aspect-ratio: 1;
            border-radius: 9999px;
            border: 2px solid rgba(14, 165, 233, 0.18);
            border-top-color: rgba(14, 165, 233, 0.92);
            border-right-color: rgba(59, 130, 246, 0.6);
            box-shadow: 0 0 40px rgba(14, 165, 233, 0.22), inset 0 0 30px rgba(14, 165, 233, 0.08);
            animation: portalSpin 1.6s linear infinite;
        }

        .portal-loader-orbit::before,
        .portal-loader-orbit::after {
            content: '';
            position: absolute;
            inset: 16px;
            border-radius: inherit;
            border: 1px solid rgba(125, 211, 252, 0.12);
        }

        .portal-loader-orbit::after {
            inset: 34px;
            border-color: rgba(59, 130, 246, 0.14);
        }

        .portal-loader-glow {
            position: absolute;
            width: min(42vw, 240px);
            aspect-ratio: 1;
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(14,165,233,0.28) 0%, rgba(14,165,233,0.12) 36%, rgba(11,17,32,0) 72%);
            filter: blur(10px);
            animation: portalPulse 1.8s ease-in-out infinite;
        }

        .portal-loader-core {
            position: relative;
            z-index: 1;
            width: min(28vw, 144px);
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 28px;
            background: rgba(8, 15, 31, 0.72);
            border: 1px solid rgba(125, 211, 252, 0.24);
            box-shadow: 0 0 40px rgba(14, 165, 233, 0.20), inset 0 0 30px rgba(255,255,255,0.04);
            animation: portalFloat 1.8s ease-in-out infinite;
        }

        .portal-loader-logo {
            width: 68%;
            height: 68%;
            max-width: 92px;
            max-height: 92px;
            object-fit: contain;
            filter: drop-shadow(0 0 22px rgba(14, 165, 233, 0.55));
            animation: portalLogoPulse 1.8s ease-in-out infinite;
        }

        .portal-loader-text {
            position: relative;
            z-index: 1;
            color: #7dd3fc;
            font-weight: 700;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0 0 18px rgba(14, 165, 233, 0.55);
        }

        @keyframes portalSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes portalPulse { 0%, 100% { transform: scale(0.96); opacity: 0.72; } 50% { transform: scale(1.04); opacity: 1; } }
        @keyframes portalFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.02); } }
        @keyframes portalLogoPulse { 0%, 100% { transform: scale(0.98); } 50% { transform: scale(1.06); } }
        
        .swiper-pagination-bullet { background: rgba(255,255,255,0.2); margin: 0 6px !important; transition: all 0.4s ease;}
        .swiper-pagination-bullet-active { background: #0ea5e9; width: 32px; border-radius: 8px; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6); }
        .swiper-pagination { bottom: 12px !important; } 
        
        #progressBar { transition: width 0.2s ease-out; }
        #readerArea img { transition: filter 0.3s ease, max-width 0.3s ease, width 0.3s ease; pointer-events: none; }

        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .animate-fade-in { animation: fadeIn .35s ease both; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .skeleton-card,
        .skeleton-line {
            position: relative;
            overflow: hidden;
            background: linear-gradient(110deg, rgba(15, 23, 42, 0.95) 8%, rgba(30, 41, 59, 0.95) 18%, rgba(15, 23, 42, 0.95) 33%);
            background-size: 220% 100%;
            animation: skeletonShimmer 1.1s linear infinite;
            border: 1px solid rgba(51, 65, 85, 0.65);
        }

        .skeleton-line {
            height: 12px;
            border-radius: 999px;
        }

        .skeleton-line.short {
            width: 64%;
        }

        @keyframes skeletonShimmer {
            to { background-position-x: -220%; }
        }

        .comic-card { position: relative; }
        .comic-cover {
            border: 1px solid rgba(51, 65, 85, 0.8);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
            background: #0f172a;
        }
        .comic-card:hover .comic-cover {
            border-color: rgba(14, 165, 233, 0.75);
            box-shadow: 0 0 25px rgba(14, 165, 233, 0.28);
        }
        .comic-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(11, 17, 32, 0.82);
            backdrop-filter: blur(10px);
            color: #fbbf24;
            font-size: 10px;
            font-weight: 800;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid rgba(71, 85, 105, 0.8);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
        }
        .comic-chapter-badge {
            display: block;
            background: rgba(15, 23, 42, 0.88);
            backdrop-filter: blur(12px);
            color: #7dd3fc;
            font-size: 10px;
            font-weight: 800;
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid rgba(71, 85, 105, 0.8);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .comic-meta {
            margin-top: 6px;
            color: #94a3b8;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


        /* Mobile polish untuk hero slider */
        @media (max-width: 767px) {
            body { background: #080f1f; }
            #navbar { background: rgba(8, 15, 31, 0.82); border-bottom-color: rgba(148, 163, 184, 0.10); }
            #navbar .h-16 { height: 58px; }
            .site-logo-wrap { width: 70px; height: 38px; }
            .site-logo { max-width: 70px; max-height: 38px; }
            #searchInput { height: 40px; font-size: 12px; }
            main#app { padding-top: 58px; }

            .hero-swiper {
                height: 460px !important;
                min-height: 460px !important;
                border-radius: 0 0 26px 26px !important;
                border-bottom: 1px solid rgba(14, 165, 233, 0.20);
            }
            .hero-bg-img { opacity: 0.34 !important; filter: blur(2px) saturate(1.18); }
            .hero-overlay {
                background:
                    radial-gradient(circle at 82% 18%, rgba(14,165,233,0.30), transparent 32%),
                    radial-gradient(circle at 16% 74%, rgba(37,99,235,0.22), transparent 38%),
                    linear-gradient(180deg, rgba(8,15,31,0.16) 0%, rgba(8,15,31,0.72) 42%, #080f1f 100%) !important;
            }
            .hero-slide-inner {
                padding: 78px 12px 46px !important;
                align-items: flex-end !important;
                justify-content: flex-end !important;
                gap: 0 !important;
            }
            .hero-copy {
                width: 100% !important;
                max-width: 100% !important;
                padding-bottom: 0 !important;
                position: relative;
                z-index: 22;
            }
            .hero-cover-wrap {
                display: block !important;
                position: absolute !important;
                top: 76px !important;
                right: 13px !important;
                width: 104px !important;
                margin: 0 !important;
                z-index: 21 !important;
                filter: drop-shadow(0 16px 32px rgba(0,0,0,.65));
            }
            .hero-cover-wrap > div {
                border-radius: 18px !important;
                border: 1px solid rgba(125,211,252,.55) !important;
                box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 34px rgba(14,165,233,.22) !important;
            }
            .hero-cover-wrap img { border-radius: 18px !important; }
            .hero-badges { gap: 7px !important; margin-bottom: 10px !important; max-width: calc(100% - 118px); }
            .hero-badges span {
                font-size: 8px !important;
                padding: 5px 9px !important;
                border-radius: 999px !important;
                letter-spacing: .05em;
            }
            .hero-title {
                font-size: 22px !important;
                line-height: 1.14 !important;
                margin-bottom: 10px !important;
                max-width: calc(100% - 120px);
                text-wrap: balance;
                min-height: 42px;
            }
            .hero-stats { display: none !important; }
            .hero-genres { display: none !important; }
            .hero-synopsis {
                font-size: 12px !important;
                line-height: 1.55 !important;
                margin-bottom: 14px !important;
                max-width: 100% !important;
                -webkit-line-clamp: 2 !important;
                color: rgba(226,232,240,0.86) !important;
            }
            .hero-cta {
                width: 100% !important;
            }
            .hero-cta button {
                width: 100% !important;
                justify-content: center !important;
            }
            .hero-cta button {
                font-size: 11px !important;
                padding: 10px 18px !important;
                box-shadow: 0 0 22px rgba(14,165,233,.28) !important;
            }
            .hero-latest { display: none !important; }
            .hero-swiper .swiper-pagination {
                bottom: 13px !important;
                left: 0 !important;
                padding-left: 0 !important;
                text-align: center !important;
            }
            .hero-swiper .swiper-pagination-bullet { width: 7px; height: 7px; margin: 0 4px !important; }
            .hero-swiper .swiper-pagination-bullet-active { width: 28px; height: 7px; }

            #mobileNav {
                background: rgba(8, 15, 31, .86);
                backdrop-filter: blur(18px);
                border-top-color: rgba(148, 163, 184, .14);
            }
            #mobileNav button { border-radius: 16px; }
        }

        @media (max-width: 380px) {
            .hero-swiper { height: 440px !important; min-height: 440px !important; }
            .hero-cover-wrap { width: 92px !important; top: 76px !important; right: 10px !important; }
            .hero-title { font-size: 20px !important; max-width: calc(100% - 104px); min-height: 46px; }
            .hero-badges { max-width: calc(100% - 104px); }
            .hero-synopsis { font-size: 11px !important; }
        }