.card { border-radius: 14px; }
.btn { border-radius: 12px; }
.badge { border-radius: 999px; }
.camera-wrap{
  position: relative;
  width: 100%;
  height: 320px;
  background: #000;
  overflow: hidden;
  border-radius: 14px;
}
.camera-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame{
  position: absolute;
  border: 3px solid rgba(255,255,255,0.95);
  border-radius: 14px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.35);
}
.frame-ktp{
  width: 86%;
  height: 55%;
  left: 7%;
  top: 22%;
}
.frame-selfie{
  width: 70%;
  height: 78%;
  left: 15%;
  top: 10%;
  border-radius: 24px;
}

.badge-status-review {
  background-color: #ffc107 !important; /* bootstrap warning */
  color: #212529 !important;            /* text-dark */
}

.bg-brand { background: linear-gradient(135deg, var(--brand-700), var(--brand-accent)); }
.text-brand { color: var(--brand-700) !important; }
.btn-brand {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color:#fff;
}
.btn-brand:hover{ background: var(--brand-600); border-color: var(--brand-600); color:#fff; }

.btn-brand-outline{
  border:1px solid rgba(13,94,166,.35);
  color: var(--brand-700);
}
.btn-brand-outline:hover{
  background: rgba(13,94,166,.06);
  color: var(--brand-700);
}

.hero-card{
  border: 0;
  overflow:hidden;
}
.hero-badge{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
}
.hero-title{ color:#fff; letter-spacing:-.02em; }
.hero-lead{ color: rgba(255,255,255,.88); }

.kpi-chip{
  background:#fff;
  border: 1px solid rgba(15,118,207,.12);
  border-radius: 14px;
}

.section-title{ letter-spacing:-.01em; }
.card-soft{ background: var(--brand-soft); border: 1px solid rgba(15,118,207,.10); }
.icon-dot{
  width:10px;height:10px;border-radius:999px;background:var(--brand-accent);display:inline-block;margin-right:8px;
}

.sim-box{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
}
.sim-total{
  background: rgba(35,192,181,.10);
  border: 1px solid rgba(35,192,181,.18);
  border-radius: 14px;
}

.footer-note{
  background:#0b2f55;
  color: rgba(255,255,255,.88);
}
.footer-note a{ color:#fff; }

.navbar-brand { font-weight:700; letter-spacing:-.01em; }

/* ===== CTA GREEN ===== */
:root{
  --cta-green:#1cc812;
  --cta-green-dark:#16aa0e;
  --cta-green-soft:rgba(28,200,18,.12);

  --hero-blue-1:#0d5ea6;
  --hero-blue-2:#0f76cf;
  --card-border:rgba(2,6,23,.10);
}

/* tombol hijau */
.btn-cta{
  background: var(--cta-green) !important;
  border-color: var(--cta-green) !important;
  color:#fff !important;
  font-weight:700;
  border-radius: 12px;
  padding: .72rem 1rem;
}
.btn-cta:hover{
  background: var(--cta-green-dark) !important;
  border-color: var(--cta-green-dark) !important;
  color:#fff !important;
}

/* outline hijau */
.btn-cta-outline{
  border:1px solid rgba(28,200,18,.55) !important;
  color: var(--cta-green) !important;
  background: transparent !important;
  font-weight:700;
  border-radius: 12px;
  padding: .72rem 1rem;
}
.btn-cta-outline:hover{
  background: rgba(28,200,18,.08) !important;
  color: var(--cta-green-dark) !important;
}

/* HERO */
.hero-wrap{
  background: linear-gradient(135deg, var(--hero-blue-1), var(--hero-blue-2));
  border-radius: 18px;
  overflow:hidden;
  color:#fff;
}
.hero-pill{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius: 999px;
  padding: .35rem .65rem;
}

/* Placeholder di hero tetap lembut */
.placeholder-box{
  width:100%;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.40);
  background: rgba(255,255,255,.14);
  min-height: 120px;
}

/* ===== SIMULATOR CARD (biar teks tidak putih) ===== */
.sim-card{
  background:#fff;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  color:#111827; /* paksa teks jadi gelap */
}
.sim-card .form-label,
.sim-card .text-muted,
.sim-card .input-group-text,
.sim-card .badge,
.sim-card small,
.sim-card div{
  color: inherit; /* jangan ikut warna putih dari hero */
}

/* kecilkan header simulator */
.sim-card .fw-semibold{ font-size: 1rem; }

/* box hasil cicilan */
.sim-total{
  background: var(--cta-green-soft);
  border: 1px solid rgba(28,200,18,.22);
  border-radius: 14px;
}
.sim-total .text-muted{ color:#334155 !important; }
.sim-total #sim_monthly{
  color:#0f172a !important;
  font-weight:800;
}

/* input range lebih enak */
.form-range{ height: 1.2rem; }
/* ===== ESTIMASI CICILAN HIJAU ===== */
:root{
  --cta-green:#1cc812;
  --cta-green-dark:#16aa0e;
}

/* paksa warna nominal cicilan */
#sim_monthly{
  color: var(--cta-green) !important;
  font-weight: 800;
  letter-spacing: .3px;
}

/* teks pendukung di box cicilan */
.sim-total .text-muted{
  color:#334155 !important;
}

/* border & background box cicilan */
.sim-total{
  background: rgba(28,200,18,.10);
  border: 1px solid rgba(28,200,18,.30);
}

:root{
  --cta-green:#1cc812;
  --cta-green-dark:#16aa0e;
}

/* track umum */
input[type=range]{
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(28,200,18,.25);
  outline: none;
}

/* ===== CHROME / EDGE / SAFARI ===== */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cta-green);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(28,200,18,.25);
  transition: background .2s ease, box-shadow .2s ease;
}

input[type=range]::-webkit-slider-thumb:hover{
  background: var(--cta-green-dark);
  box-shadow: 0 0 0 6px rgba(28,200,18,.35);
}

/* ===== FIREFOX ===== */
input[type=range]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cta-green);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(28,200,18,.25);
}

input[type=range]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(28,200,18,.25);
}

/* fokus (klik) */
input[type=range]:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(28,200,18,.45);
}

/* beri ruang aman di bawah slider */
#sim_amount{
  margin-bottom: 18px; /* JARAK AMAN dari textbox */
}

input[type=range]::-webkit-slider-thumb{
  margin-top: -7px; /* sesuaikan tinggi track */
}

input[type=range]::-moz-range-thumb{
  margin-top: 0;
}

/* ============================= */
/* SLIDER PRO + BUBBLE LABEL     */
/* ============================= */

:root{
  --cta-green:#1cc812;
  --cta-green-dark:#16aa0e;
  --track-off: rgba(2,6,23,.12);
}

/* wrapper slider */
.slider-wrap{
  position: relative;
  padding-top: 20px;   /* ruang bubble */
  margin-bottom: 14px; /* ruang aman dari textbox */
}

/* bubble value */
.slider-bubble{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(2,6,23,.10);
}

/* slider base */
input[type=range]{
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: var(--track-off);
}

/* CHROME / EDGE / SAFARI thumb */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cta-green);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(28,200,18,.25);
  transition: background .2s ease, box-shadow .2s ease;
  margin-top: -7px; /* biar thumb center di track */
}
input[type=range]::-webkit-slider-thumb:hover{
  background: var(--cta-green-dark);
  box-shadow: 0 0 0 6px rgba(28,200,18,.35);
}
input[type=range]:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(28,200,18,.45);
}

/* FIREFOX */
input[type=range]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cta-green);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(28,200,18,.25);
}
input[type=range]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: var(--track-off);
}

/* box hasil cicilan: nominal hijau */
#sim_monthly{
  color: var(--cta-green) !important;
  font-weight: 900;
  letter-spacing: .2px;
}

/* nilai di kanan label (hijau) */
.sim-value-green{
  color: #1cc812 !important;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
}

/* ===== Soft Fintech Typography ===== */
:root{
  --cta-green:#1cc812;
  --cta-green-ink:#0e9f07;       /* sedikit lebih calm */
  --ink:#0f172a;
  --muted:#64748b;
}

body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.sim-card{ color: var(--ink); }

/* label kiri dibuat lebih halus */
.sim-card .form-label{
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .2px;
}

/* value kanan: dibuat "pill" lembut, bukan teks tebal kaku */
.sim-value-green{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(28,200,18,.08);
  border: 1px solid rgba(28,200,18,.18);
  color: var(--cta-green-ink) !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.sim-value-green .rp{
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
}
.sim-value-green .num{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* box cicilan lebih premium (nggak "kotak kaku") */
.sim-total{
  background: radial-gradient(120% 120% at 20% 20%, rgba(28,200,18,.14), rgba(28,200,18,.04) 55%, rgba(255,255,255,1) 100%);
  border: 1px solid rgba(28,200,18,.20);
  border-radius: 18px;
  padding: 14px 16px;
}

/* label cicilan dibuat kecil tapi bukan uppercase kaku */
.sim-total .text-muted{
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 500;
}

/* nominal cicilan: lebih smooth, tidak super tebal */
#sim_monthly{
  color: var(--cta-green-ink) !important;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  transition: transform .10s ease, filter .2s ease;
}
#sim_monthly .rp{
  font-size: 14px;
  font-weight: 600;
  opacity: .85;
  margin-right: 6px;
}
#sim_monthly .num{
  font-size: 30px;
  font-weight: 750;
}

/* micro animation supaya terasa hidup tapi halus */
.sim-card:has(#sim_amount:active) #sim_monthly,
.sim-card:has(#sim_tenor_slider:active) #sim_monthly{
  transform: translateY(-1px);
  filter: saturate(1.05);
}

/* Mobile */
@media (max-width: 576px){
  .sim-value-green{ font-size: 15px; }
  .sim-value-green .num{ font-size: 17px; }
  #sim_monthly{ font-size: 24px; }
  #sim_monthly .num{ font-size: 26px; }
}
/* Partner Logos Row */
.partner-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.partner-item{
  flex: 0 0 auto;
  height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.partner-item img{
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
@media (max-width:576px){
  .partner-item{ height: 40px; padding: 7px 10px; }
  .partner-item img{ height: 22px; }
}

/* ============================= */
/* PARTNER LOGO – TRANSPARAN & BESAR */
/* ============================= */

.partner-row{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;              /* jarak antar logo */
  align-items: center;
}

/* HILANGKAN background */
.partner-item{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
}

/* LOGO LEBIH BESAR */
.partner-item img{
  height: 38px;           /* sebelumnya ±22–26px */
  width: auto;
  object-fit: contain;
  filter: none;           /* hilangkan shadow */
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

/* hover halus (opsional, tidak norak) */
.partner-item:hover img{
  transform: translateY(-1px) scale(1.04);
  opacity: 1;
}

/* Mobile */
@media (max-width:576px){
  .partner-row{ gap: 14px; }
  .partner-item img{ height: 32px; }
}

/* HERO background dari admin */
.hero-wrap{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* supaya konten tetap terbaca di bg foto: kasih lapisan putih tipis */
.hero-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.72);
}

/* karena ada ::before, konten hero harus di atasnya */
.hero-wrap{
  position: relative;
}
.hero-wrap > *{
  position: relative;
  z-index: 1;
}

/* teks hitam sesuai request */
.hero-title-black{
  color:#000 !important;
}
.hero-desc-black{
  color:#000 !important;
  opacity: .85;
}

/* min/max amount dibuat lebih dekat ke slider */
.sim-minmax-amount{
  margin-top: 2px !important;   /* lebih dekat (coba 3-6px) */
  margin-bottom: 10px !important;
}

/* ===== HOME SEAMLESS ===== */
.home-wrap{ width:100%; }

/* semua section nyambung tanpa gap */
.home-section{ margin:0 !important; padding:0 !important; }

/* isi dalam tetap rapi (biar nggak nempel layar) */
.home-inner{ max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* hilangkan “kotak” di home */
.hero-seamless{ border-radius:0 !important; box-shadow:none !important; }
.banner-seamless{ box-shadow:none !important; }
.login-card-seamless{ border-radius:16px; background:#fff; }
.sim-seamless{ border-radius:16px; }

/* banner tidak kepotong */
.home-banner-img{ width:100%; height:auto; max-height:none; object-fit:contain; border-radius:16px; display:block; }

/* jarak min/max amount lebih rapat */
.sim-minmax-amount{ margin-top:3px !important; margin-bottom:10px !important; }

/* PARTNER transparan & lebih besar */
.partner-item{ background:transparent !important; border:none !important; padding:0 !important; }
.partner-item img{ height:38px; width:auto; object-fit:contain; }

/* teks hero hitam */
.hero-title-black{ color:#000 !important; }
.hero-desc-black{ color:#000 !important; opacity:.85; }

.testi-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

.testi-avatar{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.testi-avatar-placeholder{
  background: rgba(2,6,23,.08);
}

/* Judul testimoni besar dan center */
.testi-title{
  font-size: 35px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .2px;
}

/* Foto testimoni kotak rounded (ujung tumpul) */
.testi-avatar{
  width: 110px;
  height: 110px;
  border-radius: 16px;   /* ujung tumpul */
  object-fit: cover;
  display: block;
}

/* Placeholder kalau tidak ada foto */
.testi-avatar-placeholder{
  width: 110px;
  height: 110px;
  border-radius: 16px;
  background: rgba(2,6,23,.08);
}

/* Teks testimoni rapi kiri-kanan */
.testi-quote{
  text-align: left;          /* KUNCI */
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

/* Supaya baris terakhir tidak aneh */
.testi-quote::after{
  content: "";
  display: inline-block;
  width: 100%;
}

/* KEUNTUNGAN */
/* ============================= */
.benefit-card{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  text-align:center; /* kartu di tengah */
}

/* icon tetap di tengah */
.benefit-icon-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}

.benefit-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  object-fit:contain;
  background:#f6f7f8;
  padding:8px;
}

/* JUDUL – sama rasa dengan testimonial name */
.benefit-title{
  font-weight:700;
  font-size:25px;
  margin-bottom:6px;
  color:#111;
}

/* QUOTE – SAMA PERSIS DENGAN TESTIMONIAL */
.benefit-quote{
  font-size:14px;
  line-height:1.7;
  color:#555;
  text-align:center;          /* rata kiri */
}

.navbar{
  min-height:64px;
}

.navbar-brand img{
  transition: opacity .2s ease;
}

.navbar-brand img:hover{
  opacity:.85;
}

/* TEST: kalau CSS kebaca, tombol login pasti hijau */
.btn-login{
  background-color: #1cc812 !important;
  border-color: #1cc812 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-login:hover{
  background-color: #17b50f !important;
  border-color: #17b50f !important;
  color: #fff !important;
}

/* =============================== */
/* TOMBOL USER HIJAU (MANUAL) */
/* =============================== */

.btn-apply,
.btn-dashboard{
  background-color: #1cc812;
  border-color: #1cc812;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
}

.btn-apply:hover,
.btn-dashboard:hover{
  background-color: #17b50f;
  border-color: #17b50f;
  color: #fff;
}

.btn-apply:focus,
.btn-dashboard:focus{
  box-shadow: 0 0 0 .2rem rgba(28,200,18,.35);
}

/* Tombol ajukan di halaman products */
.btn-apply-product{
  background-color: #1cc812;
  border-color: #1cc812;
  color: #fff;
  font-weight: 600;
}

.btn-apply-product:hover{
  background-color: #17b50f;
  border-color: #17b50f;
  color: #fff;
}

.btn-apply-product:focus{
  box-shadow: 0 0 0 .2rem rgba(28,200,18,.35);
}