/* ═══════════ LANGKAH KUDA — sistem desain ═══════════
   Palet utama : B · Kertas Arsip (terang)
   Mode gelap  : C · Langkah Malam
   Tipografi   : Bricolage Grotesque / Newsreader / Space Mono */

:root{
  --maxw: 1080px;
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Newsreader', serif;
  --font-mono:'Space Mono', monospace;
}
[data-theme="arsip"]{
  --bg:#ECE6D8; --surface:#F4F0E5; --ink:#22262B; --ink-soft:#5B6270;
  --accent:#B3372B; --accent-ink:#F4F0E5; --line:#C9C2B0; --grid:rgba(34,38,43,.06);
}
[data-theme="malam"]{
  --bg:#101720; --surface:#18212D; --ink:#E8E4DA; --ink-soft:#8A94A3;
  --accent:#D9A441; --accent-ink:#101720; --line:#493126; --grid:rgba(232,228,218,.05);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:18px; line-height:1.65; transition:background .3s, color .3s;
  display:flex; min-height:100vh; flex-direction:column;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; width:100%}
main{flex:1; padding:36px 20px 64px}

/* ── Masthead ── */
.masthead{border-bottom:3px double var(--ink); background:var(--surface)}
.mast-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:14px}
.mast-brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.mast-brand svg{width:38px; height:38px; color:var(--accent)}
.mast-brand b{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:.06em}
.mast-links{display:flex; align-items:center; gap:18px; font-family:var(--font-mono); font-size:13px}
.mast-links a{text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px}
.mast-links a:hover{border-color:var(--accent)}
.btn-tema{background:none; border:1.5px solid var(--ink); color:var(--ink); border-radius:50%;
  width:32px; height:32px; font-size:16px; cursor:pointer; line-height:1}
.btn-tema:hover{background:var(--ink); color:var(--bg)}

.rubrik-nav{display:flex; gap:4px; overflow-x:auto; padding-bottom:0; border-top:1px solid var(--line)}
.rubrik-nav a{font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none; padding:10px 14px; white-space:nowrap; border-bottom:3px solid transparent}
.rubrik-nav a:hover{color:var(--accent)}
.rubrik-nav a.aktif{border-color:var(--accent); color:var(--accent)}

/* ── Kartu & daftar artikel ── */
.label-rubrik{font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); text-decoration:none}
.meta{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft)}

.unggulan{border:2px solid var(--ink); background:var(--surface); padding:32px 28px; margin-bottom:44px; position:relative}
.unggulan::after{content:"SOROTAN"; position:absolute; top:-12px; right:20px; background:var(--accent);
  color:var(--accent-ink); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; padding:3px 10px}
.unggulan .judul-unggulan{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,5vw,44px); line-height:1.12; margin:10px 0 14px}
.unggulan .judul-unggulan a{text-decoration:none}
.unggulan .judul-unggulan a:hover{color:var(--accent)}
.unggulan p{color:var(--ink-soft); max-width:64ch}
.unggulan .meta{display:block; margin-top:14px}

.grid-artikel{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px}
.kartu{border-top:2px solid var(--ink); padding-top:14px}
.kartu h2{font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.25; margin:8px 0 8px}
.kartu h2 a{text-decoration:none}
.kartu h2 a:hover{color:var(--accent)}
.kartu p{font-size:16px; color:var(--ink-soft)}
.kartu .meta{display:block; margin-top:10px}

.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin:0 0 24px}
.sec-head h2{font-family:var(--font-display); font-weight:800; font-size:24px}
.sec-head .mono{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft)}

/* ── Halaman rubrik / arsip ── */
.kepala-rubrik{margin-bottom:36px; border-bottom:3px double var(--ink); padding-bottom:20px}
.kepala-rubrik h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5vw,42px)}
.kepala-rubrik p{color:var(--ink-soft); max-width:60ch; margin-top:6px}
.daftar-arsip .kartu{margin-bottom:26px}

.cari{display:flex; gap:8px; margin-bottom:28px}
.cari input{flex:1; font-family:var(--font-mono); font-size:14px; padding:10px 12px;
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink)}
.cari button{font-family:var(--font-mono); font-size:13px; padding:10px 18px; cursor:pointer;
  background:var(--ink); color:var(--bg); border:1.5px solid var(--ink)}
.cari button:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

.paginasi{display:flex; gap:14px; justify-content:center; margin-top:40px; font-family:var(--font-mono); font-size:13px}
.paginasi a{text-decoration:none; border:1px solid var(--ink); padding:6px 14px}
.paginasi a:hover{background:var(--ink); color:var(--bg)}
.paginasi .kini{padding:6px 14px; color:var(--ink-soft)}

/* ── Halaman artikel ── */
.artikel-head{max-width:760px; margin:0 auto 28px}
.artikel-head h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.4vw,46px); line-height:1.12; margin:12px 0 16px}
.artikel-head .ringkasan{font-size:21px; font-style:italic; color:var(--ink-soft); line-height:1.5}
.artikel-head .byline{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.gambar-utama{max-width:900px; margin:0 auto 32px}
.gambar-utama img{width:100%; border:1px solid var(--line)}
.gambar-utama figcaption{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-top:8px}

.isi-artikel{max-width:680px; margin:0 auto; font-size:19px; line-height:1.7}
.isi-artikel > * + *{margin-top:1.2em}
.isi-artikel h2{font-family:var(--font-display); font-weight:700; font-size:27px; margin-top:1.8em}
.isi-artikel h3{font-family:var(--font-display); font-weight:700; font-size:22px; margin-top:1.6em}
.isi-artikel a{color:var(--accent)}
.isi-artikel blockquote{border-left:3px solid var(--accent); padding-left:20px; font-style:italic; color:var(--ink-soft)}
.isi-artikel ul,.isi-artikel ol{padding-left:1.4em}
.isi-artikel li + li{margin-top:.4em}
.isi-artikel code{font-family:var(--font-mono); font-size:.85em; background:var(--surface); padding:2px 6px; border:1px solid var(--line)}
.isi-artikel pre{background:var(--surface); border:1px solid var(--line); padding:16px; overflow-x:auto}
.isi-artikel pre code{border:none; padding:0}
.isi-artikel img{margin:0 auto}
.isi-artikel hr{border:none; border-top:1px solid var(--line)}

.terkait{max-width:680px; margin:56px auto 0; border-top:3px double var(--ink); padding-top:24px}
.terkait h2{font-family:var(--font-display); font-weight:800; font-size:20px; margin-bottom:18px}

/* ── Footer ── */
footer{border-top:2px solid var(--ink); padding:24px 0; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft)}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

@media (max-width:640px){
  .mast-top{flex-wrap:wrap}
  .unggulan{padding:24px 18px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* ── Akun & Premium (Tahap B) ── */
.kotak-form{max-width:440px; margin:0 auto; border:2px solid var(--ink); background:var(--surface); padding:32px 28px}
.kotak-form h1{font-family:var(--font-display); font-weight:800; font-size:28px; margin-bottom:8px}
.kotak-form form{margin-top:20px}
.kotak-form label{display:block; font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; margin:16px 0 6px}
.kotak-form input{width:100%; font-family:var(--font-body); font-size:16px; padding:10px 12px;
  border:1.5px solid var(--ink); background:var(--bg); color:var(--ink)}
.kotak-form button, .tombol-isi{display:inline-block; margin-top:20px; font-family:var(--font-mono); font-size:14px;
  padding:12px 22px; background:var(--accent); color:var(--accent-ink); border:1.5px solid var(--accent);
  cursor:pointer; text-decoration:none}
.kotak-form button:hover, .tombol-isi:hover{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.tombol-garis{display:inline-block; font-family:var(--font-mono); font-size:13px; padding:10px 18px;
  background:none; border:1.5px solid var(--ink); color:var(--ink); cursor:pointer; text-decoration:none; margin-top:12px}
.tombol-garis:hover{background:var(--ink); color:var(--bg)}
.galat{color:var(--accent); font-size:15px; margin-top:8px}
.lencana-premium{font-family:var(--font-mono); font-size:12px; background:var(--accent);
  color:var(--accent-ink); padding:2px 8px; letter-spacing:.08em}

.kartu-paket{border:2px solid var(--ink); background:var(--surface); padding:26px 22px}
.kartu-paket h2{font-family:var(--font-display); font-weight:800; font-size:22px}
.kartu-paket .harga{font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--accent); margin:6px 0 2px}
.kartu-paket p{font-size:16px; margin-top:8px}

.isi-terkunci{position:relative; max-height:340px; overflow:hidden}
.isi-terkunci::after{content:""; position:absolute; inset:auto 0 0 0; height:200px;
  background:linear-gradient(to bottom, transparent, var(--bg))}
.paywall{max-width:680px; margin:8px auto 0; border:2px solid var(--accent); background:var(--surface);
  padding:28px 24px; text-align:center}
.paywall h2{font-family:var(--font-display); font-weight:800; font-size:24px; margin:8px 0}
.paywall .tombol-isi{margin:14px 8px 0}

/* ── Topik, bahasa, komentar, dukungan (v3) ── */
.awan-topik{display:flex; flex-wrap:wrap; gap:10px}
.chip-topik{font-family:var(--font-mono); font-size:13px; text-decoration:none;
  border:1.5px solid var(--ink); padding:7px 14px; border-radius:999px; transition:all .15s}
.chip-topik:hover{background:var(--ink); color:var(--bg); transform:translateY(-1px)}
.chip-topik.aktif{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chip-bahasa{font-family:var(--font-mono); font-size:10px; border:1px solid var(--ink-soft);
  padding:1px 5px; letter-spacing:.06em}
.chip-premium{font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-left:6px}

.menu-topik{position:relative}
.menu-topik summary{font-family:var(--font-mono); font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; padding:10px 14px; cursor:pointer; list-style:none; white-space:nowrap; color:var(--accent)}
.menu-topik summary::-webkit-details-marker{display:none}
.menu-topik .isi-menu-topik{position:absolute; top:100%; left:0; z-index:50; min-width:230px;
  background:var(--surface); border:2px solid var(--ink); padding:10px; display:grid;
  grid-template-columns:1fr 1fr; gap:2px; box-shadow:4px 4px 0 var(--grid)}
.menu-topik .isi-menu-topik a{font-family:var(--font-mono); font-size:12.5px; text-decoration:none;
  padding:7px 9px; white-space:nowrap}
.menu-topik .isi-menu-topik a:hover{background:var(--accent); color:var(--accent-ink)}
.nav-kanan{margin-left:auto}

.pilih-bahasa{position:relative}
.pilih-bahasa summary{cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:13px}
.pilih-bahasa summary::-webkit-details-marker{display:none}
.pilih-bahasa form{position:absolute; top:130%; right:0; z-index:60; background:var(--surface);
  border:2px solid var(--ink); display:flex; flex-direction:column; min-width:130px}
.pilih-bahasa button{font-family:var(--font-mono); font-size:13px; text-align:left; padding:9px 14px;
  background:none; border:none; color:var(--ink); cursor:pointer}
.pilih-bahasa button:hover{background:var(--ink); color:var(--bg)}
.pilih-bahasa button.aktif{color:var(--accent)}
.tautan-dukung{color:var(--accent)}

.pita-dukung{margin-top:56px; border:2px solid var(--accent); background:var(--surface);
  padding:26px 24px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.pita-dukung h2{font-family:var(--font-display); font-weight:800; font-size:21px}
.pita-dukung p{color:var(--ink-soft); font-size:16px}
.pita-dukung .tombol-isi,.pita-dukung .tombol-garis{margin:0 8px 0 0}

.komentar-blok{max-width:680px; margin:48px auto 0; border-top:3px double var(--ink); padding-top:22px}
.komentar-blok h2{font-family:var(--font-display); font-weight:800; font-size:21px; margin-bottom:16px}
.komentar{border-left:3px solid var(--line); padding:8px 0 8px 16px; margin-bottom:14px}
.komentar p{font-size:16px; margin-top:4px}
.komentar-blok textarea{width:100%; font-family:var(--font-body); font-size:16px; padding:10px 12px;
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); margin-top:8px}
.komentar-blok .tombol-isi{margin-top:12px}
.ajakan-masuk{font-size:16px; border:1.5px dashed var(--line); padding:14px 16px}
.pesan-sukses{font-family:var(--font-mono); font-size:13px; color:var(--accent);
  border:1.5px solid var(--accent); padding:10px 14px; margin-bottom:20px}

@media (max-width:640px){ .nav-kanan{margin-left:0} }


/* Langkah Kuda v5 stage 1 — homepage editorial */
.subjudul{font-family:var(--font-display);line-height:1.3;margin-top:6px}.subjudul.sj-1{font-size:22px;font-weight:700;color:var(--ink)}.subjudul.sj-2{font-size:19px;font-weight:600;color:var(--ink-soft)}.subjudul.sj-3{font-size:17px;font-weight:500;color:var(--ink-soft);font-style:italic}
.home-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding:clamp(38px,7vw,92px) 0 42px;border-bottom:2px solid var(--ink)}.home-intro h1{font-family:var(--font-display);font-size:clamp(38px,6.7vw,88px);line-height:.94;letter-spacing:-.055em;max-width:980px;margin:10px 0 18px}.home-intro p{font-size:clamp(17px,2vw,22px);max-width:780px;color:var(--ink-soft)}.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}.home-actions{display:flex;gap:10px;flex-wrap:wrap}.jelajah-kategori{padding:34px 0 48px}.kategori-head{align-items:end}.kategori-head h2{margin:5px 0 0}.kategori-semua{position:relative}.kategori-semua summary{cursor:pointer;font-family:var(--font-mono);font-size:12px}.kategori-mega{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:min(720px,90vw);display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--grid);padding:12px}.kategori-mega a{display:flex;gap:10px;padding:13px;text-decoration:none;border-bottom:1px solid var(--line)}.kategori-mega a:hover{background:var(--ink);color:var(--bg)}.kategori-mega span{font-family:var(--font-mono);font-size:10px;color:var(--accent)}.kategori-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.kategori-card{min-height:132px;padding:18px;display:flex;flex-direction:column;text-decoration:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:background .18s,color .18s,transform .18s}.kategori-card:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}.kategori-no{font-family:var(--font-mono);font-size:10px;color:var(--accent)}.kategori-card strong{font-family:var(--font-display);font-size:20px;margin:auto 0 8px}.kategori-card small{font-family:var(--font-mono);font-size:10px}.unggulan-modern{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:32px;align-items:stretch}.unggulan-cover{min-height:380px;overflow:hidden;border-left:1px solid var(--ink)}.unggulan-cover img,.kartu-cover img{width:100%;height:100%;object-fit:cover;display:block}.kartu{overflow:hidden}.kartu-cover{display:block;aspect-ratio:16/9;border-bottom:1px solid var(--ink);overflow:hidden}.kartu-cover img{transition:transform .4s ease}.kartu:hover .kartu-cover img{transform:scale(1.025)}.kartu-body{padding:20px}.kartu-subjudul{font-family:var(--font-display);font-weight:600;color:var(--ink-soft)}.menu-topik-mega .isi-menu-topik{grid-template-columns:repeat(2,minmax(150px,1fr));min-width:390px}.nav-kategori{overflow:visible}
@media(max-width:900px){.home-intro,.unggulan-modern{grid-template-columns:1fr}.home-actions{align-self:start}.kategori-strip{grid-template-columns:repeat(2,1fr)}.unggulan-cover{border-left:none;border-top:1px solid var(--ink);min-height:280px}}
@media(max-width:640px){.home-intro{padding-top:32px}.home-intro h1{font-size:42px}.kategori-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.kategori-card{min-width:72vw;scroll-snap-align:start}.kategori-mega{position:fixed;left:4vw;right:4vw;top:22vh;width:92vw;grid-template-columns:1fr 1fr;max-height:60vh;overflow:auto}.rubrik-nav.nav-kategori>a:nth-of-type(n+4){display:none}.menu-topik-mega .isi-menu-topik{min-width:78vw;grid-template-columns:1fr 1fr}}

/* v5.2 Masthead, login, dashboards */
.breaking-strip{background:#101114;color:#fff;font:11px var(--font-mono);letter-spacing:.04em}.breaking-strip .wrap{display:flex;gap:14px;align-items:center;padding-top:7px;padding-bottom:7px}.breaking-strip span{background:#e1261c;padding:4px 7px;font-weight:700}.breaking-strip p{margin:0;opacity:.78}.mast-top-v2{min-height:86px}.brand-v2 span{display:flex;flex-direction:column;line-height:.9}.brand-v2 b{font-size:28px;letter-spacing:-.055em}.brand-v2 small{font:9px var(--font-mono);letter-spacing:.22em;margin-top:8px}.mast-links-v2{gap:17px}.write-pill,.account-pill{border:1px solid var(--ink);padding:8px 11px!important}.write-pill{background:var(--ink);color:var(--bg)!important}.mobile-menu-btn{display:none;background:none;border:none;font-size:24px;color:var(--ink)}
.login-shell{max-width:1050px;margin:54px auto;display:grid;grid-template-columns:1fr 1fr;gap:26px}.login-intro{grid-column:1/-1;max-width:720px}.login-intro h1{font-size:clamp(42px,7vw,78px);margin:4px 0}.role-switch{display:grid;gap:10px}.role-card{border:1px solid var(--line);padding:18px;display:grid;grid-template-columns:42px 1fr;gap:4px 12px;color:var(--ink);text-decoration:none;background:var(--surface)}.role-card span{grid-row:1/3;font:700 18px var(--font-mono);color:var(--accent)}.role-card b{font-size:20px}.role-card small{color:var(--ink-soft)}.role-card.aktif{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--grid);transform:translate(-2px,-2px)}.login-panel{border:2px solid var(--ink);padding:26px;background:var(--surface);box-shadow:7px 7px 0 var(--grid)}.login-panel form{display:grid;gap:14px}.login-panel label{font-weight:700}.login-panel input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.writer-hero{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:48px 0 28px;border-bottom:2px solid var(--ink)}.writer-hero h1{font-size:clamp(38px,6vw,68px);margin:4px 0}.writer-hero p{margin:0;color:var(--ink-soft)}.writer-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:22px 0 40px}.writer-stats div{padding:18px;border-right:1px solid var(--line)}.writer-stats div:last-child{border-right:0}.writer-stats b{font:700 30px var(--font-display);display:block}.writer-stats span{font:11px var(--font-mono);text-transform:uppercase}.writer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.writer-card{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-width:0}.writer-cover{aspect-ratio:16/7;position:relative;background:var(--ink);display:grid;place-items:center;overflow:hidden}.writer-cover img,.redaksi-cover img{width:100%;height:100%;object-fit:cover}.writer-cover>span,.redaksi-cover>span{font:700 48px var(--font-display);color:var(--bg)}.writer-cover .status-chip{position:absolute;left:12px;top:12px}.writer-body{padding:20px;flex:1}.writer-body h2{font-size:27px;margin:7px 0}.writer-actions{display:flex;gap:9px;padding:16px 20px;border-top:1px solid var(--line)}.editorial-response{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.editorial-response summary{cursor:pointer;font-weight:700}.editorial-response summary span{background:var(--ink);color:var(--bg);border-radius:999px;padding:2px 7px;font-size:11px}.response-timeline{margin:14px 0 0 5px}.response-item{display:grid;grid-template-columns:14px 1fr;gap:9px;padding-bottom:15px}.response-item i{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:5px;box-shadow:0 0 0 4px var(--grid)}.response-item b,.response-item time{display:block}.response-item time{font:10px var(--font-mono);color:var(--ink-soft)}.response-item p{margin:5px 0 0}.redaksi-list{display:grid;gap:18px}.redaksi-card{display:grid;grid-template-columns:180px 1fr 310px;gap:20px;border:1px solid var(--line);padding:16px;background:var(--surface)}.redaksi-cover{min-height:150px;background:var(--ink);display:grid;place-items:center;overflow:hidden}.redaksi-main h2{font-size:25px;margin:8px 0}.redaksi-form{display:grid;gap:8px}.redaksi-form select,.redaksi-form textarea{width:100%;padding:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.status-dibaca{background:#6b4a37!important;color:#fff!important}.status-dipertimbangkan{background:#a36b00!important;color:#fff!important}.status-diterima{background:#20734a!important;color:#fff!important}.status-ditolak{background:#852f35!important;color:#fff!important}
@media(max-width:860px){.mast-links-v2{display:none}.mobile-menu-btn{display:block}.menu-open .mast-links-v2{display:flex;position:absolute;top:120px;left:12px;right:12px;z-index:100;background:var(--surface);border:2px solid var(--ink);padding:18px;flex-direction:column;align-items:stretch}.login-shell{grid-template-columns:1fr}.writer-grid{grid-template-columns:1fr}.redaksi-card{grid-template-columns:1fr}.redaksi-cover{aspect-ratio:16/7}.writer-stats{grid-template-columns:repeat(2,1fr)}.writer-hero{align-items:flex-start;flex-direction:column}.breaking-strip p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* =========================================================
   LANGKAH KUDA — LANGUAGE DROPDOWN & RESPONSIVE MASTHEAD FIX
   ========================================================= */

/* Header tidak boleh memotong dropdown */
.site-header,
.masthead,
.masthead-inner,
.masthead-main,
.header-main,
.header-inner,
.nav-shell,
.navbar,
.top-nav,
.account-area,
.account-menu,
.language-area,
.language-switcher {
  overflow: visible !important;
}

/* Pastikan lapisan header cukup tinggi */
.site-header,
.masthead,
.header-main {
  position: relative;
  z-index: 900;
}

.primary-nav,
.category-nav,
.nav-categories {
  position: relative;
  z-index: 700;
}

/* Dropdown bahasa harus tampil di atas semua navigasi */
.language-switcher,
.language-menu,
.lang-dropdown,
.dropdown-language {
  position: relative;
  z-index: 1200;
}

.language-menu,
.lang-dropdown,
.dropdown-language {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  max-height: min(320px, 70vh);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--surface, #f4efe4);
  color: var(--ink, #202124);
  border: 1px solid var(--ink, #202124);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, .14);
  z-index: 9999 !important;
}

/* Link bahasa */
.language-menu a,
.lang-dropdown a,
.dropdown-language a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.language-menu a:last-child,
.lang-dropdown a:last-child,
.dropdown-language a:last-child {
  border-bottom: none;
}

.language-menu a:hover,
.lang-dropdown a:hover,
.dropdown-language a:hover,
.language-menu a:focus-visible,
.lang-dropdown a:focus-visible,
.dropdown-language a:focus-visible {
  background: var(--accent, #c7352a);
  color: #fff;
  outline: none;
}

/* Hindari benturan antara akun, bahasa, tombol menulis dan tema */
.masthead-actions,
.header-actions,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1100;
}

/* Desktop menengah */
@media (max-width: 1180px) {
  .masthead-inner,
  .header-inner {
    padding-inline: 18px;
  }

  .masthead-actions,
  .header-actions,
  .nav-actions {
    gap: 7px;
  }

  .category-nav,
  .nav-categories {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .category-nav::-webkit-scrollbar,
  .nav-categories::-webkit-scrollbar {
    height: 4px;
  }
}

/* Tablet dan iPad */
@media (max-width: 900px) {
  .masthead-main,
  .header-main {
    min-height: auto;
  }

  .masthead-inner,
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .brand,
  .site-brand,
  .masthead-brand {
    min-width: 0;
  }

  .brand-main,
  .site-title,
  .masthead-title {
    font-size: clamp(22px, 4vw, 34px);
    white-space: nowrap;
  }

  .desktop-nav,
  .primary-links {
    display: none;
  }

  .mobile-menu-button,
  .hamburger {
    display: inline-flex;
  }

  .language-menu,
  .lang-dropdown,
  .dropdown-language {
    position: fixed;
    top: 72px;
    right: 14px;
    left: auto;
    width: min(280px, calc(100vw - 28px));
    max-height: calc(100vh - 96px);
  }
}

/* HP */
@media (max-width: 640px) {
  .masthead-inner,
  .header-inner {
    padding: 10px 12px;
  }

  .masthead-actions,
  .header-actions,
  .nav-actions {
    gap: 5px;
  }

  .write-button,
  .btn-write,
  .support-link,
  .premium-link {
    font-size: 12px;
  }

  .language-menu,
  .lang-dropdown,
  .dropdown-language {
    top: 62px;
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 78px);
    border-radius: 4px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
  }

  .language-menu a,
  .lang-dropdown a,
  .dropdown-language a {
    min-height: 48px;
    font-size: 15px;
  }

  .category-nav,
  .nav-categories {
    padding-inline: 10px;
    scroll-snap-type: x proximity;
  }

  .category-nav a,
  .nav-categories a {
    scroll-snap-align: start;
  }
}

/* Layar sangat kecil */
@media (max-width: 390px) {
  .brand-sub,
  .masthead-tagline {
    display: none;
  }

  .masthead-actions .button-text,
  .header-actions .button-text {
    display: none;
  }
}

/* Hormati pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .language-menu,
  .lang-dropdown,
  .dropdown-language {
    transition: none !important;
    animation: none !important;
  }
}


.language-menu form,
.lang-dropdown form,
.dropdown-language form {
  margin: 0;
  padding: 0;
}

.language-menu button,
.lang-dropdown button,
.dropdown-language button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.language-menu button:last-child,
.lang-dropdown button:last-child,
.dropdown-language button:last-child {
  border-bottom: 0;
}

.language-menu button:hover,
.lang-dropdown button:hover,
.dropdown-language button:hover,
.language-menu button:focus-visible,
.lang-dropdown button:focus-visible,
.dropdown-language button:focus-visible {
  background: var(--accent, #c7352a);
  color: #fff;
  outline: none;
}

.language-menu[hidden],
.lang-dropdown[hidden],
.dropdown-language[hidden] {
  display: none !important;
}

.language-menu.is-open,
.lang-dropdown.is-open,
.dropdown-language.is-open {
  display: block;
}


/* =========================================================
   LANGKAH KUDA — FRAME RINGKASAN ARTIKEL
   ========================================================= */

.ringkasan-artikel {
  position: relative;
  margin: clamp(34px, 5vw, 58px) 0 clamp(38px, 5vw, 62px);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--ink, #23262b);
  border-left: 5px solid var(--accent, #c7352a);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent, #c7352a) 5%, transparent),
      transparent 60%
    ),
    var(--surface, #f5f0e5);
  box-shadow: 7px 7px 0 var(--grid, rgba(35, 38, 43, .12));
}

.ringkasan-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--accent, #c7352a);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ringkasan-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(
    in srgb,
    var(--accent, #c7352a) 35%,
    transparent
  );
}

.ringkasan-artikel p {
  max-width: 72ch;
  margin: 0;
  color: var(--ink-soft, #535966);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.65;
}

.ringkasan-artikel::before {
  content: "“";
  position: absolute;
  top: 12px;
  right: 22px;
  color: color-mix(
    in srgb,
    var(--accent, #c7352a) 18%,
    transparent
  );
  font-family: Georgia, serif;
  font-size: clamp(70px, 8vw, 112px);
  line-height: 1;
  pointer-events: none;
}

/* Jarak identitas artikel terhadap ringkasan */
.kepala-artikel + .ringkasan-artikel,
.article-header + .ringkasan-artikel,
.article-head + .ringkasan-artikel {
  margin-top: clamp(38px, 6vw, 68px);
}

@media (max-width: 640px) {
  .ringkasan-artikel {
    margin-top: 30px;
    margin-bottom: 36px;
    padding: 22px 20px;
    box-shadow: 4px 4px 0 var(--grid, rgba(35, 38, 43, .12));
  }

  .ringkasan-artikel p {
    font-size: 17px;
    line-height: 1.6;
  }

  .ringkasan-artikel::before {
    top: 10px;
    right: 14px;
    font-size: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ringkasan-artikel {
    scroll-behavior: auto;
  }
}


/* =========================================================
   LANGKAH KUDA — KOMENTAR BERTINGKAT & NOTIFIKASI
   ========================================================= */

.komentar-blok {
  max-width: 780px;
  margin: clamp(50px, 8vw, 90px) auto 0;
  padding-top: 34px;
  border-top: 2px solid var(--ink);
}

.komentar-kepala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.komentar-kepala h2 {
  margin: 5px 0 0;
  font-size: clamp(28px, 4vw, 42px);
}

.jumlah-komentar {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-family: var(--font-mono);
  font-size: 12px;
  vertical-align: middle;
}

.tautan-notifikasi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}

.badge-notifikasi {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.komentar {
  position: relative;
  margin: 0 0 18px;
  padding: 21px 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.komentar:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--accent) 12%, transparent);
}

.komentar-identitas {
  display: flex;
  align-items: center;
  gap: 12px;
}

.komentar-identitas strong {
  display: block;
  font-size: 14px;
}

.komentar-identitas time {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}

.avatar-komentar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.avatar-kecil {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.komentar-isi {
  margin: 15px 0 12px 54px;
  color: var(--ink);
  font-family: var(--font-body, Georgia, serif);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.btn-balas-komentar {
  margin-left: 54px;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-balas-komentar:hover {
  border-bottom-color: var(--accent);
}

.daftar-balasan {
  margin: 22px 0 0 54px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
}

.komentar-balasan {
  margin-bottom: 10px;
  padding: 17px 18px;
  background: var(--bg);
}

.komentar-balasan .komentar-isi,
.komentar-balasan .btn-balas-komentar {
  margin-left: 46px;
}

.balas-ke {
  margin-left: 5px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
}

.form-komentar {
  margin-top: 32px;
  padding: clamp(20px, 4vw, 30px);
  border: 1.5px solid var(--ink);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--grid);
}

.form-komentar-kepala,
.form-komentar-bawah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.form-komentar-kepala label {
  font-size: 13px;
}

.form-komentar textarea {
  width: 100%;
  min-height: 130px;
  margin-top: 14px;
  padding: 16px;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
}

.form-komentar textarea:focus {
  border-color: var(--accent);
  outline: 3px solid
    color-mix(in srgb, var(--accent) 12%, transparent);
}

.form-komentar-bawah {
  margin-top: 12px;
}

.indikator-balasan {
  margin-top: 12px;
  padding: 8px 11px;
  border-left: 3px solid var(--accent);
  background:
    color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
}

.batal-balas {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
}

.komentar-kosong,
.ajakan-masuk,
.notifikasi-kosong {
  padding: 26px;
  border: 1px dashed var(--line);
  text-align: center;
}

/* Notifikasi */

.halaman-notifikasi {
  max-width: 880px;
  margin: 0 auto;
  padding:
    clamp(42px, 7vw, 86px)
    clamp(18px, 4vw, 34px);
}

.kepala-notifikasi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}

.kepala-notifikasi h1 {
  margin: 4px 0 8px;
  font-size: clamp(38px, 7vw, 68px);
}

.item-notifikasi {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.item-notifikasi:hover {
  background:
    color-mix(in srgb, var(--accent) 5%, transparent);
}

.item-notifikasi.belum-dibaca {
  background:
    color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.titik-notifikasi {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: transparent;
}

.belum-dibaca .titik-notifikasi {
  background: var(--accent);
}

.item-notifikasi p {
  margin: 5px 0 7px;
}

@media (max-width: 640px) {
  .komentar-kepala,
  .kepala-notifikasi {
    align-items: flex-start;
    flex-direction: column;
  }

  .komentar {
    padding: 17px 15px;
  }

  .komentar-isi,
  .btn-balas-komentar {
    margin-left: 0;
  }

  .daftar-balasan {
    margin-left: 12px;
    padding-left: 10px;
  }

  .komentar-balasan .komentar-isi,
  .komentar-balasan .btn-balas-komentar {
    margin-left: 0;
  }

  .form-komentar-kepala,
  .form-komentar-bawah {
    align-items: stretch;
    flex-direction: column;
  }

  .form-komentar-bawah .tombol-isi {
    width: 100%;
  }
}


/* =========================================================
   LANGKAH KUDA — REAKSI ARTIKEL & CLAP
   ========================================================= */

.apresiasi-artikel {
  max-width: 820px;
  margin: clamp(52px, 8vw, 92px) auto;
  padding: clamp(24px, 5vw, 38px);
  border: 1.5px solid var(--ink);
  background:
    radial-gradient(
      circle at 96% 4%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 28%
    ),
    var(--surface);
  box-shadow: 7px 7px 0 var(--grid);
}

.apresiasi-kepala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.apresiasi-kepala h2 {
  margin: 5px 0 6px;
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.06;
}

.apresiasi-kepala p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.ringkasan-apresiasi {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.ringkasan-apresiasi span {
  min-width: 82px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.ringkasan-apresiasi strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 18px;
}

.daftar-reaksi {
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  gap: 8px;
}

.tombol-reaksi {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 104px;
  padding: 12px 7px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.tombol-reaksi:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tombol-reaksi.aktif {
  border-color: var(--accent);
  background:
    color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow:
    inset 0 -4px 0 var(--accent);
}

.emoji-reaksi {
  font-size: 26px;
  line-height: 1;
  transform-origin: center bottom;
}

.tombol-reaksi:hover .emoji-reaksi,
.tombol-reaksi.aktif .emoji-reaksi {
  animation: lkEmoji .34s ease;
}

.label-reaksi {
  min-height: 27px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.jumlah-reaksi {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--grid);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.tombol-reaksi.aktif .jumlah-reaksi {
  background: var(--accent);
  color: var(--accent-ink, #fff);
}

.panel-clap {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr);
  align-items: center;
  gap: 22px;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.tombol-clap {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 74px;
  padding: 13px 17px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  text-align: left;
  cursor: pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.tombol-clap:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink, #fff);
  transform: translateY(-2px);
}

.tombol-clap.bertepuk .ikon-clap {
  animation: lkClap .26s ease;
}

.tombol-clap.maksimum {
  border-color: var(--accent);
}

.ikon-clap {
  font-size: 34px;
  line-height: 1;
}

.tombol-clap strong,
.tombol-clap small {
  display: block;
}

.tombol-clap strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.tombol-clap small {
  opacity: .76;
  font-family: var(--font-mono);
  font-size: 9px;
}

.status-clap {
  font-family: var(--font-mono);
  font-size: 11px;
}

.progres-clap {
  width: 100%;
  height: 8px;
  margin-top: 9px;
  overflow: hidden;
  background: var(--grid);
}

.progres-clap span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .2s ease;
}

.ajakan-reaksi-login {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.pesan-apresiasi {
  min-height: 20px;
  margin-top: 14px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.pesan-apresiasi.tampil {
  opacity: 1;
  transform: none;
}

.pesan-apresiasi.galat {
  color: #b42318;
}

@keyframes lkEmoji {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28) rotate(-7deg); }
  100% { transform: scale(1); }
}

@keyframes lkClap {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1); }
}

@media (max-width: 880px) {
  .daftar-reaksi {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }
}

@media (max-width: 640px) {
  .apresiasi-artikel {
    margin-inline: 0;
    padding: 21px 16px;
    box-shadow: 4px 4px 0 var(--grid);
  }

  .apresiasi-kepala {
    align-items: flex-start;
    flex-direction: column;
  }

  .ringkasan-apresiasi {
    width: 100%;
  }

  .ringkasan-apresiasi span {
    flex: 1;
  }

  .daftar-reaksi {
    display: flex;
    gap: 8px;
    margin-inline: -16px;
    padding: 0 16px 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .tombol-reaksi {
    flex: 0 0 102px;
    min-height: 100px;
    scroll-snap-align: start;
  }

  .panel-clap {
    grid-template-columns: 1fr;
  }

  .tombol-clap {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tombol-reaksi,
  .tombol-clap,
  .emoji-reaksi,
  .ikon-clap,
  .progres-clap span,
  .pesan-apresiasi {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   LANGKAH KUDA — ARTIKEL TERPOPULER
   ========================================================= */

.halaman-terpopuler {
  max-width: 1040px;
  margin: 0 auto;
  padding:
    clamp(44px, 7vw, 88px)
    clamp(18px, 4vw, 34px);
}

.kepala-terpopuler {
  max-width: 760px;
  margin-bottom: 32px;
}

.kepala-terpopuler h1 {
  margin: 7px 0 10px;
  font-size: clamp(42px, 7vw, 76px);
  line-height: .98;
}

.kepala-terpopuler p {
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.tab-periode {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
  padding-bottom: 15px;
  overflow-x: auto;
  border-bottom: 2px solid var(--ink);
}

.tab-periode a {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
}

.tab-periode a:hover,
.tab-periode a.aktif {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink, #fff);
}

.ranking-artikel {
  border-top: 1px solid var(--ink);
}

.item-ranking {
  display: grid;
  grid-template-columns: 64px 220px minmax(0, 1fr);
  gap: 24px;
  padding: 27px 0;
  border-bottom: 1px solid var(--line);
}

.nomor-ranking {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.gambar-ranking {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ink);
}

.gambar-ranking img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.gambar-ranking:hover img {
  transform: scale(1.035);
}

.meta-ranking {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.meta-ranking a {
  color: var(--accent);
  text-decoration: none;
}

.isi-ranking h2 {
  margin: 7px 0 9px;
  font-size: clamp(21px, 3vw, 31px);
  line-height: 1.12;
}

.isi-ranking h2 a {
  color: var(--ink);
  text-decoration: none;
}

.isi-ranking h2 a:hover {
  color: var(--accent);
}

.isi-ranking p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.isi-ranking footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9px;
}

.isi-ranking footer strong {
  color: var(--ink);
}

.premium-mini {
  padding: 3px 6px;
  background: var(--ink);
  color: var(--bg);
}

.terpopuler-kosong {
  padding: 60px 20px;
  text-align: center;
}

.jumlah-pembaca-artikel {
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .item-ranking {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
  }

  .gambar-ranking {
    grid-column: 2;
    width: 100%;
  }

  .isi-ranking {
    grid-column: 2;
  }

  .nomor-ranking {
    grid-row: 1 / span 2;
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .item-ranking {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .nomor-ranking {
    font-size: 24px;
  }

  .isi-ranking p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gambar-ranking img {
    transition: none;
  }

  .gambar-ranking:hover img {
    transform: none;
  }
}


/* =========================================================
   LANGKAH KUDA — SIDEBAR ARTIKEL TERPOPULER
   ========================================================= */

.layout-artikel-sidebar {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 840px);
  justify-content: center;
  align-items: start;
  gap: clamp(34px, 5vw, 74px);
}

.kolom-artikel-utama {
  min-width: 0;
  width: 100%;
}

/*
  Beberapa elemen artikel sebelumnya memiliki margin auto dan max-width.
  Tetap dipertahankan agar kolom baca tidak melebar berlebihan.
*/
.kolom-artikel-utama > .artikel-head,
.kolom-artikel-utama > .article-head,
.kolom-artikel-utama > .cover-artikel,
.kolom-artikel-utama > .ringkasan-artikel,
.kolom-artikel-utama > .isi-artikel,
.kolom-artikel-utama > .awan-topik,
.kolom-artikel-utama > .apresiasi-artikel,
.kolom-artikel-utama > .komentar-blok,
.kolom-artikel-utama > .terkait,
.kolom-artikel-utama > .paywall {
  width: 100%;
}

.sidebar-populer-artikel {
  min-width: 0;
  padding-top: clamp(38px, 6vw, 72px);
}

.sidebar-populer-sticky {
  position: sticky;
  top: 24px;
}

.blok-sidebar-populer {
  margin-bottom: 25px;
  padding: 20px 19px;
  border: 1px solid var(--ink);
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--grid);
}

.kepala-sidebar-populer {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.kepala-sidebar-populer h2 {
  margin: 5px 0 0;
  font-size: 19px;
  line-height: 1.15;
}

.daftar-sidebar-populer {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: populer;
}

.daftar-sidebar-populer li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.daftar-sidebar-populer li:last-child {
  border-bottom: 0;
}

.nomor-sidebar {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.daftar-sidebar-populer a {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.32;
  text-decoration: none;
}

.daftar-sidebar-populer a:hover {
  color: var(--accent);
}

.meta-sidebar-populer {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.lihat-semua-populer {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
}

.lihat-semua-populer:hover {
  color: var(--ink);
}

.chip-sidebar-populer {
  display: grid;
  gap: 7px;
}

.chip-sidebar-populer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  text-decoration: none;
}

.chip-sidebar-populer a:hover {
  border-color: var(--accent);
  background:
    color-mix(in srgb, var(--accent) 7%, transparent);
}

.chip-sidebar-populer small {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: 7px;
  text-transform: uppercase;
}

.sidebar-kosong {
  display: block !important;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
}

/* Laptop dengan area layar lebih sempit */
@media (max-width: 1180px) {
  .layout-artikel-sidebar {
    width: min(1080px, calc(100% - 30px));
    grid-template-columns: minmax(220px, 270px) minmax(0, 760px);
    gap: 32px;
  }

  .blok-sidebar-populer {
    padding: 17px 15px;
  }
}

/* Tablet dan iPad: sidebar menjadi panel di atas artikel */
@media (max-width: 920px) {
  .layout-artikel-sidebar {
    width: min(820px, calc(100% - 28px));
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sidebar-populer-artikel {
    order: 0;
    width: 100%;
    padding-top: 26px;
  }

  .kolom-artikel-utama {
    order: 1;
  }

  .sidebar-populer-sticky {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
    gap: 14px;
  }

  .blok-sidebar-populer {
    margin-bottom: 22px;
    box-shadow: 3px 3px 0 var(--grid);
  }

  .daftar-sidebar-populer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* HP: kartu populer bisa digeser horizontal */
@media (max-width: 640px) {
  .layout-artikel-sidebar {
    width: 100%;
  }

  .sidebar-populer-artikel {
    padding: 16px 14px 0;
  }

  .sidebar-populer-sticky {
    display: block;
  }

  .blok-sidebar-populer {
    padding: 17px 15px;
    margin-bottom: 15px;
  }

  .daftar-sidebar-populer {
    display: flex;
    gap: 9px;
    margin-inline: -15px;
    padding: 0 15px 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .daftar-sidebar-populer li {
    flex: 0 0 230px;
    min-height: 94px;
    border: 1px solid var(--line);
    padding: 13px;
    scroll-snap-align: start;
  }

  .chip-sidebar-populer {
    display: flex;
    gap: 7px;
    margin-inline: -15px;
    padding: 0 15px 7px;
    overflow-x: auto;
  }

  .chip-sidebar-populer a {
    flex: 0 0 auto;
    min-width: 150px;
  }

  .kolom-artikel-utama {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-populer-artikel *,
  .sidebar-populer-artikel *::before,
  .sidebar-populer-artikel *::after {
    scroll-behavior: auto;
    transition: none !important;
  }
}


/* =========================================================
   LANGKAH KUDA — PENULIS TERPOPULER DI SIDEBAR
   ========================================================= */

.keterangan-ranking-penulis {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.5;
}

.daftar-penulis-populer {
  margin: 0;
  padding: 0;
  list-style: none;
}

.daftar-penulis-populer li {
  display: grid;
  grid-template-columns: 26px 38px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.daftar-penulis-populer li:last-child {
  border-bottom: 0;
}

.peringkat-penulis {
  padding-top: 7px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.avatar-penulis-populer {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.info-penulis-populer {
  min-width: 0;
}

.nama-penulis-populer {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nama-penulis-populer:hover {
  color: var(--accent);
}

.skor-penulis-populer {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.metrik-penulis-populer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.metrik-penulis-populer span {
  padding: 3px 5px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 1;
}

.penulis-populer-kosong {
  display: block !important;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
}

/* Tablet: menjadi kartu tersendiri dalam grid sidebar */
@media (max-width: 920px) and (min-width: 641px) {
  .sidebar-populer-sticky {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .penulis-populer-sidebar {
    grid-column: 1 / -1;
  }

  .daftar-penulis-populer {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
}

/* HP: daftar penulis bisa digeser */
@media (max-width: 640px) {
  .daftar-penulis-populer {
    display: flex;
    gap: 9px;
    margin-inline: -15px;
    padding: 0 15px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .daftar-penulis-populer li {
    flex: 0 0 255px;
    min-height: 108px;
    padding: 13px;
    border: 1px solid var(--line);
    scroll-snap-align: start;
  }
}


/* =========================================================
   LANGKAH KUDA — DROP CAP EDITORIAL
   Huruf pembuka besar ala koran dan majalah internasional
   ========================================================= */

.isi-artikel .paragraf-drop-cap::first-letter {
  float: left;
  margin:
    .075em
    .115em
    0
    0;

  color: var(--accent, #b52d26);
  font-family:
    var(--font-display),
    "Times New Roman",
    Georgia,
    serif;

  font-size: 4.65em;
  font-weight: 800;
  line-height: .73;
  text-transform: uppercase;

  text-shadow:
    1px 1px 0
    color-mix(
      in srgb,
      var(--ink, #222) 16%,
      transparent
    );
}

/* Sedikit jarak agar paragraf pembuka terasa editorial */
.isi-artikel .paragraf-drop-cap {
  position: relative;
  margin-top: 1.15em;
}

/*
 * Garis aksen tipis di atas paragraf pembuka.
 * Memberi nuansa majalah tanpa menjadi dekorasi berlebihan.
 */
.isi-artikel .paragraf-drop-cap::before {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin-bottom: 17px;
  background: var(--accent, #b52d26);
}

/* Tablet */
@media (max-width: 900px) {
  .isi-artikel .paragraf-drop-cap::first-letter {
    font-size: 4.25em;
    margin-right: .105em;
  }
}

/* HP */
@media (max-width: 640px) {
  .isi-artikel .paragraf-drop-cap::first-letter {
    font-size: 3.75em;
    line-height: .76;
    margin-top: .08em;
    margin-right: .1em;
  }

  .isi-artikel .paragraf-drop-cap::before {
    width: 46px;
    height: 3px;
    margin-bottom: 14px;
  }
}

/* Layar sangat kecil */
@media (max-width: 360px) {
  .isi-artikel .paragraf-drop-cap::first-letter {
    font-size: 3.35em;
  }
}

/* Mode cetak */
@media print {
  .isi-artikel .paragraf-drop-cap::first-letter {
    color: #000;
    text-shadow: none;
  }

  .isi-artikel .paragraf-drop-cap::before {
    background: #000;
  }
}


/* =========================================================
   LANGKAH KUDA — DROP CAP FIX V2
   ========================================================= */

.isi-artikel .drop-cap-letter {
  float: left;
  display: block;

  margin:
    .06em
    .13em
    0
    0;

  color: var(--accent, #b62f28);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(62px, 7vw, 88px);
  font-weight: 900;
  line-height: .72;

  text-transform: uppercase;

  text-shadow:
    1px 1px 0
    color-mix(
      in srgb,
      var(--ink, #222) 18%,
      transparent
    );
}

.isi-artikel.drop-cap-active > p:first-of-type,
.isi-artikel.drop-cap-active > div:first-of-type {
  margin-top: 0;
}

@media (max-width: 900px) {
  .isi-artikel .drop-cap-letter {
    font-size: 68px;
  }
}

@media (max-width: 640px) {
  .isi-artikel .drop-cap-letter {
    margin-top: .08em;
    margin-right: .11em;
    font-size: 56px;
    line-height: .76;
  }
}

@media (max-width: 360px) {
  .isi-artikel .drop-cap-letter {
    font-size: 49px;
  }
}

@media print {
  .isi-artikel .drop-cap-letter {
    color: #000;
    text-shadow: none;
  }
}


/* Drop cap tetap rapi bila paragraf pembuka memakai blockquote */
.isi-artikel blockquote .drop-cap-letter {
  float: left;
  margin:
    .08em
    .13em
    0
    0;
}

.isi-artikel blockquote:has(.drop-cap-letter) {
  overflow: visible;
}

.isi-artikel blockquote:has(.drop-cap-letter)::after {
  content: "";
  display: block;
  clear: both;
}


/* =========================================================
   LANGKAH KUDA — SERIAL SAYA HEADER BUTTON V2
   ========================================================= */

.tombol-serial-header {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 48px;
  padding: 0 21px;

  border: 1px solid
    color-mix(in srgb, var(--ink, #24272b) 70%, transparent) !important;
  border-radius: 0;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 22%, transparent),
      color-mix(in srgb, var(--surface, #eee8da) 96%, transparent)
    ) !important;

  color: var(--ink, #24272b) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, .72) inset,
    0 5px 13px rgba(31, 35, 40, .05);

  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;

  text-decoration: none !important;
  white-space: nowrap;

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.tombol-serial-header::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .22s ease;
}

.ikon-serial-header {
  display: inline-grid;
  place-items: center;

  width: 23px;
  height: 23px;

  border: 1px solid
    color-mix(in srgb, var(--ink, #24272b) 24%, transparent);
  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--accent, #be382c) 8%,
      transparent
    );

  color: var(--accent, #be382c);
  font-size: 13px;
  line-height: 1;

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.tombol-serial-header:hover {
  border-color: var(--accent, #be382c) !important;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent, #be382c) 8%,
        var(--surface, #eee8da)
      ),
      color-mix(
        in srgb,
        var(--accent, #be382c) 3%,
        var(--surface, #eee8da)
      )
    ) !important;

  color: var(--accent, #be382c) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 8px 20px rgba(31, 35, 40, .09);

  transform: translateY(-1px);
}

.tombol-serial-header:hover::after {
  border-color:
    color-mix(
      in srgb,
      var(--accent, #be382c) 12%,
      transparent
    );
}

.tombol-serial-header:hover .ikon-serial-header {
  border-color: var(--accent, #be382c);
  background: var(--accent, #be382c);
  color: #fff;
  transform: rotate(-3deg);
}

.tombol-serial-header:active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 2px 7px rgba(31, 35, 40, .08);
  transform: translateY(0);
}

.tombol-serial-header:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--accent, #be382c) 24%,
      transparent
    );
  outline-offset: 3px;
}

/*
 * Menyatukan tiga tombol tanpa membuatnya tampak padat.
 */
.tombol-serial-header,
.tombol-serial-header + a {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .tombol-serial-header {
    min-height: 46px;
    padding-inline: 17px;
  }
}

@media (max-width: 520px) {
  .tombol-serial-header {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tombol-serial-header,
  .tombol-serial-header::after,
  .ikon-serial-header {
    transition: none !important;
  }
}


/* Kelompok tombol kanan pada hero Meja Penulis */
.studio-actions,
.writer-actions,
.dashboard-actions,
.hero-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0;
}

.studio-actions > a,
.writer-actions > a,
.dashboard-actions > a,
.hero-actions > a {
  min-height: 48px;
}

@media (max-width: 700px) {
  .studio-actions,
  .writer-actions,
  .dashboard-actions,
  .hero-actions {
    justify-content: flex-start;
    gap: 8px;
  }
}


/* Internal link identitas penulis */
.lk-author-inline {
    color: inherit;
    font-weight: inherit;
    text-decoration-line: underline;
    text-decoration-color: rgba(164, 119, 29, .34);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.lk-author-inline:hover,
.lk-author-inline:focus-visible {
    color: #9b701b;
    text-decoration-color: currentColor;
}

/* LANGKAH KUDA — FOOTER PUBLIK DAN LEGAL 2E-A4 */
.lk-site-footer {
  margin-top: 72px;
  padding: 52px 0 18px;
  border-top: 1px solid rgba(100, 116, 139, .22);
  background: var(--card, #fff);
}

.lk-site-footer .lk-footer-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.45fr)
    repeat(3, minmax(150px, .75fr));
  gap: 38px;
  align-items: start;
}

.lk-footer-brand {
  max-width: 410px;
}

.lk-footer-logo {
  display: inline-flex;
  margin-bottom: 15px;
  color: inherit;
  font-family:
    "Bricolage Grotesque",
    system-ui,
    sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .09em;
  text-decoration: none;
}

.lk-footer-brand p {
  margin: 0 0 22px;
  color: var(--muted, #667085);
  line-height: 1.7;
}

.lk-footer-support {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border-radius: 999px;
  background: #6f263d;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.lk-footer-nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.lk-footer-nav strong {
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-footer-nav a {
  color: var(--muted, #667085);
  line-height: 1.45;
  text-decoration: none;
}

.lk-footer-nav a:hover,
.lk-footer-nav a:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lk-site-footer .lk-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid rgba(100, 116, 139, .18);
  color: var(--muted, #667085);
  font-size: 13px;
}

@media (max-width: 940px) {
  .lk-site-footer .lk-footer-grid {
    grid-template-columns:
      minmax(230px, 1.4fr)
      repeat(2, minmax(150px, 1fr));
  }

  .lk-footer-brand {
    grid-row: span 2;
  }
}

@media (max-width: 680px) {
  .lk-site-footer {
    margin-top: 52px;
    padding-top: 38px;
  }

  .lk-site-footer .lk-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }

  .lk-footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .lk-site-footer .lk-footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .lk-site-footer .lk-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* LANGKAH KUDA — DASHBOARD KESIAPAN PELUNCURAN 2E-B2 */
.lk-launch-readiness {
  margin: 28px 0 34px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(100, 116, 139, .22);
  border-radius: 26px;
  background:
    linear-gradient(
      135deg,
      rgba(111, 38, 61, .07),
      rgba(16, 185, 129, .05)
    ),
    var(--card, #fff);
}

.lk-launch-header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}

.lk-launch-header h2 {
  margin: 7px 0 8px;
  font-size: clamp(27px, 4vw, 42px);
}

.lk-launch-header p {
  max-width: 650px;
  margin: 0;
  color: var(--muted, #667085);
  line-height: 1.65;
}

.lk-launch-score {
  --score-color: #dc2626;
  position: relative;
  flex: 0 0 118px;
  width: 118px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle closest-side,
      var(--card, #fff) 77%,
      transparent 79% 100%
    ),
    conic-gradient(
      var(--score-color)
      calc(var(--launch-score) * 1%),
      rgba(100, 116, 139, .18) 0
    );
  text-align: center;
}

.lk-launch-hampir .lk-launch-score {
  --score-color: #d97706;
}

.lk-launch-siap .lk-launch-score {
  --score-color: #059669;
}

.lk-launch-score strong {
  font-size: 31px;
  line-height: 1;
}

.lk-launch-score span {
  margin-top: 3px;
  color: var(--muted, #667085);
  font-size: 12px;
}

.lk-launch-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 22px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(220, 38, 38, .09);
}

.lk-launch-hampir .lk-launch-status {
  background: rgba(217, 119, 6, .11);
}

.lk-launch-siap .lk-launch-status {
  background: rgba(5, 150, 105, .11);
}

.lk-launch-status span {
  color: var(--muted, #667085);
}

.lk-launch-metrics {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.lk-launch-metric {
  padding: 17px;
  border: 1px solid rgba(100, 116, 139, .19);
  border-radius: 17px;
  background: var(--card, #fff);
}

.lk-launch-metric > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lk-launch-metric span {
  color: var(--muted, #667085);
  font-size: 13px;
}

.lk-launch-metric strong {
  font-size: 21px;
}

.lk-launch-metric strong small {
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 600;
}

.lk-launch-progress {
  height: 7px;
  margin: 14px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100, 116, 139, .16);
}

.lk-launch-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #d97706;
}

.lk-launch-metric.is-ready
.lk-launch-progress i {
  background: #059669;
}

.lk-launch-metric > small {
  color: var(--muted, #667085);
}

.lk-launch-details {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.lk-launch-details details,
.lk-launch-video-note {
  padding: 16px 18px;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 15px;
  background: var(--card, #fff);
}

.lk-launch-details summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-weight: 800;
}

.lk-launch-details summary span {
  min-width: 27px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .12);
  text-align: center;
}

.lk-launch-details ol,
.lk-launch-details ul {
  margin: 16px 0 0;
  padding-left: 22px;
}

.lk-launch-details li {
  line-height: 1.6;
}

.lk-launch-details li + li {
  margin-top: 7px;
}

.lk-launch-details li span {
  display: block;
  color: var(--muted, #667085);
  font-size: 13px;
}

.lk-launch-empty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.lk-launch-empty-grid p {
  margin-bottom: 0;
  color: var(--muted, #667085);
  line-height: 1.6;
}

.lk-launch-video-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: center;
}

.lk-launch-video-note strong {
  grid-row: span 2;
  font-size: 28px;
}

.lk-launch-video-note small {
  color: var(--muted, #667085);
}

@media (max-width: 820px) {
  .lk-launch-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .lk-launch-header {
    align-items: flex-start;
  }

  .lk-launch-score {
    flex-basis: 88px;
    width: 88px;
  }

  .lk-launch-score strong {
    font-size: 24px;
  }

  .lk-launch-metrics,
  .lk-launch-empty-grid {
    grid-template-columns: 1fr;
  }
}

/* LANGKAH KUDA — GERBANG MUTU MEJA REDAKSI 2E-B3B */
.lk-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lk-quality-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 16px;
  background: rgba(100, 116, 139, .05);
}

.lk-quality-box > header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.lk-quality-box > header > div {
  display: grid;
  gap: 4px;
}

.lk-quality-eyebrow {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-quality-word-count {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .12);
  color: var(--muted, #667085);
  font-size: 12px;
  white-space: nowrap;
}

.lk-quality-blocked {
  border-color: rgba(220, 38, 38, .27);
  background: rgba(220, 38, 38, .065);
}

.lk-quality-warning {
  border-color: rgba(217, 119, 6, .29);
  background: rgba(217, 119, 6, .07);
}

.lk-quality-ready {
  border-color: rgba(5, 150, 105, .27);
  background: rgba(5, 150, 105, .07);
}

.lk-quality-section {
  margin-top: 14px;
}

.lk-quality-section > b {
  font-size: 13px;
}

.lk-quality-section ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.lk-quality-section li {
  display: grid;
  grid-template-columns: minmax(110px, .32fr) 1fr;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 116, 139, .13);
}

.lk-quality-section li strong {
  font-size: 13px;
}

.lk-quality-section li span {
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.5;
}

.lk-quality-ready-copy {
  margin: 12px 0 0;
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.55;
}

.lk-quality-confirm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(217, 119, 6, .3);
  border-radius: 12px;
  background: rgba(217, 119, 6, .07);
  cursor: pointer;
}

.lk-quality-confirm input {
  margin-top: 3px;
}

.lk-quality-confirm span {
  font-size: 12px;
  line-height: 1.5;
}

.redaksi-form option:disabled {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .lk-quality-box > header {
    flex-direction: column;
  }

  .lk-quality-section li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* LANGKAH KUDA — PERENCANA PELUNCURAN 2E-B4B-2 */
.lk-planner-hero {
  margin-bottom: 26px;
}

.lk-planner-packages {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  padding-bottom: 5px;
  overflow-x: auto;
}

.lk-planner-packages a {
  flex: 0 0 min(300px, 82vw);
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 17px;
  background: var(--card, #fff);
  color: inherit;
  text-decoration: none;
}

.lk-planner-packages a.is-active {
  border-color: rgba(111, 38, 61, .48);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.lk-planner-packages span,
.lk-planner-packages small {
  color: var(--muted, #667085);
  font-size: 12px;
}

.lk-planner-package-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 26px 0 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      rgba(111, 38, 61, .08),
      rgba(16, 185, 129, .06)
    ),
    var(--card, #fff);
}

.lk-planner-package-head h2 {
  margin: 13px 0 7px;
  font-size: clamp(28px, 5vw, 48px);
}

.lk-planner-package-head p {
  margin: 0;
  color: var(--muted, #667085);
}

.lk-planner-package-note {
  max-width: 760px;
  margin-top: 14px !important;
  line-height: 1.65;
}

.lk-planner-progress-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lk-planner-progress-grid article {
  padding: 17px;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 17px;
  background: var(--card, #fff);
}

.lk-planner-progress-grid header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lk-planner-progress-grid header span {
  color: var(--muted, #667085);
  font-size: 13px;
}

.lk-planner-progress {
  height: 8px;
  margin: 15px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100, 116, 139, .15);
}

.lk-planner-progress i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: #6f263d;
}

.lk-planner-progress.is-published i {
  background: #059669;
}

.lk-planner-progress.is-featured i {
  background: #d97706;
}

.lk-planner-progress-grid small {
  color: var(--muted, #667085);
}

.lk-planner-diversity {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 15px 0 22px;
}

.lk-planner-diversity div {
  display: grid;
  gap: 3px;
  padding: 15px 17px;
  border-radius: 15px;
  background: rgba(100, 116, 139, .07);
}

.lk-planner-diversity strong {
  font-size: 25px;
}

.lk-planner-diversity span {
  font-weight: 750;
}

.lk-planner-diversity small {
  color: var(--muted, #667085);
}

.lk-planner-launch-ready {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 22px 0;
  padding: 20px;
  border: 1px solid rgba(5, 150, 105, .28);
  border-radius: 18px;
  background: rgba(5, 150, 105, .08);
}

.lk-planner-launch-ready > span {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font-size: 20px;
}

.lk-planner-launch-ready p {
  margin: 4px 0 0;
  color: var(--muted, #667085);
}

.lk-planner-recommendations {
  margin: 15px 0 0;
  padding-left: 22px;
}

.lk-planner-recommendations li {
  line-height: 1.6;
}

.lk-planner-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 24px 0 18px;
  padding: 16px;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 17px;
  background: var(--card, #fff);
}

.lk-planner-filter label {
  display: grid;
  gap: 6px;
}

.lk-planner-filter label span {
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 750;
}

.lk-planner-filter select {
  min-width: 170px;
}

.lk-planner-filter > small {
  margin-left: auto;
  color: var(--muted, #667085);
}

.lk-planner-board {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lk-planner-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(100, 116, 139, .19);
  border-radius: 20px;
  background: var(--card, #fff);
}

.lk-planner-card.is-overdue {
  border-color: rgba(220, 38, 38, .36);
  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, .05),
      transparent 45%
    ),
    var(--card, #fff);
}

.lk-planner-card > header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.lk-planner-card > header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.lk-planner-slot-number {
  font-family: "Space Mono", monospace;
  font-size: 28px;
  font-weight: 800;
}

.lk-planner-priority {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .11);
  font-size: 11px;
  font-weight: 800;
}

.lk-planner-priority.priority-tinggi {
  background: rgba(220, 38, 38, .11);
}

.lk-planner-priority.priority-rendah {
  background: rgba(5, 150, 105, .1);
}

.lk-planner-card-main h3 {
  margin: 19px 0 8px;
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.1;
}

.lk-planner-linked,
.lk-planner-unlinked {
  display: inline-flex;
  margin-bottom: 16px;
  font-size: 12px;
}

.lk-planner-unlinked {
  color: var(--muted, #667085);
}

.lk-planner-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.lk-planner-card dl div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
}

.lk-planner-card dt {
  color: var(--muted, #667085);
  font-size: 12px;
}

.lk-planner-card dd {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.lk-planner-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.lk-planner-topics span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(111, 38, 61, .08);
  font-size: 11px;
}

.lk-planner-featured {
  display: inline-flex;
  margin-top: 15px;
  color: #b45309;
  font-size: 12px;
  font-weight: 850;
}

.lk-planner-overdue {
  margin: 15px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(220, 38, 38, .09);
  font-size: 12px;
  font-weight: 750;
}

.lk-planner-card > footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(100, 116, 139, .14);
}

@media (max-width: 940px) {
  .lk-planner-progress-grid,
  .lk-planner-diversity {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .lk-planner-package-head {
    flex-direction: column;
  }

  .lk-planner-board {
    grid-template-columns: 1fr;
  }

  .lk-planner-filter > small {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .lk-planner-progress-grid,
  .lk-planner-diversity {
    grid-template-columns: 1fr;
  }

  .lk-planner-filter label,
  .lk-planner-filter select {
    width: 100%;
  }
}

/* LANGKAH KUDA — PLANNER FORM PREMIUM 2E-B4B-UI */
.lk-planner-form-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 64px;
}

.lk-planner-form-hero {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
  margin-bottom: 28px;
  padding: clamp(28px, 5vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(84, 110, 255, .15),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .92),
      rgba(245, 247, 255, .78)
    );
  box-shadow: 0 28px 70px rgba(15, 23, 42, .08);
}

.lk-planner-form-hero > div:first-child {
  max-width: 760px;
}

.lk-planner-form-hero h1 {
  max-width: 820px;
  margin: 10px 0 14px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .96;
  letter-spacing: -.045em;
}

.lk-planner-form-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted, #667085);
  font-size: 16px;
  line-height: 1.7;
}

.lk-planner-back {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--muted, #667085);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.lk-planner-back:hover {
  color: inherit;
  transform: translateX(-3px);
}

.lk-planner-form-hero-mark {
  flex: 0 0 auto;
  display: grid;
  width: 132px;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 26px;
  background: rgba(255, 255, 255, .66);
  text-align: center;
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

.lk-planner-form-hero-mark span {
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.lk-planner-form-hero-mark small {
  margin-top: 8px;
  color: var(--muted, #667085);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lk-planner-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}

.lk-planner-form-main,
.lk-planner-form-aside {
  min-width: 0;
}

.lk-planner-form-main {
  display: grid;
  gap: 16px;
}

.lk-planner-form-section {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 22px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .045);
  backdrop-filter: blur(14px);
}

.lk-planner-section-heading {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 25px;
}

.lk-planner-section-heading > span {
  display: grid;
  flex: 0 0 35px;
  width: 35px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 11px;
  background: rgba(111, 38, 61, .09);
  color: #6f263d;
  font-size: 11px;
  font-weight: 900;
}

.lk-planner-section-heading h2 {
  margin: 0 0 5px;
  font-size: 21px;
  letter-spacing: -.02em;
}

.lk-planner-section-heading p {
  margin: 0;
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.55;
}

.lk-planner-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lk-planner-field + .lk-planner-field {
  margin-top: 18px;
}

.lk-planner-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.lk-planner-field-grid .lk-planner-field + .lk-planner-field {
  margin-top: 0;
}

.lk-planner-field-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lk-planner-field label,
.lk-planner-field-label {
  color: #493126;
  font-size: 13px;
  font-weight: 800;
}

.lk-planner-field label strong {
  color: #c0392b;
}

.lk-planner-field input:not([type="checkbox"]):not([type="radio"]),
.lk-planner-field select,
.lk-planner-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(100, 116, 139, .27);
  border-radius: 13px;
  outline: none;
  background: rgba(255, 255, 255, .88);
  color: #493126;
  font: inherit;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.lk-planner-field textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.65;
}

.lk-planner-field input:focus,
.lk-planner-field select:focus,
.lk-planner-field textarea:focus {
  border-color: rgba(48, 70, 197, .66);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(48, 70, 197, .09);
}

.lk-planner-field small {
  color: var(--muted, #667085);
  font-size: 11px;
  line-height: 1.55;
}

.lk-planner-field-error {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(192, 57, 43, .08);
  color: #a93226;
  font-size: 12px;
  font-weight: 700;
}

.lk-planner-number-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, .27);
  border-radius: 13px;
  background: rgba(255, 255, 255, .88);
}

.lk-planner-number-control input {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lk-planner-number-control span {
  padding: 0 14px;
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 750;
}

.lk-planner-form-aside {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 14px;
}

.lk-planner-form-summary {
  padding: 27px;
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 255, 255, .13),
      transparent 34%
    ),
    linear-gradient(145deg, #2b1a16, #4d1728);
  color: #fff;
  box-shadow: 0 26px 60px rgba(43, 26, 22, .2);
}

.lk-planner-form-summary h2 {
  margin: 10px 0 12px;
  font-size: 28px;
  letter-spacing: -.03em;
}

.lk-planner-form-summary p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.65;
}

.lk-planner-form-summary ul {
  display: grid;
  gap: 13px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.lk-planner-form-summary li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.lk-planner-form-summary li span {
  display: grid;
  width: 28px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 850;
}

.lk-planner-form-actions {
  display: grid;
  gap: 10px;
  padding: 17px;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
}

.lk-planner-form-actions .tombol-isi,
.lk-planner-form-actions .tombol-garis {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 48px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 17px;
  border-radius: 13px;
  font-size: 13px;
  text-decoration: none;
}

.lk-planner-form-actions .tombol-isi {
  border: 0;
  cursor: pointer;
}

.lk-planner-form-actions .tombol-isi b {
  font-size: 18px;
  transition: transform .2s ease;
}

.lk-planner-form-actions .tombol-isi:hover b {
  transform: translateX(4px);
}

.lk-planner-form-actions > small {
  padding: 5px 7px 0;
  color: var(--muted, #667085);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.lk-planner-form-alert {
  padding: 15px 17px;
  border: 1px solid rgba(192, 57, 43, .2);
  border-radius: 14px;
  background: rgba(192, 57, 43, .07);
  color: #922b21;
}

.lk-planner-form-alert p {
  margin: 0;
}

.lk-planner-checkbox-list {
  max-height: 245px;
  overflow-y: auto;
  padding: 13px 15px;
  border: 1px solid rgba(100, 116, 139, .22);
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
}

.lk-planner-checkbox-list > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.lk-planner-checkbox-list label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 4px;
  font-weight: 600;
}

.lk-planner-checkbox-list input {
  margin-top: 2px;
}

.lk-planner-feature-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 15px;
  border: 1px solid rgba(217, 119, 6, .24);
  border-radius: 14px;
  background: rgba(217, 119, 6, .06);
  cursor: pointer;
}

.lk-planner-feature-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.lk-planner-feature-toggle span {
  display: grid;
  gap: 3px;
}

.lk-planner-feature-toggle small {
  color: var(--muted, #667085);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.lk-planner-slot-summary {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
}

.lk-planner-slot-summary div {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .11);
}

.lk-planner-slot-summary dt {
  color: rgba(255, 255, 255, .52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-planner-slot-summary dd {
  margin: 4px 0 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .lk-planner-form-shell {
    grid-template-columns: 1fr;
  }

  .lk-planner-form-aside {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 660px) {
  .lk-planner-form-page {
    width: min(100% - 20px, 1180px);
    padding-top: 10px;
  }

  .lk-planner-form-hero {
    align-items: flex-start;
    padding: 25px 21px;
  }

  .lk-planner-form-hero h1 {
    font-size: 41px;
  }

  .lk-planner-form-hero-mark {
    display: none;
  }

  .lk-planner-form-shell,
  .lk-planner-form-main {
    gap: 12px;
  }

  .lk-planner-form-section {
    padding: 21px 17px;
    border-radius: 18px;
  }

  .lk-planner-field-grid,
  .lk-planner-field-grid-three,
  .lk-planner-form-aside {
    grid-template-columns: 1fr;
  }

  .lk-planner-checkbox-list > div {
    grid-template-columns: 1fr;
  }
}

/* LANGKAH KUDA — TUGAS REDAKSI 2E-B5B */
.lk-assignment-section {
  margin: 34px 0 42px;
}

.lk-assignment-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 17px;
  padding: 26px 28px;
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(79, 70, 229, .16),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .92),
      rgba(244, 247, 255, .84)
    );
}

.lk-assignment-head h2 {
  margin: 7px 0 5px;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -.04em;
}

.lk-assignment-head p {
  margin: 0;
  color: var(--muted, #667085);
}

.lk-assignment-count {
  display: grid;
  width: 66px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 20px;
  background: #4d1728;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 800;
}

.lk-assignment-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.lk-assignment-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: 21px;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 21px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .05);
}

.lk-assignment-card.is-new {
  border-color: rgba(79, 70, 229, .38);
  box-shadow:
    0 20px 52px rgba(79, 70, 229, .1);
}

.lk-assignment-card.is-overdue {
  border-color: rgba(220, 38, 38, .32);
}

.lk-assignment-card > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.lk-assignment-card > header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lk-assignment-new {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(111, 38, 61, .11);
  color: #6f263d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lk-assignment-body {
  padding: 21px 0;
}

.lk-assignment-package {
  color: var(--muted, #667085);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lk-assignment-body h3 {
  margin: 9px 0 18px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.lk-assignment-body dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}

.lk-assignment-body dl div {
  padding: 12px;
  border-radius: 12px;
  background: rgba(100, 116, 139, .065);
}

.lk-assignment-body dt {
  color: var(--muted, #667085);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.lk-assignment-body dd {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 750;
}

.lk-assignment-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.lk-assignment-topics span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(111, 38, 61, .08);
  font-size: 10px;
  font-weight: 700;
}

.lk-assignment-body blockquote {
  margin: 15px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #6f263d;
  border-radius: 0 11px 11px 0;
  background: rgba(111, 38, 61, .055);
  color: var(--muted, #667085);
  font-size: 12px;
  line-height: 1.6;
}

.lk-assignment-overdue,
.lk-assignment-warning {
  margin: 15px 0 0;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
}

.lk-assignment-overdue {
  background: rgba(220, 38, 38, .08);
  color: #b42318;
}

.lk-assignment-warning {
  background: rgba(217, 119, 6, .09);
  color: #92400e;
}

.lk-assignment-card > footer {
  padding-top: 15px;
  border-top: 1px solid rgba(100, 116, 139, .13);
}

.lk-assignment-card > footer form,
.lk-assignment-card > footer button {
  width: 100%;
}

.lk-assignment-card > footer .tombol-isi {
  display: flex;
  min-height: 47px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.lk-assignment-card > footer button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .lk-assignment-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .lk-assignment-head {
    align-items: flex-start;
    padding: 22px 19px;
  }

  .lk-assignment-count {
    width: 52px;
    border-radius: 15px;
    font-size: 22px;
  }

  .lk-assignment-body dl {
    grid-template-columns: 1fr;
  }
}

/* LANGKAH KUDA — STATUS TERBIT OTOMATIS SLOT */
.lk-planner-status-help {
  display: block;
  margin-top: 8px;
  color: var(--muted, #667085);
  font-size: 11px;
  line-height: 1.55;
}

.lk-planner-article-state {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(79, 70, 229, .15);
  border-radius: 11px;
  background: rgba(111, 38, 61, .055);
  font-size: 11px;
}

.lk-planner-article-state span {
  color: var(--muted, #667085);
}

.lk-planner-article-state strong {
  color: #4d1728;
  text-align: right;
}

.lk-planner-article-state.is-empty {
  border-color: rgba(217, 119, 6, .18);
  background: rgba(217, 119, 6, .055);
}

.lk-planner-article-state.is-empty strong {
  color: #92400e;
}

/* LANGKAH KUDA — STATUS TERBIT OTOMATIS SLOT */
.lk-planner-status-help {
  display: block;
  margin-top: 8px;
  color: var(--muted, #667085);
  font-size: 11px;
  line-height: 1.55;
}

.lk-planner-article-state {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(79, 70, 229, .15);
  border-radius: 11px;
  background: rgba(111, 38, 61, .055);
  font-size: 11px;
}

.lk-planner-article-state span {
  color: var(--muted, #667085);
}

.lk-planner-article-state strong {
  color: #4d1728;
  text-align: right;
}

.lk-planner-article-state.is-empty {
  border-color: rgba(217, 119, 6, .18);
  background: rgba(217, 119, 6, .055);
}

.lk-planner-article-state.is-empty strong {
  color: #92400e;
}


/* =========================================================
   LANGKAH KUDA — ARTICLE RESPONSIVE RECOVERY 2E-C3C-2
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

body,
main,
.wrap,
.masthead,
.mast-top,
.nav-kategori,
.layout-artikel-sidebar,
.sidebar-populer-artikel,
.kolom-artikel-utama {
  min-width: 0;
}

.layout-artikel-sidebar {
  max-width: 100%;
}

.kolom-artikel-utama > * {
  min-width: 0;
}

.artikel-head,
.gambar-utama,
.isi-artikel,
.apresiasi-artikel,
.komentar-blok,
.terkait,
.paywall {
  max-width: 100%;
}

.isi-artikel img,
.isi-artikel video,
.isi-artikel iframe,
.gambar-utama img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 920px) {
  .masthead .nav-kategori {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .masthead .nav-kategori > a,
  .masthead .nav-kategori > details {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .layout-artikel-sidebar {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    flex-direction: column;
    gap: 0;
  }

  .kolom-artikel-utama {
    order: 0;
    width: 100%;
  }

  .sidebar-populer-artikel {
    order: 1;
    width: 100%;
    padding-top: 54px;
  }

  .sidebar-populer-sticky {
    position: static;
  }
}

@media (max-width: 640px) {
  main.wrap {
    width: 100%;
    max-width: 100%;
    padding:
      18px
      14px
      48px;
  }

  .breaking-strip .wrap {
    padding-inline: 12px;
  }

  .mast-top-v2 {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    min-height: 72px;
    gap: 10px;
    padding:
      12px
      14px;
  }

  .mobile-menu-btn {
    grid-column: 1;
    grid-row: 1;
  }

  .brand-v2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .brand-v2 svg {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .brand-v2 b {
    overflow: hidden;
    font-size: clamp(20px, 6.4vw, 25px);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .brand-v2 small {
    margin-top: 6px;
    font-size: 7px;
  }

  .masthead .nav-kategori {
    margin-inline: 0;
    padding-inline: 10px;
  }

  .rubrik-nav a,
  .menu-topik summary {
    padding:
      9px
      11px;
    font-size: 10px;
  }

  .layout-artikel-sidebar {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .kolom-artikel-utama {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .artikel-head {
    width: 100%;
    margin-bottom: 22px;
  }

  .artikel-head h1 {
    overflow-wrap: anywhere;
    font-size: clamp(31px, 9.5vw, 42px);
    line-height: 1.07;
  }

  .artikel-head .byline {
    line-height: 1.7;
  }

  .ringkasan-artikel {
    max-width: 100%;
  }

  .gambar-utama {
    width: 100%;
    margin-bottom: 26px;
  }

  .isi-artikel {
    width: 100%;
    font-size: 18px;
    line-height: 1.72;
    overflow-wrap: anywhere;
  }

  .sidebar-populer-artikel {
    width: 100%;
    max-width: 100%;
    padding:
      46px
      0
      0;
  }

  .blok-sidebar-populer {
    max-width: 100%;
    overflow: hidden;
  }

  .daftar-sidebar-populer,
  .chip-sidebar-populer,
  .daftar-penulis-populer {
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 390px) {
  main.wrap {
    padding-inline: 12px;
  }

  .artikel-head h1 {
    font-size: 34px;
  }

  .brand-v2 b {
    font-size: 20px;
  }
}


/* =========================================================
   LANGKAH KUDA — STICKY MASTHEAD & TOPIC RAIL 2E-C3C-3
   ========================================================= */

html {
  scroll-padding-top: 142px;
}

.masthead.masthead-v2 {
  position: sticky;
  top: 0;
  z-index: 1200;

  width: 100%;

  overflow: visible;

  background: var(--surface);

  box-shadow:
    0 7px 18px
    color-mix(
      in srgb,
      var(--ink) 10%,
      transparent
    );
}

.nav-kategori {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto
    auto;

  align-items: stretch;

  width: 100%;
  max-width: var(--maxw);

  gap: 0;

  overflow: visible !important;
}

.nav-kategori-scroll {
  display: flex;

  min-width: 0;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.nav-kategori-scroll::-webkit-scrollbar {
  display: none;
}

.nav-kategori-scroll > a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.nav-kategori > .menu-topik,
.nav-kategori > .nav-utility {
  flex: 0 0 auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.nav-kategori > .nav-utility {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.nav-kategori > .menu-topik > summary {
  display: flex;
  height: 100%;
  align-items: center;
}

.menu-topik-mega .isi-menu-topik {
  right: 0;
  left: auto;

  width: min(
    560px,
    calc(100vw - 24px)
  );

  min-width: 0;
  max-height: min(520px, 62vh);

  overflow-y: auto;
}

.mast-mobile-extra {
  display: none;
}

@media (max-width: 920px) {
  html {
    scroll-padding-top: 126px;
  }

  .nav-kategori {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding-inline:
      10px
      0;
  }

  .nav-kategori-scroll {
    position: relative;

    padding-right: 22px;

    -webkit-mask-image:
      linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 26px),
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 26px),
        transparent 100%
      );
  }

  .nav-kategori > .nav-utility {
    display: none;
  }

  .menu-topik-mega {
    position: relative;
    z-index: 4;
  }

  .mast-mobile-extra {
    display: block;
  }
}

@media (max-width: 860px) {
  .menu-open .mast-links-v2 {
    top: calc(100% + 1px);

    max-height:
      calc(100vh - 132px);

    overflow-y: auto;

    box-shadow:
      0 20px 45px
      rgba(0, 0, 0, .2);
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 116px;
  }

  .masthead.masthead-v2 {
    box-shadow:
      0 5px 14px
      color-mix(
        in srgb,
        var(--ink) 12%,
        transparent
      );
  }

  .nav-kategori {
    padding-left: 8px;
  }

  .nav-kategori-scroll {
    padding-right: 20px;
  }

  .nav-kategori-scroll > a,
  .nav-kategori > .menu-topik > summary {
    min-height: 42px;
  }

  .menu-topik-mega .isi-menu-topik {
    grid-template-columns: 1fr;

    width:
      calc(100vw - 24px);

    max-height:
      calc(100vh - 145px);
  }
}

@media (max-width: 390px) {
  .nav-kategori-scroll > a,
  .nav-kategori > .menu-topik > summary {
    padding-inline: 10px;
    font-size: 9px;
  }
}


/* =========================================================
   LANGKAH KUDA — STICKY & TOPIC MENU FIX 2E-C3C-4
   ========================================================= */

.masthead.masthead-v2 {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;

  overflow: visible !important;
  isolation: isolate;
}

.masthead.masthead-v2,
.masthead.masthead-v2 .wrap,
.masthead.masthead-v2 .nav-kategori {
  overflow-y: visible !important;
}

.menu-topik-mega {
  position: relative;
  z-index: 5100;
}

.menu-topik-mega > summary {
  position: relative;
  z-index: 2;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.menu-topik-mega > .isi-menu-topik {
  display: none !important;

  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: auto;
  z-index: 5200;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transform: translateY(-5px);

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}

.menu-topik-mega[open] > .isi-menu-topik,
.menu-topik-mega.is-open > .isi-menu-topik {
  display: grid !important;

  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transform: translateY(0);
}

.menu-topik-mega[open] > summary {
  color: var(--accent);
  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      var(--surface)
    );
}

@media (max-width: 920px) {
  .menu-topik-mega > .isi-menu-topik {
    position: fixed;

    top: 118px;
    right: 12px;
    left: 12px;

    width: auto;
    max-width: none;
    max-height: calc(100vh - 138px);

    overflow-y: auto;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding: 12px;

    border: 1px solid var(--ink);
    background: var(--surface);

    box-shadow:
      0 20px 45px
      rgba(0, 0, 0, .22);
  }
}

@media (max-width: 640px) {
  .menu-topik-mega > .isi-menu-topik {
    top: 108px;

    right: 8px;
    left: 8px;

    max-height:
      calc(100vh - 122px);

    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-topik-mega > .isi-menu-topik {
    transition: none;
  }
}


/* I18N PUBLIC UI 3A-2A */
html[lang="en"] .mast-links-v2,
html[lang="es"] .mast-links-v2 { gap: clamp(7px, 1vw, 15px); }
html[lang="en"] .mast-links-v2 a,
html[lang="es"] .mast-links-v2 a { font-size: clamp(.72rem, .9vw, .88rem); }
html[lang="zh"] body {
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC",
    "Bricolage Grotesque", sans-serif;
}
html[lang="zh"] .lk-headline-content h2,
html[lang="zh"] .lk-newsroom-intro h1,
html[lang="zh"] .lk-join-hero h1 { letter-spacing: .01em; line-height: 1.12; }
@media (max-width: 1180px) {
  html[lang="en"] .mast-links-v2,
  html[lang="es"] .mast-links-v2 { gap: 8px; }
}

/* LANGUAGE SWITCHER VISIBLE 3A-2A2 */

.mast-links-v2 .pilih-bahasa.language-switcher {
  position: relative;
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 1px;
}

.mast-links-v2
.pilih-bahasa.language-switcher
> summary {
  min-width: 56px;
  min-height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;

  cursor: pointer;
  list-style: none;
  user-select: none;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.mast-links-v2
.pilih-bahasa.language-switcher
> summary::-webkit-details-marker {
  display: none;
}

.mast-links-v2
.pilih-bahasa.language-switcher
> summary:hover,
.mast-links-v2
.pilih-bahasa.language-switcher
> summary:focus-visible,
.mast-links-v2
.pilih-bahasa.language-switcher[open]
> summary {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}

.lang-current-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.lang-current-caret {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  transition: transform .16s ease;
}

.language-switcher[open] .lang-current-caret {
  transform: rotate(180deg);
}

.mast-links-v2
.pilih-bahasa.language-switcher
.language-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 9999;

  width: max-content;
  min-width: 215px;
  padding: 6px;

  display: flex;
  flex-direction: column;
  gap: 2px;

  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .15);
}

.mast-links-v2
.pilih-bahasa.language-switcher
.lang-option {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;

  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.mast-links-v2
.pilih-bahasa.language-switcher
.lang-option:hover,
.mast-links-v2
.pilih-bahasa.language-switcher
.lang-option:focus-visible {
  background: rgba(0, 0, 0, .07);
  color: var(--ink);
  outline: 1px solid var(--ink);
}

.mast-links-v2
.pilih-bahasa.language-switcher
.lang-option.aktif {
  background: var(--ink);
  color: var(--bg);
}

.lang-option-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}

.lang-option.aktif .lang-option-code {
  color: #ffd36a;
}

.lang-option-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}


/* Desktop menengah */
@media (max-width: 1180px) {
  .mast-links-v2
  .pilih-bahasa.language-switcher
  > summary {
    min-width: 50px;
    padding-inline: 8px;
  }
}


/* Menu versi HP/tablet */
@media (max-width: 860px) {
  .menu-open
  .mast-links-v2
  .pilih-bahasa.language-switcher {
    width: 100%;
    margin: 4px 0 0;
  }

  .menu-open
  .mast-links-v2
  .pilih-bahasa.language-switcher
  > summary {
    width: 100%;
    justify-content: space-between;
    padding-inline: 14px;
  }

  .menu-open
  .mast-links-v2
  .pilih-bahasa.language-switcher
  .language-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    box-shadow: none;
  }
}

/* LANGUAGE SWITCHER LAYER FIX 3A-2A3 */

/*
 * Masthead dan bar akun harus berada di atas navigasi kategori
 * dan seluruh isi halaman ketika pemilih bahasa dibuka.
 */
.masthead.masthead-v2 {
  position: relative;
  z-index: 4000;
  overflow: visible !important;
}

.masthead.masthead-v2 > .wrap,
.mast-top.mast-top-v2 {
  position: relative;
  overflow: visible !important;
}

.mast-top.mast-top-v2 {
  z-index: 4300;
}

.mast-links.mast-links-v2 {
  position: relative;
  z-index: 4500;
  overflow: visible !important;
}

/*
 * Details yang sedang terbuka mendapat layer tertinggi
 * dalam struktur masthead.
 */
.mast-links-v2
.pilih-bahasa.language-switcher {
  position: relative;
  z-index: 4700;
  overflow: visible !important;
}

.mast-links-v2
.pilih-bahasa.language-switcher[open] {
  z-index: 6000;
}

.mast-links-v2
.pilih-bahasa.language-switcher
.language-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  left: auto;

  z-index: 6500 !important;
  overflow: visible;

  isolation: isolate;
  transform: translateZ(0);
}

/*
 * Bar kategori tetap berada di bawah panel bahasa.
 */
.masthead.masthead-v2
.rubrik-nav.nav-kategori {
  position: relative;
  z-index: 100;
}

/*
 * Isi halaman tidak boleh menimpa dropdown.
 */
body > main,
main.wrap,
.lk-site-footer {
  position: relative;
  z-index: 0;
}

/*
 * Bayangan dipertegas agar dropdown tampak benar-benar
 * berada di atas halaman.
 */
.mast-links-v2
.pilih-bahasa.language-switcher
.language-menu {
  box-shadow:
    0 18px 42px rgba(24, 15, 10, .24),
    7px 8px 0 rgba(0, 0, 0, .14);
}

/*
 * Cegah panel melewati layar pada laptop sempit.
 */
@media (min-width: 861px) {
  .mast-links-v2
  .pilih-bahasa.language-switcher
  .language-menu {
    max-width: min(280px, calc(100vw - 24px));
  }
}

/*
 * Pada HP, menu tetap berada dalam menu navigasi dan
 * tidak membutuhkan lapisan absolut.
 */
@media (max-width: 860px) {
  .menu-open
  .mast-links-v2
  .pilih-bahasa.language-switcher
  .language-menu {
    position: static;
    z-index: auto !important;
    transform: none;
  }
}

/* RESPONSIVE LANGUAGE HEADER 3A-2A4 */

/*
 * Pada tablet dan iPad, menu desktop terlalu panjang.
 * Bar atas dipadatkan menjadi:
 * hamburger | logo | bahasa | tema
 */
@media (max-width: 1180px) {
  .mast-top-v2 {
    position: relative;

    display: grid !important;
    grid-template-columns:
      44px
      minmax(0, 1fr)
      auto
      44px;

    align-items: center;
    gap: 9px;

    min-height: 76px;
    padding:
      11px
      14px;

    overflow: visible !important;
  }

  .mobile-menu-btn {
    grid-column: 1;
    grid-row: 1;

    width: 42px;
    height: 42px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 1px solid var(--ink);
    background: var(--surface);
    color: var(--ink);

    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu-btn:hover,
  .mobile-menu-btn:focus-visible {
    background: var(--ink);
    color: var(--bg);
    outline: none;
  }

  .brand-v2 {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    width: max-content;
    max-width: 100%;
  }

  .brand-v2 span {
    min-width: 0;
  }

  .brand-v2 b {
    display: block;
    overflow: hidden;

    max-width: 100%;

    font-size: clamp(
      21px,
      3.1vw,
      27px
    );

    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /*
   * Nav tidak membentuk kotak selama menu tertutup.
   * Hanya bahasa dan tombol tema yang tampil di header.
   */
  .mast-links-v2 {
    display: contents;
  }

  .mast-links-v2 > a,
  .mast-links-v2 > .write-pill,
  .mast-links-v2 > .account-pill,
  .mast-links-v2 > .mast-mobile-extra {
    display: none !important;
  }

  .mast-links-v2
  > .pilih-bahasa.language-switcher {
    grid-column: 3;
    grid-row: 1;

    display: inline-flex !important;
    align-self: center;
    justify-self: end;

    width: auto;
    margin: 0;

    z-index: 6800;
  }

  .mast-links-v2
  > .pilih-bahasa.language-switcher
  > summary {
    min-width: 54px;
    min-height: 42px;
    padding-inline: 9px;
  }

  .mast-links-v2 > .btn-tema {
    grid-column: 4;
    grid-row: 1;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    padding: 0;
  }

  /*
   * Menu hamburger.
   */
  body.menu-open .mast-links-v2 {
    position: absolute;
    top: calc(100% + 1px);
    right: 12px;
    left: 12px;
    z-index: 7000;

    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;

    max-height:
      calc(100vh - 116px);

    padding: 12px;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--surface);
    border: 1.5px solid var(--ink);

    box-shadow:
      0 22px 52px
      rgba(18, 10, 7, .26);
  }

  body.menu-open
  .mast-links-v2 > a,
  body.menu-open
  .mast-links-v2 > .write-pill,
  body.menu-open
  .mast-links-v2 > .account-pill,
  body.menu-open
  .mast-links-v2 > .mast-mobile-extra {
    display: flex !important;
    align-items: center;

    width: 100%;
    min-height: 44px;

    padding:
      10px
      12px !important;

    border-bottom:
      1px solid
      color-mix(
        in srgb,
        var(--ink) 15%,
        transparent
      );

    white-space: normal;
  }

  body.menu-open
  .mast-links-v2 > .write-pill {
    justify-content: center;
    margin-top: 5px;
  }

  body.menu-open
  .mast-links-v2 > .account-pill {
    border: 1px solid var(--ink);
  }

  /*
   * Pemilih bahasa dalam menu hamburger.
   */
  body.menu-open
  .mast-links-v2
  > .pilih-bahasa.language-switcher {
    display: flex !important;

    width: 100%;
    margin-top: 5px;
  }

  body.menu-open
  .mast-links-v2
  > .pilih-bahasa.language-switcher
  > summary {
    width: 100%;
    justify-content: space-between;
    padding-inline: 13px;
  }

  body.menu-open
  .pilih-bahasa.language-switcher
  .language-menu {
    position: static;

    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 5px;

    transform: none;

    box-shadow: none;
  }

  body.menu-open
  .mast-links-v2 > .btn-tema {
    display: flex !important;

    width: 100%;
    min-height: 42px;
    margin-top: 5px;

    border-radius: 0;
  }

  /*
   * Bar kategori tetap proporsional dan dapat digeser.
   */
  .masthead.masthead-v2
  .rubrik-nav.nav-kategori {
    z-index: 90;

    max-width: 100%;
    overflow: hidden;
  }

  .nav-kategori-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
}


/* Tablet kecil dan HP besar */
@media (max-width: 760px) {
  .mast-top-v2 {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      52px
      42px;

    gap: 7px;
    min-height: 70px;

    padding:
      10px
      10px;
  }

  .mobile-menu-btn,
  .mast-links-v2 > .btn-tema {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .brand-v2 svg {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .brand-v2 b {
    font-size: clamp(
      19px,
      5.4vw,
      24px
    );
  }

  .brand-v2 small {
    margin-top: 5px;
    font-size: 6.8px;
  }

  .mast-links-v2
  > .pilih-bahasa.language-switcher
  > summary {
    min-width: 50px;
    min-height: 40px;
    padding-inline: 7px;
  }
}


/* HP sempit */
@media (max-width: 480px) {
  .mast-top-v2 {
    grid-template-columns:
      39px
      minmax(0, 1fr)
      47px
      39px;

    gap: 5px;
    padding-inline: 7px;
  }

  .mobile-menu-btn,
  .mast-links-v2 > .btn-tema {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .brand-v2 {
    gap: 7px;
  }

  .brand-v2 svg {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .brand-v2 b {
    font-size: clamp(
      17px,
      5.3vw,
      21px
    );
  }

  .brand-v2 small {
    display: none;
  }

  .mast-links-v2
  > .pilih-bahasa.language-switcher
  > summary {
    min-width: 46px;
    min-height: 38px;
    padding-inline: 6px;
  }

  .lang-current-caret {
    display: none;
  }

  body.menu-open .mast-links-v2 {
    right: 7px;
    left: 7px;
    padding: 9px;
  }
}


/* HP sangat sempit */
@media (max-width: 360px) {
  .mast-top-v2 {
    grid-template-columns:
      37px
      minmax(0, 1fr)
      43px
      37px;
  }

  .brand-v2 svg {
    display: none;
  }

  .brand-v2 b {
    font-size: 17px;
  }
}

/* KOMENTAR_EDIT_SOFT_DELETE_3C2B */

.komentar-dihapus {
  color: var(--ink-soft);
  font-style: italic;
}

.aksi-pemilik-komentar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin:
    8px
    0
    4px
    54px;
}

.komentar-balasan .aksi-pemilik-komentar {
  margin-left: 46px;
}

.edit-komentar-detail > summary,
.tombol-hapus-komentar {
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.edit-komentar-detail > summary:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tombol-hapus-komentar:hover {
  color: #a1262d;
  border-bottom-color: #a1262d;
}

.form-hapus-komentar {
  display: inline;
  margin: 0;
}

.form-edit-komentar {
  display: grid;
  gap: 9px;
  width: min(520px, 72vw);
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.form-edit-komentar textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.tombol-komentar-mini {
  justify-self: start;
  padding: 8px 11px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .aksi-pemilik-komentar,
  .komentar-balasan .aksi-pemilik-komentar {
    margin-left: 0;
  }

  .form-edit-komentar {
    width: 100%;
  }
}

/* LAPORAN_KOMENTAR_3C2C1 */

.laporkan-komentar-detail {
  margin:
    7px
    0
    0
    54px;
}

.komentar-balasan .laporkan-komentar-detail {
  margin-left: 46px;
}

.laporkan-komentar-detail > summary {
  display: inline-block;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.laporkan-komentar-detail > summary::-webkit-details-marker {
  display: none;
}

.laporkan-komentar-detail > summary:hover {
  color: #a1262d;
}

.form-laporan-komentar {
  display: grid;
  gap: 12px;
  width: min(520px, 72vw);
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.form-laporan-komentar label {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.form-laporan-komentar select,
.form-laporan-komentar textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.form-laporan-komentar textarea {
  min-height: 82px;
  resize: vertical;
}

.tombol-laporan-komentar {
  justify-self: start;
  padding: 8px 11px;
  border: 1px solid #a1262d;
  background: transparent;
  color: #a1262d;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.tombol-laporan-komentar:hover {
  background: #a1262d;
  color: #fff;
}

@media (max-width: 640px) {
  .laporkan-komentar-detail,
  .komentar-balasan .laporkan-komentar-detail {
    margin-left: 0;
  }

  .form-laporan-komentar {
    width: 100%;
  }
}

/* KOMENTAR_MODERASI_PLACEHOLDER_3C2C3 */

.komentar-dimoderasi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-style: italic;
}

.komentar-dimoderasi::before {
  content: "◌";
  color: #a1262d;
  font-style: normal;
  font-weight: 800;
}

.komentar:has(.komentar-dimoderasi) {
  border-style: dashed;
}

.komentar:has(.komentar-dimoderasi)
.komentar-identitas {
  opacity: 0.72;
}