/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* CSS Variables for Theme */
:root {
  /* Dark Theme Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #222222;
  --bg-tertiary: #2a2a2a;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --accent-primary: #4dabf7; /* Electric blue */
  --accent-secondary: #40c057; /* Teal */
  --accent-tertiary: #9c78d9; /* Soft purple */
  --border-radius: 8px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --transition: all 0.3s ease;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

h1 {
  font-size: 2.5rem;
  color: var(--accent-primary);
}

h2 {
  font-size: 2rem;
  color: var(--accent-secondary);
}

h3 {
  font-size: 1.5rem;
  color: var(--accent-tertiary);
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

/* Links */
a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--box-shadow);
}

.btn:hover {
  background-color: #3b99e6;
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--accent-secondary);
  color: var(--bg-primary);
}

.btn-secondary:hover {
  background-color: #36a84a;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* ===== Header (scoped hanya untuk header situs) ===== */
.site-header{
  background-color: var(--bg-secondary);
  padding: 1rem 5%;
  box-shadow: var(--box-shadow);
  position: sticky; top: 0; z-index: 100;
}
.site-header .header-container{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.site-header .logo{ display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.site-header .logo svg{ width:40px; height:40px; }
.site-header .logo-text{ font-size:1.5rem; font-weight:700; color:var(--text-primary); }

/* Menu khusus header situs */
.site-header nav ul{
  display:flex; list-style:none; gap:2rem; margin:0; padding:0; white-space:nowrap;
}
.site-header nav a{
  display:inline-block; padding:.5rem 1rem;
  color:var(--text-primary); font-weight:500; border-radius:var(--border-radius); transition:var(--transition);
}
.site-header nav a:hover{ background:var(--bg-tertiary); color:var(--accent-primary); text-decoration:none; }

/* Responsive */
@media (max-width: 900px){
  .site-header nav ul{ gap:20px; }
  .site-header .logo-text{ font-size:1.1rem; }
}
@media (max-width: 768px){
  .site-header{ padding:10px 12px; }
  .site-header nav ul{ gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .site-header nav ul::-webkit-scrollbar{ display:none; }
  .site-header nav a{ padding:10px 6px; }
}
@media (max-width: 480px){
  .site-header .logo-text{ display:none; }
}

/* Matikan efek ke <header> lain (misal di dalam artikel/TOC) */
header{ position: static !important; }

/* ===== TOC artikel (tidak kena styling nav) ===== */
.toc{ position: static; margin-top: 1rem; }
.toc h2{ margin-bottom:.5rem; }
.toc ul{
  display:block; list-style:disc;
  margin:.5rem 0 .5rem 1.25rem;
  column-width:260px; column-gap:2rem;
}
.toc li{ break-inside:avoid; margin:.4rem 0; }
.toc a{ color:var(--text-primary); text-decoration:none; }
.toc a:hover{ color:var(--accent-primary); text-decoration:underline; }

/* Main Content */
main {
  flex: 1;
  padding: 2rem 5%;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Sections */
section {
  margin-bottom: 3rem;
}

/* Cards */
.card {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 1rem;
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  margin: 2rem 0;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* Features Section */
.features {
  margin: 4rem 0;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

/* Shapes Grid */
.shapes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.shape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.shape-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 1.5rem;
}

/* Calculator Section */
.calculator {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: var(--box-shadow);
}

.calculator-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  margin-top: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group select {
  padding: 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--bg-tertiary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
}

.result {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: var(--bg-tertiary);
  border-radius: var(--border-radius);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}

/* 3D Visualization */
.visualization {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  margin: 2rem 0;
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 2rem;
}

/* Cube */
.cube {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
}

.cube-face {
  position: absolute;
  width: 150px;
  height: 150px;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.cube-face--front  { transform: rotateY(0deg) translateZ(75px); }
.cube-face--right  { transform: rotateY(90deg) translateZ(75px); }
.cube-face--back   { transform: rotateY(180deg) translateZ(75px); }
.cube-face--left   { transform: rotateY(-90deg) translateZ(75px); }
.cube-face--top    { transform: rotateX(90deg) translateZ(75px); }
.cube-face--bottom { transform: rotateX(-90deg) translateZ(75px); }

/* Cuboid (Balok) */
.cuboid {
  width: 150px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
}

.cuboid-face {
  position: absolute;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.cuboid-face--front  { width: 150px; height: 100px; transform: rotateY(0deg) translateZ(75px); }
.cuboid-face--back   { width: 150px; height: 100px; transform: rotateY(180deg) translateZ(75px); }
.cuboid-face--right  { width: 150px; height: 100px; transform: rotateY(90deg) translateZ(75px); }
.cuboid-face--left   { width: 150px; height: 100px; transform: rotateY(-90deg) translateZ(75px); }
.cuboid-face--top    { width: 150px; height: 150px; transform: rotateX(90deg) translateZ(50px); }
.cuboid-face--bottom { width: 150px; height: 150px; transform: rotateX(-90deg) translateZ(50px); }

/* Cylinder (Tabung) */
.cylinder {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
}

.cylinder-face {
  position: absolute;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.cylinder-face--top { width: 150px; height: 150px; transform: translateZ(75px); }
.cylinder-face--bottom { width: 150px; height: 150px; transform: translateZ(-75px); }

.cylinder-face--curved {
  width: 150px;
  height: 150px;
  background: transparent;
  border: none;
  position: relative;
}

.cylinder-face--curved::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  background: rgba(77, 171, 247, 0.4);
}

/* Cone (Kerucut) */
.cone {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
}

.cone-face {
  position: absolute;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.cone-face--base { width: 150px; height: 150px; transform: translateZ(-75px); }

.cone-face--curved {
  width: 150px;
  height: 150px;
  background: transparent;
  border: none;
  position: relative;
}

.cone-face--curved::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid rgba(77, 171, 247, 0.8);
  border-radius: 50%;
}

/* Square Pyramid (Limas Segi Empat) */
.pyramid {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
}

.pyramid-face {
  position: absolute;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.pyramid-face--base { 
  width: 150px; 
  height: 150px; 
  transform: rotateX(90deg) translateZ(-75px); 
}

.pyramid-face--triangle {
  width: 150px;
  height: 150px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: bottom center;
}

.pyramid-face--triangle-1 { transform: rotateY(0deg) translateZ(75px) rotateX(-50deg); }
.pyramid-face--triangle-2 { transform: rotateY(90deg) translateZ(75px) rotateX(-50deg); }
.pyramid-face--triangle-3 { transform: rotateY(180deg) translateZ(75px) rotateX(-50deg); }
.pyramid-face--triangle-4 { transform: rotateY(270deg) translateZ(75px) rotateX(-50deg); }

/* Triangular Prism (Prisma Segitiga) */
.triangular-prism {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
}

.prism-face {
  position: absolute;
  background: rgba(77, 171, 247, 0.8);
  border: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.prism-face--triangle {
  width: 150px;
  height: 150px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: center;
}

.prism-face--triangle-1 { transform: rotateY(0deg) translateZ(75px); }
.prism-face--triangle-2 { transform: rotateY(180deg) translateZ(75px); }

.prism-face--rectangle {
  width: 150px;
  height: 150px;
}

.prism-face--rectangle-1 { transform: rotateY(0deg) translateZ(75px) rotateX(90deg) translateZ(75px); }
.prism-face--rectangle-2 { transform: rotateY(120deg) translateZ(75px) rotateX(90deg) translateZ(75px); }
.prism-face--rectangle-3 { transform: rotateY(240deg) translateZ(75px) rotateX(90deg) translateZ(75px); }

/* Sphere (Bola) */
.sphere {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.5s;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(77, 171, 247, 1), rgba(77, 171, 247, 0.6));
  border: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--bg-primary);
}

.sphere::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 70%);
}

/* Practice Problems */
.practice-problems {
  margin-top: 2rem;
}

.problem {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.problem-input {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.problem-input input {
  padding: 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--bg-tertiary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
  flex: 1;
}

.feedback {
  margin-top: 0.5rem;
  font-weight: 500;
}

.correct {
  color: var(--accent-secondary);
}

.incorrect {
  color: #ff6b6b;
}

/* Footer */
footer {
  background-color: var(--bg-secondary);
  padding: 2rem 5%;
  margin-top: auto;
  box-shadow: var(--box-shadow);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-links {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
}

.social-icon {
  width: 30px;
  height: 30px;
  fill: var(--text-primary);
  transition: var(--transition);
}

.social-icon:hover {
  fill: var(--accent-primary);
}

.copyright {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  nav ul {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hero h1 {
    font-size: 2.2rem;
  }
  
  .card-grid,
  .shapes-grid {
    grid-template-columns: 1fr;
  }
  
  .calculator-form {
    flex-direction: column;
  }
  
  .form-group {
    min-width: 100%;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.7rem;
  }
  
  h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .header-container,
  main,
  footer {
    padding: 1rem;
  }
  
  .hero {
    padding: 2rem 1rem;
  }
  
  .hero h1 {
    font-size: 1.8rem;
  }
  
  .card {
    padding: 1rem;
  }
}
/* === Header layout & responsive nav === */
header {
  background: #1b1b1b;
}

/* baris header rapi: logo kiri, nav kanan */
.header-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* logo clickable rapi */
header .logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none; /* bersihkan underline saat jadi <a> */
  color: inherit;
}
header .logo .logo-text{
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}

/* nav rata kanan + 1 baris */
header nav{
  margin-left: auto;
}
header nav ul{
  display: flex;
  align-items: center;
  gap: 28px;               /* kecilkan kalau masih sempit */
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;     /* cegah patah baris */
}
header nav a{
  display: inline-block;
  padding: 12px 8px;
}

/* responsif: biar tetap 1 baris, tapi scroll horizontal halus */
@media (max-width: 900px){
  header nav ul{
    gap: 20px;
  }
  header .logo .logo-text{
    font-size: 1.1rem;
  }
}
@media (max-width: 768px){
  .header-container{ padding: 10px 12px; }
  header nav ul{
    gap: 16px;
    overflow-x: auto;                 /* enable scroll samping */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
  }
  header nav ul::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
  header nav a{ padding: 10px 6px; }
}
@media (max-width: 480px){
  header .logo .logo-text{ display: none; } /* hemat ruang di HP kecil */
}
/* === NAV FIX (override) === */
header .header-container{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important; /* logo kiri */
  gap:16px !important;
  flex-wrap:nowrap !important;           /* cegah pecah baris */
}

header nav{ margin-left:auto !important; }  /* menu dorong ke kanan */

header nav ul{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
  list-style:none;
  padding:0;
  margin:0;
  white-space:nowrap !important;          /* cegah pecah baris */
  flex-wrap:nowrap !important;
}

header nav a{ display:inline-block; padding:12px 8px; }

/* Responsive tweaks */
@media (max-width: 900px){
  header nav ul{ gap:18px !important; }
  header .logo .logo-text{ font-size:1.1rem !important; }
}
@media (max-width: 768px){
  .header-container{ padding:10px 12px !important; }
  header nav ul{
    gap:16px !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  header nav ul::-webkit-scrollbar{ display:none; }
  header nav a{ padding:10px 6px; }
}
@media (max-width: 520px){
  header .logo .logo-text{ display:none !important; } /* hemat ruang */
}
/* ===== Scope khusus header situs (hindari nempel ke header lain) ===== */
.site-header {
  background-color: var(--bg-secondary);
  padding: 1rem 5%;
  box-shadow: var(--box-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .header-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 12px;
}
.site-header .logo{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.site-header .logo svg{ width:40px; height:40px; }
.site-header .logo-text{ font-size:1.5rem; font-weight:700; color:var(--text-primary); }

/* HANYA menu di header situs */
.site-header nav ul{
  display:flex;
  list-style:none;
  gap:2rem;
  padding:0;
  margin:0;
  white-space:nowrap;
}
.site-header nav a{
  color: var(--text-primary);
  font-weight:500;
  padding:.5rem 1rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
}
.site-header nav a:hover{
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
  text-decoration:none;
}

/* Responsif khusus header situs */
@media (max-width: 900px){
  .site-header nav ul{ gap:20px; }
  .site-header .logo-text{ font-size:1.1rem; }
}
@media (max-width: 768px){
  .site-header { padding: 10px 12px; }
  .site-header nav ul{
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-header nav ul::-webkit-scrollbar{ display:none; }
  .site-header nav a{ padding:10px 6px; }
}
@media (max-width: 480px){
  .site-header .logo-text{ display:none; }
}

/* ===== TOC artikel: jangan kena styling nav global ===== */
.toc { position: static; margin-top: 1rem; }
.toc h2 { margin-bottom: .5rem; }
.toc ul{
  display: block;            /* bukan flex */
  list-style: disc;
  margin: .5rem 0 .5rem 1.25rem;
  column-width: 260px;       /* TOC kolom rapi */
  column-gap: 2rem;
}
.toc li{ break-inside: avoid; margin: .4rem 0; }
.toc a{ color: var(--text-primary); text-decoration: none; }
.toc a:hover{ color: var(--accent-primary); text-decoration: underline; }

/* === TOC artikel (hindari ketimpa nav global) === */
.toc { position: static; margin-top: 1rem; }
.toc h2 { margin-bottom: .5rem; }
.toc ul{
  display: block;
  list-style: disc;
  margin: .5rem 0 .5rem 1.25rem;
  column-width: 260px;
  column-gap: 2rem;
}
.toc li{ break-inside: avoid; margin: .4rem 0; }
.toc a{ color: var(--text-primary); text-decoration: none; }
.toc a:hover{ color: var(--accent-primary); text-decoration: underline; }

/* Pastikan hanya header situs yang lengket */
header { position: static !important; }
.site-header { position: sticky !important; top: 0; z-index: 100; }
/* ===== HOTFIX: hentikan H1/TOC ikut “lengket” & berantakan ===== */

/* 1) Hanya header situs yang lengket */
.site-header{ position: sticky !important; top:0; z-index:100; }
/* Semua <header> lain (mis. header di dalam artikel) jangan sticky */
header:not(.site-header){ position: static !important; top:auto !important; z-index:auto !important; }

/* 2) Pastikan judul artikel tidak sticky */
h1{ position: static !important; top:auto !important; }

/* 3) TOC rapi dan tidak ketarik styling nav global */
.toc{ position: static !important; margin-top:1rem; }
.toc h2{ margin-bottom:.5rem; }
.toc ul{
  display:block !important;
  list-style:disc !important;
  padding-left:1.25rem !important;
  margin:.5rem 0 .5rem 1.25rem !important;
  column-width:260px; column-gap:2rem;
}
.toc li{
  display:list-item !important;
  margin:.4rem 0 !important;
  break-inside:avoid;
}
.toc a{
  display:inline !important;
  padding:0 !important;
  background:none !important;
  color:var(--text-primary);
  text-decoration:none;
}
.toc a:hover{ color:var(--accent-primary); text-decoration:underline; }

/* 4) Jaga styling menu hanya untuk header situs (kalau ada rule global “nav ul”) */
.site-header nav ul{ display:flex !important; }
.toc ul{ /* pastikan tidak jadi flex */
  display:block !important;
}
/* ======= PATCH ANTI-FLOATING (artikel) ======= */

/* HANYA header situs yang sticky */
.site-header { position: sticky !important; top: 0; z-index: 100; }

/* Matikan semua sticky tak sengaja di area konten/artikel */
main header,
.entry-header,
.post-header,
.post-hero,
.article-hero,
.card,
.toc,
.table-of-contents,
#toc,
[class*="sticky"] {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Judul artikel tidak boleh sticky */
main h1 { position: static !important; top: auto !important; }

/* Kalau ada anchor jump, beri jarak biar tak ketutup header sticky */
h1, h2, h3, h4, h5, h6 { scroll-margin-top: 90px; }

/* TOC rapi dan tidak kena gaya nav */
.toc, #toc, .table-of-contents { margin-top: 1rem; }
.toc ul, #toc ul, .table-of-contents ul {
  display: block !important;
  list-style: disc !important;
  padding-left: 1.25rem !important;
  margin: .5rem 0 .5rem 1.25rem !important;
  column-width: 260px;
  column-gap: 2rem;
}
.toc li, #toc li, .table-of-contents li { display: list-item !important; break-inside: avoid; }
.toc a, #toc a, .table-of-contents a {
  display: inline !important; padding: 0 !important; background: none !important;
  color: var(--text-primary); text-decoration: none;
}
.toc a:hover, #toc a:hover, .table-of-contents a:hover { color: var(--accent-primary); text-decoration: underline; }

/* Tambah sedikit jarak konten dari header */
main { padding-top: 12px; }