@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap');

    :root {
        /* Light Mode Colors */
        --primary-gradient: linear-gradient(135deg, #1e5e44 0%, #2ecc71 100%);
        --bg-color: #f8fafb;
        --card-bg: #ffffff;
        --text-main: #2d3436;
        --text-muted: #636e72;
        --accent: #27ae60;
        --arabic-bg: #f9fbf9;
        --terjemah-bg: #fff9e6;
        --border-color: rgba(0,0,0,0.02);
    }

    body.dark-mode {
        /* Dark Mode Colors */
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --text-main: #e0e0e0;
        --text-muted: #b0b0b0;
        --arabic-bg: #252525;
        --terjemah-bg: #2d2a1e;
        --border-color: rgba(255,255,255,0.05);
    }
    body { 
        font-family: 'Plus Jakarta Sans', sans-serif; 
        background-color: var(--bg-color); 
        margin: 0; 
        color: var(--text-main);
        transition: background 0.3s ease;
    }

    .header { 
        background: var(--primary-gradient); 
        color: white; 
        padding: 25px 20px 20px 20px;
        text-align: center; 
        border-radius: 0 0 30px 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .header h2 {
        margin: 0;
        margin-bottom: 20px;
    }

    #theme-toggle {
        position: absolute;
        top: 50%;
        right: 25px;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 40px; height: 40px; border-radius: 50%;
        cursor: pointer; font-size: 1.2rem; line-height: 40px;
    }

    .container { max-width: 650px; margin: 25px auto 40px; padding: 0 20px; }

    #search { 
        width: 100%; 
        padding: 18px 25px; 
        border-radius: 20px; 
        border: none; 
        background: rgba(255,255,255,0.2);
        color: var(--text-main);
        outline: none; 
        font-size: 1rem;
        box-sizing: border-box;
    }

    .card { 
        background: var(--card-bg); 
        color: var(--text-main);
        padding: 22px; 
        border-radius: 24px; 
        margin-bottom: 18px; 
        cursor: pointer; 
        transition: all 0.3s ease; 
        border: 1px solid var(--border-color);
    }

    .card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-color: var(--accent);
    }

    #detail-view { 
        position: fixed; 
        top: 0; left: 0; width: 100%; height: 100%; 
        background: var(--bg-color); 
        z-index: 100; 
        display: none; 
        overflow-y: auto; 
        animation: slideUp 0.4s cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .detail-container { max-width: 650px; margin: 0 auto; padding: 30px 20px; }

    .btn-close { 
        background: var(--card-bg); 
        color: var(--text-main); 
        border: 1px solid var(--border-color); 
        padding: 12px 25px; 
        border-radius: 15px; 
        cursor: pointer; font-weight: 600; margin-bottom: 30px;
    }

    .arabic { 
        font-family: 'Amiri', serif; 
        font-size: 2.2rem; 
        text-align: right; 
        direction: rtl; 
        line-height: 2.3; 
        background: var(--arabic-bg); 
        padding: 30px; 
        border-radius: 24px; 
        margin: 20px 0;
        color: var(--text-main);
        border: 1px solid var(--border-color);
    }

    .section-title { 
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--accent); 
        font-weight: 700;
        margin-top: 35px;
        display: block;
    }

    .terjemah { 
        background: var(--terjemah-bg); 
        padding: 20px; 
        border-radius: 20px; 
        border-left: 5px solid #f1c40f; 
        font-size: 0.95rem;
    }