/* =========================================================
   TRADER MAGER — UNIFIED BRAND THEME v3.4.6
   Satu bahasa visual untuk seluruh situs: putih, biru kabut,
   navy, border lembut, radius modern, dan bayangan halus.
   File ini sengaja dimuat SETELAH style.css agar tidak mengubah
   struktur/layout komponen inti.
   ========================================================= */

:root{
  --ink:#0a1f3d;
  --ink-2:#1d3557;
  --kuning:#dceaff;
  --kuning-tua:#1f7cff;
  --kuning-lembut:#eef4fd;
  --biru:#1f7cff;
  --biru-tua:#155fd6;
  --biru-gelap:#0a1f3d;
  --biru-lembut:#eaf3ff;
  --biru-tipis:#f7faff;
  --navy:#0a1f3d;
  --biru-terang:#1f7cff;
  --biru-terang-tua:#155fd6;
  --biru-kabut:#eaf3ff;
  --awan:#f4f7fc;
  --kertas:#f4f7fc;
  --garis:#dce4f0;
  --garis-tebal:#bfcfe7;
  --garis-lembut:#dce4f0;
  --tubuh:#40596c;
  --tubuh-lembut:#5b6b7d;
  --redup:#74879a;
  --bayang:0 12px 30px -24px rgba(10,31,61,.42);
  --bayang-kuat:0 24px 48px -28px rgba(10,31,61,.45);
  --bayang-keras:0 18px 38px -28px rgba(10,31,61,.55);
}

body{background:#fff;color:var(--tubuh)}
h1,h2,h3,h4,strong{color:var(--navy)}
a{color:var(--biru-terang-tua)}
.section-lembut{background:#f4f7fc}

/* ----- Permukaan umum ----- */
.kartu,
.tabel-bungkus,
.kosong,
.catatan,
.alur-item,
.panel-beli,
.jarak,
.grafik-kartu,
.kalender-bingkai,
.rapor-angka div,
.sp-item,
.produk-baris,
.unduh-samping .kartu{
  border-color:#d4dfef;
  box-shadow:0 10px 28px -26px rgba(10,31,61,.5);
}
.kartu{border-width:1px;border-radius:16px}
.tabel-bungkus{border-width:1px;border-radius:16px}
table.tabel th{background:#f4f7fc;color:var(--navy)}
table.tabel th,table.tabel td{border-bottom-color:#e3e9f3}

/* Halaman judul publik mengikuti napas visual hero. */
.kepala-halaman{
  border-bottom:1px solid #dce6f4;
  background:linear-gradient(180deg,#f0f6ff 0%,#f8fbff 100%);
}
.kepala-halaman h1{color:var(--navy)}
.kepala-halaman .pengantar{color:var(--tubuh-lembut)}
.remah,.remah a{color:#7a8da1}

/* ----- Tombol, field, chip ----- */
.btn-gelap{--btn-bg:var(--navy);--btn-br:var(--navy)}
.btn-kuning{--btn-bg:var(--biru-terang);--btn-fg:#fff;--btn-br:var(--biru-terang)}
.btn-kuning:hover{--btn-bg:var(--biru-terang-tua);--btn-br:var(--biru-terang-tua)}
.field input:focus,.field select:focus,.field textarea:focus,
.kotak-cari input:focus,.cari-admin input:focus{
  border-color:var(--biru-terang);
  box-shadow:0 0 0 4px rgba(31,124,255,.12);
}
.field-cek input{accent-color:var(--biru-terang)}
.chip{border:1px solid #cdd9ea;color:#40596c;border-radius:999px}
.chip:hover{border-color:#8fb1e4;color:var(--navy)}
.chip.aktif{background:var(--navy);border-color:var(--navy);color:#fff}

/* Badge kuning lama dinormalisasi menjadi badge brand biru. */
.badge-kuning{background:#eaf3ff;color:#155fd6;border-color:#bfd2ef}
.badge-biru{background:#eaf3ff;color:#155fd6;border-color:#cfdef5}
.badge-abu{background:#f2f5fa;color:#607589;border-color:#dce4f0}

/* Daftar cek dan catatan tidak lagi terlihat kuning/retro. */
.daftar-cek li::before{
  background:#dceaff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6bc4' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.catatan{border-width:1px;border-left:4px solid #8fb1e4;background:#f8fbff}
.catatan-kuning{border-color:#cfdef5;border-left-color:var(--biru-terang);background:#eef4fd}
.catatan-hijau{border-color:#bfe6d1;border-left-color:var(--hijau);background:#f0faf5}
.catatan-merah{border-color:#f4caca;border-left-color:var(--merah);background:#fff5f5}

/* Accordion / tab */
.akordeon{border-top:1px solid #bfcfe7}
.akordeon details{border-bottom-color:#dce6f4}
.akordeon summary{color:var(--navy)}
.akordeon summary::after{border:1px solid #bcd2f2;color:var(--biru-terang-tua)}
.akordeon summary:hover::after,.akordeon details[open] summary::after{background:#eaf3ff}
.tab-bar{border-bottom:1px solid #c9d5e8}
.tab-bar button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--biru-terang)}

/* CTA publik */
.cta-kotak{
  background:linear-gradient(135deg,#e9f2ff 0%,#dceaff 100%);
  color:var(--navy);border:1px solid #bcd2f2;border-radius:20px;
  box-shadow:0 16px 38px -30px rgba(10,31,61,.65);
}
.cta-kotak h2{color:var(--navy)}
.cta-kotak p{color:var(--tubuh-lembut)}

/* ----- Produk / katalog ----- */
.kartu-produk,
.info-kartu,
.info-utama{
  border:1px solid #cfdaeb;
  box-shadow:0 12px 34px -28px rgba(10,31,61,.55);
}
.kartu-produk:hover,.info-kartu:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px -24px rgba(10,31,61,.5);
  border-color:#a9c3e9;
}
.info-utama{box-shadow:0 18px 44px -32px rgba(10,31,61,.5)}
.kp-media,.ik-gambar,.iu-gambar{border-color:#dce6f4;background:#eef3fb}
.sampul-jenis,.kategori{background:#dceaff;color:var(--navy)}
.produk-baris{border-width:1px;border-radius:16px}
.produk-baris:hover{border-color:#9fbbe5;box-shadow:0 14px 34px -28px rgba(10,31,61,.55)}
.tautan-lihat{color:var(--biru-terang-tua)}

/* ----- Market Analysis / Insight ----- */
.tangga li.tg-kini,.panel-rinci li.lv-kini{background:#eaf3ff}
.sp-item{border-width:1px}
.sp-item:hover{border-color:#8fb1e4}
.sp-item.aktif{background:var(--navy);border-color:var(--navy)}
.sp-item.aktif .sp-arah{color:#7cc4ff}
.grafik-kartu,.kalender-bingkai{border-width:1px}
.rapor-publik{border-top-color:#bfcfe7}
.rapor-angka div{border-width:1px}
.kolom-pair a.tf-mini:hover{background:#eaf3ff;color:var(--navy)}

/* ----- Login / Register ----- */
.auth{
  border:1px solid #cbd8eb;
  box-shadow:0 24px 60px -40px rgba(10,31,61,.55);
}
.auth-sisi{
  background:linear-gradient(145deg,#0a1f3d 0%,#0f5f9e 100%);
  background-image:radial-gradient(rgba(255,255,255,.09) 1.1px,transparent 1.2px),linear-gradient(145deg,#0a1f3d 0%,#0f5f9e 100%);
  background-size:20px 20px,auto;
}
.auth-merek{background:#dceaff;color:var(--navy)}
.auth-daftar li{border-top-color:rgba(255,255,255,.14)}
.auth-daftar li::before{background:#7cc4ff}
.auth-kartu h1{color:var(--navy)}

/* ----- Client Area ----- */
.pita-admin{background:#eaf3ff;color:var(--navy);border-bottom:1px solid #cfdef5}
.pita-admin a{color:var(--biru-terang-tua)}
.klien-kecil{background:#eaf3ff;color:var(--biru-terang-tua)}
.klien-tab{border-bottom:1px solid #bfcfe7}
.klien-tab a{border-width:1px}
.klien-tab a.aktif{color:var(--navy);border-color:#bfcfe7;box-shadow:inset 0 3px 0 var(--biru-terang)}
.klien-angka{border:1px solid #cfdaeb;box-shadow:0 12px 34px -30px rgba(10,31,61,.45)}
.klien-angka div{border-right:1px solid #dce6f4}
.klien-tool,.klien-unduh{border:1px solid #cfdaeb;box-shadow:0 12px 34px -30px rgba(10,31,61,.45)}
.klien-sambut{background:#eef4fd;border:1px solid #c7d8f2}
.klien-bantuan{background:linear-gradient(135deg,#0a1f3d,#0f5f9e)}
.klien-bantuan .btn-utama{--btn-bg:#fff;--btn-fg:var(--navy);--btn-br:#fff}
.file-ikon{background:var(--navy);color:#7cc4ff}
.unduh-lisensi{background:#eef4fd;border:1px solid #bfd2ef}

/* ----- Admin panel ----- */
.app{background:#f4f7fc}
.app-side{background:#050d1c;border-right:1px solid rgba(255,255,255,.07)}
.app-side .wordmark{color:#fff}
.app-side .wordmark span:last-child{color:#7cc4ff}
.app-nav-judul{color:#879dbf}
.app-nav a{color:#c8d4e7}
.app-nav a:hover{background:rgba(143,200,255,.10);color:#fff}
.app-nav a.aktif{background:#eaf3ff;color:#0a1f3d;box-shadow:none}
.app-side-kaki{border-top-color:rgba(255,255,255,.12);color:#a9b9d2}
.app-topbar{border-bottom:1px solid #dce4f0;box-shadow:0 8px 24px -24px rgba(10,31,61,.55)}
.app-topbar h1{color:var(--navy)}
.app-isi{background:#f4f7fc}
.side-toggle{border-color:#bfcfe7}
.side-toggle span{background:var(--navy)}
.stat,.baris-lisensi{border:1px solid #d4dfef;box-shadow:0 12px 30px -28px rgba(10,31,61,.55)}
.stat strong{color:var(--navy)}
.kunci{background:#f4f7fc;border:1px dashed #aec2df;color:var(--navy)}
.kunci-besar{background:#fff;border-color:#9db7dd}
.tombol-salin{border:1px solid #9fbae2;color:var(--biru-terang-tua);background:#fff}
.tombol-salin:hover{background:#eaf3ff}
.link-salin{border:1px solid #c9d5e8;background:#f8fbff;color:#1d3557}
.saklar-tombol{color:var(--navy)}
.saklar-tombol[aria-pressed="true"] .saklar{background:var(--biru-terang)}
.saklar-tombol[aria-pressed="true"] .saklar::after{background:#fff}
.menu-titik summary{border:1px solid #bfcfe7;color:var(--navy)}
.menu-titik[open] summary{border-color:#8fb1e4;background:#eaf3ff}
.menu-titik>div{border:1px solid #cbd8eb;box-shadow:0 18px 38px -24px rgba(10,31,61,.45)}
.tab-cepat{border-bottom:1px solid #bfcfe7}
.tab-cepat a{border-width:1px}
.tab-cepat a.aktif{color:var(--navy);border-color:#bfcfe7;box-shadow:inset 0 3px 0 var(--biru-terang)}
.form-kaki{background:linear-gradient(transparent,#f4f7fc 30%)}
.cari-admin input{border:1px solid #bfcfe7}
.pilih-dua label{border:1px solid #cbd8eb}
.pilih-dua label:has(input:checked){border-color:#8fb1e4;background:#eef4fd}
.pilih-dua input{accent-color:var(--biru-terang)}
.tugas{border-color:#dce4f0;border-left-color:var(--biru-terang)}
.thumb-admin{border-color:#cbd8eb}
.nav-bawah{border-top:1px solid #dce4f0}
.nav-bawah a.aktif{color:var(--navy);background:#eaf3ff}

/* ----- Footer selalu memakai identitas brand ----- */
.footer{background:#050d1c;color:#c8d4e7}
.footer-atas,.footer-bawah{border-color:rgba(255,255,255,.13)}
.footer-tautan h3{color:#7cc4ff}
.footer-tautan a,.footer-sosial a{color:#c8d4e7}
.footer-risiko{color:#9fb1cd}
.footer-risiko a{color:#7cc4ff}
.footer .btn-kuning{--btn-bg:#fff;--btn-fg:var(--navy);--btn-br:#fff}
.footer .btn-kuning:hover{--btn-bg:#eaf3ff;--btn-br:#eaf3ff}

/* =========================================================
   BERANDA — penyelarasan komponen khusus halaman depan
   ========================================================= */
.beranda .section-lembut{background:#f4f7fc}
.beranda main>.section:not(.hero):not(.section-lembut){background:#fff}
.beranda main>.section h2,
.beranda main>.section h3{color:var(--navy)}
.beranda main>.section .pengantar{color:var(--tubuh-lembut)}
.beranda .alasan-kartu{border:1px solid #dce6f4;box-shadow:0 10px 28px -24px rgba(10,31,61,.45)}
.beranda .linimasa::before{border-top-color:#bcd2f2}
.beranda .linimasa li::before{background:#fff;border-color:var(--biru-terang);box-shadow:0 0 0 5px #eaf3ff}
.beranda .linimasa li:nth-child(2)::before,
.beranda .linimasa li:nth-child(3)::before,
.beranda .linimasa li:last-child::before{background:var(--biru-terang);border-color:var(--biru-terang)}
.beranda .linimasa time{background:var(--biru-kabut);color:var(--biru-terang-tua)}
.beranda .linimasa p{color:var(--tubuh-lembut)}
.beranda .kartu-produk{border:1px solid #cfdaeb;border-radius:18px;box-shadow:0 12px 34px -28px rgba(10,31,61,.55)}
.beranda .kartu-produk:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(10,31,61,.5);border-color:#a9c3e9}
.beranda .kp-media{border-bottom:1px solid #dce6f4;background:#eef3fb}
.beranda .kp-bawah{border-top:1px solid #dce6f4}
.beranda .kp-isi>p{color:var(--tubuh-lembut)}
.beranda .kp-video{background:var(--biru-kabut);color:var(--navy);border:1px solid #bcd2f2}
.beranda .kp-video::before{border-left-color:var(--biru-terang)}
.beranda .produk-tag .badge-kuning,
.beranda .produk-tag .badge-hijau,
.beranda .produk-tag .badge-biru{background:var(--biru-kabut);color:var(--biru-terang-tua);border-color:#cfdef5}
.beranda .mode{border:1px solid #cfdaeb;border-radius:14px;box-shadow:none}
.beranda .mode:hover{border-color:#8fb1e4;background:#fbfdff}
.beranda .mode strong{color:var(--navy)}
.beranda .mode[aria-pressed="true"]{border-color:var(--biru-terang);background:#f8fbff;box-shadow:0 0 0 3px rgba(31,124,255,.10),0 12px 28px -24px rgba(10,31,61,.6);transform:none}
.beranda .mode[aria-pressed="true"] .saklar{background:var(--biru-terang)}
.beranda .mode[aria-pressed="true"] .saklar::after{background:#fff}
.beranda .mode-jelas{background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.1px),linear-gradient(145deg,#0a1f3d 0%,#0f5f9e 100%);background-size:20px 20px,auto;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 45px -32px rgba(10,31,61,.75)}
.beranda .mode-kecil{background:#dceaff;color:var(--biru-gelap)}
.beranda .mode-jelas h3{color:#fff}
.beranda .mode-jelas p{color:rgba(255,255,255,.82)}
.beranda .banding{border:1px solid #cfdaeb;border-radius:18px;box-shadow:0 12px 34px -30px rgba(10,31,61,.5)}
.beranda .banding-sebelum{background:#f7f9fc;border-right:1px solid #dce6f4}
.beranda .banding-kotak li{border-bottom-color:#dce6f4}
.beranda .banding-sesudah{background:#fff}
.beranda .banding-sesudah h3::after{background:var(--biru-kabut);color:var(--biru-terang-tua)}
.beranda .kutipan{border:1px solid #cfdaeb;border-radius:16px;box-shadow:0 10px 30px -28px rgba(10,31,61,.5)}
.beranda .kutipan-grid .kutipan:nth-child(2){background:#eef4fd}
.beranda .kutipan blockquote{color:#1d3557}
.beranda .kutipan figcaption strong{color:var(--navy)}
.beranda .kutipan-inisial{background:var(--navy);color:#fff}

@media (max-width:1000px){
  .app-side{box-shadow:0 0 44px rgba(10,31,61,.22)}
}
@media (max-width:900px){
  .beranda .banding-sebelum{border-right:0;border-bottom:1px solid #dce6f4}
}

/* =========================================================
   PLATFORM EXPANSION v3.5.0 — Client Area, Finder, Compare,
   Release management, Watchlist, dan Analytics
   ========================================================= */

/* Client Area V2 */
.klien-angka{grid-template-columns:repeat(4,1fr)}
.client-section-block{margin-top:34px}
.klien-tool{border-color:#d4dfef;box-shadow:0 10px 28px -26px rgba(10,31,61,.5)}
.klien-tool-atas>div{min-width:0}
.klien-license-progress{margin:16px 0 14px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:.82rem;color:var(--tubuh-lembut)}
.klien-license-progress strong{font-size:.84rem}
.klien-license-progress>div{grid-column:1/-1;height:6px;border-radius:99px;background:#e6ecf6;overflow:hidden}
.klien-license-progress i{display:block;height:100%;border-radius:inherit;background:var(--biru-terang)}
.release-note{min-height:38px;margin:0 0 14px}
.lisensi-v2{display:block;padding:0;overflow:hidden;border:1px solid #d4dfef;border-radius:18px;background:#fff;margin-bottom:20px}
.lisensi-v2-utama{padding:24px}
.lisensi-form-klien{margin-top:18px;padding-top:18px;border-top:1px solid #e2e9f3}
.lisensi-form-kaki{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:8px}
.lisensi-form-kaki p{margin:0}
.klien-market-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}
.klien-market-head h2{margin:0 0 6px}
.watch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.watch-card{display:block;padding:18px;border:1px solid #d4dfef;border-radius:16px;background:#fff;box-shadow:0 10px 28px -26px rgba(10,31,61,.5);color:inherit;text-decoration:none;transition:.18s ease}
.watch-card:hover{transform:translateY(-2px);border-color:#a9c3e9;box-shadow:0 18px 36px -28px rgba(10,31,61,.55)}
.watch-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.watch-top strong{font-size:1.03rem}
.watch-price{font-family:"Bricolage Grotesque",sans-serif;font-size:1.6rem;font-weight:800;color:var(--navy);margin:12px 0 4px}
.watch-meta{display:flex;justify-content:space-between;gap:12px;color:var(--redup);font-size:.78rem}
.watch-card p{margin:12px 0 0;color:var(--tubuh-lembut);font-size:.86rem;line-height:1.5}
.watch-setting{margin-top:22px}.watch-checks{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 20px}
.watch-checks label{cursor:pointer}.watch-checks input{position:absolute;opacity:0;pointer-events:none}
.watch-checks span{display:block;border:1px solid #cbd8eb;border-radius:999px;padding:8px 12px;font-weight:700;font-size:.82rem;color:var(--tubuh)}
.watch-checks input:checked+span{background:var(--biru-kabut);border-color:#8fb1e4;color:var(--navy)}
.activity-list{border:1px solid #d4dfef;border-radius:16px;background:#fff;overflow:hidden}
.activity-list>div{display:flex;gap:12px;padding:15px 18px;border-bottom:1px solid #e5ebf4}.activity-list>div:last-child{border-bottom:0}
.activity-dot{width:9px;height:9px;border-radius:50%;background:var(--biru-terang);margin-top:7px;flex:0 0 auto}
.activity-list p{margin:0;display:grid;grid-template-columns:auto 1fr auto;gap:7px 10px;width:100%;align-items:center}.activity-list p small{color:var(--redup)}

/* Release / downloads */
.release-card{border:1px solid #d4dfef;border-radius:18px;padding:24px;background:#fff;box-shadow:0 10px 28px -26px rgba(10,31,61,.5)}
.release-head{align-items:flex-start}.release-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.release-info{margin:14px 0 18px;padding:15px 16px;border-radius:12px;background:#f4f7fc;border:1px solid #dce4f0}
.release-info p{margin:0 0 8px}.release-info p:last-child{margin-bottom:0}.release-info details{margin-top:8px}.release-info summary{cursor:pointer;font-weight:700;color:var(--navy)}
.release-changelog{margin-top:10px;line-height:1.7;color:var(--tubuh)}
.release-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #e3e9f3}

/* Tool Finder */
.finder-layout{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:34px;align-items:start}.finder-form{position:sticky;top:100px}
.finder-empty{min-height:360px;border:1px dashed #bfcfe7;border-radius:20px;background:#f8fbff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:44px}.finder-empty h2{font-size:clamp(1.65rem,3vw,2.5rem);max-width:620px;margin:14px 0}.finder-empty p{max-width:650px}
.finder-results{display:grid;gap:14px}.finder-result{display:grid;grid-template-columns:36px 108px 1fr auto;gap:16px;align-items:center;padding:16px;border:1px solid #d4dfef;border-radius:17px;background:#fff;box-shadow:0 10px 28px -26px rgba(10,31,61,.5)}
.finder-rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--biru-kabut);color:var(--navy);font-weight:800}.finder-result .produk-thumb{width:108px}.finder-copy h3{margin:2px 0 5px}.finder-copy p{margin:0}.finder-action{display:grid;gap:12px;justify-items:end;min-width:145px}.finder-action>strong{font-size:1rem}

/* Comparison */
.compare-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;margin-bottom:28px;padding:18px;border:1px solid #d4dfef;border-radius:16px;background:#f8fbff}.compare-picker .field{margin:0}
.compare-table-wrap{overflow:auto;border:1px solid #d4dfef;border-radius:18px;background:#fff}.compare-table{width:100%;border-collapse:collapse;min-width:820px}.compare-table th,.compare-table td{padding:18px;border-right:1px solid #e3e9f3;border-bottom:1px solid #e3e9f3;vertical-align:top;text-align:left}.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}.compare-table th:last-child,.compare-table td:last-child{border-right:0}.compare-table thead th{background:#f4f7fc}.compare-table thead th:not(:first-child){min-width:230px}.compare-table thead strong{display:block;font-size:1.08rem;margin:4px 0}.compare-table thead small{color:var(--biru-terang-tua);font-weight:700}.compare-list{margin:0;padding-left:18px;display:grid;gap:8px}

/* Analytics */
.analytics-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.analytics-head p{margin:0}.analytics-grid{margin-top:26px}.analytics-grid>.kartu{overflow:hidden}.analytics-trend{margin-top:22px}.mini-bars{height:210px;display:flex;gap:5px;align-items:flex-end;padding:20px 4px 0;border-top:1px solid #e3e9f3}.mini-bars>div{height:100%;flex:1;min-width:6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:7px}.mini-bars i{display:block;min-height:4px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#1f7cff,#6f9fe8)}.mini-bars span{font-size:.65rem;color:var(--redup);text-align:center;white-space:nowrap;overflow:hidden}

@media(max-width:1000px){
 .klien-angka{grid-template-columns:repeat(2,1fr)}.watch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finder-layout{grid-template-columns:1fr}.finder-form{position:static}.compare-picker{grid-template-columns:repeat(2,1fr)}.finder-result{grid-template-columns:34px 90px 1fr}.finder-result .produk-thumb{width:90px}.finder-action{grid-column:3;justify-items:start;display:flex;align-items:center;flex-wrap:wrap}
}
@media(max-width:680px){
 .klien-angka,.watch-grid{grid-template-columns:1fr}.klien-market-head,.lisensi-form-kaki,.analytics-head{align-items:stretch;flex-direction:column}.activity-list p{grid-template-columns:1fr}.activity-list p small{grid-column:1}.finder-result{grid-template-columns:32px 1fr}.finder-result .produk-thumb{display:none}.finder-copy{grid-column:2}.finder-action{grid-column:2}.compare-picker{grid-template-columns:1fr}.mini-bars span{display:none}
}

/* Checkout & order workflow */
.panel-release{margin:14px 0;padding:12px 13px;border:1px solid #dce4f0;border-radius:11px;background:#f4f7fc}.panel-release strong{display:block;font-size:.82rem}.panel-release p{margin:4px 0 0;font-size:.82rem;line-height:1.45}.panel-release small{display:block;margin-top:6px;color:var(--redup)}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:28px;align-items:start}.checkout-product h2{font-size:1.7rem;margin:12px 0 6px}.checkout-price{margin-top:20px;padding-top:16px;border-top:1px solid #e3e9f3;display:flex;justify-content:space-between;align-items:end}.checkout-price span{color:var(--redup)}.checkout-price strong{font-size:1.5rem}.checkout-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}.checkout-steps li{position:relative;padding:0 0 18px 34px;border-left:1px solid #bfcfe7;margin-left:10px}.checkout-steps li:last-child{border-left-color:transparent;padding-bottom:0}.checkout-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:-12px;top:0;width:23px;height:23px;border-radius:50%;background:var(--biru-kabut);border:1px solid #8fb1e4;color:var(--navy);display:grid;place-items:center;font-size:.72rem;font-weight:800}.checkout-steps strong,.checkout-steps span{display:block}.checkout-steps span{color:var(--redup);font-size:.84rem;margin-top:2px}.payment-box{padding:14px 15px;border-radius:12px;background:#eef4fd;border:1px solid #bfd2ee;display:grid;gap:3px;margin:10px 0}.payment-box span{font-size:.78rem;color:var(--redup);font-weight:700}.payment-box strong{font-size:1.18rem;letter-spacing:.03em}.payment-box small{color:var(--tubuh-lembut)}
.order-list-client{display:grid;gap:18px}.client-order{border:1px solid #d4dfef;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 10px 28px -26px rgba(10,31,61,.5)}.client-order.fokus{box-shadow:0 0 0 3px rgba(31,124,255,.1),0 16px 34px -26px rgba(10,31,61,.5);border-color:#9bbae8}.client-order-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 22px;background:#f8fbff;border-bottom:1px solid #e3e9f3}.client-order-head h3{margin:3px 0 0}.client-order-head>div:last-child{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.client-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px}.client-payment-grid h4{margin:0 0 10px}.proof-form{display:grid;gap:10px}.proof-form input[type=file]{width:100%;border:1px solid #cbd8eb;border-radius:10px;padding:9px;background:#fff}.proof-status{margin-bottom:12px}.proof-status p{margin:7px 0 0}.client-order-actions{padding:14px 22px;border-top:1px solid #e3e9f3;display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.client-order-actions>span{margin-right:auto;color:var(--tubuh-lembut)}
@media(max-width:850px){.checkout-grid,.client-payment-grid{grid-template-columns:1fr}.client-order-head{align-items:flex-start;flex-direction:column}.client-order-head>div:last-child{justify-content:flex-start}.client-order-actions{justify-content:flex-start}.client-order-actions>span{width:100%}}

/* In-app notifications */
.alert-toggle{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;margin:0 0 18px;border:1px solid #d4dfef;border-radius:12px;background:#f8fbff;cursor:pointer}.alert-toggle input{margin-top:4px;accent-color:var(--biru-terang)}.alert-toggle span,.alert-toggle strong,.alert-toggle small{display:block}.alert-toggle small{margin-top:3px;color:var(--redup);font-weight:400;line-height:1.45}.notif-head{align-items:center}.notif-list{display:grid;gap:12px}.notif-item{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:start;padding:18px;border:1px solid #d4dfef;border-radius:15px;background:#fff}.notif-item.unread{background:#f8fbff;border-color:#a9c3e9}.notif-icon{width:36px;height:36px;border-radius:10px;background:var(--biru-kabut);color:var(--navy);display:grid;place-items:center;font-weight:800}.notif-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.notif-item p{margin:5px 0;color:var(--tubuh)}.notif-item small{color:var(--redup)}.notif-actions{display:flex;gap:8px;align-items:center}.notif-actions form{margin:0}
@media(max-width:680px){.notif-item{grid-template-columns:36px 1fr}.notif-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}}

/* =========================================================
   v3.5.3 — PASSWORD VISIBILITY + BERANDA CONTRAST FIX
   ========================================================= */

/* Tombol mata pada seluruh kolom kata sandi (publik, client, admin). */
.password-wrap{position:relative;width:100%}
.password-wrap>input{padding-right:50px!important}
.password-toggle{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;padding:0;border:0;border-radius:9px;
  display:grid;place-items:center;background:transparent;color:#5f7690;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.password-toggle:hover{background:#eaf3ff;color:var(--navy)}
.password-toggle:focus-visible{outline:2px solid var(--biru-terang);outline-offset:1px}
.password-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.password-toggle .pw-eye-off{display:none}
.password-toggle[aria-pressed="true"] .pw-eye{display:none}
.password-toggle[aria-pressed="true"] .pw-eye-off{display:block}

/*
   Kontras beranda dibuat eksplisit. Sebelumnya selector global untuk judul
   bisa menang terhadap teks yang berada di panel gelap, sementara beberapa
   teks sekunder terlalu pucat di permukaan putih/biru muda.
*/
.beranda .hero h1{color:#0a1f3d}
.beranda .hero-sub{color:#155fd6}
.beranda .hero .pengantar{color:#40596c}
.beranda .hero-angka strong{color:#0a1f3d}
.beranda .hero-angka small{color:#5f7388}

.beranda main>.section:not(.hero) .tumpuk-judul h2,
.beranda main>.section:not(.hero) .judul-bagian h2,
.beranda .alasan-kartu h3,
.beranda .linimasa h3,
.beranda .kp-isi h3,
.beranda .banding-kotak h3,
.beranda .faq-beranda summary{color:#0a1f3d}

.beranda main>.section:not(.hero) .pengantar,
.beranda .alasan-kartu p,
.beranda .linimasa p,
.beranda .kp-isi>p,
.beranda .mode small,
.beranda .banding-kotak li,
.beranda .kutipan blockquote,
.beranda .faq-beranda .isi p,
.beranda .cta-kotak p{color:#40596c}

/* Panel Assisted/Manual/Auto memang gelap: teks harus tetap terang. */
.beranda main>.section .mode-jelas h3,
.beranda .mode-jelas h3{color:#fff!important}
.beranda main>.section .mode-jelas>p:not(.mode-kecil),
.beranda .mode-jelas>p:not(.mode-kecil){color:rgba(255,255,255,.86)!important}
.beranda .mode-jelas .mode-kecil{color:#0a1f3d!important;background:#dceaff}

/* Teks harga/link pada kartu tetap tegas di atas putih. */
.beranda .produk-harga{color:#0a1f3d}
.beranda .tautan-lihat{color:#155fd6}
.beranda .mode strong{color:#0a1f3d}


/* v3.5.4 — Email OTP registration */
.otp-input{
  text-align:center;
  font-size:1.45rem;
  font-weight:750;
  letter-spacing:.35em;
  font-variant-numeric:tabular-nums;
}
.otp-aksi{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:.92rem;
}
.otp-aksi form{margin:0}
.otp-aksi .btn{padding:6px 0}

/* Pastikan tombol putih di footer tidak mewarisi warna link putih. */
.footer a.btn-kuning,
.footer a.btn-putih{
  color:var(--navy)!important;
}
.footer a.btn-kuning:hover,
.footer a.btn-putih:hover{
  color:var(--navy)!important;
}

/* v3.5.9 — paket lisensi */
.baris-field.empat{grid-template-columns:repeat(4,minmax(0,1fr))}
.license-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.license-plan{display:block;border:1px solid #cbd8eb;border-radius:14px;padding:14px;background:#fff;cursor:pointer}
.license-plan:hover{border-color:#8fb1e4;background:#f8fbff}
.license-plan input{margin-right:8px;accent-color:var(--biru-terang)}
.license-plan strong{display:block;margin-top:6px;color:var(--navy)}
.license-expiry{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:10px 0 16px;padding:12px 14px;background:#f8fbff;border:1px solid #d4dfef;border-radius:12px}
@media(max-width:900px){.baris-field.empat{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.baris-field.empat{grid-template-columns:1fr}}

/* v3.6.1 — pricing sewa bulanan */
.license-plan strong{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.license-plan strong del{font-size:.76rem;font-weight:500;color:#8293a5;text-decoration-thickness:1px}
.license-plan span small{display:block;margin-top:3px;font-size:.72rem;color:#0b7b50}
.panel-harga del{font-size:.9rem;color:#8293a5;margin-right:6px}


/* ----- Marketplace layout (v3.6.5) ----- */
.market-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:14px;
}
.market-filter-wrap{flex:1 1 420px}
.market-search-wrap{flex:1 1 320px;max-width:420px}
.market-search-wrap input{background:#fff}
.market-summary{margin:0 0 18px;color:var(--tubuh-lembut)}
.market-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
}
.market-grid-home{grid-template-columns:repeat(3,minmax(0,1fr))}
.market-card{
  display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:#fff;
  border:1px solid #d7e1f0;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 36px -30px rgba(10,31,61,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.market-card:hover{
  text-decoration:none;transform:translateY(-4px);border-color:#a7c1e8;
  box-shadow:0 20px 42px -28px rgba(10,31,61,.5);
}
.market-media{position:relative;aspect-ratio:1/1;background:#edf3fb;overflow:hidden;border-bottom:1px solid #dce6f4}
.market-media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.market-badges-top{position:absolute;inset:10px 10px auto 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.market-pill{
  display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;line-height:1;border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);background:rgba(8,47,88,.84);color:#fff;
}
.market-pill-blue{background:rgba(31,124,255,.9)}
.market-pill-ok{background:rgba(24,153,79,.9)}
.market-pill-soft{background:rgba(255,210,63,.96);color:#273d4d;border-color:rgba(255,210,63,.9)}
.market-pill-em{background:rgba(8,47,88,.9)}
.market-pill-video{background:rgba(255,255,255,.92);color:var(--navy);border-color:rgba(255,255,255,.92)}
.market-body{display:flex;flex-direction:column;gap:11px;padding:16px 16px 15px;flex:1;min-width:0}
.market-meta{display:flex;gap:8px;flex-wrap:wrap;color:#58708a;font-size:.78rem;font-weight:700}
.market-meta span{display:inline-flex;align-items:center;gap:6px;padding:0}
.market-meta span:not(:last-child)::after{content:'•';color:#9aabc4;margin-left:8px}
.market-body h3{
  margin:0;font-size:1.1rem;line-height:1.22;color:var(--navy);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;
}
.market-body p{
  margin:0;color:var(--tubuh-lembut);font-size:.92rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3em;
}
.market-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.market-tags span{
  display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;
  background:#f1f5fb;color:#58708a;border:1px solid #dbe4f2;font-size:.73rem;font-weight:700;
}
.market-foot{
  margin-top:auto;padding-top:12px;border-top:1px solid #e2eaf5;
  display:grid;gap:10px;
}
.market-price-wrap{display:grid;gap:3px;min-width:0}
.market-price{font-family:var(--huruf-judul);font-size:1.24rem;line-height:1.1;color:var(--navy);letter-spacing:-.02em}
.market-price-wrap small{font-size:.78rem;color:#6e8499;font-weight:600;line-height:1.35}
.market-link{font-size:.86rem;font-weight:800;color:var(--biru-terang-tua);display:inline-flex;align-items:center;gap:6px}
.market-link::after{content:'→';font-size:1em}

@media (max-width:1280px){
  .market-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
  .market-grid,.market-grid-home{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .market-head{align-items:stretch}
  .market-search-wrap{max-width:none}
}
@media (max-width:720px){
  .market-grid,.market-grid-home{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .market-body{padding:14px}
  .market-body h3{font-size:1rem;min-height:2.45em}
  .market-body p{font-size:.88rem}
  .market-price{font-size:1.08rem}
}
@media (max-width:520px){
  .market-grid,.market-grid-home{grid-template-columns:1fr}
}


/* v3.6.6 — fix empty space on auto cover inside marketplace card */
.market-media > .sampul{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  min-height:100%;
  border-radius:0;
}
.market-media > .sampul .sampul-grafik{width:100%;height:100%}
.market-media > .sampul .sampul-teks{
  left:18px;
  right:34%;
  top:18px;
  bottom:18px;
  gap:8px;
}
.market-media > .sampul .sampul-jenis{
  font-size:.72rem;
  padding:4px 8px;
  border-radius:8px;
}
.market-media > .sampul .sampul-nama{
  font-size:clamp(1.05rem, 3vw, 2rem);
  line-height:1.02;
}
.market-media > .sampul .sampul-platform{
  font-size:.72rem;
}
@media (max-width:720px){
  .market-media > .sampul .sampul-teks{left:14px;right:36%;top:14px;bottom:14px}
  .market-media > .sampul .sampul-jenis{font-size:.66rem}
  .market-media > .sampul .sampul-platform{font-size:.67rem}
}

/* v3.6.7 — homepage featured products use same card style as product catalog */
.beranda .market-grid-home .market-card .market-media{aspect-ratio:1/1}


/* v3.6.8 — thumbnail produk di tabel admin */
.tabel-admin .thumb-admin{
  width:96px;
  height:96px;
  aspect-ratio:1/1;
  border:1px solid #cbd8eb;
  border-radius:12px;
  overflow:hidden;
  background:#eef3fb;
  flex:none;
}
.tabel-admin .thumb-admin > img,
.tabel-admin .thumb-admin > .sampul{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
}
.tabel-admin .thumb-admin > .sampul .sampul-teks{
  left:8px;
  right:28%;
  top:8px;
  bottom:8px;
  gap:3px;
}
.tabel-admin .thumb-admin > .sampul .sampul-jenis{
  font-size:8px;
  padding:2px 4px;
  border-radius:4px;
}
.tabel-admin .thumb-admin > .sampul .sampul-nama{
  font-size:13px;
  line-height:1;
}
.tabel-admin .thumb-admin > .sampul .sampul-platform{
  font-size:7px;
}
.tabel-admin tbody tr{
  height:auto;
}
.tabel-admin tbody td{
  padding-top:12px;
  padding-bottom:12px;
}


/* ----- uploads & client profile photo (v3.6.9) ----- */
.klien-akun{display:flex;align-items:center;gap:12px}
.klien-akun-teks{display:grid;justify-items:end;gap:2px}
.klien-avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#dceaff,#eff5ff);border:2px solid #bcd2f2;
  color:var(--navy);font-family:var(--huruf-judul);font-weight:800;text-decoration:none;
}
.klien-avatar:hover{text-decoration:none;border-color:var(--biru-terang)}
.klien-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.klien-avatar>span{font-size:.92rem}
.klien-foto-profil-card{
  display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:20px;
}
.klien-foto-profil-preview{
  width:120px;height:120px;border-radius:24px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(145deg,#dceaff,#f5f9ff);border:1px solid #cbd8eb;
  color:var(--navy);font-family:var(--huruf-judul);font-weight:800;
}
.klien-foto-profil-preview img{width:100%;height:100%;object-fit:cover;display:block}
.klien-foto-profil-preview>span{font-size:2rem}
.klien-foto-profil-copy h3{margin-bottom:6px}
.klien-foto-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.klien-foto-form input[type=file]{
  max-width:360px;padding:9px;border:1px solid #cbd8eb;border-radius:10px;background:#fff;font:inherit;font-size:.88rem;
}
@media(max-width:720px){
  .klien-foto-profil-card{grid-template-columns:1fr;justify-items:start}
  .klien-akun-teks{display:none}
}


/* ----- EA Web Control (v3.7.0) ----- */
.control-empty{padding:clamp(24px,4vw,44px)}
.control-empty h2{margin-bottom:8px}.control-empty p{max-width:760px;margin-bottom:18px;color:var(--tubuh-lembut)}
.control-topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;padding:20px 22px}
.control-topbar h2{margin:5px 0 2px}.control-target-select select{min-width:260px;background:#fff}
.control-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:900;letter-spacing:.08em;padding:5px 9px;border-radius:999px}
.control-live::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px currentColor;opacity:.9}
.control-live.online{color:#118549;background:#e8f8ef}.control-live.offline{color:#9b5f00;background:#fff2d7}
.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.control-card{padding:20px;min-width:0}.control-card-main{grid-column:1/-1;background:linear-gradient(135deg,#f7faff 0%,#fff 55%,#f5f9ff 100%)}
.control-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.control-card-head span{display:block;font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#5c7692;margin-bottom:4px}
.control-card-head h3{margin:0;font-size:1.15rem}.control-card-head small{color:#7890a7;text-align:right}
.control-action-row{display:flex;gap:10px;flex-wrap:wrap}.control-action-row form{margin:0}.control-action-row .btn{min-width:120px}
.control-action-small .btn{min-width:auto}
.control-danger{background:#fff0f0;border:1px solid #f0a5a5;color:#b42323}.control-danger:hover{background:#ffe4e4;color:#981b1b;text-decoration:none}
.control-inline-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.control-inline-form label,.control-mini-form label{display:grid;gap:6px;font-size:.78rem;font-weight:800;color:#5f7890}
.control-inline-form input,.control-inline-form select,.control-mini-form input{min-width:120px;background:#fff}
.control-risk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.control-mini-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;padding:10px;border:1px solid #dce5f3;border-radius:12px;background:#fbfdff}
.control-mini-form input{width:100%;min-width:0}
.control-history{padding:20px;margin-bottom:20px}
.control-command-list{display:grid;gap:10px}.control-command-item{border:1px solid #dce5f3;border-radius:12px;padding:12px 14px;background:#fbfdff}
.control-command-item>div{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.control-command-item code{font-weight:800;color:var(--navy)}
.control-command-item small{color:#7890a7}.control-command-item pre{white-space:pre-wrap;word-break:break-word;margin:10px 0 0;padding:12px;border-radius:10px;background:#0f1b25;color:#e8f0fb;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:260px;overflow:auto}
@media(max-width:820px){.control-grid{grid-template-columns:1fr}.control-card-main{grid-column:auto}.control-topbar{align-items:stretch;flex-direction:column}.control-target-select select{width:100%;min-width:0}.control-risk-grid{grid-template-columns:1fr}}
@media(max-width:520px){.control-action-row{display:grid;grid-template-columns:1fr}.control-action-row .btn{width:100%}.control-inline-form{display:grid;grid-template-columns:1fr}.control-inline-form input,.control-inline-form select{width:100%}.control-mini-form{grid-template-columns:1fr}.control-mini-form .btn{width:100%}}

/* v3.7.1 — live EA control status */
.control-latency-note{margin:-4px 0 18px;padding:11px 14px;border:1px solid #cfdef5;border-radius:12px;background:#f8fbff;color:#526b84;font-size:.82rem;line-height:1.5}
.control-live{transition:background .18s ease,color .18s ease,border-color .18s ease}


/* =========================================================
   v3.7.2 — EA CONTROL REDESIGN
   Desktop: compact professional control desk.
   Mobile: one-column layout + fixed quick action dock.
   ========================================================= */
.control-shell{display:grid;gap:16px}
.control-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  gap:28px;align-items:center;padding:24px 28px;margin-bottom:0;
  background:
    radial-gradient(700px 190px at 100% 0%,rgba(31,124,255,.08),transparent 62%),
    linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid #cfdcef;box-shadow:0 18px 42px -36px rgba(8,47,88,.55);
}
.control-hero-left h2{font-size:clamp(1.75rem,3vw,2.55rem);letter-spacing:-.04em;margin:10px 0 4px;color:var(--navy)}
.control-hero-left p{margin:0;color:#70879e;font-weight:650}
.control-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.control-live-mode{font-size:.72rem;font-weight:800;color:#55718d;background:#eef3fb;border:1px solid #d6e1f2;border-radius:999px;padding:5px 9px}
.control-hero-right{display:grid;gap:7px}
.control-hero-right>label{font-size:.76rem;font-weight:850;color:#5b7690;letter-spacing:.03em}
.control-hero-right small{color:#7890a7}
.control-target-select{margin:0}
.control-target-select select{
  width:100%;min-width:0;height:44px;border:1px solid #bfcfe7;border-radius:11px;
  background:#fff;padding:0 12px;font-weight:700;color:var(--navy);box-shadow:0 5px 16px -14px rgba(8,47,88,.6)
}
.control-connection-note{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:14px 16px;
  border:1px solid #c8d8f1;border-left:4px solid var(--biru-terang);border-radius:13px;background:#eef4fd;color:#406078;
}
.control-connection-note.is-hidden{display:none}
.control-note-icon{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#dceaff;color:var(--biru-terang-tua);font-weight:900
}
.control-connection-note strong{display:block;color:var(--navy);margin-bottom:3px}
.control-connection-note p{margin:0;font-size:.88rem;line-height:1.55}

.control-grid-modern{gap:14px;margin:0}
.control-card{
  padding:20px;border:1px solid #cfdbed;border-radius:16px;
  box-shadow:0 14px 34px -31px rgba(8,47,88,.55);background:#fff
}
.control-card-main{grid-column:1/-1;padding:0;overflow:hidden;background:#fff}
.control-main-split{display:grid;grid-template-columns:1.05fr .95fr}
.control-main-block{padding:20px 22px}
.control-main-block+.control-main-block{border-left:1px solid #dbe5f3}
.control-card-head{margin-bottom:14px}
.control-title-wrap{display:flex;gap:11px;align-items:flex-start}
.control-icon{
  width:36px;height:36px;flex:none;border-radius:10px;display:grid!important;place-items:center;
  margin:0!important;background:#eaf2fd;color:#1f7cff!important;font-size:1.05rem!important;
  letter-spacing:0!important;font-weight:900!important
}
.control-title-wrap>div>span{margin-bottom:2px}
.control-title-wrap h3{font-size:1.08rem;color:var(--navy)}
.control-title-wrap p{margin:3px 0 0;color:#7890a7;font-size:.78rem;line-height:1.45;font-weight:500}
.control-card-head small{font-size:.76rem}

.control-primary-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.control-primary-actions form,.control-utility-actions form,.control-choice-row form,.control-off-actions form,.control-mobile-dock form{margin:0}
.control-primary-actions .btn,.control-utility-actions .btn{
  width:100%;min-height:46px;border-radius:12px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px
}
.control-start{background:#147dce;color:#fff;border:1px solid #147dce}
.control-start:hover{background:#0f6db4;color:#fff;text-decoration:none}
.control-pause{background:#fff;color:#0f6db4;border:1px solid #9fbeed}
.control-pause:hover{background:#f2f6fd;text-decoration:none}
.control-danger{background:#fff3f3;border:1px solid #ef9d9d;color:#bd2525}
.control-danger:hover{background:#ffe9e9;color:#a81d1d}
.control-utility-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.control-utility-actions .btn{min-width:0;background:#fff}

.control-choice-row{display:flex;gap:8px;flex-wrap:wrap}
.control-choice{min-height:40px;border-radius:11px!important;padding-inline:16px!important;font-weight:800!important}
/* v3.7.8: penanda setting yang sedang dipakai */
.control-choice.is-active{background:#1f7cff!important;border-color:#1f7cff!important;color:#fff!important;box-shadow:0 4px 14px rgba(15,95,214,.25)}
.control-form-grid.is-current{padding:10px 10px 10px 13px;border:1px solid #7cc4ff;border-radius:12px;background:#f3f8ff;box-shadow:inset 3px 0 0 #1f7cff}
.control-mini-form.is-current{border-color:#7cc4ff!important;background:#f3f8ff!important;box-shadow:inset 3px 0 0 #1f7cff}
.control-now{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e3eeff;color:#1f7cff;font-size:.64rem;font-weight:800;letter-spacing:.04em;vertical-align:middle}
.control-now-off{background:#eef1f5;color:#6b8090}
.control-mini-form input::placeholder{color:#9aabbd;font-weight:700}
.control-form-grid{display:grid;gap:10px;align-items:end;margin:0 0 12px}
.control-form-grid label,.control-command-form label{
  display:grid;gap:6px;font-size:.75rem;font-weight:800;color:#607b95
}
.control-form-grid input,.control-form-grid select,.control-command-form input{
  width:100%;min-width:0;height:40px;border:1px solid #bfcfe7;border-radius:9px;background:#fff;padding:0 10px;color:#1d374a
}
.control-form-lot{grid-template-columns:1fr 1fr auto}
.control-form-fixed{grid-template-columns:minmax(120px,1fr) auto;max-width:420px}
.control-form-distance{grid-template-columns:minmax(150px,240px) auto;max-width:430px}
.control-form-timeframe{grid-template-columns:minmax(120px,180px) auto;margin:0}
.control-form-action{min-height:40px;border-radius:10px!important;white-space:nowrap}
.control-soft-note{
  display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;margin-top:8px;
  padding:10px 12px;border-radius:11px;background:#f3f7fd;color:#617b94;font-size:.78rem
}
.control-soft-note>span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#dceaff;color:#1f7cff;font-weight:900
}
.control-soft-note p{margin:0;line-height:1.45}
.control-soft-note .btn{white-space:nowrap}

.control-risk-grid{gap:8px;margin-bottom:12px}
.control-mini-form{
  grid-template-columns:minmax(0,1fr) 66px;gap:8px;padding:9px 10px;border-radius:11px;background:#fbfdff;border:1px solid #d9e3f2
}
.control-mini-form .btn{height:38px;border-radius:9px;padding:0 10px}
.control-off-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:3px}
.control-off-actions .btn{
  width:100%;min-height:36px;display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid #d6e0f0;border-radius:10px;color:#0f66a9;background:#fff;text-decoration:none
}
.control-filter-row{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:18px;align-items:end}
.control-command-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.control-command-form .btn{height:40px;border-radius:10px}
.control-command-help{margin:10px 0 0;line-height:1.6}

.control-history{padding:20px;border:1px solid #cfdbed;border-radius:16px;box-shadow:0 14px 34px -31px rgba(8,47,88,.55);margin:0 0 20px}
.control-command-item{border-color:#d8e2f0;background:#fbfdff}
.control-command-item code{color:#0b568f}

.control-mobile-dock{display:none}

/* Keep EA Control at the easiest-to-reach front of the client tabs. */
.klien-tab a[href="/client/control.php"]{font-weight:850}

@media(max-width:980px){
  .control-hero{grid-template-columns:1fr;gap:16px;padding:20px}
  .control-main-split{grid-template-columns:1fr}
  .control-main-block+.control-main-block{border-left:0;border-top:1px solid #dbe5f3}
  .control-grid-modern{grid-template-columns:1fr}
  .control-card-main{grid-column:auto}
  .control-filter-row{grid-template-columns:1fr}
}
@media(max-width:720px){
  .control-shell{gap:12px}
  .control-hero{padding:16px;border-radius:14px}
  .control-hero-left h2{font-size:1.6rem}
  .control-card{padding:16px;border-radius:14px}
  .control-main-block{padding:16px}
  .control-primary-actions,.control-utility-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .control-primary-actions .btn,.control-utility-actions .btn{min-height:44px;padding:0 8px;font-size:.82rem}
  .control-primary-actions .btn span,.control-utility-actions .btn span{font-size:.85rem}
  .control-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .control-choice-row form:last-child:nth-child(odd){grid-column:1/-1}
  .control-choice{width:100%;padding-inline:8px!important}
  .control-form-lot{grid-template-columns:1fr 1fr}
  .control-form-lot .control-form-action{grid-column:1/-1}
  .control-form-fixed,.control-form-distance,.control-form-timeframe{grid-template-columns:1fr auto;max-width:none}
  .control-risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control-mini-form{grid-template-columns:1fr}
  .control-mini-form .btn{width:100%}
  .control-soft-note{grid-template-columns:24px 1fr}
  .control-soft-note form{grid-column:1/-1}
  .control-soft-note .btn{width:100%}
  .control-command-form{grid-template-columns:1fr auto}
  .control-mobile-dock{
    position:fixed;left:10px;right:10px;bottom:10px;z-index:80;display:grid;
    grid-template-columns:1fr 1fr 1.05fr;gap:7px;padding:8px;
    border:1px solid #bdcfe9;border-radius:16px;background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);box-shadow:0 14px 42px rgba(8,47,88,.2)
  }
  .control-mobile-dock button{
    width:100%;height:48px;border-radius:11px;border:0;font:inherit;font-size:.76rem;font-weight:850;
    display:flex;align-items:center;justify-content:center;gap:5px
  }
  .control-dock-start{background:#147dce;color:#fff}
  .control-dock-pause{background:#eef4fd;color:#0f6db4;border:1px solid #bfd3f1!important}
  .control-dock-close{background:#fff0f0;color:#b42323;border:1px solid #efaaaa!important}
  .ea-control-page .klien-isi{padding-bottom:88px}
  .ea-control-page .wa-apung{bottom:82px}
}
@media(max-width:460px){
  .control-status-row{gap:7px}
  .control-live-mode{display:none}
  .control-hero-right small{font-size:.72rem}
  .control-primary-actions,.control-utility-actions{grid-template-columns:1fr 1fr 1fr}
  .control-primary-actions .btn,.control-utility-actions .btn{font-size:.74rem;padding:0 5px;gap:4px}
  .control-title-wrap{gap:9px}
  .control-icon{width:33px;height:33px}
  .control-title-wrap h3{font-size:1rem}
  .control-choice-row{grid-template-columns:1fr 1fr}
  .control-form-lot{grid-template-columns:1fr}
  .control-form-lot .control-form-action{grid-column:auto}
  .control-form-fixed,.control-form-distance,.control-form-timeframe,.control-command-form{grid-template-columns:1fr}
  .control-form-action,.control-command-form .btn{width:100%}
  .control-risk-grid{grid-template-columns:1fr}
  .control-off-actions{grid-template-columns:1fr 1fr 1fr}
  .control-off-actions .btn{font-size:.72rem;padding:0 5px}
  .control-mobile-dock{left:7px;right:7px;bottom:7px}
  .control-mobile-dock button{height:46px;font-size:.72rem}
}


/* v3.7.3 — compact activity history */
.control-command-list.compact-list{display:grid;gap:10px}
.control-command-item.compact{
  padding:12px 14px;border:1px solid #d8e2f0;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f8fafe);
  box-shadow:none;
}
.control-command-item.compact .control-command-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.control-command-item.compact .control-command-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.control-command-item.compact code{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
  background:#eaf2fd;color:#0b568f;border:1px solid #d4e0f3;font-weight:800
}
.control-status-mini{
  display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;text-transform:capitalize;border:1px solid #d6e0f0;background:#f6f8fc;color:#58748e
}
.control-status-mini.success{background:#edf9f0;border-color:#cdeed7;color:#23784a}
.control-status-mini.pending{background:#fff8ea;border-color:#f2dfad;color:#936c06}
.control-status-mini.error,.control-status-mini.failed{background:#fff0f0;border-color:#efc7c7;color:#b42323}
.control-command-item.compact small{color:#7890a7;font-size:.78rem}
.control-command-preview{margin:8px 0 0;color:#47657c;line-height:1.55;font-size:.9rem}
.control-command-item.compact pre{display:none!important}
@media(max-width:720px){
  .control-command-item.compact{padding:11px 12px}
  .control-command-preview{font-size:.85rem}
}


/* v3.7.4 — decimal input compatibility on mobile */
.control-decimal-hint{
  margin:-2px 0 12px;
  color:#6c8399;
  font-size:.76rem;
  line-height:1.45;
}
.control-decimal-hint strong{color:var(--navy)}
.ea-control-page [data-decimal-input]{
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   EA CONTROL v3.7.9 — status langsung, satu tombol simpan
   Satu elemen tegas: panel status navy yang meniru dashboard EA di MT5.
   Sisanya tenang: permukaan putih, garis tipis, teks kalimat biasa.
   ========================================================= */
.ctl{--ctl-navy:#0a1f3d;--ctl-navy-2:#0e4a78;--ctl-line:#dce4f0;--ctl-soft:#f4f7fc;--ctl-blue:#1f7cff;
  --ctl-profit:#12805c;--ctl-loss:#c2413a;--ctl-warn:#a86a12;
  display:grid;gap:18px;font-variant-numeric:tabular-nums}
.ctl [hidden]{display:none!important}
.ctl h2,.ctl h3{margin:0}

/* bar akun */
.ctl-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.ctl-bar-akun{display:grid;gap:6px;min-width:min(100%,320px)}
.ctl-bar-akun label{font-size:.85rem;font-weight:600;color:var(--tubuh-lembut)}
.ctl-bar-akun select{height:44px;border-radius:10px;border:1px solid var(--ctl-line);background:#fff;padding:0 12px;font:inherit;color:var(--navy)}
.ctl-conn{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;color:var(--tubuh-lembut)}
.ctl-dot{width:9px;height:9px;border-radius:50%;background:#9aabbd;flex:none}
.ctl-conn.is-on .ctl-dot{background:#1fb37a;box-shadow:0 0 0 4px rgba(31,179,122,.16)}
.ctl-conn.is-on{color:var(--ctl-profit)}
.ctl-conn.is-off .ctl-dot{background:#d0892b}
.ctl-note{margin:0}

/* panel status */
.ctl-cockpit{background:var(--ctl-navy);color:#dbe6f6;border-radius:18px;padding:clamp(18px,3vw,28px);display:grid;gap:22px}
.ctl-cockpit h2{color:#fff;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.ctl-cockpit code{color:#fff;background:rgba(255,255,255,.1);padding:1px 6px;border-radius:5px}
.ctl-cockpit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ctl-cockpit-head p{margin:4px 0 0;color:#9fb6d8;font-size:.9rem}
.ctl-engine{flex:none;padding:7px 14px;border-radius:999px;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.1);color:#fff}
.ctl-engine[data-eng=running]{background:#1f9d6b}
.ctl-engine[data-eng=grace],.ctl-engine[data-eng=weekend]{background:#c98a1a;color:#1d1300}
.ctl-engine[data-eng=locked]{background:#d9484e}
.ctl-engine[data-eng=offline]{background:rgba(255,255,255,.08);color:#9fb6d8}
.ctl-cockpit-body{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:clamp(16px,3vw,34px);align-items:end}
.ctl-pl{display:grid;gap:4px}
.ctl-k,.ctl-stats dt{font-size:.82rem;color:#9fb6d8}
.ctl-pl strong{font-family:var(--huruf-judul);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;letter-spacing:-.03em;color:#fff}
.ctl-pl strong.is-profit{color:#5fe0a8}
.ctl-pl strong.is-loss{color:#ff8a84}
.ctl-sub{font-size:.82rem;color:#9fb6d8}
.ctl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.ctl-stats>div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06)}
.ctl-stats dd{margin:2px 0 0;font-family:var(--huruf-judul);font-size:1.15rem;font-weight:700;color:#fff}
.ctl-stats dd.ctl-sub{font-family:var(--huruf-teks);font-size:.8rem;font-weight:400;color:#9fb6d8}
.ctl-stats dd.is-warn{color:#ffc96b}.ctl-stats dd.is-loss{color:#ff8a84}
.ctl-eastatus{grid-column:1/-1;margin:0;font-size:.85rem;color:#9fb6d8}
.ctl-eastatus:empty{display:none}
.ctl-cockpit-empty{margin:0;color:#b9cbe6;max-width:70ch}
.ctl-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ctl-actions form{margin:0}
.ctl-btn{width:100%;min-height:50px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:filter .15s}
.ctl-btn:hover:not(:disabled){filter:brightness(1.08)}
.ctl-btn:disabled{opacity:.55;cursor:not-allowed}
.ctl-btn-start{background:#1f9d6b;color:#fff}
.ctl-btn-pause{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.ctl-btn-danger{background:transparent;color:#ffb0ab;border-color:rgba(255,138,132,.55)}
.ctl-btn:focus-visible,.ctl button:focus-visible,.ctl input:focus-visible,.ctl select:focus-visible,.ctl summary:focus-visible{outline:3px solid #8cbaff;outline-offset:2px}

/* grid utama */
.ctl-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:18px;align-items:start}
.ctl-settings{display:grid;gap:16px;margin:0}
.ctl-group{background:#fff;border:1px solid var(--ctl-line);border-radius:16px;padding:clamp(16px,2.6vw,24px);display:grid;gap:18px}
.ctl-group>h3,.ctl-advanced summary h3{font-size:1.15rem;color:var(--navy)}
.ctl-group-note{margin:-12px 0 0;font-size:.88rem;color:var(--tubuh-lembut)}
.ctl-advanced summary{list-style:none;cursor:pointer;display:grid;gap:3px}
.ctl-advanced summary::-webkit-details-marker{display:none}
.ctl-advanced summary h3{display:flex;align-items:center;gap:8px}
.ctl-advanced summary h3::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.ctl-advanced[open] summary h3::after{transform:rotate(-135deg);margin-top:4px}
.ctl-advanced summary span{font-size:.88rem;color:var(--tubuh-lembut)}
.ctl-advanced:not([open]){gap:0}


/* field */
.ctl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;align-items:end}
.ctl-field{display:grid;gap:7px;position:relative;align-content:start}
.ctl-label{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--navy);min-height:24px;flex-wrap:wrap}
.ctl-label label{font:inherit;color:inherit}
.ctl-field input[type=text],.ctl-field select,.ctl-manual input{height:44px;width:100%;border-radius:10px;border:1px solid #c9d5e7;background:#fff;padding:0 12px;font:inherit;font-size:1rem;color:var(--navy)}
.ctl-field input[type=text]:disabled{background:var(--ctl-soft)}
.ctl-field.is-dirty>input,.ctl-field.is-dirty .ctl-affix input,.ctl-field.is-dirty select{border-color:var(--ctl-blue);background:#f3f8ff}
.ctl-field.is-dirty>.ctl-label::after{content:"Diubah";font-size:.72rem;font-weight:600;color:var(--ctl-blue);background:#e3eeff;border-radius:999px;padding:1px 8px}
.ctl-field.is-invalid input{border-color:var(--ctl-loss)!important;background:#fff6f5!important}
.ctl-err{margin:0;font-size:.82rem;color:var(--ctl-loss)}
.ctl-err:empty{display:none}
.ctl-hint{margin:0;font-size:.85rem;color:var(--tubuh-lembut)}
.ctl-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctl-affix{display:flex;align-items:center;gap:8px;flex:1 1 150px;max-width:220px}
.ctl-affix span{font-size:.9rem;color:var(--tubuh-lembut)}

/* segmented */
.ctl-seg{display:inline-flex;flex-wrap:wrap;padding:3px;border-radius:12px;background:var(--ctl-soft);border:1px solid var(--ctl-line);gap:2px;width:fit-content;max-width:100%}
.ctl-seg-opt{position:relative;margin:0}
.ctl-seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ctl-seg-opt span{display:block;padding:9px 15px;border-radius:9px;font-size:.92rem;font-weight:600;color:var(--tubuh);white-space:nowrap}
.ctl-seg-opt input:checked+span{background:#fff;color:var(--navy);box-shadow:0 1px 0 var(--ctl-line),0 2px 8px -4px rgba(10,31,61,.35)}
.ctl-seg-opt input:focus-visible+span{outline:3px solid #8cbaff;outline-offset:1px}
.ctl-seg-opt input:disabled+span{opacity:.6}
.ctl-seg-sm .ctl-seg-opt span{padding:8px 16px}

/* tip */
.ctl-tip{display:inline-block;position:static}
.ctl-tip summary{list-style:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--ctl-blue);background:#e3eeff;cursor:pointer}
.ctl-tip summary::-webkit-details-marker{display:none}
.ctl-tip p{position:absolute;left:0;right:0;top:30px;z-index:5;margin:0;padding:10px 12px;box-shadow:0 12px 28px -16px rgba(10,31,61,.45);border-radius:10px;background:#fff;border:1px solid var(--ctl-line);font-size:.86rem;font-weight:400;line-height:1.5;color:var(--tubuh);max-width:60ch}

/* simpan */
.ctl-savebar{position:sticky;bottom:12px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 18px;border-radius:14px;background:#fff;border:1px solid var(--ctl-blue);box-shadow:0 18px 40px -22px rgba(10,31,61,.55)}
.ctl-savebar p{margin:0;font-weight:600;color:var(--navy);flex:1 1 220px}
.ctl-savebar div{display:flex;gap:8px;flex:none}
.ctl-field>input[type=text],.ctl-field>select{max-width:320px}

/* samping */
.ctl-side{display:grid;gap:16px;position:sticky;top:16px}
.ctl-panel{background:#fff;border:1px solid var(--ctl-line);border-radius:16px;padding:18px;display:grid;gap:12px}
.ctl-panel h3{font-size:1.05rem;color:var(--navy)}
.ctl-activity{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ctl-activity li{display:grid;gap:3px;padding:10px 0 10px 14px;border-left:3px solid var(--ctl-line)}
.ctl-activity li+li{border-top:1px solid #edf1f7}
.ctl-activity strong{font-size:.93rem;font-weight:600;color:var(--navy)}
.ctl-activity-meta{font-size:.8rem;color:var(--redup)}
.ctl-activity-sum{font-size:.82rem;color:var(--tubuh-lembut);overflow-wrap:anywhere}
.ctl-activity-empty{border-left:0!important;padding-left:0!important;font-size:.9rem;color:var(--tubuh-lembut)}
.ctl-badge{display:inline-block;padding:1px 8px;border-radius:999px;background:#eef1f6;color:#56687b;font-weight:600;font-size:.75rem;margin-right:4px}
.ctl-activity li.is-success{border-left-color:#1fb37a}.ctl-activity li.is-success .ctl-badge{background:#e2f6ec;color:var(--ctl-profit)}
.ctl-activity li.is-failed{border-left-color:var(--ctl-loss)}.ctl-activity li.is-failed .ctl-badge{background:#fdecea;color:var(--ctl-loss)}
.ctl-activity li.is-pending,.ctl-activity li.is-delivered{border-left-color:#e0a73c}.ctl-activity li.is-pending .ctl-badge,.ctl-activity li.is-delivered .ctl-badge{background:#fdf3e1;color:var(--ctl-warn)}
.ctl-tools{display:grid;gap:8px}
.ctl-tools form{margin:0}.ctl-tools .btn{width:100%;justify-content:center}
.ctl-btn-text-danger{--btn-fg:var(--ctl-loss)!important;--btn-br:#efc2be!important}
.ctl-manual summary{cursor:pointer;font-weight:600;color:var(--ctl-blue);font-size:.92rem}
.ctl-manual-form{display:grid;gap:6px;margin:10px 0 0}
.ctl-manual-form label{font-size:.85rem;font-weight:600;color:var(--navy)}
.ctl-manual-row{display:flex;gap:8px}

/* dialog & toast */
.ctl-dialog{border:0;border-radius:18px;padding:0;max-width:min(92vw,460px);box-shadow:0 30px 70px -30px rgba(10,31,61,.6)}
.ctl-dialog::backdrop{background:rgba(8,32,60,.45)}
.ctl-dialog form{padding:22px;display:grid;gap:12px;margin:0}
.ctl-dialog h3{font-size:1.2rem;color:var(--navy)}
.ctl-dialog p,.ctl-dialog li{margin:0 0 6px;color:var(--tubuh);line-height:1.5}
.ctl-dialog ul{margin:0;padding-left:18px}
.ctl-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.ctl-ok-danger{--btn-bg:var(--ctl-loss)!important;--btn-br:var(--ctl-loss)!important}
.ctl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;max-width:min(92vw,520px);padding:12px 18px;border-radius:12px;background:var(--ctl-navy);color:#fff;font-weight:600;box-shadow:0 18px 40px -20px rgba(8,32,60,.7)}
.ctl-toast.is-ok{background:#12805c}.ctl-toast.is-error{background:#b3362f}.ctl-toast.is-warn{background:#8a5a0f}
@media (prefers-reduced-motion:reduce){.ctl *{transition:none!important}}

/* dock HP */
.ctl-dock{display:none}
@media(max-width:980px){
  .ctl-grid{grid-template-columns:1fr}
  .ctl-side{position:static}
  .ctl-cockpit-body{grid-template-columns:1fr;align-items:start}
  .ctl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .ctl-actions{display:none}
  .ctl-cockpit-head{flex-direction:column}
  .ctl-seg{display:flex;width:100%}
  .ctl-seg-opt{flex:1}
  .ctl-seg-opt span{text-align:center;padding-inline:8px}
  .ctl-affix{max-width:none}
  .ctl-dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:80;display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding:8px;border-radius:16px;background:var(--ctl-navy,#0a1f3d);box-shadow:0 14px 42px rgba(8,47,88,.35)}
  .ctl-dock form{margin:0}
  .ctl-dock button{width:100%;height:48px;border-radius:11px;font:inherit;font-size:.88rem;font-weight:700;border:1px solid transparent}
  .ctl-dock .ctl-btn-start{background:#1f9d6b;color:#fff}
  .ctl-dock .ctl-btn-pause{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
  .ctl-dock .ctl-btn-danger{background:transparent;color:#ffb0ab;border-color:rgba(255,138,132,.55)}
  .ctl-savebar{bottom:80px}
  .ctl-savebar div{width:100%}.ctl-savebar .btn{flex:1}
  .ctl-toast{bottom:90px}
  .ea-control-page .klien-isi{padding-bottom:96px}
  .ea-control-page .wa-apung{display:none}
  .ctl-savebar{padding:10px 12px;gap:8px}
  .ctl-savebar p{font-size:.88rem;flex-basis:100%}
  .ctl-savebar .btn{min-height:44px;padding:0 10px;font-size:.92rem;white-space:nowrap}
  .ctl-dock button{white-space:nowrap;font-size:.82rem}
}

/* =========================================================
   LOGO BARU (v3.9.1) — ikon TM + wordmark Poppins
   ========================================================= */
.logo{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:inherit;min-width:0}
.logo:hover{text-decoration:none}
.logo-mark{width:auto;height:40px;flex:none;display:block}
.logo-teks{display:flex;flex-direction:column;line-height:1;min-width:0}
.logo-nama{font-family:"Poppins",var(--huruf-judul);font-weight:700;font-size:1.5rem;letter-spacing:-.035em;color:#0d2941;white-space:nowrap}
/* v4.04: teks "mager" memakai GRADASI YANG SAMA PERSIS dengan huruf M di ikon,
   yaitu tiga perhentian #127fce -> #199de8 -> #6bd9ff. Sebelumnya keduanya beda:
   ikon bergradasi, teksnya datar. Itu akibat penyamaan hue di v4.02 — perhentian
   kedua teks (#00a8ff) kebetulan jatuh ke nilai yang sama dengan perhentian
   pertama, jadi gradasinya runtuh jadi satu warna. */
.logo-nama span{color:#127fce;background:linear-gradient(100deg,#127fce 0%,#199de8 50%,#6bd9ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-slogan{font-family:"Poppins",var(--huruf-teks);font-weight:500;font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:#526e85;margin-top:5px;white-space:nowrap;opacity:.85}
.logo-gelap .logo-nama{color:#fff}
.logo-gelap .logo-nama span{background:linear-gradient(100deg,#127fce 0%,#199de8 50%,#6bd9ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-gelap .logo-slogan{color:#c8d6ea}
.merek .logo + .merek-ket{display:none}
.app-side .logo{margin:0 0 26px;padding-inline:8px}
.app-side .logo-mark{height:34px}
.app-side .logo-nama{font-size:1.25rem}
.app-side .logo-slogan{font-size:.45rem}
.footer-logo{margin-bottom:22px}
.footer-logo .logo-mark{height:46px}
.login-logo{margin-bottom:6px}
@media (max-width:640px){
  .merek .logo-mark{height:34px}
  .merek .logo-nama{font-size:1.22rem}
  .merek .logo-slogan{display:none}
}

/* =========================================================
   NOTIFIKASI LONCENG CLIENT AREA (v3.9.2)
   ========================================================= */
.notif-bel{position:relative;flex:none}
.notif-bel>summary{list-style:none;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--garis-lembut);background:#fff;color:var(--navy);cursor:pointer;transition:border-color .15s,background .15s}
.notif-bel>summary::-webkit-details-marker{display:none}
.notif-bel>summary:hover,.notif-bel[open]>summary{border-color:var(--biru-terang);background:var(--biru-kabut)}
.notif-bel>summary:focus-visible{outline:3px solid #8cbaff;outline-offset:2px}
.notif-bel-ikon{width:22px;height:22px}
.notif-bel-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font-size:.7rem;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px #fff}
.notif-bel-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:120;width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid var(--garis-lembut);border-radius:16px;box-shadow:0 24px 50px -24px rgba(10,31,61,.45);overflow:hidden;text-align:left}
.notif-bel-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #edf1f7}
.notif-bel-kepala strong{color:var(--navy);font-size:.98rem}
.notif-bel-kepala form{margin:0}
.notif-bel-kepala button{border:0;background:none;padding:0;font:inherit;font-size:.82rem;font-weight:600;color:var(--biru-terang);cursor:pointer}
.notif-bel-list{list-style:none;margin:0;padding:4px 0;max-height:min(420px,60vh);overflow-y:auto}
.notif-bel-list a{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;padding:10px 14px;color:var(--tubuh);text-decoration:none}
.notif-bel-list a:hover{background:var(--awan)}
.notif-bel-list a.is-baru{background:#f3f8ff}
.notif-bel-list a.is-baru:hover{background:#e9f2ff}
.notif-bel-jenis{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef1f6;color:#56687b}
.notif-bel-jenis svg{width:18px;height:18px}
.notif-jenis-produk,.notif-jenis-release{background:#e3eeff;color:#1f7cff}
.notif-jenis-market,.notif-jenis-info{background:#e2f6ec;color:#12805c}
.notif-jenis-signal{background:#fff4d6;color:#a86a12}
.notif-jenis-pesanan{background:#f1ecff;color:#6a4fc2}
.notif-bel-teks{display:grid;gap:2px;min-width:0}
.notif-bel-teks strong{font-size:.9rem;color:var(--navy);line-height:1.3}
.notif-bel-teks span{font-size:.82rem;line-height:1.35;color:var(--tubuh-lembut)}
.notif-bel-teks small{font-size:.74rem;color:var(--redup)}
.notif-bel-titik{width:9px;height:9px;border-radius:50%;background:#e5484d;margin-top:6px}
.notif-bel-kosong{margin:0;padding:18px 14px;font-size:.88rem;color:var(--tubuh-lembut)}
.notif-bel-semua{display:block;padding:11px 14px;border-top:1px solid #edf1f7;text-align:center;font-size:.88rem;font-weight:700;color:var(--biru-terang);text-decoration:none}
.notif-bel-semua:hover{background:var(--awan);text-decoration:none}
@media (max-width:640px){.notif-bel-panel{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:10px}}

/* =========================================================
   RINGKASAN PASAR DI BERANDA + TOMBOL WHATSAPP BARU (v3.11)
   ========================================================= */
.pasar-depan{--pd-naik:#12805c;--pd-turun:#c2413a;--pd-garis:#dce4f0;padding-block:clamp(34px,5vw,56px)}
.pasar-depan-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.pasar-depan-kepala h2{margin:0;font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--navy)}
.pasar-depan-kepala p{margin:4px 0 0}
.pasar-depan-isi{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr);gap:16px;align-items:stretch}
.pasar-depan-bias{padding:20px;border-radius:18px;background:#fff;border:1px solid var(--pd-garis);display:grid;gap:12px;align-content:start}
.pasar-depan-label{margin:0;font-weight:700;color:var(--navy)}
.pasar-depan-bar{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;background:#e6ecf5}
.pb-naik{background:var(--pd-naik)}.pb-turun{background:var(--pd-turun)}.pb-netral{background:#a9b6c4}
.pasar-depan-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;font-size:.86rem;color:var(--tubuh)}
.pasar-depan-legenda span{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pasar-depan-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:0}
.pasar-depan-angka>div{padding:10px 12px;border-radius:12px;background:#f4f7fc}
.pasar-depan-angka dt{font-size:.75rem;color:var(--tubuh-lembut);font-weight:600;line-height:1.25}
.pasar-depan-angka dd{margin:3px 0 0;font-family:var(--huruf-judul);font-size:1.25rem;font-weight:700;color:var(--navy)}
.pasar-depan-berita{margin:0;font-size:.86rem;color:var(--tubuh);padding:10px 12px;border-radius:12px;background:#fff7e6;border:1px solid #f3e0b5}
.pasar-depan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.pasar-depan-kartu{display:grid;gap:6px;align-content:start;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--pd-garis);text-decoration:none;transition:border-color .15s,transform .15s}
.pasar-depan-kartu:hover{border-color:var(--biru-terang);transform:translateY(-2px);text-decoration:none}
.pd-atas{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pd-atas strong{font-family:var(--huruf-judul);font-size:1.02rem;color:var(--navy)}
.pd-harga{font-family:var(--huruf-judul);font-size:1.35rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.1}
.pd-ubah{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.pd-ubah.naik{color:var(--pd-naik)}.pd-ubah.turun{color:var(--pd-turun)}
.pasar-depan-kaki{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.pasar-depan-kaki p{margin:0}
@media(max-width:860px){.pasar-depan-isi{grid-template-columns:1fr}}

/* tombol WhatsApp melayang, gaya baru */
.wa-apung{
  position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:0;
  padding:6px;border:0!important;border-radius:999px;background:linear-gradient(135deg,#25d366,#128c4a);
  color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(18,140,74,.6),0 2px 6px rgba(8,32,60,.18)!important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-apung:hover{background:linear-gradient(135deg,#2ee06f,#139b52);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(18,140,74,.7)!important}
.wa-apung:focus-visible{outline:3px solid #8cbaff;outline-offset:3px}
.wa-apung-ikon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16)}
.wa-apung-teks{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .25s ease,opacity .2s ease,padding .25s ease;padding:0}
.wa-apung:hover .wa-apung-teks,.wa-apung:focus-visible .wa-apung-teks{max-width:160px;opacity:1;padding:0 16px 0 10px}
@media(max-width:640px){
  .wa-apung{right:14px;bottom:14px;padding:5px}
  .wa-apung-ikon{width:46px;height:46px}
  .wa-apung-teks{display:none}
}
@media (prefers-reduced-motion:reduce){.wa-apung,.pasar-depan-kartu{transition:none}}
.pd-atas{flex-wrap:wrap;row-gap:4px}
.pasar-depan-kartu .bias{font-size:.72rem;padding:2px 8px;white-space:nowrap}
.pasar-depan-grid{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.unduh-platform{margin:18px 0 8px;font-size:.95rem;color:var(--navy);display:flex;align-items:center;gap:8px}
.unduh-platform::after{content:"";flex:1;height:1px;background:var(--garis-lembut)}

/* Panduan aktivasi ringkas di Client Area > Lisensi (v3.14.2) */
.aktivasi-ringkas{margin-bottom:24px;padding:20px 22px;border-radius:16px;background:#f4f7fc;border:1px solid #dce4f0}
.aktivasi-ringkas h2{margin:0 0 12px;font-size:1.1rem;color:var(--navy)}
.aktivasi-ringkas ol{counter-reset:langkah;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aktivasi-ringkas li{counter-increment:langkah;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.aktivasi-ringkas li::before{content:counter(langkah);width:26px;height:26px;border-radius:50%;background:var(--biru-terang,#1f7cff);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.aktivasi-ringkas li strong{display:block;color:var(--navy);font-size:.97rem}
.aktivasi-ringkas li span{display:block;font-size:.9rem;line-height:1.5;color:var(--tubuh)}
.aktivasi-ringkas code{background:#fff;border:1px solid #dce4f0;border-radius:6px;padding:1px 6px}
.aktivasi-ringkas p{margin:12px 0 0}
@media(max-width:640px){.aktivasi-ringkas{padding:16px}}
.aktivasi-ringkas li>strong,.aktivasi-ringkas li>span{grid-column:2}
.aktivasi-ringkas li::before{grid-row:1/span 2}

/* Peta langkah Client Area (v3.15) */
.klien-langkah{margin:0 0 22px;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid #dce4f0}
.klien-langkah h2{margin:0 0 12px;font-size:1.05rem;color:var(--navy)}
.klien-langkah ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:l}
.klien-langkah li{position:relative}
.klien-langkah li a{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid #e6ecf5;background:#f8fbff;text-decoration:none;height:100%}
.klien-langkah li a:hover{border-color:var(--biru-terang,#1f7cff);text-decoration:none}
.klien-langkah-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:#e6ecf5;color:#6b8090}
.klien-langkah-teks strong{display:block;font-size:.93rem;color:var(--navy);line-height:1.25}
.klien-langkah-teks small{display:block;font-size:.8rem;color:var(--tubuh-lembut);line-height:1.35;margin-top:2px}
.klien-langkah li.is-selesai a{background:#f0faf5;border-color:#bfe6d2}
.klien-langkah li.is-selesai .klien-langkah-no{background:#12805c;color:#fff}
.klien-langkah li.is-proses a{background:#fff8e8;border-color:#f0dcb0}
.klien-langkah li.is-proses .klien-langkah-no{background:#b7791f;color:#fff}
@media(max-width:900px){.klien-langkah ol{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.klien-langkah ol{grid-template-columns:1fr}.klien-langkah{padding:14px}}
.paket-lipat{margin:14px 0}
.paket-lipat>summary{cursor:pointer;font-weight:700;color:var(--biru-terang,#1f7cff);padding:8px 0}
.paket-lipat .price-compare-table{margin-top:8px}

/* Kotak persetujuan ketentuan di checkout (v3.23) */
.setuju-kotak{margin:18px 0;padding:16px 18px;border:1px solid #dce4f0;border-radius:14px;background:#f8fbff}
.setuju-kotak h3{margin:0 0 6px;font-size:1.02rem;color:var(--navy)}
.setuju-teks{max-height:230px;overflow-y:auto;margin:10px 0 12px;padding:12px 14px;background:#fff;border:1px solid #e6ecf5;border-radius:12px;font-size:.88rem;line-height:1.55;color:var(--tubuh)}
.setuju-teks p{margin:0 0 10px}
.setuju-teks p:last-child{margin-bottom:0}
.setuju-teks strong{color:var(--navy)}
.setuju-centang{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.9rem;line-height:1.5;color:var(--tubuh);cursor:pointer}
.setuju-centang input{width:20px;height:20px;margin-top:1px}

/* Daftar akun pantau di halaman produk (v3.25) */
.pantau-daftar{display:grid;gap:8px;margin-top:10px}
.pantau-item{border:1px solid #dce4f0;border-radius:12px;background:#fff}
.pantau-item>summary{cursor:pointer;padding:10px 14px;font-weight:700;color:var(--navy);font-size:.92rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pantau-item>summary::after{content:"Lihat data";font-size:.76rem;font-weight:600;color:var(--biru-terang,#1f7cff)}
.pantau-item[open]>summary::after{content:"Tutup"}
.pantau-item>summary small{font-weight:600;color:var(--tubuh-lembut)}
.pantau-item .panel-rinci{margin:0;padding:0 14px 12px}
.pantau-item p{padding:0 14px 12px}
.pantau-baris{border:1px solid var(--garis-lembut);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.pantau-baris>legend{padding:0 6px;font-size:.82rem;font-weight:700;color:var(--navy)}

/* =========================================================
   v4.01 — KARTU PRODUK MENGIKUTI REFERENSI
   Bentuk yang diminta: gambar di atas, judul, dua keterangan berikon, ringkasan,
   harga "mulai dari", dan panah bulat di pojok kanan bawah dengan sudut miring.
   Ditulis sesudah aturan .market-* yang lama supaya menimpa tanpa perlu
   membongkar blok lama — kalau nanti mau dikembalikan, cukup hapus blok ini.
   ========================================================= */
.market-card{
  border:1px solid #e3eaf5;border-radius:20px;overflow:hidden;position:relative;
  background:#fff;box-shadow:0 10px 30px -22px rgba(10,31,61,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.market-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(10,31,61,.5)}
.market-media{border-radius:16px 16px 0 0;overflow:hidden;margin:0}
.market-body{padding:15px 17px 20px;display:flex;flex-direction:column;gap:9px}

/* judul lebih tegas, seperti di referensi */
.market-body h3{margin:0;font-size:1.06rem;line-height:1.25;letter-spacing:-.01em}

/* dua keterangan berikon, bukan lagi dipisah tanda titik */
.market-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.market-meta span{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;background:#eef4fc;
  color:#4a6e8a;font-size:.71rem;font-weight:700;letter-spacing:.01em;
}
.market-meta span::after{content:none}          /* buang pemisah titik lama */
.market-meta span svg{flex:none;opacity:.8}

.market-body p{
  margin:0;color:#5c7a99;font-size:.86rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* harga: label kecil di atas, angka besar, satuan kecil di sampingnya */
.market-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:4px;border-top:0;
}
.market-price-wrap{display:flex;flex-direction:column;gap:1px;min-width:0}
.market-price-wrap::before{content:"Mulai dari";font-size:.68rem;font-weight:700;color:#8aa0b8;letter-spacing:.04em;text-transform:uppercase}
.market-price{font-size:1.24rem;font-weight:800;color:var(--biru,#0b62a4);line-height:1.15}
.market-price-wrap small{font-size:.68rem;color:#8aa0b8}

/* panah bulat di pojok, di atas sudut miring biru */
.market-panah{
  position:relative;z-index:2;flex:none;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--biru,#0b62a4);color:#fff;
  box-shadow:0 6px 16px -8px rgba(10,31,61,.9);
  transition:transform .18s ease;
}
.market-card:hover .market-panah{transform:translateX(3px)}
.market-card::after{
  content:"";position:absolute;right:0;bottom:0;width:96px;height:96px;z-index:1;
  background:linear-gradient(135deg,transparent 50%,rgba(31,122,214,.16) 50%);
  pointer-events:none;
}
@media(max-width:640px){
  .market-body{padding:13px 15px 18px}
  .market-price{font-size:1.14rem}
  .market-panah{width:36px;height:36px}
  .market-card::after{width:76px;height:76px}
}

/* v4.07 — aksen warna di EA Control.
   Tiap panel diberi garis kiri berbeda warna supaya mata gampang membedakan
   bagian: keadaan akun, tombol cepat, setelan, alat, dan riwayat. */
.ctl-panel{position:relative}
.ctl-panel::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0}
.ctl-panel:nth-of-type(6n+1)::before{background:#1f7cff}
.ctl-panel:nth-of-type(6n+2)::before{background:#0aa06e}
.ctl-panel:nth-of-type(6n+3)::before{background:#e8821a}
.ctl-panel:nth-of-type(6n+4)::before{background:#8b5cf6}
.ctl-panel:nth-of-type(6n+5)::before{background:#0ea5b7}
.ctl-panel:nth-of-type(6n+6)::before{background:#e0518a}
.ctl-panel h3{padding-left:11px}

/* tombol cepat EA Control: hijau jalan, kuning jeda, merah tutup semua —
   warnanya mengikuti arti tombolnya, bukan sekadar hiasan */
.ctl-btn-start{background:linear-gradient(135deg,#17b37f,#0a8a5e);border-color:#0a8a5e;color:#fff}
.ctl-btn-pause{background:linear-gradient(135deg,#f3b32c,#d99413);border-color:#d99413;color:#3b2a06}
.ctl-btn-danger{background:linear-gradient(135deg,#ef6b6b,#d63b3b);border-color:#d63b3b;color:#fff}

/* v4.10 — halaman Keamanan & Privasi */
.aman-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-bottom:22px}
.aman-kartu{border:1px solid var(--garis);border-radius:16px;padding:18px;background:#fff}
.aman-kartu h3{margin:11px 0 6px;font-size:1rem;line-height:1.3}
.aman-kartu p{margin:0;font-size:.87rem;line-height:1.6;color:var(--tubuh)}
.aman-ikon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px}
.aman-ikon-1{background:var(--ak-1-mudah,#e8f2fd);color:var(--ak-1,#1f7cff)}
.aman-ikon-2{background:var(--ak-2-mudah,#e4f6ef);color:var(--ak-2,#0aa06e)}
.aman-ikon-3{background:var(--ak-3-mudah,#fdf1e3);color:var(--ak-3,#e8821a)}
.aman-ikon-4{background:var(--ak-4-mudah,#f1ecfe);color:var(--ak-4,#8b5cf6)}
.aman-ikon-5{background:var(--ak-5-mudah,#e3f6f8);color:var(--ak-5,#0ea5b7)}
.aman-ikon-6{background:var(--ak-6-mudah,#fdeaf1);color:var(--ak-6,#e0518a)}
.aman-jujur{margin-bottom:20px}
.aman-tautan{display:flex;gap:10px;flex-wrap:wrap}

/* v4.10 — baris kepercayaan ringkas di checkout */
.aman-strip{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 18px;padding:12px 15px;
  border:1px solid var(--garis);border-radius:13px;background:var(--kertas,#f6f9fc);
  font-size:.81rem;color:var(--tubuh);
}
.aman-strip span{display:inline-flex;align-items:center;gap:7px}
.aman-strip svg{flex:none;color:var(--ak-2,#0aa06e)}
.aman-strip a{margin-left:auto;font-weight:700;white-space:nowrap}
@media(max-width:640px){.aman-strip a{margin-left:0}}

/* v4.12 — slider "Kabar & promo" di beranda.
   Menggantikan grid kartu besar v4.11 yang terlalu memakan layar. Kartunya
   dipersempit jadi 232px dan digeser mendatar dengan scroll-snap — tanpa
   JavaScript, jadi tetap bisa digeser walau skripnya gagal dimuat. */
.judul-geser{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.judul-geser h2{margin:0}
.judul-geser p{margin:4px 0 0;color:var(--redup);font-size:.88rem}
.geser-bungkus{position:relative;margin:0 -4px}
.geser{
  display:flex;gap:13px;list-style:none;margin:0;padding:4px 4px 12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;
}
.geser>li{flex:0 0 232px;scroll-snap-align:start}
.geser-kartu{
  display:flex;flex-direction:column;height:100%;border:1px solid var(--garis);border-radius:13px;
  background:#fff;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
}
.geser-kartu:hover{transform:translateY(-3px);box-shadow:0 14px 28px -22px rgba(10,31,61,.6);text-decoration:none}
.geser-gambar{display:block;aspect-ratio:16/9;background:var(--kertas,#f1f5fa)}
.geser-gambar img{width:100%;height:100%;object-fit:cover;display:block}
.geser-isi{display:block;padding:11px 13px 13px}
.geser-isi strong{display:block;font-size:.88rem;line-height:1.32;color:var(--navy)}
.geser-isi small{
  display:-webkit-box;margin-top:5px;font-size:.77rem;line-height:1.5;color:var(--redup);
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:640px){ .geser>li{flex-basis:78vw;max-width:272px} }

.konten-gambar{width:100%;border-radius:16px;margin-bottom:18px;display:block}
.konten-isi{font-size:.95rem;line-height:1.75;margin-bottom:18px}

/* v4.17 — daftar lompat antar bagian di halaman analisa */
/* v4.23: daftar lompat menempel DI BAWAH bar atas situs, bukan di nol.
   .topbar memakai position:sticky dengan z-index 60 dan tinggi 76px; kalau
   daftar ini dipasang di top:0 dengan z-index 12, dia tergelincir ke belakang
   bar atas dan tidak terlihat sama sekali saat halaman digulir. */
.ana-lompat{
  position:sticky;top:var(--bar-atas,76px);z-index:11;display:flex;gap:6px;flex-wrap:wrap;
  margin:0 0 18px;padding:9px 0;background:var(--awan,#f4f7fb);
  border-bottom:1px solid var(--garis);
}
.ana-lompat a{
  padding:6px 13px;border:1px solid var(--garis);border-radius:999px;background:#fff;
  font-size:.78rem;font-weight:600;color:var(--biru);text-decoration:none;white-space:nowrap;
}
.ana-lompat a:hover{background:var(--biru-kabut,#e6f2ff);border-color:var(--biru);text-decoration:none}
/* supaya judul tidak tertutup daftar lompat saat dilompati */
[id^="bg-"],[id^="ana-"]{scroll-margin-top:calc(var(--bar-atas,76px) + 56px)}
@media(max-width:700px){
  .ana-lompat{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;top:var(--bar-atas-hp,58px)}
  .ana-lompat::-webkit-scrollbar{display:none}
  [id^="bg-"],[id^="ana-"]{scroll-margin-top:calc(var(--bar-atas-hp,58px) + 54px)}
}
@media print{ .ana-lompat{display:none} }

/* =========================================================
   v4.23 — TABEL TIMEFRAME: KOLOM PERTAMA MENEMPEL
   Tabel ini lebar dan harus digeser ke samping di layar biasa. Masalahnya kolom
   Timeframe ikut tergeser keluar, jadi pembaca melihat deretan angka RSI dan ATR
   tanpa tahu itu milik timeframe yang mana — justru kolom yang paling penting
   untuk membaca tabelnya. Sekarang kolom itu menempel di kiri saat digeser.
   ========================================================= */
.ana-tabel{min-width:680px}
.ana-tabel th:first-child,
.ana-tabel td:first-child{
  position:sticky;left:0;z-index:2;
  background:#fff;
  box-shadow:1px 0 0 var(--garis), 4px 0 10px -8px rgba(10,31,61,.35);
}
.ana-tabel thead th:first-child{z-index:3;background:var(--kertas,#f6f9fc)}
.ana-tabel tbody tr:nth-child(even) td:first-child{background:#fbfcfe}

/* v4.23 — blok Sesi perdagangan saat berada di paling atas.
   .ana-blok punya margin-top:30px untuk memisahkan blok-blok di tengah halaman.
   Karena blok ini sekarang yang pertama, margin itu dinolkan supaya tidak
   menyisakan ruang kosong di bawah daftar lompat. */
.ana-blok-sesi{margin-top:0;margin-bottom:18px}

/* v4.23 — penyesuaian HP untuk halaman analisa */
@media(max-width:640px){
  /* tabel timeframe: kolom pertama dipersempit supaya kolom lain ikut terbaca,
     tapi tetap menempel saat digeser */
  .ana-tabel{min-width:620px}
  .ana-tabel th:first-child,
  .ana-tabel td:first-child{max-width:92px}
  .ana-tabel th,.ana-tabel td{padding:10px 11px;font-size:.84rem}
  /* sesi perdagangan: satu kolom penuh, tidak dipaksa berdampingan */
  .ana-sesi{grid-template-columns:1fr;gap:10px}
}

/* v4.26: checkout di HP melebar 51 px karena kolom grid "1fr" ikut memanjang
   mengikuti kode referral dan alamat https:// yang tidak bisa dipatah. */
.checkout-grid>*{min-width:0}
.checkout-grid code{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:850px){.checkout-grid{grid-template-columns:minmax(0,1fr)}}
/* Strip keamanan di atas checkout dulu punya jarak atas-bawah penuh, ditambah jarak
   section berikutnya — di HP jadi ruang kosong besar sebelum kartu produk. */
.checkout-strip-wrap{padding-bottom:0}
.checkout-strip-wrap{padding-top:clamp(18px,3vw,28px)}
.checkout-strip-wrap + .section{padding-top:clamp(16px,2.5vw,26px)}

/* v4.27.1: label "Mulai dari" hanya untuk produk yang punya harga */
.market-price-wrap.tanpa-mulai::before{content:none}
.market-harga-umum{display:block;white-space:nowrap;margin-top:1px;opacity:.85}

/* v4.30: saringan Tools — jenis | platform | harga, dipisah garis tipis */
.chip-saring{align-items:center}
.chip-pemisah{width:1px;height:22px;background:#d6e0ee;margin:0 2px;flex:none}
@media(max-width:560px){
  .chip-saring{gap:6px}
  .chip-saring .chip{padding:7px 13px;font-size:.84rem}
  .chip-pemisah{display:none}
}

/* =========================================================
   v4.31: HALAMAN TOOLS ALA MARKET METATRADER
   ========================================================= */
.tools-halaman{padding-top:clamp(18px,3vw,34px)}
.tools-tata{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
.tools-side{position:sticky;top:90px;background:#fff;border:1px solid #d7e1f0;border-radius:16px;padding:10px}
.tools-side-buka{display:none}
.tools-pohon a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#2f4a63;text-decoration:none;font-size:.93rem;line-height:1.25}
.tools-pohon a svg{flex:none;color:#5e7aa0}
.tools-pohon a span{flex:1;min-width:0}
.tools-pohon a em{font-style:normal;font-size:.74rem;font-weight:700;color:#8296b0;background:#f1f5fb;border-radius:999px;padding:2px 8px;min-width:24px;text-align:center}
.tools-pohon a:hover{background:#f2f6fc;text-decoration:none}
.tools-pohon a.aktif{background:var(--navy);color:#fff}
.tools-pohon a.aktif svg{color:#fff}
.tools-pohon a.aktif em{background:rgba(255,255,255,.18);color:#fff}
.tools-pohon a.kosong{opacity:.55}
.tools-akar{font-weight:800;color:var(--navy)!important;margin-top:4px}
.tools-akar.aktif{color:#fff!important}
.tools-pohon ul{list-style:none;margin:0 0 6px;padding:0 0 0 14px;border-left:1px dashed #d6e0ee;margin-left:18px}
.tools-pohon ul a{font-size:.9rem;padding:7px 10px}
.tools-utama{min-width:0}
.tools-utama .remah{margin:0 0 10px}
.tools-kepala{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.tools-kepala-ikon{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#e7f0fd,#d6e6fb);color:var(--biru-terang-tua,#0f6bc4)}
.tools-kepala-ikon svg{width:28px;height:28px}
.tools-kepala h1{font-size:clamp(1.45rem,2.6vw,2rem);margin:0 0 4px;line-height:1.2}
.tools-kepala p{margin:0;color:var(--tubuh-lembut);max-width:62ch}
.tools-cari{margin-bottom:14px}
.tools-cari input{width:100%;background:#fff}
.tools-tab{display:flex;gap:6px;border-bottom:1px solid #d7e1f0;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tools-tab::-webkit-scrollbar{display:none}
.tools-tab a{flex:none;padding:10px 16px;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;color:#40596c;font-weight:700;font-size:.92rem;text-decoration:none;background:#f1f5fb;margin-bottom:-1px}
.tools-tab a:hover{background:#e7eef8;text-decoration:none}
.tools-tab a.aktif{background:#fff;border-color:#d7e1f0;color:var(--navy)}
.tools-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tools-bar .market-summary{margin:0}
.tools-bar-bawah{justify-content:center;margin:22px 0 0}
.tools-hal{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tools-hal a,.tools-hal span{min-width:36px;height:36px;padding:0 10px;display:inline-grid;place-items:center;border-radius:8px;border:1px solid #d7e1f0;font-weight:700;font-size:.88rem;color:#2f4a63;text-decoration:none;background:#fff}
.tools-hal a:hover{border-color:#9db6dc;text-decoration:none}
.tools-hal span.aktif{background:var(--navy);border-color:var(--navy);color:#fff}
.tools-hal .tools-hal-titik{border:0;background:none;min-width:auto;padding:0 2px}
.tools-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))!important}
@media(max-width:899px){
  .tools-tata{grid-template-columns:minmax(0,1fr);gap:14px}
  .tools-side{position:static;padding:6px}
  .tools-side-buka{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;font:inherit;font-weight:800;color:var(--navy);text-align:left;cursor:pointer}
  .tools-side-buka small{display:block;font-size:.7rem;font-weight:700;color:#8296b0;text-transform:uppercase;letter-spacing:.05em}
  .tools-side-buka svg{transition:transform .2s}
  .tools-side:not(.tutup) .tools-side-buka svg{transform:rotate(180deg)}
  .tools-side.tutup .tools-pohon{display:none}
  .tools-pohon{padding-top:4px;border-top:1px solid #e6edf6;margin-top:4px}
  .tools-kepala-ikon{width:44px;height:44px}
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
}
@media(max-width:420px){.tools-tab a{padding:9px 12px;font-size:.86rem}}
.tools-cari.kotak-cari,.tools-cari{max-width:none;width:100%}
.tools-chev{width:9px;height:9px;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);flex:none;margin-right:4px}
@media(max-width:899px){.tools-side:not(.tutup) .tools-chev{transform:rotate(-135deg) translate(-2px,-2px)}}
/* =========================================================
   v4.32: TOOLS DI DALAM CLIENT AREA — susunan sama seperti situs (kategori di kiri,
   kartu di kanan), tapi lebih rapat dan kartunya lebih kecil supaya muat di kolom
   isi yang diapit menu Client Area dan kolom promo. Di HP tetap bertumpuk.
   ========================================================= */
@media(min-width:900px){
  .klien-isi .tools-halaman{padding-top:6px}
  .klien-isi .tools-halaman>.container{padding-left:0!important;padding-right:0!important;max-width:none}
  .klien-isi .tools-tata{grid-template-columns:196px minmax(0,1fr);gap:18px}
  .klien-isi .tools-side{top:14px;padding:8px;border-radius:14px}
  .klien-isi .tools-pohon a{font-size:.84rem;padding:7px 8px;gap:8px}
  .klien-isi .tools-pohon a svg{width:16px;height:16px}
  .klien-isi .tools-pohon a em{font-size:.68rem;padding:1px 6px;min-width:20px}
  .klien-isi .tools-pohon ul{margin-left:14px;padding-left:8px}
  .klien-isi .tools-pohon ul a{font-size:.82rem;padding:6px 8px}
  .klien-isi .tools-utama .remah{font-size:.8rem;margin-bottom:6px}
  .klien-isi .tools-kepala{gap:10px;margin-bottom:12px}
  .klien-isi .tools-kepala-ikon{width:40px;height:40px;border-radius:11px}
  .klien-isi .tools-kepala-ikon svg{width:22px;height:22px}
  .klien-isi .tools-kepala h1{font-size:1.3rem}
  .klien-isi .tools-kepala p{font-size:.86rem}
  .klien-isi .tools-cari{margin-bottom:10px}
  .klien-isi .tools-tab a{padding:8px 13px;font-size:.85rem}
  .klien-isi .tools-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))!important;gap:12px}
}
/* kartu ringkas (semua ukuran layar di Client Area) */
.klien-isi .tools-grid .market-card{border-radius:14px}
.klien-isi .tools-grid .market-badges-top{inset:7px 7px auto 7px;gap:4px}
.klien-isi .tools-grid .market-pill{min-height:19px;padding:3px 7px;font-size:.62rem}
.klien-isi .tools-grid .market-body{padding:10px 11px 11px;gap:7px}
.klien-isi .tools-grid .market-meta{font-size:.68rem;gap:5px}
.klien-isi .tools-grid .market-meta svg{width:11px;height:11px}
.klien-isi .tools-grid .market-body h3{font-size:.92rem;min-height:2.45em}
.klien-isi .tools-grid .market-body p{font-size:.76rem;line-height:1.45;min-height:2.9em}
.klien-isi .tools-grid .market-foot{padding-top:8px;gap:6px}
.klien-isi .tools-grid .market-price{font-size:1rem}
.klien-isi .tools-grid .market-price-wrap small{font-size:.66rem}
.klien-isi .tools-grid .market-price-wrap::before{font-size:.6rem}
.klien-isi .tools-grid .market-panah{width:30px;height:30px}
.klien-isi .tools-grid .market-panah svg{width:14px;height:14px}
@media(max-width:899px){.klien-isi .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}}

/* v4.32: teks sampul otomatis di kartu ikut lebar kartu (bukan lebar layar) dan
   tidak lagi naik menabrak lencana "Gratis/Siap pakai" di pojok kiri atas.
   Dulu nama produk memakai 3vw, jadi di kartu kecil hurufnya terlalu besar,
   membungkus jadi banyak baris, dan mendorong label jenis ke bawah lencana. */
.market-media{container-type:inline-size}
.market-media > .sampul .sampul-teks{top:40px;overflow:hidden}
@supports (font-size:1cqw){
  .market-media > .sampul .sampul-nama{font-size:clamp(.95rem, 12.5cqw, 2rem)}
  .market-media > .sampul .sampul-jenis{font-size:clamp(.56rem, 4.2cqw, .72rem)}
  .market-media > .sampul .sampul-platform{font-size:clamp(.56rem, 4.2cqw, .72rem)}
  .market-media > .sampul .sampul-teks{left:clamp(9px, 7cqw, 18px);right:clamp(14%, 20cqw, 34%);bottom:clamp(9px, 7cqw, 18px);gap:clamp(4px, 3cqw, 8px)}
}

/* v4.48: menu VIP Signal berdiri sendiri dan diberi penanda emas supaya mudah ditemukan */
.navlinks a.nav-vip{display:inline-flex;align-items:center;gap:6px}
.nav-vip-ikon{width:16px;height:16px;fill:#e0a92b;flex:none;filter:drop-shadow(0 1px 1px rgba(160,110,0,.25))}
.navlinks a.nav-vip:not(.aktif){color:var(--navy,#0a1f3d)}
.menu-mobil a.menu-mobil-vip{display:flex;align-items:center;gap:10px;font-weight:700;margin:10px 0 4px;padding:12px 14px;border:1px solid #f1dca6;border-radius:12px;background:#fff8e6}
.menu-mobil a.menu-mobil-vip .nav-vip-ikon{width:18px;height:18px}
/* v4.48: menu atas tidak boleh patah baris setelah VIP Signal jadi menu sendiri */
.navlinks a,.nav-turun-tombol{white-space:nowrap}
@media (max-width:1320px){
  .nav{gap:12px}
  .navlinks a,.nav-turun-tombol{padding:9px 10px;font-size:.93rem}
  .nav-cta .btn{padding:10px 16px}
}
@media (max-width:1160px){
  .navlinks,.nav-cta{display:none}
  .nav-toggle{display:flex;margin-left:auto}
  .menu-mobil>.container{max-width:560px;margin-left:auto}
}

/* =========================================================
   v4.60: TEMA "MIDNIGHT ELECTRIC" — setema dengan hero beranda.
   Navy judul lebih gelap (#0a1f3d), biru utama listrik (#1f7cff),
   tombol utama bergradasi seperti hero, footer senada latar hero.
   ========================================================= */
:root{
  --ink:#0a1f3d;--navy:#0a1f3d;--biru-gelap:#0a1f3d;
  --biru:#1f7cff;--biru-terang:#1f7cff;--kuning-tua:#1f7cff;
  --biru-tua:#155fd6;--biru-terang-tua:#155fd6;
  --biru-kabut:#eaf3ff;--biru-lembut:#eaf3ff;--kuning:#dbeaff;--kuning-lembut:#eef5ff;
  --garis:#d9e5f5;--garis-lembut:#d9e5f5;--garis-tebal:#bcd3f2;
  --tubuh:#33475e;
}
a{color:#155fd6}
.btn-utama{--btn-bg:#1f7cff;--btn-br:transparent;background-image:linear-gradient(135deg,#1668e8 0%,#2a8cff 100%);box-shadow:0 10px 26px -14px rgba(31,124,255,.85)}
.btn-utama:hover{background-image:linear-gradient(135deg,#125cd6 0%,#1f7cff 100%)}
.footer{background:radial-gradient(900px 320px at 85% 0%,rgba(31,124,255,.16),transparent 70%),#050d1c}
.footer-tautan h3{color:#7cc4ff}
.klien-bantuan .btn-utama,.btn-utama[disabled],.btn-utama.is-mati{background-image:none;box-shadow:none}

/* pita harga: warna dikunci ke tampilan lama supaya tidak ikut tema baru */
.tiker{color:#0b416b;border-top-color:#dce4f0;border-bottom-color:#dce4f0}
.tiker-sim{color:#0b416b}
.tiker-item{border-right-color:#dce4f0}
.tiker-kaki{border-top-color:#dce4f0}
.tiker-kaki a{color:#0b6db8}

/* v4.62 — Sidebar admin & Client Area lebih terang (navy biru, bukan hitam),
   tetap setema dengan hero. */
.app-side,aside.kl-side{
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(92,200,255,.18), transparent 70%),
    radial-gradient(360px 300px at 100% 100%, rgba(47,139,255,.20), transparent 70%),
    linear-gradient(180deg,#14468a 0%,#0f3772 48%,#0c2c5e 100%);
  border-right:1px solid rgba(255,255,255,.10);
}
.app-nav-judul{color:#a9c3e8}
.app-nav a{color:#e4ecf8}
.app-nav a .ikon{opacity:.9}
.app-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.app-nav a.aktif{background:#fff;color:#0a1f3d;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.app-side-kaki{border-top-color:rgba(255,255,255,.18);color:#c3d4ee}
.app-side .wordmark span:last-child{color:#9fd6ff}
.kl-side-judul{color:#a9c3e8}
.kl-menu a{color:#e4ecf8}
.kl-menu a:hover{background:rgba(255,255,255,.12)}
.kl-menu a.aktif{background:#fff;color:#0a1f3d;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
/* ikon berwarna di menu Client Area: diterangkan sedikit agar tetap kontras di latar biru */
aside.kl-side .kl-menu a:not(.aktif) svg{filter:brightness(1.35) saturate(1.1)}

/* Product conversion clarity without changing checkout/payments */
.tm-product-trust{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 22px}
.tm-product-trust span{font-size:.75rem;font-weight:650;color:#244c6a;background:#f1f8ff;border:1px solid #d8eaf6;border-radius:99px;padding:8px 10px}
.tm-product-trust span:last-child{background:#fff9ed;color:#76551b;border-color:#f3e3be}
.tm-checkout-steps{border:1px solid #c5dff0;background:#edf8ff;border-radius:12px;padding:13px 14px;margin:14px 0 16px}
.tm-checkout-steps strong{font-size:.86rem;color:#0d3554}.tm-checkout-steps p{font-size:.81rem;line-height:1.65;color:#284d66;margin:7px 0}
.tm-checkout-steps small{display:block;color:#55748a;line-height:1.5}
@media(max-width:620px){.tm-product-trust{gap:6px}.tm-product-trust span{font-size:.69rem}}