:root {
    --main: #be2edd; --second: #fd79a8; --dark: #1a051f;
    --black: #212529; --white: #fafafa; --bg: #fafafa;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: var(--bg);
    font-family: 'Noto Sans Arabic', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    line-height: 1.8;
    color: #333;
    text-align: justify
}
.header-lite {
    background: var(--bg); padding: 10px 5%;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100;
}
.back-link { color: var(--second); text-decoration: none; font-size: 0.9rem; }

.reader-grid {
    direction: rtl; 
    display: grid;
    grid-template-columns: 800px 300px;
    gap: 30px;
    justify-content: center;
    padding: 40px 20px;
}

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

    .sidebar {
        display: none;
    }
}

/* المقال الأساسي */
.chapter-box {padding: 40px}
h1 { color: var(--main); margin-bottom: 25px;  margin-top: 25px; font-size: 1.7rem; text-align: center}
.content { font-size: 1.3rem; text-align: justify; }
.content img { max-width: 100%; height: auto; border-radius: 5px; margin: 20px 0; }
.chapter-hero {
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

.chapter-hero img {
    width: 100%;
    height: 60vh; /* تقدري تزودي أو تقللي */
    object-fit: cover; /* أهم سطر */
    display: block;
}
.chapter-contents{padding-top: 10px; padding-bottom: 10px;}
/* الأزرار */
.nav-buttons { 
    display: flex; justify-content: space-between; 
    margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; 
}
.btn {
    padding: 10px 25px; border-radius: 5px; text-decoration: none;
    transition: 0.3s; font-weight: bold;
}
.btn-next { background: var(--main); color: #fff; }
.btn-prev { border: 1px solid #ccc; color: #555; }

/* إعلانات جانبية */
.ad-side { background: #f0f0f0; border: 1px dashed #ccc; text-align: center; padding-top: 50px; color: #999; }

/* التجاوب مع الموبايل (Responsive) */
@media (max-width: 1100px) {
    .reader-grid { grid-template-columns: 1fr; } /* إلغاء الجوانب */
    .ad-side { display: none; } /* إخفاء إعلانات الجوانب في الموبايل */
    .chapter-box { padding: 20px; border-radius: 0; }
}