/* ===== NK Minimal Reset ===== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif; color:#0f172a; }

/* ===== Colorful Animated Gradient Background ===== */
body.nk-body{
  background: linear-gradient(120deg,#ff7a7a,#ffd166,#06d6a0,#48dbfb,#8a5cf6,#f78fb3,#ff7a7a);
  background-size: 480% 480%;
  animation: nkGradientShift 28s ease infinite;
}
@keyframes nkGradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.nk-body::before{
  content:""; position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(800px 400px at 110% 10%,  rgba(255,255,255,.12), transparent 50%),
    radial-gradient(600px 600px at 50% 120%,  rgba(255,255,255,.10), transparent 60%);
}
@media (prefers-reduced-motion: reduce){ body.nk-body{ animation:none; } }

/* ===== Tokens & Glass ===== */
:root{
  --container: 1200px;
  --radius: 16px;
  --glass-bg: rgba(255,255,255,.16);
  --glass-bg-dark: rgba(0,0,0,.28);
  --glass-border: rgba(255,255,255,.32);
  --glass-blur: 12px;
  --shadow: 0 12px 34px rgba(0,0,0,.25);
  --gap: 24px;
}
.nk-container{ max-width:var(--container); margin:0 auto; padding:0 16px; }
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.20);
  position: relative;
}
.glass-dark{ background: var(--glass-bg-dark); border-color: rgba(255,255,255,.22); color:#eaf2ff; }
.glass::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%); mix-blend-mode: screen; opacity:.6; }

.nk-btn{ display:inline-block; padding:10px 14px; border-radius:12px; background:#111827; color:#fff; text-decoration:none; border:0; cursor:pointer; }
.nk-btn--ghost{ background:transparent; border:1px solid rgba(0,0,0,.2); color:#111827; }
.nk-btn-ghost{ background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.nk-ic{ width:16px; height:16px; }

/* ===== Header & Nav ===== */
.nk-header{ position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.24); }
.nk-header__wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.nk-logo img{ height:36px; }
.nk-nav{ display:flex; gap:16px; }
.nk-nav__link{ text-decoration:none; color:#1f2937; font-weight:600; padding:6px 10px; border-radius:10px; }
.nk-nav__link:hover, .nk-active{ background:rgba(0,0,0,.06); }
.nk-burger{ display:none; background:transparent; border:0; }
.nk-burger span{ display:block; width:22px; height:2px; background:#111; margin:4px 0; border-radius:2px; }
.nk-nav--mobile{ display:none; position:fixed; left:0; right:0; top:56px; background:rgba(255,255,255,.92); border-bottom:1px solid rgba(0,0,0,.08); padding:8px 16px; }
.nk-nav--mobile .nk-nav__link{ display:block; padding:10px 6px; }

/* ===== Hero ===== */
.nk-hero{ padding:40px 0; position:relative; }
.nk-hero[style*="--hero"]{ background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.0)), var(--hero); background-size:cover; background-position:center; }
.nk-hero__chip{ display:inline-block; padding:14px 20px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.28); color:#fff; }

/* ===== Layout ===== */
.nk-main{ padding:32px 0 40px; }
.nk-grid-2col{ display:grid; grid-template-columns: 280px 1fr; gap: var(--gap); }
@media (max-width: 992px){ .nk-grid-2col{ grid-template-columns: 1fr; } }

/* ===== Sidebar ===== */
.nk-sidebar{ padding:20px 18px; }
.nk-sideblock{ margin-bottom:18px; }
.nk-sideblock__title{ margin:0 0 8px; font-size:18px; font-weight:700; }
.nk-search{ display:flex; gap:8px; }
.nk-search input{ flex:1; height:40px; padding:0 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; background:rgba(255,255,255,.8); }
.nk-checklist{ list-style:none; margin:0; padding:0; }
.nk-check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.nk-check input{ width:16px; height:16px; }

/* ===== Toolbar ===== */
.nk-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin-bottom:18px; }
.nk-sort select{ height:36px; padding:0 10px; border:1px solid rgba(0,0,0,.2); border-radius:8px; background:rgba(255,255,255,.7); }

/* ===== USP strip ===== */
.nk-usp{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; padding:10px 14px; margin-bottom:12px; }
.nk-usp__item{ display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3); }
.nk-usp__item--accent{ background:rgba(255,189,46,.9); color:#1a1a1a; border-color:rgba(0,0,0,.12); }

/* ===== Cards ===== */
.nk-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 24px; }
@media (max-width: 1024px){ .nk-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .nk-cards{ grid-template-columns: 1fr; } }

.nk-card{ padding:12px; border-radius:16px; display:flex; flex-direction:column; min-height:460px; }
.nk-thumb{ position:relative; border-radius:12px; overflow:hidden; background:#f2f4f7; }
.nk-thumb img{ width:100%; height:240px; object-fit:cover; display:block; }
.nk-badge{ position:absolute; left:10px; padding:6px 10px; font-size:12px; line-height:1; border-radius:999px; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.nk-badge--year{ top:10px; font-weight:700; background:rgba(255,189,46,.95); color:#1a1a1a; }
.nk-badge--km{ bottom:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,.35); color:#fff; }
.nk-card__body{ display:flex; flex-direction:column; gap:6px; margin-top:12px; min-height:180px; }
.nk-title{ margin:0; }
.nk-title a{ color:inherit; text-decoration:none; font-size:16px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nk-price{ font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nk-monthly{ margin-top:-2px; font-size:13px; opacity:.9; }
.nk-monthly strong{ font-size:15px; }

.nk-pills{ list-style:none; padding:0; margin:2px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.nk-pills li{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; line-height:1; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#111827; }
.nk-card__cta{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

/* ===== Pagination ===== */
.nk-pagination{ margin:28px auto 0; display:flex; gap:8px; justify-content:center; padding:6px 10px; border-radius:999px; }
.nk-page{ display:inline-block; padding:6px 12px; border-radius:999px; text-decoration:none; color:#111827; border:1px solid rgba(0,0,0,.15); }
.nk-page--active{ background:#111827; color:#fff; }

/* ===== Empty ===== */
.nk-empty{ text-align:center; padding:40px 10px; }

/* ===== Footer ===== */
.nk-footer{ padding:40px 0; color:#eaf2ff; margin-top:40px; }
.nk-footer__grid{ display:grid; gap:24px; grid-template-columns: 1.2fr .8fr .8fr; }
.nk-footer__logo{ height:32px; margin-bottom:8px; }
.nk-links{ list-style:none; padding:0; margin:0; }
.nk-links a{ color:#eaf2ff; text-decoration:none; }
.nk-copy{ text-align:center; margin-top:20px; font-size:13px; opacity:.85; }
@media (max-width: 768px){ .nk-footer__grid{ grid-template-columns:1fr; } }

/* ===== Sticky CTA & Top button ===== */
.nk-sticky-cta{ position:fixed; right:14px; bottom:14px; display:flex; gap:10px; z-index:20; padding:10px; border-radius:14px; }
.nk-top{ position:fixed; right:14px; bottom:74px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.2); background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer; display:none; align-items:center; justify-content:center; }

/* ===== Forms / Modal ===== */
.nk-form input[type="text"], .nk-form input[type="tel"], .nk-form input[type="number"]{
  width:100%; height:40px; padding:0 10px; border:1px solid rgba(0,0,0,.18); border-radius:10px; background:rgba(255,255,255,.8);
}
.nk-inline{ display:flex; align-items:center; gap:8px; }
.nk-hint{ display:block; margin-top:6px; opacity:.8; font-size:12px; }
.nk-modal{ position:fixed; inset:0; display:none; z-index:50; }
.nk-modal[aria-hidden="false"]{ display:block; }
.nk-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.9); }
.nk-modal__content{ position:relative; max-width:680px; margin:6vh auto; padding:18px; color:#fff;}
.nk-modal__close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:22px; cursor:pointer; }
.nk-modal__title{ margin:0 0 8px; }
.nk-form--grid{ display:grid; grid-template-columns: 160px 1fr; gap:10px 12px; }
.nk-radio{ display:flex; gap:12px; align-items:center; }
.nk-range-val{ font-weight:600; align-self:center; }
.nk-sim-result{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; padding:10px 12px; margin:12px 0; }
.nk-sim-result div{ display:flex; flex-direction:column; gap:2px; }
.nk-sim-result span{ font-size:12px; opacity:.8; }
.nk-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:680px){
  .nk-form--grid{ grid-template-columns: 1fr; }
  .nk-sim-result{ grid-template-columns: 1fr; }
}

/* ===== Pre-Approval tidy pack ===== */
.nk-preapp{ display:flex; flex-direction:column; gap:12px; }
.nk-preapp .nk-field{ display:flex; flex-direction:column; gap:6px; }
.nk-preapp label{
  font-weight:700; font-size:13px; line-height:1; color:#eaf2ff; opacity:.95;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.nk-preapp input[type="text"],
.nk-preapp input[type="tel"],
.nk-preapp input[type="number"]{
  height:42px; padding:0 12px; border-radius:12px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.nk-preapp input::placeholder{ color:#64748b; opacity:.9; }

/* DP & Tenor sejajar */
.nk-preapp .nk-field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* Suffix di dalam field */
.nk-input-suffix{ position:relative; }
.nk-input-suffix input{ padding-right:56px; }
.nk-input-suffix .suffix{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-weight:700; opacity:.8;
  background:rgba(255,255,255,.55); padding:2px 8px; border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
}

/* Button full-width & konsisten */
.nk-preapp .nk-btn{ width:100%; justify-content:center; height:44px; }

/* Responsif: stack di mobile kecil */
@media (max-width:520px){
  .nk-preapp .nk-field-row{ grid-template-columns: 1fr; }
}

/* Select tampil konsisten dengan input */
.nk-form select,
.nk-preapp select{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  appearance:none;            /* hilangkan arrow default sebagian browser */
  background-image: linear-gradient(45deg, transparent 50%, #111 50%),
                    linear-gradient(135deg, #111 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}

/* ===== Helpers */
.nk-hide{ position:absolute !important; opacity:0 !important; pointer-events:none !important; height:0 !important; width:0 !important; }

/* ===== Rich Select (gambar + search) ===== */
.nk-richselect{ position:relative; }
.nk-richselect__trigger{
  width:100%; display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:12px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18);
}
.nk-richselect__thumb{ width:44px; height:44px; border-radius:10px; object-fit:cover; background:#f2f4f7; }
.nk-richselect__meta{ display:flex; flex-direction:column; line-height:1.1; }
.nk-richselect__title{ font-weight:700; font-size:14px; }
.nk-richselect__price{ font-size:12px; opacity:.9; }
.nk-richselect__chev{ margin-left:auto; opacity:.9; }

.nk-richselect__panel{
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px);
  padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.35);
  display:none; max-height:360px; overflow:auto;
}
.nk-richselect.open .nk-richselect__panel{ display:block; }

.nk-richselect__search input{
  width:100%; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.9); padding:0 12px; margin-bottom:8px;
}
.nk-richselect__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.nk-richselect__item{
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px;
  background:rgba(255,255,255,.18); border:1px solid rgba(0,0,0,.06); cursor:pointer;
}
.nk-richselect__item:hover{ background:rgba(255,255,255,.3); }
.nk-item__thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:#f2f4f7; }
.nk-item__meta{ display:flex; flex-direction:column; }
.nk-item__title{ font-weight:700; font-size:13.5px; line-height:1.15; }
.nk-item__price{ font-size:12px; opacity:.9; }

/* --- FIX: pastikan panel dropdown bisa melewati kontainer modal --- */
.nk-modal__content{ overflow: visible; }

/* --- FIX: panel selalu di atas konten lain --- */
.nk-richselect__panel{ z-index: 9999; }

/* Opsional: cursor & hover pada trigger */
.nk-richselect__trigger{ cursor:pointer; }
.nk-richselect__trigger:active{ transform: translateY(0.5px); }