
:root{
    --article-navy:#17375e;
    --article-blue:#1f73b7;
    --article-soft:#eaf2f9;
    --article-bg:#f4f7fb;
    --article-line:#d8e2ec;
    --article-text:#1a2738;
    --article-muted:#627388;
}
.article-page{background:var(--article-bg);padding:42px 0 70px}
.article-detail-container{width:min(920px,calc(100% - 30px));margin:auto}
.article-breadcrumb{display:flex;gap:9px;align-items:center;margin-bottom:22px;color:var(--article-muted);font-size:14px}
.article-breadcrumb a{color:var(--article-blue);text-decoration:none}
.article-detail{background:#fff;border:1px solid var(--article-line);border-radius:18px;overflow:hidden;box-shadow:0 12px 34px rgba(23,55,94,.08)}
.article-detail-header{padding:44px 48px 30px;text-align:center}
.article-detail-eyebrow{display:inline-block;background:var(--article-soft);color:var(--article-blue);font-weight:800;font-size:12px;letter-spacing:.08em;border-radius:999px;padding:8px 13px;margin-bottom:16px}
.article-detail-header h1{max-width:780px;margin:0 auto 18px;color:var(--article-navy);font-size:clamp(34px,5vw,52px);line-height:1.12}
.article-lead{max-width:760px;margin:0 auto;color:var(--article-muted);font-size:18px;line-height:1.8}
.article-detail-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.article-detail-tags span{background:var(--article-soft);border:1px solid #d5e5f2;color:var(--article-navy);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.article-detail-image{margin:0;background:#edf2f7}
.article-detail-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.article-detail-body{padding:40px 48px 48px}
.article-text-section{margin-bottom:32px}
.article-text-section h2,.article-conclusion h2{margin:0 0 12px;color:var(--article-navy);font-size:26px;line-height:1.3}
.article-text-section p,.article-conclusion p{margin:0;color:var(--article-text);font-size:17px;line-height:1.9}
.article-conclusion{margin-top:38px;padding:25px 28px;background:#f8fbfe;border:1px solid var(--article-line);border-radius:14px}
.article-dzcounter-cta{margin-top:34px;padding:26px 28px;background:linear-gradient(135deg,#eaf2f9,#f8fbfe);border:1px solid var(--article-line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.article-dzcounter-cta span{color:var(--article-blue);font-size:12px;font-weight:900;letter-spacing:.08em}
.article-dzcounter-cta h2{margin:5px 0 8px;color:var(--article-navy);font-size:22px}
.article-dzcounter-cta p{margin:0;color:var(--article-muted);line-height:1.6}
.article-dzcounter-cta a{flex:0 0 auto;background:var(--article-navy);color:#fff;padding:13px 18px;border-radius:8px;text-decoration:none;font-weight:800}
.article-back{margin-top:22px;text-align:center}
.article-back a{color:var(--article-blue);text-decoration:none;font-weight:800}
html[dir="rtl"] .article-detail-body,html[dir="rtl"] .article-detail-header{text-align:right}
html[dir="rtl"] .article-detail-tags{justify-content:flex-start}
html[dir="rtl"] .article-breadcrumb{direction:rtl}
@media(max-width:640px){
  .article-page{padding:24px 0 48px}
  .article-detail-header{padding:30px 20px 24px}
  .article-detail-header h1{font-size:34px}
  .article-lead{font-size:16px}
  .article-detail-body{padding:28px 20px 30px}
  .article-text-section h2,.article-conclusion h2{font-size:22px}
  .article-text-section p,.article-conclusion p{font-size:16px}
  .article-dzcounter-cta{align-items:flex-start;flex-direction:column}
  .article-dzcounter-cta a{width:100%;text-align:center}
}
