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

:root { 
            --primary-color: #0284c7; 
            --primary-dark: #0369a1; 
            --accent-color: #38bdf8;
            --bg-body: #f0f9ff; 
            --text-dark: #0f172a; 
        }
        
        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; 
        }

        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.95); backdrop-filter: blur(10px); border-bottom: 1px solid #e0f2fe; box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.05); }
        .logo-nav { width: 36px; height: auto; }
        .navbar-brand span { font-size: 1rem; font-weight: 700; color: var(--primary-color); }

        .content-card { background: #ffffff; border: 1px solid #e0f2fe; border-radius: 1.25rem; box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.08); transition: transform 0.2s ease; }
        .content-card:hover { transform: translateY(-2px); }
        
        .stage-box { 
            background: linear-gradient(135deg, #e0f2fe 100%, #bae6fd 0%); 
            border: 2px dashed #7dd3fc; 
            border-radius: 1rem; 
            position: relative; 
            min-height: 260px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            overflow: hidden; 
            box-shadow: inset 0 2px 10px rgba(2, 132, 199, 0.05);
        }

        .typing-text { border-right: 2px solid var(--primary-color); white-space: pre-wrap; }
        
        .step-box { background: #f8fafc; border-left: 4px solid var(--primary-color); border-radius: 0.5rem; padding: 1.25rem; font-size: 0.85rem; line-height: 1.7; box-shadow: inset 0 1px 3px rgba(0,0,0,0.02); }
        .explanation-box { background: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 0.5rem; padding: 1rem; font-size: 0.82rem; line-height: 1.7; display: none; margin-top: 10px; }

        /* Animasi Efek Visual Jawaban Benar & Salah */
        @keyframes popCorrect {
            0% { transform: scale(1); background-color: #f0fdf4; }
            50% { transform: scale(1.015); background-color: #dcfce7; box-shadow: 0 0 15px rgba(22, 163, 74, 0.3); }
            100% { transform: scale(1); background-color: #f0fdf4; }
        }

        @keyframes shakeWrong {
            0% { transform: translateX(0); background-color: #fef2f2; }
            20% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
            100% { transform: translateX(0); background-color: #fef2f2; box-shadow: 0 0 15px rgba(220, 38, 38, 0.2); }
        }

        .anim-correct {
            animation: popCorrect 0.5s ease-in-out;
        }

        .anim-wrong {
            animation: shakeWrong 0.5s ease-in-out;
        }

        .nav-pills .nav-link {
            background: #ffffff; color: var(--text-dark); border: 1px solid #bae6fd; font-weight: 500; font-size: 0.8rem; border-radius: 0.75rem; transition: all 0.25s ease;
        }
        .nav-pills .nav-link:hover { background: #e0f2fe; color: var(--primary-color); border-color: var(--primary-color); transform: scale(1.03); }
        .nav-pills .nav-link.active { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #ffffff; border-color: transparent; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); }

        .pointer-btn { font-size: 0.75rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
        .pointer-btn:hover { background-color: var(--primary-color) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(2, 132, 199, 0.2); }
        
        @keyframes pulseGlow {
            0% { filter: drop-shadow(0 0 2px #0284c7); stroke-width: 2; }
            50% { filter: drop-shadow(0 0 10px #f43f5e); stroke: #f43f5e; stroke-width: 3.5; }
            100% { filter: drop-shadow(0 0 2px #0284c7); stroke-width: 2; }
        }
        .highlight-part { animation: pulseGlow 1.2s infinite; }
        
        .btn-custom-action { background-color: var(--primary-color); color: white; border: none; font-weight: 600; transition: 0.2s; }
        .btn-custom-action:hover { background-color: var(--primary-dark); color: white; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); }

        .accordion-button:not(.collapsed) { background-color: #e0f2fe; color: var(--primary-dark); }