/* Mataram Docs */
/* Mataram Docs - Warna Brand */
:root {
  --bg: #0a1628;
  --card: #0d1f3c;
  --border: #1a3355;
  --text: #f0f4ff;
  --muted: #b0c4de;
  --blue: #4a9eff;
  --blue-hover: #6bb0ff;
  --blue-dark: #0a1628;
  --orange: #ff6b4a;
  --green: #4aff96;
  --red: #ff4757;
  --yellow: #ffd23f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:800px;margin:0 auto;padding:24px 20px 60px}

h1{font-size:2.2em;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:-0.02em}
h2{font-size:1.4em;font-weight:600;color:#fff;margin:36px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border)}
h3{font-size:1.1em;font-weight:600;color:#fff;margin:28px 0 8px}
h4{font-size:1em;font-weight:600;color:var(--blue);margin:20px 0 6px}
p{color:#c8ceda;margin-bottom:12px;line-height:1.8}
.sub{color:var(--muted);font-size:1em;margin-bottom:20px}
.desc{color:var(--muted);font-size:0.9em;margin-bottom:16px;line-height:1.7}

a{color:var(--blue);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 28px;border-radius:30px;
  font-size:1em;font-weight:600;text-decoration:none;
  transition:all 0.15s;border:none;cursor:pointer;
}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover);text-decoration:none}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--border)}
.btn-outline:hover{border-color:var(--blue);text-decoration:none}
.btn-sm{height:44px;padding:0 20px;font-size:0.9em}

nav{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 30px;padding:12px 0;border-bottom:1px solid var(--border)}
nav a{font-size:0.88em;padding:6px 14px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}
nav a:hover{color:var(--blue);border-color:var(--blue);text-decoration:none}

pre{
  background:#080b14;padding:16px;border-radius:8px;overflow-x:auto;
  font-family:'SF Mono','JetBrains Mono',monospace;font-size:0.85em;
  color:#c9d1d9;border:1px solid var(--border);margin:8px 0 18px;line-height:1.6
}
.kw{color:var(--blue)}.str{color:#d4805f}.cm{color:var(--muted)}.n{color:#b392f0}

code{font-family:'SF Mono','JetBrains Mono',monospace;background:#1a2233;padding:2px 6px;border-radius:4px;color:var(--blue);font-size:0.88em}

.lang-row{display:flex;gap:6px;margin:16px 0;flex-wrap:wrap}
.lang-btn{
  padding:10px 22px;border-radius:30px;border:1px solid var(--border);
  background:none;color:var(--muted);cursor:pointer;font-size:0.9em;
  font-family:inherit;font-weight:500;transition:all 0.15s;height:44px
}
.lang-btn.active{color:var(--blue);border-color:var(--blue);background:rgba(82,125,255,0.08)}
.lang-btn:hover{border-color:var(--blue)}

.tab{display:none}
.tab.active{display:block}

table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:0.92em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
th{text-align:left;padding:10px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--border);color:#c8ceda;white-space:nowrap}
td:first-child{color:#fff;font-weight:500}

ul,ol{color:#c8ceda;padding-left:22px;margin:8px 0 16px;line-height:1.8}
li{margin:4px 0}

.footer{margin-top:50px;padding-top:20px;border-top:1px solid var(--border);text-align:center;font-size:0.85em;color:var(--muted);line-height:1.8}
.footer a{color:var(--blue)}

.next-prev{display:flex;justify-content:space-between;margin:40px 0 20px;gap:12px;flex-wrap:wrap}
.next-prev a{min-width:120px;text-align:center}

/* Search */
.search-wrap{position:relative;margin:30px auto;max-width:480px}
.search-input{
  width:100%;height:52px;padding:0 20px 0 46px;border-radius:30px;
  background:var(--card);border:2px solid var(--border);
  color:var(--text);font-size:1em;font-family:inherit;
  outline:none;transition:border-color 0.15s;
}
.search-input:focus{border-color:var(--blue)}
.search-input::placeholder{color:var(--muted)}
.search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;opacity:0.4;pointer-events:none;
  color:var(--muted);font-size:16px;line-height:1;
}
.search-results{
  position:absolute;top:100%;left:0;right:0;z-index:100;
  margin-top:6px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;max-height:400px;overflow-y:auto;
  display:none;box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.search-results.visible{display:block}
.search-result-item{
  padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background 0.1s;text-decoration:none;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover,
.search-result-item.highlighted{background:rgba(74,158,255,0.08)}
.search-result-item a{color:var(--text);font-weight:600;font-size:0.95em;display:block;text-decoration:none}
.search-result-item .desc{font-size:0.82em;color:var(--muted);margin:2px 0 0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-item .badge{
  display:inline-block;font-size:0.68em;padding:2px 8px;border-radius:10px;
  background:rgba(74,158,255,0.15);color:var(--blue);margin-top:4px;font-weight:500;
}
.search-no-results{padding:20px;text-align:center;color:var(--muted);font-size:0.9em}
.search-highlight{color:var(--blue)}
@media(max-width:640px){
  body{font-size:16px}
  .container{padding:18px 14px 40px}
  h1{font-size:1.8em}
  .btn{height:48px;padding:0 22px;font-size:0.95em}
  pre{font-size:0.8em}
  td,th{padding:8px 10px;font-size:0.85em}
  .next-prev a{min-width:100px}
}