:root{
  --ink:#16284b; --ink-soft:#48546E; --paper:#F4F6FA; --panel:#FFFFFF; --line:#DCE1EB;
  --accent-navy:#16284b; --accent-blue:#254B8C;
  --accent-blue-soft:#E2ECFA; --accent-blue-light:#EBF1FA;
  --sidebar-w:300px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a{color:var(--accent-blue); text-decoration:none;}
a:hover{text-decoration:underline;}
.shell{ display:flex; min-height:100vh; }
.sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); padding:28px 22px 40px; position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:10; }
.brand{ margin-bottom:22px; }
.brand-text{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; line-height:1.3; color:var(--ink); }
.brand-sub{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

.bagian-flat-link{
  display:block; padding:9px 10px; border-radius:7px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--ink-soft);
  margin-bottom:2px;
}
.bagian-flat-link:hover{ background:#EBEEF4; text-decoration:none; color:var(--ink); }
.bagian-flat-link.active{ background:var(--accent-blue-soft); color:var(--ink); }

summary.bagian-summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:9px 10px; border-radius:7px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--ink-soft);
}
summary.bagian-summary::-webkit-details-marker{ display:none; }
summary.bagian-summary::marker{ content:''; }
summary.bagian-summary:hover{ background:#EBEEF4; }
details.bagian-block.has-active > summary.bagian-summary{ color:var(--ink); font-weight:700; }
.bagian-arrow{ font-size:10px; color:#8992A8; transition:transform .15s ease; flex-shrink:0; }
.bagian-arrow::before{ content:'▸'; }
details[open] > summary.bagian-summary .bagian-arrow{ transform:rotate(90deg); }
.bab-list{ display:flex; flex-direction:column; gap:1px; padding:2px 0 8px 4px; }
.bab-item{
  display:block; padding:6px 10px 6px 20px; border-radius:6px;
  font-size:12.6px; color:var(--ink-soft); line-height:1.4;
}
.bab-item:hover{ background:#EBEEF4; text-decoration:none; color:var(--ink); }
.bab-item.active{ background:var(--accent-blue-soft); color:var(--accent-blue); font-weight:600; }

.main{ flex:1; min-width:0; display:flex; justify-content:center; margin-left:var(--sidebar-w); }
.content{ width:100%; max-width:800px; padding:56px 40px 120px; }
.breadcrumb{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#8992A8; margin-bottom:18px; }
.breadcrumb span{ color:var(--accent-blue); }
.chapter-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--accent-blue); font-weight:600; margin-bottom:14px; }
.chapter-eyebrow::before{ content:'◆'; font-size:10px; }
h1.chapter-title{ font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:700; line-height:1.15; margin:0 0 14px; letter-spacing:-.01em; color:var(--ink); }
.subtitle{ color:var(--ink-soft); font-size:15px; margin-bottom:34px; }

/* Kamus entry card */
.entry-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; margin-bottom:20px;
}
.entry-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; background:var(--accent-navy); color:#E2ECFA;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px;
  margin-right:10px; flex-shrink:0;
}
.entry-title{ display:flex; align-items:center; margin-bottom:14px; }
.entry-term{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--ink); }
.entry-section{ margin-bottom:12px; }
.entry-section:last-child{ margin-bottom:0; }
.entry-label{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px;
  display:flex; align-items:center; gap:6px; margin-bottom:5px;
}
.entry-label::before{ margin-right:2px; font-size:14px; }
.entry-label.arti{ color:var(--accent-blue); }
.entry-label.arti::before{ content:'🗣️'; }
.entry-label.analogi{ color:var(--accent-navy); }
.entry-label.analogi::before{ content:'🎯'; }
.entry-label.perhatian{ color:#C2185B; }
.entry-label.perhatian::before{ content:'⚠️'; }
.entry-label.contoh{ color:#00695C; }
.entry-label.contoh::before{ content:'💡'; }
.entry-text{ font-size:14px; color:#232838; margin:0; }

/* Glosarium (reused) */
.cat-filter{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px; position:sticky; top:0; background:var(--paper); padding:14px 0; border-bottom:1px solid var(--line); z-index:5;}
.cat-chip{
  font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink-soft);
  padding:5px 12px; border-radius:20px; cursor:pointer;
}
.cat-chip.active{ background:var(--accent-navy); border-color:var(--accent-navy); color:#fff; }
.term-list{ display:flex; flex-direction:column; gap:12px; }
.term-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.term-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.term-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15.5px; color:var(--ink); }
.term-tag{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }

/* Distinct Tag Accent Colors for Glosarium */
.tag-orange{ background:#FFF4E5; color:#B76E00; }
.tag-pink{ background:#FDE8EF; color:#C2185B; }
.tag-sky{ background:#E3F2FD; color:#1565C0; }
.tag-teal{ background:#E0F2F1; color:#00695C; }

.term-def{ font-size:13.8px; color:#232838; margin-bottom:10px; }
.term-impl{ font-size:12.8px; color:var(--ink-soft); background:#F8F9FC; border-left:3px solid var(--accent-blue); border-radius:0 8px 8px 0; padding:8px 12px; }
.impl-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:#8992A8; margin-bottom:3px; }

/* Istilah Tertukar comparison */
.pair-category{ margin:40px 0 18px; }
.pair-cat-heading{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  color:var(--ink); border-bottom:2px solid var(--accent-blue-soft); padding-bottom:8px;
}
.pair-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:18px; }
.pair-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; margin-bottom:14px; color:var(--ink); }
.pair-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.pair-side{ border-radius:10px; padding:14px 16px; }
.pair-side.left{ background:#EDF3FC; }
.pair-side.right{ background:#F0EEF8; }
.pair-side-term{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; margin-bottom:6px; }
.pair-side.left .pair-side-term{ color:#254B8C; }
.pair-side.right .pair-side-term{ color:#4A3B8C; }
.pair-side-def{ font-size:12.8px; color:#232838; }

/* Key Difference Box in Comparison */
.pair-key{ background:#FFF8E7; border-left:3px solid #D97706; border-radius:0 8px 8px 0; padding:10px 14px; font-size:13px; color:#451A03; }
.pair-key strong{ color:#92400E; }

.section-intro{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px 24px; margin-bottom:30px; font-size:13.5px; color:var(--ink-soft);
}
.section-intro strong{ color:var(--ink); }

table.dm-table{ width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:14.2px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.dm-table thead th{ background:var(--accent-navy); color:#fff; text-align:left; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; padding:11px 14px; }
table.dm-table td{ padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; color:#232838; }
table.dm-table tbody tr:nth-child(even){ background:#F8F9FC; }

@media (max-width:900px){
  .shell{ position:relative; }
  .main{ margin-left:0; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:100;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:2px 0 24px rgba(0,0,0,.15);
  }
  .sidebar.sidebar-open{ transform:translateX(0); }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(22,24,29,.45); z-index:99; }
  .sidebar-backdrop.active{ display:block; }
  .hamburger-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:16px; left:16px; z-index:101;
    width:42px; height:42px; border-radius:10px;
    background:var(--accent-navy); border:none; cursor:pointer;
    flex-direction:column; gap:4px;
  }
  .hamburger-btn span{ display:block; width:20px; height:2px; background:#F4F6FA; border-radius:2px; transition:all .2s ease; }
  .hamburger-btn.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger-btn.active span:nth-child(2){ opacity:0; }
  .hamburger-btn.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .content{ padding:80px 20px 90px; }
  .pair-grid{ grid-template-columns:1fr; }

  table.dm-table{ width:100%; border:none; border-radius:0; }
  table.dm-table thead{ display:none; }
  table.dm-table tbody{ display:block; }
  table.dm-table tr{ display:block; margin-bottom:14px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); }
  table.dm-table td{ display:block; padding:10px 14px; border-top:1px solid var(--line); text-align:left; font-size:13px; word-break:break-word; }
  table.dm-table td:first-child{ border-top:none; }
  table.dm-table td::before{
    content:attr(data-label); display:block;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--accent-blue); margin-bottom:3px;
  }
}

/* ===================== PASSWORD GATE ===================== */
html.hb-locked, html.hb-locked body{ overflow:hidden; height:100%; }
html.hb-locked .shell{
  filter: blur(10px) saturate(0.9);
  pointer-events: none;
  user-select: none;
  transition: filter .2s ease;
}
#hb-auth-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(22,40,75,0.55);
  backdrop-filter: blur(3px);
  padding: 20px;
}
html.hb-locked #hb-auth-overlay{ display:flex; }
#hb-auth-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 30px 28px;
  width: min(360px, 100%);
  box-shadow: 0 20px 60px rgba(22,40,75,0.35);
  text-align: center;
  animation: hb-pop .18s ease;
}
@keyframes hb-pop{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
#hb-auth-mark{
  width:44px; height:44px; border-radius:12px; margin:0 auto 16px;
  background:linear-gradient(135deg, #16284b, #254B8C);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  box-shadow: 0 4px 12px rgba(22,40,75,0.25);
}
#hb-auth-card h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  color: var(--ink); margin: 0 0 6px;
}
#hb-auth-card p{
  font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; line-height:1.5;
}
#hb-auth-form{ display:flex; flex-direction:column; gap:10px; }
#hb-auth-input{
  width:100%; padding:11px 14px; border-radius:9px;
  border:1.5px solid var(--line); background:var(--paper);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
  outline:none; text-align:center; letter-spacing:.03em;
  transition: border-color .15s ease;
}
#hb-auth-input:focus{ border-color: var(--accent-navy); }
#hb-auth-submit{
  width:100%; padding:11px 14px; border-radius:9px; border:none; cursor:pointer;
  background: var(--accent-navy); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  transition: background .15s ease, transform .1s ease;
}
#hb-auth-submit:hover{ background:#0f1c36; }
#hb-auth-submit:active{ transform: scale(.98); }
#hb-auth-error{
  font-size:12.5px; color:#B91C1C; min-height:16px; margin-top:2px;
  font-family:'Inter',sans-serif; font-weight:500;
}