/* ===================================================================
   Pasar Energi — brand stylesheet (self-contained, no external deps)
   Palette & structure derived from the interface-design PDF.
   =================================================================== */

:root{
  --green-dark:  #1d4ed8;
  --green:       #2563eb;
  --green-light: #7dd3fc;
  --sky:         #0ea5e9;
  --sky-dark:    #0284c7;
  --navy:        #0f172a;
  --navy-2:      #4f46e5;
  --ink:         #0f172a;
  --muted:       #64748b;
  --gray-bg:     #f1f5f9;
  --gray-line:   #e2e8f0;
  --star:        #f5a623;
  --radius:      16px;
  --font: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  --font-display: 'Space Grotesk',var(--font);
  --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;line-height:1.2;font-family:var(--font-display);letter-spacing:-.01em;}
p{margin:0;}
ul{list-style:none;margin:0;padding:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.container{max-width:1200px;margin-inline:auto;padding-inline:1.25rem;}

.brand-gradient{background:linear-gradient(100deg,var(--sky-dark) 0%,var(--green) 55%,var(--navy-2) 100%);}
.navy-gradient{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 55%,#1e293b 100%);}
.text-white{color:#fff;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;line-height:1;
  padding:.85rem 1.6rem;border-radius:12px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 22px -10px rgba(37,99,235,.7);}
.btn-primary:hover{background:var(--sky-dark);box-shadow:0 14px 26px -10px rgba(2,132,199,.6);}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:#f1f5f9;}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-sm{padding:.55rem 1.1rem;font-size:.8rem;border-radius:10px;}
.btn-block{width:100%;}

/* ---------- backdrops (stand-ins for real photography) ---------- */
.panel-pattern{
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(10,25,35,.55), rgba(9,20,28,.82)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    linear-gradient(135deg,#132a3c 0%,#0f172a 60%,#0a1c29 100%);
}
.roof-pattern{
  background-color:#173a2c;
  background-image:
    linear-gradient(rgba(10,25,20,.35), rgba(8,18,15,.75)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 30px),
    linear-gradient(160deg,#1d4433 0%,#4f46e5 100%);
}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:1.5rem;
  box-shadow:0 4px 20px -2px rgba(15,23,42,.04),0 2px 6px -1px rgba(15,23,42,.02);
  transition:border-color .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
}
.card-dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1.5rem;}

.stars{color:var(--star);letter-spacing:2px;font-size:.85rem;}

.pill-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:999px;padding:.5rem .9rem;font-size:.8rem;font-family:var(--font-mono);
}

.input-field{
  width:100%;border:1px solid var(--gray-line);border-radius:12px;
  padding:.8rem 1rem;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input-field:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(37,99,235,.18);}

.eyebrow{color:var(--sky-dark);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono);}
.eyebrow-light{color:var(--green-light);}

.world-dots{
  background-image: radial-gradient(circle, rgba(123,201,111,.55) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 60%, transparent 100%);
  opacity:.9;
}

/* ===================================================================
   Header / nav
   =================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid var(--gray-line);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 2px rgba(15,23,42,.04);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0;text-decoration:none;}
/* Lambang sekarang gambar (public/image/logo-icon.png), bukan lagi teks
   "PE" di atas kotak gradient — kotaknya cukup mewadahi tinggi gambarnya. */
.brand-mark{display:inline-flex;align-items:center;flex-shrink:0;height:36px;}
.brand-mark img{height:100%;width:auto;display:block;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--navy);letter-spacing:-.01em;}
.brand-name em{color:var(--green);font-style:normal;}

.nav-links{display:flex;align-items:center;gap:.25rem;font-family:var(--font-display);font-size:.87rem;font-weight:500;color:#334155;}
.nav-links a{text-decoration:none;padding:.45rem .7rem;border-radius:10px;transition:color .2s,background .2s;}
.nav-links a:hover{opacity:1;color:var(--ink);background:var(--gray-bg);}
.nav-actions{display:flex;align-items:center;gap:.5rem;}
.nav-actions .login-link{font-family:var(--font-display);font-size:.85rem;font-weight:500;color:var(--muted);text-decoration:none;padding:.5rem .7rem;border-radius:10px;transition:color .2s,background .2s;}
.nav-actions .login-link:hover{color:var(--sky-dark);background:var(--gray-bg);}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.25rem;}
.mobile-nav{display:none;border-top:1px solid var(--gray-line);}
.mobile-nav.is-open{display:block;}
.mobile-nav .container{display:flex;flex-direction:column;gap:1rem;padding-block:1rem;font-weight:500;color:#334155;}

@media (max-width: 860px){
  .nav-links, .nav-actions{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* ===================================================================
   Hero
   =================================================================== */
.hero{padding-block:5rem;}
.hero .container{display:grid;gap:3rem;align-items:center;grid-template-columns:1fr;}
.hero-copy p{color:#cbd5e1;max-width:46ch;margin-top:1.25rem;font-size:1.05rem;}
.hero-copy h1{font-size:2.1rem;font-weight:800;margin-top:1.5rem;}
.hero-form{max-width:520px;background:rgba(255,255,255,.97);margin-top:2rem;}
.hero-form-row{display:grid;gap:.75rem;grid-template-columns:1fr;}
.hero-form small{display:block;margin-top:.75rem;color:#5b6b66;font-size:.78rem;}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:2.25rem;}
.hero-stat-num{font-size:1.5rem;font-weight:800;}
.hero-stat-label{font-size:.75rem;color:#94a3b8;max-width:20ch;margin-top:.15rem;}

.estimate-card{}
.estimate-card .card-title{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:1rem;}
.estimate-row{display:flex;align-items:center;justify-content:space-between;font-size:.88rem;background:rgba(255,255,255,.08);border-radius:10px;padding:.75rem 1rem;margin-bottom:.6rem;}
.estimate-row span:first-child{color:rgba(255,255,255,.8);}
.estimate-row span:last-child{font-weight:600;}
.estimate-highlight{color:var(--green-light);}

@media (min-width: 900px){
  .hero .container{grid-template-columns:1.1fr .9fr;}
  .hero-form-row{grid-template-columns:1fr auto;}
  .hero-copy h1{font-size:2.9rem;}
}

/* ===================================================================
   Steps strip
   =================================================================== */
.steps{padding-block:3.5rem;border-bottom:1px solid var(--gray-line);}
.steps .container{display:grid;gap:2rem;grid-template-columns:1fr;}
.step{display:flex;gap:1rem;}
.step-num{flex-shrink:0;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.step-title{font-weight:600;margin-bottom:.25rem;}
.step-desc{font-size:.9rem;color:var(--muted);}
@media (min-width: 768px){ .steps .container{grid-template-columns:1fr 1fr;} }

/* ===================================================================
   Benefits (why us)
   =================================================================== */
.benefits{padding-block:5rem;position:relative;}
.section-heading{text-align:center;max-width:640px;margin:0 auto 3.5rem;}
.section-heading h2{font-size:1.6rem;font-weight:800;margin-top:.6rem;}
.benefit-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;}
.benefit-grid .card-dark{color:#fff;}
.benefit-grid p{font-size:.9rem;color:#cbd5e1;margin-top:.5rem;}
.benefit-grid .card-title{font-weight:600;}
.benefits-cta{text-align:center;margin-top:3rem;}
@media (min-width: 640px){ .benefit-grid{grid-template-columns:1fr 1fr;} }
@media (min-width: 1080px){ .benefit-grid{grid-template-columns:repeat(4,1fr);} }

/* ===================================================================
   Trust logos
   =================================================================== */
.trust{padding-block:3.5rem;}
.trust-label{text-align:center;font-size:.85rem;font-weight:600;color:#94a3b8;margin-bottom:2rem;}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 3rem;color:#495a55;opacity:.75;}
.trust-logos span{font-weight:700;font-size:1.1rem;letter-spacing:-.02em;}

/* ===================================================================
   Impact / stats banner
   =================================================================== */
.impact{padding-block:5rem;}
.impact .container{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center;}
.impact h2{font-size:1.7rem;font-weight:800;margin-top:.6rem;}
.impact p{color:#cbd5e1;max-width:46ch;margin-top:1rem;}
.impact-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:22rem;margin-top:2rem;}
.impact-visual{position:relative;height:18rem;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;}
.impact-visual .world-dots{position:absolute;inset:0;}
.impact-visual-inner{position:relative;padding-inline:1.5rem;}
.impact-visual-inner .emoji{font-size:2.5rem;}
.impact-visual-inner p{margin-top:.75rem;color:#cbd5e1;font-size:.9rem;}
@media (min-width: 1000px){ .impact .container{grid-template-columns:1fr 1fr;} }

/* ===================================================================
   Final CTA
   =================================================================== */
.final-cta{padding-block:3.5rem;}
.final-cta .container{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;justify-content:space-between;}
.final-cta h3{font-size:1.35rem;font-weight:800;}
.final-cta p{color:rgba(255,255,255,.85);font-size:.9rem;margin-top:.15rem;}
.final-cta-form{display:flex;gap:.75rem;width:100%;flex-wrap:wrap;}
.final-cta-form select{min-width:200px;flex:1;}
@media (min-width: 780px){
  .final-cta .container{flex-direction:row;align-items:center;}
  .final-cta-form{width:auto;}
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{background:var(--gray-bg);border-top:1px solid var(--gray-line);color:#334155;}
.site-footer .brand-name{color:var(--navy);}
.site-footer a{color:#475569;text-decoration:none;font-size:.9rem;transition:color .2s;}
.site-footer a:hover{color:var(--sky-dark);}
.footer-grid{display:grid;gap:2.5rem;padding-block:3.5rem;grid-template-columns:1fr;}
.footer-brand .brand{margin-bottom:.75rem;}
.footer-brand p{color:#64748b;font-size:.9rem;max-width:26ch;margin-top:.5rem;}
.footer-col-title{font-family:var(--font-mono);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.9rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem;}
.footer-bottom{border-top:1px solid var(--gray-line);}
.footer-bottom .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;font-size:.78rem;color:#64748b;}
.footer-bottom-links{display:flex;gap:1.25rem;}
.footer-bottom-links a{color:#64748b;}
@media (min-width: 900px){ .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);} }

/* ===================================================================
   Estimation wizard (mulai.php)
   =================================================================== */
.wizard-hero{
  background:
    radial-gradient(circle at 15% 0%,rgba(37,99,235,.08) 0%,transparent 55%),
    var(--gray-bg);
  color:var(--ink);
  padding-block:2.75rem 2rem;
  border-bottom:1px solid var(--gray-line);
}
.wizard-hero h1{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;}
.wizard-hero p{color:var(--muted);margin-top:.5rem;font-size:.92rem;}

/* numbered-circle stepper (Property Detail / Pilih Kapasitas / Durasi Backup / Hasil) */
.stepper{display:flex;align-items:center;margin-bottom:2rem;flex-wrap:nowrap;}
.stepper-item{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.stepper-circle{
  width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;border:2px solid var(--gray-line);color:var(--muted);background:#fff;
  flex-shrink:0;transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.stepper-label{font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap;}
.stepper-item.is-active .stepper-circle,
.stepper-item.is-done .stepper-circle{background:var(--navy);border-color:var(--navy);color:#fff;}
.stepper-item.is-active .stepper-label{color:var(--ink);}
.stepper-item.is-done .stepper-label{color:var(--ink);}
.stepper-connector{flex:1 1 20px;height:2px;background:var(--gray-line);margin-inline:.6rem;min-width:16px;}
.stepper-connector.is-done{background:var(--navy);}
@media (max-width: 560px){ .stepper-label{display:none;} }

.wizard-body{padding-block:3rem 5rem;background:var(--gray-bg);min-height:40vh;}
.wizard-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:2rem;max-width:880px;margin-inline:auto;}
.peran-tab-bar{display:flex;gap:.4rem;max-width:440px;margin:0 auto 1.25rem;background:#fff;border:1px solid var(--gray-line);border-radius:999px;padding:.3rem;}
.peran-tab{flex:1;border:none;background:none;border-radius:999px;padding:.55rem .8rem;font-size:.85rem;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;}
.peran-tab.is-active{background:var(--navy);color:#fff;}
.wizard-step{display:none;}
.wizard-step.is-active{display:block;}
.wizard-step-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);}
.wizard-step h2{font-size:1.3rem;font-weight:800;margin-top:.4rem;}
.step-hint{font-size:.88rem;color:var(--muted);margin-top:.5rem;}

.choice-group{display:grid;gap:.75rem;margin-top:1.5rem;grid-template-columns:1fr;}
.choice-card{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1.5px solid var(--gray-line);border-radius:12px;background:#fff;
  padding:1rem 1.1rem;font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;transition:border-color .15s ease, background .15s ease;
}
.choice-card:hover{border-color:var(--green-light);}
.choice-card.is-selected{border-color:var(--green);background:#eff6ff;color:var(--green-dark);}
.choice-card .choice-sub{font-weight:400;font-size:.8rem;color:var(--muted);display:block;margin-top:.15rem;}
.choice-card.is-selected .choice-sub{color:var(--green-dark);}
.choice-check{width:20px;height:20px;border-radius:999px;border:1.5px solid var(--gray-line);flex-shrink:0;}
.choice-card.is-selected .choice-check{border-color:var(--green);background:var(--green);position:relative;}
.choice-card.is-selected .choice-check::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:999px;}
@media (min-width: 560px){
  .choice-group.choice-group-cols3{grid-template-columns:repeat(3,1fr);}
  .choice-group.choice-group-cols2{grid-template-columns:repeat(2,1fr);}
  .choice-group.choice-group-cols4{grid-template-columns:repeat(4,1fr);}
}

/* multi-select variant (checkbox look instead of radio) */
.choice-group[data-multi="true"] .choice-check{border-radius:6px;}
.choice-group[data-multi="true"] .choice-card.is-selected .choice-check::after{border-radius:1px;inset:6px;}
.choice-hint-badge{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:1.5rem;}

.sub-question{margin-top:1.5rem;padding-top:1.5rem;border-top:1px dashed var(--gray-line);}
.sub-question label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.5rem;}
.link-btn{background:none;border:none;padding:0;margin-top:.65rem;font-size:.85rem;font-weight:600;color:var(--green);text-decoration:underline;cursor:pointer;font-family:inherit;}
.form-row{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.25rem;}
.form-row label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:var(--ink);}
@media (min-width: 480px){ .form-row.form-row-2{grid-template-columns:1fr 1fr;} }
@media (min-width: 720px){ .form-row.form-row-3{grid-template-columns:1fr 1fr 1fr;} }
@media (min-width: 480px) and (max-width: 719px){ .form-row.form-row-3{grid-template-columns:1fr 1fr;} }

.mcb-result{margin-top:1rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:.9rem 1rem;font-size:.88rem;color:var(--green-dark);font-weight:600;}
.field-error{color:#c0392b;font-size:.8rem;margin-top:.5rem;font-weight:600;}

/* Pilih Kapasitas — dulu tabel, sekarang daftar kartu: kolom angka
   ("Rp544.000 – Rp680.000") di layar sempit selalu pecah jadi berbaris-
   baris dalam sel tabel yang sempit, dan memaksanya lebar malah memicu
   geser samping. Kartu bertumpuk + angka format ringkas (fmtRupiahRingkas
   di estimator.js) menghindari keduanya sekaligus. */
.table-scroll{overflow-x:auto;margin-top:1.5rem;border:1px solid var(--gray-line);border-radius:12px;}
.sistem-card-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1.5rem;}
.sistem-card{
  display:flex;align-items:flex-start;gap:.85rem;cursor:pointer;
  padding:1rem 1.1rem;border:1.5px solid var(--gray-line);border-radius:12px;background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.sistem-card:hover{border-color:var(--green-light);}
.sistem-card.is-sesuai{background:#eff6ff;}
.sistem-card.is-selected{border-color:var(--green);background:#dbeafe;}
.sistem-card [data-sistem-checkbox]{margin-top:.15rem;width:18px;height:18px;flex-shrink:0;accent-color:var(--green);cursor:pointer;}
.sistem-card-body{display:flex;flex-direction:column;gap:.3rem;min-width:0;}
.sistem-card-head{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;}
.sistem-kwp{font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap;}
.badge-sesuai{display:inline-block;background:var(--green-light);color:var(--green-dark);font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:999px;letter-spacing:.02em;}
.sistem-card-fact{font-size:.83rem;color:var(--muted);}
.sistem-card-fact b{color:var(--navy);font-weight:700;}
.sistem-limit-warning{margin-top:.85rem;font-size:.82rem;color:#c0392b;font-weight:600;}

.wizard-nav{display:flex;align-items:center;justify-content:space-between;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--gray-line);}
.btn-ghost{background:none;border:none;color:var(--muted);font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit;padding:.5rem;}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.prefix-input{position:relative;}
.prefix-input span{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.95rem;}
.prefix-input input{padding-left:2.4rem;}

/* results */
.result-summary{background:var(--gray-bg);border-radius:12px;padding:1.25rem 1.5rem;margin-top:1.25rem;font-size:.88rem;color:var(--muted);line-height:1.6;}
.result-summary b{color:var(--ink);}
.result-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.75rem;}
.result-card{border:1.5px solid var(--gray-line);border-radius:14px;padding:1.5rem;position:relative;}
.result-card.is-recommended{border-color:var(--green);box-shadow:0 10px 24px -12px rgba(37,99,235,.45);}
.result-badge{position:absolute;top:-.7rem;left:1.25rem;background:var(--green);color:#fff;font-size:.7rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;letter-spacing:.03em;}
.result-card-title{font-weight:700;font-size:1.05rem;}
.result-card-kwp{font-size:1.9rem;font-weight:800;color:var(--green-dark);margin-top:.35rem;}
.result-card-kwp span{font-size:.9rem;font-weight:600;color:var(--muted);}
.result-facts{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--muted);}
.result-facts b{color:var(--ink);}
.result-fact-note{margin-top:-.3rem;font-size:.78rem;font-style:italic;color:var(--muted);opacity:.85;}
.result-note{margin-top:3rem;background:#fff8e6;border:1px solid #f4e2ad;border-radius:12px;padding:1.25rem 1.5rem;font-size:.85rem;color:#7a5c17;}
@media (min-width: 720px){ .result-grid{grid-template-columns:repeat(3,1fr);} }

.battery-card{margin-top:1.75rem;background:var(--navy);color:#fff;border-radius:14px;padding:1.5rem;}
.battery-card-title{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem;}
.battery-card-kwh{font-size:1.6rem;font-weight:800;color:var(--green-light);margin-top:.5rem;}
.battery-card-kwh span{font-size:.85rem;font-weight:600;color:#cbd5e1;}
.battery-card p{font-size:.85rem;color:#cbd5e1;margin-top:.5rem;}

/* section title for grouping multiple result blocks */
.result-section-title{font-weight:700;font-size:.95rem;margin-top:2rem;margin-bottom:.25rem;}

/* komersial lead form + success state */
.success-box{text-align:center;padding-block:1.5rem;}
.success-icon{width:56px;height:56px;border-radius:999px;background:#eff6ff;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-inline:auto;margin-bottom:1.25rem;}
.success-box h2{margin-top:0;}
.success-box p{color:var(--muted);font-size:.92rem;margin-top:.5rem;max-width:42ch;margin-inline:auto;}

/* minta proposal (pilih-instalatur.php) */
.fee-card{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:1.25rem 1.5rem;margin:1.5rem 0;}
.fee-card-title{font-weight:700;font-size:1.05rem;color:var(--ink);}
.fee-card-title span{color:var(--green-dark);margin-left:.35rem;}
.fee-card p{margin-top:.6rem;font-size:.88rem;color:var(--muted);}
.fee-card p b{color:var(--ink);}
.fee-card-subjudul{margin-top:.85rem;font-size:.82rem;font-weight:700;color:var(--ink);}
.fee-card ol{margin-top:.5rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;color:var(--muted);}
.fee-card ol li{list-style:decimal;}
.fee-card ol li b{color:var(--ink);}
.proposal-benefits{margin:1.25rem 0;padding-left:1.25rem;color:var(--muted);font-size:.88rem;display:flex;flex-direction:column;gap:.5rem;}
.proposal-benefits li{list-style:disc;}

/* placeholder page */

/* placeholder page */
.placeholder{padding-block:6rem;text-align:center;}
.placeholder h1{font-size:1.6rem;font-weight:800;margin-bottom:.75rem;}
.placeholder p{color:var(--muted);max-width:48ch;margin-inline:auto;}
.placeholder .btn{margin-top:1.5rem;}

/* ===================================================================
   Installer Side app shell (sidebar + top bar) — Cari Leads and future
   installer pages. Distinct visual language from the public marketing
   site (dashboard-app look, matching the CariSolar reference deck).
   =================================================================== */
.app-shell{display:flex;min-height:100vh;background:var(--gray-bg);align-items:stretch;}
.app-sidebar{width:220px;flex-shrink:0;background:#fff;border-right:1px solid var(--gray-line);padding:1.5rem 1rem;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;}
.app-sidebar-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;color:var(--ink);text-decoration:none;padding:0 .5rem;margin-bottom:2rem;font-size:.95rem;}
.app-sidebar-brand .brand-mark{height:32px;flex-shrink:0;}
.app-sidebar-nav{display:flex;flex-direction:column;gap:.15rem;}
.app-nav-item{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:10px;color:var(--muted);font-weight:600;font-size:.88rem;text-decoration:none;transition:background .15s ease,color .15s ease;}
.app-nav-item.is-active{background:#dbeafe;color:var(--green-dark);}
.app-nav-item:not(.is-disabled):not(.is-active):hover{background:var(--gray-bg);color:var(--ink);}
.app-nav-item.is-disabled{cursor:default;opacity:.55;}
.app-nav-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.app-nav-icon svg{width:18px;height:18px;stroke-width:1.9;}
.app-nav-soon{margin-left:auto;font-size:.65rem;font-weight:700;background:var(--gray-line);color:var(--muted);padding:.1rem .4rem;border-radius:999px;}

.app-main{flex:1;min-width:0;}
.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.75rem;background:#fff;border-bottom:1px solid var(--gray-line);font-size:.85rem;flex-wrap:wrap;gap:.5rem;}
.app-topbar-left{display:flex;gap:1.25rem;}
.app-topbar-left a{color:var(--muted);text-decoration:none;font-weight:600;}
.app-topbar-left a:hover{color:var(--ink);}
.app-demo-badge{background:#fff8e6;color:#7a5c17;border:1px solid #f4e2ad;padding:.35rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap;}
.app-topbar-right{display:flex;align-items:center;gap:.9rem;}
.app-installer-name{font-weight:700;color:var(--ink);white-space:nowrap;}
.app-logout-link{color:var(--muted);text-decoration:none;font-weight:600;}
.app-logout-link:hover{color:var(--ink);}
.app-content{padding:0 0 3rem;}

/* Province picker (installer registration — provinsi cakupan proyek) */
.province-picker{border:1px solid var(--gray-line);border-radius:12px;padding:1rem 1.1rem;background:var(--gray-bg);}
.province-all-toggle{display:flex;align-items:center;gap:.6rem;background:#dbeafe;border:1px solid #bfdbfe;border-radius:10px;padding:.65rem .85rem;font-size:.86rem;font-weight:600;color:var(--green-dark);cursor:pointer;margin-bottom:.85rem;}
.province-all-toggle input{width:16px;height:16px;flex-shrink:0;}
.akun-tipe-toggle{flex:1;display:flex;align-items:center;gap:.5rem;border:1px solid var(--gray-line);border-radius:10px;padding:.6rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--muted);}
.akun-tipe-toggle:has(input:checked){border-color:var(--green);color:var(--green-dark);background:#f0fdf4;}
.akun-tipe-toggle input{width:16px;height:16px;flex-shrink:0;}
.province-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem .75rem;max-height:260px;overflow-y:auto;padding-right:.25rem;}
@media (max-width:640px){.province-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.province-grid{grid-template-columns:1fr;}}
.province-item{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--ink);padding:.3rem 0;cursor:pointer;}
.province-item input{width:15px;height:15px;flex-shrink:0;}
.province-item input:disabled{opacity:.5;}
.province-item input:disabled ~ span{color:var(--muted);}

.leads-list{padding:1.25rem 1.75rem;max-width:960px;}
.lead-empty{padding:3rem 1.75rem;text-align:center;color:var(--muted);max-width:520px;margin-inline:auto;}
.lead-empty h3{color:var(--ink);margin-bottom:.5rem;}
@media (max-width:880px){ .app-sidebar{position:fixed;left:-240px;z-index:50;transition:left .2s;} .app-sidebar.is-open{left:0;} }

/* z-index di atas .site-header (50) — keduanya sama-sama top:0, jadi kalau
   lebih rendah dari header, bagian atas panel (tombol Tutup, judul chat)
   ketutupan header yang sticky. */
.lead-panel-backdrop{position:fixed;inset:0;background:rgba(12,34,51,.35);z-index:55;}
.lead-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px, 100%);background:#fff;z-index:56;overflow-y:auto;padding:1.5rem 1.75rem 2.5rem;box-shadow:-16px 0 40px -20px rgba(0,0,0,.35);}
.lead-panel-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.lead-panel-back{background:none;border:none;cursor:pointer;font-size:.95rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.4rem;font-family:inherit;padding:0;}
.lead-panel-newtab{font-size:.8rem;color:var(--green-dark);text-decoration:none;font-weight:600;white-space:nowrap;}
.lead-panel-name{font-size:1.1rem;font-weight:800;margin-top:1rem;}
.lead-panel-map{margin-top:1.1rem;background:#f1f5f9;border-radius:12px;height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.78rem;text-align:center;padding:1rem;}
.lead-panel-map .pin{font-size:1.5rem;}
.lead-panel-field{margin-top:1.1rem;}
.lead-panel-field-label{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;}
.lead-panel-field-value{font-weight:700;margin-top:.25rem;font-size:.95rem;}
.lead-panel-field-value.is-empty{color:var(--muted);font-weight:500;font-style:italic;}
.lead-panel-offers{margin-top:1.25rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--gray-line);padding-top:1rem;}
.lead-panel-actions{margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem;}
.lead-panel-note{margin-top:.75rem;font-size:.78rem;color:var(--muted);background:var(--gray-bg);border-radius:10px;padding:.65rem .85rem;}
.btn-outline-green{background:#fff;color:var(--green-dark);border:1.5px solid var(--green);border-radius:999px;padding:.7rem 1.3rem;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;}
.btn-outline-green.is-saved{background:#dbeafe;}
.btn-outline-red{background:#fff;color:#c0392b;border:1.5px solid #e6b3ac;border-radius:999px;padding:.55rem 1.1rem;font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit;}
.btn-outline-red:hover{background:#fdecea;}
.btn-outline-red.is-confirm{background:#c0392b;color:#fff;border-color:#c0392b;}
.lead-card-footer{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}

/* Buat Proposal (BOM form) */
.proposal-section{border:1px solid var(--gray-line);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.25rem;}
.proposal-section-title{font-size:1rem;font-weight:800;margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;}
.proposal-section-hint{font-size:.8rem;color:var(--muted);margin:0 0 1rem;}
.proposal-checkbox-row{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem 0;border-top:1px solid var(--gray-line);}
.proposal-checkbox-row:first-of-type{border-top:none;padding-top:0;}
.proposal-checkbox-row input[type="checkbox"]{margin-top:.2rem;width:16px;height:16px;flex-shrink:0;}
.proposal-checkbox-row-fields{display:grid;grid-template-columns:2fr 1fr;gap:.75rem;margin-top:.6rem;}
@media (max-width:480px){ .proposal-checkbox-row-fields{grid-template-columns:1fr;} }
.proposal-bos-extra{display:grid;grid-template-columns:2fr 1fr auto;gap:.6rem;align-items:center;margin-top:.75rem;}
@media (max-width:480px){ .proposal-bos-extra{grid-template-columns:1fr;} }
.proposal-remove-btn{background:none;border:none;color:#c0392b;cursor:pointer;font-size:1.3rem;padding:.4rem;line-height:1;}
.proposal-total-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:1.25rem 1.5rem;margin-top:.5rem;}
.proposal-katalog-picker{background:#f8fafc;border:1px dashed #bfdbfe;border-radius:10px;padding:.85rem 1rem;margin-bottom:1.1rem;}
.proposal-katalog-picker label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.4rem;color:var(--brand-dark,#1d4ed8);}
.proposal-katalog-picker select{margin-bottom:.35rem;}
.proposal-katalog-picker .proposal-section-hint{margin:0;}
.mobile-sidebar-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--ink);padding:.25rem .5rem;}
.mobile-sidebar-toggle svg{width:22px;height:22px;stroke-width:1.9;}
@media (max-width:880px){ .mobile-sidebar-toggle{display:inline-flex;} }

/* minta proposal — peta lokasi (Leaflet + OpenStreetMap) */
.map-search-row{display:flex;gap:.5rem;margin-bottom:.6rem;}
.map-search-row input{flex:1;}
.map-search-row button{white-space:nowrap;padding:.6rem 1rem;font-size:.85rem;}
.proposal-map{height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--gray-line);background:#f1f5f9;}
.map-status{font-size:.78rem;color:var(--muted);margin-top:.5rem;}
.map-status.is-error{color:#c0392b;}
.map-status.is-ok{color:var(--green-dark);}

/* Dashboard Saya (customer) — dashboard.php */
.dash-lead-card{display:flex;flex-direction:column;gap:.9rem;}
.dash-lead-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;}
.dash-lead-bottom{border-top:1px solid var(--gray-line);padding-top:.9rem;margin-top:.9rem;display:flex;justify-content:flex-start;align-items:center;gap:.6rem;flex-wrap:wrap;}

/* Lihat & Bandingkan Penawaran — lihat-penawaran.php */
.offer-card{display:flex;flex-direction:column;gap:.85rem;}
.offer-card-rekomendasi{border:1.5px solid #f59e0b;box-shadow:0 4px 16px -6px rgba(245,158,11,.35);}
.offer-rekomendasi-pita{display:flex;flex-direction:column;gap:.2rem;background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;padding:.6rem .85rem;margin-bottom:-.2rem;}
.offer-rekomendasi-label{font-weight:800;color:#92400e;font-size:.82rem;}
.offer-rekomendasi-alasan{color:#78350f;font-size:.82rem;line-height:1.5;}
.offer-rekomendasi-disclaimer{color:#a16207;font-size:.7rem;line-height:1.4;opacity:.85;}

/* Ringkasan AI menyeluruh (semua penawaran) — sengaja biru/indigo, BEDA
   dari kuning/amber pita "Direkomendasikan" di satu kartu, supaya
   pelanggan tidak mengira dua hal berbeda ini adalah fitur yang sama. */
.ai-summary-card{background:#eef2ff;border:1px solid #c7d2fe;}
.ai-summary-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
.ai-summary-icon{font-size:1.1rem;}
.ai-summary-title{font-weight:800;color:#3730a3;font-size:.92rem;}
.ai-summary-text{color:#312e81;font-size:.9rem;line-height:1.7;}
.ai-summary-disclaimer{color:#4338ca;font-size:.72rem;line-height:1.5;opacity:.8;margin-top:.6rem;
  border-top:1px solid #c7d2fe;padding-top:.5rem;}
.ai-summary-galat{color:#a3372b;font-size:.78rem;margin-top:.5rem;}
.ai-summary-cooldown{color:#4338ca;font-size:.72rem;margin-top:.4rem;opacity:.75;}
.ai-summary-cooldown[hidden]{display:none;}
[data-ai-refresh].is-loading{opacity:.75;pointer-events:none;display:inline-flex;align-items:center;gap:.45rem;}
.ai-spinner{display:inline-block;width:13px;height:13px;border-radius:999px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;flex:none;
  animation:aiSpin .7s linear infinite;}
.btn-outline-green .ai-spinner{border-color:rgba(21,128,61,.3);border-top-color:var(--green-dark);}
@keyframes aiSpin{to{transform:rotate(360deg);}}
/* Baris "AI sedang berpikir" di dalam kartu — lebih kentara daripada cuma
   teks tombol berubah, karena panggilan Gemini bisa makan beberapa detik. */
.ai-summary-thinking{display:none;align-items:center;gap:.5rem;margin-top:.6rem;
  color:#3730a3;font-size:.82rem;font-weight:600;}
.ai-summary-thinking.is-active{display:flex;}
.ai-summary-thinking .ai-spinner{border-color:rgba(55,48,163,.25);border-top-color:#3730a3;width:15px;height:15px;}
.offer-card-top{display:flex;align-items:flex-start;gap:1rem;}
.offer-card-main{flex:1;}
.offer-compare-check{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.68rem;color:var(--muted);font-weight:600;cursor:pointer;flex-shrink:0;}
.offer-compare-check input{width:18px;height:18px;accent-color:var(--green);cursor:pointer;}
.offer-card-summary{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.85rem;color:var(--ink);background:var(--gray-bg);border-radius:10px;padding:.75rem 1rem;}
.offer-card-bottom{border-top:1px solid var(--gray-line);padding-top:.85rem;display:flex;justify-content:flex-end;}
.compare-limit-hint{font-size:.78rem;color:#c0392b;font-weight:600;margin-top:-.3rem;}

.compare-bar{position:sticky;bottom:1rem;margin-top:1.5rem;background:var(--navy);color:#fff;border-radius:999px;padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 12px 28px -10px rgba(12,34,51,.5);}
.compare-bar span{font-size:.88rem;font-weight:600;}

.compare-section{margin-top:2.5rem;}
/* table-layout:fixed + wrapping (bukan white-space:nowrap) supaya tabel
   perbandingan selalu pas di lebar container, tidak perlu scroll
   kanan/kiri — nama komponen/installer yang panjang membungkus ke baris
   berikutnya, bukan mendorong tabel lebih lebar dari layar. */
.compare-table{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff;table-layout:fixed;}
.compare-table th,.compare-table td{padding:.75rem .85rem;border-bottom:1px solid var(--gray-line);text-align:left;overflow-wrap:break-word;word-break:break-word;}
.compare-table thead th{background:var(--gray-bg);color:var(--navy);font-weight:700;position:sticky;top:0;}
.compare-table thead th:first-child,.compare-table td.compare-row-label{width:30%;}
.compare-row-label{font-weight:700;color:var(--navy);background:var(--gray-bg);}
.compare-section-header td{background:var(--navy);color:#fff;font-weight:700;padding:.6rem .85rem;font-size:.82rem;}
.compare-chart-note{font-size:.72rem;color:var(--muted);line-height:1.5;margin-top:.75rem;}
@media (max-width:640px){
  .compare-table{font-size:.76rem;}
  .compare-table th,.compare-table td{padding:.55rem .5rem;}
  .compare-table thead th:first-child,.compare-table td.compare-row-label{width:34%;}
}

/* ===================================================================
   Grafik SVG bersama (partials/charts.php + versi JS-nya di
   lihat-penawaran.js) — dipakai dashboard-instalatur.php & grafik
   Penghematan Kumulatif di Bandingkan Penawaran.
   =================================================================== */
.sm-chart-wrap{margin-top:.75rem;}
.sm-chart-svg{width:100%;height:auto;display:block;}
.sm-chart-grid{stroke:var(--gray-line);stroke-width:1;}
.sm-chart-zero{stroke:var(--navy);stroke-width:1.5;}
.sm-chart-ylabel{font-size:9px;fill:var(--muted);font-family:inherit;}
.sm-chart-xlabel{font-size:9px;fill:var(--muted);font-family:inherit;}
.sm-chart-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem;}
.sm-chart-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink);font-weight:600;}
.sm-chart-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* Installer Side / Dashboard — dashboard-instalatur.php */
.idash-welcome{padding:1.75rem 1.75rem 0;}
.idash-welcome h1{font-size:1.35rem;color:var(--navy);font-weight:800;}
.idash-welcome p{color:var(--muted);font-size:.88rem;margin-top:.25rem;}
.idash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.25rem 1.75rem 3rem;align-items:start;}
@media (max-width:900px){.idash-grid{grid-template-columns:1fr;}}
.idash-card-title{font-weight:700;color:var(--navy);font-size:.95rem;margin-bottom:.25rem;}
.idash-total{font-size:.88rem;color:var(--ink);margin-bottom:1rem;}
.idash-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;}
@media (max-width:520px){.idash-stat-row{grid-template-columns:repeat(2,1fr);}}
.idash-stat{text-align:center;background:var(--gray-bg);border-radius:10px;padding:.85rem .5rem;}
.idash-stat-num{font-size:1.4rem;font-weight:800;}
.idash-stat-label{font-size:.72rem;color:var(--muted);font-weight:600;margin-top:.2rem;}
.idash-table{width:100%;border-collapse:collapse;font-size:.8rem;}
.idash-table th,.idash-table td{padding:.7rem .9rem;border-bottom:1px solid var(--gray-line);text-align:left;white-space:nowrap;}
.idash-table thead th{background:var(--gray-bg);color:var(--navy);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;}
.idash-table tbody tr:last-child td{border-bottom:0;}
.idash-table tbody tr:hover{background:var(--gray-bg);}
/* Kolom angka — dipisah dari aturan dasar supaya baris teks (mis. "Keterangan")
   tidak ikut rata kanan cuma karena satu tabel punya satu kolom angka. */
.idash-table td.is-angka,.idash-table th.is-angka{text-align:right;font-variant-numeric:tabular-nums;}
.compare-picked{color:var(--green-dark);font-weight:700;}

/* Kartu saldo koin — satu-satunya elemen melayang di halaman Koin Saya
   (lihat aturan "tanpa bayangan kecuali satu benda melayang per layar").
   Navy karena ini angka struktural (aset installer), bukan status baik/buruk
   — hijau tetap dijaga khusus untuk tombol Top-up, satu aksi utama layar ini. */
.koin-wallet{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.5rem 1.75rem;
  margin-bottom:1.5rem;box-shadow:0 10px 28px -14px rgba(12,34,51,.4);}
.koin-wallet-label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;font-weight:700;}
.koin-wallet-num{font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:.3rem;line-height:1;}
.koin-wallet-num small{font-size:1rem;font-weight:700;color:#cbd5e1;margin-left:.35rem;}
.koin-wallet-sub{font-size:.82rem;color:#cbd5e1;margin-top:.4rem;}
.koin-wallet .btn-primary{flex-shrink:0;}

/* ===================================================================
   PERJALANAN LEAD — rel vertikal
   -------------------------------------------------------------------
   Sengaja vertikal, bukan stepper mendatar: pada layar ponsel stepper
   mendatar memaksa geser samping dan tombol panah, sedangkan rel
   vertikal tumbuh ke bawah dan tetap terbaca penuh. Setiap tahap
   membawa tiga hal yang biasanya tidak ada di stepper hias: giliran
   siapa, sudah berapa lama, dan tindakan berikutnya di tempat.
   =================================================================== */

.jr{background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;}

/* ---------- kepala ---------- */
.jr-head{padding:1.35rem 1.5rem 1.15rem;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border-bottom:1px solid var(--gray-line);}
.jr-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.jr-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);}
.jr-head h3{font-size:1.15rem;font-weight:800;color:var(--navy);margin-top:.35rem;}
.jr-head p{font-size:.88rem;color:var(--muted);margin-top:.4rem;max-width:56ch;line-height:1.55;}

/* ---------- lencana giliran ---------- */
.jr-turn{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.jr-turn::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;flex-shrink:0;}
.jr-turn--pelanggan{background:var(--green);color:#fff;box-shadow:0 6px 16px -8px rgba(37,99,235,.75);}
.jr-turn--pelanggan::before{background:#fff;}
.jr-turn--instalatur{background:#eef2ff;color:var(--navy-2);border:1px solid #c7d2fe;}
.jr-turn--tim{background:#fff8e6;color:#8a6314;border:1px solid #f0dca0;}
.jr-turn--selesai{background:var(--gray-bg);color:var(--muted);border:1px solid var(--gray-line);}

/* ---------- meteran progres ---------- */
.jr-meter{height:6px;border-radius:999px;background:var(--gray-line);margin-top:1.1rem;overflow:hidden;}
.jr-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-dark),var(--green) 60%,var(--green-light));transition:width .5s ease;}
.jr-meter-note{display:flex;justify-content:space-between;gap:1rem;font-size:.76rem;color:var(--muted);margin-top:.5rem;font-weight:600;flex-wrap:wrap;}
.jr--berhenti .jr-meter i{background:linear-gradient(90deg,#a3372b,#c85a4a);}

/* ---------- pita peringatan lewat target ---------- */
.jr-alert{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 1.5rem 0;padding:.85rem 1rem;background:#fff8e6;border:1px solid #f0dca0;border-radius:10px;font-size:.83rem;color:#7a5c17;line-height:1.5;}
.jr-alert b{color:#5f4711;}
.jr-alert-icon{flex-shrink:0;font-size:1rem;line-height:1.2;}

/* ---------- rel ---------- */
.jr-rail{padding:1.35rem 1.5rem 1.5rem;position:relative;}
.jr-step{position:relative;padding-left:2.35rem;padding-bottom:1.35rem;}
.jr-step:last-child{padding-bottom:0;}
/* garis penghubung digambar per-langkah supaya bisa beda warna
   antara bagian yang sudah dilewati dan yang belum */
.jr-step::before{content:"";position:absolute;left:10px;top:1.35rem;bottom:-.2rem;width:2px;background:var(--gray-line);}
.jr-step:last-child::before{display:none;}
.jr-step.is-selesai::before{background:var(--green);}
.jr-step.is-batal::before{background:repeating-linear-gradient(180deg,var(--gray-line) 0 4px,transparent 4px 8px);}

.jr-node{position:absolute;left:0;top:.15rem;width:22px;height:22px;border-radius:999px;border:2px solid var(--gray-line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:transparent;}
.jr-step.is-selesai .jr-node{background:var(--green);border-color:var(--green);color:#fff;}
.jr-step.is-berjalan .jr-node{border-color:var(--green);background:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.14);}
.jr-step.is-berjalan .jr-node::after{content:"";width:9px;height:9px;border-radius:999px;background:var(--green);animation:jrPulse 2s ease-in-out infinite;}
.jr-step.is-berhenti .jr-node{background:#a3372b;border-color:#a3372b;color:#fff;}
.jr-step.is-batal .jr-node{border-style:dashed;}

@keyframes jrPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.65);opacity:.55;}}
@media (prefers-reduced-motion: reduce){.jr-step.is-berjalan .jr-node::after{animation:none;}}

/* ---------- isi tiap langkah ---------- */
.jr-step-title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:700;font-size:.92rem;color:var(--ink);}
.jr-step-time{font-size:.75rem;font-weight:600;color:var(--muted);}
.jr-step.is-menunggu .jr-step-title,.jr-step.is-batal .jr-step-title{color:#93a29d;font-weight:600;}
.jr-step-meta{font-size:.78rem;color:var(--muted);margin-top:.2rem;}
.jr-step-note{font-size:.82rem;color:var(--muted);margin-top:.35rem;padding-left:.7rem;border-left:2px solid var(--gray-line);line-height:1.5;}

/* kartu tahap yang sedang berjalan — satu-satunya yang terbuka penuh */
.jr-step.is-berjalan .jr-step-body,
.jr-step.is-berhenti .jr-step-body{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:.9rem 1rem;margin-top:-.15rem;}
.jr-step.is-berhenti .jr-step-body{background:#fdf3f1;border-color:#eec7bf;}
.jr-step.is-berjalan .jr-step-desc{font-size:.85rem;color:#3d554c;margin-top:.4rem;line-height:1.55;}
.jr-step.is-berhenti .jr-step-desc{color:#7a4038;}
.jr-step-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.9rem;flex-wrap:wrap;}
.jr-step-target{font-size:.75rem;color:var(--muted);font-weight:600;}
.jr-step-target b{color:var(--ink);}

/* ---------- tombol aksi tahap (instalatur) ---------- */
.jr-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.jr-action-note{width:100%;margin-top:.6rem;}

/* ===================================================================
   PERJALANAN — bar ringkas untuk daftar kartu lead
   Bentuk ruas (segmented), bukan titik-titik yang harus digeser:
   satu ruas per tahap, jadi posisi terbaca sekilas tanpa menggeser.
   =================================================================== */
.jr-mini{margin-top:.9rem;}
.jr-mini-bar{display:flex;gap:3px;}
.jr-mini-seg{flex:1;height:5px;border-radius:999px;background:var(--gray-line);}
.jr-mini-seg.is-lewat{background:var(--green);}
.jr-mini-seg.is-kini{background:var(--green-light);box-shadow:0 0 0 2px rgba(123,201,111,.28);}
.jr-mini.is-berhenti .jr-mini-seg.is-lewat{background:#c85a4a;}
.jr-mini-seg--berhenti{background:repeating-linear-gradient(135deg,#e8b4aa 0 5px,#f6dcd6 5px 10px);}
.jr-mini-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.5rem;flex-wrap:wrap;}
.jr-mini-label{font-size:.78rem;font-weight:700;color:var(--navy);}
.jr-mini-label small{font-weight:600;color:var(--muted);margin-left:.35rem;}
.jr-mini-turn{font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;}
.jr-mini-late{font-size:.72rem;font-weight:700;color:#8a6314;}

/* ===================================================================
   CORONG STATUS (dashboard admin & instalatur)
   Batang mendatar bertingkat — lebar mengikuti jumlah, jadi penyempitan
   corong langsung terlihat tanpa perlu membaca angkanya satu per satu.
   =================================================================== */
.jr-funnel{display:flex;flex-direction:column;gap:.55rem;}
.jr-funnel-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 1fr auto;align-items:center;gap:.75rem;}
.jr-funnel-label{font-size:.8rem;font-weight:600;color:var(--ink);}
.jr-funnel-track{height:10px;border-radius:999px;background:var(--gray-bg);overflow:hidden;}
.jr-funnel-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy),var(--green-dark));min-width:2px;}
.jr-funnel-num{font-size:.85rem;font-weight:800;color:var(--navy);min-width:2.2rem;text-align:right;}
.jr-funnel-row.is-kosong .jr-funnel-label,.jr-funnel-row.is-kosong .jr-funnel-num{color:#9aa8a3;}

/* ---------- antrian lead macet (admin) ---------- */
.jr-stuck{display:flex;flex-direction:column;gap:.55rem;}
.jr-stuck-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .85rem;border:1px solid #f0dca0;background:#fffdf6;border-radius:10px;flex-wrap:wrap;}
.jr-stuck-main{font-size:.84rem;font-weight:700;color:var(--ink);}
.jr-stuck-sub{font-size:.75rem;color:var(--muted);font-weight:600;margin-top:.15rem;}
.jr-stuck-days{font-size:.75rem;font-weight:800;color:#8a6314;white-space:nowrap;}

@media (min-width:640px){
  .jr-head{padding:1.6rem 1.75rem 1.35rem;}
  .jr-rail{padding:1.6rem 1.75rem 1.75rem;}
}

/* ===================================================================
   BANDINGKAN PENAWARAN — ringkasan keputusan & penanda "Terbaik"
   -------------------------------------------------------------------
   Tabel 28 baris tanpa panduan sama saja menyuruh pelanggan awam
   menafsirkan sendiri. Tiga kartu di atas menjawab pertanyaan yang
   paling sering muncul, penanda per baris menuntun mata ke sel yang
   unggul, dan kelompok baris bisa dilipat supaya tidak jadi dinding.
   =================================================================== */

.compare-verdict{margin-bottom:1.5rem;}
.compare-verdict-grid{display:grid;gap:.85rem;grid-template-columns:1fr;}
.compare-verdict-card{border:1px solid var(--gray-line);border-left:3px solid var(--green);border-radius:12px;padding:.95rem 1.1rem;background:#f8fafc;}
.compare-verdict-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.compare-verdict-name{font-size:1rem;font-weight:800;color:var(--navy);margin-top:.35rem;line-height:1.3;}
.compare-verdict-value{font-size:1.35rem;font-weight:800;color:var(--green-dark);margin-top:.2rem;}
.compare-verdict-diff{font-size:.76rem;color:var(--muted);margin-top:.3rem;line-height:1.45;}
.compare-verdict-seri{font-size:.88rem;font-weight:600;color:var(--muted);}
.compare-verdict-card:has(.compare-verdict-seri){border-left-color:var(--gray-line);}

.compare-score{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.compare-score-item{font-size:.78rem;color:var(--ink);background:var(--gray-bg);border:1px solid var(--gray-line);border-radius:999px;padding:.35rem .8rem;}
.compare-score-item b{color:var(--navy);}

.compare-verdict-note{font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:.9rem;padding-left:.75rem;border-left:2px solid var(--gray-line);}

/* ---------- penanda sel unggul ---------- */
.compare-table td.compare-win{background:#eff6ff;color:var(--green-dark);font-weight:700;position:relative;}
.compare-win-chip{display:inline-block;margin-left:.4rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--green);color:#fff;border-radius:999px;padding:.12rem .45rem;vertical-align:middle;}
/* Label AI di kepala kolom tabel bandingkan — warna kuning sama dengan
   pita "Direkomendasikan" di kartu penawaran, supaya jelas satu fitur
   yang sama, cuma muncul di dua tempat. title="" bawaan browser dipakai
   untuk alasannya (hover) — tabelnya sudah padat, tidak ada ruang
   menuliskan alasan penuh di sini. */
.compare-th-rekomendasi{display:block;margin-top:.3rem;font-size:.68rem;font-weight:800;letter-spacing:.02em;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:999px;padding:.15rem .55rem;cursor:help;}

/* ---------- kelompok yang bisa dilipat ---------- */
.compare-section-header[data-group-toggle]{cursor:pointer;user-select:none;}
.compare-section-header[data-group-toggle]:hover td{background:var(--navy-2);}
.compare-group-caret{display:inline-block;width:1.1rem;font-size:.7rem;}
.compare-group-count{float:right;font-weight:600;opacity:.7;font-size:.75rem;}

/* Kolom label ikut menempel saat tabel digeser ke samping — tanpa ini,
   di ponsel angkanya terbaca tapi nama barisnya sudah hilang di kiri.
   Baris judul kelompok ikut dilekatkan juga: kalau tidak, saat digeser
   ada blok abu-abu kolom label yang menyeberang di atas pita navy. */
.compare-table td.compare-row-label{position:sticky;left:0;z-index:2;}
.compare-table .compare-section-header td{position:sticky;left:0;z-index:3;}
.compare-table thead th{z-index:5;}
.compare-table thead th:first-child{position:sticky;left:0;z-index:6;}

.compare-pick-row td{padding-top:1rem;padding-bottom:1rem;}
.compare-picked{color:var(--green-dark);font-weight:700;font-size:.85rem;}

/* ---------- tambahan grafik ---------- */
.sm-chart-rugi{fill:#fdf3f1;}
.sm-chart-zerolabel{font-size:9px;fill:var(--navy);font-family:inherit;font-weight:700;}
.sm-chart-payback{font-size:9px;font-family:inherit;font-weight:800;}
.sm-chart-legend-item small{display:block;font-weight:500;color:var(--muted);font-size:.72rem;margin-top:.1rem;}
.sm-chart-legend-item{align-items:flex-start;}
.sm-chart-legend-dot{margin-top:.28rem;}

@media (min-width:720px){
  .compare-verdict-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---------- catatan kejadian di dalam rel perjalanan ---------- */
.jr-log{border-top:1px solid var(--gray-line);padding:1rem 1.5rem 1.25rem;}
.jr-log summary{cursor:pointer;font-size:.83rem;font-weight:700;color:var(--navy);list-style:none;}
.jr-log summary::-webkit-details-marker{display:none;}
.jr-log summary::before{content:"\25B8";display:inline-block;width:1rem;color:var(--muted);}
.jr-log[open] summary::before{content:"\25BE";}
.jr-log-list{margin-top:.9rem;display:flex;flex-direction:column;gap:.75rem;}
.jr-log-list li{padding-left:.75rem;border-left:2px solid var(--gray-line);}
.jr-log-meta{font-size:.72rem;color:var(--muted);font-weight:600;}
.jr-log-text{font-size:.84rem;color:var(--ink);margin-top:.15rem;line-height:1.5;}

/* ===================================================================
   SURVEI LOKASI
   -------------------------------------------------------------------
   Penjadwalannya dua arah, jadi tampilannya harus selalu menjawab satu
   pertanyaan lebih dulu: sekarang giliran siapa. Kartu slot dibuat
   sebesar tombol dan bisa ditekan seluruh badannya — di ponsel,
   menyetujui jadwal harus semudah menekan satu kotak, bukan mencari
   tautan kecil.
   =================================================================== */

.svy-head{padding-bottom:1.1rem;}
.svy-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.svy-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.svy-installer{font-size:1.1rem;font-weight:800;color:var(--navy);margin-top:.3rem;}

.svy-status--menunggu_jawaban{background:#fff8e6;color:#8a6314;border:1px solid #f0dca0;}
.svy-status--dijadwalkan{background:#eef2ff;color:var(--navy-2);border:1px solid #c7d2fe;}
.svy-status--selesai{background:#eff6ff;color:var(--green-dark);border:1px solid #bfdbfe;}
.svy-status--dibatalkan,.svy-status--belum{background:var(--gray-bg);color:var(--muted);border:1px solid var(--gray-line);}

.svy-final{margin-top:1.1rem;padding:1rem 1.15rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;}
.svy-final-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark);}
.svy-final-time{font-size:1.05rem;font-weight:800;color:var(--navy);margin-top:.3rem;}
.svy-final-note{font-size:.82rem;color:var(--muted);margin-top:.5rem;line-height:1.55;}

.svy-section-title{font-size:1.05rem;font-weight:800;color:var(--navy);}
.svy-section-sub{font-size:.85rem;color:var(--muted);margin-top:.4rem;line-height:1.6;}

/* ---------- kartu slot jadwal ---------- */
.svy-slot-list{display:grid;gap:.7rem;margin-top:1.1rem;grid-template-columns:1fr;}
.svy-slot{display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:.95rem 1.1rem;border:1.5px solid var(--gray-line);border-radius:12px;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;}
.svy-slot:hover{border-color:var(--green);box-shadow:0 8px 20px -12px rgba(37,99,235,.55);}
.svy-slot:disabled{opacity:.55;cursor:not-allowed;}
.svy-slot-date{font-weight:700;color:var(--navy);font-size:.92rem;}
.svy-slot-time{font-size:.85rem;color:var(--muted);font-weight:600;}
.svy-slot-cta{margin-left:auto;font-size:.78rem;font-weight:800;color:#fff;background:var(--green);border-radius:999px;padding:.4rem .9rem;white-space:nowrap;}

.svy-slot-plain{margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem;font-size:.88rem;color:var(--ink);}
.svy-slot-plain li{padding-left:.85rem;border-left:2px solid var(--gray-line);}

/* ---------- form usulan ---------- */
.svy-slot-input{display:flex;align-items:flex-start;gap:.75rem;margin-top:.9rem;}
.svy-slot-num{flex-shrink:0;width:24px;height:24px;margin-top:1.65rem;border-radius:999px;background:var(--gray-bg);
  color:var(--muted);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;}

.svy-counter{margin-top:1.1rem;border-top:1px dashed var(--gray-line);padding-top:.9rem;}
.svy-counter summary{cursor:pointer;font-size:.83rem;font-weight:700;color:var(--navy);}
.svy-counter-form{margin-top:.5rem;}

/* ---------- hasil survei ---------- */
.svy-group{margin-top:1.5rem;}
.svy-group-title{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green-dark);
  padding-bottom:.5rem;border-bottom:1px solid var(--gray-line);}
.svy-dl{display:grid;grid-template-columns:1fr;gap:0;margin-top:.25rem;}
.svy-dl dt{font-size:.8rem;color:var(--muted);padding-top:.7rem;}
.svy-dl dd{font-size:.9rem;font-weight:700;color:var(--ink);margin:0;padding-bottom:.7rem;border-bottom:1px solid var(--gray-line);}
.svy-dl dd:last-child{border-bottom:none;}

.svy-note{margin-top:1.1rem;padding:.85rem 1rem;background:var(--gray-bg);border-radius:10px;}
.svy-note-label{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;}
.svy-note p{font-size:.86rem;color:var(--ink);line-height:1.6;white-space:pre-line;}

/* ---------- revisi harga setelah survei ---------- */
.svy-revisi{margin-top:1.1rem;padding:1rem 1.15rem;border-radius:12px;border:1px solid var(--gray-line);background:var(--gray-bg);}
.svy-revisi.is-naik{background:#fff8e6;border-color:#f0dca0;}
.svy-revisi.is-turun{background:#eff6ff;border-color:#bfdbfe;}
.svy-revisi-row{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--muted);padding:.2rem 0;}
.svy-revisi-row b{color:var(--ink);}
.svy-revisi-delta{margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(0,0,0,.08);font-size:.9rem;font-weight:800;color:var(--navy);}

/* ---------- form hasil (instalatur) ---------- */
.svy-field{margin-top:1.15rem;}
.svy-field > label{display:block;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}
.svy-help{font-size:.76rem;color:var(--muted);margin-top:.35rem;line-height:1.5;}
.svy-satuan{display:flex;align-items:center;gap:.5rem;}
.svy-satuan input{flex:1;}
.svy-satuan span{font-size:.82rem;color:var(--muted);font-weight:700;white-space:nowrap;}
.svy-check{display:flex;align-items:center;gap:.6rem;font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer;}

/* ---------- daftar survei instalatur ---------- */
.svy-alert{margin-bottom:1.25rem;padding:.9rem 1.1rem;background:#fff8e6;border:1px solid #f0dca0;border-radius:10px;
  font-size:.86rem;color:#7a5c17;line-height:1.55;}
.svy-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.svy-card-name{font-weight:700;color:var(--navy);font-size:1.02rem;}
.svy-card-sub{font-size:.8rem;color:var(--muted);margin-top:.2rem;}
.svy-card-body{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gray-line);}
.svy-card-hint{font-size:.84rem;color:var(--muted);line-height:1.55;margin-bottom:.85rem;}
.svy-turn{border-left:3px solid var(--green);}

@media (min-width:640px){
  .svy-dl{grid-template-columns:minmax(180px,1fr) 1.4fr;align-items:baseline;}
  .svy-dl dt{padding:.7rem 0;border-bottom:1px solid var(--gray-line);}
  .svy-dl dd{padding:.7rem 0;}
  .svy-dl dt:last-of-type,.svy-dl dd:last-of-type{border-bottom:none;}
}

/* ===================================================================
   TERMIN PEMBAYARAN
   -------------------------------------------------------------------
   Pertanyaan pertama orang soal uang selalu "sudah bayar berapa,
   sisanya berapa" — bukan "apa saja tagihannya". Karena itu ringkasan
   ditaruh di paling atas dan daftar tagihannya menyusul.
   =================================================================== */

.inv-summary{border-left:3px solid var(--green);}
.inv-summary-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.inv-summary-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.inv-summary-big{font-size:1.5rem;font-weight:800;color:var(--green-dark);margin-top:.25rem;line-height:1.2;}
.inv-summary-note{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:.9rem;padding-left:.75rem;border-left:2px solid var(--gray-line);}

/* ---------- kartu tagihan (pelanggan) ---------- */
.inv-card.is-telat{border-color:#e6b3ac;}
.inv-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.inv-card-title{font-weight:800;color:var(--navy);font-size:1.02rem;}
.inv-card-no{font-size:.76rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:.15rem;}
.inv-card-amount{font-size:1.35rem;font-weight:800;color:var(--ink);margin-top:.85rem;}
.inv-card-amount span{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.4rem;}
.inv-card-dates{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.5rem;
  padding-top:.6rem;border-top:1px solid var(--gray-line);}
.inv-card-dates b{color:var(--ink);margin-left:.3rem;}
.inv-late{color:#a3372b !important;}

.inv-status--draf{background:var(--gray-bg);color:var(--muted);border:1px solid var(--gray-line);}
.inv-status--terbit{background:#fff8e6;color:#8a6314;border:1px solid #f0dca0;}
.inv-status--menunggu_konfirmasi{background:#eef2ff;color:var(--navy-2);border:1px solid #c7d2fe;}
.inv-status--lunas{background:#eff6ff;color:var(--green-dark);border:1px solid #bfdbfe;}
.inv-status--batal{background:var(--gray-bg);color:var(--muted);border:1px solid var(--gray-line);}

.inv-pay-form{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--gray-line);}
.inv-pay-title{font-size:.9rem;font-weight:800;color:var(--navy);}
.inv-pay-hint{font-size:.8rem;color:var(--muted);margin:.3rem 0 .7rem;line-height:1.5;}
.inv-waiting{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--gray-line);}
.inv-waiting p{font-size:.83rem;color:var(--muted);margin-top:.5rem;line-height:1.6;}
.inv-paid{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--gray-line);
  font-size:.86rem;font-weight:700;color:var(--green-dark);}

/* ---------- baris tagihan (instalatur) ---------- */
.inv-rows{margin-top:1.1rem;display:flex;flex-direction:column;}
.inv-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 0;border-top:1px solid var(--gray-line);}
.inv-row.is-telat{background:#fdf6f4;}
.inv-row-main{flex:1;min-width:180px;}
.inv-row-title{font-weight:700;color:var(--ink);font-size:.9rem;}
.inv-row-meta{font-size:.75rem;color:var(--muted);margin-top:.15rem;}
.inv-row-meta b{margin-left:.4rem;}
.inv-row-note{font-size:.78rem;color:var(--muted);margin-top:.35rem;padding-left:.6rem;border-left:2px solid var(--gray-line);}
.inv-row-amount{font-weight:800;color:var(--navy);font-size:.95rem;white-space:nowrap;}
.inv-row-action{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}

/* ---------- penyusunan rencana termin ---------- */
.inv-plan-head{border-left:3px solid var(--navy);}
.inv-plan-row{display:flex;align-items:flex-start;gap:.75rem;margin-top:.9rem;}
.inv-plan-del{flex-shrink:0;margin-top:1.5rem;width:30px;height:30px;border-radius:8px;border:1px solid var(--gray-line);
  background:#fff;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;font-family:inherit;}
.inv-plan-del:hover{border-color:#e6b3ac;color:#a3372b;}
.inv-plan-total{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.25rem;
  padding-top:1rem;border-top:1px solid var(--gray-line);font-size:.9rem;color:var(--muted);}
.inv-plan-total b{font-size:1.15rem;color:var(--navy);}
.inv-plan-diff{margin-top:.5rem;font-size:.82rem;font-weight:700;}
.inv-plan-diff.is-pas{color:var(--green-dark);}
.inv-plan-diff.is-beda{color:#a3372b;}

/* ===================================================================
   BADGE KEPERCAYAAN INSTALATUR
   -------------------------------------------------------------------
   Dua bentuk yang sengaja dibedakan: badge yang bisa diklik sampai ke
   dokumennya (IUJPTL, SBU, asosiasi) diberi garis bawah putus-putus
   supaya terlihat bisa ditekan, sedangkan badge yang berhenti sebagai
   pernyataan terverifikasi (NIB, NPWP) tampil datar. Kalau keduanya
   sama persis, pengguna akan mengklik yang tidak bisa diklik.
   =================================================================== */

.bdg-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;}
.bdg{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;
  padding:.22rem .55rem;border-radius:999px;white-space:nowrap;text-decoration:none;line-height:1.4;}
.bdg-tick{font-size:.72rem;line-height:1;}

.bdg--dok{background:#eff6ff;color:var(--green-dark);border:1px solid #bfdbfe;border-bottom-style:dashed;}
.bdg--dok:hover{background:#dbeafe;}
.bdg--status{background:var(--gray-bg);color:#4a5c56;border:1px solid var(--gray-line);}
.bdg--asosiasi{background:#eef2ff;color:var(--navy-2);border:1px solid #c7d2fe;border-bottom-style:dashed;}
.bdg--asosiasi:hover{background:#e2ecf5;}

.bdg-row.is-ringkas .bdg{font-size:.64rem;padding:.16rem .45rem;}

/* ===================================================================
   ULASAN INSTALLER — rating pelanggan.
   =================================================================== */

/* Ringkasan baca-saja — kartu penawaran, halaman installer sendiri. */
.rating-ringkas{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);}
.rating-ringkas .stars{letter-spacing:1px;}
.rating-ringkas b{color:var(--ink);}
.rating-ringkas.is-kosong{color:var(--muted);font-style:italic;}

/* Borang bintang — lima radio disusun terbalik (row-reverse) supaya
   selector "~" bisa menyalakan semua bintang dari yang di-hover/dipilih
   ke arah KIRI tanpa JavaScript sama sekali. */
.star-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.1rem;}
.star-input input{position:absolute;opacity:0;width:0;height:0;}
.star-input label{font-size:2rem;line-height:1;color:var(--gray-line);cursor:pointer;transition:color .1s;}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label{color:var(--star);}

/* ===================================================================
   HALAMAN ASOSIASI
   =================================================================== */

.aso-grid{display:grid;gap:1rem;grid-template-columns:1fr;}
.aso-card{text-decoration:none;color:inherit;display:block;transition:border-color .15s ease, box-shadow .15s ease;}
.aso-card:hover{border-color:var(--green);box-shadow:0 10px 24px -14px rgba(37,99,235,.5);}
.aso-card-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.aso-mark{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:.25rem .7rem;
  border-radius:8px;background:var(--navy);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.03em;}
.aso-count{font-size:.75rem;font-weight:700;color:var(--muted);}
.aso-card-name{font-weight:800;color:var(--navy);font-size:1rem;margin-top:.8rem;line-height:1.35;}
.aso-card-desc{font-size:.84rem;color:var(--muted);line-height:1.6;margin-top:.45rem;}

.aso-kontak{display:flex;flex-direction:column;gap:.45rem;margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid var(--gray-line);font-size:.84rem;color:var(--muted);}
.aso-kontak b{color:var(--ink);margin-right:.35rem;}

.aso-anggota-nama{font-weight:700;color:var(--navy);font-size:.98rem;}
.aso-anggota-no{font-size:.76rem;color:var(--muted);margin-top:.15rem;}

@media (min-width:640px){
  .aso-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- tanda jadi: tagihan yang penerimanya bukan instalatur ---------- */
.inv-card--platform{border-left:3px solid var(--navy);}
.inv-penerima{margin-top:.6rem;font-size:.78rem;font-weight:700;color:var(--navy-2);
  background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:.28rem .7rem;display:inline-block;}

/* ===================================================================
   PEMBAYARAN BIAYA KONSULTASI
   -------------------------------------------------------------------
   Nominal ditaruh paling atas dan paling besar. Di halaman pembayaran,
   pertanyaan pertama selalu "berapa yang harus saya bayar" — bukan
   "metodenya apa saja".
   =================================================================== */

.pay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:1px solid var(--gray-line);margin-bottom:1.25rem;}
.pay-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.pay-nominal{font-size:1.9rem;font-weight:800;color:var(--navy);margin-top:.2rem;line-height:1.15;}
.pay-metode{font-size:.85rem;font-weight:700;color:var(--green-dark);margin-top:.3rem;}
.pay-hitung{text-align:right;}
.pay-sisa{font-size:.95rem;font-weight:800;color:#8a6314;margin-top:.2rem;}

.pay-jelas{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem;
  padding-left:.85rem;border-left:2px solid var(--green-light);}
.pay-jelas b{color:var(--ink);}

/* ---------- pilih metode ---------- */
.pay-metode-kartu{border:1.5px solid var(--gray-line);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:.75rem;
  transition:border-color .15s ease;}
.pay-metode-kartu:has(input[name="metode"]:checked){border-color:var(--green);background:#eff6ff;}
.pay-metode-pilih{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;}
.pay-metode-pilih b{display:block;font-size:.95rem;color:var(--ink);}
.pay-metode-pilih small{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem;line-height:1.5;}

.pay-kanal{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--gray-line);}
.pay-kanal-item{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;
  border:1px solid var(--gray-line);border-radius:999px;padding:.35rem .8rem;cursor:pointer;background:#fff;}
.pay-kanal-item:has(input:checked){border-color:var(--green);background:#eff6ff;color:var(--green-dark);}
.pay-kanal-item input{margin:0;}

/* ---------- instruksi bayar ---------- */
.pay-blok{margin-bottom:1.25rem;}
.pay-blok-label{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.pay-va{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;font-weight:800;
  color:var(--navy);letter-spacing:.06em;margin-bottom:.7rem;word-break:break-all;}
.pay-qr-img{width:220px;height:auto;display:block;margin:.5rem 0;border:1px solid var(--gray-line);border-radius:12px;padding:.5rem;background:#fff;}
.pay-qr-teks{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--muted);
  background:var(--gray-bg);border:1px solid var(--gray-line);border-radius:10px;padding:.75rem;word-break:break-all;line-height:1.5;}
.pay-hint{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:.6rem;}

.pay-tunggu{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:#eef2ff;
  border:1px solid #c7d2fe;border-radius:10px;font-size:.86rem;font-weight:600;color:var(--navy-2);}
.pay-titik{width:9px;height:9px;border-radius:999px;background:var(--navy-2);flex-shrink:0;
  animation:payDenyut 1.4s ease-in-out infinite;}
@keyframes payDenyut{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion: reduce){.pay-titik{animation:none;}}

.pay-simulasi{margin-top:1.25rem;padding:.9rem 1.1rem;background:#fff8e6;border:1px solid #f0dca0;
  border-radius:10px;font-size:.84rem;color:#7a5c17;line-height:1.6;}
.pay-simulasi code{background:rgba(0,0,0,.06);padding:.1rem .3rem;border-radius:4px;font-size:.8rem;}

/* ---------- rentang perkiraan harga PLTS ---------- */
.harga-kisaran{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:1.25rem;}
.harga-kisaran-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-light);}
.harga-kisaran-angka{font-size:1.75rem;font-weight:800;margin-top:.35rem;line-height:1.2;}
.harga-kisaran-catatan{font-size:.83rem;color:#cbd5e1;margin-top:.7rem;line-height:1.65;}
.harga-kisaran-catatan b{color:#fff;}

/* ===================================================================
   Empat pertanyaan kualifikasi (formulir Minta Proposal)
   -------------------------------------------------------------------
   Bentuknya kepingan pilihan, bukan menu gulung: seluruh pilihan
   terbaca sekaligus, dan pelanggan bisa menjawab keempatnya tanpa
   membuka apa pun. Blok yang belum terjawab diberi garis kiri merah
   lewat kelas .is-missing yang dipasang dari public/js.
   =================================================================== */
.qual-section{border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;}
.qual-section-head{background:var(--gray-bg);padding:1rem 1.15rem;border-bottom:1px solid var(--gray-line);}
.qual-section-head h3{font-size:.95rem;color:var(--navy);}
.qual-section-head p{font-size:.8rem;color:var(--muted);line-height:1.65;margin-top:.3rem;}
.qual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
.qual-block{border:0;border-top:1px solid var(--gray-line);border-right:1px solid var(--gray-line);margin:0;padding:1rem 1.15rem;min-width:0;}
.qual-block:nth-child(-n+2){border-top:0;}
.qual-block:nth-child(2n){border-right:0;}
.qual-block.is-missing{box-shadow:inset 3px 0 0 #c0392b;background:#fdf6f5;}
[data-prioritas-group].is-missing{box-shadow:inset 3px 0 0 #c0392b;background:#fdf6f5;border-radius:10px;}
.qual-question{font-size:.85rem;font-weight:700;color:var(--navy);padding:0;}
.qual-why{font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:.3rem;}
.qual-chips{display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem;}
.qual-chip{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;line-height:1.5;
  border:1px solid var(--gray-line);border-radius:9px;padding:.5rem .65rem;cursor:pointer;
  transition:border-color .12s, background .12s;}
.qual-chip:hover{border-color:var(--green-light);}
.qual-chip input{margin:.2rem 0 0;accent-color:var(--green);flex:none;}
.qual-chip:has(input:checked){border-color:var(--green);background:#eff6ff;font-weight:600;}
@media (max-width:719px){
  .qual-grid{grid-template-columns:1fr;}
  .qual-block{border-right:0;}
  .qual-block:nth-child(2){border-top:1px solid var(--gray-line);}
}

/* ===================================================================
   Kartu lead — pita keramaian & ringkasan kualifikasi
   -------------------------------------------------------------------
   Tiga nada: sepi (hijau, ajakan), sedang (kuning), ramai (merah bata).
   Warnanya sengaja tidak sekeras lencana galat supaya "ramai" terbaca
   sebagai keterangan, bukan larangan.
   =================================================================== */
.lead-pita{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;
  border-radius:999px;padding:.22rem .6rem;margin-top:.5rem;border:1px solid transparent;}
.lead-pita.is-sepi{background:#eff6ff;color:var(--green-dark);border-color:#bfdbfe;}
.lead-pita.is-sedang{background:#fff8e6;color:#8a6314;border-color:#f0dca0;}
.lead-pita.is-ramai{background:#fbf0ee;color:#a3372b;border-color:#e6c6c0;}
.lead-pita.is-milikanda{background:var(--navy);color:#fff;border-color:var(--navy);}
.lead-pita.is-company{background:#f3e8ff;color:#6b21a8;border-color:#e0c3fa;}
.lead-pita.is-cocok-fokus{background:var(--green);color:#fff;border-color:var(--green);font-weight:700;}
.lead-pita.is-prioritas{background:var(--gray-bg);color:var(--ink);border-color:var(--gray-line);}
.lead-kualifikasi{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem;}
.lead-kualifikasi span{font-size:.73rem;color:var(--muted);background:var(--gray-bg);
  border:1px solid var(--gray-line);border-radius:6px;padding:.16rem .45rem;}
.lead-kualifikasi span.is-kosong{background:#fff;border-style:dashed;color:#9aa5a1;}
.lead-kualifikasi-penuh{display:grid;gap:.35rem;font-size:.87rem;margin-top:.5rem;}
.lead-kualifikasi-penuh > div{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--gray-line);padding-bottom:.3rem;}
.lead-kualifikasi-penuh .k-label{color:var(--muted);}
.lead-kualifikasi-penuh .k-nilai{font-weight:600;text-align:right;}
.lead-kualifikasi-penuh .k-nilai.is-kosong{font-weight:400;color:#9aa5a1;font-style:italic;}

/* ===================================================================
   PEMBEDA 03 — kepala halaman rata kiri & bilah alat menempel
   -------------------------------------------------------------------
   Awalnya cuma dipakai di Cari Leads untuk menggantikan .leads-banner
   (spanduk navy gelap tinggi, rata tengah, judul+deskripsi di atasnya —
   pola generik yang membuat produk ini terasa seperti template e-commerce
   pada umumnya). Sekarang .ls-head dipakai di SELURUH halaman
   installer dan admin yang dulu memakai .leads-banner — kelasnya sendiri
   sudah dihapus dari berkas ini, tidak ada lagi yang menggunakannya.
   Judul rata kiri berukuran wajar, dan di Cari Leads saringan pindah ke
   satu baris yang menempel saat halaman digulir sehingga daftar lead naik
   satu layar penuh.
   =================================================================== */
.ls-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:1.6rem 1.75rem .9rem;}
.ls-head h1{font-size:1.35rem;letter-spacing:-.01em;color:var(--navy);}
.ls-head p{color:var(--muted);font-size:.86rem;margin-top:.25rem;max-width:62ch;}
.ls-count{font-size:.8rem;color:var(--muted);white-space:nowrap;}
.ls-count b{color:var(--navy);font-size:1.05rem;font-variant-numeric:tabular-nums;}

.ls-toolbar{position:sticky;top:0;z-index:20;display:flex;gap:.5rem;flex-wrap:wrap;
  align-items:center;padding:.7rem 1.75rem;background:#fff;
  border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line);}
.ls-search{display:flex;align-items:center;gap:.45rem;flex:1 1 240px;min-width:180px;
  border:1px solid var(--gray-line);border-radius:8px;padding:.42rem .65rem;background:#fff;}
.ls-search:focus-within{border-color:var(--green);box-shadow:0 0 0 2px rgba(37,99,235,.12);}
.ls-search span{color:var(--muted);font-size:.85rem;flex:none;}
.ls-search input{border:0;outline:0;flex:1;font:inherit;font-size:.88rem;color:var(--ink);
  background:transparent;min-width:0;}
.ls-select{border:1px solid var(--gray-line);border-radius:8px;padding:.42rem .6rem;
  font:inherit;font-size:.84rem;color:var(--ink);background:#fff;cursor:pointer;max-width:100%;}
.ls-select:focus-visible,.ls-toggle:focus-visible{outline:2px solid var(--green);outline-offset:1px;}
.ls-toggle{border:1px solid var(--gray-line);border-radius:8px;padding:.42rem .7rem;
  font:inherit;font-size:.84rem;color:var(--ink);background:#fff;cursor:pointer;white-space:nowrap;}
.ls-toggle[data-on="1"]{background:var(--navy);border-color:var(--navy);color:#fff;}
@media (max-width:719px){
  .ls-head{padding:1.2rem 1.1rem .7rem;}
  .ls-toolbar{padding:.6rem 1.1rem;}
  .ls-select,.ls-toggle{flex:1 1 44%;}
}

/* ===================================================================
   PEMBEDA 04 — daftar lead sebagai buku besar, bukan rak kartu produk
   -------------------------------------------------------------------
   Versi sebelumnya (.lead-card-x) sudah memberi tepi warna dan angka
   rata kanan, tapi kerangkanya tetap identik dengan rancangan contoh:
   kotak putih bersudut, bayangan saat disorot, tiga kolom angka di
   kanan, dan ikon bookmark melayang di pojok — empat kebiasaan kartu
   e-commerce yang paling gampang dikenali.
   Susunan baru ini menghapus keempatnya sekaligus:
     - SATU wadah bergaris (.leads-list) berisi BARIS, bukan tumpukan
       kartu terpisah masing-masing berbayangan — pola yang sama dipakai
       Koin Saya (.idash-table) dan Setting (.setel-dok), bukan pola baru.
     - Bukan tiga kolom angka sejajar; hanya SATU angka utama (tagihan
       listrik/bulan) yang tampil besar, karena itu satu-satunya yang
       menentukan ukuran sistem. Daya VA dan tipe properti pindah jadi
       kepingan di baris fakta bersama kualifikasi dan pita persaingan —
       satu bahasa kepingan untuk semua info pendek, bukan dua sistem
       (tabel + kepingan) berdampingan.
     - Warna keramaian pindah dari bilah tepi 4px jadi titik kecil di
       baris waktu — sinyalnya tetap ada, cuma tidak lagi meniru bilah
       prioritas gaya papan Kanban.
     - Tombol simpan jadi tautan kecil yang ikut alur teks, bukan ikon
       bulat melayang di pojok — pojok melayang itu justru yang paling
       universal dikenali sebagai "kartu produk" di hampir semua
       marketplace.
   =================================================================== */
.leads-list{background:#fff;border:1px solid var(--gray-line);border-radius:8px;overflow:hidden;
  display:block;padding:0;}
.lead-line{display:block;padding:1.05rem 1.25rem;border-bottom:1px solid var(--gray-line);
  cursor:pointer;transition:background-color .1s;}
.lead-line:last-child{border-bottom:0;}
.lead-line:hover{background:var(--gray-bg);}

/* Lead yang 2 prioritasnya PERSIS SAMA dengan concern installer yang
   sedang login — lihat App\Enums\Prioritas::cocok() & lead-pita.blade.php.
   Garis kiri hijau + latar lembut, bukan border penuh, supaya tetap
   mudah dibedakan dari .is-terpilih (border navy penuh di panel kanan). */
.lead-card.is-prioritas-cocok{box-shadow:inset 3px 0 0 var(--green);background:#f7fdf9;}

.ll-top{display:flex;gap:1rem;align-items:flex-start;}
.ll-ident{flex:1;min-width:0;}
.ll-meta{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted);letter-spacing:.02em;}
.ll-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--gray-line);}
.ll-dot.is-sepi{background:var(--green);}
.ll-dot.is-sedang{background:#c99a1f;}
.ll-dot.is-ramai{background:#a3372b;}
.ll-name{font-size:1rem;font-weight:700;color:var(--navy);margin-top:.2rem;letter-spacing:-.005em;}
.ll-addr{font-size:.8rem;color:var(--muted);margin-top:.25rem;display:flex;gap:.35rem;align-items:flex-start;}

.ll-harga{flex:none;text-align:right;white-space:nowrap;}
.ll-harga-num{display:block;font-size:1.1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.ll-harga-num.is-empty{font-weight:400;font-style:italic;color:#9aa5a1;font-size:.85rem;}
.ll-harga-label{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.1rem;}

.ll-fakta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.65rem;}
.ll-chip{display:inline-flex;align-items:center;font-size:.76rem;color:var(--muted);
  background:var(--gray-bg);border:1px solid var(--gray-line);border-radius:999px;padding:.18rem .6rem;}

.lead-bookmark{flex:none;background:none;border:1px solid var(--gray-line);border-radius:999px;
  cursor:pointer;font-size:.78rem;font-weight:600;color:var(--muted);padding:.32rem .7rem;
  line-height:1;font-family:inherit;white-space:nowrap;}
.lead-bookmark:hover{border-color:var(--green-light);color:var(--green-dark);}
.lead-bookmark.is-saved{background:#eff6ff;border-color:#bfdbfe;color:var(--green-dark);}

@media (max-width:640px){
  .ll-top{flex-wrap:wrap;}
  .ll-harga{text-align:left;order:3;flex-basis:100%;margin-top:.4rem;}
}

.lead-line .lead-kualifikasi{margin:0;display:contents;}

/* Pita tambahan yang dipakai bersama partial lead-pita */
.lead-pita.is-terkunci{background:#fff8e6;color:#8a6314;border-color:#f0dca0;}
.lead-pita{margin-top:0;}

/* Panel detail — baris kualifikasi & pita keramaian */
.lead-panel-pita{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 .2rem;}

/* ===================================================================
   PEMBEDA 01 — rak menu navy berkelompok
   -------------------------------------------------------------------
   Menggantikan daftar rata abu-abu. Latar navy, sedikit lebih lebar,
   menu dibagi kelompok berjudul, dan penanda aktif berupa batang hijau
   di tepi kiri alih-alih kapsul. Saldo koin duduk di kepala rak.
   =================================================================== */
.app-sidebar{width:238px;background:var(--navy);border-right:0;padding:1.35rem .85rem 2rem;}
/* Rak menu tingginya satu layar penuh dan menempel, jadi pada halaman yang
   panjang ada pita kosong di bawahnya. Dengan latar putih rak itu tidak
   kelihatan; dengan latar navy, batas putus di tengah halaman langsung
   terbaca sebagai cacat. Kolomnya diteruskan lewat latar bertingkat pada
   pembungkusnya — hanya di lebar tempat raknya memang berdiri. */
@media (min-width:881px){
  .app-shell{background:linear-gradient(to right, var(--navy) 0 238px, var(--gray-bg) 238px);}
}
.app-sidebar-brand{color:#fff;margin-bottom:1.1rem;padding:0 .35rem;}

.app-saldo{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  text-decoration:none;margin:0 .1rem 1.35rem;padding:.6rem .75rem;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}
.app-saldo:hover{background:rgba(255,255,255,.1);}
.app-saldo-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#8ea3ae;}
.app-saldo-num{font-size:1.15rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.app-saldo.is-tipis{background:rgba(201,154,31,.16);border-color:rgba(240,220,160,.45);}
.app-saldo.is-tipis .app-saldo-num{color:#f0dca0;}

.app-nav-group + .app-nav-group{margin-top:1.15rem;}
.app-nav-group-title{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6f8794;padding:0 .75rem .4rem;}
.app-sidebar .app-nav-item{position:relative;border-radius:7px;color:#b9c9d1;font-weight:500;
  padding:.52rem .75rem;font-size:.87rem;}
.app-sidebar .app-nav-item:not(.is-disabled):not(.is-active):hover{background:rgba(255,255,255,.07);color:#fff;}
.app-sidebar .app-nav-item.is-active{background:rgba(37,99,235,.16);color:#fff;font-weight:700;}
.app-sidebar .app-nav-item.is-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:0 2px 2px 0;background:var(--green);}
.app-sidebar .app-nav-item.is-disabled{opacity:.42;color:#8ea3ae;}
.app-sidebar .app-nav-soon{background:rgba(255,255,255,.12);color:#b9c9d1;}
@media (max-width:880px){ .app-sidebar{left:-258px;} }

/* ===================================================================
   PEMBEDA 02 — dashboard belah 62 : 38
   -------------------------------------------------------------------
   Kiri: pekerjaan. Kanan: angka. Panel di sini TIDAK memakai kelas
   .card supaya sudut, garis, dan bayangannya bisa berbeda dari kartu
   di halaman lain tanpa saling menimpa.
   =================================================================== */
.idash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:1.6rem 1.75rem 1.1rem;}
.idash-head h1{font-size:1.35rem;color:var(--navy);letter-spacing:-.01em;}
.idash-head p{color:var(--muted);font-size:.86rem;margin-top:.25rem;max-width:60ch;}

.idash-split{display:grid;grid-template-columns:62fr 38fr;gap:1.1rem;
  padding:0 1.75rem 3rem;align-items:start;}
.idash-kerja,.idash-angka{display:flex;flex-direction:column;gap:1.1rem;min-width:0;}
@media (max-width:1080px){ .idash-split{grid-template-columns:1fr;} }
@media (max-width:719px){ .idash-head{padding:1.2rem 1.1rem .8rem;} .idash-split{padding:0 1.1rem 2.5rem;} }

.idash-panel{background:#fff;border:1px solid var(--gray-line);border-radius:8px;overflow:hidden;}
.idash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--gray-line);background:var(--gray-bg);}
.idash-panel-head h2{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);}
.idash-panel-count{background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;
  border-radius:999px;padding:.1rem .5rem;font-variant-numeric:tabular-nums;}
.idash-panel-link{font-size:.78rem;color:var(--green-dark);text-decoration:none;font-weight:600;}
.idash-panel-link:hover{text-decoration:underline;}

.idash-bersih{padding:1.5rem 1rem;text-align:center;display:grid;gap:.3rem;}
.idash-bersih b{color:var(--ink);font-size:.92rem;}
.idash-bersih span{color:var(--muted);font-size:.82rem;line-height:1.6;max-width:46ch;margin-inline:auto;}

.idash-tindakan{list-style:none;margin:0;padding:0;}
.idash-tindakan-item{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1rem .85rem .8rem;border-left:4px solid var(--gray-line);
  border-bottom:1px solid var(--gray-line);}
.idash-tindakan-item:last-child{border-bottom:0;}
.idash-tindakan-item.is-penting{border-left-color:#a3372b;}
.idash-tindakan-item.is-perhatian{border-left-color:#c99a1f;}
.idash-tindakan-item.is-kabar{border-left-color:var(--green);}
.idash-tindakan-isi{flex:1;min-width:200px;}
.idash-tindakan-judul{font-weight:700;color:var(--navy);font-size:.92rem;}
.idash-tindakan-ket{color:var(--muted);font-size:.82rem;line-height:1.6;margin-top:.2rem;max-width:62ch;}
.idash-tindakan-aksi{flex:none;align-self:center;font-size:.8rem;font-weight:600;
  color:var(--green-dark);text-decoration:none;white-space:nowrap;}
.idash-tindakan-aksi:hover{text-decoration:underline;}

.idash-kpi{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.idash-kpi > div{padding:.85rem 1rem;border-right:1px solid var(--gray-line);
  border-bottom:1px solid var(--gray-line);display:grid;gap:.1rem;}
.idash-kpi > div:nth-child(2n){border-right:0;}
.idash-kpi > div:nth-last-child(-n+2){border-bottom:0;}
.idash-kpi-num{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.1;
  font-variant-numeric:tabular-nums;}
.idash-kpi-num.is-baik{color:var(--green-dark);}
.idash-kpi-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.idash-kpi-total{padding:.6rem 1rem;border-top:1px solid var(--gray-line);background:var(--gray-bg);
  font-size:.76rem;color:var(--muted);}

.idash-panel .sm-chart-wrap{padding:.85rem 1rem 1rem;overflow-x:auto;margin-top:0;}
.idash-panel .table-scroll{margin-top:0;border:0;border-radius:0;}
.idash-panel .idash-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.idash-panel .idash-table th{text-align:left;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:600;padding:.55rem 1rem;
  border-bottom:1px solid var(--gray-line);white-space:nowrap;}
.idash-panel .idash-table td{padding:.55rem 1rem;border-bottom:1px solid var(--gray-line);}
.idash-panel .idash-table tr:last-child td{border-bottom:0;}

/* ===================================================================
   Halaman Setting installer
   -------------------------------------------------------------------
   Lima borang terpisah, bukan satu borang raksasa: mengganti nomor
   telepon tidak boleh menuntut orang mengetik ulang kata sandinya.
   Tiap blok punya kepalanya sendiri dengan satu kalimat yang
   menjelaskan akibat mengubahnya.
   =================================================================== */
.setel-wrap{max-width:720px;padding:0 1.75rem 4rem;display:flex;flex-direction:column;gap:1.1rem;}
@media (max-width:719px){ .setel-wrap{padding:0 1.1rem 3rem;} }

.setel-kabar{border-radius:8px;padding:.75rem 1rem;font-size:.88rem;line-height:1.6;font-weight:600;}
.setel-kabar.is-baik{background:#eff6ff;border:1px solid #bfdbfe;color:var(--green-dark);}
.setel-kabar.is-galat{background:#fbf0ee;border:1px solid #e6c6c0;color:#a3372b;}

.setel-blok{background:#fff;border:1px solid var(--gray-line);border-radius:8px;overflow:hidden;}
.setel-blok-head{padding:.85rem 1.15rem;border-bottom:1px solid var(--gray-line);background:var(--gray-bg);}
.setel-blok-head h2{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);}
.setel-blok-head p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:.25rem;max-width:62ch;}

.setel-isi{padding:1.15rem;display:flex;flex-direction:column;gap:1rem;}
.setel-baris{display:flex;flex-direction:column;gap:.35rem;}
.setel-baris label{font-size:.78rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;}
.setel-catatan{font-size:.78rem;color:var(--muted);line-height:1.6;}
.setel-baris input:disabled{background:var(--gray-bg);color:var(--muted);cursor:not-allowed;}

.setel-status{font-size:.82rem;color:var(--muted);line-height:1.65;background:var(--gray-bg);
  border-radius:8px;padding:.7rem .9rem;}
.setel-status .is-baik{color:var(--green-dark);}
.setel-status .is-galat{color:#a3372b;}
.setel-status .is-tunggu{color:#8a6314;}

.setel-semua{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--gray-line);
  border-radius:8px;padding:.7rem .9rem;cursor:pointer;font-size:.88rem;line-height:1.5;}
.setel-semua:has(input:checked){border-color:var(--green);background:#eff6ff;}
.setel-semua input{margin-top:.2rem;accent-color:var(--green);flex:none;}

.setel-provinsi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.15rem .75rem;
  max-height:230px;overflow-y:auto;border:1px solid var(--gray-line);border-radius:8px;padding:.7rem .9rem;}
.setel-provinsi label{display:flex;gap:.45rem;align-items:center;font-size:.83rem;cursor:pointer;padding:.12rem 0;}
.setel-provinsi input{accent-color:var(--green);flex:none;}
.setel-provinsi.is-mati{opacity:.4;pointer-events:none;}

.setel-dok{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--gray-line);padding-bottom:.85rem;}
.setel-dok:last-of-type{border-bottom:0;padding-bottom:0;}
.setel-dok-nama{flex:none;width:150px;font-size:.84rem;font-weight:700;color:var(--navy);
  display:flex;flex-direction:column;gap:.15rem;}
.setel-dok-nama a{font-size:.76rem;font-weight:600;color:var(--green-dark);}
.setel-dok input[type=file]{flex:1;min-width:210px;font-size:.82rem;padding:.4rem .5rem;}

.setel-aksi{display:flex;justify-content:flex-end;padding-top:.2rem;}

/* ===================================================================
   PEMBEDA 06 — formulir penawaran bertangga
   -------------------------------------------------------------------
   Rel langkah menempel di kiri, isian di kanan, bilah harga menempel di
   dasar layar. Rancangan contoh menumpuk tiga kotak besar dalam satu
   gulir dengan rel FAQ di kanan; di sini relnya membawa langkah dan
   kualifikasi pelanggan — dua hal yang benar-benar dipakai saat harga
   sedang ditentukan.
   =================================================================== */
.pnw-tata{display:grid;grid-template-columns:266px minmax(0,1fr);gap:1.5rem;align-items:start;
  max-width:1080px;}
@media (max-width:1000px){ .pnw-tata{grid-template-columns:1fr;} }

.pnw-rel{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1rem;}
@media (max-width:1000px){ .pnw-rel{position:static;} }
.pnw-rel ol{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--gray-line);
  border-radius:8px;overflow:hidden;}
.pnw-rel li{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;font-size:.82rem;
  line-height:1.5;color:var(--muted);border-bottom:1px solid var(--gray-line);
  border-left:3px solid transparent;}
.pnw-rel li:last-child{border-bottom:0;}
.pnw-rel li b{color:var(--navy);font-size:.88rem;}
.pnw-rel li.is-aktif{border-left-color:var(--green);background:#f8fafc;}
.pnw-rel li.is-lewat{cursor:pointer;}
.pnw-rel li.is-lewat:hover{background:var(--gray-bg);}
.pnw-rel-no{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gray-bg);
  border:1px solid var(--gray-line);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.pnw-rel li.is-aktif .pnw-rel-no{background:var(--green);border-color:var(--green);color:#fff;}
.pnw-rel li.is-lewat .pnw-rel-no{background:var(--navy);border-color:var(--navy);color:#fff;}

.pnw-rel-kual{background:#fff;border:1px solid var(--gray-line);border-radius:8px;padding:.85rem .9rem;}
.pnw-rel-kual-judul{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);margin-bottom:.5rem;}
.pnw-rel-kual-baris{display:flex;flex-direction:column;gap:.1rem;font-size:.78rem;
  padding:.35rem 0;border-bottom:1px solid var(--gray-line);}
.pnw-rel-kual-baris span{color:var(--muted);}
.pnw-rel-kual-baris b{color:var(--ink);}
.pnw-rel-kual-baris b.is-kosong{color:#9aa5a1;font-weight:400;font-style:italic;}
.pnw-rel-kual p{font-size:.74rem;color:var(--muted);line-height:1.55;margin-top:.6rem;}

.pnw-isi{min-width:0;}
.pnw-langkah-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:1.5rem;}

.pnw-bilah{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.25rem;
  background:var(--navy);color:#fff;border-radius:8px;padding:.75rem 1.1rem;max-width:1080px;}
.pnw-bilah-harga{display:flex;flex-direction:column;gap:.1rem;}
.pnw-bilah-label{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#8ea3ae;}
.pnw-bilah-harga b{font-size:1.15rem;font-variant-numeric:tabular-nums;}
.pnw-bilah-aksi{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;}
.pnw-bilah-status{font-size:.76rem;color:#8ea3ae;}
.pnw-bilah .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:7px;
  padding:.35rem .8rem;background:transparent;}
.pnw-bilah .btn-ghost:hover{background:rgba(255,255,255,.1);}

/* ===================================================================
   PEMBEDA 05 — Cari Leads belah kiri-kanan
   -------------------------------------------------------------------
   Ambang 1100px HARUS sama dengan yang dipakai public/js/cari-leads.js.
   Kalau keduanya berbeda, ada lebar layar di mana panel menetap dirender
   tapi kolomnya tidak ada — atau sebaliknya.
   =================================================================== */
.leads-split{display:block;}
.leads-split-kanan{display:none;}

@media (min-width:1100px){
  .leads-split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:1.25rem;
    align-items:start;padding:0 1.75rem;}
  .leads-split-kiri{min-width:0;}
  .leads-split-kiri .leads-list{padding:1.25rem 0;max-width:none;}
  .leads-split-kanan{display:block;position:sticky;top:4.5rem;max-height:calc(100vh - 6rem);
    overflow-y:auto;background:#fff;border:1px solid var(--gray-line);border-radius:8px;
    margin-top:1.25rem;}

  /* Panel yang sama, tanpa sifat melayangnya: bukan lapisan di atas
     apa pun, jadi tidak butuh posisi tetap maupun bayangan. */
  .lead-panel.is-tetap{position:static;width:auto;height:auto;box-shadow:none;
    padding:1.15rem 1.25rem 1.5rem;overflow:visible;}
}

.leads-panel-kosong{padding:2.25rem 1.5rem;text-align:center;display:grid;gap:.4rem;}
.leads-panel-kosong b{color:var(--ink);font-size:.95rem;}
.leads-panel-kosong span{color:var(--muted);font-size:.83rem;line-height:1.65;}

.lead-panel-back.is-mati{color:var(--muted);font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;cursor:default;}

/* Kartu yang sedang ditampilkan di panel kanan. Tanpa penanda ini, di
   layar lebar tidak ada apa pun yang memberi tahu isi panel itu milik
   baris yang mana. */
.lead-card.is-terpilih{border-color:var(--navy);}
.lead-card.is-terpilih::after{content:"";position:absolute;inset:0;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--navy);pointer-events:none;}

/* Solar Systems — daftar paket komponen */
.pkt-baris{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;}
.pkt-rinci summary{cursor:pointer;font-size:.83rem;font-weight:600;color:var(--green-dark);
  padding:.4rem 0;}
.pkt-rinci .lead-kualifikasi-penuh{margin-top:.5rem;max-height:260px;overflow-y:auto;}
.pkt-rinci .k-label{text-transform:capitalize;}

/* Pemuat paket di kepala langkah komponen */
.pnw-paket{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--gray-bg);border:1px solid var(--gray-line);border-radius:8px;
  padding:.8rem 1rem;margin-bottom:1.25rem;}
.pnw-paket-teks{display:flex;flex-direction:column;gap:.15rem;min-width:220px;flex:1;}
.pnw-paket-teks b{font-size:.88rem;color:var(--navy);}
.pnw-paket-teks span{font-size:.79rem;color:var(--muted);line-height:1.55;max-width:56ch;}
.pnw-paket-aksi{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}

/* ===================================================================
   Halaman Support
   =================================================================== */
.sup-tata{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.25rem;
  padding:0 1.75rem 4rem;align-items:start;max-width:1080px;}
@media (max-width:1000px){ .sup-tata{grid-template-columns:1fr;} }
@media (max-width:719px){ .sup-tata{padding:0 1.1rem 3rem;} }

.sup-tanya{background:#fff;border:1px solid var(--gray-line);border-radius:8px;overflow:hidden;}
.sup-item{border-bottom:1px solid var(--gray-line);}
.sup-item:last-child{border-bottom:0;}
.sup-item summary{cursor:pointer;list-style:none;padding:.9rem 1.15rem;font-weight:700;
  font-size:.92rem;color:var(--navy);display:flex;justify-content:space-between;gap:1rem;
  align-items:center;}
.sup-item summary::-webkit-details-marker{display:none;}
.sup-item summary::after{content:"+";font-family:var(--mono, monospace);font-weight:400;
  font-size:1.1rem;color:var(--muted);flex:none;}
.sup-item[open] summary::after{content:"\2212";}
.sup-item summary:hover{background:var(--gray-bg);}
.sup-item p{padding:0 1.15rem 1.1rem;color:var(--ink);font-size:.88rem;line-height:1.75;
  max-width:72ch;}

.sup-rel{display:flex;flex-direction:column;gap:1.1rem;}
.sup-jalur{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:var(--ink);
  border:1px solid var(--gray-line);border-radius:8px;padding:.7rem .9rem;font-size:.85rem;
  line-height:1.5;}
.sup-jalur:hover{border-color:var(--green);background:#f8fafc;}
.sup-jalur-ikon{font-size:1.1rem;flex:none;}
.sup-jalur b{color:var(--navy);}
.sup-pintasan{display:block;text-decoration:none;color:var(--green-dark);font-size:.85rem;
  font-weight:600;padding:.45rem 0;border-bottom:1px solid var(--gray-line);}
.sup-pintasan:last-child{border-bottom:0;}
.sup-pintasan:hover{text-decoration:underline;}

/* =====================================================================
   Chat pesan (pelanggan <-> installer) — lihat public/js/chat-pesan.js.
   Panel-nya memakai kerangka .lead-panel yang sama dengan panel detail
   lead di Cari Leads (geser dari kanan di layar lebar, penuh di mobile),
   supaya tidak menambah satu lagi pola modal yang berbeda sendiri.
   ===================================================================== */
.chat-panel-head{display:flex;flex-direction:column;gap:.15rem;padding-bottom:1rem;
  border-bottom:1px solid var(--gray-line);margin-bottom:1rem;}
.chat-panel-head-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.chat-panel-title{font-size:1.05rem;font-weight:800;color:var(--navy);}
.chat-panel-sub{font-size:.78rem;color:var(--muted);}
.chat-thread{display:flex;flex-direction:column;gap:.6rem;min-height:200px;
  max-height:52vh;overflow-y:auto;padding:.25rem .1rem;}
.chat-thread-empty{margin:auto;color:var(--muted);font-size:.85rem;text-align:center;
  padding:2rem 1rem;}
.chat-msg{max-width:80%;padding:.55rem .8rem;border-radius:14px;font-size:.87rem;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.chat-msg-meta{display:block;margin-top:.25rem;font-size:.68rem;opacity:.65;}
.chat-msg.is-lawan{align-self:flex-start;background:var(--gray-bg);color:var(--ink);
  border-bottom-left-radius:4px;}
.chat-msg.is-saya{align-self:flex-end;background:var(--green);color:#fff;
  border-bottom-right-radius:4px;}
.chat-msg.is-saya .chat-msg-meta{color:rgba(255,255,255,.8);}
/* Lampiran di dalam bubble chat — gambar tampil langsung sebagai thumbnail
   (bukan cuma nama file), dokumen lain tampil sebagai chip bisa diklik. */
.chat-lampiran-gambar{display:block;margin-bottom:.4rem;border-radius:8px;overflow:hidden;}
.chat-lampiran-gambar img{display:block;max-width:100%;max-height:180px;object-fit:cover;}
.chat-lampiran-berkas{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;
  padding:.4rem .6rem;background:rgba(0,0,0,.06);border-radius:8px;text-decoration:none;
  color:inherit;font-size:.82rem;}
.chat-msg.is-saya .chat-lampiran-berkas{background:rgba(255,255,255,.18);}
.chat-lampiran-nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-weight:600;}
.chat-lampiran-ukuran{opacity:.7;font-size:.72rem;flex:none;margin-left:auto;}
.chat-form{display:flex;gap:.5rem;margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--gray-line);align-items:flex-end;}
.chat-form textarea{flex:1;resize:none;border:1px solid var(--gray-line);border-radius:10px;
  padding:.6rem .75rem;font:inherit;font-size:.87rem;line-height:1.4;min-height:2.6rem;
  max-height:6rem;}
.chat-form textarea:focus{outline:none;border-color:var(--green);}
.chat-form button{flex:none;}
.chat-form-lampiran-btn{flex:none;width:2.6rem;height:2.6rem;border-radius:10px;
  border:1px solid var(--gray-line);background:#fff;font-size:1.1rem;cursor:pointer;
  color:var(--muted);}
.chat-form-lampiran-btn:hover{border-color:var(--green);color:var(--green-dark);}
.chat-lampiran-preview{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;
  padding:.45rem .7rem;background:var(--gray-bg);border-radius:8px;font-size:.8rem;color:var(--ink);}
.chat-lampiran-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;}
.chat-lampiran-preview button{margin-left:auto;flex:none;background:none;border:none;
  cursor:pointer;font-size:1.1rem;line-height:1;color:var(--muted);padding:0 .2rem;}
.chat-lampiran-preview button:hover{color:#a3372b;}
.chat-panel-galat{color:#a3372b;font-size:.8rem;margin-top:.4rem;}
.chat-trigger{position:relative;}
.chat-trigger-badge{position:absolute;top:-6px;right:-6px;background:#a3372b;color:#fff;
  font-size:.65rem;font-weight:700;border-radius:999px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* Daftar percakapan installer (installer/pesan-index.blade.php). */
.pesan-list{display:flex;flex-direction:column;gap:.6rem;}
.pesan-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;
  border:1px solid var(--gray-line);border-radius:12px;background:#fff;cursor:pointer;
  text-align:left;width:100%;font:inherit;}
.pesan-row:hover{border-color:var(--green);background:#f8fafc;}
.pesan-row-main{flex:1;min-width:0;}
.pesan-row-nama{font-weight:700;color:var(--navy);font-size:.95rem;}
.pesan-row-cuplikan{color:var(--muted);font-size:.82rem;margin-top:.15rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pesan-row-waktu{color:var(--muted);font-size:.75rem;flex:none;}
.pesan-row-badge{background:#a3372b;color:#fff;font-size:.7rem;font-weight:700;
  border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;padding:0 6px;flex:none;}

/* ===================================================================
   Booking Konsultasi — kalender & pemilihan slot (lihat
   BookingKonsultasiController & JadwalKonsultasiService).
   =================================================================== */
.bk-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem;align-items:start;}
@media (max-width:860px){.bk-layout{grid-template-columns:1fr;}}

.bk-kalender-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;}
.bk-kalender-head span{font-weight:700;color:var(--navy);font-size:.95rem;}
.bk-kalender-hari{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;
  font-size:.72rem;color:var(--muted);text-align:center;margin-bottom:.4rem;}
.bk-kalender-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;min-height:120px;position:relative;}

.bk-hari{aspect-ratio:1;border-radius:8px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  background:none;font-family:inherit;color:var(--ink);cursor:default;}
.bk-hari.is-kosong{visibility:hidden;}
.bk-hari.is-lewat,.bk-hari.is-tutup{color:var(--gray-line);}
.bk-hari.is-tersedia{cursor:pointer;border-color:var(--gray-line);font-weight:600;}
.bk-hari.is-tersedia:hover{border-color:var(--green);background:#f0fdf4;}
.bk-hari.is-penuh{color:#c0392b;background:#fdf6f5;cursor:not-allowed;}
.bk-hari.is-dipilih{background:var(--navy);color:#fff;border-color:var(--navy);}
.bk-hari.is-hari-ini:not(.is-dipilih){box-shadow:inset 0 0 0 1px var(--green);}

.bk-loading{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.85rem;padding:2rem 0;}

.bk-slot-wrap{border-top:1px dashed var(--gray-line);margin-top:1.1rem;padding-top:1rem;}
.bk-slot-tanggal{font-weight:700;color:var(--navy);font-size:.88rem;margin-bottom:.6rem;}
.bk-slot-grid{display:flex;flex-wrap:wrap;gap:.5rem;}
.bk-slot{padding:.5rem .9rem;border-radius:8px;border:1px solid var(--gray-line);
  background:#fff;font-size:.85rem;font-family:inherit;cursor:pointer;color:var(--ink);}
.bk-slot:hover{border-color:var(--green);}
.bk-slot.is-penuh{background:var(--gray-bg);color:var(--muted);cursor:not-allowed;text-decoration:line-through;}
.bk-slot.is-dipilih{background:var(--green);border-color:var(--green);color:#fff;font-weight:700;}

.bk-ringkasan{display:flex;gap:.7rem;align-items:center;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:10px;padding:.85rem 1rem;margin-bottom:1.1rem;}
.bk-ringkasan-ikon{font-size:1.3rem;flex:none;}