/* Font FatwaUlama: Plus Jakarta Sans (Latin) + Amiri (Arab) */
@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* LPMQ Isep Misbah (Kemenag RI) — self-hosted font for Qur'anic verses.
   The unicode-range restricts it to Arabic-script characters only, so
   Latin text keeps using Plus Jakarta Sans via per-character fallback
   even though the font file also contains basic Latin glyphs. */
@font-face {
    font-family: "LPMQ Isep Misbah";
    src: url("fonts/LPMQ_IsepMisbah.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* =========================================
   1. Design System & Variables
   ========================================= */
:root {
    /* Colors — Matched to @bincang_ilmu Instagram */
    --primary-color: #6B2D3E;
    /* Deep Maroon/Burgundy (Logo color) */
    --primary-dark: #4A1D2B;
    /* Darker Maroon */
    --primary-light: rgba(107, 45, 62, 0.1);
    /* Maroon tint for backgrounds */
    --secondary-color: #2D1B1E;
    /* Dark Charcoal/Maroon (accent) */
    --text-dark: #2D1B1E;
    /* Dark Charcoal-Maroon */
    --text-light: #574A4D;
    /* Muted Charcoal */

    /* Glassmorphism Variables (Light Mode) */
    --glass-bg: rgba(253, 248, 244, 0.95);
    --glass-border: 1px solid rgba(107, 45, 62, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(107, 45, 62, 0.06);
    --glass-blur: blur(12px);

    --bg-white: #FDF8F4;
    /* Warm Cream */
    --bg-light: #F5EDE5;
    /* Light Beige */
    --bg-dark: #2D1B1E;
    /* Dark Charcoal */
    --bg-card: #FFFFFF;
    --border-color: #E8DDD3;
    /* Warm border */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6B2D3E 0%, #4A1D2B 100%);
    --gradient-text: linear-gradient(to right, #6B2D3E, #2D1B1E);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(107, 45, 62, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(107, 45, 62, 0.08), 0 2px 4px -1px rgba(107, 45, 62, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(107, 45, 62, 0.08), 0 4px 6px -2px rgba(107, 45, 62, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(107, 45, 62, 0.1), 0 10px 10px -5px rgba(107, 45, 62, 0.04);

    /* Typography */
    --font-logo: var(--font-main);
    --font-main: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "LPMQ Isep Misbah", "Amiri", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing & Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.5rem;
    --radius-full: 9999px;

    --container-width: 1200px;
    --transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}


/* Dark Theme Variables */
[data-theme="dark"] {
    /* Shared dark palette: warm near-black surfaces with a readable rose accent. */
    --primary-color: #C98295;
    --primary-dark: #A85F73;
    --primary-surface: #6B2D3E;
    --primary-light: rgba(201, 130, 149, 0.18);
    --secondary-color: #A89F9E;

    /* Text Colors */
    --text-dark: #F8F0F1;
    --text-light: #C4B5B9;

    /* Background Colors */
    --bg-white: #140C0F;

    /* Glassmorphism Variables (Dark Mode) */
    --glass-bg: rgba(34, 21, 25, 0.98);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.38);

    --bg-light: #26191D;
    --bg-card: #211519;
    --bg-card-dark: #2B1D21;
    --border-color: #49363C;
    --bg-dark: #10090C;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);

    /* Gradients */
    --gradient-text: linear-gradient(to right, #F8F0F1, #C4B5B9);
    --gradient-primary: linear-gradient(135deg, #6B2D3E 0%, #4A1D2B 100%);
    /* Solid Maroon gradient */
}


/* =========================================
   2. Reset & Base Styles
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}



/* =========================================
   Global Custom Scrollbar
   ========================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}


::-webkit-scrollbar-track {
    background: transparent;
}


::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}


* {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}


body {
    font-family: var(--font-main);
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.6;
    /* Ambient Background for Glassmorphism */
    background: var(--bg-white);
    background-attachment: fixed;
    /* Parallax-like feel */
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: simpleFadeIn 0.8s ease-out forwards;
}


/* Glass Utility Class */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes simpleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Ensure footer sticks to bottom */
footer {
    margin-top: auto;
}


/* Stable Headers for Pages */
.page-header {
    background-color: var(--bg-light);
    padding: 120px 0 60px;
    text-align: center;
}


/* Prevent Layout Shift for Dynamic Grids */
#allCoursesGrid,
#allBlogsGrid,
.blog-content-section {
    min-height: 400px;
}


a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}


ul {
    list-style: none;
}


img {
    max-width: 100%;
    display: block;
}


.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* =========================================
   3. Utility Classes
   ========================================= */
.text-primary {
    color: var(--primary-color) !important;
}


.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.bg-light {
    background-color: var(--bg-light) !important;
}


.mt-5 {
    margin-top: 3rem;
}


.text-center {
    text-align: center;
}


/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    gap: 0.5rem;
    transition: var(--transition);
    font-size: 1rem;
    border: none;
}


.btn-primary {
    background: var(--gradient-primary);
    color: #FDF8F4; /* Always cream/white for contrast against maroon */
    box-shadow: 0 4px 14px 0 rgba(107, 45, 62, 0.39); /* Maroon shadow */
}


.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 45, 62, 0.5); /* Maroon shadow on hover */
}


.btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    backdrop-filter: blur(4px);
}


.btn-outline:hover {
    background: var(--primary-color);
    color: #FDF8F4;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .btn-outline {
    color: var(--text-dark);
    border-color: var(--text-dark);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--text-dark);
    color: var(--bg-dark);
}


.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}


.btn-white {
    background: white;
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}


.btn-white:hover {
    background: #f8f8f8;
    transform: translateY(-2px);
}


.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}


.badge-outline {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}


/* =========================================
   4. Header & Navigation
   ========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: rgba(255, 255, 255, 1);
    /* Solid white for better readability over dark content */
    backdrop-filter: none;
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    height: 80px;
    box-shadow: var(--shadow-sm);
    padding: 1rem 0;
    transition: var(--transition);
}


.header.scrolled {
    background: rgba(255, 255, 255, 1);
    /* Solid white */
    backdrop-filter: none;
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}


[data-theme="dark"] .header.scrolled {
    background: var(--bg-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


[data-theme="dark"] .header {
    background: var(--bg-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}


.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
    /* Ensure dropdown positioning works relative to this or actions */
}


/* Bismillah Modal */
.bismillah-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Darker backdrop for floating card */
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    backdrop-filter: blur(5px);
}


[data-theme="dark"] .bismillah-modal {
    background-color: rgba(0, 0, 0, 0.8);
}


.bismillah-modal.active {
    opacity: 1;
    
}


.bismillah-content {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 3rem;
    border-radius: var(--radius-lg);
    position: relative;
    max-width: 600px;
    width: 90%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}


[data-theme="dark"] .bismillah-content {
    background: var(--bg-light);
    /* Dark card */
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.bismillah-modal.active .bismillah-content {
    transform: scale(1) translateY(0);
}


.bismillah-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: #6B7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}


.bismillah-close:hover {
    background: var(--border-color);
    color: var(--primary-color);
    transform: rotate(90deg);
}


[data-theme="dark"] .bismillah-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}


[data-theme="dark"] .bismillah-close:hover {
    background: rgba(255, 255, 255, 0.2);
}


.bismillah-image {
    width: 400px;
    /* Slightly smaller for card */
    max-width: 100%;
    margin-bottom: 2rem;
    margin-top: 1rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}


[data-theme="dark"] .bismillah-image {
    /* Filter to turn black to #FFFFFF (Gold) */
    filter: invert(72%) sepia(61%) saturate(632%) hue-rotate(357deg) brightness(104%) contrast(97%);
}


.bismillah-text {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s delay 0.3s, transform 0.5s delay 0.3s;
}


.bismillah-modal.active .bismillah-text {
    opacity: 1;
    transform: translateY(0);
}


/* Fullscreen Search Overlay */
/* Fullscreen Search Overlay (Now Modal Style) */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: all 0.3s ease;
}


[data-theme="dark"] .search-overlay {
    background: rgba(0, 0, 0, 0.8);
}


.search-overlay.active {
    opacity: 1;
    
}


.search-field-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    width: 90%;
    max-width: 550px;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    /* Added subtle border */
    text-align: center;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


[data-theme="dark"] .search-field-container {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.search-overlay.active .search-field-container {
    transform: scale(1);
}


.search-overlay-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--text-light);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}


[data-theme="dark"] .search-overlay-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    /* Ensure White Color in Dark Mode */
}


.search-overlay-close:hover {
    background: #EF4444;
    color: white;
    transform: rotate(90deg);
}


.search-overlay-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--border-color);
    background: transparent;
    font-size: 1.5rem;
    padding: 1rem 0;
    color: var(--text-dark);
    text-align: center;
    font-family: inherit;
    font-weight: 300;
    transition: border-color 0.3s;
}


[data-theme="dark"] .search-overlay-input {
    border-color: rgba(255, 255, 255, 0.1);
}


.search-overlay-input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}


.search-overlay-input::placeholder {
    color: var(--text-light);
    opacity: 0.5;
}


/* =========================================
   2.5. Animations
   ========================================= */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }


    100% {
        transform: translateX(-50%);
    }


}
.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}


.marquee-content {
    display: inline-flex;
    gap: 4rem;
    animation: marquee 20s linear infinite;
}


.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}


.scrolling-grid {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem 0.5rem 2rem 0.5rem;
    /* Bottom padding for shadow/scroll */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -webkit-overflow-scrolling: touch;
}


.scrolling-grid::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}


.scrolling-grid .course-card, .scrolling-grid .blog-card {
    flex: 0 0 350px;
    /* Fixed width for cards in slider */
    scroll-snap-align: center;
    width: 350px;
    height: auto;
    align-self: stretch;
}


/* Logo Styles */
.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 0.85;
    color: var(--text-dark);
    font-family: var(--font-logo);
    /* Use Outfit for geometric look */
    letter-spacing: -0.5px;
}


.logo span {
    display: block;
}


.logo span.highlight,
.logo-footer span.highlight {
    color: var(--text-light);
    /* Muted text for "ilmu" */
    display: inline;
    /* Keep inline for dot */
}

.brand-logo-image {
    display: block;
    flex: 0 0 auto;
    width: clamp(100px, 10.2vw, 126px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 819.77 / 277.25;
    object-fit: contain;
    object-position: left center;
}

[data-theme="dark"] .brand-logo-image {
    filter: brightness(0) invert(1);
}


/* Footer Logo specific */
.logo-footer {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 0.85;
    color: var(--text-dark);
    /* Improved contrast in Light Mode */
    margin-bottom: 1.5rem;
    font-family: var(--font-logo);
    letter-spacing: -0.5px;
}

.logo-footer .brand-logo-image {
    width: clamp(100px, 10.2vw, 126px);
}


.logo-footer span {
    display: block;
}


.logo-footer span.highlight {
    color: var(--text-light);
    display: inline;
}


.nav-list {
    display: flex;
    gap: 2.5rem;
}


.nav-link {
    font-weight: 500;
    color: var(--text-dark);
    position: relative;
}


.nav-link:hover,
.nav-link.active {
    color: var(--primary-color);
}


.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}


.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--text-dark);
}
[data-theme="dark"] .nav-link::after {
    background-color: var(--text-dark);
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-dark);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}


.theme-toggle:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}


.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-dark);
}


/* User Profile Styles */
.user-profile-wrapper {
    position: relative;
    margin-left: 1rem;
    z-index: 99999;
}


.profile-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    transition: background 0.2s;
}


.profile-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}


[data-theme="dark"] .profile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}


.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}


.profile-avatar-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
}


.profile-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.75rem;
    display: none;
    /* Hidden on mobile */
}


/* =========================================
   Blog Card Redesign (Reference Style)
   ========================================= */
.blog-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}


.blog-thumb {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.2rem;
    aspect-ratio: 4/3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}


.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.blog-card:hover .blog-thumb img {
    transform: scale(1.05);
}


/* Floating Badges (Merged to bottom of file) */



/* Content */
.blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px 20px;
}


.blog-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.75rem;
}


.blog-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}


.blog-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}


.author-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}


.blog-date-text {
    font-size: 0.75rem;
    color: var(--text-light);
    /* "Tanpa kotak" - simple text */
    font-weight: 500;
}


.blog-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: var(--text-dark);
}


.blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}


.blog-title a:hover {
    color: var(--primary-dark);
}


/* Continue Reading Pill Button */
.btn-blog-pill {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    background: var(--bg-light);
    /* Admins to Dark/Light theme */
    border: 1px solid var(--secondary-color);
    /* Add border for definition */
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 99px;
    text-decoration: none;
    transition: all 0.3s ease;
}


.btn-blog-pill:hover {
    background: var(--color-gold);
    color: var(--text-on-gold);
    border-color: var(--color-gold);
}


.btn-blog-pill i {
    font-size: 1rem;
    margin-left: 8px;
    transform: translateX(0);
    transition: transform 0.3s ease;
}


.btn-blog-pill:hover i {
    transform: translateX(4px);
}


@media (min-width: 768px) {
    .profile-name {
        display: block;
    }


}
.profile-dropdown {
    position: absolute;
    top: 120%;
    right: 0;
    width: 260px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 99999;
    opacity: 0;
    
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
    /* Prevent clicks when hidden */
}


[data-theme="dark"] .profile-dropdown {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: block !important;
    pointer-events: auto !important;
}


.dropdown-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}


[data-theme="dark"] .dropdown-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}


.user-info strong {
    display: block;
    color: var(--text-dark);
}


.user-info span {
    font-size: 0.85rem;
    color: var(--text-light);
}


.dropdown-menu {
    list-style: none;
    padding: 0.5rem 0;
}


.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0.5rem;
    border-radius: 8px;
    color: var(--text-dark);
    font-size: 0.75rem;
    transition: all 0.2s;
}


.dropdown-menu li a i {
    color: var(--primary-color);
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}


.dropdown-menu li a:hover {
    background: rgba(17, 24, 39, 0.1);
    color: var(--text-dark);
    transform: translateX(5px);
}


.dropdown-menu li a.text-danger i {
    color: #EF4444;
}


.dropdown-menu li a.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}


[data-theme="dark"] .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
}


.dropdown-menu .divider {
    height: 1px;
    background: #eee;
    margin: 0.5rem 0;
}


[data-theme="dark"] .dropdown-menu .divider {
    background: rgba(255, 255, 255, 0.1);
}


.text-danger {
    color: #ef4444 !important;
}


/* =========================================
   3. Hero Section
   ========================================= */
.hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--bg-light), #FFFFFF);
}


[data-theme="dark"] .hero {
    background: linear-gradient(to bottom, var(--bg-white), var(--bg-light));
}


[data-theme="dark"] .hero-shape {
    display: none;
}


.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}


.hero-content {
    position: relative;
    z-index: 10;
}


.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}


.hero-description {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    max-width: 90%;
}


.hero-buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: center;
}


.btn-video {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
    font-weight: 500;
}


.btn-video i {
    font-size: 2rem;
    color: var(--primary-color);
    transition: var(--transition);
}


.btn-video:hover i {
    transform: scale(1.1);
}


.hero-stats {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 2rem;
    margin-top: 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 10;
}


[data-theme="dark"] .hero-stats {
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
    background: linear-gradient(145deg, var(--bg-card), var(--bg-dark));
}


.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex: 1;
}


.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1rem;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--border-color);
}


.stat-number {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    line-height: 1;
}
[data-theme="dark"] .stat-number {
    color: var(--text-dark);
}


.stat-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


@media (max-width: 768px) {
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        padding: 2rem;
        border-radius: 20px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }


}

/* Hero Image & Slider */
/* Hero Image & Slider */
.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Background Animation */
.hero-bg-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}


.pulsing-circle {
    position: absolute;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(180, 151, 90, 0.2) 0%, rgba(180, 151, 90, 0) 70%);
    border-radius: 50%;
    animation: pulse-scale 6s ease-in-out infinite;
    will-change: transform, opacity;
}


[data-theme="dark"] .pulsing-circle {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0) 70%);
}


.rotating-ring {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    animation: rotate 40s linear infinite;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ring-line {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-color);
    border-radius: 50%;
}


.ring-line-2 {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 1px dotted var(--border-color);
    border-radius: 50%;
    animation: rotate-reverse 50s linear infinite;
    will-change: transform;
}


.ring-line-3 {
    position: absolute;
    width: 120%;
    height: 120%;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}


.rotating-ring .orbiter {
    position: absolute;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center point alignment */
    transform-origin: center center;
}


.rotating-ring .orbiter i {
    font-size: 1.5rem;
    color: var(--primary-color);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: rotate-counter 40s linear infinite;
    will-change: transform;
}


/* Precise Positions on the Ring (Radius) */
/* Ring is 450x450. Center is 50%,50%. */
/* Using standard top/left + translate(-50%, -50%) on the wrapper */

.pos-1 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}


.pos-2 {
    top: 25%;
    right: 6.7%;
    transform: translate(50%, -50%);
}


.pos-3 {
    bottom: 25%;
    right: 6.7%;
    transform: translate(50%, 50%);
}


.pos-4 {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}


.pos-5 {
    bottom: 25%;
    left: 6.7%;
    transform: translate(-50%, 50%);
}


.pos-6 {
    top: 25%;
    left: 6.7%;
    transform: translate(-50%, -50%);
}


.hero-slider-container {
    position: relative;
    width: 100%;
    height: 480px;
    /* Adjust height as needed */
    z-index: 1;
    /* Above bg, below cards */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    /* Removed box shadow for transparent images */
    background: transparent;
    /* Transparent background */
    border-radius: 0;
    overflow: visible;
    /* Allow images to pop out if needed */
}


.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
}


.hero-slide.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
}


.main-img {
    width: auto;
    height: auto;
    max-width: 96%;
    max-height: 96%;
    object-fit: contain;
    /* Don't crop, show full image */
    border-radius: 0;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
    animation: float-book 6s ease-in-out infinite;
}


/* Removed Floating Cards Styles */
.floating-card {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10;
    /* Above slider */
    animation: float 4s ease-in-out infinite;
    min-width: 180px;
}




.card-1 {
    top: 15%;
    left: -40px;
    /* More outside */
    z-index: 10;
}


.card-2 {
    bottom: 12%;
    right: -20px;
    /* Slightly inside-outside overlap */
    animation-delay: 2s;
    z-index: 10;
}


/* Animations */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-reverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes rotate-counter {
    from {
        transform: rotate(0deg);
    }


    to {
        transform: rotate(-360deg);
    }
}

@keyframes pulse-scale {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
}

@keyframes float-book {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.card-1 i {
    font-size: 1.5rem;
    padding: 0.75rem;
    background: #E0F2FE;
    color: #0284C7;
    border-radius: 8px;
}


.card-2 i {
    font-size: 1.5rem;
    padding: 0.75rem;
    background: #FEF3C7;
    color: #D97706;
    border-radius: 8px;
}


.card-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
    font-weight: 700;
}


.card-info p {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0;
}


.progress-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 10px;
    margin-top: 5px;
    width: 100%;
}


.progress {
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
}


@keyframes float {

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


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


}
.card-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}


.card-info p {
    font-size: 0.75rem;
    color: var(--text-light);
}


.progress-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 10px;
    margin-top: 5px;
    width: 100%;
}


.progress {
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
}


@keyframes float {

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


    50% {
        transform: translateY(-15px);
    }


}
.hero-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    line-height: 0;
}


/* =========================================
   6. Sections General
   ========================================= */
.section {
    padding: 5rem 0;
}


.section-header {
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.section-title {
    font-size: 1.85rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}


.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-light);
}


/* =========================================
   7. Course Grid
   ========================================= */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}


/* --- Card Container (Premium Edge-to-Edge Style) --- */
.course-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 20px;
    overflow: hidden; /* Penting untuk clip gambar ke radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    padding: 0; /* Override padding lama */
}


.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}


/* --- Thumbnail --- */
.course-thumb {
    position: relative;
    width: 100%;
    margin-bottom: 0; /* Hapus margin bawah */
    overflow: hidden;
}


.course-thumb img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
}


.course-card:hover .course-thumb img {
    transform: scale(1.08);
}


/* --- Content Typography --- */
.course-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem; /* Padding dipindah ke konten */
}


/* Category Pill */
.category-pill {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: inline-block;
    background: rgba(107, 45, 62, 0.05); /* Modern subtle bg */
    color: var(--text-dark);
    border: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


[data-theme="dark"] .category-pill {
    background: rgba(255, 255, 255, 0.1);
}


/* Unifying Legacy Classes */
.tag-arab,
.tag-fiqih,
.tag-adab {
    background: rgba(107, 45, 62, 0.05);
    color: var(--text-dark);
    border: none;
}

[data-theme="dark"] .tag-arab,
[data-theme="dark"] .tag-fiqih,
[data-theme="dark"] .tag-adab {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
}


/* Light Green */


.course-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}


.course-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}


.course-title a:hover {
    color: var(--primary-dark);
}


/* Rating Row */
.course-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}


.stars {
    color: var(--secondary-color);
    /* Gold stars */
}


.rating-num {
    color: var(--text-light);
}


/* Instructor Row */
.course-instructor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}


.course-instructor img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}


.instructor-info {
    display: flex;
    flex-direction: column;
}


.instructor-info .name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}


.instructor-info .role {
    font-size: 0.75rem;
    color: var(--text-light);
}


/* Divider & Footer */
.course-footer-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 500;
}


.course-footer-meta i {
    color: var(--primary-color);
    margin-right: 4px;
}


.price {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.125rem;
}


.old-price {
    font-size: 0.875rem;
    color: var(--text-light);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 0.5rem;
}


.rating {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 0;
}


/* =========================================
   8. Features Section
   ========================================= */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}


.feature-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.feature-list li {
    display: flex;
    gap: 1.5rem;
}


.icon-box {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: rgba(107, 45, 62, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    flex-shrink: 0;
}


.text h4 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}


.text p {
    color: var(--text-light);
    font-size: 0.75rem;
}


.feature-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}


.feature-image img {
    width: 100%;
}


.experience-badge {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
}


.experience-badge .count {
    display: block;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}


.experience-badge .label {
    font-size: 0.8rem;
    color: var(--text-dark);
    font-weight: 600;
}


/* =========================================
   9. CTA Section
   ========================================= */
.cta-section {
    padding: 0 0 5rem 0;
}


.cta-box {
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}


.cta-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: var(--bg-white);
}


.cta-content h2 {
    font-size: 1.85rem;
    margin-bottom: 1rem;
}


.cta-content p {
    margin-bottom: 2rem;
    opacity: 0.9;
    font-size: 1.125rem;
}


.cta-decoration i {
    font-size: 12rem;
    color: rgba(255, 255, 255, 0.2);
    /* Increased visibility */
    display: block;
    transform: none;
    /* Tegak (Upright) */
    position: relative;
    right: auto;
    bottom: auto;
}


/* =========================================
   9.1. Ad Carousel Slider
   ========================================= */
.unified-ads-section {
    padding: 0 0 4rem 0;
}

.ad-carousel-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ad-carousel-track {
    position: relative;
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ad-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 0;
}

.ad-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Make CTA box fill the slide */
.ad-slide .cta-box {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Make promo banner fill the slide */
.ad-slide .ad-banner-custom {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Image-based ad slide */
.ad-slide-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius-lg);
    cursor: pointer;
    object-fit: cover;
    object-position: center;
}

/* Dots Navigation */
.ad-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 0.5rem 0;
}

.ad-carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D1D5DB;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.ad-carousel-dots .dot.active {
    background: var(--primary-color);
    width: 28px;
    border-radius: 5px;
}

.ad-carousel-dots .dot:hover {
    background: var(--primary-color);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .ad-carousel-track {
        height: 260px;
    }
    .ad-slide .cta-box {
        padding: 1.5rem;
    }
    .ad-slide .cta-content h2 {
        font-size: 1.2rem;
    }
    .ad-slide .cta-content p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    .cta-decoration i {
        font-size: 6rem;
    }
}


/* =========================================
   9.5. Advertisement Section
   ========================================= */
.ads-section {
    padding: 3rem 0;
    padding-bottom: 6rem;
    /* Added extra space before footer */
    text-align: center;
}


.ad-banner-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: transform 0.3s ease;
    width: 100%;
    /* max-width removed to match CTA box width */
    /* Limit width */
    height: auto;
    /* Let content dictate height */
    margin: 0 auto;
    /* Center it */
}


.ad-banner-wrapper:hover {
    transform: translateY(-5px);
}


.ad-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop to fill */
    object-position: center;
    display: block;
}


/* =========================================
   10. Footer
   ========================================= */
.footer {
    background: var(--bg-light);
    color: var(--text-dark);
    padding-top: 5rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Added subtle top border for separation in light mode */
}


.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}




.footer-brand p {
    margin-bottom: 2rem;
    line-height: 1.6;
}


.social-links {
    display: flex;
    gap: 1rem;
}


.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}


.social-links a:hover {
    background: var(--primary-color);
    color: var(--bg-white);
}


.footer-links h4 {
    color: var(--text-dark);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}


.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


.footer-links a:hover {
    color: var(--primary-color);
}


.footer-links li i {
    width: 20px;
    color: var(--primary-color);
}
[data-theme="dark"] .footer-links li i {
    color: var(--text-dark);
}


.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.footer-legal {
    display: flex;
    gap: 2rem;
}


/* =========================================
   11. Responsive Media Queries
   ========================================= */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.75rem;
    }


    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }


}
@media (max-width: 768px) {
    .header-actions {
        display: none;
    }


    .nav-menu {
        display: none;
        /* In real implementation, would be toggleable */
    }


    .mobile-toggle {
        display: block;
    }


    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }


    .hero-buttons {
        justify-content: center;
    }


    .hero-stats {
        justify-content: center;
    }


    .hero-title {
        font-size: 2.25rem;
    }


    .features-grid {
        grid-template-columns: 1fr;
    }


    .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 3rem 2rem;
    }


    .cta-decoration i {
        display: none;
    }


    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }


}
/* =========================================
   12. Breadcrumb
   ========================================= */
.breadcrumb-area {
    padding: 8rem 0 2rem;
    background: var(--bg-light);
}


.breadcrumb {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}


.breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--text-light);
    font-size: 0.9rem;
}


.breadcrumb li::after {
    content: '/';
    margin-left: 0.5rem;
    color: #D1D5DB;
}


.breadcrumb li:last-child::after {
    display: none;
}


.breadcrumb a:hover {
    color: var(--primary-color);
}


.breadcrumb li.active {
    color: var(--primary-color);
    font-weight: 500;
}


/* =========================================
   13. Course Detail Page
   ========================================= */
.course-detail-section {
    padding: 3rem 0 5rem;
}


.course-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}


/* Main Content */
.video-player-wrapper {
    margin-bottom: 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    background: #000;
}


.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.course-main-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}


.course-meta-large {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}


.meta-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.meta-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}


.meta-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    width: 48px;
    height: 48px;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


.meta-item .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
}


.meta-item .value {
    font-weight: 600;
    color: var(--text-dark);
}


.text-warning {
    color: #F59E0B !important;
}


/* Tabs */
.course-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-color);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    overflow-x: auto; /* Allow scrolling on small screens */
}


.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}


.tab-btn:hover {
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.05);
}


[data-theme='dark'] .tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}


.tab-btn.active {
    color: var(--bg-white);
    background: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.tab-content {
    display: none;
    animation: slideUpFade 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}


.tab-content.active {
    display: block;
}


@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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


}
.tab-content h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}


.tab-content p {
    margin-bottom: 1.5rem;
    color: var(--text-light);
}


.check-list li {
    margin-bottom: 0.75rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}


.check-list i {
    color: var(--primary-color);
    /* Green */
    background: #ECFDF5;
    padding: 0.25rem;
    border-radius: 50%;
    font-size: 0.8rem;
}


/* Curriculum styles */
.module-item {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}


.module-header {
    padding: 1rem 1.5rem;
    background: var(--bg-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}


.module-duration {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 400;
}


.lesson-list li {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}


.lesson-list li:hover {
    background: white;
}


.lesson-list li.active {
    background: #EFF6FF;
    /* Light blue bg */
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
    font-weight: 500;
}


.lesson-list li.active i {
    color: var(--primary-color);
}


.lesson-list i {
    color: var(--text-light);
}


.free-badge {
    margin-left: auto;
    background: #D1FAE5;
    color: #059669;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}


/* Sidebar */
.course-sidebar {
    position: relative;
}


.sidebar-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    position: sticky;
    top: 6rem;
}


.sidebar-thumb {
    width: 100%;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}


.sidebar-price {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}


.current-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
}


.original-price {
    text-decoration: line-through;
    color: var(--text-light);
}


.discount-badge {
    display: inline-block;
    background: #FEE2E2;
    color: #EF4444;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}


.btn-block {
    display: flex;
    width: 100%;
}


.mb-3 {
    margin-bottom: 1rem;
}


.course-features-list {
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.course-features-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-light);
}


.course-features-list i {
    width: 20px;
    color: var(--primary-color);
}


.course-features-list strong {
    color: var(--text-dark);
    margin-right: auto;
    margin-left: 0.5rem;
}


/* Responsive Course Detail */
@media (max-width: 900px) {
    .course-layout {
        grid-template-columns: 1fr;
    }


    .course-sidebar {
        order: -1;
    }


    .sidebar-card {
        position: static;
    }


}
/* =========================================
   14. Auth Modal
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    
    transition: all 0.3s ease;
    padding: 1rem;
    pointer-events: none;
    backdrop-filter: blur(5px);
}


[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}


.modal-overlay.active {
    opacity: 1;
    
    pointer-events: auto;
    /* Ensure clicks work */
}


.modal-box {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2.5rem;
    width: 90%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    position: relative;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}


.modal-overlay.active .modal-box {
    transform: translateY(0);
    opacity: 1;
}


.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}


.modal-close:hover {
    color: var(--text-dark);
}


.auth-tabs {
    display: flex;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}


.auth-tab-btn {
    flex: 1;
    text-align: center;
    padding: 1rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    font-size: 1rem;
}


.auth-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}


.auth-form {
    display: none;
}


.auth-form.active {
    display: block;
    animation: fadeIn 0.4s;
}


.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}


.toggle-password {
    position: absolute;
    right: 15px;
    top: 43px;
    /* Adjusted to center in input (Label ~25px + Input padding) */
    color: var(--text-light);
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s;
}


.toggle-password:hover {
    color: var(--primary-color);
}


/* Hide native password toggle in Edge/IE */
.form-input::-ms-reveal,
.form-input::-ms-clear {
    display: none;
}


.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
}


.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}


.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}


.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}


.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
}


.forgot-password {
    color: var(--primary-color);
    font-weight: 500;
}


.divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}


.divider::before {
    content: none;
}


.divider span {
    background: transparent;
    padding: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}


.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}


.btn-google:hover {
    background: var(--bg-light);
    border-color: #D1D5DB;
}


.btn-google img {
    width: 20px;
    height: 20px;
}


/* Video Modal Specific */
.video-modal-box {
    background: transparent;
    width: 100%;
    max-width: 900px;
    padding: 0;
    box-shadow: none;
    position: relative;
}


.video-modal-content {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    width: 100%;
    background: black;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
}


.video-modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* =========================================
   15. Partner Section
   ========================================= */
.partners-section {
    padding: 3rem 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}


.partners-title {
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    opacity: 0.7;
}


.partner-logo {
    height: 40px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition);
}


.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}


.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}


.video-modal-close:hover {
    color: var(--secondary-color);
}


/* =========================================
   16. Mobile Optimization Updates
   ========================================= */
@media (max-width: 768px) {

    /* Hide floating cards on mobile for cleaner view */
    .floating-card {
        display: none;
    }


    .partners-grid {
        gap: 1.5rem;
    }


    .partner-logo {
        height: 30px;
    }


    .modal-box {
        padding: 1.5rem;
        width: 90%;
    }


    .section-title {
        font-size: 1.75rem;
    }


    .hero {
        padding-top: 6rem;
    }


    /* Course Detail Mobile */
    .course-meta-large {
        flex-direction: column;
        gap: 1rem;
    }


    .course-sidebar {
        margin-top: 2rem;
    }


}
/* Ad Modal Specific Styles */
.ad-modal-box {
    max-width: 600px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}


.ad-content {
    position: relative;
    background: transparent;
    border-radius: var(--radius);
    overflow: hidden;
}


.ad-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}


.ad-action {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
}


.ad-action .btn {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--primary-color);
    /* Fallback */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}


.ad-modal-box .modal-close {
    top: -15px;
    right: -15px;
    background: white;
    color: var(--text-dark);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 1;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}


/* =========================================
   17. Robust Dark Mode Overrides
   ========================================= */
[data-theme="dark"] .course-card,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .mv-card,
/* About Page */
[data-theme="dark"] .experience-badge,
[data-theme="dark"] .floating-card,
[data-theme="dark"] .btn-white,
[data-theme="dark"] .btn-google {
    background-color: var(--bg-light);
    /* Slightly lighter than page bg */
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
}


/* Ensure Primary Buttons have light text for readability */
[data-theme="dark"] .btn-primary {
    color: #FDF8F4 !important;
}


/* Sync 'Lihat Semua Kelas' with Primary Button in Dark Mode */
[data-theme="dark"] .btn-see-all {
    background: var(--gradient-primary);
    color: #FDF8F4 !important;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


[data-theme="dark"] .btn-see-all:hover {
    background: var(--gradient-primary);
    color: #FDF8F4;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* Make logo highlight match muted text in dark mode */
[data-theme="dark"] .logo span.highlight,
[data-theme="dark"] .logo-footer span.highlight {
    color: var(--text-light);
}


[data-theme="dark"] .course-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}


/* Fix borders and backgrounds to be subtle in dark mode */
[data-theme="dark"] .course-instructor,
[data-theme="dark"] .partners-section,
[data-theme="dark"] .section.bg-light,
/* Override features section bg */
[data-theme="dark"] .auth-tabs,
[data-theme="dark"] .course-features-list,
[data-theme="dark"] .lesson-list li,
[data-theme="dark"] .module-item,
[data-theme="dark"] .form-input,
[data-theme="dark"] .course-meta-large {
    border-color: rgba(255, 255, 255, 0.1);
}


/* Fix inputs */
[data-theme="dark"] .form-input {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--text-dark);
}


[data-theme="dark"] .form-input:focus {
    border-color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.5);
}


/* Fix Module Headers */
[data-theme="dark"] .module-header {
    background-color: rgba(255, 255, 255, 0.05);
}


/* Fix Icon Boxes (Features) */
[data-theme="dark"] .icon-box {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}


/* Fix "Free" and "Discount" badges */
[data-theme="dark"] .free-badge {
    background: rgba(107, 45, 62, 0.2);
    color: #34D399;
}


[data-theme="dark"] .discount-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}


/* Fix Footer Logo text in case it vanishes (though it was white) */
[data-theme="dark"] .logo-footer,
[data-theme="dark"] .logo-footer span {
    color: var(--text-dark);
}


/* Footer Dark Mode */
[data-theme="dark"] .footer {
    background-color: var(--bg-dark);
    /* Deep Maroon/Black */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


[data-theme="dark"] .footer-links h4 {
    color: var(--text-dark);
}


[data-theme="dark"] .footer-links a {
    color: var(--text-light);
}


[data-theme="dark"] .footer-links a:hover {
    color: var(--text-dark);
}


[data-theme="dark"] .social-links a {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}


[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}


/* Button variants */
[data-theme="dark"] .btn-outline {
    border-color: var(--text-dark);
    color: var(--text-dark);
}


[data-theme="dark"] .btn-outline:hover {
    background-color: var(--text-dark);
    color: var(--bg-dark);
}


/* Breadcrumbs */
[data-theme="dark"] .breadcrumb-area {
    background-color: var(--bg-light);
}


/* Feature Image */
[data-theme="dark"] .feature-image {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}


/* About Page Specific Styles */
.about-grid-hero,
.about-grid-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}


.about-grid-reverse .about-text {
    order: 2;
}


.about-grid-reverse .about-image-wrapper {
    order: 1;
}


.about-image-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}


.about-img {
    width: 100%;
    height: auto;
    filter: grayscale(1);
    transition: transform 0.5s ease;
}


.about-image-wrapper:hover .about-img {
    transform: scale(1.05);
}


.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}


.value-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    border-top: 4px solid var(--primary-color);
    transition: var(--transition);
}


.value-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}


.value-card .icon-box {
    margin: 0 auto 1.5rem;
    background: rgba(107, 45, 62, 0.05);
    width: 70px;
    height: 70px;
    border-radius: 50%;
}


.value-card h3 {
    margin-bottom: 1rem;
    color: var(--text-dark);
}


.value-card p {
    color: var(--text-light);
    font-size: 0.75rem;
}


/* Responsiveness for About Page */
@media (max-width: 900px) {

    .about-grid-hero,
    .about-grid-reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .about-grid-reverse .about-text {
        order: 1;
    }


    .about-grid-reverse .about-image-wrapper {
        order: 2;
    }


    .mission-vision {
        grid-template-columns: 1fr;
    }


}
/* Dark Mode Overrides for About Page */
[data-theme="dark"] .value-card {
    background: var(--bg-light);
    border-top-color: var(--primary-color);
    box-shadow: none;
}


[data-theme="dark"] .value-card .icon-box {
    background: rgba(255, 255, 255, 0.1);
}


/* =========================================
   Blog Magazine Layout
   ========================================= */

.magazine-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}


@media (max-width: 900px) {
    .magazine-layout {
        grid-template-columns: 1fr;
    }


}
.magazine-header {
    margin-bottom: 2rem;
}


.magazine-title {
    font-family: var(--font-main);
    /* Or fallback serif */
    font-size: 1.85rem;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 1rem;
}


.text-highlight {
    color: #D4AF37;
    /* Gold color matching theme */
}


.magazine-divider {
    width: 60px;
    height: 3px;
    background: #D4AF37;
    margin: 1rem 0;
}


.magazine-subtitle {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
}


/* Main Story Card */
.main-story-card {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform 0.3s ease;
}


.main-story-card:hover {
    transform: translateY(-5px);
}


.main-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.main-story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    padding: 2rem;
    padding-top: 5rem;
    color: white;
}


.main-story-badge {
    background: #D4AF37;
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    border-radius: 4px;
}


.main-story-title {
    font-family: var(--font-main);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: white;
}


.main-story-meta {
    font-size: 0.85rem;
    opacity: 0.9;
}


.main-story-desc {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    display: none;
    /* Hide on small, show if needed */
}


@media(min-width: 600px) {
    .main-story-desc {
        display: block;
    }


}
/* Side Column */
.section-header-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.section-header-small h3 {
    font-family: var(--font-main);
    font-size: 1.75rem;
    color: var(--text-dark);
    margin: 0;
}


.view-all-link {
    font-size: 0.9rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s;
}


.view-all-link:hover {
    color: var(--primary-color);
}


.latest-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}


@media (max-width: 600px) {
    .latest-news-grid {
        grid-template-columns: 1fr;
    }


}
/* Side Story Card */
.side-story-card {
    background: white;
    /* No border/shadow for clean look as per image, or subtle shadow */
}


.side-story-thumb {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}


.side-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.side-story-card:hover .side-story-img {
    transform: scale(1.05);
}


.side-story-date {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    display: block;
}


.side-story-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}


.side-story-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}


.side-story-title a:hover {
    color: var(--primary-color);
}


.side-story-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
}


.side-author {
    color: #D4AF37;
}



/* Blog Magazine Layout */
.blog-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 40px;
    align-items: start;
}


@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }


}

/* =========================================
   Featured Blog Carousel
   ========================================= */
.featured-carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: 40px;
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.featured-carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.featured-slide {
    flex: 0 0 100%;
    min-width: 100%;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.featured-carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    right: 2.5rem;
    display: flex;
    gap: 8px;
    z-index: 10;
}

@media (max-width: 768px) {
    .featured-carousel-dots {
        bottom: 1rem;
        right: 1.5rem;
    }
}

/* Kitab page contrast fixes for dark mode. */
[data-theme="dark"] .kitab-content .horizontal-title {
    color: var(--text-dark);
}

[data-theme="dark"] .kitab-content .horizontal-author {
    color: var(--text-light);
}

[data-theme="dark"] .kitab-content .horizontal-desc {
    color: var(--text-light);
}

[data-theme="dark"] .kitab-search-wrapper input {
    color: var(--text-dark);
    background: var(--bg-light);
    caret-color: var(--text-dark);
}

[data-theme="dark"] .kitab-search-wrapper input::placeholder {
    color: var(--text-light);
    opacity: 1;
}

[data-theme="dark"] .page-header .badge-outline {
    color: var(--text-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .page-header .section-title .text-primary {
    color: var(--text-dark) !important;
}

.featured-carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(156, 163, 175, 0.5); /* text-light with opacity */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.featured-carousel-dots .dot.active {
    background: var(--primary-color);
    width: 24px;
    border-radius: 5px;
}

/* Base Featured Card (Horizontal) */
.featured-blog-card {
    display: flex;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.featured-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}


.featured-blog-img-wrapper {
    flex: 1.2;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}


.featured-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.featured-blog-card:hover .featured-blog-img {
    transform: scale(1.05);
}


.featured-blog-content {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


@media (max-width: 768px) {
    .featured-blog-card {
        flex-direction: column;
    }


    .featured-blog-img-wrapper {
        min-height: 250px;
    }


}
/* Sub Grid (Cards below Featured) */
.sub-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


@media (max-width: 768px) {
    .sub-blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }


}
/* Standard Blog Card (for sub grid) */
.blog-card-standard {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}


.blog-card-standard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}


.blog-card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


.blog-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* Sidebar */
.blog-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.sidebar-widget {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 1.5rem;
    border-radius: 24px;
    position: sticky;
    top: 100px;
    overflow: hidden;
}


.widget-title-wrapper {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
}


.widget-tab {
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding-bottom: 10px;
    margin-bottom: -12px;
    /* Pull down to overlap border */
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}


.widget-tab.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}


.trending-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.trending-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.trending-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    transition: color 0.2s;
}


.trending-title:hover {
    color: var(--primary-color);
}


.trending-meta {
    font-size: 0.85rem;
    color: var(--text-light);
}


.trending-item:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}


.read-more-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}


.read-more-link:hover {
    text-decoration: underline;
}


/* Curved Highlight for Blog Cards */
/* Curved Highlight for Blog Cards */
.featured-blog-card {
    position: relative;
    border-top: none;
    /* Remove default top border if any */
}




.ad-desc {
    font-size: 1.05rem;
    color: var(--text-light);
    margin: 0;
    max-width: 600px;
    line-height: 1.6;
}


[data-theme="dark"] .ad-desc {
    color: rgba(255, 255, 255, 0.85);
}


.ad-highlight {
    color: #FFFFFF;
}


/* =========================================
   Partners Marquee Styling
   ========================================= */
.partners-section {
    padding: 3rem 0;
    background: var(--bg-light);
    overflow: hidden;
}


.partners-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    font-weight: 600;
}


.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


.partner-marquee-content {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scroll-partners 20s linear infinite;
    /* Adjusted speed */
}


.partner-marquee-content:hover {
    animation-play-state: paused;
}





/* Partner Logo Item (Text + Icon style) */
.partner-logo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    opacity: 0.7;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
}


.partner-logo-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
}


.partner-logo-item:hover {
    opacity: 1;
    transform: scale(1.05);
    color: var(--primary-color);
}


[data-theme="dark"] .partner-logo-item {
    color: rgba(255, 255, 255, 0.6);
}


[data-theme="dark"] .partner-logo-item i {
    color: #FFFFFF;
    /* Gold icons in dark mode */
}


[data-theme="dark"] .partner-logo-item:hover {
    color: white;
}



/* =========================================
   Partners / Mitra Dakwah Styles
   ========================================= */
.partners-section {
    padding: 3rem 0;
    margin-bottom: 2rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    /* Hide overflow */
}


[data-theme="dark"] .partners-section {
    background: #000000;
    /* Dark BG */
    border-color: rgba(255, 255, 255, 0.05);
}


.partners-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.marquee-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Mask/Gradient for fade effect on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


.marquee-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    /* Spacing between logos */
    width: max-content;
    /* Allow content to dictate width */
    /* Animation: Move left by 50% (since we duplicate content) */
    animation: scroll 30s linear infinite;
}


/* Pause on hover if desired */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}


.partner-logo {
    height: 50px;
    /* Consistent height */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    /* Grayscale by default */
    transition: filter 0.3s;
}


.partner-logo:hover {
    filter: grayscale(0%) opacity(1);
    /* Color on hover */
}


[data-theme="dark"] .partner-logo {
    filter: grayscale(100%) brightness(0) invert(1) opacity(0.5);
    /* White silhouette in Dark Mode */
}


[data-theme="dark"] .partner-logo:hover {
    filter: grayscale(0%) brightness(1) invert(0) opacity(1);
    /* Restore color on hover */
}



@keyframes scroll {
    0% {
        transform: translateX(0);
        /* Start fully visible (centered in flow) */
    }


    100% {
        transform: translateX(-50%);
        /* Move half way (the length of one full set) */
    }


}
/* =========================================
   Mitra Dakwah Redesign Styles
   ========================================= */
.partners-section {
    padding: 3rem 0;
    background: var(--bg-light);
    overflow: hidden;
    /* Ensure no scrollbar */
}


[data-theme="dark"] .partners-section {
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.partners-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}


.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Masking for fade effect on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


.marquee-track {
    display: flex;
    gap: 2rem;
    /* Spacing between logos */
    width: max-content;
    /* Animation: 10s as requested */
    animation: scroll-partners 10s linear infinite;
}


.marquee-track:hover {
    animation-play-state: paused;
    /* Optional usability touch */
}


/* Logos: Larger size (80px), clean look */
.partner-logo {
    height: 80px;
    /* "Lebih besar sedikit" */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}


.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}


[data-theme="dark"] .partner-logo {
    filter: grayscale(100%) brightness(1.2);
    /* Make slightly brighter in dark mode */
}


[data-theme="dark"] .partner-logo:hover {
    filter: grayscale(0%) brightness(1.1);
}


/* Specific styling for jpg logos (Hidayatullah) to remove white box if needed */
/* Assuming mix-blend-mode multiply works on light bg, but dark mode needs care. */
/* For now, just border-radius for neatness */
.partner-logo {
    border-radius: 8px;
}



@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }


    100% {
        transform: translateX(-50%);
        /* Scroll exactly half (one full set) */
    }


}
/* =========================================
   Mitra Dakwah Slider Styles
   ========================================= */
.partners-section {
    padding: 3rem 0;
    background: var(--bg-light);
    /* Or white depending on theme */
    overflow: hidden;
    /* Hide scrollbar */
}


.partners-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    position: relative;
    /* Mask fade effect on edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


.mitra-track {
    display: flex;
    gap: 4rem;
    /* Spacing between logos */
    width: max-content;
    /* Animation: Continuous scroll */
    animation: scroll 10s linear infinite;
}


.mitra-logo {
    height: 80px;
    /* Increased size as requested */
    width: auto;
    object-fit: contain;
    filter: grayscale(0%);
    /* Full color as requested */
    transition: transform 0.3s ease;
    flex-shrink: 0;
}


.mitra-logo:hover {
    transform: scale(1.1);
}


/* Scroll Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }


    100% {
        /* Move by 50% if we duplicate the content once. 
           If content is [A B C d e] [A B C d e], moving 50% resets to start of second set which looks same as first set start. */
        transform: translateX(-50%);
    }


}
/* Pause on hover optional */
.partners-container:hover .mitra-track {
    animation-play-state: paused;
}


/* Dark Mode Support */
[data-theme="dark"] .partners-section {
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


[data-theme="dark"] .mitra-logo {
    /* If some logos are dark, might need brightness filter. 
       Usually Ormas logos are colorful enough. */
    filter: brightness(1.2);
}


/* =========================================
   Mitra Dakwah Slider
   ========================================= */
.partners-section {
    padding: 4rem 0;
    margin-bottom: 2rem;
    overflow: hidden;
    background: var(--bg-light);
    /* Optional background separation */
}


/* Container to hide overflow */
.scrolling-partners {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}


/* The moving track */
.partner-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Ensure width fits all items */
    gap: 4rem;
    /* Spacing between logos */
    animation: scrollPartners 10s linear infinite;
    /* 10s continuous loop */
}


/* Individual Logo Items */
.partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.partner-item img {
    height: 90px;
    /* Slightly larger as requested */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    /* Optional: clean look */
    opacity: 0.7;
    transition: all 0.3s ease;
}


.partner-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}


/* Keep full color in Dark Mode or if requested */
[data-theme="dark"] .partner-item img {
    filter: grayscale(0%);
    /* Logos might look better in color on dark */
    opacity: 0.9;
    background: white;
    /* Some logos (NU, Persis) might need white bg if transparent */
    padding: 5px;
    border-radius: 8px;
}


/* If logos are JPG with white box, borderRadius helps. If PNG transparent, BG helps visibility. */

/* Keyframes for sliding left */
@keyframes scrollPartners {
    0% {
        transform: translateX(0);
    }


    100% {
        /* Move by half the total width (since we duplicated the set) */
        /* Calculating exact percentage is tricky without JS or known width. 
           With 2 indentical sets, we translate -50% of the track width? 
           No, -50% of the track moves exactly one full set length if sets are equal. 
        */
        transform: translateX(-50%);
    }


}
/* Pause on hover (Optional, user didn't ask but good UX) */
.partner-track:hover {
    animation-play-state: paused;
}


/* =========================================
   Partner / Mitra Dakwah Styles
   ========================================= */

.partners-section {
    padding: 4rem 0;
    background: var(--bg-light);
    overflow: hidden;
    /* Ensure no scrollbars */
}


/* Dark mode override for background if needed */
[data-theme="dark"] .partners-section {
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


.partners-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}


.marquee-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    /* Spacing between logos */
    width: max-content;
    /* Allow it to grow */
    animation: partner-scroll 10s linear infinite;
    /* 10s continuous slide */
}


/* Pause on hover optional, user didn't ask but good UX */
.marquee-content:hover {
    animation-play-state: paused;
}


.partner-logo {
    height: 80px;
    /* Increased size as requested (was likely smaller) */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
    cursor: pointer;
}


/* Dark mode logo adjustment */
[data-theme="dark"] .partner-logo {
    filter: grayscale(100%) brightness(1.5) opacity(0.7);
}



.partner-logo:hover {
    filter: grayscale(0%) opacity(1) brightness(1);
    transform: scale(1.1);
}


@keyframes partner-scroll {
    0% {
        transform: translateX(0);
    }


    100% {
        transform: translateX(-50%);
        /* Slide half width (assuming 2 sets of logos) */
    }


}
/* =========================================
   Kitab Page Styles
   ========================================= */

/* Filter Section */
.kitab-filter-section {
    background: var(--bg-light);
    padding: 3rem 0 1rem;
    text-align: center;
}


.kitab-filter-wrapper {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}


.filter-chip {
    padding: 0.5rem 1.2rem;
    border-radius: 99px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}


.filter-chip.active,
.filter-chip:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}


[data-theme="dark"] .filter-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}


[data-theme="dark"] .filter-chip.active {
    background: #FFFFFF;
    /* Gold in dark */
    color: var(--bg-dark);
}



/* Kitab Grid */
.kitab-section {
    padding: 3rem 0 6rem;
}


.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2.5rem;
}


/* 3D Book Card */
.book-card {
    background: var(--bg-white);
    /* White card background */
    border-radius: 20px;
    /* Melengkung border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle border */
    perspective: 1000px;
    /* For 3D effect */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    /* More padding for card feel */
    transition: transform 0.3s;
}


[data-theme="dark"] .book-card {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.1);
}


.book-card:hover {
    transform: translateY(-5px);
}


.book-cover {
    width: 160px;
    height: 240px;
    position: relative;
    border-radius: 4px 12px 12px 4px;
    /* Spine look */
    box-shadow:
        5px 5px 15px rgba(0, 0, 0, 0.15),
        inset 5px 0 10px rgba(0, 0, 0, 0.1);
    /* Inner spine shadow */
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}


/* Spine effect */
.book-cover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    border-radius: 4px 0 0 4px;
}


.book-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}


.book-author {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.2rem;
}


.book-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}


.btn-book-download {
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    /* Fully rounded/melengkung */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    background: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


.btn-book-download:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}


.btn-book-read {
    background: var(--primary-color);
    color: var(--bg-white);
}


.btn-book-read:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Subtle gloss overlay */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background-color: var(--primary-dark);
    opacity: 0.9;
}


[data-theme="dark"] .book-title {
    color: white;
}


[data-theme="dark"] .btn-book-read {
    background: #FFFFFF;
    color: var(--bg-dark);
}


/* =========================================
   Kitab Dashboard Layout (Remake)
   ========================================= */

.kitab-dashboard-section {
    padding: 3rem 0 6rem;
    background: var(--bg-light);
    /* Dashboard background */
}


.kitab-dashboard {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}


/* Sidebar Styles */
.kitab-sidebar {
    background: transparent;
    position: sticky;
    top: 100px;
}


.sidebar-group {
    margin-bottom: 2rem;
}


.sidebar-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 1rem;
    font-weight: 600;
}


.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    color: var(--text-dark);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}


.sidebar-link i {
    width: 20px;
    color: var(--text-light);
}


.sidebar-link:hover,
.sidebar-link.active {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}


.sidebar-link.active i {
    color: var(--primary-color);
}


/* Main Content Area */
.kitab-content {
    min-height: 100vh;
}

.kitab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}


.kitab-content-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}


.kitab-search-wrapper {
    position: relative;
    width: 300px;
}


.kitab-search-wrapper input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    border-radius: 99px;
    border: 1px solid transparent;
    background: white;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
}


.kitab-search-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}


.kitab-search-wrapper input:focus {
    outline: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


/* Horizontal Book Grid */
.book-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns */
    gap: 2rem;
}


/* Horizontal Book Card */
.book-card-horizontal {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start; /* Changed from center to align top */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}


.book-card-horizontal:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(107, 45, 62, 0.08);
    border-color: rgba(107, 45, 62, 0.2);
}


.horizontal-cover {
    width: 110px; /* Sedikit dirampingkan agar lebih proporsional */
    aspect-ratio: 2 / 3;
    flex-shrink: 0;
    border-radius: 3px 8px 8px 3px;
    background-size: cover;
    background-position: center;
    box-shadow: 
        inset 4px 0 8px rgba(0,0,0,0.08), /* Spine inner shadow */
        inset 1px 0 1px rgba(255,255,255,0.5),
        5px 5px 15px rgba(0, 0, 0, 0.1); /* Drop shadow yang lebih realistis */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-left: 2px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}


.book-card-horizontal:hover .horizontal-cover {
    transform: perspective(500px) rotateY(-5deg) scale(1.02);
}


/* Judul fallback jika tidak ada gambar */
.cover-fallback-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.horizontal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.horizontal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 0.3rem;
}


.horizontal-author {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}


.horizontal-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.horizontal-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.btn-read-more {
    background: transparent;
    color: var(--primary-color);
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--primary-color);
}


.btn-read-more:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(107, 45, 62, 0.2);
}


.action-icon {
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s;
}


.action-icon:hover {
    color: var(--primary-color);
}

/* Tombol aksi kartu kitab (unduh, favorit, bagikan): target klik bulat 44px */
.kitab-action-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(107, 45, 62, 0.35);
    background: transparent;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    flex: 0 0 auto;
}

.kitab-action-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.kitab-fav-btn.is-active {
    border-color: #ef4444;
}

.kitab-fav-btn.is-active i {
    color: #ef4444;
}

.kitab-fav-btn.is-active:hover {
    background: #ef4444;
    border-color: #ef4444;
}

.kitab-fav-btn.is-active:hover i {
    color: #fff;
}

html[data-theme="dark"] .kitab-action-btn {
    border-color: rgba(212, 175, 55, 0.45);
    color: #D4AF37;
}

html[data-theme="dark"] .kitab-action-btn:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #4A1D2B;
}

/* Menu pilihan media sosial untuk tombol bagikan kartu kitab */
.kitab-share-menu {
    position: fixed;
    z-index: 1200;
    width: 220px;
    background: var(--bg-white, #FFFFFF);
    border: 1px solid rgba(107, 45, 62, 0.18);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(74, 29, 43, 0.22);
    padding: 6px;
    display: none;
}

.kitab-share-menu.open {
    display: block;
}

.kitab-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
}

.kitab-share-item:hover {
    background: rgba(107, 45, 62, 0.07);
}

.kitab-share-item i {
    width: 20px;
    text-align: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

html[data-theme="dark"] .kitab-share-menu {
    background: #2A1420;
    border-color: rgba(212, 175, 55, 0.35);
}

html[data-theme="dark"] .kitab-share-item {
    color: #F7EEDD;
}

html[data-theme="dark"] .kitab-share-item:hover {
    background: rgba(212, 175, 55, 0.12);
}

/* ===== Detektor Hadits Shahih (beranda) ===== */
.hadith-detector-section {
    background: var(--bg-main);
}

.hd-panel {
    background: linear-gradient(135deg, #6B2D3E 0%, #4A1D2B 100%);
    border-radius: 22px;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    box-shadow: 0 18px 44px rgba(74, 29, 43, 0.25);
    color: #F7EEDD;
}

.hd-head {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.hd-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #D4AF37;
    color: #4A1D2B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
}

.hd-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 0.3rem;
}

.hd-title {
    color: #FFFFFF;
    font-size: clamp(1.45rem, 3.4vw, 1.9rem);
    margin: 0 0 0.35rem;
}

.hd-sub {
    color: rgba(247, 238, 221, 0.85);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

.hd-form {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.hd-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: none;
    border-radius: 12px;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text-dark);
    background: #FFFFFF;
}

.hd-btn {
    flex: 0 0 auto;
    min-height: 52px;
    border: none;
    border-radius: 12px;
    padding: 0 1.4rem;
    background: #D4AF37;
    color: #4A1D2B;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.hd-btn:hover {
    background: #E5C558;
    transform: translateY(-1px);
}

.hd-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: rgba(247, 238, 221, 0.75);
}

.hd-chip {
    min-height: 36px;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: transparent;
    color: #F7EEDD;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.hd-chip:hover {
    background: rgba(212, 175, 55, 0.16);
    border-color: #D4AF37;
}

.hd-results {
    margin-top: 1.3rem;
}

.hd-found-label,
.hd-empty {
    color: rgba(247, 238, 221, 0.9);
    font-size: 0.92rem;
    margin: 0 0 0.7rem;
}

.hd-card {
    background: #FDF8F4;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.7rem;
    color: var(--text-dark);
}

.hd-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.hd-type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B2D3E;
}

.hd-grade {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7A5B12;
    background: rgba(212, 175, 55, 0.22);
    border: 1px solid rgba(212, 175, 55, 0.6);
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
}

.hd-card-title {
    font-size: 1.02rem;
    margin: 0 0 0.35rem;
}

.hd-card-title a {
    color: var(--text-dark);
    text-decoration: none;
}

.hd-card-title a:hover {
    color: #6B2D3E;
    text-decoration: underline;
}

.hd-quote {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light, #5b4a52);
    margin: 0;
}

.hd-external {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
}

.hd-external-label {
    font-size: 0.9rem;
    color: rgba(247, 238, 221, 0.85);
}

.hd-ext-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1.5px solid #D4AF37;
    color: #D4AF37;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.hd-ext-btn:hover {
    background: #D4AF37;
    color: #4A1D2B;
}

.hd-note {
    margin: 1.1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(247, 238, 221, 0.6);
}

html[data-theme="dark"] .hd-panel {
    background: linear-gradient(135deg, #4A1D2B 0%, #33111D 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
}

@media (max-width: 640px) {
    .hd-head {
        flex-direction: column;
        gap: 0.8rem;
    }

    .hd-form {
        flex-direction: column;
    }

    .hd-btn {
        width: 100%;
    }
}

/* Pilihan mode pencarian hero: Pencarian Situs | Detektor Hadits.
   Detektor pindah dari section tersendiri ke kotak pencarian hero (perintah pengguna 13 Nov 2026). */
.search-mode-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    margin-bottom: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.sm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.45rem 1.05rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-light);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sm-tab:hover {
    color: var(--text-dark);
}

.sm-tab.is-active {
    background: #6B2D3E;
    color: #F7EEDD;
}

html[data-theme="dark"] .sm-tab.is-active {
    background: #4A1D2B;
    color: #D4AF37;
}

.hero-detector {
    margin-top: 1.4rem;
    text-align: left;
}

.hero-detector .hd-panel {
    max-width: none;
    margin: 0;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
}

/* Versi ringkas di hero (perintah pengguna 13 Nov 2026: "buat yang simple"):
   tanpa lencana, judul kecil, ikon kecil, tanpa catatan kaki panjang. */
.hero-detector .hd-head {
    gap: 0.75rem;
    align-items: center;
}

.hero-detector .hd-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
}

.hero-detector .hd-title {
    font-size: 1.15rem;
    margin: 0 0 0.15rem;
}

.hero-detector .hd-sub {
    font-size: 0.85rem;
    line-height: 1.5;
}

.hero-detector .hd-chips {
    margin-top: 0.9rem;
}


/* Responsive */
@media (max-width: 900px) {
    .kitab-dashboard {
        grid-template-columns: 1fr;
    }


    .kitab-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
        display: none;
        /* Hide sidebar on mobile for now, ideally toggle */
    }


    .book-grid-horizontal {
        grid-template-columns: 1fr;
    }


}
/* Dark Mode Overrides */
[data-theme="dark"] .kitab-dashboard-section {
    background: var(--bg-dark);
}


[data-theme="dark"] .book-card-horizontal,
[data-theme="dark"] .kitab-search-wrapper input {
    background: var(--primary-color);
    border: 1px solid rgba(255, 255, 255, 0.05);
}


[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
    background: var(--primary-color);
    color: #FFFFFF;
}


[data-theme="dark"] .sidebar-link.active i {
    color: #FFFFFF;
}


[data-theme="dark"] .horizontal-title {
    color: white;
}


[data-theme="dark"] .horizontal-author {
    color: #FFFFFF;
}


[data-theme="dark"] .btn-read-more {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}


[data-theme="dark"] .btn-read-more:hover {
    background: var(--primary-color);
    color: var(--bg-dark);
}


/* =========================================
   About Section Redesign (Quadrant Gallery)
   ========================================= */

.about-redesign-section {
    padding: 80px 0;
    background: var(--bg-white);
    overflow: hidden;
}


.about-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}


/* --- Left: Quadrant Gallery --- */
.about-gallery-wrapper {
    position: relative;
    padding: 2rem;
    /* Space for dashed border */
    max-width: 550px;
    margin: 0 auto;
}


.gallery-dashed-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed #E0E7FF;
    /* Light indigo dashed border */
    border-radius: 60px;
    /* Large rounded corners from reference */
    z-index: 0;
    animation: spin-slow 60s linear infinite;
}


@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }


    to {
        transform: rotate(360deg);
    }


}
.gallery-quadrant {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    border-radius: 50px;
    /* Matching the reference curve */
    overflow: hidden;
    aspect-ratio: 1 / 1;
}


.quadrant-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}


.quadrant-item:hover {
    transform: scale(1.05);
}


/* Individual corner styling to match reference image shape */
.quadrant-item:nth-child(1) {
    border-top-left-radius: 50px;
    background: #F472B6;
}


/* Pink */
.quadrant-item:nth-child(2) {
    border-top-right-radius: 50px;
    background: #A78BFA;
}


/* Purple */
.quadrant-item:nth-child(3) {
    border-bottom-left-radius: 50px;
    background: #A78BFA;
}


/* Purple */
.quadrant-item:nth-child(4) {
    border-bottom-right-radius: 50px;
    background: #F472B6;
}


/* Pink */

/* --- Right: Benefits Content --- */
.about-content-wrapper {
    padding-left: 1rem;
}


.about-heading {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 2.5rem;
    line-height: 1.2;
    color: var(--text-dark);
}


.about-heading span {
    color: #A78BFA;
    /* Purple accent from image */
}


.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.benefit-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}


.benefit-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}


/* Icon Colors */
.icon-degree {
    background: #A78BFA;
}


/* Purple */
.icon-short {
    background: #F472B6;
}


/* Pink */
.icon-expert {
    background: #A78BFA;
}


/* Purple */
.icon-video {
    background: #F472B6;
}


/* Pink */

.benefit-text h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}


.benefit-text p {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}


/* Responsive */
@media (max-width: 991px) {
    .about-redesign-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }


    .about-gallery-wrapper {
        margin: 0 auto;
        padding: 1.5rem;
    }


    .about-heading {
        font-size: 2rem;
        text-align: center;
    }


}
/* Dark Mode Overrides */
[data-theme="dark"] .about-redesign-section {
    background: var(--bg-dark);
}


[data-theme="dark"] .about-heading {
    color: var(--text-dark);
    /* Which is white in dark mode */
}


[data-theme="dark"] .benefit-text h4 {
    color: white;
}


[data-theme="dark"] .benefit-text p {
    color: var(--text-light);
    /* Light gray */
}


[data-theme="dark"] .gallery-dashed-border {
    border-color: rgba(255, 255, 255, 0.1);
}


/* =========================================
   About Section Redesign (Grid + Benefits)
   ========================================= */

.about-redesign-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 2rem 0;
}


/* Left Column: Visual Grid */
.about-grid-visual {
    position: relative;
    padding: 1.5rem;
    border: 2px dashed #e9d5ff;
    /* Light purple dash */
    border-radius: 60px;
    /* Super rounded container */
    max-width: 500px;
    margin: 0 auto;
}


.image-quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    position: relative;
    z-index: 1;
}


.quadrant-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.3s ease;
}


/* Individual Quadrant Shapes */
.q-1 {
    border-radius: 50px 0 50px 50px;
    background-color: #fce7f3;
    /* Pink-ish bg placeholder */
}


.q-2 {
    border-radius: 0 50px 50px 50px;
    background-color: #c084fc;
    /* Purple-ish bg placeholder */
}


.q-3 {
    border-radius: 50px 50px 50px 0;
    background-color: #d8b4fe;
    /* Light purple */
}


.q-4 {
    border-radius: 50px 50px 0 50px;
    background-color: #f9a8d4;
    /* Pink */
}


.quadrant-img:hover {
    transform: scale(1.02);
}


/* Right Column: Content */
.about-redesign-content h2 {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-dark);
}


.about-redesign-content h2 .highlight-text {
    color: var(--primary-dark);
    /* Or a specific purple if desired, sticking to theme for now */
}


.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}


.benefit-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    background: transparent;
    border: 2px solid var(--primary-color);
    box-shadow: none;
}


/* Specific colors for icons based on image inspiration (Purple/Pink theme) */
.icon-purple {
    background: #a855f7;
}


.icon-pink {
    background: #f472b6;
}


.icon-blue {
    background: #60a5fa;
}


.icon-orange {
    background: #fb923c;
}


.benefit-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text-dark);
}


.benefit-text p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}


/* Dark Mode Overrides */
[data-theme="dark"] .about-grid-visual {
    border-color: rgba(255, 255, 255, 0.1);
}


[data-theme="dark"] .about-redesign-content h2 {
    color: white;
}


[data-theme="dark"] .highlight-text {
    color: #FFFFFF;
}


[data-theme="dark"] .benefit-text h4 {
    color: var(--bg-light);
}


[data-theme="dark"] .benefit-text p {
    color: var(--text-light);
}


/* Responsive */
@media (max-width: 900px) {
    .about-redesign-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .about-grid-visual {
        max-width: 400px;
    }


}
/* =========================================
   Redesigned About Section (Mosaic + Benefits)
   ========================================= */

.about-redesign-section {
    padding: 80px 0;
    background: white;
    /* Clean white bg as per ref */
    overflow: hidden;
}


.about-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}


/* --- Left Side: Mosaic Image Grid --- */
.mosaic-wrapper {
    position: relative;
    padding: 20px;
    border: 2px dashed var(--border-color);
    /* Dashed border */
    border-radius: 50px;
    background: transparent;
}


.mosaic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 20px;
}


.mosaic-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}


.mosaic-item:hover {
    transform: scale(1.02);
}


/* Custom Border Radius for "Flower" shape */
.mosaic-ite-1 {
    border-top-left-radius: 100px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #F87171;
    /* Fallback color / Overlay tint */
}


.mosaic-ite-2 {
    border-top-left-radius: 20px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #A78BFA;
}


.mosaic-ite-3 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 20px;
    background-color: #FFFFFF;
}


.mosaic-ite-4 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 100px;
    background-color: #34D399;
}


/* --- Right Side: Content --- */
.about-content-wrapper {
    padding-left: 2rem;
}


.about-badge {
    color: #EC4899;
    /* Pinkish text */
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}


.about-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 2.5rem;
    line-height: 1.2;
}


.about-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.benefit-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}


.benefit-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}


/* Specific Icon Colors */
.icon-bg-purple {
    background-color: #A78BFA;
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.3);
}


.icon-bg-pink {
    background-color: #F472B6;
    box-shadow: 0 10px 20px rgba(244, 114, 182, 0.3);
}


.icon-bg-blue {
    background-color: #60A5FA;
    box-shadow: 0 10px 20px rgba(96, 165, 250, 0.3);
}


.icon-bg-red {
    background-color: #F87171;
    box-shadow: 0 10px 20px rgba(248, 113, 113, 0.3);
}


.benefit-text h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}


.benefit-text p {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
}


/* Responsive */
@media (max-width: 992px) {
    .about-redesign-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .about-content-wrapper {
        padding-left: 0;
    }


    .mosaic-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }


}
@media (max-width: 576px) {
    .mosaic-grid {
        grid-template-rows: 150px 150px;
    }


    .about-title {
        font-size: 2rem;
    }


}
/* Dark Mode Overrides */
[data-theme="dark"] .about-redesign-section {
    background: var(--bg-dark);
}


[data-theme="dark"] .mosaic-wrapper {
    border-color: rgba(255, 255, 255, 0.1);
}


[data-theme="dark"] .benefit-text h4 {
    color: white;
}


/* =========================================
   About Redesign (Collage + Benefits)
   ========================================= */

.about-redesign-section {
    padding: 100px 0;
    background: var(--bg-white);
    overflow: hidden;
}


.about-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    /* Ensures vertical center alignment */
    justify-items: center;
    /* Horizontally center items in their cells */
}


/* --- Left: Image Collage --- */
.collage-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* Slightly bigger (was 600px) */
    margin: 0 auto;
}


/* Decorative Dashed Border Wrapper */
/* Decorative Dashed Border Wrapper */
.collage-dashed-border {
    padding: 10px;
    /* Tight padding */
    border: 3px dashed var(--primary-color);
    border-radius: 130px;
    /* 120px (image) + 10px (pad) */
    background: white;
}


/* The Masked Grid */
.collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* Transparent BG to let gap show through (or white if container is white) */
    background: white;
    /* White in Light Mode, Gold in Dark Mode */
    border-radius: 120px;
    /* Match Image Curve */
    overflow: visible;
    height: auto;
    /* Allow auto height based on width */
    aspect-ratio: 1 / 1;
    /* Force perfect square */
    gap: 0;
    /* REMOVED GAP: Images touching "saling menempel" */
}


.collage-item {
    position: relative;
    overflow: hidden;
}


.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.collage-item:hover img {
    transform: scale(1.1);
}


/* Quadrant Specific Border Radius for Star Shape
   Logic: Outer corner = match star (120px). Inner corner = Star (120px). Other corners = 0 (Touch).
*/

/* Top Left */
.c-item-1 {
    background: #fff7ed;
    /* Light Warm/Orange Tint */
    border-radius: 0;
    border-top-left-radius: 120px;
    /* Match Star Curve */
    border-bottom-right-radius: 120px;
}


/* Top Right */
.c-item-2 {
    background: #fef3c7;
    /* Light Gold/Amber */
    border-radius: 0;
    border-top-right-radius: 120px;
    /* Match Star Curve */
    border-bottom-left-radius: 120px;
}


/* Bottom Left */
.c-item-3 {
    background: #fef3c7;
    /* Light Gold/Amber */
    border-radius: 0;
    border-bottom-left-radius: 120px;
    /* Match Star Curve */
    border-top-right-radius: 120px;
}


/* Bottom Right */
.c-item-4 {
    background: #fff7ed;
    /* Light Warm/Orange Tint */
    border-radius: 0;
    border-bottom-right-radius: 120px;
    /* Match Star Curve */
    border-top-left-radius: 120px;
}


/* Dark Mode Overrides for Collage */
[data-theme="dark"] .collage-grid {
    background: #FFFFFF;
}


[data-theme="dark"] .collage-dashed-border {
    background: transparent;
    border-color: #FFFFFF;
    /* Gold/Yellow for Dark Mode */
}


[data-theme="dark"] .c-item-1,
[data-theme="dark"] .c-item-4 {
    background: #000000;
    /* Opaque dark to mask the Yellow Star */
}


[data-theme="dark"] .c-item-2,
[data-theme="dark"] .c-item-3 {
    background: var(--primary-surface);
    /* Slightly lighter opaque dark */
}


/* --- Right: Content --- */
.about-redesign-content {
    padding-left: 2rem;
}


.about-redesign-title {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    /* Reduced from 3rem for tighter centering */
    color: var(--text-dark);
}


.about-redesign-title .highlight {
    color: var(--primary-color);
    /* Theme Color */
    position: relative;
    display: inline-block;
}


.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.benefit-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}


/* Themed Icons (Gold/Dark Palette) */
/* Themed Icons (Premium Syar'i Style) */
.benefit-icon-wrapper {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    /* Gold Icon */
    transition: all 0.4s ease;

    /* Default: Clean Outline, Transparent/White BG */
    background: transparent;
    border: 2px solid var(--primary-color);
    box-shadow: none;
}


.benefit-card:hover .benefit-icon-wrapper {
    /* Hover: Fill with Gold, White Icon, Subtle Lift */
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-5px);
    /* Gentle Lift, No Rotation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* Remove old color classes completely */
.icon-purple,
.icon-pink,
.icon-blue,
.icon-red {
    background: white;
    border: 2px solid var(--primary-color);
}


.benefit-details h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    /* Gold Title matching theme */
}


.benefit-details p {
    color: var(--text-light);
    /* Ensure using theme variable */
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 0;
}


/* Responsive */
@media (max-width: 992px) {
    .about-redesign-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }


    .collage-container {
        margin-bottom: 2rem;
    }


    .about-redesign-content {
        padding-left: 0;
    }


    .benefit-card {
        text-align: left;
        /* Keep list left-aligned even if container is centered */
        max-width: 600px;
        margin: 0 auto;
    }


}
/* =========================================
   About Us Page Styles (Migrated & Glassified)
   ========================================= */


.page-title {
    font-size: 1.85rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}


.about-content {
    padding: 60px 0;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}


.about-content p {
    margin-bottom: 1.5rem;
}


.mission-vision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}


.mv-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2rem;
    border-radius: var(--radius-lg);
    /* Increased radius */
    transition: transform 0.3s ease;
}


.mv-card:hover {
    transform: translateY(-5px);
}


.mv-card h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}


/* Values Grid Glass Style */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}


.value-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform 0.3s ease;
}


.value-card:hover {
    transform: translateY(-10px);
}


.value-card .icon-box {
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.5rem;
}


@media (max-width: 768px) {
    .mission-vision {
        grid-template-columns: 1fr;
    }


    .values-grid {
        grid-template-columns: 1fr;
    }


}
/* =========================================
   Redesign: Layout Enhancements (Bento & Glass)
   ========================================= */

/* --- 1. Hero: Quadrant Gallery --- */
.quadrant-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    aspect-ratio: 1/1;
    position: relative;
}


.q-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    overflow: hidden;
    /* Ensure images clip to the radius */
    transition: transform 0.4s ease;
}


/* Abstract Organic Shapes */
.q-1 {
    border-radius: 50% 1rem 1rem 1rem;
    background: var(--primary-color);
    opacity: 0.1;
}


.q-2 {
    border-radius: 1rem 50% 1rem 1rem;
}


.q-3 {
    border-radius: 1rem 1rem 1rem 50%;
}


.q-4 {
    border-radius: 1rem 1rem 50% 1rem;
    background: var(--secondary-color);
    opacity: 0.2;
}


.q-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.q-item:hover .q-img {
    transform: scale(1.1);
}


.q-item:hover {
    transform: scale(0.98);
}


/* --- 2. Values: Bento Grid --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    /* Allow flexible rows */
    gap: 1.5rem;
    margin-top: 3rem;
}


.bento-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2.5rem;
    border-radius: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


/* Bento Variants */
.bento-large {
    text-align: center;
    align-items: center;
}


.bento-tall {
    grid-row: span 2;
}


.bento-normal {
    grid-column: span 1;
}


/* Mobile Fix for Bento */
@media (max-width: 900px) {
    .bento-grid {
        display: flex;
        /* Stack on mobile */
        flex-direction: column;
    }


}
/* --- 3. Community: Floating Overlap --- */
.overlap-section {
    position: relative;
    padding: 4rem 0;
}


.overlap-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Image takes slightly more */
    align-items: center;
    position: relative;
}


.overlap-image {
    width: 100%;
    border-radius: 2rem;
    box-shadow: var(--shadow-xl);
    z-index: 1;
}


.overlap-content {
    background: rgba(255, 255, 255, 0.85);
    /* Stronger opacity for readability */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 3rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

    /* Overlap Magic */
    margin-left: -5rem;
    /* Pull Left */
    z-index: 2;
    /* On Top */
    position: relative;
}


[data-theme="dark"] .overlap-content {
    background: rgba(17, 24, 39, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}


@media (max-width: 900px) {
    .overlap-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .overlap-content {
        margin-left: 0;
        margin-top: -3rem;
        /* Small overlap vertical on mobile */
    }


}
/* Decor Elements */
.decor-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}


/* =========================================
   Content Refinement: Glass Pills & Typography
   ========================================= */

/* Glass Pills List */
.glass-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0;
    margin-top: 1.5rem;
    list-style: none;
}


.glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--primary-rgb), 0.08);
    /* Very subtle tint */
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}


.glass-pill i {
    color: var(--primary-color);
    font-size: 1rem;
    /* Increased from 0.8rem */
    width: 24px;
    /* Fixed width for alignment */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}


.glass-pill:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}


.glass-pill:hover i {
    color: white;
}


/* Bento Typography Enhancements */
.bento-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
    /* Solid color matching theme */
    display: inline-block;
}


[data-theme="dark"] .bento-card h3 {
    color: var(--text-light);
}


/* Bento Variants */
.bento-large,
.bento-wide {
    grid-column: span 2;
}


.bento-large {
    text-align: center;
    align-items: center;
}


.bento-wide {
    display: flex;
    flex-direction: row;
    /* Horizontal layout for wide card */
    align-items: center;
    gap: 1.5rem;
    text-align: left;
}


.bento-wide .icon-box {
    margin-bottom: 0;
    /* Reset margin for horizontal layout */
    font-size: 2rem;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}


.bento-quote {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    font-style: italic;
    color: var(--text-dark);
    max-width: 80%;
}


.icon-box-lg {
    font-size: 1.85rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Dark Mode Overrides */
[data-theme="dark"] .glass-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}


[data-theme="dark"] .glass-pill:hover {
    background: var(--primary-color);
    color: var(--bg-white);
}


[data-theme="dark"] .bento-quote {
    color: var(--text-light);
}


/* =========================================
   Refined Community Layout: Side-by-Side
   ========================================= */

.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    /* Spacious gap */
    align-items: center;
}


.community-visual {
    position: relative;
    padding: 1.5rem;
    /* Space for backdrop to show */
}


/* Offset colored backdrop */
.backdrop-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 80%;
    background: linear-gradient(135deg, var(--secondary-color), rgba(var(--primary-rgb), 0.2));
    border-radius: 2rem;
    z-index: 0;
    transform: rotate(-3deg);
    opacity: 0.5;
}


.backdrop-decoration-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 60%;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 50% 2rem 2rem 50%;
    z-index: 0;
}


.community-img-clean {
    position: relative;
    width: 100%;
    border-radius: 2rem;
    box-shadow: var(--shadow-xl);
    z-index: 1;
    transform: rotate(2deg);
    /* Subtle tilt */
    transition: transform 0.4s ease;
}


.community-visual:hover .community-img-clean {
    transform: rotate(0deg) scale(1.02);
}


.community-content-clean {
    padding-right: 1rem;
}


.community-content-clean .section-title {
    margin-bottom: 1.5rem;
}


/* Responsive */
@media (max-width: 900px) {
    .community-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }


    .community-visual {
        max-width: 500px;
        margin: 0 auto;
    }


    .community-content-clean {
        padding-right: 0;
    }


    /* Center the pills on mobile */
    .glass-pill-list {
        justify-content: center;
    }


}
/* Community Specific Grid Alignment */
.glass-pill-list.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Force 2 columns */
    gap: 1rem;
    width: 100%;
    /* Ensure it takes full width to align properly */
}


.glass-pill-list.grid-2-col .glass-pill {
    width: max-content;
    /* Only take needed space */
    min-width: 0;
    /* Prevent overflow */
    justify-content: flex-start;
    /* Align text start */
}


/* Mobile fallback */
@media (max-width: 600px) {
    .glass-pill-list.grid-2-col {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }


}
/* =========================================
   Fatwa Page Redesign (Glassmorphism)
   ========================================= */

/* Layout */
.fatwa-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}


@media (max-width: 900px) {
    .fatwa-layout {
        grid-template-columns: 1fr;
    }


}
/* Search Bar */
.fatwa-search-container {
    margin-bottom: 2rem;
}


.fatwa-search-box {
    position: relative;
    width: 100%;
}


.fatwa-search-box input {
    width: 100%;
    padding: 1.2rem 1.2rem 1.2rem 3.5rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    /* Pillow shape */
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}


.fatwa-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}


.fatwa-search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.1rem;
    transition: color 0.3s;
}


.fatwa-search-box input:focus+.fatwa-search-icon {
    color: var(--primary-color);
}


/* Fatwa List & Cards */
.fatwa-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


.fatwa-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2rem;
    border-radius: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


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


.fatwa-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}


/* Category Badge (Glass Pill Style) */
.fatwa-category {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}


.fatwa-date {
    font-size: 0.85rem;
    color: var(--text-light);
}


.fatwa-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
    margin: 0;
}


.fatwa-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}


.fatwa-title a:hover {
    color: var(--primary-color);
}


.fatwa-excerpt {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Sidebar Widget (Glass) */
.sidebar-widget {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    padding: 2rem;
    border-radius: 1.5rem;
    /* Consistent radius */
    position: sticky;
    top: 120px;
}


.widget-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.2);
    padding-bottom: 0.8rem;
    display: block;
}


.popular-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


[data-theme="dark"] .popular-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}


.popular-item:last-child {
    border-bottom: none;
}


.popular-number {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
    opacity: 0.3;
    line-height: 1;
    min-width: 20px;
}


.popular-content h4 {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}


.popular-content h4 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s;
}


.popular-content h4 a:hover {
    color: var(--primary-color);
}


/* Glass Pill Button (Fatwa) */
.btn-pill-glass {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    width: max-content;
}


.btn-pill-glass:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}


.btn-pill-glass i {
    transition: transform 0.3s ease;
}


.btn-pill-glass:hover i {
    transform: translateX(4px);
}


/* Dark Mode Fix for Kitab Page */
[data-theme="dark"] .book-card-horizontal {
    background: rgba(107, 45, 62, 0.8);
    /* Dark Gray (Gray-800) with high opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Clearer border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Strong shadow for depth */
}


[data-theme="dark"] .horizontal-title {
    color: var(--text-dark-theme-heading, var(--bg-light));
    /* Ensure title is white/bright */
}


[data-theme="dark"] .horizontal-desc {
    color: var(--text-light-theme-body, #D1D5DB);
    /* Ensure desc is readable gray */
}


[data-theme="dark"] .horizontal-author {
    color: var(--primary-color);
    /* Keep primary color or adjust if needed */
}


/* =========================================
   6. Mobile Responsiveness (Comprehensive)
   ========================================= */

@media (max-width: 900px) {

    /* Header Adjustments */
    .header-container {
        padding: 0 1rem;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        background: var(--bg-card);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem 2rem 2rem;
        transform: translateY(-150%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 999;
        display: block;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }

    .nav-menu.active {
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        text-align: left;
    }

    .nav-link {
        font-size: 1.05rem;
        display: block;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        font-size: 1.1rem;
    }

    /* Show auth buttons inside mobile menu via JS injection */
    .header-actions {
        display: none;
    }
    
    /* Mobile Auth Area (injected by JS into nav-menu) */
    .mobile-auth-area {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-color);
    }
    
    .mobile-auth-area .btn {
        width: 100%;
        text-align: center;
        padding: 0.8rem 1.2rem;
        font-size: 1rem;
    }
    
    /* Mobile Profile inside menu */
    .mobile-profile-area {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 1.5rem;
        padding: 1rem;
        background: var(--bg-light);
        border-radius: var(--radius-md);
    }
    
    .mobile-profile-area .profile-avatar-initial {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
    }
    
    .mobile-profile-area .profile-info {
        flex: 1;
    }
    
    .mobile-profile-area .profile-info strong {
        display: block;
        font-size: 0.95rem;
        color: var(--text-dark);
    }
    
    .mobile-profile-area .profile-info span {
        font-size: 0.8rem;
        color: var(--text-light);
    }
    
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0.75rem;
    }
    
    .mobile-nav-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.75rem 0.5rem;
        color: var(--text-dark);
        text-decoration: none;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--border-color);
        transition: background 0.2s;
    }
    
    .mobile-nav-links a:hover {
        background: var(--bg-light);
    }
    
    .mobile-nav-links a i {
        width: 20px;
        text-align: center;
        color: var(--text-light);
    }
    
    .mobile-nav-links a.text-danger {
        color: #ef4444;
    }

    /* Hero Section */
    .hero-container {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 2rem;
        text-align: center;
    }

    .hero-content {
        padding-right: 0;
        margin-top: 2rem;
    }

    .hero-title {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .hero-shape {
        display: none;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.5rem;
    }

    /* Course Cards */
    .scrolling-grid {
        gap: 1rem;
        padding: 0 1rem 2rem 1rem;
    }

    .course-card {
        width: 280px;
        flex: 0 0 280px;
    }

    /* Blog Cards */
    .blog-card {
        min-width: 280px;
    }
    
    /* Blog Layout */
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        order: -1;
    }
    
    /* Featured Blog Carousel */
    .featured-blog-card.featured-slide {
        flex-direction: column;
    }
    
    .featured-blog-img-wrapper {
        min-height: 200px;
    }
    
    .featured-blog-content {
        padding: 1.5rem;
    }
    
    .featured-blog-content .blog-title.is-large,
    .featured-blog-content h2 {
        font-size: 1.3rem !important;
    }

    /* Fatwa Layout */
    .fatwa-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-widget {
        display: none;
    }

    /* Page Header */
    .page-header {
        padding: 100px 0 40px;
    }
    
    .page-header h1 {
        font-size: 1.6rem;
    }

    /* Cards Grid */
    .features-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* CTA Box */
    .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .cta-decoration i {
        display: none;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Search Overlay */
    .search-field-container {
        width: 95%;
        padding: 1.5rem;
    }

    .search-overlay-input {
        font-size: 1.2rem;
    }

    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Course Detail */
    .course-detail-grid {
        grid-template-columns: 1fr;
    }
    
    /* Kitab Layout */
    .kitab-content-layout {
        grid-template-columns: 1fr;
    }
    
    /* Profile Modal */
    .profile-modal-container {
        width: 95%;
        max-width: 100%;
        margin: 1rem;
    }
    
    /* Ad Carousel */
    .ad-carousel-track {
        height: 140px;
    }
}
/* Add a class to body to prevent scrolling when menu is open */
body.menu-open {
    overflow: hidden;
}

/* ==========================================================================
   Course Player Layout (Udemy Style)
   ========================================================================== */
.player-body {
    margin: 0;
    padding: 0;
    overflow-y: hidden; /* Prevent full body scroll, handle scroll in grid */
    height: 100vh;
    display: flex;
    flex-direction: column;
}


.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 60px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    z-index: 10;
}


.player-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


.back-btn {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
}


.back-btn i {
    margin-right: 0.5rem;
}


.player-course-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.1rem;
    border-left: 1px solid var(--border-color);
    padding-left: 1.5rem;
}


.player-header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}


.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}


.progress-bar-bg {
    width: 150px;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}


.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}


.player-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    padding: 2rem;
    flex: 1;
    overflow: hidden; /* Important for scrollable areas inside */
    background: var(--bg-color);
}


[data-theme='dark'] .player-layout {
    background: var(--bg-color);
}


.player-main {
    overflow-y: auto;
    background: transparent;
    display: flex;
    flex-direction: column;
}


.player-video-wrapper {
    width: 100%;
    margin: 0 auto;
    background: #000;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: none;
}


.player-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}


.player-content-tabs {
    flex: 1;
}


.player-sidebar {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    height: 100%;
}


[data-theme='dark'] .player-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}


.player-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}


.player-sidebar-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}


.player-curriculum {
    flex: 1;
    overflow-y: auto;
}


/* Player Curriculum Styles */
.player-module-item {
    border-bottom: 1px solid var(--border-color);
}


.player-module-header {
    padding: 1rem 1.5rem;
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    transition: background 0.2s;
    color: var(--text-dark);
}


.player-module-header:hover {
    background: rgba(0,0,0,0.02);
}


[data-theme='dark'] .player-module-header:hover {
    background: rgba(255,255,255,0.02);
}


.player-module-title {
    font-size: 0.75rem;
    color: var(--text-dark);
}


.player-module-duration {
    font-size: 0.8rem;
    color: var(--text-light);
}


.player-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Hidden by default for accordion, handled by JS */
}


.player-module-item.open .player-lesson-list {
    display: block;
}


.player-lesson-item {
    padding: 1rem 1.5rem 1rem 2.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
    color: var(--text-dark);
}


.player-lesson-item:hover {
    background: var(--bg-color);
}


.player-lesson-item.active {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-color);
    padding-left: calc(2.5rem - 4px);
    font-weight: 600;
    position: relative;
    color: var(--text-dark);
}


/* Pulsing dot indicator for active lesson */
.player-lesson-item.active::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 0 rgba(13, 138, 188, 0.7);
    animation: pulseActive 2s infinite;
}


@keyframes pulseActive {
    0% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(13, 138, 188, 0.7); }

    70% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 6px rgba(13, 138, 188, 0); }

    100% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(13, 138, 188, 0); }


}
[data-theme='dark'] .player-lesson-item.active {
    background: rgba(13, 138, 188, 0.1);
}


/* Custom Scrollbar for Curriculum */



.player-curriculum:hover::-webkit-scrollbar-thumb {
    background-color: var(--text-light);
}


.lesson-checkbox {
    color: var(--border-color);
    font-size: 1.1rem;
    transition: color 0.2s;
    margin-left: 0.5rem; /* Space from pulse dot */
}


.lesson-checkbox.completed {
    color: var(--primary-color); /* Green */
}


.lesson-info {
    flex: 1;
}


.lesson-duration {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}


/* Responsive Player */
@media (max-width: 992px) {
    .player-layout {
        grid-template-columns: 1fr;
        overflow-y: auto; /* Allow full scroll on mobile */
    }

    
    .player-body {
        overflow-y: auto;
        height: auto;
    }

    
    .player-main {
        overflow-y: visible;
    }

    
    .player-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-color);
        /* Height auto on mobile so it flows below tabs */
    }

    
    .player-course-title {
        display: none; /* Hide on mobile to save space */
    }

    
    .progress-text {
        display: none;
    }


}
/* =========================================
   Toast Notifications
   ========================================= */
.toast-container {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    pointer-events: none;
}


.toast-notification {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 10px 20px 10px 10px;
    min-width: 320px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: translateY(50px) scale(0.9);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}


.toast-notification.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}


.toast-icon {
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}


.toast-success {
    border-left: none; /* Override old style */
}


.toast-success .toast-icon {
    background: rgba(107, 45, 62, 0.2);
    color: var(--primary-color);
}


.toast-content {
    flex: 1;
}


.toast-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: #ffffff;
    margin-bottom: 0.1rem;
}


.toast-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}


.toast-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}


.toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}


/* =========================================
   Notepad Input Custom Styling
   ========================================= */
.notepad-input {
    width: 100%;
    min-height: 300px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 1rem; /* Adjust top padding to align with first line */
    line-height: 32px;
    font-size: 1rem;
    color: var(--text-dark);
    position: relative;
    z-index: 2;
    resize: vertical;
    outline: none;
}


.notepad-input:focus {
    outline: none;
    box-shadow: none;
}


/* Fatwa Categories Chips */
.fatwa-categories {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}


.fatwa-chip {
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}


.fatwa-chip:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}


.fatwa-chip.active {
    background-color: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(107, 45, 62, 0.2);
}


[data-theme="dark"] .fatwa-chip.active {
    color: var(--bg-dark);
}

/* Fatwa Q&A Card UI (Clean & Minimalist) */
.fatwa-qa-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    padding: 2rem 0;
    margin-bottom: 0;
    box-shadow: none;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


.fatwa-qa-card:last-child {
    border-bottom: none;
}


.fatwa-qa-card:hover {
    transform: none;
    box-shadow: none;
}


.qa-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-light);
}


.qa-card-category {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 500;
}


.qa-card-title {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}


.qa-card-title a {
    color: inherit;
    text-decoration: none;
}


.qa-card-title a:hover {
    color: var(--primary-color);
}


.qa-card-preview {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border-left: none;
}


.qa-icon-q {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.4rem;
    line-height: 1;
    font-family: inherit;
}


.qa-text-q {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}


.qa-card-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
}


/* =========================================
   Fatwa Split-Pane Layout (V3)
   ========================================= */
.fatwa-split-container {
    display: flex;
    height: calc(100vh - 80px); /* Subtract header height */
    overflow: hidden;
    background: var(--bg-light);
}


.fatwa-split-left {
    width: 35%;
    min-width: 350px;
    max-width: 450px;
    background: var(--bg-card);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
}


.fatwa-search-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-card);
    z-index: 5;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.05);
}


.fatwa-list-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}


.fatwa-split-right {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-light);
    position: relative;
}


.fatwa-detail-pane {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}


.fatwa-qa-card.split-item {
    padding: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s;
    gap: 0.5rem;
}


.fatwa-qa-card.split-item:hover {
    background: var(--bg-light);
}


.fatwa-qa-card.split-item.active {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-color);
}


.fatwa-qa-card.split-item .qa-card-title {
    font-size: 1.1rem;
    font-weight: 600;
}


.fatwa-qa-card.split-item .qa-text-q {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
}


@media (max-width: 992px) {
    .fatwa-split-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .fatwa-split-left {
        width: 100%;
        max-width: 100%;
        height: 60vh;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }

    .fatwa-split-right {
        height: auto;
        overflow: visible;
    }


}
/* =========================================
   Fatwa Accordion Layout (V4)
   ========================================= */
.fatwa-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 3rem;
}


.accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}


.accordion-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}


.accordion-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg-card);
    transition: background 0.3s;
}


.accordion-header:hover {
    background: rgba(107, 45, 62, 0.02);
}


.accordion-title-area {
    flex: 1;
}


.accordion-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}


.accordion-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 1rem;
}


.accordion-icon {
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    margin-top: 0.2rem;
}


.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}


.accordion-item.open .accordion-header {
    border-bottom: 1px solid var(--glass-border);
}


.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: var(--bg-light);
}


.accordion-item.open .accordion-content {
    max-height: 2000px; /* arbitrary large max-height for CSS transition */
}


.accordion-content-inner {
    padding: 2rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dark);
}


.accordion-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--glass-border);
}


/* =========================================
   Fatwa Vibrant Cards Layout (V5)
   ========================================= */

/* === FATWA PREMIUM ROW (Model 4) === */
.fatwa-premium-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 3rem;
}


.fatwa-premium-row {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.01);
}


.pr-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}


.pr-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
}


.pr-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark);
    transition: color 0.3s ease;
    line-height: 1.4;
}


.fatwa-premium-row:hover .pr-title {
    color: var(--primary-color);
}


.pr-excerpt {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.pr-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
}


.pr-views {
    font-size: 0.9rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.pr-action {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.pr-action .bookmark-btn {
    font-size: 1.2rem;
    color: var(--text-light);
    transition: color 0.3s ease;
    z-index: 2; /* So clicking it doesn't just trigger the anchor */
}


.pr-action .bookmark-btn:hover {
    color: var(--primary-color);
}


.pr-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}


.fatwa-premium-row:hover .pr-arrow {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateX(5px);
}


@media (max-width: 768px) {
    .fatwa-premium-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    .pr-content {
        gap: 0.5rem;
    }

    .pr-meta {
        margin-bottom: 0.25rem;
    }

    .pr-right {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--glass-border);
        padding-top: 1rem;
        margin-top: 0.5rem;
    }


}
/* === FATWA TWO-COLUMN LAYOUT === */
.fatwa-main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}


.fatwa-list-container {
    min-width: 0; /* Prevents overflow in flex/grid */
}


.fatwa-sidebar {
    position: sticky;
    top: 100px;
}


.sidebar-widget {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.01);
}


[data-theme="dark"] .sidebar-widget {
    background: var(--bg-card);
}


.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
}


/* Make sure popular items are styled nicely */
.popular-fatwas-container {
    display: flex;
    flex-direction: column;
}


@media (max-width: 992px) {
    .fatwa-main-layout {
        grid-template-columns: 1fr;
    }

    .fatwa-sidebar {
        position: static;
        order: -1; /* Puts it above the main list on mobile if desired, or leave below by removing order */
        margin-bottom: 2rem;
    }


}
.fatwa-premium-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(107, 45, 62, 0.08);
    border-color: rgba(107, 45, 62, 0.3);
}


.pr-category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
}


.pr-date {
    font-size: 0.85rem;
    color: var(--text-light);
}


.pr-dot {
    color: var(--text-light);
    font-size: 0.8rem;
    opacity: 0.5;
}


/* Blog Smart UI */
.blog-smart-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 3rem;
}


.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
}


.filter-pill {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}


.filter-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}


.filter-pill.active {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(107, 45, 62, 0.2);
}


.blog-search-wrapper {
    position: relative;
    width: 350px;
    max-width: 100%;
    margin-left: auto;
}


.blog-search-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}


.blog-search-wrapper input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: var(--bg-card);
    color: var(--text-dark);
    font-size: 0.9rem;
    transition: all 0.2s;
}


.blog-search-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


[data-theme="dark"] .filter-pill {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-color);
}

[data-theme="dark"] .blog-search-wrapper input {
    background: rgba(255,255,255,0.05);
}


/* Enhancing Blog Cards */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    aspect-ratio: auto;
}

.blog-thumb img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Keep the thumbnail wrapper the same height as its image. */
.blog-card > .blog-thumb {
    height: 200px;
    min-height: 0;
    flex: 0 0 200px;
    aspect-ratio: auto;
    margin-bottom: 0.75rem;
}

.blog-card > .blog-thumb img {
    height: 100%;
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.05);
}

.blog-badge-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    color: white;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.blog-author-sm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-author-sm img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}


/* =========================================
   Toggle Switch UI
   ========================================= */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}


.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 34px;
}


.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}


.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}


/* =========================================
   About Page Redesign (Smart System)
   ========================================= */
.about-hero-section {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--bg-light) 0%, #f0fdfa 100%);
    overflow: hidden;
}


[data-theme="dark"] .about-hero-section {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #0d1b2a 100%);
}


.about-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}


.about-hero-text {
    max-width: 800px;
    margin-bottom: 4rem;
}


.about-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}


.highlight-teal {
    color: var(--primary-color);
}


.about-hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    line-height: 1.6;
}


.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
}


.stat-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}


[data-theme="dark"] .stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}


.stat-card:hover {
    transform: translateY(-5px);
}


.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}


.stat-card p {
    color: var(--text-dark);
    font-weight: 600;
    margin: 0;
}


.hero-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.5;
}


.hero-bg-shapes .shape-1 {
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: var(--primary-color);
}


.hero-bg-shapes .shape-2 {
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: #8b5cf6;
}


[data-theme="dark"] .hero-bg-shapes .shape {
    opacity: 0.2;
}


/* Smart Tabs Section */
.about-smart-tabs-section {
    padding: 100px 0;
    background: var(--bg-white);
}


.smart-tabs-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}


.smart-tabs-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 120px;
}


.smart-tab-btn {
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}


.smart-tab-btn i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}


.smart-tab-btn:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}


.smart-tab-btn.active {
    background: var(--bg-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}


.smart-tab-btn.active i {
    transform: scale(1.2);
}


.smart-tabs-content-area {
    position: relative;
    min-height: 400px;
}


.smart-tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-white);
    padding: 3rem;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
}


[data-theme="dark"] .smart-tab-pane {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}


.smart-tab-pane.active {
    opacity: 1;
    
    transform: translateX(0);
    position: relative;
}


.tab-pane-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}


.smart-tab-pane h2 {
    font-size: 1.85rem;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}


.smart-tab-pane p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-light);
    position: relative;
    z-index: 2;
}


.smart-list {
    list-style: none;
    padding: 0;
    position: relative;
    z-index: 2;
}


.smart-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 12px;
}


.smart-list li i {
    color: var(--primary-color);
    font-size: 1.25rem;
}


.bento-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}


.b-val {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    transition: transform 0.3s;
}


.b-val:hover {
    transform: translateY(-5px);
    background: var(--primary-color);
    color: var(--bg-white);
}


.pane-decoration {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    z-index: 1;
}


.blur-teal { background: var(--primary-color); }

.blur-purple { background: #8b5cf6; }

.blur-orange { background: #f59e0b; }


/* Smart Timeline */
.timeline-section {
    padding: 100px 0;
    background: var(--bg-light);
}


.smart-timeline {
    position: relative;
    max-width: 800px;
    margin: 4rem auto 0;
}


.timeline-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--border-color);
    border-radius: 2px;
}


[data-theme="dark"] .timeline-line {
    background: var(--primary-dark);
}


.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--primary-color);
    border-radius: 2px;
    transition: height 0.5s ease;
}


.timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 4rem;
    opacity: 0.3;
    transform: translateX(20px);
    transition: all 0.5s ease;
}


.timeline-item.active {
    opacity: 1;
    transform: translateX(0);
}


.timeline-dot {
    position: absolute;
    left: 14px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--border-color);
    transition: all 0.5s ease;
    z-index: 2;
}


[data-theme="dark"] .timeline-dot {
    background: var(--bg-dark);
    border-color: var(--primary-dark);
}


.timeline-item.active .timeline-dot {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2);
}


.timeline-content {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}


.timeline-date {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: rgba(17, 24, 39, 0.1);
    color: var(--primary-color);
    font-weight: 700;
    border-radius: 20px;
    margin-bottom: 1rem;
}


.timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}


.timeline-content p {
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smart-tabs-wrapper {
        grid-template-columns: 1fr;
    }

    .smart-tabs-sidebar {
        position: relative;
        top: 0;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .smart-tab-btn {
        white-space: nowrap;
    }

}
@media (max-width: 576px) {
    .about-hero-title {
        font-size: 1.85rem;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .bento-values {
        grid-template-columns: 1fr;
    }


}
/* =========================================
   About Us - Native Zig-Zag Model
   ========================================= */

/* 1. Hero Centered & Banner */
.native-zz-hero {
    padding: 10rem 0 0; /* No bottom padding, banner sits at bottom */
    background: var(--bg-main);
}

.native-zz-hero-content {
    max-width: 800px;
    margin: 0 auto 4rem;
}

.native-zz-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.native-zz-desc {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-light);
}

.native-zz-banner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.native-zz-banner-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center 70%;
    display: block;
}

.native-zz-stats-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(74, 29, 43, 0.97), rgba(94, 38, 56, 0.94));
    display: flex;
    justify-content: space-around;
    padding: 2rem;
}

.native-zz-stat {
    text-align: center;
    color: #fff;
}

.native-zz-stat h3 {
    font-size: 1.85rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: #fff;
}

.native-zz-stat p {
    font-size: 1rem;
    opacity: 0.8;
}


/* 2. Zig-Zag Rows */
.native-zz-section {
    padding: 6rem 0;
}

.native-zz-row {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.native-zz-row.reverse {
    flex-direction: row-reverse;
}

.native-zz-image-col {
    flex: 1;
}

.native-zz-text-col {
    flex: 1;
}

.native-zz-img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/5;
    object-fit: cover;
    max-height: 550px;
    filter: grayscale(1);
}

.native-zz-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.native-zz-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
}

.native-zz-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.native-zz-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.list-icon {
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.native-zz-list h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.native-zz-list p {
    color: var(--text-light);
    font-size: 0.75rem;
    line-height: 1.5;
}


/* 3. Team Grid (Same as before) */
.native-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.native-profile-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.native-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.native-profile-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.profile-info {
    padding: 1.5rem;
    text-align: center;
}

.profile-info h4 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

.profile-info span {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
}


/* Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.delay-3 { transition-delay: 0.3s; }


/* Responsive */
@media (max-width: 992px) {
    .native-zz-title {
        font-size: 3rem;
    }

    .native-zz-row, .native-zz-row.reverse {
        flex-direction: column;
        gap: 2rem;
    }

    .native-zz-stats-overlay {
        flex-direction: column;
        gap: 1.5rem;
    }

    .native-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}
@media (max-width: 576px) {
    .native-team-grid {
        grid-template-columns: 1fr;
    }


}
/* =========================================
   AI Smart System (Search & Chat)
   ========================================= */

/* AI Search Box */
.ai-search-container {
    margin: 2.5rem 0;
    width: min(100%, 780px);
    max-width: 780px;
}

.ai-search-box {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    padding: 0.5rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.ai-search-box:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(107, 45, 62, 0.15);
}

.ai-sparkle-icon {
    display: inline-block;
    font-size: 1.25rem;
    color: var(--primary-color);
    margin: 0 1rem;
    animation: pulse-glow 2s infinite;
}
[data-theme="dark"] .ai-sparkle-icon {
    color: var(--text-dark);
}

.ai-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1rem 0.5rem;
    font-size: 1.05rem;
    color: var(--text-dark);
    outline: none;
    font-family: inherit;
}

.ai-search-box input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.btn-ai-search {
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.ai-search-tags {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
    align-items: center;
}

.ai-search-tags a {
    color: var(--primary-color);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition);
}

[data-theme="dark"] .ai-search-tags a {
    color: var(--text-dark);
    background: transparent;
}

.ai-search-tags a:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

[data-theme="dark"] .ai-search-tags a:hover {
    background: var(--text-dark);
    color: var(--bg-dark);
    border-color: var(--text-dark);
}


@keyframes pulse-glow {
    0% { transform: scale(1); opacity: 0.8; }

    50% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 10px var(--primary-light); }

    100% { transform: scale(1); opacity: 0.8; }


}
/* AI Floating Chat */
.ai-chat-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary-color);
    color: #FDF8F4;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(107, 45, 62, 0.3);
    z-index: 999997;
    transition: var(--transition);
}

.ai-chat-toggle:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(107, 45, 62, 0.4);
}

.ai-chat-toggle i {
    display: inline-block;
    font-size: 1.25rem;
    animation: pulse-glow 2s infinite;
}


.ai-chat-window {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    width: 380px;
    height: 600px;
    max-height: 80vh;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border-color);
}

.ai-chat-window.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


.ai-chat-header {
    background: var(--primary-color);
    color: var(--bg-white);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ai-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ai-chat-header h4 {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
    color: #fff;
}

.online-status {
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.online-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4B5563;
    border-radius: 50%;
    display: inline-block;
}

.ai-chat-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.ai-chat-close:hover {
    color: #fff;
    transform: rotate(90deg);
}


.ai-chat-messages {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-main);
}

.ai-message {
    max-width: 85%;
}

.ai-message.system-message {
    align-self: flex-start;
}

.ai-message.user-message {
    align-self: flex-end;
}

.ai-message .message-content {
    padding: 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.ai-message.system-message .message-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 0.25rem;
    color: var(--text-dark);
}

.ai-message.user-message .message-content {
    background: var(--primary-color);
    color: var(--bg-white);
    border-bottom-right-radius: 0.25rem;
}


.ai-chat-input-area {
    background: var(--bg-card);
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

.quick-prompts {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.quick-prompts::-webkit-scrollbar {
    height: 4px;
}

.quick-prompts::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.quick-prompts button {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.quick-prompts button:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

.input-wrapper {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-main);
    padding: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
}

.input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-dark);
    outline: none;
}

.ai-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--bg-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.ai-send-btn:hover {
    transform: scale(1.05);
}


.ai-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 999998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-chat-overlay.active {
    display: block;
    opacity: 1;
}


@media (max-width: 576px) {
    .ai-chat-window {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
        transform: translateY(100%);
    }

    .ai-chat-toggle {
        bottom: 1rem;
        right: 1rem;
    }


}
[data-theme="dark"] .badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}


[data-theme="dark"] .fatwa-search-box input {
    color: #ffffff;
    background: #1F2937;
}

/* Refined chatbot composer: keep the field integrated with its pill container in both themes. */
.ai-chat-input-area { padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
.ai-chat-input-area .quick-prompts { margin-bottom: .65rem; padding-bottom: .1rem; scrollbar-width: none; }
.ai-chat-input-area .quick-prompts::-webkit-scrollbar { display: none; }
.ai-chat-input-area .quick-prompts button { padding: .48rem .8rem; color: var(--text-dark); background: var(--bg-card); font-size: .78rem; }
.ai-chat-input-area .input-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: .45rem;
    padding: .35rem .4rem .35rem .95rem;
    min-height: 56px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(36, 17, 23, .06);
}
.ai-chat-input-area .input-wrapper:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(197, 124, 146, .16); }
.ai-chat-input-area .input-wrapper input,
.ai-chat-input-area .input-wrapper input:focus {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 .2rem;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-dark) !important;
    font-size: .95rem;
}
.ai-chat-input-area .input-wrapper input::placeholder { color: var(--text-light); opacity: .85; }
.ai-chat-input-area .ai-send-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; box-shadow: none; }
.ai-chat-window { max-height: min(680px, calc(100dvh - 6rem)); }
@media (max-width: 768px) {
    .ai-chat-window { width: min(420px, calc(100vw - 2rem)); height: min(650px, calc(100dvh - 6rem)); bottom: 5.25rem; right: 1rem; }
    .ai-chat-messages { padding: 1rem; }
}
@media (max-width: 576px) {
    .ai-chat-window { width: 100%; height: 100dvh; max-height: 100dvh; bottom: 0; right: 0; border-radius: 0; }
    .ai-chat-input-area { padding-left: 1rem; padding-right: 1rem; }
}

[data-theme="dark"] .fatwa-search-box input::placeholder {
    color: var(--text-light);
}


[data-theme="dark"] .popular-number { opacity: 0.8; }

[data-theme="dark"] .btn-see-all.btn-outline { color: #FDF8F4 !important; }

[data-theme="dark"] .btn-see-all.btn-outline:hover { color: #FDF8F4 !important; }

[data-theme="dark"] .filter-pill.active {
    background: #FFFFFF;
    color: var(--bg-dark);
    border-color: #FFFFFF;
}


[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider:before {
    background-color: var(--bg-dark);
}


[data-theme="dark"] .progress-bar {
    background: rgba(255, 255, 255, 0.2);
}


/* =========================================
   Smart Search System
   ========================================= */
.search-field-container {
    padding: 2.5rem;
    max-width: 600px;
}


.search-input-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
}


.search-icon-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.2rem;
}


.search-overlay-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    font-size: 1.25rem;
    padding: 1rem 1rem 1rem 3rem;
    color: var(--text-dark);
    text-align: left;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.3s;
    border-radius: 0;
}


[data-theme="dark"] .search-overlay-input {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}


.search-overlay-input:focus {
    outline: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--primary-color);
}


[data-theme="dark"] .search-overlay-input:focus {
    background: transparent;
}


.search-results-container {
    margin-top: 1.5rem;
    text-align: left;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
}


.search-section-title {
    font-size: 0.9rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 1rem;
}


.search-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}


.search-tag {
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-dark);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}


[data-theme="dark"] .search-tag {
    background: rgba(255,255,255,0.05);
}


.search-tag:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}


.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}


.search-result-item:hover {
    background: var(--bg-light);
    border-color: var(--border-color);
}


[data-theme="dark"] .search-result-item:hover {
    background: rgba(255,255,255,0.05);
}


.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}


.search-result-content {
    display: flex;
    flex-direction: column;
}


.search-result-title {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}


.search-result-type {
    color: var(--text-light);
    font-size: 0.8rem;
}


.search-highlight {
    background: transparent;
    color: var(--primary-color);
    font-weight: 700;
}


[data-theme="dark"] .search-result-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
}



/* =========================================
   Theme-Aligned Ad Banner (Fixed Layout)
   ========================================= */
.ad-banner-custom {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl);
    padding: 3.5rem 4rem;
    overflow: hidden;
    /* Using the official theme primary gradient (Charcoal/Dark) */
    background: var(--gradient-primary);
    box-shadow: 0 20px 40px -10px rgba(17, 24, 39, 0.4);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
}

[data-theme="dark"] .ad-banner-custom {
    background: #000000;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Subtle Geometric Decoration */
.ad-banner-custom::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03));
    z-index: -1;
    transform: skewX(-20deg) translateX(20%);
}

.ad-banner-custom::after {
    content: '\f19d'; /* graduation-cap icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    font-size: 18rem;
    color: rgba(255, 255, 255, 0.03);
    z-index: -1;
    pointer-events: none;
}

.ad-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.ad-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.ad-text {
    flex: 1;
    min-width: 300px;
    text-align: left; /* Explicitly align left */
}

.ad-text h3 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.ad-text h3 span {
    color: #FFFFFF;
}

.ad-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    max-width: 550px;
}

.ad-text p strong {
    color: #FFFFFF;
    font-weight: 600;
    display: block;
    margin-top: 0.5rem;
}

.btn-ad-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: #FFFFFF;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    border: 1px solid #FFFFFF;
}

.btn-ad-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: transparent;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .ad-banner-custom {
        padding: 2.5rem 2rem;
        text-align: center;
    }
    
    .ad-badge {
        margin: 0 auto 1.5rem auto;
    }
    
    .ad-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .ad-text {
        text-align: center;
    }
    
    .ad-text p {
        margin: 0 auto;
    }
    
    .ad-text h3 {
        font-size: 1.8rem;
    }
    
    .btn-ad-action {
        width: 100%;
    }
    
    .ad-banner-custom::after {
        font-size: 12rem;
        right: -10%;
        top: 60%;
    }
}

/* Modal Active States */
.bismillah-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   Global Page Entrance Animation (Lightweight & Smooth)
   ========================================= */
@keyframes pageEntrance {
    from {
        opacity: 0.3;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main,
.page-header,
footer,
.admin-layout,
.player-layout,
.kitab-layout {
    animation: pageEntrance 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Slight stagger */
.page-header { animation-delay: 0.05s; }
main, .admin-layout, .player-layout, .kitab-layout { animation-delay: 0.15s; }
footer { animation-delay: 0.3s; }

/* Sections inside main should NOT re-animate */
main section,
section section,
.admin-layout section,
.player-layout section,
.kitab-layout section,
.admin-layout main,
.player-layout main,
.kitab-layout main {
    animation: none;
}

/* Standalone top-level sections (homepage hero, etc.) */
body > section {
    animation: pageEntrance 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.1s;
}

/* Exclude modals and overlays */
.modal-overlay,
.bismillah-modal,
.search-overlay,
.modal-overlay section {
    animation: none !important;
}


@media (max-width: 768px) {
    .blog-smart-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .blog-search-wrapper {
        max-width: 100%;
        min-width: 100%;
        margin-top: 10px;
    }
    .blog-filters {
        justify-content: center;
    }
}


/* GLOBAL TOP AD BAR */
.global-top-ad-bar {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 10px 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1000;
}
.ad-bar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ad-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
}
.ad-text {
    font-weight: 500;
}
.ad-btn {
    background: white;
    color: var(--primary-dark) !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.ad-btn:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}
.ad-close-btn {
    position: absolute;
    right: 15px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ad-close-btn:hover {
    background: rgba(255,255,255,0.4);
}

[data-theme="dark"] .global-top-ad-bar {
    background: linear-gradient(135deg, var(--primary-dark), #1A0F11);
    border-bottom: 1px solid var(--border-color);
}

/* =========================================
   Accessibility: Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   Mobile Performance: Disable heavy ornaments
   ========================================= */
@media (max-width: 768px) {
    .pulsing-circle,
    .rotating-ring,
    .ring-line-2 {
        animation-duration: 0s !important;
        animation: none !important;
    }
    
    .hero-ornament .orbiter {
        animation: none !important;
    }
}

/* =========================================
   Modern responsive refinements
   ========================================= */
:root {
    --container-width: 1280px;
    --radius-lg: 1.25rem;
    --shadow-card: 0 12px 36px rgba(45, 27, 30, 0.08);
    --focus-ring: 0 0 0 3px rgba(107, 45, 62, 0.22);
}

html {
    scroll-padding-top: 5.5rem;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background-attachment: scroll;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: min(100%, var(--container-width));
    padding-inline: clamp(1rem, 3.5vw, 2rem);
}

:where(button, a, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

button, .btn, .nav-link, input, select, textarea {
    min-height: 44px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-full);
    padding-inline: 1.25rem;
    font-weight: 700;
}

.header {
    background: var(--bg-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    box-shadow: 0 5px 24px rgba(45, 27, 30, 0.055);
}

.header.scrolled {
    box-shadow: 0 8px 28px rgba(45, 27, 30, 0.09);
}

.course-card, .blog-card, .kitab-card, .fatwa-card, .benefit-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.course-card:hover, .blog-card:hover, .kitab-card:hover, .fatwa-card:hover, .benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.course-grid, #allCoursesGrid, #allBlogsGrid, #allFatwasGrid, #kitabGrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
}

.donation-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    width: min(100%, 1320px);
    max-width: 1320px;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card, var(--glass-bg));
    box-shadow: var(--shadow-md);
}

.donation-card-image {
    min-height: 440px;
    background: var(--bg-light);
}

.donation-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
}

.donation-card-image-placeholder {
    display: grid;
    place-items: center;
    color: var(--primary-color);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 17%, var(--bg-light)), var(--bg-light));
    font-size: 4rem;
}

.donation-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.1rem;
    min-width: 0;
    padding: clamp(2.25rem, 5vw, 5rem);
}

.donation-card-content h3 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.donation-card-content p { margin: 0; color: var(--text-light); line-height: 1.8; font-size: clamp(1.05rem, 1.45vw, 1.3rem); }
.donation-card-content small { color: var(--text-light); }
.donation-card-content button:disabled { cursor: not-allowed; opacity: 0.7; }

@media (max-width: 700px) {
    .donation-card { grid-template-columns: minmax(0, 1fr); }
    .donation-card-image, .donation-card-image img { min-height: 210px; height: 210px; }
    .donation-card-content { padding: 1.4rem; }
}

img {
    height: auto;
}

.hero-title, .page-title, .section-title {
    text-wrap: balance;
}

.hero-description, .section-subtitle {
    text-wrap: pretty;
}

@media (min-width: 901px) and (max-width: 1120px) {
    .header-container { gap: 1rem; }
    .nav-list { gap: clamp(0.8rem, 1.6vw, 1.4rem); }
    .header-actions { gap: 0.55rem; }
    .header-actions .btn { padding-inline: 0.9rem; font-size: 0.9rem; }
    .logo { font-size: 1.5rem; }
}

@media (max-width: 900px) {
    .header { height: 70px; padding: 0.5rem 0; }
    .header-container { gap: 0.75rem; }
    .logo { font-size: 1.45rem; }
    .nav-menu {
        top: 70px;
        left: auto;
        right: 0;
        width: min(100vw, 420px);
        height: calc(100dvh - 70px);
        max-height: calc(100vh - 70px);
        padding: 1.25rem clamp(1.25rem, 6vw, 2rem) max(1.5rem, env(safe-area-inset-bottom));
        border: 1px solid var(--border-color);
        border-top: 0;
        border-radius: 0 0 0 1.25rem;
        background: var(--bg-card);
        box-shadow: -16px 20px 44px rgba(45, 27, 30, 0.16);
        transform: translateX(105%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 240ms ease, opacity 180ms ease, visibility 180ms ease;
        z-index: 100000;
    }
    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.menu-open { overflow: hidden; }
    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 70px 0 0;
        z-index: 99998;
        background: rgba(21, 12, 14, 0.42);
        animation: menuBackdropIn 180ms ease both;
    }
    .nav-list { gap: 0; }
    .nav-list li { width: 100%; }
    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-link::after { display: none; }
    .mobile-toggle { width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: 0.75rem; }
    .mobile-utility-area { display: flex; gap: 0.75rem; margin-top: 1rem; }
    .mobile-utility-area button {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        padding: 0.65rem;
        color: var(--text-dark);
        background: var(--bg-light);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        font: inherit;
    }
    .hero-container { gap: 1rem; }
    .hero-title { font-size: clamp(2rem, 6vw, 3rem); }
    .section { padding-block: clamp(3rem, 8vw, 5rem); }
}

@media (max-width: 600px) {
    .container { padding-inline: 1rem; }
    .hero-container { padding-top: 1rem; }
    .hero-content { margin-top: 0.75rem; }
    .hero-title { font-size: clamp(1.85rem, 9vw, 2.5rem); line-height: 1.18; }
    .hero-description { font-size: 0.98rem; }
    .ai-search-box { flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem; }
    .ai-search-box input { flex: 1 1 100%; min-width: 0; }
    .ai-search-box .btn { width: 100%; }
    .ai-search-tags { justify-content: center; flex-wrap: wrap; }
    .hero-stats { gap: 0.75rem; }
    .stat-item { min-width: 84px; }
    .scrolling-grid { margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
    .scrolling-grid .course-card, .scrolling-grid .blog-card { flex-basis: min(82vw, 340px); width: min(82vw, 340px); }
    .page-header { padding: 100px 0 42px; }
    .page-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    .section-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .floating-card { display: none; }
    .ai-chat-window {
        width: min(calc(100vw - 1.5rem), 390px);
        height: min(70dvh, 640px);
        max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom));
        right: 0.75rem;
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        border-radius: var(--radius-lg);
    }
    .ai-chat-toggle { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@keyframes menuBackdropIn { from { opacity: 0; } to { opacity: 1; } }

@media (hover: none) {
    .course-card:hover, .blog-card:hover, .kitab-card:hover, .fatwa-card:hover, .benefit-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nav-menu, .course-card, .blog-card, .kitab-card, .fatwa-card, .benefit-card { transition: none; }
}

/* Keep injected mobile controls from leaking into the desktop header if a
   browser misses a breakpoint-change event while its viewport is resized. */
@media (min-width: 901px) {
    .nav-menu > .mobile-auth-area,
    .nav-menu > .mobile-profile-area,
    .nav-menu > .mobile-nav-links,
    .nav-menu > .mobile-utility-area {
        display: none !important;
    }
}

@media (min-width: 901px) and (max-width: 1120px) {
    .header-container { gap: 0.5rem; }
    .logo { flex: 0 0 auto; font-size: 1.3rem; }
    .nav-menu { flex: 1 1 auto; min-width: 0; }
    .nav-list { justify-content: center; gap: clamp(0.35rem, 0.9vw, 0.65rem); }
    .nav-link { font-size: 0.875rem; white-space: nowrap; }
    .header-actions { flex: 0 0 auto; gap: 0.25rem; }
    .header-actions .btn { padding-inline: 0.65rem; font-size: 0.82rem; white-space: nowrap; }
    .theme-toggle, .search-toggle { width: 34px; height: 40px; margin-right: 0 !important; }
}

/* Mobile home page: put the learning message before the artwork and keep the
   search action compact enough to fit on one line. */
@media (max-width: 900px) {
    .hero { padding-top: 6.25rem; padding-bottom: 2.5rem; }
    .hero-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .hero-content { order: 0; width: 100%; min-width: 0; margin-top: 0; }
    .hero-image {
        display: none;
    }
    .hero-bg-animation { display: none; }
    .hero-slider-container { width: 100%; height: 100%; overflow: hidden; }
    .hero-slide { inset: 0; }
    .main-img { max-width: 84%; max-height: 88%; animation: none; }
    .hero-description { max-width: 38rem; margin-inline: auto; }
    .ai-search-container { width: 100%; max-width: 38rem; min-width: 0; margin: 1.5rem auto; }
    .ai-search-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-width: 0;
        padding: 0.4rem;
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        overflow: visible;
    }
    .ai-sparkle-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        z-index: 1;
        margin: 0;
        transform: translateY(-50%);
        animation: none;
    }
    .ai-search-box input {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        padding: 0.75rem 0.25rem 0.75rem 2.25rem;
        font-size: 0.95rem;
    }
    .ai-search-box .btn-ai-search {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 7.5rem;
        min-height: 46px;
        margin: 0;
        padding-inline: 1rem;
        font-size: 0.9rem;
    }
    .ai-search-tags { justify-content: center; gap: 0.45rem; }
    .ai-search-tags > span { flex-basis: 100%; text-align: center; }
    .ai-search-tags a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Use two small footer columns instead of making mobile users scroll through
   each link group one at a time. Reserve room for the fixed chat button. */
@media (max-width: 600px) {
    .footer { padding-top: 2.5rem; padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }
    .footer-grid > .footer-brand,
    .footer-grid > .footer-links:last-child { grid-column: 1 / -1; }
    .footer-brand p { max-width: 34rem; margin-bottom: 1rem; }
    .footer-links h4 { margin-bottom: 0.65rem; font-size: 1rem; }
    .footer-links ul { gap: 0.35rem; }
    .footer-links li, .footer-links a { line-height: 1.45; overflow-wrap: anywhere; }
    .footer-bottom { justify-content: center; padding-top: 1.25rem; text-align: center; }
    .footer-bottom p { font-size: 0.85rem; }
    .hero-stats { margin-top: 1.25rem; }
}

/* Keep the promo badge and message stacked in the small ad carousel. */
@media (max-width: 768px) {
    .ad-carousel-track {
        height: auto;
        transition: height 0.3s ease;
    }

    .ad-slide .ad-banner-custom {
        height: auto;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1.25rem;
        text-align: center;
    }

    .ad-slide .ad-badge {
        align-self: center;
        margin: 0;
    }

    .ad-slide .ad-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .ad-slide .ad-text {
        min-width: 0;
        width: 100%;
        text-align: center;
    }

    .ad-slide .ad-text h3 {
        margin-bottom: 0.4rem;
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .ad-slide .ad-text p {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .ad-slide .btn-ad-action {
        width: auto;
        max-width: 100%;
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    .ad-slide .cta-box {
        height: auto;
        min-height: 0;
        padding: 1.5rem 1.25rem;
    }

    .ad-slide .cta-content h2 {
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }

    .ad-slide .cta-content p {
        margin-bottom: 0.85rem;
        font-size: 0.95rem;
        line-height: 1.45;
    }

}

/* Uniform, touch-friendly carousel indicators on phones and tablets. */
@media (max-width: 1024px) {
    .ad-carousel-dots .dot,
    .featured-carousel-dots .dot {
        position: relative;
        display: grid;
        flex: 0 0 44px;
        place-items: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px !important;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        opacity: 1;
    }

    .ad-carousel-dots .dot::before,
    .featured-carousel-dots .dot::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d1d5db;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .ad-carousel-dots .dot.active,
    .featured-carousel-dots .dot.active {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        background: transparent;
    }

    .ad-carousel-dots .dot.active::before,
    .featured-carousel-dots .dot.active::before {
        width: 12px;
        height: 12px;
        background: var(--primary-color);
    }

    .ad-carousel-dots .dot:hover,
    .featured-carousel-dots .dot:hover {
        background: transparent;
        opacity: 1;
    }

    .featured-carousel-dots {
        right: auto;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        gap: 2px;
    }
}

/* Final carousel-dot reset: keep large tap targets, draw compact round dots. */
.ad-carousel-dots .dot,
.featured-carousel-dots .dot {
    position: relative;
    display: grid;
    flex: 0 0 14px;
    place-items: center;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    min-height: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    opacity: 1;
}

.ad-carousel-dots .dot::before,
.featured-carousel-dots .dot::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ad-carousel-dots .dot.active,
.featured-carousel-dots .dot.active {
    flex-basis: 14px;
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
}

.ad-carousel-dots .dot.active::before,
.featured-carousel-dots .dot.active::before {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
}

.ad-carousel-dots .dot:hover,
.featured-carousel-dots .dot:hover {
    background: transparent !important;
    opacity: 1;
}

.ad-carousel-dots .dot:focus-visible,
.featured-carousel-dots .dot:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

@media (max-width: 900px) {
    #home .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start;
        gap: 0.5rem;
        padding: 1.25rem 0.75rem;
    }

    #home .hero-stats .stat-item {
        width: 100%;
        min-width: 0 !important;
        flex: initial;
    }

    #home .hero-stats .stat-number {
        max-width: 100%;
        font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
        line-height: 1.1;
        white-space: nowrap;
    }

    #home .hero-stats .stat-label {
        font-size: clamp(0.58rem, 2vw, 0.72rem);
        line-height: 1.35;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
    }
}


/* Shared dark theme surfaces and controls across site pages. */
[data-theme="dark"] .page-header,
[data-theme="dark"] .section.bg-light,
[data-theme="dark"] .breadcrumb-area,
[data-theme="dark"] .kitab-dashboard-section {
    background-color: var(--bg-light);
}

[data-theme="dark"] .course-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .blog-card-standard,
[data-theme="dark"] .kitab-card,
[data-theme="dark"] .fatwa-card,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .sidebar-widget,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .mv-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .book-card-horizontal {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-input {
    background-color: var(--bg-dark);
    border-color: var(--border-color);
    color: var(--text-dark);
    caret-color: var(--text-dark);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-input::placeholder {
    color: var(--text-light);
    opacity: 1;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
}

[data-theme="dark"] .text-primary,
[data-theme="dark"] .horizontal-author,
[data-theme="dark"] .book-author {
    color: var(--primary-color);
}

[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
    background: var(--primary-light);
    color: var(--primary-color) !important;
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .sidebar-link.active i {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .kitab-sidebar .sidebar-link.active,
[data-theme="dark"] .kitab-sidebar .sidebar-link.active * {
    color: var(--primary-color) !important;
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .fatwa-chip.active {
    color: var(--bg-dark);
}

[data-theme="dark"] .btn-read-more:hover {
    background: var(--primary-color);
    color: var(--bg-dark);
}

[data-theme="dark"] .course-title a:hover,
[data-theme="dark"] .blog-title a:hover,
[data-theme="dark"] .about-redesign-content h2 .highlight-text {
    color: var(--primary-color);
}

[data-theme="dark"] .ad-action .btn {
    background: var(--gradient-primary);
    color: var(--text-dark);
}

[data-theme="dark"] .global-top-ad-bar {
    background: var(--gradient-primary);
    color: var(--text-dark);
}

[data-theme="dark"] .horizontal-title,
[data-theme="dark"] .book-title {
    color: var(--text-dark);
}

[data-theme="dark"] .blog-card-meta,
[data-theme="dark"] .blog-date-text,
[data-theme="dark"] .course-meta,
[data-theme="dark"] .muted,
[data-theme="dark"] small {
    color: var(--text-light);
}

/* Use the same selected state for category filters on every page. */
[data-theme="dark"] .fatwa-chip.active,
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .filter-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-dark);
}

[data-theme="dark"] .fatwa-chip:hover,
[data-theme="dark"] .filter-pill:hover,
[data-theme="dark"] .filter-chip:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Fatwa page refresh: clearer search hierarchy, compact filters and answer cards. */
.fatwa-page-section {
    min-height: 60vh;
    padding: clamp(2rem, 5vw, 4rem) 0;
    background: var(--bg-light);
}

.fatwa-page-container {
    max-width: 1180px;
}

.fatwa-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 1.5rem 2rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.fatwa-toolbar-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.fatwa-toolbar-icon {
    display: grid;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 1rem;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.25rem;
}

.fatwa-toolbar-kicker {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fatwa-toolbar-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.25;
}

.fatwa-toolbar-heading p {
    margin: 0.35rem 0 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

.fatwa-toolbar .fatwa-search-box {
    max-width: none;
    margin: 0;
}

.fatwa-toolbar .fatwa-search-box input {
    min-height: 3.25rem;
    padding: 0.9rem 1rem 0.9rem 3rem;
    background: var(--bg-white);
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem;
    box-shadow: none;
    font-size: 0.95rem;
}

.fatwa-toolbar .fatwa-search-icon {
    left: 1.1rem;
}

.fatwa-toolbar .fatwa-categories {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0.1rem 0 0.25rem;
    overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.fatwa-toolbar .fatwa-chip:not(.active) {
    flex: 0 0 auto;
    padding: 0.65rem 1rem;
    background: var(--bg-light);
    border-color: var(--border-color);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: none;
}

.fatwa-toolbar .fatwa-chip:not(.active):hover,
.fatwa-toolbar .fatwa-chip:focus-visible {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.fatwa-main-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.fatwa-premium-list {
    gap: 0.9rem;
    padding-bottom: 1rem;
}

.fatwa-premium-row {
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.pr-content {
    min-width: 0;
    gap: 0.5rem;
}

.pr-meta {
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
}

.pr-category {
    color: var(--primary-color);
}

.pr-title {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.pr-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pr-right {
    gap: 0.85rem;
}

.pr-arrow {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-light);
    color: var(--primary-color);
}

.fatwa-sidebar {
    top: 96px;
}

.fatwa-sidebar .sidebar-widget {
    padding: 1.35rem;
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 1.2rem;
}

.fatwa-sidebar .widget-title {
    margin-bottom: 0.65rem;
    padding-bottom: 0.9rem;
    font-size: 1rem;
}

.fatwa-sidebar .popular-item {
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-bottom-color: var(--border-color);
}

.fatwa-sidebar .popular-content h4 {
    font-size: 0.88rem;
    line-height: 1.45;
}

.fatwa-sidebar .popular-number {
    min-width: 1.5rem;
}

.popular-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.popular-category {
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .fatwa-toolbar {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .fatwa-toolbar .fatwa-categories {
        grid-column: auto;
    }

    .fatwa-main-layout {
        grid-template-columns: 1fr;
    }

    .fatwa-sidebar {
        order: 2;
        margin: 0 0 1.5rem;
    }
}

@media (max-width: 600px) {
    .fatwa-page-section {
        padding: 1.25rem 0 2rem;
    }

    .fatwa-toolbar {
        margin-bottom: 1.25rem;
        padding: 1rem;
        border-radius: 1.1rem;
    }

    .fatwa-toolbar-heading {
        gap: 0.75rem;
    }

    .fatwa-toolbar-icon {
        flex-basis: 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.85rem;
    }

    .fatwa-toolbar-heading p {
        font-size: 0.82rem;
    }

    .fatwa-toolbar .fatwa-search-box input {
        min-height: 3rem;
        font-size: 0.9rem;
    }

    .fatwa-toolbar .fatwa-categories {
        margin-right: -0.25rem;
        padding-right: 0.25rem;
        scrollbar-width: none;
    }

    .fatwa-toolbar .fatwa-categories::-webkit-scrollbar {
        display: none;
    }

    .fatwa-toolbar .fatwa-chip {
        padding: 0.58rem 0.9rem;
        font-size: 0.84rem;
    }

    .fatwa-premium-row {
        align-items: stretch;
        gap: 0.9rem;
        padding: 1.1rem;
        border-radius: 1rem;
    }

    .pr-excerpt {
        font-size: 0.84rem;
    }

    .pr-right {
        gap: 0.75rem;
    }
}

/* Blog and kitab pages use the same calm discovery pattern as Fatwa. */
.blog-page-section {
    padding: clamp(1.75rem, 4vw, 3rem) 0 5rem;
    background: var(--bg-light);
}

.blog-page-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas:
        "heading search"
        "filters filters";
    align-items: center;
    gap: 1.25rem 2rem;
    position: relative;
    z-index: 2;
    margin: 0 auto 2rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.4rem;
    box-shadow: var(--shadow-sm);
}

.blog-page-toolbar .filter-pill {
    min-height: 2.75rem;
}

.blog-page-toolbar .filter-pill:focus-visible,
.blog-page-toolbar .blog-search-wrapper input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    outline-offset: 3px;
}

.blog-toolbar-heading {
    grid-area: heading;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.blog-toolbar-icon {
    display: grid;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 0.95rem;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.blog-toolbar-kicker,
.kitab-header-kicker {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-toolbar-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.25;
}

.blog-toolbar-heading p,
.kitab-header-copy p {
    margin: 0.35rem 0 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

.blog-page-toolbar .blog-filters {
    grid-area: filters;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.1rem 0 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.blog-page-toolbar .filter-pill {
    flex: 0 0 auto;
    padding: 0.62rem 1rem;
    background: var(--bg-light);
    border-color: var(--border-color);
    font-size: 0.88rem;
    font-weight: 600;
}

.blog-page-toolbar .filter-pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.blog-page-toolbar .blog-search-wrapper {
    grid-area: search;
    width: 100%;
    margin: 0;
}

.blog-page-toolbar .blog-search-wrapper input {
    min-height: 3.15rem;
    background: var(--bg-white);
    border-color: var(--border-color);
    border-radius: 1rem;
    box-shadow: none;
}

@media (min-width: 1100px) {
    .blog-page-toolbar {
        grid-template-columns: minmax(14rem, 0.85fr) minmax(24rem, 1.5fr) minmax(17rem, 0.9fr);
        grid-template-areas: "heading filters search";
        gap: 1rem 1.5rem;
        align-items: center;
    }

    .blog-page-toolbar .blog-filters {
        flex-wrap: wrap;
        align-content: center;
        overflow: visible;
        gap: 0.5rem;
    }

    .blog-page-toolbar .filter-pill {
        padding: 0.55rem 0.8rem;
        font-size: 0.82rem;
    }
}

.blog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.featured-carousel-container {
    margin-bottom: 2rem;
    border-radius: 1.35rem;
    box-shadow: var(--shadow-sm);
}

.featured-slide {
    min-height: 340px;
}

.featured-slide .featured-blog-img-wrapper {
    flex: 0 0 43%;
    min-height: 340px;
}

.featured-slide .featured-blog-content {
    flex: 1 1 57%;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    padding-bottom: 3.75rem;
}

.featured-slide .featured-blog-content .blog-title {
    font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.8rem !important;
}

.featured-slide .featured-blog-content > p {
    margin-bottom: 1.1rem !important;
    font-size: 0.96rem;
}

.featured-slide .featured-blog-content .blog-author {
    margin-bottom: 1rem !important;
}

.featured-carousel-dots {
    right: 1.5rem;
    bottom: 1rem;
}

.sub-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.blog-card {
    align-self: stretch;
    height: 100%;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.15rem;
    box-shadow: var(--shadow-sm);
}

.blog-card > .blog-thumb {
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 0;
}

.blog-card > .blog-thumb img {
    height: 100%;
}

.blog-card .blog-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.2rem;
}

.blog-card .blog-card-meta {
    margin: 0 0 0.65rem;
}

.blog-card .blog-title {
    margin-bottom: 0.65rem !important;
    font-size: 1.1rem !important;
    line-height: 1.4;
}

.blog-card .blog-content > p {
    margin-bottom: 1rem !important;
    font-size: 0.9rem !important;
}

.blog-card .blog-author {
    padding-top: 0.85rem;
}

.blog-sidebar {
    top: 96px;
}

.blog-sidebar .sidebar-widget {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.kitab-dashboard-section {
    padding: clamp(2rem, 4vw, 3.5rem) 0 5rem;
}

/* Keep the About intro and course catalog aligned with the shared page surfaces. */
.native-zz-hero {
    background: var(--bg-light);
    padding-top: 120px;
}

.courses-section {
    background: var(--bg-light);
}

@media (max-width: 900px) {
    /* Preserve a visible theme control beside the menu button on touch layouts. */
    .header-actions {
        display: flex !important;
        flex: 0 0 auto;
        gap: 0.35rem;
        margin-left: auto;
    }

    .header-actions > :not(.theme-toggle) {
        display: none !important;
    }

    .header-actions > .theme-toggle {
        display: flex !important;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border-color);
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 1.05rem;
    }
}

.kitab-dashboard {
    grid-template-columns: minmax(210px, 235px) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.kitab-sidebar {
    padding: 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.kitab-sidebar .sidebar-section + .sidebar-section {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color);
}

.kitab-sidebar .sidebar-title {
    margin-bottom: 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
}

.kitab-sidebar .sidebar-link {
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
}

.kitab-sidebar .sidebar-link.active {
    background: var(--primary-light);
    color: var(--primary-color);
    box-shadow: none;
}

.kitab-sidebar .sidebar-link.active i {
    color: var(--primary-color);
}

.kitab-content {
    min-height: 0;
}

.kitab-content-header {
    gap: 1.25rem;
    margin-bottom: 1.4rem;
}

.kitab-header-copy {
    min-width: 0;
}

.kitab-content-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.kitab-header-copy p {
    font-size: 0.86rem;
}

.kitab-search-wrapper {
    flex: 0 1 310px;
    width: auto;
}

.kitab-search-wrapper input {
    min-height: 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.book-grid-horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.book-card-horizontal {
    gap: 1rem;
    padding: 1.1rem;
    background: var(--bg-card);
    border-radius: 1.1rem;
    box-shadow: var(--shadow-sm);
}

.horizontal-cover {
    width: 88px;
}

.horizontal-info {
    min-width: 0;
}

.horizontal-title {
    font-size: 1rem;
    line-height: 1.35;
}

.horizontal-author,
.horizontal-desc {
    font-size: 0.84rem;
    line-height: 1.5;
}

.horizontal-actions {
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-sidebar {
        position: static;
    }

    .kitab-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .kitab-sidebar {
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .blog-page-toolbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "heading" "search" "filters";
        gap: 1rem;
        margin-bottom: 1.4rem;
        padding: 1rem;
        border-radius: 1.1rem;
    }

    .blog-toolbar-heading {
        gap: 0.75rem;
    }

    .blog-toolbar-heading p {
        font-size: 0.82rem;
    }

    .blog-page-toolbar .blog-filters {
        margin-right: -0.2rem;
        padding-right: 0.2rem;
        scrollbar-width: none;
    }

    .blog-page-toolbar .blog-filters::-webkit-scrollbar {
        display: none;
    }

    .blog-page-toolbar .filter-pill {
        padding: 0.56rem 0.85rem;
        font-size: 0.82rem;
    }

    .featured-slide .featured-blog-img-wrapper {
        min-height: 0;
        height: 210px;
        flex: 0 0 210px;
    }

    .featured-slide .featured-blog-content {
        padding: 1.2rem 1.1rem 3.6rem;
    }

    .featured-carousel-dots {
        right: 0;
        bottom: 0.8rem;
        left: 0;
        justify-content: center;
    }

    .sub-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .blog-card .blog-content {
        padding: 1rem;
    }

    .kitab-dashboard-section {
        padding: 1.5rem 0 3rem;
    }

    .kitab-content-header {
        align-items: stretch;
    }

    .kitab-search-wrapper {
        flex-basis: 100%;
    }

    .book-grid-horizontal {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-page-toolbar.container {
        width: calc(100% - 2rem);
        margin: 0 auto 1.5rem;
        padding: 1.1rem !important;
    }

    .featured-slide {
        min-height: 0;
    }

    .featured-slide .featured-blog-img-wrapper {
        height: 176px;
        flex-basis: 176px;
    }

    .featured-carousel-container {
        margin-bottom: 1.5rem;
    }
}

/* Keep the hero topic field visually integrated with its search shell in dark mode. */
.ai-search-box input {
    background: transparent;
    border: 0;
    box-shadow: none;
}

[data-theme="dark"] .ai-search-box input {
    background-color: transparent !important;
    border-color: transparent;
}

.admin-maintenance-card {
    margin: 1.5rem 0 2rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-card);
}
.admin-maintenance-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.admin-maintenance-heading h3 { margin: 0 0 .25rem; color: var(--text-dark); }
.admin-maintenance-heading p { margin: 0; color: var(--text-light); line-height: 1.5; }
.admin-maintenance-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 14px; background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-card)); color: var(--primary-color); font-size: 1.15rem; }
.admin-maintenance-toggle { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; padding: .9rem 1rem; border: 1px solid var(--border-color); border-radius: .8rem; color: var(--text-dark); cursor: pointer; }
.admin-maintenance-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary-color); }
.admin-maintenance-card .form-group { margin-bottom: 1rem; }
.admin-maintenance-card .form-group > label { display: block; margin-bottom: .45rem; color: var(--text-dark); font-weight: 600; }
.admin-maintenance-card input:not([type="checkbox"]), .admin-maintenance-card select, .admin-maintenance-card textarea { width: 100%; box-sizing: border-box; padding: .75rem .9rem; border: 1px solid var(--border-color); border-radius: .7rem; background: var(--bg-main); color: var(--text-dark); font: inherit; }
.admin-maintenance-card :is(input, select, textarea):focus { outline: 2px solid color-mix(in srgb, var(--primary-color) 50%, transparent); outline-offset: 1px; }
.admin-maintenance-note { display: flex; gap: .5rem; align-items: center; margin: .25rem 0 1rem; color: var(--text-light); font-size: .9rem; }
#siteSettingsSaveStatus { display: block; margin-top: .75rem; color: var(--text-light); font-size: .9rem; }

body.site-maintenance-active { min-height: 100vh; overflow: hidden; background: var(--bg-main); }
body.site-maintenance-active > :not(#maintenanceScreen) { display: none !important; }
.maintenance-screen {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    text-align: center;
    color: var(--text-dark);
    background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--primary-color) 14%, var(--bg-main)), var(--bg-main) 68%);
}
.maintenance-brand { margin: 0 0 2rem; color: var(--primary-color); font-weight: 750; letter-spacing: .04em; }
.maintenance-emblem { width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 1.5rem; border-radius: 28px; background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-card)); color: var(--primary-color); font-size: 2rem; box-shadow: 0 16px 40px rgba(107, 45, 62, .12); }
.maintenance-screen h1 { max-width: 760px; margin: 0; color: var(--text-dark); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.15; }
.maintenance-message { max-width: 620px; margin: 1rem 0 1.75rem; color: var(--text-light); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.7; }
.maintenance-reload { min-height: 48px; padding: .75rem 1.35rem; border-radius: 999px; }

/* Hero topic search: prevent browser autofill from painting a bright field over the theme. */
.ai-search-box input:-webkit-autofill,
.ai-search-box input:-webkit-autofill:hover,
.ai-search-box input:-webkit-autofill:focus,
.search-overlay-input:-webkit-autofill,
.search-overlay-input:-webkit-autofill:hover,
.search-overlay-input:-webkit-autofill:focus,
#authModal .form-input:-webkit-autofill,
#authModal .form-input:-webkit-autofill:hover,
#authModal .form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-dark) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    caret-color: var(--text-dark);
    transition: background-color 9999s ease-out;
}
.ai-search-box input { color: var(--text-dark) !important; caret-color: var(--text-dark); }
[data-theme="dark"] .ai-search-box input:-webkit-autofill,
[data-theme="dark"] .ai-search-box input:-webkit-autofill:hover,
[data-theme="dark"] .ai-search-box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important; }

/* Search dialog: roomier result rows and a bounded, scrollable panel. */
.search-field-container {
    width: min(900px, calc(100vw - 2.5rem));
    max-width: 900px;
    max-height: min(86dvh, 900px);
    padding: clamp(1.25rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    text-align: left;
    border-radius: 1.5rem;
}
.search-input-wrapper { flex: 0 0 auto; margin-top: 2rem; }
.search-overlay-input,
.search-overlay-input:focus,
[data-theme="dark"] .search-overlay-input,
[data-theme="dark"] .search-overlay-input:focus {
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: .9rem;
    padding: .95rem 1rem .95rem 3.2rem;
    background: var(--bg-main) !important;
    color: var(--text-dark) !important;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 500;
    box-shadow: none;
}
.search-overlay-input:focus,
[data-theme="dark"] .search-overlay-input:focus { border-color: var(--primary-color); }
.search-overlay-input::placeholder { color: var(--text-light); opacity: .8; }
.search-results-container { min-height: 0; max-height: none; overflow-y: auto; margin-top: 1rem; padding: .25rem .25rem .5rem 0; }
.search-results-list { gap: .35rem; }
.search-result-item { padding: .85rem 1rem; border-color: transparent; }
.search-result-item:hover { background: var(--bg-light); border-color: var(--border-color); }
.search-result-icon { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-card)); color: var(--primary-color); }
.search-result-content { min-width: 0; gap: .15rem; }
.search-result-title { line-height: 1.4; overflow-wrap: anywhere; }
.search-result-type { font-size: .85rem; }
.search-highlight { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 14%, transparent); border-radius: .15rem; }
.search-overlay-close { z-index: 2; top: 1rem; right: 1rem; width: 42px; height: 42px; background: var(--bg-light); color: var(--text-dark); }

/* Sign-in and registration dialog. */
#authModal { overflow-y: auto; overscroll-behavior: contain; }
#authModal .modal-box {
    width: min(100%, 520px);
    max-width: 520px;
    max-height: min(92dvh, 900px);
    overflow-y: auto;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: 1.5rem;
    background: var(--bg-card);
    border-color: var(--border-color);
}
.auth-modal-heading { display: flex; align-items: center; gap: .9rem; padding: .15rem 2.75rem 1.25rem 0; }
.auth-modal-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-card)); color: var(--primary-color); font-size: 1.15rem; }
.auth-modal-heading h2 { margin: 0 0 .25rem; font-size: clamp(1.12rem, 3vw, 1.35rem); line-height: 1.3; color: var(--text-dark); }
.auth-modal-heading p { margin: 0; color: var(--text-light); font-size: .88rem; line-height: 1.45; }
#authModal .auth-tabs { gap: .35rem; padding: .3rem; margin-bottom: 1.35rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-light); }
#authModal .auth-tab-btn { min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 999px; color: var(--text-light); }
#authModal .auth-tab-btn.active { background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(107, 45, 62, .18); }
#authModal .form-group { margin-bottom: 1rem; }
#authModal .form-label { margin: 0 0 .4rem .15rem; font-weight: 600; font-size: .88rem; }
#authModal .form-input,
#authModal .form-input:focus { min-height: 48px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: .85rem; background: var(--bg-main) !important; color: var(--text-dark) !important; padding: .75rem 1rem; box-shadow: none; }
#authModal .form-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent); }
#authModal .form-input::placeholder { color: var(--text-light); opacity: .75; }
#authModal .toggle-password { top: 2.65rem; right: 1rem; }
#authModal .form-options { gap: .75rem; font-size: .85rem; }
#authModal .remember-me input { accent-color: var(--primary-color); }
#authModal .btn-block { min-height: 48px; border-radius: 999px; font-weight: 650; }
#authModal .modal-close { top: 1rem; right: 1rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-light); color: var(--text-dark); }
#authModal .modal-close:hover { background: var(--primary-color); color: #fff; }

@media (max-width: 600px) {
    .search-field-container { width: calc(100vw - 1.25rem); max-height: calc(100dvh - 1.25rem); padding: 1.15rem; border-radius: 1.15rem; }
    .search-input-wrapper { margin-top: 2.4rem; }
    .search-results-container { margin-top: .75rem; }
    .search-result-item { align-items: flex-start; gap: .7rem; padding: .75rem .55rem; }
    .search-result-icon { width: 40px; height: 40px; flex-basis: 40px; }
    #authModal { align-items: flex-end; padding: .5rem; }
    #authModal .modal-box { width: 100%; max-height: calc(100dvh - 1rem); padding: 1.25rem; border-radius: 1.25rem; }
    .auth-modal-heading { padding-bottom: 1rem; }
}


/* Keep dismiss controls circular despite the shared 44px minimum button height. */
.ad-close-btn,
.toast-close {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
}

.ad-close-btn {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.ad-close-btn i,
.toast-close i {
    line-height: 1;
    pointer-events: none;
}


/* Keep the global promo copy centered independently of its dismiss control. */
.global-top-ad-bar .ad-bar-container {
    width: 100%;
    box-sizing: border-box;
}

.global-top-ad-bar .ad-content {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-inline: 4rem;
}

.global-top-ad-bar .ad-text {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
}

@media (max-width: 600px) {
    .global-top-ad-bar .ad-content {
        gap: 0.5rem;
        padding-inline: 3rem;
    }

    .global-top-ad-bar .ad-text {
        overflow-wrap: anywhere;
    }
}


/* Distinguish the administrator account from a regular member in the mobile menu. */
@media (max-width: 900px) {
    .mobile-profile-area.is-admin {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 14%, var(--bg-card)), var(--bg-card));
        border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    }

    .mobile-profile-area.is-admin .profile-avatar-initial {
        background: var(--primary-color);
        box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 22%, transparent);
    }

    .mobile-profile-role {
        display: inline-flex;
        margin-top: 0.35rem;
        color: var(--primary-color);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }

    .mobile-nav-links.is-admin-menu a:first-child {
        color: var(--primary-color);
        font-weight: 750;
    }

    .mobile-nav-links.is-admin-menu a:first-child i {
        color: var(--primary-color);
    }
}

/* =========================================
   Font FatwaUlama — skala bobot judul & teks Arab
   ========================================= */
h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 800; }
h3, .h3 { font-weight: 700; }
h4, .h4 { font-weight: 700; }
h5, .h5 { font-weight: 600; }
h6, .h6 { font-weight: 600; }

/* Teks Arab (perintah user 2026-11-13): ayat, hadits, dan nukilan di blok
   dalil tetap memakai LPMQ Isep Misbah (font mushaf Kemenag) — diatur pada
   aturan .dalil-block .dalil-arab dan .hd-quote. Teks Arab selain itu
   memakai IBM Plex Sans Arabic, font Arab situs studyinsaudi.sa. */
.arabic, [lang="ar"], [dir="rtl"] {
    font-family: "IBM Plex Sans Arabic", "Amiri", "LPMQ Isep Misbah", "Plus Jakarta Sans", sans-serif;
    line-height: 2;
}

/* =========================================
   Halaman depan: semua teks lebih bold (permintaan user)
   Berlaku khusus index.html lewat class .home-bold di <body>
   ========================================= */
body.home-bold {
    font-weight: 600;
}
body.home-bold h1, body.home-bold h2 {
    font-weight: 800;
}
body.home-bold h3, body.home-bold h4 {
    font-weight: 700;
}
body.home-bold h5, body.home-bold h6 {
    font-weight: 700;
}

/* ============================================================
   BINCANG ILMU — Concept layer (Behance agency concept)
   Forest green #6B2D3E + electric lime #D4AF37, light surfaces,
   pill controls, big radii. Scoped to the homepage only and to
   the light theme; other pages keep the maroon identity.
   ============================================================ */
html:not([data-theme="dark"]) body.home-concept {
    --primary-color: #6B2D3E;
    --primary-dark: #4A1D2B;
    --primary-light: rgba(107, 45, 62, 0.08);
    --secondary-color: #2D1B1E;
    --text-dark: #2D1B1E;
    --text-light: #574A4D;
    --accent-lime: #D4AF37;
    --forest: #6B2D3E;
    --forest-deep: #4A1D2B;
    --hairline: rgba(45, 27, 30, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: 1px solid rgba(45, 27, 30, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(107, 45, 62, 0.07);
    background-color: #FDF8F4;

    .concept-topbar {
        background: var(--forest-deep);
        color: #F0E2D8;
        font-size: 0.82rem;
        padding: 0.5rem 0;
        position: relative;
        z-index: 1001;
    }
    .concept-topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .concept-topbar .ct-right a { color: var(--accent-lime); font-weight: 600; text-decoration: none; }
    .concept-topbar .ct-right a:hover { text-decoration: underline; }

    .header { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--hairline); box-shadow: none; }
    .nav-link { color: var(--text-dark); }
    .nav-link:hover, .nav-link.active { color: var(--forest); }
    .btn-primary {
        background: var(--forest) !important;
        color: var(--accent-lime) !important;
        border-color: var(--forest) !important;
        border-radius: 999px;
    }
    .btn-primary:hover { background: var(--forest-deep) !important; }
    .btn-outline { border-color: var(--forest); color: var(--forest); border-radius: 999px; }
    .btn-outline:hover { background: var(--forest); color: var(--accent-lime); }

    .hero { background: #FDF8F4; position: relative; overflow: hidden; }
    .hero::before {
        content: ""; position: absolute; left: 2rem; bottom: 3rem; width: 180px; height: 120px;
        background-image: radial-gradient(circle, #D8C6B8 1.6px, transparent 1.7px);
        background-size: 20px 20px; opacity: 0.7; pointer-events: none;
    }
    .hero .badge {
        background: #FFFFFF; border: 1px solid var(--hairline); color: var(--forest);
        border-radius: 999px; font-weight: 600;
    }
    .hero .badge i { color: var(--forest); }
    .hero-title { color: var(--text-dark); letter-spacing: -0.01em; }
    .hero-title .text-gradient {
        background: none; -webkit-background-clip: initial; background-clip: initial;
        color: var(--forest); border-bottom: 7px solid var(--accent-lime);
    }
    .hero-description { color: var(--text-light); }
    .ai-search-box {
        background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 999px;
        box-shadow: 0 14px 34px rgba(107, 45, 62, 0.08);
    }
    .ai-search-box .btn-ai-search { border-radius: 999px; }
    .ai-search-tags a {
        background: #FFFFFF; border: 1px solid var(--hairline); color: var(--text-dark); border-radius: 999px;
    }
    .ai-search-tags a:hover { background: var(--forest); color: var(--accent-lime); }
    .hero-stats .stat-number { color: var(--forest); }
    .hero-stats .stat-item + .stat-item { border-left: 3px solid var(--accent-lime); padding-left: 1.4rem; }
    .hero-stats .stat-item::after { display: none; }

    .hero-image .main-img, .hero-image .image-wrapper { border-radius: 28px; }
    .hero-image .hero-slide img { filter: saturate(1.07) contrast(1.02) drop-shadow(0 24px 28px rgba(74, 29, 43, 0.25)); }
    .floating-card {
        background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 20px;
        box-shadow: 0 16px 36px rgba(107, 45, 62, 0.1);
    }
    .floating-card > i {
        background: var(--accent-lime); color: var(--forest);
        border-radius: 14px; padding: 0.65rem; font-size: 1.05rem;
    }
    .concept-stamp {
        position: absolute; left: -14px; bottom: 26px; width: 118px; height: 118px;
        background: var(--forest); border-radius: 50%; z-index: 6;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 16px 34px rgba(74, 29, 43, 0.3);
    }
    .concept-stamp svg { position: absolute; inset: 7px; animation: stamp-spin 26s linear infinite; }
    .concept-stamp text { fill: #F7EAE0; font-size: 10.2px; font-weight: 600; letter-spacing: 2.6px; }
    .concept-stamp .stamp-core { color: var(--accent-lime); font-size: 1.5rem; }

    .concept-marquee { background: var(--forest); overflow: hidden; padding: 0.95rem 0; }
    .cm-track {
        display: flex; gap: 2.4rem; white-space: nowrap; width: max-content;
        animation: cm-scroll 30s linear infinite;
        color: #FFFFFF; font-weight: 600; font-size: 1.02rem;
    }
    .cm-track b { color: var(--accent-lime); font-weight: 400; }

    .native-zz-section .list-icon { background: var(--accent-lime); color: var(--forest); }
    .native-zz-section .badge { background: #FFFFFF; border: 1px solid var(--hairline); color: var(--forest); border-radius: 999px; }

    #blog { background: var(--forest); position: relative; }
    #blog .section-title, #blog h2 { color: #FFFFFF; }
    #blog .section-subtitle, #blog .section-header p { color: #E4D5CE; }
    #blog .badge-outline { border-color: rgba(212,175,55,0.5); color: var(--accent-lime); }
    #blog .blog-card {
        background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14);
        border-radius: 24px; box-shadow: none;
    }
    #blog .blog-card h3, #blog .blog-card h3 a, #blog .blog-card .blog-title, #blog .blog-card .blog-title a { color: #FFFFFF; }
    #blog .blog-card p { color: #E4D5CE; }
    #blog .blog-card .author-name { color: #FFFFFF; }
    #blog .blog-card .blog-date-text { color: #B9A49C; }

    .unified-ads-section .cta-box {
        background: var(--forest); border-radius: 28px;
    }
    .unified-ads-section .cta-content h2 { color: #FFFFFF; }
    .unified-ads-section .cta-content p { color: #EBDCD4; }
    .unified-ads-section .cta-content p small { color: var(--accent-lime); }
    .unified-ads-section .cta-decoration i { color: rgba(212,175,55,0.22); }

    .footer { background: var(--forest-deep); }
    .footer a:hover { color: var(--accent-lime); }
}

/* Concept layer — fixes round 2 (still homepage + light theme only) */
html:not([data-theme="dark"]) body.home-concept {
    .hero-title .text-gradient { -webkit-text-fill-color: var(--forest); }
    
    .rotating-ring, .ring-line, .ring-line-2, .ring-line-3 { border-color: rgba(107, 45, 62, 0.18) !important; }
    #blog .blog-badge-category { background: var(--accent-lime); color: var(--forest); font-weight: 700; }
    #blog .btn-blog-pill { background: var(--accent-lime); color: var(--forest); }
    #blog .btn-blog-pill:hover { background: #FFFFFF; color: var(--forest); }
    #blog .blog-thumb img { filter: grayscale(1); }
    .unified-ads-section .cta-box { background-image: none; }
    .footer { color: #E4D5CE; }
    .footer h4 { color: #FFFFFF; }
    .footer a { color: #E4D5CE; }
    .footer p { color: #C4ADA3; }
    .footer .logo-footer { filter: brightness(0) invert(1); }
    .footer .social-links a { background: rgba(255,255,255,0.09); color: #FFFFFF; }
    .footer .social-links a:hover { background: var(--accent-lime); color: var(--forest); }
    .footer-bottom { color: #B9A49C; border-top-color: rgba(255,255,255,0.12); }
}

/* Concept layer — fixes round 3 */
html:not([data-theme="dark"]) body.home-concept {
    --bg-main: #FDF8F4;
    --bg-light: #FDF8F4;
    .text-gradient {
        background: none; -webkit-background-clip: initial; background-clip: initial;
        color: var(--forest); -webkit-text-fill-color: var(--forest);
    }
}

/* ============================================================
   Concept rollout — shared chrome for inner pages
   (body.page-concept): same maroon/gold/cream translation of
   the Behance concept as the homepage. Light theme only.
   ============================================================ */
html:not([data-theme="dark"]) body.page-concept {
    --accent-gold: #D4AF37;
    --forest: #6B2D3E;
    --forest-deep: #4A1D2B;
    --hairline: rgba(45, 27, 30, 0.1);
    --bg-main: #FDF8F4;
    --bg-light: #FDF8F4;
    background-color: #FDF8F4;

    .concept-topbar {
        background: var(--forest-deep);
        color: #F0E2D8;
        font-size: 0.82rem;
        padding: 0.5rem 0;
        position: relative;
        z-index: 1001;
    }
    .concept-topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .concept-topbar .ct-right a { color: var(--accent-gold); font-weight: 600; text-decoration: none; }
    .concept-topbar .ct-right a:hover { text-decoration: underline; }

    .header { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--hairline); box-shadow: none; }
    .btn-primary {
        background: var(--forest) !important;
        color: #FDF8F4 !important;
        border-color: var(--forest) !important;
        border-radius: 999px;
    }
    .btn-primary:hover { background: var(--forest-deep) !important; }
    .btn-outline { border-color: var(--forest); color: var(--forest); border-radius: 999px; }
    .btn-outline:hover { background: var(--forest); color: #FDF8F4; }

    .text-gradient {
        background: none; -webkit-background-clip: initial; background-clip: initial;
        color: var(--forest); -webkit-text-fill-color: var(--forest);
    }

    .page-header { background: #FDF8F4; }
    .page-header .section-title { letter-spacing: -0.01em; }
    .page-header .badge-outline {
        background: #FFFFFF; border: 1px solid var(--hairline);
        color: var(--forest); border-radius: 999px; font-weight: 600;
    }

    .blog-card { border-radius: 24px; }
    .blog-badge-category { background: var(--forest); color: #FDF8F4; }
    .btn-blog-pill { background: var(--forest); color: #FDF8F4; border-radius: 999px; }
    .btn-blog-pill:hover { background: var(--accent-gold); color: #2D1B1E; }
    .blog-thumb img { filter: grayscale(1); }

    .footer { background: var(--forest-deep); color: #E4D5CE; }
    .footer h4 { color: #FFFFFF; }
    .footer a { color: #E4D5CE; }
    .footer a:hover { color: var(--accent-gold); }
    .footer p { color: #C4ADA3; }
    .footer .logo-footer { filter: brightness(0) invert(1); }
    .footer .social-links a { background: rgba(255,255,255,0.09); color: #FFFFFF; }
    .footer .social-links a:hover { background: var(--accent-gold); color: var(--forest-deep); }
    .footer-bottom { color: #B9A49C; border-top-color: rgba(255,255,255,0.12); }
}

@keyframes stamp-spin { to { transform: rotate(360deg); } }
@keyframes cm-scroll { to { transform: translateX(-50%); } }

/* Layout fix (audit 2026-11-12): kitab cover fallback titles clipped on
   narrow covers — smaller type, tighter padding so long words fit. */
.cover-fallback-title { font-size: 0.72rem; padding: 8px 6px; letter-spacing: 0.2px; }
/* Uniform top clearance on inner pages (80px header + breathing room,
   matching the homepage hero's 128px offset) */
html:not([data-theme="dark"]) body.page-concept {
    .page-header { padding-top: 128px; }
    .blog-header { padding-top: 128px; }
}

/* Breathing room between the dark blog section and the quote carousel —
   it previously sat flush against the section above (0px gap). */
html:not([data-theme="dark"]) body.home-concept .unified-ads-section { padding-top: 4rem; }

/* Concept layer — FULL rollout to inner pages: the homepage's design
   language applied uniformly (extra-bold titles with gold underline,
   marquee strip, hatch-edged dark bands, one card radius, gold-accent
   buttons) so every page shares one theme. */
html:not([data-theme="dark"]) body.page-concept {
    .btn-primary { color: var(--accent-gold) !important; }
    .btn-outline:hover { color: var(--accent-gold); }

    .page-header .section-title { font-weight: 800; letter-spacing: -0.02em; }
    .page-header .section-title .text-gradient,
    .page-header .section-title .text-primary { border-bottom: 3px solid var(--accent-gold); padding-bottom: 3px; }
    .native-zz-title .text-gradient { border-bottom: 6px solid var(--accent-gold); }
    .native-zz-title { font-weight: 800; letter-spacing: -0.02em; }
    .section-title { font-weight: 800; letter-spacing: -0.02em; }
    .blog-header .hero-title { font-weight: 800; letter-spacing: -0.02em; }

    .concept-marquee { background: var(--forest); overflow: hidden; padding: 0.95rem 0; }
    .cm-track {
        display: flex; gap: 2.4rem; white-space: nowrap; width: max-content;
        animation: cm-scroll 30s linear infinite;
        color: #FFFFFF; font-weight: 600; font-size: 1.02rem;
    }
    .cm-track b { color: var(--accent-gold); font-weight: 400; }

    .book-card-horizontal, .fatwa-premium-row, .sidebar-section,
    .fatwa-toolbar { border-radius: 24px; }

    /* Kitab sidebar sections are plain groups inside one card, not cards
       themselves: the theme border + the 24px radius above drew a floating
       rounded outline above "Kategori Ilmu" (flagged by the user). Keep
       only the straight divider between sections. */
    .kitab-sidebar .sidebar-section {
        border: none; border-radius: 0; background: transparent;
    }
    .kitab-sidebar .sidebar-section + .sidebar-section {
        border-top: 1px solid var(--border-color);
    }

    .featured-carousel-container { border: 2px solid var(--accent-gold); border-radius: 24px; }

}

/* About: the support section follows the mission zig-zag directly —
   trim its top padding so the two sections don't stack into a void. */
html:not([data-theme="dark"]) body.page-concept #platform-support { padding-top: 3rem; }

/* Concept layer — DARK theme: the same maroon/gold brand after dark.
   The base dark palette accents everything rose (#C98295) and the
   signature elements (marquee band, maroon blog section, hatch edges)
   had no dark styling at all. On concept pages the accent becomes
   gold and those elements keep their identity. */
html[data-theme="dark"] body.home-concept,
html[data-theme="dark"] body.page-concept {
    --primary-color: #D4AF37;
    --primary-dark: #B8941F;
    --primary-light: rgba(212, 175, 55, 0.16);
    --accent-gold: #D4AF37;
    --forest: #6B2D3E;
    --forest-deep: #4A1D2B;

    .text-gradient {
        background: none; -webkit-background-clip: initial; background-clip: initial;
        color: var(--accent-gold); -webkit-text-fill-color: var(--accent-gold);
    }
    .btn-primary {
        background: var(--forest) !important; border-color: var(--forest) !important;
        color: var(--accent-gold) !important; border-radius: 999px;
    }
    .btn-primary:hover { background: var(--forest-deep) !important; }
    .btn-outline { border-color: rgba(212,175,55,0.55); color: var(--accent-gold); border-radius: 999px; }
    .btn-outline:hover { background: var(--forest); color: var(--accent-gold); }

    .concept-marquee { background: var(--forest-deep); overflow: hidden; padding: 0.95rem 0; }
    .cm-track {
        display: flex; gap: 2.4rem; white-space: nowrap; width: max-content;
        animation: cm-scroll 30s linear infinite;
        color: #FFFFFF; font-weight: 600; font-size: 1.02rem;
    }
    .cm-track b { color: var(--accent-gold); font-weight: 400; }

    .blog-thumb img { filter: grayscale(1); }
    .footer { background: #1E0A10; }
}

html[data-theme="dark"] body.page-concept {
    .page-header .section-title .text-primary,
    .page-header .section-title .text-gradient {
        color: var(--accent-gold); -webkit-text-fill-color: var(--accent-gold);
        border-bottom: 6px solid var(--accent-gold);
    }
    .native-zz-title .text-gradient { border-bottom: 6px solid var(--accent-gold); }
    .badge-outline {
        border-color: rgba(212,175,55,0.45); color: var(--accent-gold);
        background: rgba(212,175,55,0.07);
    }
    .featured-carousel-container { border: 2px solid var(--accent-gold); border-radius: 24px; }
    .btn-blog-pill { background: var(--accent-gold); color: #2D1B1E; }
    .btn-blog-pill:hover { background: #FFFFFF; color: var(--forest); }
    .blog-badge-category { background: var(--accent-gold); color: #2D1B1E; font-weight: 700; }
    .ad-banner-custom { background: linear-gradient(135deg, #6B2D3E 0%, #4A1D2B 100%); }
    .ad-banner-custom .btn-ad-action { background: #FDF8F4; color: #6B2D3E; }
    .ad-banner-custom .btn-ad-action:hover { background: var(--accent-gold); color: #2D1B1E; }
    .native-zz-stat h3 { color: var(--accent-gold); }
}

html[data-theme="dark"] body.home-concept {
    .hero-title .text-gradient { border-bottom: 7px solid var(--accent-gold); }
    .hero .badge {
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
        color: #F3E3C0; border-radius: 999px;
    }
    .hero-stats .stat-number { color: var(--accent-gold); }
    .hero-stats .stat-item + .stat-item { border-left: 3px solid var(--accent-gold); padding-left: 1.4rem; }
    .hero-stats .stat-item::after { display: none; }
    .floating-card > i { background: var(--accent-gold); color: var(--forest-deep); }
    .hero-image .hero-slide img { filter: saturate(1.07) contrast(1.02) drop-shadow(0 24px 28px rgba(74, 29, 43, 0.25)); }

    #blog { background: #38121E; position: relative; }
    #blog .section-title, #blog h2 { color: #FFFFFF; }
    #blog .section-subtitle, #blog .section-header p { color: #E4D5CE; }
    #blog .badge-outline {
        border-color: rgba(212,175,55,0.5); color: var(--accent-gold);
        background: transparent;
    }
    #blog .blog-card {
        background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14);
        border-radius: 24px; box-shadow: none;
    }
    #blog .blog-card h3, #blog .blog-card h3 a, #blog .blog-card .blog-title, #blog .blog-card .blog-title a { color: #FFFFFF; }
    #blog .blog-card p { color: #E4D5CE; }
    #blog .blog-badge-category { background: var(--accent-gold); color: var(--forest-deep); font-weight: 700; }
    #blog .btn-blog-pill { background: var(--accent-gold); color: var(--forest-deep); }
    #blog .btn-blog-pill:hover { background: #FFFFFF; color: var(--forest); }
    .unified-ads-section .cta-box { background: #38121E; background-image: none; border-radius: 28px; }
    /* Same breathing room above the quote carousel as in light mode —
       without it the section sits flush against the blog band (0px). */
    .unified-ads-section { padding-top: 4rem; }
    /* .cta-content inherits var(--bg-white), which is near-black in the
       dark palette — pin the quote text to light colours explicitly. */
    .unified-ads-section .cta-content { color: #FDF8F4; }
    .unified-ads-section .cta-content h2 { color: #FFFFFF; }
    .unified-ads-section .cta-content p { color: #EBDCD4; }
    .unified-ads-section .cta-content p small { color: var(--accent-gold); }
    .unified-ads-section .cta-decoration i { color: rgba(212,175,55,0.22); }
}

/* ================================================
   About — Editorial layout (user-chosen reference A)
   Stats as a number row under the banner, Visi as a
   centred pull-quote, Misi as numbered cards, and
   the donation card as a dark maroon band.
   ================================================ */
/* Banner 2 — Kartu Melayang: stat cards overlap the banner's bottom
   edge, with generous room before the marquee below. */
body.page-concept .about-stats-cards {
    display: flex; gap: 1.2rem;
    max-width: 840px; margin: -52px auto 3.4rem;
    padding: 0 1rem; position: relative; z-index: 2;
}
body.page-concept .about-stats-cards .native-zz-stat {
    flex: 1; background: #fff;
    border: 1px solid rgba(45, 27, 30, 0.08); border-radius: 22px;
    box-shadow: 0 16px 34px rgba(74, 29, 43, 0.13);
    padding: 1.5rem 1rem 1.3rem;
}
body.page-concept .about-stats-cards .stat-tick {
    display: block; width: 34px; height: 4px;
    background: var(--accent-gold); border-radius: 2px;
    margin: 0 auto 0.8rem;
}
body.page-concept .about-stats-cards .native-zz-stat h3 {
    font-size: 2.2rem; color: #6B2D3E; margin-bottom: 0.15rem;
}
body.page-concept .about-stats-cards .native-zz-stat p { color: #574A4D; opacity: 1; }

body.page-concept .about-visi-mark { color: var(--accent-gold); font-size: 2.3rem; line-height: 1; }
body.page-concept .about-visi-label {
    display: block; margin-top: 1rem;
    color: #6B2D3E; font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.16em; text-transform: uppercase;
}
body.page-concept .about-visi-quote {
    max-width: 840px; margin: 1.1rem auto 0;
    font-size: 1.62rem; font-weight: 700; line-height: 1.55;
    letter-spacing: -0.01em; color: var(--text-dark);
}

body.page-concept .about-misi { padding-top: 0; }
body.page-concept .about-misi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
body.page-concept .about-misi-card {
    background: #fff; border: 1px solid rgba(45, 27, 30, 0.09);
    border-radius: 24px; padding: 2rem;
}
body.page-concept .about-misi-num { font-size: 2rem; font-weight: 800; color: var(--accent-gold); line-height: 1; }
body.page-concept .about-misi-card h3 { font-size: 1.15rem; margin: 0.7rem 0 0.5rem; }
body.page-concept .about-misi-card p { color: #574A4D; line-height: 1.65; font-size: 0.95rem; }

/* Donasi 3 — Kartu Terang: white card, rehal photo, maroon button.
   The DUKUNG KAMI label is a ::before because the card's inner markup
   is rendered by renderDonationCard() in script.js. */
body.page-concept #platform-support .donation-card {
    background: #fff;
    border: 1.5px solid rgba(107, 45, 62, 0.22); border-radius: 28px;
    color: var(--text-dark);
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 1.6rem; padding: 1.6rem; align-items: center;
    max-width: 880px;
    box-shadow: 0 16px 36px rgba(74, 29, 43, 0.08);
    position: relative;
}
body.page-concept #platform-support .donation-card-content { padding: 0; gap: 0.8rem; }
body.page-concept #platform-support .donation-card-content h3 { font-size: 1.55rem; }
body.page-concept #platform-support .donation-card-content p { font-size: 1rem; line-height: 1.7; }
body.page-concept #platform-support .donation-card-image {
    min-height: 218px; height: 218px; border-radius: 20px; overflow: hidden; background: transparent;
}
body.page-concept #platform-support .donation-card-image img {
    width: 100%; height: 100%; min-height: 0; object-fit: cover;
}
body.page-concept #platform-support .donation-card-content::before {
    content: "DUKUNG KAMI"; display: block;
    color: #6B2D3E; font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.13em; margin-bottom: 0.55rem;
}
body.page-concept #platform-support .donation-card-content h3 { color: var(--text-dark); }
body.page-concept #platform-support .donation-card-content p { color: #574A4D; }
body.page-concept #platform-support .donation-card-content small { color: #8A767B; }
/* The donation button is disabled until a link exists, but the base
   theme fades disabled buttons to 0.7 opacity, which made it a pale
   mauve unlike every other primary button. Keep the exact primary
   colours; only the cursor signals it is inactive. */
body.page-concept #platform-support .donation-card-content button:disabled {
    opacity: 1; background: #6B2D3E; color: var(--accent-gold);
    border-color: transparent; cursor: not-allowed;
}
@media (max-width: 900px) {
    body.page-concept #platform-support .donation-card {
        grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; padding: 1.8rem;
    }
}

/* Dark twins */
html[data-theme="dark"] body.page-concept .about-stats-cards .native-zz-stat {
    background: #2A1218; border-color: rgba(212, 175, 55, 0.18);
}
html[data-theme="dark"] body.page-concept .about-stats-cards .native-zz-stat p { color: #CDB9AF; }
html[data-theme="dark"] body.page-concept .about-visi-label { color: var(--accent-gold); }
html[data-theme="dark"] body.page-concept .about-visi-quote { color: #FDF8F4; }
html[data-theme="dark"] body.page-concept .about-misi-card {
    background: #2A1218; border-color: rgba(212, 175, 55, 0.18);
}
html[data-theme="dark"] body.page-concept .about-misi-card h3 { color: #FDF8F4; }
html[data-theme="dark"] body.page-concept .about-misi-card p { color: #CDB9AF; }
html[data-theme="dark"] body.page-concept #platform-support .donation-card {
    background: #2A1218; border-color: rgba(212, 175, 55, 0.28);
    box-shadow: none;
}
html[data-theme="dark"] body.page-concept #platform-support .donation-card-content::before { color: var(--accent-gold); }
html[data-theme="dark"] body.page-concept #platform-support .donation-card-content h3 { color: #FDF8F4; }
html[data-theme="dark"] body.page-concept #platform-support .donation-card-content p { color: #CDB9AF; }
html[data-theme="dark"] body.page-concept #platform-support .donation-card-content small { color: rgba(253, 248, 244, 0.55); }

/* About editorial — small screens */
@media (max-width: 768px) {
    body.page-concept .about-stats-cards { gap: 0.7rem; margin-top: -40px; padding: 0 0.4rem; }
    body.page-concept .about-stats-cards .native-zz-stat { padding: 1rem 0.5rem 0.9rem; }
    body.page-concept .about-stats-cards .native-zz-stat h3 { font-size: 1.6rem; }
    body.page-concept .about-visi-quote { font-size: 1.28rem; }
    body.page-concept .about-misi-grid { grid-template-columns: 1fr; }
    body.page-concept #platform-support .donation-card { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.6rem; }
    body.page-concept #platform-support .donation-card-image { min-height: 200px; height: 200px; }
}

/* Dalil blocks: Qur'an verses & hadith set apart with their translation
   (user rule 2026-11-12). Used inside fatwa/blog article content. */
.dalil-block {
    margin: 1.4rem 0;
    padding: 1.1rem 1.3rem;
    background: #FBF6EC;
    border: 1px solid #EADFC2;
    border-inline-start: 4px solid var(--accent-gold, #D4AF37);
    border-radius: 14px;
}
.dalil-block .dalil-arab {
    font-family: "LPMQ Isep Misbah", "Amiri", serif;
    margin: 0 0 0.55rem;
    font-size: 1.32rem;
    line-height: 2.1;
    text-align: right;
    color: #4A1D2B;
}
.hd-quote {
    font-family: "LPMQ Isep Misbah", "Amiri", serif;
}
.dalil-block .dalil-terjemah {
    margin: 0;
    font-style: italic;
    font-size: 0.97rem;
    line-height: 1.75;
    color: #6D5C4D;
}
html[data-theme="dark"] .dalil-block {
    background: rgba(212, 175, 55, 0.07);
    border-color: rgba(212, 175, 55, 0.32);
}
html[data-theme="dark"] .dalil-block .dalil-arab { color: #F5E7C6; }
html[data-theme="dark"] .dalil-block .dalil-terjemah { color: #CBbFA9; }

/* Header social icons — replacing the Masuk/Daftar buttons (user order
   2026-11-12; auth is not part of the static site). */
.header-socials { display: inline-flex; align-items: center; gap: 0.45rem; }
.header-socials a {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #6B2D3E; color: #6B2D3E; font-size: 0.95rem;
    text-decoration: none; transition: all 0.25s ease;
}
.header-socials a:hover { background: #6B2D3E; color: #D4AF37; }
html[data-theme="dark"] .header-socials a { border-color: rgba(212, 175, 55, 0.55); color: #D4AF37; }
html[data-theme="dark"] .header-socials a:hover { background: #D4AF37; color: #2A1210; }

.mobile-auth-area .header-socials { width: 100%; justify-content: center; padding: 0.4rem 0; }

/* Donation section margins balanced (user flag): the light-only 3rem
   top padding vs the base ~3.9rem bottom padding — and a larger base
   value in dark — left the card floating in uneven whitespace. Same
   breathing room above and below the card in both themes now. */
html:not([data-theme="dark"]) body.page-concept #platform-support,
html[data-theme="dark"] body.page-concept #platform-support {
    padding-top: 2.75rem; padding-bottom: 2.75rem;
}

/* Donation card: equal padding lines (user flag "paddingnya nggak
   sama"). The grid centered the 218px image against a taller text
   column, so the photo floated with extra space above/below while
   the text touched the padding. Both columns now stretch to the
   same height and the text centers inside its column. */
html:not([data-theme="dark"]) body.page-concept #platform-support .donation-card,
html[data-theme="dark"] body.page-concept #platform-support .donation-card {
    align-items: stretch;
}
html:not([data-theme="dark"]) body.page-concept #platform-support .donation-card-image,
html[data-theme="dark"] body.page-concept #platform-support .donation-card-image {
    height: auto; min-height: 218px;
}
html:not([data-theme="dark"]) body.page-concept #platform-support .donation-card-content,
html[data-theme="dark"] body.page-concept #platform-support .donation-card-content {
    justify-content: center;
}

/* Fix (user report 2026-11-12): the word "Terbaru" in the homepage blog
   band title was invisible — .text-primary resolves to maroon #6B2D3E,
   exactly the band's background colour. On the maroon band the accent
   word takes gold instead, both themes. */
html:not([data-theme="dark"]) body.home-concept #blog .section-title .text-primary,
html[data-theme="dark"] body.home-concept #blog .section-title .text-primary {
    color: #D4AF37 !important;
}

/* Fix (user report 2026-11-12): blog cards in the Artikel Terbaru grid
   were uneven ("sejajar") — a later override set .blog-card to
   align-self:start + height:auto, so each card took its own content
   height and the Admin/date footers landed at different levels.
   Stretch the cards in this grid so rows share one height and the
   footers (margin-top:auto in .blog-content) align. */
.sub-blog-grid .blog-card {
    align-self: stretch;
    height: 100%;
}

/* === Artikel Unggulan Model 2 — Majalah (pilihan pengguna 2026-11-12) === */
.featured-eyebrow { color: #B08A1E; font-weight: 800; font-size: .8rem; letter-spacing: .22em; margin-bottom: .9rem; }
.featured-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 1.15rem 0 1.5rem; }
.f-chip { border: 1.5px solid #D9C6A5; color: #6B2D3E; font-size: .82rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
html[data-theme="dark"] .f-chip { border-color: rgba(212,175,55,.55); color: #E9D9AE; }
.featured-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.featured-foot .blog-author { margin-bottom: 0 !important; }
@media (min-width: 901px) {
    .featured-blog-card.featured-slide { flex-direction: row-reverse; }
    .featured-blog-img-wrapper { flex: 0 0 44%; min-height: 330px; border-radius: 0; }
    .featured-blog-content { justify-content: flex-start; }
}

/* === Header marun (pilihan pengguna 2026-11-12) === */
.header, .header.scrolled { background: #6B2D3E !important; box-shadow: 0 2px 18px rgba(74,29,43,.30); }
html[data-theme="dark"] .header, html[data-theme="dark"] .header.scrolled { background: #4A1D2B !important; }
.header .brand-logo-image { filter: brightness(0) invert(1) !important; }
.header .theme-toggle, .header .search-toggle { color: #F7EEDD !important; }
.header .mobile-toggle { color: #F7EEDD !important; border: none !important; }
@media (max-width: 900px) {
    .header .header-actions > .theme-toggle { background: transparent !important; border: none !important; color: #F7EEDD !important; }
}
.header .header-socials a { border-color: rgba(212,175,55,.75) !important; color: #F5E7C8 !important; background: transparent !important; }
.header .header-socials a:hover { background: #D4AF37 !important; color: #4A1D2B !important; }
@media (min-width: 901px) {
    .header .nav-link { color: #F7EEDD !important; }
    .header .nav-link:hover, .header .nav-link.active { color: #D4AF37 !important; }
    .header .nav-link::after { background: #D4AF37 !important; }
}

/* Beranda — pencarian mobile satu baris (perintah pengguna 2026-11-12):
   input dan tombol Telusuri sejajar dalam satu pill seperti desktop,
   chip topik membungkus rapi dan tidak terpotong di layar sempit. */
@media (max-width: 600px) {
    body.home-concept .ai-search-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem;
    }
    body.home-concept .ai-search-box input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    body.home-concept .ai-search-box .btn-ai-search {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding-inline: 0.95rem;
    }
    body.home-concept .ai-search-tags { flex-wrap: wrap; justify-content: center; max-width: 100%; }
    body.home-concept .ai-search-tags a { white-space: nowrap; }
}

/* Chatbot — dukungan mobile (perintah pengguna 2026-11-12): jendela lebih
   lega di layar kecil, kolom ketik 16px agar tidak auto-zoom di iOS,
   target sentuh nyaman. */
@media (max-width: 600px) {
    .ai-chat-window {
        width: calc(100vw - 1rem);
        right: 0.5rem;
        height: min(72dvh, 640px);
    }
    .ai-chat-input-area input { font-size: 16px; }
    .ai-chat-input-area .ai-send-btn { min-width: 44px; min-height: 44px; }
    .quick-prompts { flex-wrap: wrap; }
    .quick-prompts button { min-height: 38px; }
}

/* Fatwa Terbaru + sidebar fatwa di mobile (perintah pengguna 2026-11-12):
   widget kedua di sidebar diberi jarak, dan khusus halaman fatwa widget
   sidebar ditampilkan juga pada ≤900px (aturan lama "Mobile Responsiveness"
   menyembunyikan semua .sidebar-widget di lebar itu); posisinya tetap di
   bawah daftar fatwa mengikuti aturan order yang sudah ada. */
.fatwa-sidebar .sidebar-widget + .sidebar-widget {
    margin-top: 1.5rem;
}
/* Widget di dalam sidebar fatwa tidak boleh sticky satu-satu: aturan dasar
   .sidebar-widget punya position:sticky top:100px, sehingga widget kedua
   menumpuk widget pertama saat halaman digulir. Yang sticky cukup
   aside-nya (desktop); isinya mengalir normal. */
.fatwa-sidebar .sidebar-widget {
    position: static;
}
@media (max-width: 900px) {
    .fatwa-sidebar .sidebar-widget {
        display: block;
    }
}

/* Paginasi titik + panah — daftar Fatwa, Kitab, Blog (perintah pengguna
   2026-11-12, menggantikan gulir tak henti & tombol Muat Lebih Banyak). */
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 2.5rem;
}
.pagination-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: #6B2D3E;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pagination-arrow:hover:not(:disabled) {
    background: #6B2D3E;
    border-color: #6B2D3E;
    color: #FDF8F4;
}
.pagination-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
.pagination-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pagination-dot {
    width: 24px;
    height: 10px;
    min-height: 10px;
    border-radius: 50px;
    border: none;
    padding: 0;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pagination-dot:hover {
    background: #6B2D3E;
    opacity: 0.6;
}
.pagination-dot.active {
    width: 44px;
    background: #6B2D3E;
    cursor: default;
}
html[data-theme="dark"] .pagination-arrow { color: #D4AF37; }
html[data-theme="dark"] .pagination-arrow:hover:not(:disabled) {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #4A1D2B;
}
html[data-theme="dark"] .pagination-dot.active { background: #D4AF37; }
html[data-theme="dark"] .pagination-dot:hover { background: #D4AF37; }
#allFatwasGrid, #allBlogsGrid, #kitabGrid { scroll-margin-top: 110px; }

/* Homepage "Tulisan Terbaru" carousel (menggantikan kartu statis) */
.home-blog-viewport { overflow: hidden; }
.home-blog-track { display: flex; transition: transform 0.55s ease; }
.home-blog-slide { flex: 0 0 100%; padding: 0 0.75rem; box-sizing: border-box; display: flex; }
.home-blog-slide .blog-card { flex: 1; align-self: stretch; height: 100%; }
.home-blog-slide .blog-content { display: flex; flex-direction: column; flex: 1; }
.home-blog-slide .btn-blog-pill { margin-top: auto; }
@media (min-width: 640px) { .home-blog-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .home-blog-slide { flex-basis: 33.3333%; } }
.home-blog-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 2.25rem; }
.home-blog-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(212, 175, 55, 0.55); background: transparent;
    color: #D4AF37; font-size: 0.95rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.home-blog-arrow:hover { background: #D4AF37; color: #4A1D2B; }
.home-blog-dots { display: flex; align-items: center; gap: 0.5rem; }
.home-blog-dot {
    width: 24px; height: 10px; min-height: 10px; border-radius: 50px;
    border: none; padding: 0; background: rgba(253, 248, 244, 0.35);
    cursor: pointer; transition: all 0.2s ease;
}
.home-blog-dot.active { width: 44px; background: #D4AF37; }

/* Asisten v2: baris baru terjaga + tombol tautan di dalam balon jawaban */
.ai-message .message-content { white-space: pre-line; }
.message-links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.message-link {
    display: block; padding: 0.5rem 0.85rem; border-radius: 50px;
    background: #6B2D3E; color: #FDF8F4; border: 1px solid rgba(212, 175, 55, 0.45);
    text-decoration: none; font-weight: 600; font-size: 0.8rem; line-height: 1.35;
}
.message-link:hover { background: #4A1D2B; }

/* Homepage "Tulisan Terbaru" — model majalah (utama besar + kolom terbaru) */
.home-mag { display: grid; grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
.mag-hero-thumb img, .mag-mini-thumb img, .mag-side-card img, .mag-row-thumb img { filter: grayscale(1); }
@media (min-width: 1024px) { .home-mag { grid-template-columns: 1.9fr 1fr; gap: 3rem; } }
.mag-hero-thumb { display: block; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }
.mag-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; font-size: 0.85rem; color: rgba(253, 248, 244, 0.72); }
.mag-meta .mag-sep { width: 4px; height: 4px; border-radius: 50%; background: #D4AF37; }
.mag-hero-title { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.28; margin: 0.55rem 0 0.7rem; letter-spacing: -0.01em; }
.mag-hero-title a { color: #FDF8F4; text-decoration: none; }
.mag-hero-title a:hover { color: #D4AF37; }
.mag-excerpt { color: rgba(253, 248, 244, 0.82); line-height: 1.65; margin-bottom: 1.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mag-secondary { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.1rem; padding-top: 2rem; border-top: 1px solid rgba(253, 248, 244, 0.18); }
@media (min-width: 640px) { .mag-secondary { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.mag-mini { display: flex; gap: 1rem; align-items: flex-start; }
.mag-mini-text { flex: 1; min-width: 0; }
.mag-mini-text h4 { font-size: 1.02rem; font-weight: 700; line-height: 1.4; margin: 0.3rem 0 0.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mag-mini-text h4 a { color: #FDF8F4; text-decoration: none; }
.mag-mini-text h4 a:hover { color: #D4AF37; }
.mag-mini-thumb { flex: 0 0 112px; height: 88px; border-radius: 14px; overflow: hidden; }
.mag-mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-cat { color: #D4AF37; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; }
.mag-date { font-size: 0.8rem; color: rgba(253, 248, 244, 0.6); }
.mag-date.light { color: rgba(253, 248, 244, 0.85); }
.mag-side-title { font-size: 1.35rem; font-weight: 800; color: #FDF8F4; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(253, 248, 244, 0.25); }
.mag-side-card { margin-top: 1.3rem; }
.mag-side-card > a { display: block; position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; }
.mag-side-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mag-side-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; padding: 1.1rem; background: linear-gradient(to top, rgba(26, 6, 12, 0.88) 0%, rgba(26, 6, 12, 0.25) 55%, rgba(26, 6, 12, 0) 100%); }
.mag-side-overlay .blog-badge-category { position: static; align-self: flex-start; }
.mag-side-card-title { color: #FDF8F4; font-weight: 700; font-size: 1.12rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-rows { margin-top: 0.4rem; }
.mag-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgba(253, 248, 244, 0.14); }
.mag-row:last-child { border-bottom: none; }
.mag-row-thumb { flex: 0 0 92px; height: 70px; border-radius: 12px; overflow: hidden; }
.mag-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-row-text { flex: 1; min-width: 0; }
.mag-row-text h4 { font-size: 0.97rem; font-weight: 700; line-height: 1.4; margin-top: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-row-text h4 a { color: #FDF8F4; text-decoration: none; }
.mag-row-text h4 a:hover { color: #D4AF37; }

/* Model majalah di halaman Blog — varian tema terang */
.blog-mag-head { margin: 1.75rem 0 1.4rem; text-align: left; }
.blog-mag-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; color: var(--text-dark); letter-spacing: -0.01em; }
.blog-mag-head h2 span { color: #6B2D3E; }
.blog-mag { margin-bottom: 2.75rem; }
.blog-mag .mag-hero-title a { color: var(--text-dark); }
.blog-mag .mag-hero-title a:hover { color: #6B2D3E; }
.blog-mag .mag-meta { color: var(--text-light); }
.blog-mag .mag-excerpt { color: var(--text-light); }
.blog-mag .mag-secondary { border-top-color: var(--border-color); }
.blog-mag .mag-mini-text h4 a { color: var(--text-dark); }
.blog-mag .mag-mini-text h4 a:hover { color: #6B2D3E; }
.blog-mag .mag-cat { color: #6B2D3E; }
.blog-mag .mag-date { color: var(--text-light); }
.blog-mag .mag-date.light { color: rgba(253, 248, 244, 0.88); }
.blog-mag .mag-side-title { color: var(--text-dark); border-bottom-color: var(--border-color); }
.blog-mag .mag-row { border-bottom-color: var(--border-color); }
.blog-mag .mag-row-text h4 a { color: var(--text-dark); }
.blog-mag .mag-row-text h4 a:hover { color: #6B2D3E; }
html[data-theme="dark"] .blog-mag .mag-cat { color: #D4AF37; }
html[data-theme="dark"] .blog-mag-head h2 span { color: #D4AF37; box-shadow: inset 0 -9px 0 rgba(212, 175, 55, 0.35); }
html[data-theme="dark"] .blog-mag .mag-hero-title a:hover,
html[data-theme="dark"] .blog-mag .mag-mini-text h4 a:hover,
html[data-theme="dark"] .blog-mag .mag-row-text h4 a:hover { color: #D4AF37; }

/* Keterangan kredit sumber gambar di halaman detail artikel (Divisi 11) */
.image-credit { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--text-light); text-align: right; font-style: italic; }

/* Asisten — konsolidasi layout (perintah pengguna 2026-11-12): satu aturan
   akhir yang menertibkan tumpukan aturan lama. Sebelumnya di layar kecil
   jendela chat menjadi lembar bersudut siku yang menempel di tepi bawah
   layar (bottom:0 + radius:0 dari aturan lama) sementara lebar/tingginya
   dari aturan lain — kini selalu kartu melayang simetris di atas tombol
   buka, teks jawaban lebih besar dan nyaman dibaca. */
.ai-message .message-content { font-size: 0.92rem; line-height: 1.6; }
.online-status::before { background: #4ADE80; }
.ai-chat-window { bottom: 6.25rem; }
@media (max-width: 768px) {
    .ai-chat-window { width: min(420px, calc(100vw - 2rem)); right: 1rem; bottom: 5.75rem; height: min(650px, calc(100dvh - 7rem)); max-height: calc(100dvh - 7rem); border-radius: 20px; }
    .ai-chat-toggle { bottom: 1rem; right: 1rem; }
}
@media (max-width: 600px) {
    .ai-chat-window { width: calc(100vw - 1.5rem); right: 0.75rem; bottom: 5.5rem; height: min(72dvh, 640px); max-height: calc(100dvh - 6.5rem); border-radius: 20px; transform: translateY(20px); }
    .ai-chat-window.active { transform: translateY(0); }
    .ai-chat-toggle { bottom: 1rem; right: 1rem; width: 56px; height: 56px; }
    .ai-chat-input-area .input-wrapper input { font-size: 16px; }
}

/* Beranda bawah: Fatwa Terbaru + Rak Kitab (pilihan pengguna 2026-11-12) */
.home-fatwa { display: grid; grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
@media (min-width: 1024px) { .home-fatwa { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.hf-thumb { display: block; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }
.hf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.hf-thumb .blog-badge-category { position: absolute; top: 1rem; left: 1rem; }
.hf-meta { margin-top: 1.1rem; font-size: 0.82rem; color: var(--text-light); font-weight: 600; }
.hf-title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.25; font-weight: 800; margin: 0.45rem 0 0.6rem; }
.hf-title a { color: var(--text-dark); text-decoration: none; }
.hf-title a:hover { color: #6B2D3E; }
.hf-excerpt { color: var(--text-light); line-height: 1.65; margin: 0 0 1.3rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hf-row { display: flex; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border-color); align-items: center; }
.hf-row:first-child { padding-top: 0; }
.hf-row-thumb { flex: 0 0 92px; width: 92px; height: 70px; border-radius: 12px; overflow: hidden; }
.hf-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.hf-cat { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6B2D3E; margin-bottom: 0.25rem; }
.hf-row-text h4 { font-size: 0.98rem; line-height: 1.4; font-weight: 700; margin: 0 0 0.2rem; }
.hf-row-text h4 a { color: var(--text-dark); text-decoration: none; }
.hf-row-text h4 a:hover { color: #6B2D3E; }
.hf-date { font-size: 0.78rem; color: var(--text-light); }
.hf-all { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; font-weight: 800; color: #6B2D3E; text-decoration: none; }
.hf-all:hover { color: #4A1D2B; }
html[data-theme="dark"] .hf-cat { color: #D4AF37; }
html[data-theme="dark"] .hf-all { color: #D4AF37; }
html[data-theme="dark"] .hf-title a:hover,
html[data-theme="dark"] .hf-row-text h4 a:hover { color: #D4AF37; }
.home-kitab-section { background: var(--bg-card); }
.home-kitab-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; margin-bottom: 2rem; }
.home-kitab-head .section-header { text-align: center; margin: 0 auto; }
.rak-shelf { display: flex; gap: 1.4rem; overflow-x: auto; padding: 0.5rem 0.2rem 1.2rem; scroll-snap-type: x proximity; cursor: grab; scrollbar-width: none; }
.rak-shelf::-webkit-scrollbar { display: none; }
.rak-shelf.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.book-card-horizontal.kitab-focus { outline: 3px solid #D4AF37; outline-offset: 4px; }
.rak-item { flex: 0 0 150px; scroll-snap-align: start; text-decoration: none; text-align: left; }
.rak-cover { display: flex; align-items: center; justify-content: center; width: 150px; height: 214px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 10px 24px rgba(36, 17, 23, 0.18); margin-bottom: 0.8rem; overflow: hidden; }
.rak-cover-title { padding: 0.8rem; font-weight: 800; font-size: 0.92rem; line-height: 1.4; color: #2D1B1E; text-align: center; }
.rak-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--text-dark); }
.rak-author { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--text-light); }

/* Tombol "Semua Kitab" di kepala Rak Kitab: pil ringkas, bukan lebar penuh */
.home-kitab-head .btn-blog-pill { width: auto; flex: 0 0 auto; white-space: nowrap; margin-top: 0; }

/* Tombol bagikan multi-kanal (perintah pengguna 2026-11-12: tidak hanya WhatsApp) */
.share-bar { max-width: 800px; margin: 0 auto 3rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.share-bar p { margin: 0; font-weight: 600; color: var(--text-dark); }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-dark); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.25s ease; }
.share-btn i { font-size: 1rem; }
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-wa { border-color: #25D366; color: #1DA851; }
.share-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.share-tg { border-color: #229ED9; color: #229ED9; }
.share-tg:hover { background: #229ED9; border-color: #229ED9; color: #fff; }
.share-fb { border-color: #1877F2; color: #1877F2; }
.share-fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.share-x:hover { background: #000; border-color: #000; color: #fff; }
.share-copy.copied { background: #6B2D3E; border-color: #6B2D3E; color: #FDF8F4; }

/* Fatwa Terbaru di beranda: tanpa gambar (ketetapan pengguna) — kartu teks */
.hf-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 1.8rem; }
.hf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hf-badge { display: inline-block; background: #6B2D3E; color: #F7EEDD; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; }
.hf-card .hf-meta { margin: 0; }
.hf-card .hf-title { margin-top: 0; }
.hf-row { display: block; }

/* Fatwa Terbaru di beranda — gaya Indeks Fatwa (berbeda dari majalah artikel
   dan dari daftar halaman fatwa): panel pertanyaan + indeks bernomor emas */
.home-fatwa { display: block; }
.hf2-featured { display: flex; gap: 1.6rem; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 4px solid #D4AF37; border-radius: 20px; padding: 2rem; text-align: left; margin-bottom: 1rem; }
.hf2-qmark { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #D4AF37; color: #6B2D3E; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; line-height: 1; background: rgba(212, 175, 55, 0.12); }
html[data-theme="dark"] .hf2-qmark { color: #D4AF37; }
.hf2-featured-body { flex: 1; min-width: 0; }
.hf2-meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.hf2-date { font-size: 0.82rem; color: var(--text-light); font-weight: 600; }
.hf2-question { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; font-weight: 700; color: var(--text-dark); margin: 0 0 0.7rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hf2-answer-title { font-size: 1.02rem; font-weight: 600; margin: 0 0 1rem; }
.hf2-answer-title a { color: #6B2D3E; text-decoration: none; }
.hf2-answer-title a:hover { text-decoration: underline; }
html[data-theme="dark"] .hf2-answer-title a { color: #D4AF37; }
.hf2-answer-link { display: inline-flex; align-items: center; gap: 0.5rem; background: #6B2D3E; color: #F7EEDD; font-weight: 700; font-size: 0.9rem; padding: 0.65rem 1.3rem; border-radius: 999px; text-decoration: none; transition: all 0.25s ease; }
.hf2-answer-link:hover { background: #4A1D2B; color: #D4AF37; }
.hf2-row { display: flex; align-items: center; gap: 1.2rem; padding: 1.05rem 0.4rem; border-bottom: 1px solid var(--border-color); text-align: left; }
.hf2-num { flex: 0 0 auto; font-size: 1.7rem; font-weight: 800; color: #D4AF37; line-height: 1; min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.hf2-row-text { flex: 1; min-width: 0; }
.hf2-row-meta { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #6B2D3E; margin-bottom: 0.25rem; }
html[data-theme="dark"] .hf2-row-meta { color: #D4AF37; }
.hf2-row-text h4 { font-size: 1.02rem; line-height: 1.4; font-weight: 700; margin: 0; }
.hf2-row-text h4 a { color: var(--text-dark); text-decoration: none; }
.hf2-row-text h4 a:hover { color: #6B2D3E; }
html[data-theme="dark"] .hf2-row-text h4 a:hover { color: #D4AF37; }
.hf2-row-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: #6B2D3E; text-decoration: none; transition: all 0.25s ease; }
.hf2-row-arrow:hover { background: #6B2D3E; border-color: #6B2D3E; color: #F7EEDD; }
html[data-theme="dark"] .hf2-row-arrow { color: #D4AF37; }
@media (max-width: 640px) {
    .hf2-featured { flex-direction: column; gap: 1.1rem; padding: 1.5rem; }
    .hf2-num { font-size: 1.35rem; min-width: 2.1rem; }
}

/* Asisten: tautan hasil dibuat daftar teks ringkas (perintah pengguna 2026-11-12) —
   bukan lagi pil marun besar bertumpuk seperti tombol; satu tautan utama
   (Baca Fatwa / Buka Kitab) tetap berbentuk pil marun ringkas. */
.message-links { gap: 0; margin-top: 0.7rem; border-top: 1px solid var(--border-color); }
.message-link {
    display: flex; align-items: baseline; gap: 0.45rem;
    padding: 0.55rem 0.15rem; border: none; border-bottom: 1px solid var(--border-color);
    border-radius: 0; background: transparent; color: var(--text-dark);
    font-size: 0.88rem; font-weight: 600; line-height: 1.45;
}
.message-link::before { content: '›'; color: #B98A1F; font-weight: 800; }
.message-link:hover { background: rgba(107, 45, 62, 0.06); color: #6B2D3E; }
.message-link.primary {
    display: inline-flex; align-items: center;
    margin: 0.55rem 0 0.35rem; padding: 0.55rem 1.05rem;
    border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.45);
    background: #6B2D3E; color: #FDF8F4; font-size: 0.85rem;
}
.message-link.primary::before { content: none; }
.message-link.primary:hover { background: #4A1D2B; color: #FDF8F4; }

/* Pil utama bot tidak lagi melebar selebar gelembung (wadah .message-links adalah
   flex kolom yang meregangkan anaknya): pil diringkas selebar labelnya, sedangkan
   baris tautan biasa tetap selebar gelembung. */
.message-links { align-items: flex-start; }
.message-link { align-self: stretch; }
.message-link.primary { align-self: flex-start; max-width: 100%; }
button.message-link { font-family: inherit; cursor: pointer; text-align: left; }
button.message-link.done { opacity: 0.8; cursor: default; }

/* Tombol bagikan: ikon saja (perintah pengguna 2026-11-12) — lingkaran 44px
   berwarna merek, tanpa label teks; nama kanal terbaca dari tooltip/aria. */
.share-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; font-size: 1.05rem; }

/* ===== Pil Tanggal Hijriyah (hero) + Jadwal Shalat & Kalender Hijriyah ===== */
.hijri-pill { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; cursor: pointer; }
.hijri-dot { width: 9px; height: 9px; border-radius: 50%; background: #D4AF37; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22); flex: none; }
.hijri-sep { width: 1px; height: 16px; background: rgba(107, 45, 62, 0.28); flex: none; }
.hijri-verified { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.hijri-verified i { color: #D4AF37; }
html[data-theme="dark"] .hijri-sep { background: rgba(253, 248, 244, 0.3); }

.jadwal-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 1.5rem; align-items: start; }
.jadwal-card, .hijri-card { background: #FFFFFF; border: 1px solid rgba(107, 45, 62, 0.14); border-radius: 20px; padding: 1.4rem; box-shadow: 0 10px 30px rgba(74, 29, 43, 0.07); }
html[data-theme="dark"] .jadwal-card, html[data-theme="dark"] .hijri-card { background: #221016; border-color: rgba(212, 175, 55, 0.2); box-shadow: none; }
.jadwal-toolbar { display: flex; flex-direction: column; gap: 0.4rem; }
.jadwal-city-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: #6B2D3E; }
html[data-theme="dark"] .jadwal-city-label { color: #D4AF37; }
.jadwal-city-input { width: 100%; min-height: 48px; padding: 0.7rem 1rem; border-radius: 12px; border: 1.5px solid rgba(107, 45, 62, 0.25); font: inherit; font-size: 0.98rem; background: #FDF8F4; color: inherit; }
.jadwal-city-input:focus { outline: 2px solid rgba(212, 175, 55, 0.6); border-color: #6B2D3E; }
html[data-theme="dark"] .jadwal-city-input { background: #2C141B; border-color: rgba(212, 175, 55, 0.3); }
.jadwal-next { margin-top: 1rem; background: linear-gradient(120deg, #6B2D3E, #4A1D2B); color: #FDF8F4; border-radius: 14px; padding: 0.8rem 1rem; font-size: 0.95rem; }
.jadwal-next:empty { display: none; }
.jadwal-next i { color: #D4AF37; margin-right: 0.35rem; }
.jadwal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1rem; }
.jadwal-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 0.3rem; border-radius: 14px; background: #FDF8F4; border: 1px solid rgba(107, 45, 62, 0.08); }
html[data-theme="dark"] .jadwal-item { background: #2C141B; border-color: rgba(212, 175, 55, 0.12); }
.ji-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.65; }
.ji-time { font-size: 1.22rem; font-weight: 700; color: #6B2D3E; }
html[data-theme="dark"] .ji-time { color: #F7EEDD; }
.jadwal-item.is-next { background: #6B2D3E; border-color: #D4AF37; box-shadow: 0 6px 18px rgba(74, 29, 43, 0.3); }
.jadwal-item.is-next .ji-name { color: #D4AF37; opacity: 1; }
.jadwal-item.is-next .ji-time { color: #FFFFFF; }
.jadwal-source { font-size: 0.8rem; line-height: 1.6; opacity: 0.65; margin-top: 1rem; }
.hijri-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; }
.hijri-card-head h3 { font-size: 1.05rem; color: #6B2D3E; margin: 0; text-align: center; }
html[data-theme="dark"] .hijri-card-head h3 { color: #F7EEDD; }
.hijri-nav { width: 40px; height: 40px; min-height: 40px; flex: none; border-radius: 50%; border: 1.5px solid rgba(107, 45, 62, 0.35); background: transparent; color: #6B2D3E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html[data-theme="dark"] .hijri-nav { border-color: rgba(212, 175, 55, 0.4); color: #D4AF37; }
.hijri-weekdays, .hijri-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hijri-weekdays span { text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; padding-bottom: 0.3rem; }
.hg-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1.02; border-radius: 10px; background: #FDF8F4; border: 1px solid rgba(107, 45, 62, 0.07); }
html[data-theme="dark"] .hg-cell { background: #2C141B; border-color: rgba(212, 175, 55, 0.1); }
.hg-cell.is-empty { background: transparent; border-color: transparent; }
.hg-d { font-weight: 700; font-size: 0.95rem; line-height: 1.1; color: #6B2D3E; }
html[data-theme="dark"] .hg-d { color: #F7EEDD; }
.hg-g { font-size: 0.62rem; opacity: 0.55; line-height: 1.1; }
.hg-cell.is-today { background: #6B2D3E; border-color: #D4AF37; }
.hg-cell.is-today .hg-d { color: #FFFFFF; }
.hg-cell.is-today .hg-g { color: #D4AF37; opacity: 1; }
.hijri-note { font-size: 0.78rem; line-height: 1.6; opacity: 0.65; margin-top: 0.9rem; }
@media (max-width: 900px) { .jadwal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .jadwal-grid { grid-template-columns: repeat(2, 1fr); } .jadwal-card, .hijri-card { padding: 1.1rem; } }

/* Penyejajaran kartu Jadwal & Kalender (perintah pengguna: rapikan, sinkron sejajar) */
.jadwal-wrap { align-items: stretch; }
.jadwal-card, .hijri-card { display: flex; flex-direction: column; }
.jadwal-grid { flex: 1; align-content: center; }
.jadwal-item { justify-content: center; }
.jadwal-source { margin-top: auto; padding-top: 1rem; }
.hijri-grid { flex: 1; align-content: space-between; }
.hijri-note { margin-top: auto; padding-top: 0.9rem; }

/* Pemilih kota kustom (pengganti datalist bawaan) */
.jadwal-city-picker { position: relative; }
.jadwal-city-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 12px; border: 1.5px solid rgba(107, 45, 62, 0.25); background: #FDF8F4; color: inherit; font: inherit; font-size: 0.98rem; font-weight: 600; cursor: pointer; text-align: left; }
.jadwal-city-btn i { color: #6B2D3E; font-size: 0.85rem; flex: none; }
.jadwal-city-btn:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.6); border-color: #6B2D3E; }
html[data-theme="dark"] .jadwal-city-btn { background: #2C141B; border-color: rgba(212, 175, 55, 0.3); }
html[data-theme="dark"] .jadwal-city-btn i { color: #D4AF37; }
.jadwal-city-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: #FFFFFF; border: 1px solid rgba(107, 45, 62, 0.18); border-radius: 14px; box-shadow: 0 18px 40px rgba(74, 29, 43, 0.22); padding: 0.6rem; }
html[data-theme="dark"] .jadwal-city-panel { background: #2C141B; border-color: rgba(212, 175, 55, 0.28); }
.jadwal-city-search { width: 100%; min-height: 44px; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1.5px solid rgba(107, 45, 62, 0.22); font: inherit; font-size: 0.95rem; background: #FDF8F4; color: inherit; margin-bottom: 0.5rem; }
html[data-theme="dark"] .jadwal-city-search { background: #221016; border-color: rgba(212, 175, 55, 0.3); }
.jadwal-city-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; }
.jadwal-city-item { display: block; width: 100%; min-height: 40px; padding: 0.55rem 0.8rem; border: none; background: transparent; color: inherit; font: inherit; font-size: 0.93rem; text-align: left; border-radius: 8px; cursor: pointer; }
.jadwal-city-item:hover { background: #FDF8F4; }
html[data-theme="dark"] .jadwal-city-item:hover { background: rgba(212, 175, 55, 0.1); }
.jadwal-city-item.is-active { background: rgba(107, 45, 62, 0.1); color: #6B2D3E; font-weight: 700; }
html[data-theme="dark"] .jadwal-city-item.is-active { background: rgba(212, 175, 55, 0.16); color: #D4AF37; }
.jadwal-city-empty { padding: 0.8rem; font-size: 0.9rem; opacity: 0.6; text-align: center; }

/* === Toolbar blog Model A — ramping satu baris (pilihan pengguna 12 Nov 2026) === */
.blog-page-toolbar.toolbar-slim {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.4rem;
    padding: 0.85rem 0.25rem 1.05rem;
    margin: 0 auto 1.75rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0 !important;
    box-shadow: none;
}
.toolbar-slim-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
}
.blog-page-toolbar.toolbar-slim .blog-filters {
    flex: 1 1 auto;
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    gap: 0.45rem;
}
.blog-page-toolbar.toolbar-slim .filter-pill {
    min-height: 2.5rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
}
.blog-page-toolbar.toolbar-slim .blog-search-wrapper {
    flex: 0 1 290px;
    min-width: 220px;
    width: auto;
    margin: 0;
}
.blog-page-toolbar.toolbar-slim .blog-search-wrapper input {
    min-height: 2.6rem;
    border-radius: 999px;
}
@media (max-width: 700px) {
    .blog-page-toolbar.toolbar-slim .blog-search-wrapper { flex: 1 1 100%; }
    .blog-page-toolbar.toolbar-slim .blog-filters { flex-wrap: nowrap; overflow-x: auto; }
}

/* === Toolbar fatwa Model A — ramping satu baris (menyusul blog, perintah pengguna 12 Nov 2026) === */
.fatwa-toolbar.toolbar-slim {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.9rem 1.1rem;
    padding: 0.85rem 0.25rem 1.05rem;
    margin-bottom: 1.75rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0 !important;
    box-shadow: none;
}
.fatwa-toolbar.toolbar-slim .fatwa-categories {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    margin: 0;
    gap: 0.4rem;
}
.fatwa-toolbar.toolbar-slim .fatwa-chip { min-height: 2.5rem; padding: 0.45rem 0.85rem; font-size: 0.84rem; }
.fatwa-toolbar.toolbar-slim .fatwa-search-box {
    flex: 1 1 300px;
    min-width: 190px;
    max-width: 340px;
    width: auto;
    margin-left: auto;
}
.fatwa-toolbar.toolbar-slim .fatwa-search-box input {
    min-height: 2.6rem;
    border-radius: 999px;
}
@media (max-width: 1150px) {
    .fatwa-toolbar.toolbar-slim { flex-wrap: wrap; }
    .fatwa-toolbar.toolbar-slim .fatwa-categories { flex-wrap: wrap; }
    .fatwa-toolbar.toolbar-slim .fatwa-search-box { margin-left: 0; }
}
@media (max-width: 700px) {
    .fatwa-toolbar.toolbar-slim .fatwa-search-box { flex: 1 1 100%; max-width: none; }
    .fatwa-toolbar.toolbar-slim .fatwa-categories { flex-wrap: nowrap; overflow-x: auto; }
}

/* === Perbaikan tombol tema: lingkaran harus bulat sempurna (laporan pengguna 13 Nov 2026) ===
   Tombol global min-height:44px membuat .theme-toggle 40x44 (lonjong). Paksa persegi. */
.theme-toggle {
    width: 44px !important;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
}

/* === Beranda Fatwa Model 6 — Pita Emas Minimal (pilihan pengguna 13 Nov 2026) === */
/* Latar blok marun penuh meniru section Blog di beranda (perintah pengguna 13 Nov 2026):
   section-nya sendiri yang marun selebar layar; panel di dalamnya transparan. */
#homeFatwa { background: #6B2D3E; }
.hf6-panel {
    background: transparent;
    border-top: none;
    border-radius: 0;
    padding: 0;
}
.hf6-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.hf6-eyebrow { display: block; color: #D4AF37; letter-spacing: 3px; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.35rem; }
.hf6-title { color: #fff; font-size: clamp(1.55rem, 3vw, 1.95rem); font-weight: 800; margin: 0; }
.hf6-all { color: #D4AF37; font-weight: 800; white-space: nowrap; text-decoration: none; border: 1.5px solid #D4AF37; border-radius: 999px; padding: 10px 22px; margin-bottom: 8px; transition: background 0.2s, color 0.2s; }
.hf6-all:hover { background: #D4AF37; color: #4A1D2B; text-decoration: none; }
.hf6-band { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem 1.6rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(247, 238, 221, 0.16); }
.hf6-chip { background: #D4AF37; color: #4A1D2B; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.hf6-question { flex: 1; color: #fff; font-size: clamp(1.12rem, 2.2vw, 1.38rem); font-weight: 700; line-height: 1.5; margin: 0; }
.hf6-btn { background: #D4AF37; color: #4A1D2B; padding: 12px 24px; border-radius: 999px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.hf6-btn:hover { background: #e5c65c; }
.hf6-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.2rem; align-content: start; }
.hf6-row { padding: 12px 0; border-bottom: 1px solid rgba(247, 238, 221, 0.13); }
.hf6-row-meta { color: #D4AF37; font-weight: 800; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; }
.hf6-row h4 { margin: 4px 0 0; font-size: 0.97rem; line-height: 1.45; }
.hf6-row h4 a { color: #F7EEDD; font-weight: 700; text-decoration: none; }
.hf6-row h4 a:hover { color: #D4AF37; }
@media (max-width: 900px) { .hf6-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .hf6-grid { grid-template-columns: 1fr; }
    .hf6-band { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .hf6-head { flex-direction: column; align-items: flex-start; }
}

/* === Beranda Fatwa Model 6B — utama kiri, daftar kanan (pilihan pengguna 13 Nov 2026) === */
.hf6-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2.2rem; align-items: stretch; margin-top: 16px; }
.hf6-feat { background: rgba(0, 0, 0, 0.18); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.hf6-feat .hf6-chip { align-self: flex-start; }
.hf6-feat .hf6-question { flex: none; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.hf6-ex { color: #E9D9BE; font-size: 0.92rem; line-height: 1.6; margin: 0; }
.hf6-feat .hf6-btn { align-self: flex-start; margin-top: auto; }
.hf6-grid-b { grid-template-columns: 1fr 1fr; gap: 0 2rem; align-content: start; }
@media (max-width: 900px) {
    .hf6-layout { grid-template-columns: 1fr; }
    .hf6-grid-b { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .hf6-grid-b { grid-template-columns: 1fr; } }

/* =========================================
   Popup Pencarian — "Popup 1 Marun" (pilihan pengguna 13 Nov 2026)
   Tanpa ornamen Arab; judul "Cari di Bincang Ilmu" (judul contoh
   "Mau mencari ilmu apa hari ini?" dinilai pengguna aneh, diganti).
   ========================================= */
.search-overlay .search-field-container {
    background: linear-gradient(150deg, #6B2D3E 0%, #4A1D2B 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    color: #F7EEDD;
    padding: 2rem 2rem 1.7rem;
    max-width: 560px;
}

[data-theme="dark"] .search-overlay .search-field-container {
    background: linear-gradient(150deg, #5D2736 0%, #3D1622 100%);
    border-color: rgba(212, 175, 55, 0.35);
}

.so-title {
    color: #FFFFFF;
    font-size: 1.35rem;
    margin: 0 0 0.3rem;
    text-align: center;
}

.so-sub {
    color: rgba(247, 238, 221, 0.8);
    font-size: 0.9rem;
    margin: 0 0 1.2rem;
    text-align: center;
}

.search-overlay .search-overlay-close {
    background: transparent;
    border: 1px solid rgba(247, 238, 221, 0.35);
    color: #F7EEDD;
    font-size: 1rem;
    width: 38px;
    height: 38px;
    min-height: 38px;
}

.search-overlay .search-overlay-close:hover,
.search-overlay .search-overlay-close:active,
.search-overlay .search-overlay-close:focus-visible {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #4A1D2B;
}

.search-overlay .search-input-wrapper {
    display: flex;
    align-items: center;
    background: #FDF8F4;
    border-radius: 999px;
    padding: 0.45rem 0.45rem 0.45rem 1.1rem;
    box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.55);
    margin-top: 0;
}

.search-overlay .search-icon-left {
    position: static;
    transform: none;
    color: #6B2D3E;
    font-size: 1.05rem;
}

.search-overlay .search-overlay-input {
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #4A1D2B;
    padding: 0.55rem 0.6rem;
    text-align: left;
}

.search-overlay .search-overlay-input:focus {
    border: none;
    background: transparent;
    box-shadow: none;
}

.search-overlay .search-overlay-input::placeholder {
    color: #9B8578;
    opacity: 1;
}

.so-go {
    flex: 0 0 auto;
    border: none;
    background: #6B2D3E;
    color: #F7EEDD;
    border-radius: 999px;
    padding: 0.6rem 1.3rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.so-go:hover {
    background: #4A1D2B;
}

.search-overlay .search-results-container {
    margin-top: 1.3rem;
}

.search-overlay .search-section-title {
    color: #D4AF37;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.search-overlay .search-tag {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.65);
    color: #F7EEDD;
    border-radius: 999px;
}

.search-overlay .search-tag:hover {
    background: #D4AF37;
    color: #4A1D2B;
    border-color: #D4AF37;
}

.search-overlay .search-result-item {
    background: rgba(253, 248, 244, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.18);
}

.search-overlay .search-result-item:hover {
    background: rgba(253, 248, 244, 0.13);
    border-color: rgba(212, 175, 55, 0.4);
}

.search-overlay .search-result-icon {
    background: rgba(212, 175, 55, 0.16);
    color: #D4AF37;
}

.search-overlay .search-result-title {
    color: #FFFFFF;
}

.search-overlay .search-result-type {
    color: rgba(247, 238, 221, 0.65);
}

.search-overlay .search-highlight {
    color: #D4AF37;
}

/* ===== Radio Islam (radio.html) ===== */
.radio-section { padding: 3.25rem 0 4rem; }
.radio-player {
    display: flex; align-items: center; gap: 1.25rem;
    background: linear-gradient(135deg, #6B2D3E 0%, #4A1D2B 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 20px; padding: 1.5rem 1.6rem; color: #FDF8F4;
}
.radio-player-icon {
    flex: none; width: 58px; height: 58px; border-radius: 50%;
    border: 1.5px solid #D4AF37; color: #D4AF37;
    display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
}
.radio-player-main { flex: 1 1 auto; min-width: 0; }
.radio-status {
    display: block; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: #D4AF37; margin-bottom: 0.3rem;
}
.radio-now-name { font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.3rem; color: #FDF8F4; }
.radio-now-desc { margin: 0; font-size: 0.92rem; color: rgba(253, 248, 244, 0.82); }
.radio-main-btn {
    flex: none; width: 60px; height: 60px; min-height: 60px; border-radius: 50%;
    border: none; background: #D4AF37; color: #4A1D2B; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.radio-main-btn:hover { background: #E3C565; transform: scale(1.05); }
.radio-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem;
}
.radio-card {
    display: flex; align-items: center; gap: 1rem;
    background: #FFFFFF; border: 1.5px solid #EAD9CE; border-radius: 16px;
    padding: 1.1rem 1.25rem; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.radio-card:hover { border-color: #D4AF37; }
.radio-card.is-active { border-color: #D4AF37; background: #FFFBF2; box-shadow: 0 8px 24px rgba(107, 45, 62, 0.12); }
.radio-card-icon { flex: none; font-size: 1.5rem; color: #6B2D3E; }
.radio-card.is-active .radio-card-icon { color: #B8912A; }
.radio-card-body { flex: 1 1 auto; min-width: 0; }
.radio-card-body h3 { margin: 0 0 0.25rem; font-size: 1.02rem; color: #33231F; }
.radio-card-body p { margin: 0 0 0.4rem; font-size: 0.88rem; line-height: 1.45; color: #6E5A52; }
.radio-card-link { font-size: 0.82rem; font-weight: 600; color: #6B2D3E; text-decoration: none; }
.radio-card-link:hover { color: #B8912A; text-decoration: underline; }
.radio-card-link i { font-size: 0.7rem; }
.radio-card-btn {
    flex: none; width: 46px; height: 46px; min-height: 46px; border-radius: 50%;
    border: none; background: #6B2D3E; color: #FDF8F4; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.radio-card.is-active .radio-card-btn { background: #D4AF37; color: #4A1D2B; }
.radio-note { margin-top: 1.4rem; font-size: 0.88rem; line-height: 1.55; color: #6E5A52; }
@media (max-width: 720px) {
    .radio-grid { grid-template-columns: 1fr; }
    .radio-player { flex-wrap: wrap; padding: 1.25rem; }
    .radio-now-name { font-size: 1.15rem; }
}
[data-theme="dark"] .radio-card { background: #2A1219; border-color: #4A2A33; }
[data-theme="dark"] .radio-card.is-active { background: #33161F; }
[data-theme="dark"] .radio-card-body h3 { color: #F7EEDD; }
[data-theme="dark"] .radio-card-body p { color: rgba(247, 238, 221, 0.72); }
[data-theme="dark"] .radio-card-link { color: #E3C565; }
[data-theme="dark"] .radio-card-icon { color: #E3C565; }
[data-theme="dark"] .radio-note { color: rgba(247, 238, 221, 0.66); }
.radio-live-title { margin: 0.55rem 0 0; font-size: 0.98rem; font-weight: 700; line-height: 1.55; color: #E8CF8F; }

/* ===== Umpan Miraath di halaman radio ===== */
.miraath-posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.miraath-poster { display: block; background: #fff; border: 1px solid #eadfd2; border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.miraath-poster:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(74,29,43,.14); }
.miraath-poster img { width: 100%; height: auto; display: block; }
.miraath-poster-title { display: block; padding: .65rem .9rem; font-weight: 700; color: #4A1D2B; font-size: .95rem; line-height: 1.5; }
.miraath-subhead { margin: 2.2rem 0 1rem; font-size: 1.2rem; color: #4A1D2B; }
.miraath-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.miraath-post { display: flex; gap: .85rem; align-items: center; background: #fff; border: 1px solid #eadfd2; border-radius: 12px; padding: .7rem .85rem; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.miraath-post:hover { border-color: #D4AF37; transform: translateY(-2px); }
.miraath-post img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; flex: none; }
.miraath-post-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.miraath-post-title { font-weight: 600; color: #333; font-size: .92rem; line-height: 1.45; }
.miraath-post-date { font-size: .78rem; color: #999; }
.miraath-loading { color: #8a7a72; font-size: .92rem; }
.miraath-actions { margin-top: 1.6rem; text-align: center; }
[data-theme="dark"] .miraath-poster, [data-theme="dark"] .miraath-post { background: #2b1a20; border-color: #4a3238; }
[data-theme="dark"] .miraath-poster-title, [data-theme="dark"] .miraath-subhead { color: #f3e3c2; }
[data-theme="dark"] .miraath-post-title { color: #f0e6da; }
[data-theme="dark"] .miraath-loading { color: #b8a89f; }
@media (max-width: 720px) { .miraath-posters { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .miraath-posts { grid-template-columns: 1fr; } }

/* ===== Perapian halaman radio & teks Arab berharakat ===== */
.radio-live-title { line-height: 2; border-top: 1px solid rgba(212, 175, 55, .35); padding-top: .65rem; }
.miraath-poster { display: flex; flex-direction: column; }
.miraath-poster-frame { position: relative; display: block; aspect-ratio: 4 / 2.84; overflow: hidden; background-color: #FAF3E7; background-size: cover; background-position: center; }
.miraath-poster-blur { position: absolute; inset: 0; backdrop-filter: blur(16px) brightness(1.05); -webkit-backdrop-filter: blur(16px) brightness(1.05); }
.miraath-poster img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.miraath-poster-title { margin-top: auto; text-align: center; line-height: 1.95; }
.miraath-post { align-items: flex-start; }
.miraath-post-title { line-height: 1.95; }
[data-theme="dark"] .miraath-poster-frame { background-color: #241318; }

/* ===== Radio Model A: pita marun, pemutar kiri, daftar kanan ===== */
.radio-section { padding: 0 0 4rem; }
.radio-band { background: linear-gradient(135deg, #6B2D3E, #4A1D2B); padding: 2.2rem 0 2.4rem; }
.radio-band-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.2rem; align-items: stretch; }
.radio-player { flex-direction: column; align-items: stretch; background: transparent; border: none; border-radius: 0; padding: 0; }
.radio-player-main { flex: none; }
.radio-status { display: inline-flex; align-items: center; gap: .5rem; background: rgba(212, 175, 55, .16); border: 1px solid rgba(212, 175, 55, .55); color: #E8CF8F; border-radius: 99px; padding: .4rem .8rem; margin-bottom: 0; }
.radio-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #D4AF37; flex: none; }
.radio-now-name { font-size: 1.7rem; margin: 1rem 0 .4rem; }
.radio-now-desc { margin-top: .6rem; }
.radio-controls { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: 1rem; }
.radio-controls small { color: rgba(253, 248, 244, .75); font-size: .82rem; line-height: 1.5; }
.radio-main-btn { width: 64px; height: 64px; min-height: 64px; font-size: 1.35rem; }
.radio-eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.radio-eq i { width: 4px; height: 8px; background: #D4AF37; border-radius: 2px; display: block; }
.radio-player.is-playing .radio-eq i { animation: radioEq 1s ease-in-out infinite; }
.radio-player.is-playing .radio-eq i:nth-child(2) { animation-delay: .15s; }
.radio-player.is-playing .radio-eq i:nth-child(3) { animation-delay: .3s; }
.radio-player.is-playing .radio-eq i:nth-child(4) { animation-delay: .45s; }
.radio-player.is-playing .radio-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes radioEq { 0%, 100% { height: 8px; } 50% { height: 22px; } }
.radio-band .radio-grid { grid-template-columns: 1fr; gap: .9rem; margin-top: 0; align-content: start; }
.radio-band .radio-card { background: rgba(253, 248, 244, .06); border-color: rgba(253, 248, 244, .18); }
.radio-band .radio-card:hover { border-color: rgba(212, 175, 55, .6); }
.radio-band .radio-card.is-active { background: rgba(253, 248, 244, .12); border-color: #D4AF37; box-shadow: none; }
.radio-band .radio-card-icon, .radio-band .radio-card.is-active .radio-card-icon { color: #E8CF8F; }
.radio-band .radio-card-body h3 { color: #FDF8F4; }
.radio-band .radio-card-body p { color: rgba(253, 248, 244, .75); }
.radio-band .radio-card-body p.radio-card-live { color: #E8CF8F; font-weight: 600; line-height: 1.9; margin: .25rem 0 0; }
.radio-band .radio-card-btn { background: transparent; border: 2px solid #D4AF37; color: #E8CF8F; }
.radio-band .radio-card.is-active .radio-card-btn { background: #D4AF37; color: #4A1D2B; }
[data-theme="dark"] .radio-band .radio-card { background: rgba(253, 248, 244, .06); border-color: rgba(253, 248, 244, .18); }
[data-theme="dark"] .radio-band .radio-card.is-active { background: rgba(253, 248, 244, .12); border-color: #D4AF37; }
@media (max-width: 900px) {
    .radio-band-in { grid-template-columns: 1fr; gap: 1.6rem; }
    .radio-controls { margin-top: 1.2rem; }
    .radio-now-name { font-size: 1.4rem; }
}

/* Poster Miraath: baris terakhir rata tengah — slot kosong di sisi baris
   kedua hilang (grid auto-fill menyisakan satu kolom kosong untuk 7 poster) */
.miraath-posters { display: flex; flex-wrap: wrap; justify-content: center; }
.miraath-poster { flex: 0 1 calc(25% - 0.85rem); }
@media (max-width: 1100px) { .miraath-poster { flex-basis: calc(33.333% - 0.75rem); } }
@media (max-width: 720px) { .miraath-poster { flex-basis: calc(50% - 0.55rem); } }

/* Tipografi Arab rasa Nusuk (perintah user 2026-11-13): teks Arab selain
   dalil tampil lebih besar, judul berbobot semibold, jarak baris longgar —
   mengikuti perlakuan IBM Plex Sans Arabic pada Nusuk (sistem DGA) */
.radio-live-title { font-size: 1.12rem; font-weight: 600; }
.radio-band .radio-card-body p.radio-card-live { font-size: 0.95rem; }
.miraath-poster-title { font-size: 1.06rem; font-weight: 600; line-height: 2; padding: .8rem .9rem; }
.miraath-post-title { font-size: 1rem; font-weight: 600; line-height: 2; }

/* ===== Menu Layanan — Pola A (perintah user 13 Nov 2026) ===== */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font: inherit; }
.header .nav-list button.nav-dropdown-toggle { font-size: 1.05rem; font-weight: 500; line-height: 1.6; padding: 0; }
.nav-dropdown-chevron { font-size: .68rem; transition: transform .25s; }
.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-panel { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; width: 456px; max-width: calc(100vw - 20px); background: #FFFDF9; border: 1px solid rgba(107, 45, 62, .12); border-radius: 14px; box-shadow: 0 18px 40px rgba(74, 29, 43, .18); padding: .5rem; display: none; z-index: 120; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-dropdown.open .nav-dropdown-panel { display: grid; }
@media (min-width: 901px) { .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { display: grid; } }
.nav-dropdown-panel a { display: flex; align-items: center; gap: .7rem; padding: .65rem .7rem; border-radius: 10px; color: #3A2A2E; font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav-dropdown-panel a:hover { background: #F7EEDD; }
.nav-dropdown-panel a i { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(107, 45, 62, .09); color: #6B2D3E; }
[data-theme="dark"] .nav-dropdown-panel { background: #33141F; border-color: rgba(212, 175, 55, .25); }
[data-theme="dark"] .nav-dropdown-panel a { color: #F3E9D7; }
[data-theme="dark"] .nav-dropdown-panel a:hover { background: rgba(212, 175, 55, .12); }
[data-theme="dark"] .nav-dropdown-panel a i { background: rgba(212, 175, 55, .15); color: #D4AF37; }
@media (max-width: 900px) {
    .nav-dropdown-panel { position: static; min-width: 0; box-shadow: none; border: none; background: transparent; padding: .2rem 0 .4rem 1rem; }
    .nav-dropdown-panel a { color: inherit; }
    [data-theme="dark"] .nav-dropdown-panel a i { background: rgba(212, 175, 55, .15); color: #D4AF37; }
}
@media (min-width: 901px) { .footer-grid { grid-template-columns: 1.5fr .9fr .9fr .9fr 1.05fr; } }
.layanan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.layanan-card { background: #FFFDF9; border: 1px solid rgba(107, 45, 62, .12); border-radius: 18px; padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; transition: transform .25s, box-shadow .25s; }
.layanan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(74, 29, 43, .13); }
.layanan-card-icon { width: 52px; height: 52px; border-radius: 14px; background: #6B2D3E; color: #D4AF37; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.layanan-card h3 { font-size: 1.12rem; margin: 0; }
.layanan-card p { margin: 0; font-size: .94rem; line-height: 1.65; opacity: .85; flex: 1; }
.layanan-card-link { font-weight: 600; color: #6B2D3E; text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.layanan-card-link:hover { color: #4A1D2B; }
[data-theme="dark"] .layanan-card { background: #33141F; border-color: rgba(212, 175, 55, .22); }
[data-theme="dark"] .layanan-card-link { color: #D4AF37; }
@media (max-width: 900px) { .layanan-grid { grid-template-columns: 1fr; } }

/* Perataan vertikal menu header (temuan user 13 Nov 2026): item .nav-list
   rata tengah penuh, teks tombol Layanan sejajar teks tautan lain */
@media (min-width: 901px) { .nav-list > li { display: flex; align-items: center; } .header .nav-list .nav-link { display: inline-flex; align-items: center; } }
/* Seksi Layanan kini 4 kartu (Dzikir & Doa Harian ditambahkan) */
@media (min-width: 1101px) { .layanan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 901px) and (max-width: 1100px) { .layanan-grid { grid-template-columns: repeat(2, 1fr); } }


/* Hero visual diperbesar (permintaan pengguna 2026-11-14): orbit dan
   panggung kitab lebih besar di layar lebar. */
@media (min-width: 1121px) {
    .rotating-ring { width: 580px; height: 580px; }
    .hero-slider-container { height: 540px; }
    .pulsing-circle { width: 540px; height: 540px; }
}

/* ===== Blog Model 3 — Rak Kategori (pilihan user 2026-11-14) =====
   Artikel dikelompokkan per rak kategori; kartu memakai gaya .blog-card
   yang sudah ada (foto hitam-putih dari aturan kartu artikel). */
#allBlogsGrid.blog-shelves { display: block; }
.blog-shelf { margin-bottom: 2.6rem; }
.blog-shelf:last-child { margin-bottom: 0.5rem; }
.blog-shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.6rem; margin-bottom: 1.15rem; }
.blog-shelf-head h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-dark); margin: 0; }
.blog-shelf-actions { display: inline-flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.blog-shelf-count { color: var(--text-light); font-size: 0.88rem; }
.blog-shelf-more { background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--primary-color); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; }
.blog-shelf-more:hover { text-decoration: underline; }
.blog-shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.blog-shelf-empty { color: var(--text-light); padding: 2rem 0; }
[data-theme="dark"] .blog-shelf-head { border-bottom-color: rgba(212, 175, 55, 0.55); }
[data-theme="dark"] .blog-shelf-more { color: #D4AF37; }
@media (max-width: 1100px) { .blog-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .blog-shelf-grid { grid-template-columns: 1fr; }
    .blog-shelf-head h3 { font-size: 1.15rem; }
    .blog-shelf-count { display: none; }
}

/* Footer contact icons (fix 2026-11-14): base rule colored them
   --primary-color maroon — invisible on the deep-maroon concept footer.
   Gold accent in light mode; dark mode keeps its own light color. */
html:not([data-theme="dark"]) .footer-links li i { color: #D4AF37; }

/* Kepala seksi Jadwal & Poster Kajian (radio): teks dipusatkan dan kolom
   diperlebar — sebelumnya blok 600px rata kiri membuat sisi kanan tampak
   kosong melompong di layar lebar (keluhan pengguna 14 Nov 2026). */
#jadwalMiraath .section-header { max-width: 760px; text-align: center; }
#jadwalMiraath .section-desc { margin-left: auto; margin-right: auto; }

/* ===== Navigasi bawah mobile ala aplikasi (2026-11-15) =====
   Bilah melayang: Beranda | Layanan (sheet) | Cari (tengah) | Tasbih |
   Tersimpan. Hanya tampil di layar <= 900px; desktop tidak berubah. */
.mnav { display: none; }
.mnav-backdrop[hidden],
.mnav-sheet[hidden] { display: none; }
.share-btn.is-saved { background: #6B2D3E; color: #D4AF37; border-color: #6B2D3E; }

@media (max-width: 900px) {
    body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
    .mnav {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1200;
        background: linear-gradient(180deg, #6B2D3E, #4A1D2B);
        border: 2px solid rgba(212, 175, 55, .55);
        border-radius: 33px;
        box-shadow: 0 16px 36px rgba(74, 29, 43, .35);
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        align-items: flex-end;
        justify-content: space-around;
    }
    .mnav-item {
        display: flex;
        flex-direction: row;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 46px;
        padding: 4px 2px;
        background: none;
        border: none;
        color: rgba(253, 248, 244, .72);
        border-radius: 999px;
        font-family: inherit;
        font-size: .78rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        isolation: isolate;
        transition: flex-grow .55s cubic-bezier(.68, -.02, .26, 1.12), color .3s;
    }
    .mnav-item i { font-size: 1.28rem; }
    .mnav-item.is-active { flex-grow: 2.3; }
    .mnav-noanim .mnav-item, .mnav-noanim .mnav-pill { transition: none !important; }
    .mnav-item.is-active svg { opacity: 0; }
    .mnav-item svg { transition: opacity .25s; }
    .mnav-pill {
        position: absolute;
        left: 0;
        top: 50%;
        height: 46px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 15px;
        background: #FDF8F4;
        border-radius: 999px;
        color: #4A1D2B;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1;
        transform: translate(2px, -50%);
        transition: transform .55s cubic-bezier(.68, -.02, .26, 1.12), width .55s cubic-bezier(.68, -.02, .26, 1.12);
        will-change: transform;
    }
    .mnav-pill svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .ai-chat-toggle { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

    .mnav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(30, 8, 14, .5);
        z-index: 1300;
    }
    .mnav-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1301;
        background: #FFFDF9;
        border-radius: 22px 22px 0 0;
        padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
        box-shadow: 0 -12px 32px rgba(74, 29, 43, .25);
    }
    [data-theme="dark"] .mnav-sheet { background: #33141F; }
    .mnav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .9rem;
    }
    .mnav-sheet-head h3 { margin: 0; font-size: 1rem; color: #6B2D3E; }
    [data-theme="dark"] .mnav-sheet-head h3 { color: #E9C46A; }
    .mnav-sheet-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid rgba(107, 45, 62, .3);
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 1rem;
    }
    [data-theme="dark"] .mnav-sheet-close { border-color: rgba(212, 175, 55, .45); }
    .mnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .mnav-grid a {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .7rem .8rem;
        border: 1px solid rgba(107, 45, 62, .14);
        border-radius: 12px;
        color: inherit;
        text-decoration: none;
        font-weight: 600;
        font-size: .9rem;
        min-height: 48px;
    }
    [data-theme="dark"] .mnav-grid a { border-color: rgba(212, 175, 55, .22); }
    .mnav-grid a i { color: #6B2D3E; width: 20px; text-align: center; }
    [data-theme="dark"] .mnav-grid a i { color: #E9C46A; }
}

/* Ikon Lucide (SVG) — ukuran mengikuti konteks font seperti ikon font */
svg.lucide { width: 1.05em; height: 1.05em; vertical-align: -0.14em; }
.mnav-item svg { width: 22px; height: 22px; }
.mnav-search svg { width: 23px; height: 23px; }
.mnav-grid a svg { width: 20px; height: 20px; color: #6B2D3E; flex: 0 0 auto; }
[data-theme="dark"] .mnav-grid a svg { color: #E9C46A; }
.layanan-card-icon svg { width: 1.35rem; height: 1.35rem; }

/* ===== Rapikan bilah bawah di layar lebar (tablet) =====
   Pemusatan TANPA transform: translateX(-50%) membuat Safari iOS salah
   menggambar ulang border bilah saat halaman di-scroll (bingkai emas
   tampak bergeser dari badan bilah, laporan Mimin 15 Nov 2026).
   Margin auto memusatkan dengan geometri yang sama tanpa lapisan
   transform, jadi tidak ada yang bisa bergeser saat repaint. */
@media (max-width: 900px) {
    .mnav {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 24px);
        max-width: 520px;
    }
}
.mnav-pill { justify-content: center; }

/* Slot aktif lebih ramping di tablet agar pil tidak melebar berlebihan */
@media (min-width: 560px) and (max-width: 900px) {
    .mnav-item.is-active { flex-grow: 2.05; }
}

/* Panel Layanan di dalam menu mobile: lebar mengikuti panel, tidak meluber keluar */
@media (max-width: 900px) {
    .nav-dropdown-panel { width: 100%; max-width: 100%; }
}

/* Kotak ikon panel Layanan: samakan untuk ikon Lucide (SVG) seperti ikon Font Awesome */
.nav-dropdown-panel a svg.lucide {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 9px;
    background: rgba(107, 45, 62, .09);
    color: #6B2D3E;
}
[data-theme="dark"] .nav-dropdown-panel a svg.lucide { background: rgba(212, 175, 55, .15); color: #D4AF37; }

/* Lencana orbiter hero untuk ikon SVG (Lucide & Ka'bah kustom) */
.rotating-ring .orbiter svg {
    color: var(--primary-color);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    width: 100%;
    height: 100%;
    padding: 11px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: rotate-counter 40s linear infinite;
    will-change: transform;
}

/* Ikon Line Awesome sebaris (sosial, bagikan, penanda) */
.la-ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.14em; flex: none; }
.share-btn .la-ic { width: 1.15em; height: 1.15em; vertical-align: middle; }