body {
        font-family: 'Inter', sans-serif;
        background-color: #121212;
        color: #e0e0e0;
    }

    a {
        color: #66d9ef;
    }

    a:hover {
        color: #50fa7b;
    }

    .navbar {
        background-color: #1f1f1f;
    }

    .navbar-brand,
    .nav-link {
        color: #ffffff !important;
    }

    .navbar-nav .nav-link.active {
        color: #50fa7b !important;
        font-weight: 600;
    }

    header {
        background: linear-gradient(to right, #1f1f1f, #282c34);
        color: #ffffff;
        text-align: center;
        padding: 4rem 1rem;
        box-shadow: inset 0 -2px 8px rgba(255, 255, 255, 0.1);
    }

    header h1 {
        font-size: clamp(1.8rem, 5vw, 3rem);
        font-weight: 800;
        text-shadow: 0 0 10px #66d9ef;
    }

    header p {
        font-size: 1.25rem;
        opacity: 0.85;
    }

    .card,
    .bg-light {
        background-color: #1e1e1e !important;
        border: none;
        color: #ccc;
    }

    .card-title a {
        color: #66d9ef;
    }

    .btn-primary {
        background-color: #50fa7b;
        border: none;
    }

    .btn-primary:hover {
        background-color: #40d883;
    }

    footer {
        background-color: #1f1f1f;
        color: #ccc;
        font-size: 0.9rem;
        padding: 1.5rem 0;
    }

    footer a {
        color: #66d9ef;
    }

    main {
        animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .btn-readmore {
        background-color: #2d2d2d;
        color: #66d9ef;
        border: 1px solid #444;
        transition: all 0.2s ease-in-out;
    }

    .btn-readmore:hover {
        background-color: #393939;
        color: #50fa7b;
        border-color: #50fa7b;
    }

    pre code {
        display: block;
        overflow-x: auto;
        padding: 1rem;
        background-color: #1e1e1e;
        border-radius: 8px;
        font-family: 'Fira Code', monospace;
        font-size: 0.95rem;
    }

    /* Kontras teks pada nav-tabs agar cocok di dark mode */
    .nav-tabs .nav-link {
        color: #ccc;
        /* default (tidak aktif) */
    }

    .nav-tabs .nav-link.active {
        background-color: #fff;
        color: #000 !important;
        font-weight: 600;
        border-bottom: 2px solid transparent;
    }

    .nav-tabs .nav-link:hover {
        color: #fff;
    }

    @keyframes bounceX {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-10px);
        }
    }

    .arrow-hint-bounce {
        display: inline-block;
        animation: bounceX 0.8s infinite;
    }

    .playlist-scroll .video-item.active {
        background-color: #e9f3ff;
        border-left: 4px solid #0d6efd;
        font-weight: 600;
    }

    .playlist-scroll .video-item {
        transition: background-color 0.3s;
    }

    body.bg-dark .playlist-scroll .video-item.active {
        background-color: rgba(13, 110, 253, 0.2);
        border-left: 4px solid #0d6efd;
    }

    .bg-balasan-guru {
        background-color: #002b36;
        /* hijau gelap terminal */
        color: #39ff14;
        /* hijau neon terang */
    }

    .bg-balasan-user {
        background-color: #2c2f36;
        /* abu kebiruan gelap */
        color: #f8f9fa;
    }

    code {
        color: #ffffff;
        /* putih */
    }

    .pre-output {
        color: #ffffff;
        white-space: pre-wrap;
    }

    .arabic {
        font-size: 1.5em;
        font-family: 'Amiri', 'Scheherazade', 'Traditional Arabic', serif;
        direction: rtl;
        unicode-bidi: isolate;
    }

    .arabic-text {
        font-size: 1.6rem;
        font-family: 'Scheherazade New', 'Amiri', 'Lateef', 'Noto Naskh Arabic', 'Arial', serif;
        color: #212529;
        /* teks gelap */
        direction: rtl;
        text-align: right;
        user-select: all;
    }

    .arabic-root {
        font-size: 1.4rem;
        font-family: 'Scheherazade New', 'Amiri', 'Lateef', 'Noto Naskh Arabic', 'Arial', serif;
        color: #212529;
        direction: rtl;
        text-align: right;
        user-select: all;
    }

    .arabic-explanation {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }

    .arabic-structure {
        font-family: 'Traditional Arabic', Arial, sans-serif;
        font-size: 1.3em;
        direction: rtl;
        text-align: center;
        padding: 10px;
        background-color: #f5f5f5;
        color: #212529;
        border-left: 3px solid #4CAF50;
    }

    .sentence-pattern {
        color: #ffffff;
        padding: 15px;
        border-radius: 5px;
        margin: 15px 0;
    }

    .arabic-example {
        font-family: 'Traditional Arabic', Arial, sans-serif;
        font-size: 1.3em;
        color: #eaecee;
        direction: rtl;
        padding: 5px 0;
        margin: 5px 0;
    }

    table th,
    table td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    table th {
        background-color: #f2f2f2;
        color: #212529;
    }