/* ============================================================
   RuangGaming — stylesheet asli
   Tema gelap khas ruang gamer: dasar gelap, aksen jingga & toska,
   ikon SVG. Tanpa ikon emoji.
   ============================================================ */
:root{
  --bg:#0e121a;            /* dasar */
  --panel:#141b28;         /* kartu/panel */
  --panel2:#181f30;
  --line:#232c3f;          /* garis */
  --ink:#e9edf5;           /* teks utama */
  --soft:#9aa6ba;          /* teks redup */
  --mute:#66748c;
  --accent:#ff7a4d;        /* aksen oranye jingga */
  --accent-ink:#1a140f;
  --gold:#ffd166;
  --teal:#58d6cd;
  --danger:#ff5c57;
  --serif:"Georgia","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:14px;
  --max:1080px;
  --gutter:clamp(16px,4vw,28px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:not(.chip):hover{text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:rgba(255,122,77,.35)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrapper{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);padding-bottom:56px}
a.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:10px 16px;border-radius:10px;z-index:60;font-weight:700}
a.skip:focus{left:12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,18,26,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mast{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{flex:0 0 auto}
.w1{display:flex;flex-direction:column;line-height:1.05;font-weight:800;font-size:1.05rem;letter-spacing:.2px}
.w1 em{font-style:normal;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-top:3px}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{color:var(--soft);font-size:.9rem;font-weight:600;padding:7px 11px;border-radius:9px;text-decoration:none}
.nav a:hover{color:var(--ink);background:var(--panel)}
.nav .nav-cta{color:var(--accent)}
@media(max-width:680px){.nav a{padding:6px 8px;font-size:.82rem}}

/* ---------- generic kits ---------- */
a{} 
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);font-weight:800;padding:12px 20px;border-radius:11px;border:none;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 10px}
.role{color:var(--teal);font-weight:700;font-size:.72rem;letter-spacing:1.7px;text-transform:uppercase}
.lead{color:var(--soft);max-width:64ch;font-size:1.04rem;margin:10px 0 0}
.mute{color:var(--mute)}

/* ---------- page top (hero/index & list pages) ---------- */
main{padding-bottom:8px}
.pagehead{background:
  radial-gradient(38rem 22rem at 85% -12%,rgba(255,122,77,.16),transparent 62%),
  radial-gradient(30rem 18rem at -6% 0%,rgba(88,214,205,.14),transparent 60%),
  linear-gradient(180deg,#111824,#0e121a);
  border-bottom:1px solid var(--line);padding:58px 0 52px}
.pagehead h1{margin:4px 0 12px;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;font-weight:850;letter-spacing:-.6px;max-width:20ch}
.lede{color:var(--soft);max-width:60ch;font-size:1.08rem;margin:0}
.page-mast{padding:38px 0 22px;border-bottom:1px solid var(--line);margin-bottom:20px}
.page-mast h1{margin:6px 0 2px;font-size:clamp(1.7rem,3.6vw,2.4rem);letter-spacing:-.4px}
.page-mast .kicker{font-size:.82rem;color:var(--gold)}
.page-mast.author .ah{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.page-mast.author .ah h1{margin:0}
.page-mast.author .lead{max-width:58ch}

/* ---------- sections ---------- */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:44px 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.sechead h2{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.2px}
.sechead .more,.more{color:var(--soft);font-size:.88rem;text-decoration:none;font-weight:600}
.sechead .more:hover,.more:hover{color:var(--accent)}
.catalog{margin-top:10px}
.sechead:first-child{margin-top:28px}
.rows{padding:0;margin:0 0 10px;list-style:none;display:grid;gap:14px}
.row{display:grid;grid-template-columns:180px 1fr;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .08s}
.row:hover{border-color:var(--accent)}
.row .thumb{display:block;overflow:hidden}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.r2{padding:16px 18px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.r2 .t{font-size:1.08rem;font-weight:750;line-height:1.42;color:var(--ink);text-decoration:none}
.r2 .t:hover{color:var(--accent)}
.r2 .d{color:var(--soft);font-size:.9rem}
.r2 .d a{color:var(--teal);text-decoration:none}
@media(max-width:640px){.row{grid-template-columns:1fr}.row .thumb{aspect-ratio:16/7}.r2{padding:14px 16px}}
.coverimg{margin:6px 0 26px}
.frame{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.frame img{width:100%;height:auto}

/* ---------- topic cards ---------- */
.taggrid{padding:6px 0 8px}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tcard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none}
.tcard:hover{border-color:var(--accent);background:var(--panel2)}
.tcard .n-nowrap{font-weight:850;font-size:1.05rem;color:var(--ink);margin-right:auto}
.tcard .tsub{color:var(--soft);font-size:.88rem;line-height:1.45}
.tcard .cnt{font-family:var(--mono);font-size:.76rem;color:var(--gold);margin-top:auto}
.tsub{color:var(--soft)}
/* accent dots per category approximated by first-child nth-childs are set below */
.cnt,.cntl{font-family:var(--mono);font-size:.78rem;color:var(--gold);text-decoration:none}

/* ---------- author grid ---------- */
.author-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.acard{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.acard h3{margin:0 0 4px;font-size:1.1rem}
.acard h3 a{color:var(--ink);text-decoration:none}
.acard h3 a:hover{color:var(--accent)}
.acard p{color:var(--soft);font-size:.9rem;margin:10px 0 12px}
.cntl{font-family:var(--mono);font-size:.78rem;color:var(--gold);text-decoration:none}
.cntl:hover{color:var(--accent)}
.cgrid{display:grid;gap:14px}
.about-authors.home{padding:10px 0 52px}
.author-flow{grid-template-columns:1fr}
@media(min-width:820px){.author-flow{grid-template-columns:repeat(3,1fr)}}

/* avatar: pure text mark + gradient */
.avatar{--g1:#ff7a4d;--g2:#c2441f;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));color:#0b0e15;font-weight:850;font-size:1rem;letter-spacing:.5px}
.avatar.sm{width:46px;height:46px;font-size:.9rem}
.avatar.big{width:92px;height:92px;font-size:1.9rem}

/* byline (post meta) */
.byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--soft);font-size:.9rem;margin:6px 0 4px}
.byline .nm{font-weight:800;color:var(--ink);text-decoration:none}
.byline .nm:hover{color:var(--accent)}
.byline .sep{color:var(--mute)}
.byline .meta{color:var(--soft)}
.byline .role{display:block;margin-top:3px;color:var(--teal)}

/* chips (kategori/tag) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.chip{display:inline-flex;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--soft);font-family:var(--mono);font-size:.74rem;text-decoration:none;align-items:center;gap:6px}
.chip[href]:hover,.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- article view ---------- */
.prose{padding-top:34px}
article .post-head{border-bottom:1px solid var(--line);padding-bottom:14px}
.post-head h1{margin:10px 0 6px;font:800 clamp(1.7rem,3.9vw,2.4rem)/1.16 var(--sans);letter-spacing:-.5px;max-width:24ch}
.kicker{display:inline-block;color:var(--gold);font-family:var(--mono);font-size:.78rem;letter-spacing:1px;text-transform:uppercase;text-decoration:none;margin-bottom:2px}
.kicker:hover{color:var(--accent)}
.content{margin-top:4px;max-width:76ch}
.content p{color:#d7deea;margin:0 0 20px}
.content p:has(~p){}/*noop*/
.content h2{margin:38px 0 12px;font-size:1.45rem;letter-spacing:-.3px;color:var(--ink);scroll-margin-top:110px}
.content h3{margin:30px 0 10px;font-size:1.14rem;color:var(--gold);scroll-margin-top:110px}
.content blockquote{border-left:3px solid var(--accent);margin:24px 0;padding:4px 0 4px 22px;color:#c6d0df;font-style:italic}
.content blockquote p{margin:0;font-size:1.06rem}
.content ul,.content ol{margin:0 0 20px;padding-left:24px}
.content li{margin:6px 0}
.content strong{color:var(--ink)}
.related{margin-top:40px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:18px 20px}
.related .rh{margin:0 0 12px;font-size:1rem;letter-spacing:.2px;text-transform:uppercase;color:var(--teal)}
.related ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.related li{border-top:1px solid var(--line);padding-top:10px}
.related li:first-child{border-top:0;padding-top:0}
.related a{color:var(--ink);text-decoration:none;font-weight:650;line-height:1.4}
.related a:hover{color:var(--accent)}
.related .ru{display:block;color:var(--mute);font-size:.78rem;font-family:var(--mono)}
.authorbox{display:flex;gap:16px;padding:18px 0 8px;margin-top:6px}
.authorbox h4{margin:0 0 4px;font-size:1.06rem}
.authorbox h4 a{color:var(--ink);text-decoration:none}
.authorbox h4 em{font-style:normal;color:var(--teal);font-size:.85rem;font-weight:700;letter-spacing:.5px}
.authorbox p{color:var(--soft);font-size:.9rem;margin:0}
.pntags{color:var(--mute);font-family:var(--mono);font-size:.78rem;margin-top:24px}

/* archive (arsip) */
.arch-cat{margin:34px 0}
.ac-h{font-size:1.12rem;margin:0 0 12px;letter-spacing:.3px}
.ac-h a{color:var(--ink);text-decoration:none}
.ac-h a::before{content:"▸ ";color:var(--accent)}
.ac-h a:hover{color:var(--accent)}

/* legal & misc pages */
.legal .updated{color:var(--mute);font-family:var(--mono);font-size:.84rem;margin:22px 0 6px;border-top:1px solid var(--line);padding-top:14px}
.legal .content{max-width:72ch}
.page-mast + p{margin-top:22px}
.legalcopy.updated{margin-top:-8px}
.backlnk{margin:30px 0}

/* 404 + missing */
.missing{text-align:center;padding:80px 0 120px;display:flex;flex-direction:column;align-items:center;gap:14px}
.missing .big{margin:0;font:850 clamp(4.2rem,14vw,7.5rem)/0.95 var(--mono);color:var(--accent)}
.missing h1{margin:10px 0 0;font-size:1.5rem}
.missing p{color:var(--soft);max-width:44ch;margin:0}
.missing .herocta{justify-content:center;margin-top:10px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#0b0f16}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding:44px var(--gutter) 22px;max-width:var(--max);margin-inline:auto}
.fcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.fcol .brand{font-size:1.1rem}
.foottxt{color:var(--soft);font-size:.9rem;margin:12px 0 6px;max-width:30ch}
.f-contact{}
.fcol a{color:var(--soft);font-size:.92rem;text-decoration:none;width:fit-content}
.fcol a:hover{color:var(--accent)}
.fh{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;color:var(--teal);font-weight:700;margin:0 0 8px}
.f-social{display:flex;gap:10px;margin-top:6px}
.f-social a{color:var(--soft)}
.f-social a:hover{color:var(--accent)}
.bottom-bar{border-top:1px solid var(--line);padding:16px var(--gutter);max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mute);font-size:.82rem;font-family:var(--mono)}
.bottom-bar a{color:var(--mute);text-decoration:none}
.bottom-bar a:hover{color:var(--accent)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* feature (artikel unggulan) */
.featured{margin:34px auto 4px}
.fcard{display:grid;grid-template-columns:5fr 6fr;gap:26px;background:linear-gradient(160deg,#1c2436,#141b28);border:1px solid var(--line);border-radius:calc(var(--radius)+6px);overflow:hidden}
.fcard .fmask{display:block;position:relative}
.fcard .fmask img{width:100%;height:100%;object-fit:cover}
.featured .fd{padding:32px 34px 30px 4px;align-self:center;display:flex;flex-direction:column;gap:10px}
.flabel{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--teal);font-weight:700}
.fkick a{color:var(--gold);font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;text-decoration:none}
.fkick a:hover{color:var(--accent)}
.fd h2{margin:0;font-size:clamp(1.3rem,3vw,2rem);line-height:1.2;letter-spacing:-.4px}
.fd h2 a{color:var(--ink);text-decoration:none}
.fd h2 a:hover{color:var(--accent)}
.fd .ldek{color:var(--soft);font-size:1rem;margin:4px 0}
.fd .fby{color:var(--mute);font-size:.9rem;margin:0}
.fd .fby a{color:var(--teal);text-decoration:none}
.featured .btn{width:max-content;margin-top:6px}
@media(max-width:720px){.fcard{grid-template-columns:1fr}.fcard .fmask{aspect-ratio:16/8}.fcard .fd{padding:6px 24px 26px}.featured .fd{padding:2px 22px 26px}}
@media(max-width:900px){.fcard{grid-template-columns:1fr}.featured .fd{padding:8px 26px 26px}.fkick{color:var(--gold)}}

/* responsive type on small */
@media(max-width:560px){
  .mast{flex-wrap:wrap;padding:10px 0}
  .byline{margin-top:8px}
}