/* Halaman baca artikel — tampilan premium, fokus ke bacaan.
   Hanya dimuat oleh frontend/pages/blog/article.php. Memakai variabel tema yang sudah ada. */

.lx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;background:transparent;pointer-events:none}
.lx-progress i{display:block;height:100%;width:0;background:var(--p);transition:width .08s linear}

.li-article.lx{max-width:780px;margin:0 auto;padding:20px 20px 72px}
.lx-crumb{margin:4px 0 18px}
.lx-crumb a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none}
.lx-crumb a:hover{color:var(--p)}

.lx .li-article-head{margin-bottom:8px}
.lx-cat{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--p-tint);color:var(--p);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lx .li-article-head h1{font-size:clamp(30px,5.4vw,46px);line-height:1.15;letter-spacing:-.02em;margin:14px 0 12px;font-weight:800;text-wrap:balance}
.lx .li-dek{font-size:clamp(17px,2.4vw,20px);line-height:1.6;color:var(--mut);margin:0 0 18px}

.lx .li-byline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:16px 0 6px;gap:12px}
.lx .li-byline .avatar{width:46px;height:46px}
.lx .li-byline-tx b{font-size:15px}
.lx .li-byline-tx .li-meta{font-size:12.5px;color:var(--mut);margin-top:3px}
.lx-edit{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

.lx .li-engage{flex-wrap:wrap;gap:8px;padding:12px 0}

.lx-cover{margin:14px -20px 28px;padding:0}
.lx-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--bg2)}

/* Isi artikel */
.lx .li-article-body{max-width:68ch;margin:0 auto;font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,2.2vw,20px);line-height:1.9;color:var(--tx);overflow-wrap:anywhere;hyphens:auto}
.lx .li-article-body>*:first-child{margin-top:0}
.lx .li-article-body p{margin:0 0 1.35em}
.lx .li-article-body>p:first-of-type::first-letter{float:left;font-size:3.4em;line-height:.9;font-weight:700;padding:.06em .1em 0 0;color:var(--p)}
.lx .li-article-body h2,.lx .li-article-body h3,.lx .li-article-body h4{font-family:'Inter',system-ui,sans-serif;line-height:1.3;letter-spacing:-.01em;margin:2em 0 .6em}
.lx .li-article-body h2{font-size:1.55em}
.lx .li-article-body h3{font-size:1.28em}
.lx .li-article-body a{color:var(--p);text-decoration:underline;text-underline-offset:3px}
.lx .li-article-body ul,.lx .li-article-body ol{margin:0 0 1.35em;padding-left:1.4em}
.lx .li-article-body li{margin:.4em 0}
.lx .li-article-body img{max-width:100%;height:auto;border-radius:12px;margin:1.4em auto;display:block}
.lx .li-article-body figure{margin:1.6em 0}
.lx .li-article-body figcaption{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--mut);text-align:center;margin-top:8px}
.lx .li-article-body blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--p);color:var(--mut);font-style:italic;font-size:1.05em}
.lx .li-article-body hr{border:0;border-top:1px solid var(--line);margin:2.2em auto;width:40%}
.lx .li-article-body pre,.lx .li-article-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
.lx .li-article-body pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto}
.lx .li-article-body code{background:var(--bg2);padding:.1em .35em;border-radius:5px}
.lx .li-article-body pre code{background:none;padding:0}

/* Kotak penulis */
.lx-author{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:44px 0 18px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.lx-author .avatar{width:56px;height:56px}
.lx-author-tx{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.lx-author-tx small{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.lx-author-tx b{font-size:16px}
.lx-author-tx span{font-size:13px;color:var(--mut)}

/* Blok pendukung di bawah artikel */
.lx .li-discuss{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.lx .li-more{margin-top:40px}
.lx .li-more h3,.lx .li-comments h3{font-size:20px;letter-spacing:-.01em}
.lx .li-comments{margin-top:36px;border-radius:var(--r-lg)}
.lx .li-comment-bubble{background:var(--bg2);border-radius:14px;padding:10px 14px}

@media(max-width:640px){
  .li-article.lx{padding:12px 16px 56px}
  .lx-cover{margin:12px -16px 22px}
  .lx-cover img{border-radius:0}
  .lx .li-article-body{line-height:1.8}
  .lx .li-byline{flex-wrap:wrap}
  .lx .li-byline-tx{min-width:0;flex:1 1 60%}
  .lx-author{padding:14px}
}
@media print{.lx-progress,.lx .li-engage,.lx .li-discuss,.lx-edit{display:none!important}}