@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  --primary-dark:#3c043d;
  --primary:#6a066e;
  --tint-mid:#e0c3e3;
  --tint-light:#f3e6f4;
  --bg:#faf8f6;
  --text:#2b1a2c;
  --text-soft:#6b566d;
  --border:#e6dbe7;
  --accent:#c9a227;
  --white:#ffffff;
  --radius:12px;
  --sidebar-w:280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:16px;}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}

.app{display:flex; min-height:100vh;}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-w);
  background:var(--primary-dark);
  color:var(--white);
  position:fixed; top:0; left:0; bottom:0;
  overflow-y:auto;
  transition:transform .25s ease;
  z-index:100;
}
.sidebar-brand{display:block; padding:24px 22px 16px; color:var(--white);}
.sidebar-brand strong{display:block; font-size:17px; font-weight:800;}
.sidebar-brand span{display:block; font-size:12.5px; color:var(--tint-mid); margin-top:3px; font-weight:500;}

/* Search box */
.search-wrap{padding:0 18px 14px; position:relative; border-bottom:1px solid rgba(255,255,255,.12);}
.search-input{
  width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:var(--white); font-family:inherit; font-size:13.5px;
}
.search-input::placeholder{color:rgba(255,255,255,.55);}
.search-input:focus{outline:none; border-color:var(--accent); background:rgba(255,255,255,.12);}
.search-results{
  position:absolute; left:18px; right:18px; top:calc(100% - 8px);
  background:var(--white); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-height:320px; overflow-y:auto; z-index:50; display:none;
}
.search-results.show{display:block;}
.search-result-item{display:block; padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text);}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover{background:var(--tint-light); text-decoration:none;}
.search-result-term{font-weight:700; color:var(--primary-dark); font-size:13.5px; display:block;}
.search-result-cat{font-size:11px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.4px;}
.search-empty{padding:14px; font-size:13px; color:var(--text-soft); text-align:center;}

.sidebar-nav{padding:6px 0 40px;}
.nav-group{border-bottom:1px solid rgba(255,255,255,.06);}
.nav-group-title{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:none; border:none; color:var(--tint-mid);
  font-family:inherit; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; cursor:pointer;
}
.nav-group-title:hover{color:var(--white);}
.nav-group-title .chev{transition:transform .2s ease; font-size:11px;}
.nav-group.open .nav-group-title .chev{transform:rotate(90deg);}
.nav-group-items{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.nav-group.open .nav-group-items{max-height:600px;}
.nav-group-items a{display:block; padding:10px 22px 10px 30px; color:rgba(255,255,255,.78); font-size:13.5px; font-weight:500; border-left:3px solid transparent;}
.nav-group-items a:hover{background:rgba(255,255,255,.06); color:var(--white); text-decoration:none;}
.nav-group-items a.active{background:rgba(255,255,255,.09); color:var(--white); border-left-color:var(--accent); font-weight:700;}

.nav-flat-link{display:block; padding:14px 22px; color:rgba(255,255,255,.85); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid rgba(255,255,255,.06);}
.nav-flat-link:hover{background:rgba(255,255,255,.06); color:var(--white); text-decoration:none;}
.nav-flat-link.active{background:rgba(255,255,255,.09); border-left:3px solid var(--accent); color:var(--white);}

/* ===== Content ===== */
.content{margin-left:var(--sidebar-w); flex:1; min-width:0; padding:56px 64px 100px; display:flex; justify-content:center;}
.content-inner{width:100%; max-width:900px;}
.content-inner h1{font-size:30px; font-weight:800; color:var(--primary-dark); margin-bottom:6px; letter-spacing:-.3px;}
.kicker{font-size:13px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px;}
.content-inner .intro{color:var(--text-soft); margin-bottom:30px; max-width:640px;}
.content-inner h2{font-size:20px; font-weight:800; color:var(--primary-dark); margin:36px 0 16px;}
.content-inner h3{font-size:15.5px; font-weight:700; color:var(--primary); margin:24px 0 12px;}

/* ===== Term Card (Bagian Kamus): 1 kolom vertikal ke bawah ===== */
.term-grid{display:flex; flex-direction:column; gap:14px; margin-bottom:12px;}
.term-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.term-card h4{font-size:15.5px; color:var(--primary-dark); font-weight:800; margin-bottom:10px;}
.term-card .label{font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.4px; margin-top:12px; margin-bottom:4px;}
.term-card .label:first-of-type{margin-top:0;}
.term-card p{font-size:13.5px; color:var(--text); margin:0;}

/* ===== Shortcut Card (Bagian Shortcut Keyboard) ===== */
.os-toggle{display:inline-flex; background:var(--tint-light); border-radius:999px; padding:4px; margin-bottom:24px; gap:4px;}
.os-toggle button{
  border:none; background:none; padding:8px 20px; border-radius:999px; font-family:inherit;
  font-size:13.5px; font-weight:700; color:var(--text-soft); cursor:pointer; transition:all .15s ease;
}
.os-toggle button.active{background:var(--primary); color:var(--white);}

.shortcut-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin-bottom:8px;}
.shortcut-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center;}
.shortcut-keys{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.key-badge{
  background:var(--primary-dark); color:var(--white); font-family:'Manrope',sans-serif; font-weight:700;
  font-size:13px; padding:6px 12px; border-radius:6px; min-width:28px; display:inline-block;
}
.shortcut-name{font-size:13.5px; font-weight:700; color:var(--primary-dark); margin-bottom:4px;}
.shortcut-desc{font-size:12px; color:var(--text-soft);}
.shortcut-keys.mac-keys{display:none;}
.os-mac .shortcut-keys.win-keys{display:none;}
.os-mac .shortcut-keys.mac-keys{display:flex;}

/* ===== Comparison Card (Istilah Sering Tertukar) ===== */
.compare-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px;}
.compare-card h3{margin-top:0; font-size:17px; color:var(--primary-dark); font-weight:800;}
.compare-table{width:100%; border-collapse:collapse; margin:14px 0;}
.compare-table th{background:var(--tint-light); color:var(--primary-dark); font-size:12.5px; font-weight:800; padding:10px 14px; text-align:left; text-transform:uppercase; letter-spacing:.3px;}
.compare-table td{padding:12px 14px; border-top:1px solid var(--border); font-size:13.5px; vertical-align:top;}
.compare-table td:first-child{font-weight:700; color:var(--primary); width:90px;}
.pembeda{background:var(--tint-light); border-radius:8px; padding:12px 16px; font-size:13.5px; margin-top:6px;}
.pembeda strong{color:var(--primary-dark);}

@media (max-width:640px){
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table th, .compare-table td, .compare-table tr{display:block;}
  .compare-table thead{display:none;}
  .compare-table tr{margin-bottom:10px;}
  .compare-table td{border:none; padding:4px 0;}
  .compare-table td::before{content:attr(data-label); display:block; font-size:10.5px; font-weight:700; color:var(--primary); text-transform:uppercase;}

  /* Shortcut card: 2 kolom di mobile, bukan 1 kolom penuh */
  .shortcut-grid{grid-template-columns:repeat(2, 1fr); gap:10px;}
  .shortcut-card{padding:12px 8px;}
  .key-badge{font-size:11.5px; padding:5px 9px; min-width:22px;}
  .shortcut-name{font-size:12.5px;}
  .shortcut-desc{font-size:11px;}
}

/* ===== Hamburger mobile ===== */
.hamburger{display:none; position:fixed; top:16px; left:16px; z-index:300; background:var(--primary-dark); color:var(--white); border:none; border-radius:8px; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center;}
.hamburger svg{width:20px; height:20px;}
.hamburger .icon-close{display:none;}
.hamburger.is-open .icon-menu{display:none;}
.hamburger.is-open .icon-close{display:block;}
.overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99;}
.overlay.show{display:block;}

@media (max-width:960px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .sidebar.open .sidebar-brand{padding-left:66px;}
  .content{margin-left:0; padding:80px 20px 80px; justify-content:flex-start;}
  .content-inner{max-width:100%;}
  .hamburger{display:flex;}
}

/* ===================== PASSWORD GATE ===================== */
html.hb-locked, html.hb-locked body{ overflow:hidden; height:100%; }
html.hb-locked .app, html.hb-locked .hamburger{
  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(60,4,61,0.6);
  backdrop-filter: blur(3px);
  padding: 20px;
}
html.hb-locked #hb-auth-overlay{ display:flex; }
#hb-auth-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px 30px 28px;
  width: min(360px, 100%);
  box-shadow: 0 20px 60px rgba(60,4,61,0.35);
  text-align: center;
  font-family: 'Manrope', sans-serif;
  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, var(--primary-dark), var(--primary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family: 'Manrope', sans-serif; font-weight:700; font-size:18px;
  box-shadow: 0 4px 12px rgba(60,4,61,0.25);
}
#hb-auth-card h2{
  font-family: 'Manrope', sans-serif; font-weight:700; font-size:18px;
  color: var(--text); margin: 0 0 6px;
}
#hb-auth-card p{
  font-size: 13.5px; color: var(--text-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(--border); background:var(--tint-light);
  font-family: 'Manrope', sans-serif; font-size:14.5px; color:var(--text);
  outline:none; text-align:center; letter-spacing:.03em;
  transition: border-color .15s ease;
}
#hb-auth-input:focus{ border-color: var(--primary); }
#hb-auth-submit{
  width:100%; padding:11px 14px; border-radius:9px; border:none; cursor:pointer;
  background: var(--primary); color:#fff;
  font-family: 'Manrope', sans-serif; font-weight:700; font-size:14px;
  transition: background .15s ease, transform .1s ease;
}
#hb-auth-submit:hover{ background: var(--primary-dark); }
#hb-auth-submit:active{ transform: scale(.98); }
#hb-auth-error{
  font-size:12.5px; color:#B91C1C; min-height:16px; margin-top:2px;
  font-family: 'Manrope', sans-serif; font-weight:600;
}