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

:root { --primary-orange: #f97316; --bg-body: #fff7ed; --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.9); backdrop-filter: blur(10px); border-bottom: 1px solid #ffedd5; }
        .logo-nav { width: 36px; height: auto; }
        .navbar-brand span { font-size: 1rem; font-weight: 700; color: var(--primary-orange); }

        .content-card { background: #ffffff; border: 1px solid #ffedd5; border-radius: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); }
        .stage-box { background: #fffbeb; border: 2px dashed #fde68a; border-radius: 1rem; position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }

        .step-box { background: #fafaf9; border-left: 4px solid var(--primary-orange); border-radius: 0.5rem; padding: 1rem; font-size: 0.85rem; line-height: 1.6; }

        .fraction-display { font-size: 2.2rem; font-weight: 700; color: var(--primary-orange); line-height: 1; }

        .nav-pills .nav-link {
            background: #ffffff; color: var(--text-dark); border: 1px solid #ffedd5; font-weight: 500; font-size: 0.85rem; border-radius: 0.75rem; transition: all 0.2s ease;
        }
        .nav-pills .nav-link:hover { background: #fff7ed; color: var(--primary-orange); border-color: #fde68a; }
        .nav-pills .nav-link.active { background: var(--primary-orange); color: #ffffff; border-color: var(--primary-orange); }

        /* Styling pecahan vertikal (atas-bawah) untuk teks animasi */
        .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;
        }