/* =========================================================================
   AES-128 Lab — Stylesheet
   Tema: "Cipher Lab" — konsol kriptografi gelap dengan aksen warna per-layer
   ========================================================================= */

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

:root{
  --bg: #0a0d12;
  --bg-grid: #0d1117;
  --panel: #12161d;
  --panel-2: #161b23;
  --border: #232a35;
  --border-soft: #1b212b;
  --text: #e7ecf2;
  --muted: #8893a1;
  --muted-2: #5d6878;

  --amber: #e8a33d;   /* SubBytes */
  --cyan: #4fd1c5;    /* ShiftRows */
  --violet: #a78bfa;  /* MixColumns */
  --rose: #fb7185;    /* AddRoundKey */
  --green: #34d399;   /* hasil akhir */
  --blue: #60a5fa;    /* plain/state netral */

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

  --radius: 10px;
}

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

body{
  margin:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(79,209,197,0.06), transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 10%, rgba(167,139,250,0.06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* subtle hex-grid texture overlay */
body::before{
  content:'';
  position: fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 10%, transparent 75%);
}

a{ color:inherit; }

::selection{ background: rgba(232,163,61,0.35); }

/* ---------------------------- Header / Hero ---------------------------- */

.topbar{
  position: relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--border-soft);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display); font-weight:700; letter-spacing:0.02em;
}
.brand .mark{
  width:34px; height:34px; border-radius:8px;
  background: linear-gradient(135deg, var(--amber), var(--rose));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; color:#0a0d12; font-size:13px;
}
.brand small{
  display:block; font-family: var(--font-mono); font-weight:400; color: var(--muted); font-size:11px; letter-spacing:0.08em;
}
.topbar .badge{
  font-family: var(--font-mono); font-size:11px; color: var(--muted);
  border:1px solid var(--border); padding:6px 12px; border-radius:999px;
  letter-spacing:0.05em;
}

.hero{
  position: relative; z-index:2;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px;
  align-items:center;
  padding: 56px clamp(20px, 5vw, 64px) 40px;
}
.hero h1{
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.12; margin:0 0 16px;
  letter-spacing: -0.01em;
}
.hero h1 .accent{ color: var(--amber); }
.hero p{ color: var(--muted); font-size:15.5px; max-width: 52ch; margin:0 0 22px; }
.hero .meta-row{ display:flex; gap:10px; flex-wrap:wrap; }
.meta-chip{
  font-family: var(--font-mono); font-size:12px; color: var(--text);
  background: var(--panel); border:1px solid var(--border);
  padding:7px 12px; border-radius:8px;
}
.meta-chip b{ color: var(--cyan); font-weight:600; }

/* Signature element: animated hero state matrix */
.hero-visual{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding: 26px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.hero-visual .hv-label{
  font-family: var(--font-mono); font-size:11px; color: var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
table.hero-matrix{ border-collapse:collapse; }
table.hero-matrix td{
  width:54px; height:54px; text-align:center;
  font-family: var(--font-mono); font-weight:600; font-size:16px;
  border:1px solid var(--border);
  color: var(--amber);
  background: var(--panel-2);
  animation: flicker 4.5s ease-in-out infinite;
}
table.hero-matrix td:nth-child(2n){ animation-delay: .3s; color: var(--cyan); }
table.hero-matrix td:nth-child(3n){ animation-delay: .6s; color: var(--violet); }
table.hero-matrix tr:nth-child(2n) td{ animation-delay: .9s; }
@keyframes flicker{
  0%, 100% { opacity:1; }
  50% { opacity:0.55; }
}
.hv-caption{ font-family: var(--font-mono); font-size:11px; color: var(--muted-2); }

/* ---------------------------- Layout ---------------------------- */

.workspace{
  position: relative; z-index:2;
  max-width: 1180px; margin:0 auto; padding: 0 clamp(20px,5vw,64px) 100px;
}

.panel{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.io-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px;
  margin-bottom: 28px;
}
@media (max-width: 860px){ .io-grid{ grid-template-columns: 1fr; } .hero{ grid-template-columns:1fr; } }

.field{ margin-bottom:16px; }
.field label{
  display:block; font-family: var(--font-mono); font-size:11.5px; color: var(--muted);
  margin-bottom:8px; letter-spacing:0.03em;
}
.field textarea, .field input[type=text]{
  width:100%; resize: vertical; min-height:46px;
  background: var(--panel-2); border:1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size:14px; padding:12px 14px; border-radius:8px;
  outline:none; transition: border-color .15s;
}
.field textarea:focus, .field input:focus{ border-color: var(--amber); }

.mode-toggle{
  display:flex; gap:8px; margin-bottom:18px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:4px;
}
.mode-toggle label{
  flex:1; text-align:center; padding:10px; border-radius:7px; cursor:pointer;
  font-family: var(--font-mono); font-size:13px; color: var(--muted);
  transition: all .15s;
}
.mode-toggle input{ display:none; }
.mode-toggle input:checked + span{ color:#0a0d12; }
.mode-toggle label:has(input:checked){ background: var(--amber); }
.mode-toggle label:has(input:checked){ color:#0a0d12; font-weight:600; }

.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.03em;
  padding:12px 20px; border-radius:8px; border:1px solid var(--border);
  cursor:pointer; background: var(--panel-2); color: var(--text);
  transition: transform .1s, border-color .15s, background .15s;
}
.btn:hover{ border-color: var(--amber); }
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--amber); color:#0a0d12; border-color: var(--amber); }
.btn-primary:hover{ filter: brightness(1.08); }
.btn-ghost{ background:transparent; }

.output-area{ display:flex; gap:8px; }
.output-area input{ flex:1; }

.error-box{
  display:none; margin-top:10px; padding:10px 14px; border-radius:8px;
  border:1px solid rgba(251,113,133,0.4); background: rgba(251,113,133,0.08);
  color: var(--rose); font-family: var(--font-mono); font-size:12.5px;
}
.error-box.show{ display:block; }

/* ---------------------------- Detail toggle bar ---------------------------- */

.detail-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin: 8px 0 18px;
}
.detail-bar h2{ font-family: var(--font-display); font-size:18px; margin:0; }

/* ---------------------------- Round rail ---------------------------- */

.round-rail{
  position: sticky; top:14px; z-index:5;
  display:flex; gap:6px; flex-wrap:wrap;
  background: var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:8px; margin-bottom:22px;
  font-family: var(--font-mono); font-size:12px;
}
.rail-item{
  text-decoration:none; color: var(--muted); padding:7px 11px; border-radius:7px;
  transition: all .15s;
}
.rail-item:hover{ background: var(--panel-2); color: var(--text); }
.rail-item.active{ background: var(--amber); color:#0a0d12; font-weight:700; }
.rail-item.rail-final.active{ background: var(--green); }

/* ---------------------------- Phase sections ---------------------------- */

.phase-section{
  margin-bottom: 26px;
  padding: 22px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: 70px;
}
.phase-result{ border-color: var(--green); box-shadow: 0 0 0 1px rgba(52,211,153,0.15); }

.phase-title{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display); font-size:18px; margin:0 0 6px;
}
.phase-num{
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  background: var(--panel-2); border:1px solid var(--border); color: var(--amber);
  padding:4px 8px; border-radius:6px;
}
.phase-desc{ color: var(--muted); font-size:13.5px; margin:0 0 16px; max-width:70ch; }

details.collapsible{
  border:1px solid var(--border-soft); border-radius:8px; margin-bottom:12px;
  background: var(--panel-2);
}
details.collapsible > summary{
  cursor:pointer; padding:12px 16px; font-family: var(--font-mono); font-size:12.5px;
  color: var(--muted); list-style:none; display:flex; align-items:center; gap:8px;
}
details.collapsible > summary::-webkit-details-marker{ display:none; }
details.collapsible > summary::before{ content:'▸'; color: var(--amber); transition: transform .15s; }
details.collapsible[open] > summary::before{ transform: rotate(90deg); }
details.collapsible > summary:hover{ color: var(--text); }
details.collapsible > *:not(summary){ padding: 4px 16px 16px; }

/* ---- operation rows ---- */
.op-row{ padding: 14px 0; border-top:1px solid var(--border-soft); }
.op-row:first-child{ border-top:none; }
.op-title{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:13px; font-weight:600; margin-bottom:12px;
}
.op-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.op-sub{ background: var(--amber); }
.op-shift{ background: var(--cyan); }
.op-mix{ background: var(--violet); }
.op-key{ background: var(--rose); }

.op-matrices{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.op-arrow{ font-size:18px; color: var(--muted-2); }

.matrix-block{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.matrix-label{ font-family: var(--font-mono); font-size:10.5px; color: var(--muted); letter-spacing:0.04em; }
.matrix-hex{ font-family: var(--font-mono); font-size:10.5px; color: var(--muted-2); letter-spacing:0.03em; word-break:break-all; max-width:200px; text-align:center; }

table.state-matrix{ border-collapse:collapse; }
table.state-matrix td{
  width:38px; height:38px; text-align:center;
  font-family: var(--font-mono); font-size:13px; font-weight:500;
  border:1px solid var(--border); background: var(--panel-2); color: var(--text);
}
table.matrix-plain td{ color: var(--blue); }
table.matrix-sub td{ color: var(--amber); }
table.matrix-shift td{ color: var(--cyan); }
table.matrix-mix td{ color: var(--violet); }
table.matrix-key td{ color: var(--rose); }
table.matrix-cipher td{ color: var(--green); }
td.cell-changed{ background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px currentColor; }

/* ---- key expansion words ---- */
.word-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:10px; }
.word-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius:8px; padding:10px 12px;
  font-family: var(--font-mono); font-size:12px;
}
.word-card.word-g{ border-color: rgba(232,163,61,0.4); }
.word-head{ font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.g-badge{ font-size:9.5px; background: var(--amber); color:#0a0d12; padding:2px 6px; border-radius:5px; font-weight:700; }
.g-steps{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.g-step{ display:flex; justify-content:space-between; gap:8px; color: var(--muted); font-size:11px; }
.g-step span:first-child{ flex-shrink:0; }
.g-step.g-result{ color: var(--amber); }
.mini-word{ color: var(--text); letter-spacing:0.04em; }
.word-final{ color: var(--muted); font-size:11px; word-break:break-all; }
.word-final b{ color: var(--cyan); }

.rk-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.rk-card{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.rk-title{ font-family: var(--font-mono); font-size:11px; color: var(--muted); text-align:center; }

/* ---- Key Expansion: tabel ringkas ---- */
.kx-groups{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
details.kx-group{ background: var(--panel-2); }
details.kx-group > summary{ font-weight:600; color: var(--text); }

table.kx-table{
  width:100%; border-collapse:collapse; font-family: var(--font-mono); font-size:11.5px;
  margin-bottom:14px;
}
table.kx-table th{
  text-align:left; padding:8px 10px; color: var(--amber); border-bottom:1px solid var(--border);
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;
}
table.kx-table td{
  padding:8px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; color: var(--text);
}
table.kx-table tr:last-child td{ border-bottom:none; }
td.kx-word{ color: var(--cyan); font-weight:600; white-space:nowrap; }
td.kx-mono{ color: var(--muted); white-space:nowrap; }
td.kx-result{ color: var(--green); font-weight:600; }
tr.kx-g-row{ background: rgba(232,163,61,0.04); }
td.kx-g-cell{ padding:6px 10px; }
.kx-g-line{ display:flex; gap:8px; font-size:10.5px; color: var(--muted); padding:1px 0; }
.kx-g-line span:first-child{ flex-shrink:0; min-width:118px; }
.kx-g-line.kx-g-result{ color: var(--amber); font-weight:600; }
.kx-rk-preview{ display:flex; align-items:center; gap:16px; padding: 4px 10px 12px; }

/* ---------------------------- Footer ---------------------------- */
.site-footer{
  position:relative; z-index:2; text-align:center; padding:30px;
  font-family: var(--font-mono); font-size:11.5px; color: var(--muted-2);
  border-top:1px solid var(--border-soft);
}

/* ---------------------------- Empty state ---------------------------- */
.empty-state{
  text-align:center; padding:60px 20px; color: var(--muted-2);
  font-family: var(--font-mono); font-size:13px;
}

#detailHost:not(.has-content) + .empty-hint{ display:block; }
.empty-hint{ display:none; }