/* =====================================================================
   Tampilan publik — gaya portal berita modern (terinspirasi detikNews & sejenisnya)
   Dipakai oleh app/public_header.php. Panel admin tetap memakai style.css + admin.css.
   ===================================================================== */
:root{
  --navy:#0f2a47;--navy-2:#16406b;--navy-3:#0a1d33;
  --accent:#f5a524;--accent-d:#c97f00;--accent-soft:#fff4dc;
  --live:#e5262b;
  --ink:#111827;--ink-2:#374151;--muted:#6b7280;--faint:#9ca3af;
  --line:#e5e7eb;--line-2:#eef0f3;--soft:#f3f5f8;--white:#fff;
  --link:#1456b8;
  --font:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:14px;
  --shadow:0 12px 32px -16px rgba(15,42,71,.35);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
.container{width:min(var(--wrap),calc(100% - 32px));margin-inline:auto}
::selection{background:var(--accent);color:var(--navy-3)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:8px;z-index:2000;background:var(--accent);color:var(--navy-3);padding:8px 14px;border-radius:var(--r-sm);font-weight:700}
.skip-link:focus{left:8px}

/* ---------- Bar paling atas ---------- */
.topbar{background:var(--navy-3);color:#aebdd1;font-size:12px}
.topbar-inner{height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-date{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-date:before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(229,38,43,.28)}
.topbar-links{display:flex;align-items:center;gap:18px}
.topbar-links a{transition:color .15s}
.topbar-links a:hover{color:#fff}

/* ---------- Kepala situs ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--navy);font-weight:800;font-size:28px;letter-spacing:-.8px;line-height:1}
.brand-logo{flex:none;width:46px;height:46px;border-radius:12px}
.brand>span{display:grid;gap:5px;min-width:0}
.brand-tagline{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--muted);max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.masthead-tools{display:flex;align-items:center;gap:12px}
.header-search{display:flex;align-items:center;width:320px;max-width:42vw;background:var(--soft);border:1px solid transparent;border-radius:999px;padding:0 5px 0 16px;transition:background .15s,border-color .15s,box-shadow .15s}
.header-search:focus-within{background:#fff;border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(22,64,107,.12)}
.header-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 0;font-size:14px}
.header-search input::placeholder{color:var(--muted)}
.header-search button{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--navy);color:#fff;cursor:pointer;transition:background .15s}
.header-search button:hover{background:var(--accent);color:var(--navy-3)}
.header-search svg{width:16px;height:16px}
.btn-login{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--navy);transition:background .15s,border-color .15s,color .15s}
.btn-login:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-login svg{width:16px;height:16px}

/* ---------- Navigasi utama (lengket) ---------- */
.main-nav{position:sticky;top:0;z-index:60;background:var(--navy);box-shadow:0 8px 20px -14px rgba(10,29,51,.9)}
.nav-inner{display:flex;align-items:center;min-height:48px;position:relative}
.nav-home{display:flex;align-items:center;gap:8px;align-self:stretch;padding:0 16px 0 0;margin-right:4px;color:var(--accent);font-weight:700;font-size:14px;border-bottom:3px solid transparent}
.nav-home svg{width:19px;height:19px}
.nav-home span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu-list{display:flex;align-items:stretch;align-self:stretch;flex-wrap:wrap;overflow:visible}
.menu-item{position:relative;display:flex;align-items:stretch}
.menu-item>a{display:flex;align-items:center;padding:0 14px;color:#dbe6f4;font-size:14px;font-weight:600;border-bottom:3px solid transparent;transition:color .15s,background .15s,border-color .15s;white-space:nowrap}
.menu-item:hover>a,.menu-item:focus-within>a{color:#fff;background:rgba(255,255,255,.07)}
.menu-item.is-current>a{color:#fff;border-bottom-color:var(--accent)}
.submenu-toggle{border:0;background:none;color:#9fb3cc;cursor:pointer;padding:0 8px 0 0;margin-left:-8px;font-size:11px;transition:transform .2s}
.submenu{position:absolute;top:100%;left:0;min-width:220px;padding:8px 0;background:#fff;border-radius:0 0 var(--r-md) var(--r-md);border-top:3px solid var(--accent);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.submenu a{display:block;padding:10px 18px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.submenu a:hover,.submenu a:focus-visible{background:var(--soft);color:var(--navy)}
.menu-item.has-children:hover>.submenu,.menu-item.has-children:focus-within>.submenu,.menu-item.open>.submenu{opacity:1;visibility:visible;transform:none}
.menu-item.open .submenu-toggle{transform:rotate(180deg)}
.menu-item.has-children:nth-last-child(-n+2)>.submenu{left:auto;right:0}
.nav-search{display:none;margin-left:auto;padding:10px;color:#fff}
.nav-search svg,.mobile-menu svg{width:22px;height:22px}
.mobile-menu{display:none;border:0;background:none;color:#fff;padding:10px;cursor:pointer;margin-right:-8px}
.page-container{min-height:60vh;padding-top:22px;padding-bottom:30px}

/* ---------- Bar "Terkini" ---------- */
.breaking{display:flex;align-items:stretch;margin:0 0 22px;border-bottom:1px solid var(--line);background:#fff;overflow:hidden;min-height:42px}
.breaking-tag{flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--live);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:22px}
.breaking-tag:before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s ease-in-out infinite}
.breaking-track{flex:1;min-width:0;display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.breaking-run{flex:none;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:40px;padding:0 20px;white-space:nowrap;animation:ticker 55s linear infinite}
.breaking-track:hover .breaking-run{animation-play-state:paused}
.breaking-run a{font-size:13.5px;font-weight:600;color:var(--ink-2);transition:color .15s}
.breaking-run a:hover{color:var(--link)}
.breaking-run a+a:before{content:'';display:inline-block;width:5px;height:5px;margin-right:40px;vertical-align:middle;background:var(--accent);border-radius:50%;transform:translateY(-1px)}
@keyframes ticker{to{transform:translateX(-100%)}}
@keyframes pulse{50%{opacity:.3}}

/* ---------- Komponen umum ---------- */
.category-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--navy-2)}
.category-label:before{content:'';width:8px;height:8px;border-radius:2px;background:var(--accent)}
.category-label:hover{color:var(--link)}
.meta{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.section-heading h2{position:relative;font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--navy);padding-bottom:10px}
.section-heading h2:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)}
.section-heading>span{font-size:12.5px;font-weight:600;color:var(--muted);padding-bottom:10px}
.section-heading>a{font-size:13px;font-weight:700;color:var(--link);padding-bottom:10px}
.section-heading>a:after{content:' ›';font-size:15px}
.section-heading>a:hover{text-decoration:underline}
.thumb{display:block;position:relative;overflow:hidden;background:var(--soft);border-radius:var(--r-md)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
a:hover>.thumb img,.thumb:hover img,.news-card:hover .card-image img,.feed-item:hover .thumb img,.sub-story:hover .thumb img,.lead-story:hover .lead-media img{transform:scale(1.04)}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--accent);font-size:14px;font-weight:800;font-style:normal;flex:none}
.avatar-lg{width:46px;height:46px;font-size:18px}

/* ---------- Beranda: kerangka dua kolom ---------- */
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.content-main{min-width:0}
.content-sidebar{min-width:0;display:grid;gap:28px}

/* Berita utama (headline) */
.lead-story{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-3)}
.lead-media{display:block;aspect-ratio:16/9;position:relative}
.lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.lead-overlay{position:absolute;inset:auto 0 0 0;padding:90px 28px 26px;background:linear-gradient(to top,rgba(6,16,29,.94) 0%,rgba(6,16,29,.72) 45%,rgba(6,16,29,0) 100%);color:#fff;pointer-events:none}
.lead-overlay a,.lead-overlay .category-label{pointer-events:auto}
.lead-overlay .category-label{background:var(--accent);color:var(--navy-3);padding:4px 10px;border-radius:4px;margin-bottom:12px}
.lead-overlay .category-label:before{display:none}
.lead-overlay h1{font-size:clamp(22px,2.7vw,34px);line-height:1.2;font-weight:800;letter-spacing:-.6px;text-wrap:balance}
.lead-overlay h1 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.lead-overlay p{margin-top:10px;max-width:720px;color:#d3dcea;font-size:15px;line-height:1.55}
.lead-overlay .meta{margin-top:12px;color:#b7c4d8}
.lead-overlay .meta .dot{background:#8ea2bd}

/* Slider headline */
.lead-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-3)}
.lead-slider .lead-story{border-radius:0}
.lead-slider .lead-story+.lead-story{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.lead-slider .lead-story.is-active{opacity:1;visibility:visible;z-index:1}
.lead-nav{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;gap:6px}
.lead-nav button{width:30px;height:30px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(6,16,29,.5);backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:800;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.lead-nav button:hover{background:rgba(255,255,255,.25)}
.lead-nav button.is-active{background:var(--accent);border-color:var(--accent);color:var(--navy-3);transform:scale(1.1)}
.lead-slider .lead-overlay{padding-right:210px}

/* Tiga berita di bawah headline */
.sub-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0 6px}
.sub-story{display:grid;gap:10px;align-content:start;min-width:0}
.sub-story .thumb{aspect-ratio:16/10}
.sub-story .category-label{margin-bottom:-2px}
.sub-story h3{font-size:16px;line-height:1.35;font-weight:700;letter-spacing:-.15px;text-wrap:pretty}
.sub-story h3 a:hover,.feed-item h3 a:hover,.mini-list a:hover,.popular-list a:hover,.news-card h3 a:hover,.related-item:hover strong{color:var(--link)}

/* Daftar "Berita Terkini" bergaya detik: thumbnail kiri, teks kanan */
.block{margin-top:34px}
.feed{display:block}
.feed-item{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.feed-item:first-child{padding-top:2px}
.feed-item .thumb{aspect-ratio:3/2;align-self:start}
.feed-body{display:grid;gap:6px;align-content:start;min-width:0}
.feed-item h3{font-size:19px;line-height:1.32;font-weight:700;letter-spacing:-.25px;text-wrap:pretty}
.feed-item p{font-size:14px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-more{display:flex;justify-content:center;margin-top:20px}
.btn-more{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border:2px solid var(--navy);border-radius:999px;color:var(--navy);font-weight:800;font-size:14px;transition:background .15s,color .15s}
.btn-more:hover{background:var(--navy);color:#fff}

/* Blok per kategori */
.cat-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;margin-top:38px}
.cat-block{min-width:0}
.cat-lead{display:grid;gap:10px;margin-bottom:6px}
.cat-lead .thumb{aspect-ratio:16/10}
.cat-lead h3{font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.25px}
.cat-lead h3 a:hover{color:var(--link)}
.mini-list{display:block}
.mini-list li{display:grid;gap:3px;padding:11px 0 11px 16px;border-top:1px solid var(--line-2);position:relative}
.mini-list li:before{content:'';position:absolute;left:0;top:19px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mini-list a{font-size:14.5px;line-height:1.4;font-weight:600}
.mini-list .meta{font-size:12px}

/* Sidebar */
.widget{min-width:0}
.popular-list{counter-reset:p}
.popular-list li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-2)}
.popular-list li:first-child{padding-top:2px}
.popular-list li:last-child{border-bottom:0}
.popular-number{flex:none;width:32px;font-size:28px;line-height:1;font-weight:800;letter-spacing:-1.5px;color:#d3d9e2;font-variant-numeric:tabular-nums}
.popular-list li:nth-child(-n+3) .popular-number{color:var(--accent)}
.popular-list li div{display:grid;gap:4px;min-width:0}
.popular-list a{font-size:15px;line-height:1.38;font-weight:700;letter-spacing:-.1px}
.popular-list small{font-size:12px;color:var(--muted)}
.pick-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.pick-list li:first-child{padding-top:2px}
.pick-list li:last-child{border-bottom:0}
.pick-list .thumb{aspect-ratio:4/3;border-radius:var(--r-sm)}
.pick-list a.pick-title{font-size:14px;line-height:1.38;font-weight:700;display:block}
.pick-list a.pick-title:hover{color:var(--link)}
.pick-list .meta{margin-top:3px;font-size:11.5px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip-list a{padding:7px 14px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600;color:var(--ink-2);transition:background .15s,color .15s}
.chip-list a:hover{background:var(--navy);color:#fff}

/* Iklan */
.ad-slot,.sidebar-ad,.inline-ad,.campaign-ad{border:0;background:none}
.ad-slot{margin:0 0 24px}
.sidebar-ad{min-width:0}
.campaign-ad{display:block;width:100%;max-width:100%;margin:0 auto;padding:0;text-align:center;overflow:hidden;overflow-wrap:anywhere}
.campaign-ad img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--r-md)}
.campaign-ad[data-ad-position="home_top"] img,.campaign-ad[data-ad-position="article_top"] img,.campaign-ad[data-ad-position="article_bottom"] img,.campaign-ad[data-ad-position="category_top"] img{width:100%}
.campaign-ad[data-ad-position="home_sidebar"] img,.campaign-ad[data-ad-position="article_inline"] img{width:auto}
.campaign-ad iframe{max-width:100%}
.campaign-ad-cta{display:block;margin:6px 0 0;font-size:11px;color:var(--muted)}
.campaign-ad-cta:hover{color:var(--link)}
.campaign-ad-link{display:block;border-radius:var(--r-md)}
.ad-preview{padding:14px;border:1px dashed var(--line)!important;border-radius:var(--r-md);font-size:12.5px;color:var(--muted);background:var(--soft)}
.inline-ad{margin:28px 0;padding:0;text-align:center}
.inline-ad>small{display:block;margin-bottom:6px;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.sidebar-ad b,.sidebar-ad>span{display:block;padding:26px 14px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--faint);font-size:12px}

/* ---------- Kartu (kategori, pencarian) ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.news-card{min-width:0;display:flex;flex-direction:column}
.card-image{display:block;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--soft)}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card-body{display:grid;gap:7px;padding-top:12px}
.card-body h3{font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.2px;text-wrap:pretty}
.card-body p{font-size:13.5px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty-note{grid-column:1/-1;display:grid;gap:4px;padding:26px;border:1px dashed var(--line);border-radius:var(--r-md);text-align:center;color:var(--muted)}
.empty-note b{color:var(--ink)}

/* ---------- Halaman kategori / pencarian ---------- */
.listing-header{padding:6px 0 22px;margin-bottom:26px;border-bottom:1px solid var(--line);position:relative}
.listing-header:after{content:'';position:absolute;left:0;bottom:-1px;width:84px;height:3px;background:var(--accent)}
.eyebrow{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:4px;background:var(--accent-soft);color:#8a5a00;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.listing-header h1,.info-hero h1{font-size:clamp(28px,3.6vw,40px);line-height:1.12;font-weight:800;letter-spacing:-1px;color:var(--navy)}
.listing-header p,.info-hero p{margin-top:8px;max-width:680px;color:var(--ink-2);font-size:16px;line-height:1.6}
.listing-grid{padding-bottom:20px}
.search-large{display:flex;gap:10px;max-width:640px;margin-top:18px}
.search-large input{flex:1;min-width:0;padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;outline:0;font-size:15px}
.search-large input:focus{border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(22,64,107,.12)}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;justify-content:center}
.pagination a{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;font-weight:700;color:var(--navy);transition:background .15s,color .15s,border-color .15s}
.pagination a:hover{border-color:var(--navy);background:var(--soft)}
.pagination a.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Tombol & keadaan kosong ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--accent);color:var(--navy-3)}
.alert{padding:12px 16px;border-radius:var(--r-md);margin:14px 0;font-size:14px;font-weight:500}
.alert-success{background:#e8f7ee;color:#096a3b}
.alert-danger{background:#fdecec;color:#a4181e}
.empty-state{margin:10px auto 40px;max-width:860px;text-align:center;padding:52px 26px 44px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--accent-soft),#fff 55%)}
.empty-state h2{font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--navy);margin-bottom:10px}
.empty-state>p{max-width:520px;margin:0 auto 22px;color:var(--muted);font-size:16px}
.empty-steps{margin:32px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.empty-steps li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.empty-steps b{display:block;margin-bottom:4px;font-weight:800}
.empty-steps span{font-size:13.5px;color:var(--muted)}

/* ---------- Halaman artikel ---------- */
.reading-progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--accent);z-index:100;transition:width .08s linear}
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0 44px;align-items:start;max-width:1120px;margin:0 auto}
.article-wrap.no-aside{grid-template-columns:minmax(0,780px);justify-content:center}
.article-wrap>.breadcrumbs{grid-column:1/-1}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;font-size:13px;color:var(--muted)}
.breadcrumbs a{font-weight:600;color:var(--ink-2)}
.breadcrumbs a:hover{color:var(--link)}
.breadcrumbs span{color:var(--faint)}
.breadcrumbs em{font-style:normal}
.article-content{min-width:0;padding-bottom:20px}
.article-head h1{margin:12px 0 12px;font-size:clamp(26px,3.3vw,38px);line-height:1.18;font-weight:800;letter-spacing:-.9px;color:var(--ink);text-wrap:balance}
.article-cat{display:inline-block;padding:4px 10px;border-radius:4px;background:var(--accent);color:var(--navy-3);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.article-cat:hover{background:var(--navy);color:#fff}
.article-deck{font-size:18px;line-height:1.55;color:var(--ink-2);font-weight:500;margin-bottom:6px}
.article-byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:16px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline-author{display:flex;align-items:center;gap:12px;min-width:0}
.byline-author>span{display:grid;gap:1px;min-width:0}
.byline-author strong{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:800;color:var(--navy)}
.byline-author .verified{display:inline-flex;font-style:normal}
.byline-author .verified svg circle{fill:var(--accent)}
.byline-author .verified svg path{stroke:var(--navy-3)}
.byline-author small{font-size:12.5px;color:var(--muted)}
.byline-meta{display:flex;flex-wrap:wrap;gap:6px 22px}
.byline-meta li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.byline-meta .ico{display:inline-flex;color:var(--navy-2)}
.byline-meta .ico svg{width:17px;height:17px}
.byline-meta li>span:last-child{display:grid;gap:0;line-height:1.3}
.byline-meta b{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.byline-meta time,.byline-meta strong{font-size:13px;font-weight:700;color:var(--ink)}
.article-figure{margin:20px 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--soft);aspect-ratio:16/9;position:relative}
.article-figure .media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.8);transform:scale(1.15)}
.article-figure .media-fg{position:relative;width:100%;height:100%;object-fit:contain}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 24px;font-size:13px}
.share-row strong{margin-right:4px;font-weight:700;color:var(--ink-2)}
.share-row a,.share-row button,.article-tags a{display:inline-flex;align-items:center;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.article-tags a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.article-body{font-size:17.5px;line-height:1.8;color:#1b2432;overflow-wrap:anywhere}
.article-body p{margin:0 0 1.2em}
.article-body a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-color:rgba(20,86,184,.35);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--link)}
.article-body .dateline{font-size:.78em;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--navy-2)}
.article-body .dateline:after{content:' —';font-weight:400;opacity:.6}
.article-body h2{margin:1.9em 0 .55em;font-size:25px;line-height:1.25;font-weight:800;letter-spacing:-.5px;color:var(--navy)}
.article-body h3{margin:1.6em 0 .5em;font-size:20px;line-height:1.3;font-weight:800;color:var(--navy)}
.article-body h4{margin:1.5em 0 .5em;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy-2)}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.4em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.4em 0;padding-left:.2em}
.article-body li::marker{color:var(--accent-d);font-weight:800}
.article-body img{margin:1.4em auto;border-radius:var(--r-md);height:auto}
.article-body figure{margin:1.8em 0}
.article-body figcaption{margin-top:8px;padding-left:12px;border-left:3px solid var(--accent);font-size:13px;line-height:1.5;color:var(--muted)}
.article-body blockquote{margin:1.8em 0;padding:16px 22px;border-left:4px solid var(--accent);background:var(--soft);border-radius:0 var(--r-md) var(--r-md) 0;font-size:1.06em;font-weight:500;color:var(--navy-3)}
.article-body blockquote p:last-child{margin:0}
.article-body hr{border:0;height:1px;margin:2.2em 0;background:var(--line)}
.article-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px}
.article-body th,.article-body td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.article-body th{background:var(--soft);font-weight:800}
.read-also{margin:1.8em 0;padding:14px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r-md) var(--r-md) 0;display:grid;gap:3px}
.read-also b{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#8a5a00}
.read-also a{font-size:16px;line-height:1.4;font-weight:800;color:var(--navy);text-decoration:none!important}
.read-also a:hover{color:var(--link)}
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.article-related{align-self:start;position:sticky;top:64px;padding:0}
.article-related h3{position:relative;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:18px;font-weight:800;color:var(--navy)}
.article-related h3:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;max-width:120px;height:3px;background:var(--accent)}
.related-item{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line-2)}
.related-item:last-child{border-bottom:0}
.related-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.related-item>span{display:grid;gap:3px;font-size:14px;line-height:1.38;font-weight:700}
.related-item small{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--navy-2)}
.related-item strong{font-weight:700}

/* ---------- Komentar ---------- */
.comments-section{margin-top:36px}
.comment-list{display:grid;gap:0;margin:6px 0 24px}
.comment-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.comment-avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--accent);font-weight:800}
.comment-item strong{display:block;font-size:14px;font-weight:800}
.comment-item small{display:block;margin:1px 0 6px;font-size:12px;color:var(--muted)}
.comment-item p{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere}
.comments-empty{padding:6px 0 18px;color:var(--muted);font-size:14px}
.comment-form{padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--soft)}
.comment-form h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:2px}
.comment-form>p{font-size:13px;color:var(--muted);margin-bottom:12px}
.comment-form label{display:block;margin:12px 0;font-size:13px;font-weight:700}
.comment-form input,.comment-form textarea{display:block;width:100%;margin-top:6px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:14.5px;outline:0}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(22,64,107,.12)}
.comment-form textarea{resize:vertical}
.comment-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.comment-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------- Halaman Tentang ---------- */
.info-hero{padding:6px 0 22px;margin-bottom:24px;border-bottom:1px solid var(--line);position:relative}
.info-hero:after{content:'';position:absolute;left:0;bottom:-1px;width:84px;height:3px;background:var(--accent)}
.info-body{display:grid;gap:18px;min-width:0}
.info-single{max-width:860px;margin-bottom:40px}
.info-card{padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;scroll-margin-top:76px}
.info-card h2{position:relative;margin-bottom:14px;padding-left:14px;font-size:21px;font-weight:800;letter-spacing:-.3px;color:var(--navy)}
.info-card h2:before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--accent)}
.info-card h3{margin:20px 0 6px;font-size:16.5px;font-weight:800}
.info-card p{margin-bottom:12px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.info-card a,.id-table dd a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,86,184,.35)}
.info-lead{padding:12px 16px;border-radius:var(--r-md);background:var(--accent-soft)}
.info-list{margin:0;padding-left:1.3em;list-style:disc;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.info-list li{margin:.4em 0}
.info-list li::marker{color:var(--accent-d)}
.info-source{margin-top:16px!important;padding-top:12px;border-top:1px solid var(--line);font-size:13px!important;color:var(--muted)!important}
.info-notice{padding:14px 18px;border:1px solid #f0d9a6;border-radius:var(--r-md);background:#fff8e8;font-size:14px;line-height:1.6;color:#6b4e0a}
.info-notice a{font-weight:800;color:#6b4e0a}
.id-table{display:grid;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.id-table>div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;padding:12px 18px;border-bottom:1px solid var(--line)}
.id-table>div:last-child{border-bottom:0}
.id-table>div:nth-child(odd){background:var(--soft)}
.id-table dt{padding-top:2px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.id-table dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.staff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.staff-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.staff-card>span{display:grid;gap:2px;min-width:0;line-height:1.3}
.staff-card small{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#8a5a00}
.staff-card strong{font-size:16px;font-weight:800}
.staff-card em{font-style:normal;font-size:12.5px;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-3);color:#cfd9e8;border-top:4px solid var(--accent)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-top:46px;padding-bottom:36px}
.brand-footer{color:#fff;font-size:26px}
.brand-footer .brand-logo{width:42px;height:42px}
.footer-grid p{margin-top:14px;max-width:340px;font-size:13.5px;line-height:1.65;color:#95a7bf}
.footer-grid h3{margin-bottom:14px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}
.footer-grid>div>a:not(.brand){display:block;padding:5px 0;font-size:14px;color:#cfd9e8;transition:color .15s,transform .15s}
.footer-grid>div>a:not(.brand):hover{color:#fff;transform:translateX(3px)}
.footer-grid .footer-mail{color:#fff;font-weight:700}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);background:#07162a}
.footer-bottom .container{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px;color:#7f93ad}
.to-top{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#cfd9e8}
.to-top:hover{color:var(--accent)}

/* ---------- Popup login ---------- */
html.lm-open{overflow:hidden}
.lm-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.lm-modal[hidden]{display:none}
.lm-backdrop{position:absolute;inset:0;background:rgba(6,16,29,.66);backdrop-filter:blur(3px)}
.lm-dialog{position:relative;width:min(400px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 26px 26px;background:#fff;border-top:4px solid var(--accent);border-radius:var(--r-lg);box-shadow:0 30px 70px -20px rgba(6,16,29,.6);animation:loginPop .22s ease-out}
@keyframes loginPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.lm-dialog h2{margin-bottom:16px;font-size:22px;font-weight:800;color:var(--navy)}
.lm-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.lm-close:hover{background:var(--soft);color:var(--navy)}
.lm-msg{margin-bottom:14px;padding:9px 12px;border:1px solid #f3c6c1;border-radius:var(--r-sm);background:#fdecea;color:#8a1f17;font-size:13px}
.lm-body label{display:grid;gap:6px;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--ink-2)}
.lm-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]){width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft);font-weight:400;color:var(--ink)}
.lm-body input:focus{outline:2px solid var(--accent);outline-offset:1px;background:#fff}
.lm-body button,.lm-body input[type=submit]{width:100%;padding:12px 16px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
.lm-body button:hover,.lm-body input[type=submit]:hover{background:var(--accent);color:var(--navy-3)}
.lm-body button:disabled{opacity:.6;cursor:wait}
.lm-body form{display:block;width:auto;margin:0;padding:0;background:none;border:0;box-shadow:none;position:static}
.lm-body input[type=checkbox]{width:auto}

/* ---------- Gerak halus ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.content-layout,.listing-grid,.listing-header,.info-body{animation:rise .5s cubic-bezier(.2,.6,.2,1) backwards}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.breaking-run+.breaking-run{display:none}}

/* ---------- Responsif ---------- */
@media(max-width:1100px){
  .content-layout{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-wrap{grid-template-columns:minmax(0,1fr) 290px;gap:0 30px}
}
@media(max-width:980px){
  .content-layout{grid-template-columns:minmax(0,1fr)}
  .content-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .content-sidebar>.widget:first-child{grid-column:1/-1}
  .article-wrap,.article-wrap.no-aside{grid-template-columns:minmax(0,1fr)}
  .article-related{position:static;margin-top:30px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}
  /* menu ponsel */
  .nav-inner{flex-wrap:wrap}
  .nav-home{margin-right:0}
  .nav-home span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .mobile-menu{display:block;margin-left:0}
  .nav-search{display:block}
  .menu-list{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;align-self:auto;border-top:1px solid rgba(255,255,255,.12);padding:4px 0 10px}
  .nav-inner.nav-expanded .menu-list{display:flex}
  .menu-item{flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu-item>a{flex:1;padding:13px 4px;border-bottom:0}
  .menu-item.is-current>a{color:var(--accent)}
  .submenu-toggle{padding:13px 12px;margin:0;font-size:14px}
  .submenu{position:static;display:none;flex-basis:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:3px solid var(--accent);border-radius:0;margin:0 0 10px 4px;background:transparent}
  .submenu a{color:#c4d1e3}
  .submenu a:hover{background:rgba(255,255,255,.06);color:#fff}
  .menu-item.open>.submenu{display:block}
  .menu-item.has-children:hover>.submenu{display:none}
  .menu-item.has-children.open:hover>.submenu{display:block}
  .menu-item:hover>a,.menu-item:focus-within>a{background:none}
  /* nav-inner: logo/home kiri, ikon kanan */
  .nav-home{flex:1}
  .nav-search{order:1}.mobile-menu{order:2}
  .nav-home{order:0}
}
@media(max-width:760px){
  .topbar-links a:not(.js-login-open){display:none}
  .masthead{padding:12px 0}
  .brand{font-size:24px}.brand-logo{width:40px;height:40px}.brand-tagline{display:none}
  .header-search,.btn-login{display:none}
  .page-container{padding-top:16px}
  .lead-story{border-radius:var(--r-md);margin-inline:-16px;border-radius:0}
  .lead-overlay{padding:60px 16px 16px}
  .lead-overlay p{display:none}
  .lead-overlay h1{font-size:21px}
  .sub-stories{grid-template-columns:1fr;gap:0;margin-top:6px}
  .sub-story{grid-template-columns:118px minmax(0,1fr);gap:0 12px;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .sub-story .thumb{grid-row:1/4;aspect-ratio:4/3}
  .sub-story h3{font-size:15px}
  .feed-item{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:14px 0}
  .feed-item .thumb{aspect-ratio:4/3}
  .feed-item h3{font-size:15.5px;line-height:1.36}
  .feed-item p{display:none}
  .cat-blocks{grid-template-columns:1fr;gap:30px}
  .content-sidebar{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr;gap:22px}
  .news-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start}
  .news-card .card-image{aspect-ratio:4/3}
  .news-card .card-body{padding-top:0}
  .news-card .card-body h3{font-size:15.5px}
  .news-card .card-body p{display:none}
  .section-heading h2{font-size:18px}
  .article-head h1{font-size:25px}
  .article-deck{font-size:16.5px}
  .article-figure{margin-inline:-16px;border-radius:0}
  .article-body{font-size:16.5px;line-height:1.75}
  .article-body h2{font-size:22px}
  .byline-meta{gap:6px 16px}
  .comment-form-grid{grid-template-columns:1fr}
  .empty-steps{grid-template-columns:1fr}
  .id-table>div{grid-template-columns:1fr;gap:2px}
  .staff-grid{grid-template-columns:1fr}
  .info-card{padding:20px 16px}
  .search-large{flex-direction:column}
  .search-large .btn{align-self:flex-start}
  .footer-grid{grid-template-columns:1fr;padding-top:34px}
  .footer-bottom .container{flex-direction:column;justify-content:center;padding-block:12px;text-align:center;gap:6px}
}
@media print{.topbar,.main-nav,.breaking,.share-row,.article-related,.comments-section,.inline-ad,.site-footer,.reading-progress{display:none!important}.article-body{font-size:12pt;color:#000}}

/* ---------- Penyempurnaan: menu ringkas, tombol ke atas, ikon bagikan ---------- */
.nav-brand{display:none;align-items:center;margin-right:10px}
.nav-brand .brand-logo{width:30px;height:30px;border-radius:8px}
@media(min-width:981px){
  .main-nav.is-stuck .nav-brand{display:flex}
  .main-nav.is-stuck .nav-home{padding-right:10px}
}
.fab-top{position:fixed;right:18px;bottom:18px;z-index:80;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--accent);box-shadow:0 10px 24px -8px rgba(6,16,29,.6);transition:background .15s,color .15s,transform .15s}
.fab-top[hidden]{display:none}
.fab-top:hover{background:var(--accent);color:var(--navy-3);transform:translateY(-2px)}
.fab-top svg{width:20px;height:20px}
.share-row a svg,.share-row button svg{width:15px;height:15px;margin-right:7px}
.news-card:hover .card-body h3 a,.feed-item:hover h3 a,.sub-story:hover h3 a{color:var(--link)}
@media(max-width:760px){
  .lead-slider{margin-inline:-16px;border-radius:0}
  .lead-slider .lead-story{margin-inline:0}
  .lead-slider .lead-overlay{padding:60px 16px 48px}
  .lead-nav{right:auto;left:16px;bottom:14px}
  .lead-nav button{width:24px;height:24px;font-size:10.5px}
}

/* ---------- Sedang Tren ---------- */
.trending{background:var(--soft);border-bottom:1px solid var(--line)}
.trending-inner{display:flex;align-items:center;gap:14px;min-height:44px}
.trending-tag{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--live)}
.trending-tag svg{width:16px;height:16px}
.trending-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 0;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.trending-list::-webkit-scrollbar{display:none}
.trending-list li{flex:none}
.trending-list a{display:block;max-width:280px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s}
.trending-list a:hover{background:var(--navy-bg);border-color:var(--navy-bg);color:#fff}
@media(max-width:760px){.trending-tag{font-size:0;gap:0}.trending-tag svg{width:18px;height:18px}.trending-inner{gap:10px}}

/* ---------- Tombol mode ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font-size:12px;cursor:pointer;transition:color .15s}
.theme-toggle:hover{color:#fff}
.theme-toggle svg{width:15px;height:15px}
.theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}

/* ---------- Mode gelap ---------- */
:root{--navy-bg:#0f2a47}
html[data-theme="dark"]{
  color-scheme:dark;
  --white:#0c1626;--ink:#e8eef7;--ink-2:#c3cedd;--muted:#93a3b8;--faint:#6f8099;
  --line:#243249;--line-2:#1a273b;--soft:#14213a;--link:#7db4ff;
  --navy:#e3ecf8;--navy-2:#9cc2ee;--navy-bg:#1b3d68;
  --accent-soft:#33270b;
  --shadow:0 12px 32px -16px rgba(0,0,0,.7);
}
html[data-theme="dark"] body{background:var(--white);color:var(--ink)}
html[data-theme="dark"] img:not(.brand-logo){filter:brightness(.92)}
html[data-theme="dark"] .site-header{border-bottom-color:var(--line)}
html[data-theme="dark"] .brand{color:#fff}
html[data-theme="dark"] .main-nav{background:#0a1d33}
html[data-theme="dark"] .header-search button,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .comment-avatar,
html[data-theme="dark"] .fab-top,
html[data-theme="dark"] .pagination a.active,
html[data-theme="dark"] .lm-body button,
html[data-theme="dark"] .lm-body input[type=submit]{background:var(--navy-bg);color:#fff}
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .comment-avatar,
html[data-theme="dark"] .fab-top{color:var(--accent)}
html[data-theme="dark"] .pagination a.active{border-color:var(--navy-bg)}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .header-search button:hover,
html[data-theme="dark"] .lm-body button:hover,
html[data-theme="dark"] .fab-top:hover{background:var(--accent);color:var(--navy-3)}
html[data-theme="dark"] .btn-login:hover,
html[data-theme="dark"] .btn-more:hover,
html[data-theme="dark"] .chip-list a:hover,
html[data-theme="dark"] .share-row a:hover,
html[data-theme="dark"] .share-row button:hover,
html[data-theme="dark"] .article-tags a:hover{background:var(--navy-bg);border-color:var(--navy-bg);color:#fff}
html[data-theme="dark"] .btn-more{border-color:var(--navy-2);color:var(--navy-2)}
html[data-theme="dark"] .btn-login{color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .article-cat:hover{background:var(--navy-bg);color:#fff}
html[data-theme="dark"] .header-search:focus-within,
html[data-theme="dark"] .breaking,
html[data-theme="dark"] .submenu,
html[data-theme="dark"] .share-row a,
html[data-theme="dark"] .share-row button,
html[data-theme="dark"] .article-tags a,
html[data-theme="dark"] .search-large input,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .empty-steps li,
html[data-theme="dark"] .comment-form input,
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .lm-dialog,
html[data-theme="dark"] .lm-body input:focus{background:var(--white)}
html[data-theme="dark"] .share-row a,
html[data-theme="dark"] .share-row button,
html[data-theme="dark"] .article-tags a{color:var(--ink)}
html[data-theme="dark"] .submenu a{color:var(--ink)}
html[data-theme="dark"] .submenu a:hover{background:var(--soft);color:#fff}
html[data-theme="dark"] .submenu{border-top-color:var(--accent)}
html[data-theme="dark"] .empty-state{background:linear-gradient(180deg,#201a0b,var(--white) 55%)}
html[data-theme="dark"] .popular-number{color:#33445f}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .read-also b,
html[data-theme="dark"] .staff-card small{color:var(--accent)}
html[data-theme="dark"] .read-also a{color:var(--ink)}
html[data-theme="dark"] .article-body{color:#d6dfeb}
html[data-theme="dark"] .article-body blockquote{color:var(--ink)}
html[data-theme="dark"] .info-notice{background:#2c2209;border-color:#5a4513;color:#f0d9a6}
html[data-theme="dark"] .info-notice a{color:#f6c453}
html[data-theme="dark"] .alert-success{background:#0f2e20;color:#7be3ae}
html[data-theme="dark"] .alert-danger{background:#35161a;color:#ff9aa0}
html[data-theme="dark"] .lm-msg{background:#35161a;border-color:#5b2329;color:#ff9aa0}
html[data-theme="dark"] .lm-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]){background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .trending-list a{background:var(--white)}
html[data-theme="dark"] ::selection{background:var(--accent);color:var(--navy-3)}

/* ---------- Login di ponsel ---------- */
.nav-login{display:none;padding:10px;color:#fff}
.nav-login svg{width:22px;height:22px}
.nav-login:hover{color:var(--accent)}
@media(max-width:980px){
  .nav-login{display:block;order:1;margin-left:auto}
  .nav-search{margin-left:0}
}
.lm-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]){font-size:16px}
@media(max-width:560px){
  .lm-modal{align-items:flex-end;padding:0}
  .lm-dialog{width:100%;max-height:92vh;padding:26px 20px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation:sheetUp .25s ease-out}
  .lm-dialog:before{content:'';position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:var(--line)}
  .lm-dialog h2{margin-top:6px;font-size:20px}
  .lm-close{width:40px;height:40px;top:8px;right:8px}
  .lm-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]){padding:14px 14px}
  .lm-body button,.lm-body input[type=submit]{padding:15px 16px;font-size:15px}
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}