/* ============================================================
   Bayanaka — SEO static pages (News/Blog + product/keyword pages)
   Tema gelap konsisten dgn landing: navy #060E1B, aksen cyan #5AE2F7.
   Halaman STATIS (konten di HTML, crawlable). Dipakai semua halaman SEO.
   ============================================================ */
:root{
  --bg:#060E1B; --bg2:#0A1424; --surface:#0E1A2E; --surface2:#12203a;
  --border:#1c2c46; --text:#E6EDF5; --muted:#94A3B8; --heading:#F4F7FA;
  --accent:#5AE2F7; --accent2:#1B6EF5; --accent-ink:#04121b;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo","IBM Plex Sans",system-ui,sans-serif;color:var(--heading);line-height:1.15;letter-spacing:-.01em}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* --- Header / nav --- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,14,27,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;color:var(--heading)}
.brand:hover{text-decoration:none}
.brand .dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.main-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.main-nav a{color:var(--muted);font-size:14.5px;font-weight:500}
.main-nav a:hover{color:var(--accent);text-decoration:none}
.main-nav .cta{background:var(--accent);color:var(--accent-ink);padding:9px 16px;border-radius:999px;font-weight:700}
.main-nav .cta:hover{filter:brightness(1.08);text-decoration:none}

/* --- Breadcrumb --- */
.breadcrumb{font-size:13px;color:var(--muted);padding:18px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}

/* --- Page hero --- */
.page-hero{padding:38px 0 26px;border-bottom:1px solid var(--border);
  background:radial-gradient(1200px 380px at 50% -140px,rgba(27,110,245,.16),transparent 70%)}
.eyebrow{font-family:"IBM Plex Mono","Courier New",monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.page-hero h1{font-size:clamp(28px,4.4vw,46px);font-weight:800;margin:12px 0 10px;max-width:22ch}
.page-hero .lede{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:65ch;margin:0}
.meta-line{font-size:13px;color:var(--muted);margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tag{display:inline-block;font-size:11px;letter-spacing:.05em;background:rgba(90,226,247,.1);color:var(--accent);border:1px solid rgba(90,226,247,.28);padding:2px 10px;border-radius:999px}

/* --- Article body --- */
.article{padding:34px 0 10px;max-width:800px}
.article h2{font-size:clamp(21px,2.4vw,29px);margin:34px 0 12px}
.article h3{font-size:19px;margin:24px 0 8px;color:var(--accent)}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{margin:6px 0}
.article strong{color:var(--heading)}
.article blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 10px 10px 0;color:#cdd8e6}
.article a{border-bottom:1px solid rgba(90,226,247,.4)}
.article table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.article th,.article td{border:1px solid var(--border);padding:10px 12px;text-align:left}
.article th{background:var(--surface);color:var(--heading)}
.table-scroll{overflow-x:auto}
.key-facts{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin:22px 0}
.key-facts h3{margin-top:0}

/* --- Cards (news index / product grid / related) --- */
.section{padding:44px 0}
.section-head{margin-bottom:26px}
.section-head h2{font-size:clamp(22px,3vw,32px);margin:6px 0 8px}
.section-head p{color:var(--muted);margin:0;max-width:60ch}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(90,226,247,.5)}
.card a.card-link{color:inherit}
.card a.card-link:hover{text-decoration:none}
.card-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--surface2),#0a1730);position:relative;overflow:hidden}
.card-thumb .k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;color:rgba(230,237,245,.35);text-align:center;padding:16px;letter-spacing:.02em}
.card-body{padding:18px 20px;flex:1;display:flex;flex-direction:column}
.card-body .cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.card-body h3{font-size:18px;margin:8px 0 8px;color:var(--heading)}
.card-body p{font-size:14.5px;color:var(--muted);margin:0 0 14px;flex:1}
.card-body .more{font-size:14px;font-weight:600;color:var(--accent)}

/* --- Feature list (product pages) --- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:26px 0}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
.feature h3{margin:0 0 8px;font-size:17px;color:var(--heading)}
.feature p{margin:0;font-size:14.5px;color:var(--muted)}

/* --- CTA band --- */
.cta-band{background:linear-gradient(120deg,var(--accent2),#0b4fd0);border-radius:20px;padding:38px 36px;margin:46px 0;text-align:center}
.cta-band h2{color:#fff;margin:0 0 8px;font-size:clamp(22px,3vw,30px)}
.cta-band p{color:rgba(255,255,255,.9);margin:0 auto 20px;max-width:56ch}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:13px 28px;border-radius:999px;font-weight:700;font-size:15px}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);margin-left:8px}

/* --- Footer --- */
.site-footer{border-top:1px solid var(--border);background:var(--bg2);padding:40px 0 30px;margin-top:20px;font-size:14px}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.site-footer h4{color:var(--heading);font-size:14px;margin:0 0 12px;font-family:"IBM Plex Sans",sans-serif;letter-spacing:.02em}
.site-footer a{display:block;color:var(--muted);margin:6px 0}
.site-footer a:hover{color:var(--accent);text-decoration:none}
.site-footer .desc{color:var(--muted);max-width:38ch;margin:10px 0 0}
.site-footer .copy{color:#5a6b82;font-size:12.5px;margin-top:26px;border-top:1px solid var(--border);padding-top:18px}

/* --- Sub-navigation (kategori) di bawah main header --- */
.subnav{background:var(--bg2);border-bottom:1px solid var(--border)}
.subnav .wrap{display:flex;gap:26px;align-items:center;min-height:46px;overflow-x:auto}
.subnav a{color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;padding:12px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--accent);text-decoration:none}
.subnav a.active{color:var(--heading);border-bottom-color:var(--accent)}
.main-nav a.active{color:var(--accent);font-weight:700}

@media(max-width:760px){
  body{font-size:16px}
  .main-nav{gap:16px}
  .site-footer .cols{grid-template-columns:1fr;gap:22px}
  .cta-band{padding:28px 22px}
  .subnav .wrap{gap:18px}
}
.brand img{height:30px;width:auto;display:block}
.lang-btn{color:var(--muted);font-size:13.5px;font-weight:600;border:1px solid var(--border);border-radius:999px;padding:6px 13px;white-space:nowrap}
.lang-btn:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
/* --- Toggle EN/ID (native, seperti landing) --- */
.lang-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px;margin-right:4px}
.lang-toggle button{border:0;background:transparent;color:var(--muted);font:600 12.5px/1 "IBM Plex Sans",sans-serif;padding:7px 13px;border-radius:999px;cursor:pointer;letter-spacing:.04em}
.lang-toggle button:hover{color:var(--accent)}
.lang-toggle button.active{background:var(--accent);color:var(--accent-ink)}
/* Blok konten per-bahasa: EN tampil default; ID tampil saat data-lang="id". Konten tanpa pasangan tetap tampil. */
html:not([data-lang="id"]) .lang-id{display:none}
html[data-lang="id"] .lang-en{display:none}