/* 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;
    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;
}

.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 mandatory; }
.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.08em; text-transform: uppercase; 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; min-width: 264px; 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; }
.nav-dropdown.open .nav-dropdown-panel { display: block; }
@media (min-width: 901px) { .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { display: block; } }
.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; }
}