/* Style halaman literasi.php (dipisah) */
/* Remove default body margin */
        body {
            margin: 0;
            padding: 0;
        }

        /* Coming Soon Section */
        .coming-soon-section {
            min-height: 100vh;
            background: 
                linear-gradient(
                    135deg,
                    rgba(0, 51, 102, 0.95),
                    rgba(74, 144, 226, 0.9)
                ),
                url("/assets/images/kelasliterasi.jpg");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 80px 20px 20px 20px;
            margin: 0;
        }

        .coming-soon-content {
            text-align: center;
        }

        .coming-soon-content h1 {
            color: var(--polines-gold);
            font-size: 120px;
            font-weight: 900;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            letter-spacing: 10px;
            margin: 0 0 30px 0;
            position: relative;
            display: inline-block;
            overflow: hidden;
            border-right: 5px solid var(--polines-gold);
            white-space: nowrap;
            animation: typing 4s steps(11) infinite, blink 0.75s step-end infinite;
        }

        /* Typing Effect */
        @keyframes typing {
            0%, 90%, 100% {
                width: 100%;
            }
            0% {
                width: 0;
            }
        }

        @keyframes blink {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: var(--polines-gold);
            }
        }

        /* Subtitle */
        .coming-soon-content p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 22px;
            font-weight: 400;
            margin: 0;
            letter-spacing: 1px;
            line-height: 1.6;
            opacity: 0;
            animation: fadeIn 1s ease-in 2s forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        /* Responsive */
        @media (max-width: 992px) {
            .header-area .main-nav .nav {
                background-color: var(--polines-navy) !important;
            }

            .coming-soon-content h1 {
                font-size: 80px;
                letter-spacing: 5px;
            }

            .coming-soon-content p {
                font-size: 18px;
            }
        }

        @media (max-width: 768px) {
            .coming-soon-content h1 {
                font-size: 60px;
                letter-spacing: 3px;
            }

            .coming-soon-content p {
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .coming-soon-content h1 {
                font-size: 40px;
                letter-spacing: 2px;
            }

            .coming-soon-content p {
                font-size: 14px;
            }
        }