/* ===== Stream theme (biru gelap · putih · kuning) ===== */
:root{
  --bg:#0C0F13; --nav:#080A0D; --surface:#141920; --card:#1A2029; --line:#232A33;
  --text:#F3F5F7; --soft:#C3CAD2; --muted:#8B95A1;
  --accent:#F5E400; --on-accent:#0C0F13;
  --f:"Inter",system-ui,-apple-system,sans-serif;
  --pad:clamp(16px,2.6vw,40px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#1f2733,#0f1318)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0C0F13;font:700 .85rem var(--f);padding:.7rem 1.4rem;border-radius:6px;border:0;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent)}

/* Header */
.hd{position:sticky;top:0;z-index:50;background:var(--nav);border-bottom:1px solid #161b22}
.hd__in{display:flex;align-items:center;gap:2rem;height:56px;padding:0 var(--pad)}
.hd__logo img{height:30px;width:auto}
.hd__logo strong{font:800 1.2rem var(--f)}
.hd__nav{display:flex;gap:1.75rem;height:100%}
.hd__nav a{display:flex;align-items:center;font:700 .74rem var(--f);text-transform:uppercase;letter-spacing:.04em;color:#c9cfd6;border-bottom:2px solid transparent;padding-top:2px}
.hd__nav a:hover{color:#fff}
.hd__nav a.is-active{color:#fff;border-bottom-color:var(--accent)}
.hd__search-btn{display:flex;align-items:center;gap:.45rem;background:none;border:0;color:#c9cfd6;font:700 .74rem var(--f);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:0}
.hd__search-btn svg,.hd__burger svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hd__search-btn:hover{color:#fff}
.hd__burger{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.hd__burger svg{width:24px;height:24px}
.hd__search{display:none;padding:.75rem var(--pad) 1rem}
.search-open .hd__search{display:block}
.hd__search input{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:#fff;font:400 .95rem var(--f);padding:.7rem 1rem;outline:0}
.hd__search input:focus{border-color:var(--accent)}

.main{padding:0 var(--pad) 2rem;max-width:1600px;margin:0 auto}
.label{display:flex;align-items:center;gap:.55rem;margin:0;padding:1.1rem 0 1.25rem;font:700 .74rem var(--f);text-transform:uppercase;letter-spacing:.06em;color:#dfe3e8}
.label svg{width:15px;height:15px;fill:none;stroke:#dfe3e8;stroke-width:1.8;stroke-linejoin:round}
.label a:hover{color:var(--accent)}

/* Feature */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;margin-bottom:2.25rem}
.feature__img{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface)}
.feature__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.feature:hover .feature__img>img{transform:scale(1.03)}
.feature__mark{position:absolute;right:4%;top:6%;width:12%;max-width:80px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.45);display:block}
.feature__mark:empty{display:none}
.feature__mark img{display:block;width:100%;height:auto;border-radius:14px}
.feature__kick{margin:0 0 .6rem;font-size:.82rem;color:#d4d9de}
.feature__title{margin:0 0 .9rem;font:800 clamp(1.6rem,2.6vw,2.4rem)/1.15 var(--f);letter-spacing:-.015em}
.feature__title a:hover{color:var(--accent)}
.feature__ex{margin:0 0 1.5rem;color:var(--muted);max-width:520px}

/* Rows */
.row{margin-bottom:1.75rem}
.row__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.75rem}
.row__head h2{margin:0;font:700 1rem var(--f)}
.row__head a{font:600 .78rem var(--f);color:var(--muted)}
.row__head a:hover{color:var(--accent)}
.row__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,15.5vw,250px);gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin;scrollbar-color:#2a323d transparent}
.tile{scroll-snap-align:start;display:flex;flex-direction:column;gap:.45rem}
.tile__img{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface);outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.tile:hover .tile__img{outline-color:#fff}
.tile__img img{width:100%;height:100%;object-fit:cover}
.tile__badge{position:absolute;left:.45rem;top:.45rem;background:rgba(8,10,13,.85);color:#fff;font:700 .62rem var(--f);letter-spacing:.03em;padding:.22rem .45rem;border-radius:4px}
.tile__title{font:700 .82rem/1.3 var(--f);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__sub{font-size:.74rem;color:var(--muted)}

/* Sections & list */
.sec{padding-top:1.5rem}
.sec--tight{padding-top:.25rem}
.sec__head{margin-bottom:1rem;border-bottom:1px solid var(--line)}
.sec__head h2{display:inline-block;margin:0;padding-bottom:.65rem;border-bottom:2px solid var(--accent);margin-bottom:-1px;font:700 1rem var(--f)}
.list{display:flex;flex-direction:column}
.cd{display:grid;grid-template-columns:240px 1fr;gap:1.25rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:start}
.cd__img{display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface)}
.cd__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cd:hover .cd__img img{transform:scale(1.04)}
.cd__kick{margin:0 0 .35rem;font-size:.75rem;color:var(--muted)}
.cd__kick a{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cd__title{margin:0 0 .4rem;font:700 1.12rem/1.3 var(--f)}
.cd__title a:hover{color:var(--accent)}
.cd__ex{margin:0;color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{background:var(--surface);border-radius:8px;padding:3.5rem 1.5rem;text-align:center;margin-bottom:2rem}
.empty h3{margin:0 0 .3rem;font:700 1.2rem var(--f)}
.empty p{margin:0;color:var(--muted)}
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;font:700 .8rem var(--f)}
.pagination a{background:#fff;color:#0C0F13;padding:.55rem 1.1rem;border-radius:6px}
.pagination a:hover{background:var(--accent)}
.pagination .disabled{color:#4a535e;border:1px solid var(--line);padding:.55rem 1.1rem;border-radius:6px}
.pagination .current{color:var(--muted)}
.pagehead{padding:.25rem 0 1.75rem}
.pagehead h1{margin:0;font:800 clamp(1.8rem,3.5vw,2.6rem)/1.15 var(--f)}
.pagehead p{margin:.6rem 0 0;color:var(--muted);max-width:640px}

/* Article */
.art__title{margin:0 0 .8rem;font:800 clamp(1.8rem,3.4vw,2.7rem)/1.15 var(--f);letter-spacing:-.015em}
.art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0 0 1.5rem;color:var(--muted);font-size:.85rem}
.art__meta i{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.art__fig{margin:0 0 1.75rem}
.art__fig img{width:100%;border-radius:6px}
.art__lead{font:600 1.12rem/1.55 var(--f);color:#fff;margin:0 0 1.5rem;padding-left:1rem;border-left:3px solid var(--accent)}
.prose{font-size:1.04rem;line-height:1.8;color:#d6dce2}
.prose>*:first-child{margin-top:0}
.prose h2,.prose h3{color:#fff;line-height:1.3;margin:2rem 0 .75rem}
.prose h2{font-size:1.45rem;font-weight:800}.prose h3{font-size:1.2rem}
.prose strong{color:#fff}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:6px;margin:1.5rem 0}
.prose blockquote{margin:1.75rem 0;padding:1.1rem 1.35rem;border-radius:6px;background:var(--surface);border-left:3px solid var(--accent);color:#fff;font-weight:600}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li::marker{color:var(--accent)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;margin:1.5rem 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.prose th{background:var(--card);color:#fff;text-align:left;padding:.7rem .85rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--accent)}
.prose td{padding:.65rem .85rem;border-top:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2rem}
.tags a{background:var(--surface);padding:.35rem .8rem;border-radius:999px;font-size:.82rem;color:var(--soft)}
.tags a:hover{background:var(--accent);color:var(--on-accent)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.share span{font:700 .72rem var(--f);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:.3rem}
.share a{border:1px solid var(--line);padding:.4rem .9rem;border-radius:6px;font-size:.82rem;font-weight:600}
.share a:hover{border-color:#fff}
.cm{margin-top:2.5rem}
.cm h2{font:800 1.25rem var(--f);margin:0 0 .75rem}
.cm h2 span{color:var(--muted);font-weight:500}
.cm__it{padding:.9rem 0;border-bottom:1px solid var(--line)}
.cm__it p{margin:.15rem 0;color:var(--soft)}
.cm__who b{color:#fff}
.cm__who small{color:var(--muted);margin-left:.4rem}
.cm__form{background:var(--surface);border-radius:8px;padding:1.35rem;margin-top:1.25rem;display:flex;flex-direction:column;gap:.9rem}
.cm__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cm__form label{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;font-weight:600}
.cm__form small{color:var(--muted);font-weight:400}
.cm__form input,.cm__form textarea{font:400 .95rem var(--f);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.7rem .85rem;color:#fff}
.cm__form input:focus,.cm__form textarea:focus{outline:0;border-color:var(--accent)}
.cm__form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px}
.notice{background:rgba(245,228,0,.1);color:var(--accent);padding:.75rem 1rem;border-radius:6px}
.err{color:#ff6b6b;margin:0}

/* Footer */
.ft{background:var(--nav);border-top:1px solid #161b22;margin-top:2.5rem;padding:2.75rem var(--pad) 1.25rem}
.ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;max-width:1600px;margin:0 auto}
.ft__brand img{height:36px;width:auto}
.ft__slogan{font:800 1.05rem var(--f);color:#fff;margin:.9rem 0 .35rem}
.ft__desc{font-size:.86rem;color:var(--muted);max-width:420px;margin:0}
.ft h4{font:700 .72rem var(--f);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .85rem}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;color:var(--soft)}
.ft ul a:hover{color:#fff}
.ft__copy{max-width:1600px;margin:2rem auto 0;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* Responsive */
@media (max-width:1000px){
  .hd__in{gap:1rem}
  .hd__nav{display:none;position:absolute;left:0;right:0;top:56px;height:auto;flex-direction:column;gap:0;background:var(--nav);padding:.25rem var(--pad) 1rem;border-bottom:1px solid var(--line)}
  .menu-open .hd__nav{display:flex}
  .hd__nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .hd__nav a.is-active{border-bottom-color:var(--line);color:var(--accent)}
  .hd__search-btn{margin-left:auto}
  .hd__burger{display:block;margin-left:0}
  .feature{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hd__search-btn span{display:none}
  .row__track{grid-auto-columns:68%}
  .cd{grid-template-columns:120px 1fr;gap:.9rem}
  .cd__title{font-size:.98rem}
  .cd__ex{display:none}
  .cm__row{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
}

/* ===== Sidebar (komponen bersama) ===== */
.with-sb{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.75rem;align-items:start}
.sbw{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.sbw-box{background:var(--sb-bg);border:1px solid var(--sb-line);border-radius:var(--sb-r);padding:1.35rem 1.4rem}
.sbw-title{margin:0 0 1rem;font:var(--sb-title-font);color:var(--sb-title);text-transform:var(--sb-tt,none);letter-spacing:var(--sb-ls,0);border-bottom:1px solid var(--sb-line)}
.sbw-title span{display:inline-block;padding-bottom:.6rem;border-bottom:3px solid var(--sb-accent);margin-bottom:-1px}
.sbw-pop{list-style:none;margin:0;padding:0}
.sbw-pop li{display:flex;gap:.9rem;padding:.8rem 0;border-top:1px solid var(--sb-line)}
.sbw-pop li:first-child{border-top:0;padding-top:.1rem}
.sbw-no{font:700 1.3rem/1 var(--sb-num-font,inherit);color:var(--sb-accent);min-width:1.9rem}
.sbw-pop a{display:block;font-weight:600;font-size:.94rem;line-height:1.35;color:var(--sb-text)}
.sbw-pop small,.sbw-mini small{display:block;margin-top:.3rem;font-size:.75rem;color:var(--sb-muted)}
.sbw-list{display:flex;flex-direction:column;gap:.9rem}
.sbw-mini{display:grid;grid-template-columns:76px 1fr;gap:.85rem;align-items:center}
.sbw-mini img,.sbw-mini .ph{width:76px;height:60px;object-fit:cover;border-radius:var(--sb-thumb-r,6px)}
.sbw-mini b{font-size:.88rem;line-height:1.35;color:var(--sb-text);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbw-cats{list-style:none;margin:0;padding:0}
.sbw-cats a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.62rem 0;border-top:1px solid var(--sb-line);color:var(--sb-text);font-size:.93rem}
.sbw-cats li:first-child a{border-top:0;padding-top:.1rem}
.sbw-cats em{font-style:normal;font-size:.72rem;min-width:1.8rem;text-align:center;padding:.15rem .45rem;border-radius:999px;background:var(--sb-chip);color:var(--sb-muted)}
.sbw-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.sbw-tags a{font-size:.8rem;padding:.32rem .75rem;border-radius:999px;background:var(--sb-chip);color:var(--sb-text);transition:background .15s,color .15s}
.sbw-pop a:hover,.sbw-mini:hover b,.sbw-cats a:hover span{color:var(--sb-accent)}
.sbw-tags a:hover{background:var(--sb-accent);color:var(--sb-on-accent,#fff)}
@media (max-width:980px){.with-sb{grid-template-columns:1fr;gap:2.5rem}}
.sbw{--sb-bg:var(--surface);--sb-line:var(--line);--sb-r:8px;--sb-text:#fff;--sb-title:#fff;--sb-muted:var(--muted);--sb-accent:var(--accent);--sb-on-accent:var(--on-accent);--sb-chip:var(--card);--sb-title-font:700 .95rem var(--f);--sb-thumb-r:5px}
.with-sb{grid-template-columns:minmax(0,1fr) 330px}
@media (max-width:980px){.with-sb{grid-template-columns:1fr}}