/* ==========================================================
   EDUSMART MUSLIM
   artikel.css v1.5
   Article / Pustaka
========================================================== */

.article-page{background:#FAFCFB;}
.article-main{padding:56px 0 96px;}
.article-container{width:90%;max-width:860px;margin:0 auto;}
.article-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px;color:var(--color-text-light);font-size:.95rem;}
.article-breadcrumb a{color:var(--color-primary);font-weight:600;}
.article-breadcrumb a:hover,.article-breadcrumb a:focus{text-decoration:underline;}
.article-breadcrumb__separator{color:var(--color-border);}
.article-header{padding:48px 48px 42px;margin-bottom:28px;background:var(--color-white);border:1px solid var(--color-border);border-radius:28px;box-shadow:0 12px 36px rgba(0,0,0,.05);text-align:center;}
.article-category{display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;padding:8px 18px;border:1px solid var(--color-primary);border-radius:var(--radius-pill);background:var(--color-primary-light);color:var(--color-primary-dark);font-size:.95rem;font-weight:700;}
.article-title{max-width:720px;margin:0 auto 20px;color:var(--color-primary-dark);font-family:var(--font-heading);font-size:clamp(2.25rem,4vw,3.5rem);font-weight:800;line-height:1.18;letter-spacing:-.025em;}
.article-lead{max-width:700px;margin:0 auto;color:var(--color-text-light);font-size:clamp(1.08rem,1rem + .3vw,1.25rem);line-height:1.8;}
.article-content{padding:52px 56px 58px;background:var(--color-white);border:1px solid var(--color-border);border-radius:28px;box-shadow:0 12px 36px rgba(0,0,0,.04);}
.article-illustration{width:100%;margin:0 0 38px;padding:0;}
.article-illustration img{display:block;width:100%;max-width:100%;height:auto;border-radius:18px;}

/* ARTICLE TYPOGRAPHY — one base system, with limited semantic components */
.article-content h2{margin:2.2em 0 .85em;color:var(--color-text);font-family:var(--font-heading);font-size:1.65rem;font-weight:700;line-height:1.45;letter-spacing:-.01em;}
.article-content h2 + p{margin-top:0;}
.article-content h3{margin:0 0 .45em;color:var(--color-primary-dark);font-family:var(--font-heading);font-size:1.25rem;line-height:1.35;}
.article-content p{margin:0 0 1.55em;color:var(--color-text);font-family:var(--font-body);font-size:1.13rem;font-weight:400;line-height:1.95;letter-spacing:normal;text-align:left;}
.article-content p:last-child{margin-bottom:0;}
.article-content ul,.article-content ol{margin:0 0 1.55em;padding-left:1.45em;color:var(--color-text);}
.article-content li{margin-bottom:.85em;padding-left:.25em;font-size:1.13rem;line-height:1.85;}
.article-content li:last-child{margin-bottom:0;}
.article-content ol{list-style-position:outside;}
.article-content ol li::marker{color:var(--color-primary-dark);font-weight:700;}
.article-content a{color:var(--color-primary-dark);font-weight:700;text-decoration:none;}
.article-content a:hover,.article-content a:focus{text-decoration:underline;}
.article-content em{font-style:italic;}
.article-content strong{color:var(--color-primary-dark);}
.article-opening{font-size:1.22rem !important;font-weight:600;color:var(--color-primary-dark) !important;}

.article-highlight{margin:2.1em 0 2.2em;padding:1.2em 1.5em;border-left:4px solid var(--color-primary);border-radius:0 14px 14px 0;background:var(--color-primary-light);}
.article-highlight p{margin:0;color:var(--color-primary-dark);font-size:1.16rem;font-weight:700;line-height:1.8;}

.article-quote{margin:2.2em 0;padding:1.45em 1.7em;border-left:4px solid var(--color-accent);border-radius:0 16px 16px 0;background:#FCFAF1;}
.article-quote p{margin:0 0 .75em;color:var(--color-primary-dark);font-family:var(--font-heading);font-size:1.25rem;line-height:1.75;}
.article-quote cite{display:block;color:var(--color-text-light);font-size:.98rem;font-style:normal;font-weight:700;line-height:1.6;}

.article-concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:2em 0 2.2em;}
.article-concept{padding:24px 24px 22px;border:1px solid var(--color-border);border-radius:18px;background:#FAFCFB;}
.article-concept__label{margin-bottom:12px;color:var(--color-primary);font-size:.85rem;font-weight:800;letter-spacing:.08em;}
.article-concept h3{font-size:1.3rem;}
.article-concept p{margin:0;color:var(--color-text-light);font-size:1rem;line-height:1.75;}

.article-tips{padding-left:1.55em;}
.article-tips li{padding-left:.35em;margin-bottom:1.1em;}

.article-closing{margin:2.5em 0 .5em;padding:2em 1.6em;text-align:center;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.article-closing p{margin:0 0 .55em;text-align:center;font-size:1.13rem;line-height:1.8;}
.article-closing p:last-child{margin-bottom:0;}
.article-closing__question{margin-top:.35em !important;color:var(--color-primary-dark);font-family:var(--font-heading);font-size:1.75rem !important;font-weight:700;line-height:1.5 !important;}

.article-divider{width:72px;height:3px;margin:38px auto;border:0;border-radius:var(--radius-pill);background:var(--color-accent);}
.article-reference{margin-top:44px;padding:24px 26px;border-left:4px solid var(--color-accent);border-radius:0 16px 16px 0;background:#FCFAF1;color:var(--color-text-light);font-size:.98rem;line-height:1.75;}
.article-reference strong{color:var(--color-primary-dark);}
.article-navigation{display:flex;justify-content:space-between;gap:18px;margin-top:28px;}
.article-navigation .btn{text-align:center;}
.article-back{margin-right:auto;}
.article-footer-note{margin-top:42px;text-align:center;color:var(--color-text-light);font-size:.95rem;}

@media (max-width:700px){
    .article-main{padding:36px 0 64px;}
    .article-header{padding:34px 24px 32px;border-radius:22px;}
    .article-content{padding:34px 24px 38px;border-radius:22px;}
    .article-illustration{margin-bottom:28px;}
    .article-illustration img{border-radius:14px;}
    .article-content h2{font-size:1.45rem;line-height:1.45;}
    .article-content p{font-size:1.06rem;line-height:1.85;}
    .article-content li{font-size:1.06rem;line-height:1.8;}
    .article-opening{font-size:1.13rem !important;}
    .article-highlight{margin:1.8em 0 2em;padding:1em 1.15em;}
    .article-highlight p{font-size:1.05rem;line-height:1.75;}
    .article-quote{padding:1.15em;}
    .article-quote p{font-size:1.12rem;line-height:1.7;}
    .article-concepts{grid-template-columns:1fr;gap:14px;}
    .article-concept{padding:20px;}
    .article-closing{padding:1.6em 1em;}
    .article-closing__question{font-size:1.5rem !important;}
    .article-navigation{flex-direction:column;}
    .article-navigation .btn{width:100%;}
}

@media (max-width:480px){
    .article-container{width:92%;}
    .article-breadcrumb{margin-bottom:22px;font-size:.88rem;}
    .article-title{font-size:2.05rem;}
    .article-lead{font-size:1.02rem;}
}

@media print{
    .header,.islamic-pattern,.article-navigation{display:none !important;}
    .article-main{padding:0;}
    .article-header,.article-content{border:0;box-shadow:none;padding-left:0;padding-right:0;}
}