/* ============================================
   OKUYUCU — Premium Book Reader
   Inspired by bibliorus.com/ke
   ============================================ */

/* --- CSS Variables / Themes --- */
:root {
    --ok-bg: #f8f3eb;
    --ok-sidebar-bg: #ffffff;
    --ok-text: #3a2e1f;
    --ok-text-secondary: #665c50;
    --ok-heading: #b8860b;
    --ok-accent: #c87533;
    --ok-border: #e8dcc8;
    --ok-highlight: rgba(255, 235, 150, 0.45);
    --ok-card-bg: #ffffff;
    --ok-card-shadow: 0 4px 15px rgba(0,0,0,0.03);
    --ok-header-bg: #ffffff;
    --ok-header-border: #e8dcc8;
    --ok-link: #b8860b;
    --ok-toc-active: #fdf0d5;
    --ok-toc-hover: #fdf6e8;
    --ok-surface-2: rgba(184, 134, 11, 0.05);
    --ok-border-2: rgba(184, 134, 11, 0.2);
    --ok-font-body: 'Inter', sans-serif;
    --ok-font-heading: 'Inter', sans-serif;
    --ok-font-size: 1.15rem;
    --ok-line-height: 2;
    --ok-content-max: 740px;
    --ok-sidebar-w: 280px;
    --ok-header-h: 52px;
    --ok-radius: 6px;
}

/* Theme: Green */
[data-ok-theme="green"] {
    --ok-bg: #f4f8f0; --ok-sidebar-bg: #f4f8f0; --ok-text: #2a3a1f;
    --ok-heading: #4a7c2e; --ok-accent: #5a9e3a; --ok-border: #cde0b8;
    --ok-highlight: rgba(180, 230, 140, 0.35); --ok-card-bg: #fff;
    --ok-header-bg: #f4f8f0; --ok-header-border: #cde0b8;
    --ok-link: #4a7c2e; --ok-toc-active: #e8f5d6; --ok-toc-hover: #eef8e4;
    --ok-text-secondary: #4a6341;
    --ok-surface-2: rgba(74, 124, 46, 0.05);
    --ok-border-2: rgba(74, 124, 46, 0.2);
}
/* Theme: Rose */
[data-ok-theme="rose"] {
    --ok-bg: #fdf2f4; --ok-sidebar-bg: #fdf2f4; --ok-text: #3a1f25;
    --ok-heading: #b04060; --ok-accent: #c75080; --ok-border: #e8c0cc;
    --ok-highlight: rgba(255, 180, 200, 0.3); --ok-card-bg: #fff;
    --ok-header-bg: #fdf2f4; --ok-header-border: #e8c0cc;
    --ok-link: #b04060; --ok-toc-active: #fde0e8; --ok-toc-hover: #fdeaf0;
    --ok-text-secondary: #754d5a;
    --ok-surface-2: rgba(176, 64, 96, 0.05);
    --ok-border-2: rgba(176, 64, 96, 0.2);
}
/* Theme: Dark Navy */
[data-ok-theme="navy"] {
    --ok-bg: #1a1e2e; --ok-sidebar-bg: #1e2236; --ok-text: #d0d4e0;
    --ok-heading: #8899cc; --ok-accent: #6688bb; --ok-border: #2e3448;
    --ok-highlight: rgba(100, 140, 200, 0.2); --ok-card-bg: #242840;
    --ok-card-shadow: 0 1px 8px rgba(0,0,0,0.3);
    --ok-header-bg: #1e2236; --ok-header-border: #2e3448;
    --ok-link: #8899cc; --ok-toc-active: #2a3050; --ok-toc-hover: #262a44;
    --ok-text-secondary: #8890a8;
    --ok-surface-2: rgba(102, 136, 187, 0.08);
    --ok-border-2: rgba(102, 136, 187, 0.2);
}
/* Theme: Dark */
[data-ok-theme="dark"] {
    --ok-bg: #1e1e1e; --ok-sidebar-bg: #232323; --ok-text: #d4d4d4;
    --ok-heading: #ccaa66; --ok-accent: #bb9944; --ok-border: #3a3a3a;
    --ok-highlight: rgba(200, 180, 100, 0.15); --ok-card-bg: #2a2a2a;
    --ok-card-shadow: 0 1px 8px rgba(0,0,0,0.4);
    --ok-header-bg: #232323; --ok-header-border: #3a3a3a;
    --ok-link: #ccaa66; --ok-toc-active: #333020; --ok-toc-hover: #2e2e2e;
    --ok-text-secondary: #999;
    --ok-surface-2: rgba(204, 170, 102, 0.08);
    --ok-border-2: rgba(204, 170, 102, 0.2);
}
/* Theme: Sepia Dark */
[data-ok-theme="sepia-dark"] {
    --ok-bg: #2a2520; --ok-sidebar-bg: #2e2924; --ok-text: #d4c8b0;
    --ok-heading: #c8a060; --ok-accent: #b8903a; --ok-border: #4a4030;
    --ok-highlight: rgba(200, 160, 80, 0.15); --ok-card-bg: #34302a;
    --ok-card-shadow: 0 1px 8px rgba(0,0,0,0.4);
    --ok-header-bg: #2e2924; --ok-header-border: #4a4030;
    --ok-link: #c8a060; --ok-toc-active: #3a3428; --ok-toc-hover: #363028;
    --ok-text-secondary: #9a8a70;
    --ok-surface-2: rgba(200, 160, 96, 0.08);
    --ok-border-2: rgba(200, 160, 96, 0.2);
}
/* Theme: Blue */
[data-ok-theme="blue"] {
    --ok-bg: #f0f4fa; --ok-sidebar-bg: #f0f4fa; --ok-text: #1f2a3a;
    --ok-heading: #2e5c9e; --ok-accent: #3a70b8; --ok-border: #c0d0e8;
    --ok-highlight: rgba(140, 180, 240, 0.25); --ok-card-bg: #fff;
    --ok-header-bg: #f0f4fa; --ok-header-border: #c0d0e8;
    --ok-link: #2e5c9e; --ok-toc-active: #dce8f8; --ok-toc-hover: #e4eefa;
    --ok-text-secondary: #3f5a75;
    --ok-surface-2: rgba(46, 92, 158, 0.05);
    --ok-border-2: rgba(46, 92, 158, 0.2);
}
/* Theme: Purple */
[data-ok-theme="purple"] {
    --ok-bg: #f6f0fa; --ok-sidebar-bg: #f6f0fa; --ok-text: #2a1f3a;
    --ok-heading: #7040a0; --ok-accent: #8a50c0; --ok-border: #d4c0e8;
    --ok-highlight: rgba(160, 120, 220, 0.2); --ok-card-bg: #fff;
    --ok-header-bg: #f6f0fa; --ok-header-border: #d4c0e8;
    --ok-link: #7040a0; --ok-toc-active: #ece0f8; --ok-toc-hover: #f0e8fa;
    --ok-text-secondary: #6a5a8a;
    --ok-surface-2: rgba(112, 64, 160, 0.05);
    --ok-border-2: rgba(112, 64, 160, 0.2);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    min-height: 100vh;
    font-family: var(--ok-font-body);
    background: var(--ok-bg); color: var(--ok-text);
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s, color 0.3s;
}

/* --- Layout Shell --- */
.ok-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Header --- */
.ok-header {
    position: sticky; top: 0;
    height: var(--ok-header-h); min-height: var(--ok-header-h);
    background: var(--ok-header-bg); border-bottom: 1px solid var(--ok-header-border);
    display: flex; align-items: center; justify-content: center;
    padding: 0 20px; z-index: 100;
    transition: background 0.3s, border-color 0.3s;
}
.ok-header-title {
    text-align: center;
}
.ok-header-title h1 {
    font-family: var(--ok-font-heading);
    font-size: 1.05rem; font-weight: 600; color: var(--ok-heading);
    letter-spacing: 0.5px;
}
.ok-header-title small {
    font-size: 0.75rem; color: var(--ok-text-secondary); font-weight: 400;
}
.ok-header-search {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: var(--ok-text-secondary); font-size: 1.1rem;
    background: none; border: none; padding: 6px;
    transition: color 0.2s;
}
.ok-header-search:hover { color: var(--ok-heading); }

.ok-header-menu {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: var(--ok-text-secondary); font-size: 1.15rem;
    background: none; border: none; padding: 6px; display: none;
}
.ok-header-menu:hover { color: var(--ok-heading); }

/* --- Workspace --- */
.ok-workspace {
    display: flex; flex: 1; 
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
    width: 100%;
}

/* --- Sidebar --- */
.ok-sidebar {
    width: var(--ok-sidebar-w); min-width: var(--ok-sidebar-w);
    background: var(--ok-sidebar-bg); 
    border: none;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    display: flex; flex-direction: column;
    position: sticky;
    top: calc(var(--ok-header-h) + 20px);
    height: calc(100vh - var(--ok-header-h) - 40px);
    overflow-y: auto;
    transition: background 0.3s, transform 0.3s;
    z-index: 90;
    scrollbar-width: thin;
    scrollbar-color: var(--ok-border) transparent;
}

/* Theme Picker */
.ok-theme-bar {
    padding: 12px 16px 8px; border-bottom: 1px solid var(--ok-border);
}
.ok-theme-bar label {
    font-family: var(--ok-font-heading); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ok-text-secondary); margin-bottom: 6px; display: block;
}
.ok-theme-dots {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.ok-theme-dot {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.15s, border-color 0.2s;
}
.ok-theme-dot:hover { transform: scale(1.15); }
.ok-theme-dot.active { border-color: var(--ok-heading); transform: scale(1.15); }
.ok-theme-dot[data-theme="default"] { background: linear-gradient(135deg, #f0e0c0, #d4a050); }
.ok-theme-dot[data-theme="green"] { background: linear-gradient(135deg, #a0d870, #4a8030); }
.ok-theme-dot[data-theme="rose"] { background: linear-gradient(135deg, #f0a0b8, #c04060); }
.ok-theme-dot[data-theme="navy"] { background: linear-gradient(135deg, #3040608a, #1a2040); }
.ok-theme-dot[data-theme="dark"] { background: linear-gradient(135deg, #555, #1e1e1e); }
.ok-theme-dot[data-theme="sepia-dark"] { background: linear-gradient(135deg, #6a5a40, #2a2520); }
.ok-theme-dot[data-theme="blue"] { background: linear-gradient(135deg, #80b0e0, #2060a0); }
.ok-theme-dot[data-theme="purple"] { background: linear-gradient(135deg, #c0a0e0, #6030a0); }

/* Sentence Highlight Toggle */
.ok-highlight-toggle {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; font-size: 0.78rem; color: var(--ok-text-secondary);
    font-family: var(--ok-font-heading);
}
.ok-toggle-switch {
    position: relative; width: 36px; height: 20px; cursor: pointer;
}
.ok-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ok-toggle-slider {
    position: absolute; inset: 0; background: var(--ok-border);
    border-radius: 20px; transition: background 0.3s;
}
.ok-toggle-slider::before {
    content: ''; position: absolute; left: 2px; top: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: white; transition: transform 0.3s;
}
.ok-toggle-switch input:checked + .ok-toggle-slider {
    background: var(--ok-accent);
}
.ok-toggle-switch input:checked + .ok-toggle-slider::before {
    transform: translateX(16px);
}

/* Font Size Control */
.ok-font-controls {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    font-family: var(--ok-font-heading); font-size: 0.75rem;
    color: var(--ok-text-secondary);
}
.ok-font-btn {
    width: 26px; height: 26px; border-radius: 4px;
    border: 1px solid var(--ok-border); background: var(--ok-card-bg);
    color: var(--ok-text); cursor: pointer; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.ok-font-btn:hover { background: var(--ok-toc-hover); }
.ok-font-size-label { min-width: 36px; text-align: center; font-weight: 500; }

/* TOC Section */
.ok-toc-header {
    padding: 10px 16px 6px; font-family: var(--ok-font-heading);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--ok-heading); font-weight: 600;
}
.ok-toc-list {
    flex: 1; overflow-y: auto; padding: 4px 0;
    scrollbar-width: thin; scrollbar-color: var(--ok-border) transparent;
}
.ok-toc-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 16px; cursor: pointer; font-size: 0.82rem;
    color: var(--ok-text); transition: background 0.15s;
    border-left: 3px solid transparent; line-height: 1.4;
    font-family: var(--ok-font-heading);
}
.ok-toc-item:hover { background: var(--ok-toc-hover); }
.ok-toc-item.active {
    background: var(--ok-toc-active);
    border-left-color: var(--ok-accent);
    font-weight: 600;
}
.ok-toc-item .toc-arrow {
    color: var(--ok-text-secondary); font-size: 0.65rem;
    margin-top: 3px; flex-shrink: 0; transition: transform 0.2s;
}
.ok-toc-item.active .toc-arrow { transform: rotate(90deg); }
.ok-toc-item .toc-label { flex: 1; }
.ok-toc-item .toc-sub {
    font-size: 0.7rem; color: var(--ok-text-secondary);
    font-weight: 400; display: block; margin-top: 2px;
}
.ok-toc-item.locked {
    opacity: 0.45; cursor: default;
}

/* --- Main Content Area --- */
.ok-content {
    flex: 1;
    padding: 60px 40px;
    scroll-behavior: smooth;
    background: var(--ok-card-bg);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    min-height: 80vh;
    box-sizing: border-box;
    transition: all 0.3s ease;
    max-width: 900px;
    margin: 0 auto;
}

/* Content Card */
.ok-card {
    max-width: var(--ok-content-max);
    margin: 0 auto;
}
.ok-card h1 {
    font-family: var(--ok-font-heading);
    font-size: 1.6rem; font-weight: 700;
    text-align: center; color: var(--ok-heading);
    margin-bottom: 24px; letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Intro Box */
.ok-intro {
    background: var(--ok-surface-2);
    border: 1px dashed var(--ok-border-2);
    border-radius: var(--ok-radius);
    padding: 24px 28px; margin-bottom: 28px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 20px inset;
    font-size: calc(var(--ok-font-size) * 0.95);
    line-height: var(--ok-line-height);
    color: var(--ok-text);
    text-align: justify;
}
.ok-intro b, .ok-intro strong { color: var(--ok-heading); font-weight: 700; }

/* Besmele (SVG Implementation) */
.ok-besmele, .print-besmele-graphic {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 25px auto 45px !important;
    text-align: center;
    
    /* Using SVG as a mask to allow theme-aware coloring */
    font-size: 0 !important;
    background-color: var(--ok-heading);
    -webkit-mask-image: url('../img/besmele.svg');
    mask-image: url('../img/besmele.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* Responsive sizing */
    height: clamp(60px, 12vw, 110px);
    width: 100%;
    max-width: 450px;
    border: none !important;
}
.ok-besmele img {
    display: none !important; /* Hide original images if any */
}

/* Verse Block */
.ok-verse {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ok-border);
}
.ok-verse:last-child { border-bottom: none; }

.ok-verse-text .v-arabic {
    display: block;
    direction: rtl;
    text-align: center;
    line-height: 2.2;
    box-shadow: rgba(184, 134, 11, 0.02) 0px 0px 20px inset;
    font-style: normal !important;
    padding: 1rem 1.5rem;
    margin: 35px 0px;
    background: var(--ok-surface-2);
    border-radius: 25px;
    border: 1px dashed var(--ok-border-2);
    transition: all 0.3s ease;
    font-family: 'Daria', 'Amiri', serif;
    font-size: 2rem;
    color: var(--ok-text);
}
.ok-verse-text .v-arabic:hover {
    background: var(--ok-highlight);
}

.ok-verse-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ok-heading); color: #fff;
    font-family: var(--ok-font-heading);
    font-size: 0.7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
    margin-right: 6px; vertical-align: middle;
    letter-spacing: 0.3px;
}

.ok-verse-text {
    font-size: var(--ok-font-size);
    line-height: var(--ok-line-height);
    text-align: justify;
    color: var(--ok-text);
    transition: font-size 0.2s;
}
.ok-verse-text b, .ok-verse-text strong { color: var(--ok-heading); }
.ok-verse-text a {
    color: var(--ok-link); text-decoration: none;
    font-weight: 600;
    padding: 0 4px;
    margin: 0 1px;
    border-radius: 4px;
    background: var(--ok-surface-2);
    border-bottom: 1px solid var(--ok-border-2);
    transition: all 0.2s ease;
}
.ok-verse-text a:hover { 
    background: var(--ok-highlight);
    color: var(--ok-accent);
    border-bottom-color: var(--ok-accent);
}

.ok-verse-text sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
    margin-left: 1px;
}

.ok-verse-text ul, 
.ok-footnotes ul,
.ok-verse-modal-content ul {
    margin: 15px 0 15px 40px;
    list-style-type: disc;
}

.ok-verse-text li {
    margin-bottom: 8px;
}

/* Sentence Highlighting */
.ok-sentence {
    transition: background 0.3s;
    border-radius: 4px; padding: 1px 2px;
}
body.highlight-sentences .ok-sentence[data-color="0"] { background: rgba(142, 114, 206, 0.18); }
body.highlight-sentences .ok-sentence[data-color="1"] { background: rgba(238, 186, 17, 0.18); }
body.highlight-sentences .ok-sentence[data-color="2"] { background: rgba(228, 120, 133, 0.18); }
body.highlight-sentences .ok-sentence[data-color="3"] { background: rgba(90, 150, 230, 0.18); }
body.highlight-sentences .ok-sentence[data-color="4"] { background: rgba(74, 182, 116, 0.18); }

/* Footnote Blocks */
.ok-footnotes {
    margin: 24px 0; padding: 1.2rem 1.5rem;
    background: var(--ok-surface-2);
    border: 1px dashed var(--ok-border-2);
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 20px inset;
    font-size: 0.9rem; line-height: 1.6;
    color: var(--ok-text-secondary);
    text-align: justify;
    transition: background 0.3s ease-in-out;
}
.ok-footnotes p { margin-bottom: 12px; }
.ok-footnotes p:last-child { margin-bottom: 0; }
.ok-footnotes b, .ok-footnotes strong, .ok-footnotes .fn-marker { color: var(--ok-text-main); font-weight: 600; }
.ok-footnotes a { color: var(--ok-link); text-decoration: none; }

/* Navigation */
.ok-nav {
    display: flex; justify-content: space-between; align-items: center;
    max-width: var(--ok-content-max); margin: 40px auto 20px;
    padding-top: 10px;
}
.ok-nav-btn {
    font-family: var(--ok-font-heading);
    font-size: 0.95rem; font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    background: var(--ok-heading); 
    color: #ffffff;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ok-nav-btn:hover:not(:disabled) { 
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}
.ok-nav-btn:disabled { 
    opacity: 0.4; cursor: default; 
    background: var(--ok-border);
    color: var(--ok-text-secondary);
    box-shadow: none;
}

/* Welcome Screen */
.ok-welcome {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; text-align: center;
    padding: 40px;
}
.ok-welcome i { font-size: 3rem; color: var(--ok-heading); margin-bottom: 16px; opacity: 0.5; }
.ok-welcome h2 {
    font-family: var(--ok-font-heading);
    font-size: 1.3rem; color: var(--ok-heading); margin-bottom: 8px;
}
.ok-welcome p { color: var(--ok-text-secondary); font-size: 0.95rem; }

/* Loader */
.ok-loader {
    display: flex; align-items: center; justify-content: center;
    height: 200px;
}
.ok-spinner {
    width: 32px; height: 32px; border: 3px solid var(--ok-border);
    border-top-color: var(--ok-accent); border-radius: 50%;
    animation: ok-spin 0.7s linear infinite;
}
@keyframes ok-spin { to { transform: rotate(360deg); } }

/* Search Modal */
.ok-search-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
}
.ok-search-overlay.open { display: flex; }
.ok-search-box {
    background: var(--ok-card-bg); border-radius: 10px;
    width: 90%; max-width: 520px; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}
.ok-search-header {
    display: flex; align-items: center; padding: 12px 16px;
    border-bottom: 1px solid var(--ok-border); gap: 10px;
}
.ok-search-header i { color: var(--ok-text-secondary); }
.ok-search-header input {
    flex: 1; border: none; outline: none; font-size: 1rem;
    background: transparent; color: var(--ok-text);
    font-family: var(--ok-font-heading);
}
.ok-search-close {
    background: none; border: none; font-size: 1.4rem;
    color: var(--ok-text-secondary); cursor: pointer;
}
.ok-search-results {
    max-height: 50vh; overflow-y: auto; padding: 8px 0;
}
.ok-search-item {
    padding: 10px 16px; cursor: pointer;
    transition: background 0.15s;
}
.ok-search-item:hover { background: var(--ok-toc-hover); }
.ok-search-item-title {
    font-family: var(--ok-font-heading);
    font-size: 0.8rem; font-weight: 600; color: var(--ok-heading);
}
.ok-search-item-snippet {
    font-size: 0.82rem; color: var(--ok-text-secondary);
    margin-top: 3px; line-height: 1.5;
}
.ok-search-item-snippet .hl { background: var(--ok-highlight); padding: 0 2px; border-radius: 2px; }
.ok-search-empty {
    padding: 30px; text-align: center;
    color: var(--ok-text-secondary); font-size: 0.9rem;
}

/* Copy Protection */
.ok-content, .ok-sidebar {
    -webkit-user-select: none; user-select: none;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .ok-workspace { padding: 0; gap: 0; }
    .ok-content { border-radius: 0; box-shadow: none; padding: 20px 16px 60px; max-width: 100%; margin: 0; }
    .ok-header-menu { display: block; }
    .ok-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        height: 100vh;
        transform: translateX(-100%); z-index: 200;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
        width: 300px;
        border-radius: 0;
    }
    .ok-sidebar.open { transform: translateX(0); }
    .ok-sidebar-overlay {
        position: fixed; inset: 0; z-index: 190;
        background: rgba(0,0,0,0.3); display: none;
    }
    .ok-sidebar-overlay.show { display: block; }
    .ok-content { padding: 20px 16px 60px; }
    .ok-card h1 { font-size: 1.25rem; }
    .ok-verse-text .v-arabic { font-size: 1.6rem; padding: 1rem; margin: 20px 0px; }
}

/* Print hidden */
@media print {
    .ok-sidebar, .ok-header { display: none !important; }
    .ok-content { overflow: visible; height: auto; }
}

/* Inline Arabic */
.v-arabic-inline {
    font-family: 'Amiri', 'Daria', serif;
    direction: rtl; unicode-bidi: bidi-override;
    font-size: 1.15em; line-height: 2;
}
/* Scroll Reveal Animations (Jawshan.net Style) */
.ok-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    visibility: hidden;
    will-change: opacity, transform;
}
.ok-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Verse Direct Link Modal */
.ok-verse-modal-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.ok-verse-modal-overlay.open { display: flex; }
.ok-verse-modal {
    background: var(--ok-card-bg); border-radius: 24px;
    width: 90%; max-width: 600px; max-height: 85vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    animation: ok-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ok-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ok-verse-modal-close {
    position: absolute; right: 16px; top: 16px;
    background: var(--ok-surface-2); border: 1px solid var(--ok-border-2);
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 1.2rem; color: var(--ok-text-secondary);
    cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.ok-verse-modal-close:hover { background: var(--ok-accent); color: white; border-color: transparent; }
.ok-verse-modal-content {
    padding: 40px; overflow-y: auto; flex: 1;
    scrollbar-width: thin; scrollbar-color: var(--ok-border) transparent;
}
.ok-verse-modal-content .ok-verse { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.ok-verse-modal-content .ok-verse-text .v-arabic { font-size: 1.6rem; padding: 0.8rem 1.2rem; margin: 20px 0; }
.ok-verse-modal-content h3 {
    font-family: var(--ok-font-heading); color: var(--ok-heading);
    font-size: 0.9rem; margin-bottom: 15px; text-transform: uppercase;
    letter-spacing: 1px; border-bottom: 1px solid var(--ok-border);
    padding-bottom: 10px;
}