/* Kalkulator panel surya — gaya disesuaikan dengan tema gelap connect1.id.
   Semua kelas berawalan k- dan dibungkus .kalk agar tidak bentrok dengan gaya website. */
.kalk{
  --surface:#0f172a; --sunken:#0b1224; --ink:#e2e8f0; --muted:#94a3b8; --line:#243247;
  --cell:#60a5fa; --sun:#f2b53a; --batt:#4fbf82; --night:#9a9ef0; --warn:#f08a4b;
  --f-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);font-size:15px;line-height:1.5;display:grid;gap:20px
}
.kalk *{box-sizing:border-box}
.kalk .k-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.kalk .k-grid{grid-template-columns:1fr}}
.kalk .k-col{display:grid;gap:20px;min-width:0}
.kalk .k-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:14px;min-width:0}
.kalk h2{font:700 1.2rem/1.2 var(--f-display);color:#fff;letter-spacing:-.01em;margin:0;display:flex;gap:10px;align-items:baseline}
.kalk h2 .k-n{font:600 .8rem var(--f-mono);color:var(--cell);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.kalk .k-hint{font-size:13px;color:var(--muted);margin:0}
.kalk label.k-f{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.kalk input,.kalk select{font:500 14px var(--f-mono);color:var(--ink);background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:7px 8px;width:100%;min-width:0}
.kalk input[type=time]{color-scheme:dark}
.kalk input:focus-visible,.kalk select:focus-visible,.kalk button:focus-visible{outline:2px solid var(--cell);outline-offset:1px}
.kalk .k-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
/* baris perangkat */
.kalk .k-dev-head,.kalk .k-dev{display:grid;grid-template-columns:minmax(0,2.2fr) .8fr .6fr .95fr .95fr .7fr .7fr 1.1fr 28px;gap:6px;align-items:center}
.kalk .k-dev-head{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 2px}
.kalk .k-dev{padding:6px 0;border-top:1px solid var(--line)}
.kalk .k-dev label{display:contents}
.kalk .k-dev label span{display:none}
.kalk .k-split{height:8px;border-radius:2px;background:var(--sun);position:relative;overflow:hidden}
.kalk .k-split i{position:absolute;inset:0 0 0 auto;background:var(--night)}
.kalk .k-splitwrap{display:grid;gap:3px;font:500 11px var(--f-mono);color:var(--muted)}
.kalk .k-del{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;border-radius:4px;padding:0}
.kalk .k-del:hover{color:var(--warn)}
@media (max-width:720px){
  .kalk .k-dev-head{display:none}
  .kalk .k-dev{grid-template-columns:1fr 1fr 1fr;row-gap:8px;padding:12px 0}
  .kalk .k-dev label{display:grid;gap:3px}
  .kalk .k-dev label span{display:block;font-size:11px;font-weight:600;color:var(--muted)}
  .kalk .k-dev .k-name{grid-column:1/3}
  .kalk .k-dev .k-splitwrap{grid-column:1/3}
}
.kalk .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 14px var(--f-display);border:1px solid var(--line);background:var(--sunken);color:var(--ink);border-radius:8px;padding:9px 14px;cursor:pointer;text-align:center}
.kalk .k-btn:hover{border-color:var(--cell)}
.kalk .k-btn.k-primary{background:#2563eb;color:#fff;border-color:#2563eb}
.kalk .k-btn.k-primary:hover{background:#1d4ed8}
.kalk .k-btn.k-wa{background:#16a34a;color:#fff;border-color:#16a34a}
.kalk .k-btn.k-wa:hover{background:#15803d}
.kalk .k-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kalk .k-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kalk .k-actions .k-primary{grid-column:1/-1}
.kalk .k-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.kalk .k-seg button{font:600 13px var(--f-display);border:0;background:var(--sunken);color:var(--muted);padding:8px 14px;cursor:pointer}
.kalk .k-seg button[aria-pressed="true"]{background:var(--cell);color:#0b1224}
.kalk .k-typecmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kalk .k-typecmp div{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;display:grid;gap:2px}
.kalk .k-typecmp div.k-on{border-color:var(--cell);box-shadow:inset 3px 0 0 var(--cell)}
.kalk .k-typecmp b{font:700 15px var(--f-display);color:#fff}
.kalk .k-typecmp span{color:var(--muted)}
/* hasil */
.kalk .k-results{position:sticky;top:84px}
@media (max-width:900px){.kalk .k-results{position:static}}
.kalk .k-plate{background:var(--surface);border:1px solid #3b5b8a;border-radius:12px;overflow:hidden}
.kalk .k-plate-h{background:#1e3a8a;color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.kalk .k-plate-h b{font:700 15px var(--f-display);letter-spacing:.08em}
.kalk .k-plate-h span{font:500 12px var(--f-mono);color:#bfdbfe}
.kalk .k-spec{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0}
.kalk .k-spec dt,.kalk .k-spec dd{margin:0;padding:9px 16px;border-top:1px solid var(--line)}
.kalk .k-spec dt{font-size:13px;color:var(--muted)}
.kalk .k-spec dd{font:500 14px var(--f-mono);text-align:right;font-variant-numeric:tabular-nums;color:#fff}
.kalk .k-spec dd small{display:block;font:400 12px var(--f-display);color:var(--muted)}
.kalk .k-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kalk .k-big div{padding:14px 16px;display:grid;gap:2px}
.kalk .k-big div+div{border-left:1px solid var(--line)}
.kalk .k-big b{font:800 28px/1 var(--f-display);font-variant-numeric:tabular-nums;color:#fff}
.kalk .k-big span{font-size:12px;color:var(--muted)}
.kalk .k-status{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;display:flex;gap:8px;align-items:flex-start}
.kalk .k-pill{font:700 11px var(--f-display);letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:2px 8px;white-space:nowrap;color:#0b1224}
.kalk .k-ok{background:var(--batt)} .kalk .k-bad{background:var(--warn)}
.kalk .k-override{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--sunken)}
.kalk .k-override .k-chk{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink)}
.kalk .k-override .k-chk input{width:auto}
.kalk .k-chart{overflow-x:auto}
.kalk .k-chart svg{display:block;width:100%;min-width:560px;height:auto}
.kalk .k-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.kalk .k-legend i{display:inline-block;width:12px;height:4px;vertical-align:middle;margin-right:5px;border-radius:2px}
.kalk .k-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kalk .k-compare div{border-radius:8px;padding:12px;display:grid;gap:4px;background:var(--sunken)}
.kalk .k-compare .k-d{box-shadow:inset 0 3px 0 var(--sun)} .kalk .k-compare .k-m{box-shadow:inset 0 3px 0 var(--night)}
.kalk .k-compare b{font:700 16px var(--f-display);color:#fff}
.kalk .k-compare p{margin:0;font-size:13px;color:var(--muted)}
@media (max-width:480px){.kalk .k-compare,.kalk .k-typecmp,.kalk .k-big,.kalk .k-override{grid-template-columns:1fr}.kalk .k-big div+div{border-left:0;border-top:1px solid var(--line)}}
.kalk .k-toast{font-size:13px;color:var(--batt);min-height:1em}
.kalk .k-note{font-size:12px;color:var(--muted);max-width:80ch;margin:0}

/* Penjelasan & formulir di bawah kalkulator */
.kalk-explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kalk-explain h3{font-size:1.02rem;margin-bottom:8px}
.kalk-explain p{color:var(--muted);font-size:.93rem}
@media (max-width:900px){.kalk-explain{grid-template-columns:1fr}}
.kalk-form-note{background:rgba(96,165,250,.08);border:1px solid #1e3a8a;border-radius:10px;padding:10px 12px;font-size:.86rem;color:#cbd5e1}

@media (prefers-reduced-motion:reduce){.kalk *{transition:none!important}}
/* baris perangkat: kolom input dipadatkan agar angka & jam tidak terpotong */
.kalk .k-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:900px){.kalk .k-grid{grid-template-columns:1fr}}
.kalk .k-dev-head,.kalk .k-dev{grid-template-columns:minmax(0,2fr) .75fr .55fr 1.05fr 1.05fr .65fr .65fr 1fr 22px;gap:5px}
.kalk .k-dev input{padding:6px 5px;font-size:13px}
.kalk .k-dev input[type=time]::-webkit-calendar-picker-indicator{margin:0;padding:0;width:11px;opacity:.6}
.kalk .k-dev input[type=number]{-moz-appearance:textfield}
.kalk .k-dev input[type=number]::-webkit-inner-spin-button,.kalk .k-dev input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:720px){.kalk .k-dev{grid-template-columns:1fr 1fr 1fr}.kalk .k-dev input{font-size:14px;padding:7px 8px}}