/**
 * Jakarta Islamic School
 * Auto-separated stylesheet for: public/students/kecepatan_debit.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; }
        
        .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); }
        .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; animation: blink 0.75s step-end infinite; }
        @keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--primary-color); } }
        
        .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); }

        .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 { background-color: var(--primary-color); color: white; font-weight: 600; }
        .btn-custom:hover { background-color: var(--primary-dark); color: white; }
        .accordion-button:not(.collapsed) { background-color: #e0f2fe; color: var(--primary-dark); }

        .step-animasi {
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .step-animasi.muncul {
            opacity: 1;
            transform: translateY(0);
        }