/* =========================================================
   SISTEM MAGANG / PKL — Design System "Strata"
   Palet mineral · Tipografi Fraunces / Plus Jakarta Sans
   ========================================================= */

:root {
  /* Surface */
  --paper:        #F4F5F7;
  --paper-2:      #ECEEF1;
  --surface:      #FFFFFF;
  --line:         #E3E6EB;
  --line-soft:    #EEF0F3;

  /* Ink */
  --ink:          #16202C;
  --ink-2:        #38465A;
  --muted:        #6B7785;
  --anthracite:   #12161C;
  --anthracite-2: #1B212A;

  /* Mineral accents */
  --copper:       #B26A2B;
  --copper-deep:  #98571F;
  --copper-soft:  #F4E8DA;
  --copper-tint:  #FBF4EC;

  --malachite:      #1E875F;
  --malachite-soft: #E0F0E9;
  --malachite-tint: #F1F8F5;

  --garnet:       #B23A48;
  --garnet-soft:  #F7E3E5;

  --amber:        #B8810F;
  --amber-soft:   #F8EFD6;

  --azure:        #2D6CA6;
  --azure-soft:   #E4EEF6;

  /* Shape */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Shadow (soft, layered) */
  --sh-sm: 0 1px 2px rgba(16,22,28,.04), 0 1px 3px rgba(16,22,28,.06);
  --sh:    0 2px 4px rgba(16,22,28,.04), 0 6px 16px rgba(16,22,28,.07);
  --sh-lg: 0 8px 24px rgba(16,22,28,.10), 0 2px 6px rgba(16,22,28,.06);

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--copper-soft); color: var(--copper-deep); }

h1, h2, h3, .font-display { font-family: var(--font-display); }

.font-mono { font-family: var(--font-mono); }

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
}

/* Strata rule — signature multi-band divider */
.strata-rule {
  height: 4px; width: 56px; border-radius: 99px;
  background: linear-gradient(90deg,
    var(--copper) 0 28%, var(--amber) 28% 50%,
    var(--malachite) 50% 74%, var(--anthracite) 74% 100%);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow: var(--sh); transform: translateY(-2px); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-danger, .btn-success {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn-primary {
  background: linear-gradient(180deg, var(--copper), var(--copper-deep));
  color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--sh-sm);
}
.btn-primary:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-secondary:hover { background: var(--paper); border-color: #D4D8DE; }
.btn-success { background: var(--malachite); color: #fff; }
.btn-success:hover { background: #176B4B; transform: translateY(-1px); }
.btn-danger { background: var(--garnet); color: #fff; }
.btn-danger:hover { background: #92313D; transform: translateY(-1px); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ---------- Forms ---------- */
.form-input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .8rem; font-size: 14px; color: var(--ink);
  font-family: var(--font-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input::placeholder { color: #9AA3AD; }
.form-input:focus {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 3px var(--copper-soft);
}
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-2); margin-bottom: .35rem;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
}

/* ---------- Tables ---------- */
.table-th {
  padding: .7rem 1rem; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.table-td { padding: .8rem 1rem; font-size: 14px; color: var(--ink-2); }
.table-tr { border-bottom: 1px solid var(--line-soft); transition: background .12s ease; }
.table-tr:hover { background: var(--copper-tint); }
.table-tr:last-child { border-bottom: 0; }

/* ---------- Alerts ---------- */
.alert-success, .alert-error, .alert-info, .alert-warning {
  border-radius: var(--r); padding: .8rem 1rem; font-size: 14px;
  border: 1px solid transparent;
}
.alert-success { background: var(--malachite-tint); border-color: var(--malachite-soft); color: #14603F; }
.alert-error   { background: #FCF1F2; border-color: var(--garnet-soft); color: #8C2C38; }
.alert-info    { background: var(--azure-soft); border-color: #CFE0EE; color: #1E4E76; }
.alert-warning { background: var(--amber-soft); border-color: #F0E2BE; color: #7E590A; }

/* ---------- Sidebar ---------- */
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .62rem .85rem; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.62);
  position: relative; transition: background .15s ease, color .15s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -.85rem; top: 50%;
  transform: translateY(-50%); width: 3px; height: 18px; border-radius: 99px;
  background: var(--accent, var(--copper));
}
.sidebar-link i { width: 18px; text-align: center; }

/* ---------- Core-sample capacity meter (signature) ---------- */
.meter {
  position: relative; height: 10px; border-radius: 99px;
  background: var(--paper-2); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16,22,28,.06);
}
.meter > span {
  display: block; height: 100%; border-radius: 99px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.06));
  background-color: var(--meter-color, var(--malachite));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.meter.is-low   > span { --meter-color: var(--amber); }
.meter.is-full  > span { --meter-color: var(--garnet); }

/* Vertical core sample (used on cards) */
.core {
  width: 100%; height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--paper-2); display: flex; gap: 2px; padding: 0;
}

/* ---------- Status dot ---------- */
.dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }

/* ---------- Motion ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .19s; }
.rise-4 { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Texture: faint strata for dark panels ---------- */
.strata-bg {
  background-color: var(--anthracite);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    radial-gradient(120% 80% at 80% -10%, rgba(178,106,43,.18), transparent 60%);
}