/**
 * Jakarta Islamic School
 * Auto-separated stylesheet for: public/students/pangkat_akar.php
 */

:root { --primary-purple: #7c3aed; --bg-body: #f5f3ff; --text-dark: #0f172a; }
        
        /* Proteksi: Mencegah teks diseleksi/disorot */
        body { 
            font-family: 'Poppins', sans-serif; 
            background: var(--bg-body); 
            color: var(--text-dark); 
            min-height: 100vh;
            -webkit-user-select: none; 
            -moz-user-select: none; 
            -ms-user-select: none; 
            user-select: none; 
        }

        /* Izinkan siswa tetap mengetik pada kolom input jawaban */
        input, textarea {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }
        
        .navbar-custom { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #ede9fe; }
        .logo-nav { width: 36px; height: auto; }
        .navbar-brand span { font-size: 1rem; font-weight: 700; color: var(--primary-purple); }

        .content-card { background: #ffffff; border: 1px solid #ede9fe; border-radius: 1.25rem; box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.05); }
        .stage-box { background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%); border: 2px dashed #c4b5fd; border-radius: 1rem; position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }

        .typing-text { border-right: 2px solid var(--primary-purple); white-space: pre-wrap; animation: blink 0.75s step-end infinite; }
        @keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--primary-purple); } }
        .step-box { background: #faf5ff; border-left: 4px solid var(--primary-purple); border-radius: 0.5rem; padding: 1.2rem; font-size: 0.88rem; line-height: 1.7; min-height: 210px; }
        .explanation-box { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 0.75rem; padding: 1rem; font-size: 0.82rem; line-height: 1.6; display: none; margin-top: 10px; }

        .nav-pills .nav-link {
            background: #ffffff; color: var(--text-dark); border: 1px solid #ede9fe; font-weight: 500; font-size: 0.82rem; border-radius: 0.75rem; transition: all 0.2s ease;
        }
        .nav-pills .nav-link:hover { background: #f3e8ff; color: var(--primary-purple); border-color: #c4b5fd; }
        .nav-pills .nav-link.active { background: var(--primary-purple); color: #ffffff; border-color: var(--primary-purple); }