/* ============================================================
   KodeMulai — Design System v3
   Tema: hitam pekat, minimalis, sedikit nuansa kotak (boxy)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg: #0a0a0a;
  --bg-elevated: #161616;
  --bg-card: #121212;
  --border: #e8e8e8;
  --border-soft: #333333;
  --text: #f5f5f5;
  --text-dim: #a3a3a3;
  --text-faint: #6b6b6b;

  --fill: #f5f5f5;
  --fill-text: #0a0a0a;

  --success: #4ade80;
  --danger: #f87171;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 6px;
  --radius-lg: 10px;

  --user-accent: #f5f5f5;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }

.container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--user-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================ NAVBAR */
.navbar{ position: sticky; top:0; z-index: 50; background: rgba(10,10,10,0.9); backdrop-filter: blur(8px); border-bottom: 2px solid var(--border); }
.navbar-inner{ max-width: 1080px; margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap: wrap; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-weight:700; font-size:1.05rem; }
.brand-badge{ width:30px; height:30px; border-radius: var(--radius); display:flex; align-items:center; justify-content:center; background: var(--fill); font-family: var(--font-mono); font-size:0.85rem; font-weight:700; color: var(--fill-text); }
.nav-links{ display:flex; align-items:center; gap: 20px; font-size: 0.9rem; color: var(--text-dim); }
.nav-links a:hover{ color: var(--text); }
.nav-links a.active{ color: var(--text); font-weight:600; text-decoration: underline; text-underline-offset: 4px; }
.nav-cta{ display:flex; align-items:center; gap:10px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 9px 18px; border-radius: var(--radius); font-size:0.88rem; font-weight:600; border: 1.5px solid var(--border); transition: transform .1s ease, background .15s ease, color .15s ease; }
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--fill); color: var(--fill-text); }
.btn-primary:hover{ background:#fff; }
.btn-ghost{ background: transparent; border-color: var(--border-soft); color: var(--text); }
.btn-ghost:hover{ border-color: var(--border); }
.btn-danger{ background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-block{ width:100%; }
.btn-sm{ padding: 6px 12px; font-size: 0.8rem; }

/* ============================================================ HERO */
.hero{ padding: 64px 0 48px; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:48px; align-items:center; }
@media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } }

.eyebrow{ font-family: var(--font-mono); font-size:0.76rem; color: var(--text-dim); letter-spacing:0.06em; display:flex; align-items:center; gap:8px; margin-bottom: 16px; text-transform: uppercase; }
.eyebrow::before{ content:''; width:8px; height:8px; background: var(--fill); }

.hero h1{ font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3rem); line-height:1.12; font-weight:700; margin-bottom:18px; }
.hero h1 .hl{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hero p{ color: var(--text-dim); font-size: 1.05rem; max-width: 46ch; margin-bottom: 26px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.terminal{ background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.terminal-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom: 2px solid var(--border); background: var(--bg-elevated); }
.dot{ width:11px; height:11px; border-radius:50%; border: 1.5px solid var(--border); background: transparent; }
.terminal-title{ margin-left:8px; font-family: var(--font-mono); font-size:0.76rem; color: var(--text-faint); }
.terminal-body{ padding:22px; font-family: var(--font-mono); font-size:0.86rem; min-height:190px; }
.terminal-body .line{ margin-bottom:10px; }
.prompt{ color: var(--text); font-weight:700; }
.typed{ color: var(--text); border-right: 2px solid var(--text); white-space: nowrap; overflow:hidden; display:inline-block; animation: type 2.6s steps(34) 1 both, blink .8s step-end infinite; }
.out{ color: var(--text-dim); }
.out .k{ text-decoration: underline; } .out .s{ font-weight:700; color: var(--text); }
@keyframes type{ from{width:0} to{width:34ch} }
@keyframes blink{ 50%{ border-color: transparent; } }

/* ============================================================ SECTIONS */
.section{ padding: 48px 0; }
.section-head{ margin-bottom: 28px; }
.section-head h2{ font-family: var(--font-display); font-size:1.7rem; font-weight:700; margin-bottom:8px; }
.section-head p{ color: var(--text-dim); max-width: 60ch; }

.materi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 860px){ .materi-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .materi-grid{ grid-template-columns: 1fr; } }

.materi-card{ background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding:22px; display:flex; flex-direction:column; gap:14px; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.materi-card:hover{ border-color: var(--border); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--border-soft); }

.logo-badge{ width:44px; height:44px; border-radius: var(--radius); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size:0.9rem; background: var(--fill); color: var(--fill-text); }

.materi-card h3{ font-family: var(--font-display); font-size:1.05rem; font-weight:700; }
.materi-card .tag{ font-family: var(--font-mono); font-size:0.72rem; color: var(--text-faint); }
.materi-card p{ color: var(--text-dim); font-size:0.9rem; flex:1; }
.materi-card .card-link{ font-size:0.85rem; font-weight:600; text-decoration: underline; text-underline-offset:3px; }

.materi-detail{ background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding:26px; margin-top:14px; }
.materi-detail h4{ font-family: var(--font-display); margin-bottom:10px; }
.materi-detail pre{ background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding:14px 16px; overflow-x:auto; font-family: var(--font-mono); font-size:0.82rem; margin:12px 0; color: var(--text); }
.materi-detail code{ font-family: var(--font-mono); }
.materi-detail ul{ list-style: disc; padding-left:20px; color: var(--text-dim); margin:10px 0; }

/* ============================================================ Q&A */
.qa-box{ background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; }
.qa-composer textarea{ width:100%; min-height:80px; resize:vertical; background: var(--bg-elevated); border: 1.5px solid var(--border-soft); border-radius: var(--radius); color: var(--text); padding:12px 14px; font-size:0.9rem; }
.qa-composer{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.qa-posting-as{ display:flex; align-items:center; gap:10px; font-size:0.82rem; color: var(--text-dim); }
.qa-posting-as .qa-avatar{ width:26px; height:26px; font-size:0.7rem; }
.qa-posting-as b{ color: var(--text); }
.qa-composer-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.qa-locked{ border: 1.5px dashed var(--border-soft); border-radius: var(--radius); padding:18px; text-align:center; color: var(--text-dim); font-size:0.9rem; margin-bottom:22px; }
.qa-locked a{ font-weight:600; text-decoration: underline; color: var(--text); }

.qa-item{ border-top: 1px solid var(--border-soft); padding:18px 0; }
.qa-item:first-child{ border-top:none; padding-top:0; }
.qa-item-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.qa-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size:0.8rem; color: var(--fill-text); background: var(--user-accent); background-size:cover; background-position:center; border: 1.5px solid var(--border-soft); }
.qa-meta{ display:flex; flex-direction:column; line-height:1.25; }
.qa-name{ font-weight:600; font-size:0.88rem; display:flex; align-items:center; gap:6px; }
.qa-name-link{ color: var(--text); }
.qa-name-link:hover{ text-decoration: underline; }
.qa-name .badge-admin{ font-family: var(--font-mono); font-size:0.62rem; background: var(--fill); color: var(--fill-text); padding:1px 6px; border-radius:4px; font-weight:700; }
.qa-time{ font-size:0.74rem; color: var(--text-faint); }
.qa-text{ color: var(--text); font-size:0.92rem; margin-bottom:8px; white-space: pre-wrap; }
.qa-actions{ display:flex; gap:14px; font-size:0.78rem; color: var(--text-faint); }
.qa-actions button{ background:none; border:none; color: var(--text-faint); font-size:0.78rem; }
.qa-actions button:hover{ color: var(--text); text-decoration: underline; }

.qa-replies{ margin-top:12px; padding-left:44px; display:flex; flex-direction:column; gap:12px; }
.qa-reply-form{ display:none; margin-top:10px; padding-left:44px; gap:8px; flex-direction:column; }
.qa-reply-form.open{ display:flex; }
.qa-reply-form textarea{ min-height:50px; background: var(--bg-elevated); border:1.5px solid var(--border-soft); border-radius: var(--radius); color: var(--text); padding:8px 10px; font-size:0.85rem; }

/* ============================================================ AUTH */
.auth-wrap{ min-height: calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding: 40px 20px; }
.auth-card{ width:100%; max-width:400px; background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding:34px; }
.auth-card .logo-row{ display:flex; align-items:center; gap:10px; margin-bottom:22px; font-family: var(--font-mono); font-weight:700; }
.auth-card h1{ font-family: var(--font-display); font-size:1.5rem; margin-bottom:6px; }
.auth-card .sub{ color: var(--text-dim); font-size:0.88rem; margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; color: var(--text-dim); margin-bottom:6px; }
.field input{ width:100%; background: var(--bg-elevated); border:1.5px solid var(--border-soft); border-radius: var(--radius); color: var(--text); padding:10px 13px; font-size:0.92rem; }
.field input:focus{ border-color: var(--border); }
.form-msg{ font-size:0.83rem; padding:10px 12px; border-radius: var(--radius); margin-bottom:16px; display:none; border: 1.5px solid; }
.form-msg.show{ display:block; }
.form-msg.err{ background: rgba(248,113,113,0.08); color: var(--danger); border-color: var(--danger); }
.form-msg.ok{ background: rgba(74,222,128,0.08); color: var(--success); border-color: var(--success); }
.auth-switch{ text-align:center; margin-top:18px; font-size:0.86rem; color: var(--text-dim); }
.auth-switch a{ font-weight:600; text-decoration: underline; color: var(--text); }
.turnstile-wrap{ margin-bottom: 16px; display:flex; justify-content:center; }

/* ============================================================ PROFILE */
.profile-banner{
  height: 220px; border-radius: var(--radius-lg); position: relative; overflow:hidden;
  background: var(--bg-elevated); background-size:cover; background-position:center;
  border: 1.5px solid var(--border-soft); z-index: 1;
}
.profile-head{ display:flex; align-items:flex-end; gap:20px; margin-top:-44px; padding:0 20px; position: relative; z-index: 2; }
.profile-pfp{
  width:96px; height:96px; border-radius:50%; border:4px solid var(--bg);
  background: var(--user-accent); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono);
  font-weight:700; font-size:1.6rem; color: var(--fill-text); flex-shrink:0; position: relative; z-index: 3;
  box-shadow: 0 0 0 1.5px var(--border-soft);
}
.profile-info{ padding-bottom:6px; flex:1; }
.profile-info h2{ font-family: var(--font-display); font-size:1.4rem; display:flex; align-items:center; gap:8px; }
.profile-username{ color: var(--text-faint); font-family: var(--font-mono); font-size:0.85rem; }
.profile-bio{ margin-top:18px; color: var(--text-dim); max-width:60ch; padding:0 20px; }

.profile-tabs{ display:flex; gap:6px; margin:26px 20px 0; border-bottom: 1.5px solid var(--border-soft); }
.profile-tab{ padding:10px 16px; font-size:0.88rem; color: var(--text-dim); border-bottom:2px solid transparent; font-weight:600; }
.profile-tab.active{ color: var(--text); border-color: var(--text); }

.settings-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; padding:22px 20px; }
@media (max-width:700px){ .settings-grid{ grid-template-columns:1fr; } }
.settings-card{ background: var(--bg-card); border:1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding:20px; }
.settings-card h4{ font-family: var(--font-display); margin-bottom:14px; font-size:1rem; }

.swatches{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.swatch{ width:32px; height:32px; border-radius:50%; border:2px solid var(--border-soft); cursor:pointer; }
.swatch.active{ border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

.file-upload{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.file-upload-preview{ width:56px; height:56px; border-radius: var(--radius); border: 1.5px solid var(--border-soft); background-size:cover; background-position:center; background-color: var(--bg-elevated); flex-shrink:0; }
.file-upload-preview.round{ border-radius:50%; }
.file-upload input[type=file]{ font-size:0.8rem; max-width: 200px; color: var(--text-dim); }

.up-materi-list{ padding:4px 20px 30px; display:flex; flex-direction:column; gap:12px; }
.up-materi-item{ background: var(--bg-card); border:1.5px solid var(--border-soft); border-radius: var(--radius); padding:16px; }
.up-materi-item h5{ font-family: var(--font-display); font-size:0.98rem; margin-bottom:6px; }
.up-materi-item p{ color: var(--text-dim); font-size:0.86rem; white-space: pre-wrap; }

.empty-state{ text-align:center; padding:40px 20px; color: var(--text-faint); font-size:0.9rem; }

/* ============================================================ DASHBOARD */
.dash-grid{ display:grid; grid-template-columns: 260px 1fr; gap: 24px; align-items:start; }
@media (max-width: 860px){ .dash-grid{ grid-template-columns: 1fr; } }
.dash-side{ background: var(--bg-card); border:1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding:18px; position: sticky; top: 84px; }
.dash-side h4{ font-family: var(--font-display); font-size:0.95rem; margin-bottom:12px; }
.dash-side ul{ display:flex; flex-direction:column; gap:8px; }
.dash-side a{ display:flex; align-items:center; gap:10px; font-size:0.88rem; color: var(--text-dim); padding:6px 8px; border-radius: var(--radius); }
.dash-side a:hover{ background: var(--bg-elevated); color: var(--text); }
.dash-welcome{ background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 22px; display:flex; align-items:center; gap:16px; }

/* ============================================================ CHAT / DM */
.chat-layout{ display:grid; grid-template-columns: 320px 1fr; border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); overflow:hidden; height: calc(100vh - 150px); min-height: 480px; }

.chat-list{ border-right: 1.5px solid var(--border-soft); overflow-y:auto; background: var(--bg-card); }
.chat-list-head{ padding: 16px 18px; border-bottom: 1.5px solid var(--border-soft); font-family: var(--font-display); font-weight:700; font-size: 1rem; }
.chat-list-sub{ padding: 10px 18px 6px; font-size: 0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-faint); }
.chat-list-item{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.chat-list-item:hover{ background: var(--bg-elevated); }
.chat-list-item.active{ background: var(--bg-elevated); }
.chat-list-item .qa-avatar{ width:48px; height:48px; font-size:1rem; flex-shrink:0; }
.chat-list-item .cl-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chat-list-item .cl-name{ font-weight:600; font-size:0.94rem; }
.chat-list-item .cl-time{ font-size:0.7rem; color: var(--text-faint); flex-shrink:0; }
.chat-list-item .cl-preview{ font-size:0.8rem; color: var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

.chat-window{ display:flex; flex-direction:column; min-height: 0; background-size:cover; background-position:center; background-color: var(--bg-elevated); }
.chat-back-btn{ display:none; background:none; border:none; color: var(--text); font-size:1.3rem; cursor:pointer; padding: 4px 8px 4px 0; line-height:1; }
.chat-window-head{ padding:12px 18px; border-bottom: 1.5px solid var(--border-soft); background: rgba(10,10,10,0.9); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-window-head .cw-title{ display:flex; align-items:center; gap:10px; font-weight:600; }
.chat-messages{ flex:1; min-height: 0; overflow-y:auto; padding: 14px; display:flex; flex-direction:column; gap:5px; }
.chat-bubble{ max-width: 55%; width: fit-content; max-height: 100px; overflow-y: auto; padding:5px 10px; border-radius: 12px; font-size:0.78rem; line-height:1.35; border: 1.5px solid var(--border-soft); background: var(--bg-card); color: var(--text); white-space: pre-wrap; word-break: break-word; }
.chat-bubble.mine{ align-self:flex-end; background: var(--fill); color: var(--fill-text); border-color: var(--fill); border-bottom-right-radius: 4px; }
.chat-bubble:not(.mine){ border-bottom-left-radius: 4px; }
.chat-bubble .cb-time{ display:block; font-size:0.6rem; margin-top:2px; opacity:0.6; text-align:right; }
.chat-input-bar{ display:flex; gap:8px; padding: 8px 10px; border-top: 1.5px solid var(--border-soft); background: rgba(10,10,10,0.95); align-items:flex-end; }
.chat-input-bar input{ flex:1; background: var(--bg-elevated); color: var(--text); border:1.5px solid var(--border-soft); border-radius: 18px; padding:8px 14px; font-size:0.88rem; line-height:1.4; }
.chat-input-bar .btn{ border-radius:50%; width:36px; height:36px; padding:0; flex-shrink:0; font-size:0.8rem; }
.chat-wallpaper-btn{ font-size:0.78rem; color: var(--text-dim); display:flex; align-items:center; gap:6px; cursor:pointer; }
.chat-wallpaper-btn:hover{ color: var(--text); }
.chat-empty{ flex:1; display:flex; align-items:center; justify-content:center; color: var(--text-faint); font-size:0.9rem; text-align:center; padding: 20px; }
#chat-active{ flex: 1; min-height: 0; }

@media (max-width: 760px){
  .chat-layout{ grid-template-columns: 1fr; border: none; border-radius:0; height: calc(100dvh - 132px); min-height: 420px; margin: 0 -24px; width: calc(100% + 48px); }
  .chat-layout.show-window .chat-list{ display:none; }
  .chat-layout:not(.show-window) .chat-window{ display:none; }
  .chat-back-btn{ display:inline-flex; align-items:center; }
}

/* ============================================================ FOOTER */
footer{ border-top: 1.5px solid var(--border-soft); padding:30px 0; margin-top:40px; }
footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer p{ color: var(--text-faint); font-size:0.82rem; font-family: var(--font-mono); }

.admin-badge-nav{ font-family: var(--font-mono); font-size:0.7rem; background: var(--fill); color: var(--fill-text); padding:3px 8px; border-radius:5px; font-weight:700; }