/**
 * Jakarta Islamic School
 * Auto-separated stylesheet for: public/students/pecahan_desimal.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; 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); }
        .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; }

        .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); }

        /* Styling Pecahan Vertikal (Atas-Bawah) */
        .math-frac {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            font-size: 0.9em;
            margin: 0 0.15em;
        }
        .math-frac > span {
            display: block;
        }
        .math-num {
            border-bottom: 1.5px solid #0f172a;
            padding-bottom: 1px;
        }
        .math-den {
            padding-top: 1px;
        }