/* Template Call Center & Contact Center: papan monitor gelap — biru malam #0E1630 berkisi titik, panel #17234B, hijau limau #C6F432,
   koral #FF6B57; ubin KPI berangka besar, lampu status berkedip, grafik SL per agen, kursi agen. */
:root{--latar:#0E1630;--latar-2:#121C3D;--permukaan:#17234B;--teks:#EEF2FF;--teks-2:#B9C2E0;--teks-3:#7F8AB0;--garis:#26335F;
  --utama:#C6F432;--utama-tua:#A6D216;--utama-muda:#1E2C55;--pada-utama:#0E1630;--aksen:#C6F432;--aksen-tua:#A6D216;--pada-aksen:#0E1630;
  --gelap:#0A1024;--pada-gelap:#8D97BC;--radius:14px;--radius-kecil:10px;--bayang:0 26px 50px -30px rgba(0,0,0,.8);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--koral:#FF6B57}
body{background:radial-gradient(rgba(198,244,50,.06) 1px,transparent 1.3px) 0 0/20px 20px,var(--latar);color:var(--teks)}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;color:var(--teks)}
.serif{font-family:inherit;font-style:normal;color:var(--aksen)}
.kepala{background:rgba(14,22,48,.94)!important;border-bottom:1px solid var(--garis)!important}
.kepala .merek,.menu a,.kepala a,.kepala .logo{color:var(--teks)}
.menu a[aria-current],.menu a:hover{background:rgba(198,244,50,.12);color:var(--aksen)}
.kepala .btn-wa,.btn-wa,.btn-utama{background:var(--aksen);color:var(--latar)}
.bag-alt{background:var(--latar-2)}
.kaki{background:var(--gelap)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctc-alis{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--aksen)}
.ctc-alis i{width:9px;height:9px;border-radius:50%;background:var(--aksen);box-shadow:0 0 10px var(--aksen);animation:ctcKedip 1.6s ease-in-out infinite}
@keyframes ctcKedip{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ctc-alis i{animation:none}}
.ctc-lead{font-size:17.5px;color:var(--teks-2)}
.ctc-btn{background:var(--aksen);color:var(--latar);font-weight:800;border-radius:10px}
.ctc-btn:hover{background:#fff;color:var(--latar)}
.ctc-link{font-weight:800;color:var(--teks);border-bottom:2px solid var(--aksen)}
.ctc-blok{width:100%;justify-content:center}

.ctc-hero-isi{display:grid;gap:48px;align-items:center;padding-top:60px;padding-bottom:96px}
@media(min-width:940px){.ctc-hero-isi{grid-template-columns:1.05fr .95fr}}
.ctc-teks{min-width:0}
.ctc-hero h1{font-size:clamp(40px,5.8vw,76px);line-height:1.02;margin:0 0 20px}
.ctc-tombol{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.ctc-foto{position:relative;margin:0 0 30px}
.ctc-foto img{display:block;width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:20px;box-shadow:var(--bayang)}
.ctc-papan{position:absolute;left:-18px;bottom:-30px;display:grid;grid-template-columns:repeat(3,auto);gap:4px;padding:10px;border-radius:14px;background:rgba(14,22,48,.94);border:1px solid var(--garis);box-shadow:var(--bayang);backdrop-filter:blur(8px)}
.ctc-papan span{display:grid;gap:2px;padding:8px 12px;border-radius:8px;background:var(--permukaan)}
.ctc-papan small{font-size:10.5px;color:var(--teks-3)}
.ctc-papan b{font-family:var(--mono);font-size:24px;line-height:1}
.ctc-papan .ok b{color:var(--aksen)}
.ctc-papan em{grid-column:1/-1;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--teks-3);text-align:right}

.ctc-kepala{margin-bottom:30px}
.ctc-kepala h2,.ctc-agen h2,.ctc-t-teks h2{font-size:clamp(30px,4.2vw,48px);margin:0 0 14px}
.ctc-kisi{display:grid;gap:20px}
@media(min-width:640px){.ctc-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ctc-kisi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ctc-kartu{display:flex;flex-direction:column;min-width:0;background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang)}
.ctc-k-foto{position:relative;display:block}
.ctc-k-foto img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.92}
.ctc-kpi{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:8px;background:rgba(14,22,48,.86);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--aksen)}
.ctc-k-isi{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px}
.ctc-k-sub{margin:0 0 4px!important;font-family:var(--mono);font-size:12px;color:var(--teks-3)!important}
.ctc-k-isi h3{margin:0 0 8px;font-size:20px}
.ctc-k-isi h3 a{color:inherit}
.ctc-k-isi>p{margin:0 0 12px;color:var(--teks-2);font-size:15px}
.ctc-harga{margin-top:auto!important;font-size:13.5px;color:var(--teks-3)!important}
.ctc-harga b{font-family:var(--mono);font-size:18px;color:var(--teks)}

.ctc-agen{margin-top:58px;padding:30px clamp(18px,3vw,32px);border-radius:22px;background:var(--permukaan);border:1px solid var(--garis);box-shadow:var(--bayang)}
.ctc-a-atas{margin-bottom:18px}
.ctc-a-isi{display:grid;gap:28px}
@media(min-width:1040px){.ctc-a-isi{grid-template-columns:.9fr 1.2fr .9fr}}
.ctc-form,.ctc-wall,.ctc-ring{min-width:0}
.ctc-form label{display:grid;gap:6px;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--teks-2)}
.ctc-form input[type=number]{width:100%;min-width:0;padding:10px;border:1px solid var(--garis);border-radius:8px;background:var(--latar);font:inherit;font-family:var(--mono);font-weight:700;color:var(--teks)}
.ctc-sat{display:flex;align-items:center;gap:12px}
.ctc-sat input{flex:1;min-width:0;accent-color:#C6F432}
.ctc-sat output{min-width:52px;padding:4px 8px;border-radius:6px;background:var(--latar);font-family:var(--mono);font-weight:800;color:var(--aksen);text-align:center}
.ctc-dua{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctc-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ctc-kpis div{padding:12px 14px;border-radius:10px;background:var(--latar);border:1px solid var(--garis);min-width:0}
.ctc-kpis small{display:block;font-size:11.5px;color:var(--teks-3)}
.ctc-kpis b{font-family:var(--mono);font-size:30px;line-height:1.1}
.ctc-kpis .ok b{color:var(--aksen)}
.ctc-kpis .aw b{color:var(--koral)}
.ctc-g-judul{margin:16px 0 8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teks-3)}
.ctc-grafik{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:130px;align-items:end;padding:0 4px;border-bottom:1px solid var(--garis)}
.ctc-grafik div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.ctc-grafik span{width:100%;max-width:36px;border-radius:4px 4px 0 0;background:#3A4C86;transition:height .3s}
.ctc-grafik div.on span{background:var(--aksen)}
.ctc-grafik div.kurang span{background:#6B3A45}
.ctc-grafik b{order:-1;margin-bottom:3px;font-family:var(--mono);font-size:10.5px;color:var(--teks-2)}
.ctc-grafik small{position:relative;top:18px;margin-top:-14px;font-family:var(--mono);font-size:10.5px;color:var(--teks-3)}
.ctc-grafik i{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--koral)}
.ctc-grafik+.ctc-g-judul{margin-top:28px}
.ctc-kursi{display:flex;flex-wrap:wrap;gap:5px}
.ctc-kursi i{width:16px;height:16px;border-radius:4px 4px 7px 7px;background:#2E3D6E}
.ctc-kursi i.b{background:var(--aksen);box-shadow:0 0 6px rgba(198,244,50,.5)}
.ctc-kursi em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--teks-3)}
.ctc-rinci{margin:0 0 14px;display:grid}
.ctc-rinci div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--garis);font-size:14px}
.ctc-rinci dt{color:var(--teks-2)}.ctc-rinci dd{margin:0;font-family:var(--mono);font-weight:700;text-align:right}
.ctc-rinci .ctc-tot{border-bottom:0;font-size:15.5px}
.ctc-rinci .ctc-tot dd{color:var(--aksen)}
.ctc-catat{margin:12px 0 0;font-size:12.5px;color:var(--teks-3)}

.ctc-t{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.ctc-t{grid-template-columns:.95fr 1.05fr}}
.ctc-t-teks{min-width:0}
.ctc-t-foto{margin:0}
.ctc-t-foto img{display:block;width:100%;aspect-ratio:5/4.2;object-fit:cover;border-radius:22px;box-shadow:var(--bayang)}
.ctc-ubin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0}
.ctc-ubin div{position:relative;padding:16px 16px 14px;border-radius:12px;background:var(--permukaan);border:1px solid var(--garis);overflow:hidden;min-width:0;color:var(--aksen)}
.ctc-ubin dt{font-family:var(--mono);font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--teks)}
.ctc-ubin dd{margin:2px 0 0;font-size:13px;color:var(--teks-2)}
.ctc-ubin svg{position:absolute;right:12px;top:16px;width:64px;height:18px;opacity:.8}
@media(max-width:560px){.ctc-papan{left:-4px;grid-template-columns:repeat(3,minmax(0,1fr))}.ctc-papan b{font-size:19px}.ctc-kpis b{font-size:24px}}