/* public/assets/css/jalur.css — Tampilan keluarga NihongoPads, arah desain "Jalur kereta"
   (sumber: masuk/web/nihongopads/public/aset/gaya.css). Dimuat SETELAH style.css: menimpa token kp-*
   supaya semua halaman lama ikut, lalu menambah komponen khas (header malam, stasiun, pita level).
   Mau ganti warna/font? Mulai dari blok :root ini. */

:root {
  --latar: #f2f3ef;
  --putih: #ffffff;
  --malam: #14213d;
  --abu: #5b6272;
  --garis: #d6d9d0;
  --kuning: #f5c518;
  --n5: #1f8a4c;
  --n4: #1a7fc1;
  --n3: #d9730d;
  --n2: #b8336a;
  --n1: #c62f2f;
  --benar-latar: #e3f3e9;
  --salah-latar: #fbe7e7;
  --kondensed: "Barlow Semi Condensed", "Zen Kaku Gothic New", sans-serif;
  --sans: "Zen Kaku Gothic New", system-ui, sans-serif;

  /* Token lama KanjiPads → palet NihongoPads */
  --kp-paper: var(--latar);
  --kp-paper-2: #e8eae3;
  --kp-card: var(--putih);
  --kp-ink: var(--malam);
  --kp-ink-soft: var(--abu);
  --kp-line: var(--garis);
  --kp-indigo: var(--malam);
  --kp-indigo-2: #0c1528;
  --kp-indigo-tint: #e6e9f0;
  --kp-shu: var(--n1);
  --kp-shu-tint: var(--salah-latar);
  --kp-success: var(--n5);
  --kp-success-tint: var(--benar-latar);
  --kp-danger: var(--n1);
  --kp-danger-tint: var(--salah-latar);
  --kp-radius: 12px;
  --kp-shadow: none;
  --kp-font: var(--sans);
  --kp-font-display: var(--sans);
  --tblr-primary: var(--malam);
  --tblr-primary-rgb: 20, 33, 61;
  --tblr-font-sans-serif: var(--sans);
  --tblr-border-radius: 10px;
}

body.kp-body { font: 400 16px/1.6 var(--sans); }
.kp-body h1, .kp-body h2, .kp-body .h2 { font-family: var(--kondensed); font-weight: 800; letter-spacing: 0; }
.kp-body h3, .kp-body .h3 { font-family: var(--kondensed); font-weight: 700; font-size: 22px; }
.kp-body a { color: var(--malam); }
.kp-body :focus-visible { outline: 3px solid var(--kuning); outline-offset: 2px; }

/* ── Tombol pil ── */
.kp-body .btn { border-radius: 999px; font-weight: 700; min-height: 44px; padding-left: 20px; padding-right: 20px; display: inline-flex; align-items: center; justify-content: center; }
.kp-body .btn-sm { min-height: 36px; padding-left: 14px; padding-right: 14px; font-size: 14px; }
.kp-body .btn-primary { --tblr-btn-bg: var(--malam); --tblr-btn-border-color: var(--malam); --tblr-btn-hover-bg: #0c1528; --tblr-btn-hover-border-color: #0c1528; color: #fff; }
.kp-body .btn-outline-primary { --tblr-btn-color: var(--malam); --tblr-btn-border-color: var(--malam); --tblr-btn-hover-bg: var(--malam); --tblr-btn-hover-border-color: var(--malam); --tblr-btn-hover-color: #fff; border-width: 2px; }
.kp-body .btn-warning { --tblr-btn-bg: var(--kuning); --tblr-btn-border-color: var(--kuning); --tblr-btn-color: var(--malam); --tblr-btn-hover-bg: #e3b40c; --tblr-btn-hover-border-color: #e3b40c; --tblr-btn-hover-color: var(--malam); color: var(--malam); }
.kp-body .btn-success { --tblr-btn-bg: var(--n5); --tblr-btn-border-color: var(--n5); color: #fff; }
.kp-body .btn-ghost-primary { color: var(--malam); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.kp-body .btn-lg { min-height: 50px; font-size: 17px; padding-left: 26px; padding-right: 26px; }

/* ── Form ── */
.kp-body .form-control, .kp-body .form-select { min-height: 48px; border: 2px solid var(--garis); border-radius: 10px; background-color: #fafaf7; font-size: 16px; color: var(--malam); }
.kp-body .form-control-sm, .kp-body .form-select-sm { min-height: 38px; font-size: 14px; }
.kp-body .form-control:focus, .kp-body .form-select:focus { border-color: var(--malam); box-shadow: 0 0 0 3px rgba(245, 197, 24, .55); }
.kp-body .form-label { font-weight: 700; }
.kp-body .form-check-input:checked { background-color: var(--malam); border-color: var(--malam); }

/* ── Header malam ── */
.kp-nav { background: var(--malam); border-bottom: 0; color: #fff; }
.kp-nav-inner { max-width: 1120px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.kp-brand { color: #fff !important; font: 800 21px/1 var(--kondensed); gap: 10px; min-height: 44px; }
.kp-brand-mark { width: 28px; height: 28px; border-radius: 50%; border: 5px solid var(--n1); background: #fff; display: block; }
.kp-nav-links a { color: #c9d1e3; font-size: 15px; font-weight: 500; padding: 8px 12px; }
.kp-nav-links a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.kp-nav-links a.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 -3px 0 var(--kuning); }
.kp-nav-user { color: #c9d1e3 !important; }
.kp-nav-user:hover, .kp-nav-user.active { background: rgba(255, 255, 255, .1); color: #fff !important; }
.kp-btn-nav { background: #fff; color: var(--malam) !important; border: 0; }
.kp-btn-nav:hover { background: var(--kuning); }
.kp-logout-form { margin: 0; }
.kp-premium-chip { background: var(--kuning); color: var(--malam); font: 700 12px/1 var(--sans); padding: 5px 9px; border-radius: 4px; }
.kp-subnav { background: #0f1a31; border-top: 1px solid rgba(255, 255, 255, .08); }
.kp-subnav a { color: #c9d1e3; }
.kp-subnav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.kp-subnav a.active { background: #fff; color: var(--malam); box-shadow: none; }
@media (max-width: 640px) {
  .kp-nav-links { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .kp-nav-links a { white-space: nowrap; }
}

/* ── Kartu & teks ── */
.kp-card { border: 0; box-shadow: none; border-radius: 12px; }
.kp-container { max-width: 1120px; }
.kp-narrow { max-width: 680px; }
.kp-page-header { padding: 32px 0 18px; }
.kp-page-header h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.1; margin-bottom: 6px; }
.kp-alert, .kp-flash { border-radius: 8px; font-size: 15px; }
.kp-alert-info, .kp-flash-info { background: #fff; color: var(--malam); border-left: 4px solid var(--kuning); }
.kp-alert-success, .kp-flash-success { border-left: 4px solid var(--n5); color: var(--malam); }
.kp-alert-error, .kp-flash-error { border-left: 4px solid var(--n1); color: var(--malam); }
.kp-footer { border-top: 0; font-size: 14px; }
.kp-footer a { min-height: 32px; display: inline-flex; align-items: center; }
.kp-pill-ok { background: var(--benar-latar); color: #14673a; }

/* ── Stasiun (lencana level) ── */
.kp-body .kp-level-badge { background: #fff; color: var(--malam); border: 6px solid var(--w, var(--n5)); font: 800 16px/1 var(--kondensed); }
.kp-body .kp-level-n5 { --w: var(--n5); }
.kp-body .kp-level-n4 { --w: var(--n4); }
.kp-body .kp-level-n3 { --w: var(--n3); }
.kp-body .kp-level-n2 { --w: var(--n2); }
.kp-body .kp-level-n1 { --w: var(--n1); }
.kp-body .kp-level-kana { --w: var(--malam); font-family: var(--sans); font-size: 20px; }
.kp-body .kp-level-stack .kp-level-badge { border-width: 4px; }

/* ── Harga ── */
.kp-pricing { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kp-plan { border-top: 8px solid var(--n4); padding: 22px 20px; }
.kp-plan-free { border-top-color: var(--n5); }
.kp-plan.featured { border-top-color: var(--kuning); box-shadow: 0 0 0 2px var(--malam); }
.kp-plan-badge { background: var(--kuning); color: var(--malam); border-radius: 4px; top: -14px; }
.kp-plan-name { font: 800 22px/1.1 var(--kondensed); }
.kp-plan-price { font: 800 34px/1 var(--kondensed); }
.kp-plan-note { font-size: 14px; }
.kp-plan-actions { display: grid; gap: 6px; }
.kp-owned { color: #14673a; }

/* ── Transfer manual ── */
.kp-steps { padding-left: 20px; margin: 0; display: grid; gap: 16px; }
.kp-steps li { padding-left: 4px; }
.kp-accounts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.kp-accounts li { background: var(--latar); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border-left: 6px solid var(--n4); }
.kp-acc-name { font-weight: 700; min-width: 80px; }
.kp-acc-number { font: 800 20px/1.2 var(--kondensed); letter-spacing: .02em; }

/* ── Admin: permintaan & premium ── */
.kp-request { border-left: 6px solid var(--kuning); }
.kp-request-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.kp-request-amount { font: 800 26px/1 var(--kondensed); white-space: nowrap; }
.kp-request-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kp-request-actions form { margin: 0; }
.kp-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kp-inline-form .form-select { width: auto; max-width: 100%; }
.kp-days-input { width: 90px !important; }
.kp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kp-dl dt { color: var(--abu); font-weight: 500; }
.kp-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kp-dl { grid-template-columns: 1fr; } .kp-dl dd { margin-bottom: 6px; } }

/* ── Landing: papan stasiun & peta jalur ── */
.kp-papan-wrap { background: var(--malam); padding: 8px 0 40px; }
.kp-papan { --w: var(--n1); background: var(--putih); border-radius: 10px; overflow: hidden; }
.kp-papan-isi { padding: 28px 20px 22px; text-align: center; }
.kp-papan-jp { font: 900 15px/1 var(--sans); letter-spacing: .3em; color: var(--abu); margin: 0 0 10px; }
.kp-papan h1 { font: 800 clamp(38px, 9.5vw, 72px)/1 var(--kondensed); margin: 0; }
.kp-papan h1 span { color: var(--w); }
.kp-papan-sub { font-size: 17px; color: var(--abu); margin: 14px auto 0; max-width: 44ch; }
.kp-papan-pita { background: linear-gradient(90deg, var(--n5) 0 20%, var(--n4) 20% 40%, var(--n3) 40% 60%, var(--n2) 60% 80%, var(--n1) 80%); height: 14px; }
.kp-papan-bawah { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font: 700 15px/1.2 var(--kondensed); background: #fafaf7; border-top: 1px solid var(--garis); }
.kp-papan-bawah small { display: block; font: 500 12px/1.3 var(--sans); color: var(--abu); }
.kp-papan-bawah .kanan { text-align: right; }
.kp-tombol-baris { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

.kp-bagian { padding: 56px 0; }
.kp-bagian.gelap { background: var(--malam); color: #fff; }
.kp-bagian.gelap h2 { color: #fff; }
.kp-bagian.gelap p { color: #c9d1e3; }
.kp-bagian h2 { font-size: clamp(28px, 6vw, 40px); line-height: 1.1; margin: 0 0 8px; }
.kp-ket { color: var(--abu); margin: 0 0 28px; max-width: 56ch; }

.kp-stasiun { width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 6px solid var(--w); display: grid; place-items: center; font: 800 16px/1 var(--kondensed); color: var(--malam); position: relative; z-index: 1; }
.kp-jalur { list-style: none; margin: 0; padding: 0; position: relative; }
.kp-jalur::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 8px; border-radius: 4px; background: linear-gradient(var(--n5) 0 20%, var(--n4) 20% 40%, var(--n3) 40% 60%, var(--n2) 60% 80%, var(--n1) 80%); }
.kp-jalur li { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; padding: 10px 0; }
.kp-kartu { background: var(--putih); border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-left: 6px solid var(--w); }
.kp-kartu p { margin: 0; font-size: 14px; color: var(--abu); }
.kp-kartu b { display: block; font-size: 16px; color: var(--malam); }
.kp-kartu .kp-tag { flex: none; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px; background: var(--latar); color: var(--malam); white-space: nowrap; }
.kp-kartu .kp-tag.gratis { background: var(--benar-latar); color: #14673a; }

.kp-poin { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.kp-poin li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.kp-poin i { width: 40px; height: 40px; border-radius: 8px; background: var(--malam); color: var(--kuning); display: grid; place-items: center; font: 800 20px/1 var(--sans); font-style: normal; }
.kp-bagian.gelap .kp-poin i { background: #fff; color: var(--malam); }
.kp-poin b { display: block; }
.kp-poin p { margin: 0; color: var(--abu); font-size: 15px; }

@media (min-width: 880px) {
  .kp-papan-isi { padding: 48px 40px 36px; }
  .kp-papan-bawah { padding: 14px 28px; font-size: 18px; }
  .kp-jalur { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
  .kp-jalur::before { left: 10%; right: 10%; top: 21px; bottom: auto; width: auto; height: 8px; background: linear-gradient(90deg, var(--n5) 0 25%, var(--n4) 25% 50%, var(--n3) 50% 75%, var(--n2) 75% 100%); }
  .kp-jalur li { grid-template-columns: 1fr; justify-items: center; padding: 0; align-items: start; }
  .kp-kartu { flex-direction: column; align-items: flex-start; border-left: 0; border-top: 6px solid var(--w); width: 100%; min-height: 150px; justify-content: space-between; }
  .kp-poin { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}