/*
 Theme Name: Kompasia Pro LTS
 Theme URI: https://example.com/kompasia-pro-lts
 Author: ChatGPT
 Description: Varian stabil jangka panjang tema berita (Kompasia Pro) dengan front-end submission. Aman, ringan, dan minim risiko fatal error.
 Version: 1.0.0
 License: GPL-2.0-or-later
 Text Domain: kompasia-pro-lts
 Tags: news, blog, responsive, accessibility-ready
*/
:root{--bg:#fff;--fg:#0f172a;--muted:#64748b;--line:#e2e8f0;--primary:#1d4ed8;--maxw:1180px;--r:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;line-height:1.7}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-weight:800;font-size:20px;display:flex;gap:10px;align-items:center}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.menu a{display:inline-block;padding:8px 12px;border-radius:10px}
.menu a:hover{background:#f1f5f9}
.btn{padding:10px 14px;border-radius:999px;background:var(--primary);color:#fff;display:inline-block}
.hero{background:#f8fafc;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:22px}
@media(min-width:960px){.grid{grid-template-columns:2fr 1fr}}
.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.card .inner{padding:16px}
.list{display:grid;gap:18px}
@media(min-width:820px){.list{grid-template-columns:1fr 1fr}}
.sidebar .widget{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.breadcrumbs{font-size:14px;color:var(--muted);margin:10px 0 16px}
.footer{border-top:1px solid var(--line);color:var(--muted)}
.footer .inner{padding:20px 0}
.notice{padding:12px;border-radius:10px;background:#ecfeff;border:1px solid #a5f3fc}


/* ==== UI Upgrade: Interaktif & Readable ==== */
:root{
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 28px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}
body{font-size:var(--fs-base)}
h1,h2,h3{line-height:1.25}
h1{font-size:var(--fs-xl);margin:10px 0 8px}
p{font-size:var(--fs-lg)}

.header{transition:box-shadow .25s ease, background .25s ease}
.header.is-scrolled{box-shadow:var(--shadow);background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px)}
.menu a{transition:background .2s ease, transform .2s ease, color .2s ease; position:relative}
.menu a:hover{transform:translateY(-1px)}
.menu a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.menu a:hover::after{transform:scaleX(1)}

.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}

.post-title a{line-height:1.3}
.meta{color:#64748b; font-size:14px}

.btn{transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(.97)}

.breadcrumbs a{opacity:.9} .breadcrumbs a:hover{opacity:1}
.pagination a,.pagination span{transition:background .2s ease}
.pagination a:hover{background:#eef2ff}

:focus-visible{outline:3px solid #93c5fd; outline-offset:2px; border-radius:8px}


/* ====== Highlight & TOC & Ticker Styles ====== */
.kpl-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.kpl-sec-head h2{margin:0}
.kpl-pill{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:#64748b;font-size:12px;background:#f8fafc}
.kpl-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.kpl-grid{grid-template-columns:2fr 1fr 1fr}}
.kpl-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s ease, box-shadow .2s ease}
.kpl-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,6,23,.08)}
.kpl-thumb{display:block;background:#e2e8f0;aspect-ratio:16/9}
.kpl-inner{padding:12px}
.kpl-title{margin:6px 0 0; font-size:18px; line-height:1.35}
.kpl-meta{color:#64748b; font-size:13px}

.kpl-toc-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:920px){.kpl-toc-grid{grid-template-columns:1fr 1fr}}
.kpl-toc-item{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.kpl-toc-item h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.kpl-count{font-size:12px;color:#64748b;border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:#f8fafc}
.kpl-toc-list{margin:0;padding-left:18px}
.kpl-toc-list li{margin:4px 0}

.kpl-ticker-wrap{border-bottom:1px solid var(--line);background:#0f172a;color:#e5e7eb}
.kpl-ticker{display:flex;gap:32px;white-space:nowrap;overflow:hidden;padding:8px 0}
.kpl-tick-item{display:inline-block;color:#e5e7eb;opacity:.9}
.kpl-tick-item:hover{opacity:1;text-decoration:underline}


/* ====== Magazine / Book Reading Mode (auto on single posts) ====== */
.reading-progress{position:sticky;top:64px;height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0}
.reading-progress .bar{height:100%;width:0;background:linear-gradient(90deg,#1d4ed8,#60a5fa);transition:width .1s linear}

.reading-wrap{display:grid;gap:20px}
@media(min-width:1024px){.reading-wrap{grid-template-columns:280px 1fr}}

.toc-card{position:sticky;top:80px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;max-height:70vh;overflow:auto}
.toc-card::before{content:'Daftar Isi';display:block;font-weight:700;margin:0 0 8px}
.toc-card a{display:block;padding:6px 0;color:#0f172a;opacity:.9}
.toc-card a:hover{text-decoration:underline;opacity:1}
.toc-card .toc-l2{padding-left:12px;font-size:14px;opacity:.9}

.entry.magazine{column-width:38rem;column-gap:3rem}
.entry.magazine h2,.entry.magazine h3{break-after:avoid;break-inside:avoid}
.entry.magazine p{text-align:justify;hyphens:auto}
.entry.magazine :where(p:first-of-type)::first-letter{float:left;font-size:3.2rem;line-height:.9;padding:.2rem .4rem .2rem 0;margin-top:.2rem;font-weight:800;color:#0f172a}
.entry.magazine img, .entry.magazine figure{break-inside:avoid;page-break-inside:avoid;display:block;margin:12px auto}
.entry.magazine blockquote{border-left:4px solid #1d4ed8;padding:8px 14px;background:#f8fafc;border-radius:8px}

.reading-nav{margin:20px 0}
.reading-nav-inner{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.reading-nav a{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:10px}


/* ======= NEWS BAR (static) ======= */
.kpl-newsbar-wrap{border-bottom:1px solid var(--line);background:#0b1220;color:#e5e7eb}
.kpl-newsbar-wrap .container{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:6px 0}
.kpl-newsbar-head{font-weight:800;background:#ef4444;color:#fff;padding:6px 10px;border-radius:8px}
.kpl-newsbar{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding:6px 0}
.kpl-newsbar::-webkit-scrollbar{height:6px} .kpl-newsbar::-webkit-scrollbar-thumb{background:#334155;border-radius:999px}
.kpl-news-item{white-space:nowrap;opacity:.95}
.kpl-news-item::before{content:"•";margin:0 8px 0 0;opacity:.6}
.kpl-news-item:first-child::before{content:""}
.kpl-newsbar-ctrl button{height:32px;width:32px;border:1px solid #334155;border-radius:8px;background:transparent;color:#e5e7eb}

/* ======= COMIC STYLE for homepage cards ======= */
.comic-card{position:relative;border:3px solid #000;border-radius:18px;background:#fff;box-shadow:6px 6px 0 #000;overflow:hidden}
.comic-card .kpl-burst{position:absolute;top:10px;left:-8px;background:#fde047;color:#111827;padding:4px 10px;border:2px solid #111827;border-radius:999px;font-weight:800;transform:rotate(-6deg);font-size:12px}
.comic-inner{padding:16px}
.comic-inner .post-title a{font-weight:900;letter-spacing:.2px;text-transform:none}
.comic-inner p{font-size:17px}
.comic-card .meta{font-size:13px;color:#475569}
.comic-card .thumb, .comic-card a img{border-bottom:3px solid #000;display:block}
.comic-card::after{ /* speech tail style */ content:""; position:absolute; right:26px; bottom:-14px; width:18px; height:18px; background:#fff; border:3px solid #000; transform:rotate(45deg); box-shadow:6px 6px 0 #000}
@media (max-width:640px){ .comic-card::after{display:none} }


/* ===== Category Burst Variants & Author label ===== */
.kpl-burst{position:absolute;top:10px;left:-8px;padding:4px 10px;border:2px solid #111827;border-radius:999px;font-weight:800;transform:rotate(-6deg);font-size:12px;background:#fde047;color:#111827}
.kpl-author{font-weight:700}

.kpl-burst-opini{background:#fde047;color:#111827;border-color:#111827}
.kpl-burst-tekno,.kpl-burst-teknologi{background:#60a5fa;color:#0b1220;border-color:#0b1220}
.kpl-burst-bisnis{background:#fda4af;color:#111827;border-color:#111827}
.kpl-burst-kota{background:#86efac;color:#064e3b;border-color:#064e3b}
.kpl-burst-olahraga{background:#fbbf24;color:#111827;border-color:#111827}
.kpl-burst-hiburan{background:#c084fc;color:#1e1b4b;border-color:#1e1b4b}
.kpl-burst-politik{background:#f59e0b;color:#111827;border-color:#111827}
.kpl-burst-umum{background:#e5e7eb;color:#111827;border-color:#111827}