/* =============================================================================
   FILE INI UNTUK APA?
   Mengatur tampilan halaman daftar.html: langkah pilih EA, pilih paket sewa,
   toggle VPS, sampai ringkasan pembayaran. Variabel warna dasar (--bg, --gold,
   dll) diambil dari css/style.css yang sudah di-load lebih dulu di HTML.
   ============================================================================= */

/* cegah scrollbar horizontal dari elemen full-bleed (.tech-strip) */
html{ overflow-x:hidden; }

/* Disamakan dengan halaman lain (1880px, lihat catatan di css/style.css) --
   dulu 1720px, beda sendiri dari index.html/produk.html (1880) & client
   portal (1780), jadi margin kiri/kanan terlihat berubah tiap pindah halaman. */
.wrap{ max-width:1880px; }

/* Wizard: langkah "Pilih Produk" (step 1) memakai lebar penuh supaya kartu
   produk tidak menyisakan ruang kosong; langkah lain (form, ringkasan,
   pembayaran) tetap ramping & di tengah supaya enak dibaca. */
#step-2, #step-3, #step-4, #step-5{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Indikator langkah (step 1/2/3) ---------- */
.steps-nav{ display:flex; gap:8px; margin:32px auto 28px; max-width:1100px; }
.step-dot{
  flex:1; height:4px; border-radius:999px; background:var(--line);
}
.step-dot.done{ background:var(--gold); }
.step-dot.active{ background:var(--gold-bright); }

.step-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--sage); margin-bottom:8px; }
.step-label span.active{ color:var(--gold-bright); font-weight:600; }

.step-panel{ display:none; }
.step-panel.show{ display:block; }

.page-title{ font-family:'Fraunces', serif; font-size:clamp(22px, 2.6vw, 30px); margin:0 0 8px; }
.page-sub{ color:#C4BCB1; font-size:14.5px; margin:0 0 28px; }

/* ---------- Tab kategori (Indikator/EA/Sinyal/Analisa AI) ---------- */
.kategori-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.kategori-tab{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); color:#C4BCB1;
  font-size:13px; font-weight:600; cursor:pointer; background:rgba(255,255,255,0.025); transition:border-color .15s ease, color .15s ease;
}
.kategori-tab:hover{ color:var(--wheat); border-color:var(--sage); }
.kategori-tab.active{ background:var(--gold); border-color:var(--gold); color:#14210F; }
/* Pil khusus "Simulator" — dibedakan dari filter kategori biasa */
.kategori-tab-sim{
  margin-left:6px; color:var(--gold-bright);
  border-color:rgba(232,196,104,0.5); background:rgba(232,196,104,0.1);
}
.kategori-tab-sim:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
@media (max-width:560px){ .kategori-tab-sim{ margin-left:0; } }

/* ---------- Menu kategori versi HP (tombol hamburger + dropdown) ----------
   Di layar lebar tombolnya sembunyi & pil kategori tampil biasa (baris di
   atas). Di HP (<=640px) pil disembunyikan, diganti tombol hamburger; klik
   membuka pilihannya sebagai daftar vertikal rata kiri, bukan numpuk 2-3
   baris pil seperti sebelumnya. */
.kategori-menu{ position:relative; margin-bottom:20px; }
.kategori-menu-toggle{ display:none; }
@media (max-width:640px){
  .kategori-menu-toggle{
    display:inline-flex; align-items:center; gap:9px;
    padding:10px 16px; border-radius:8px; border:1px solid var(--line);
    background:var(--bg-panel); color:var(--wheat);
    font-size:13.5px; font-weight:600; cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
  }
  .kategori-menu-toggle svg{ width:18px; height:18px; flex-shrink:0; color:var(--gold-bright); }
  .kategori-menu-toggle:hover{ border-color:var(--sage); }
  .kategori-menu .kategori-tabs{
    display:none;
    position:absolute; top:calc(100% + 8px); left:0; z-index:30;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    padding:8px; gap:4px; min-width:230px; margin-bottom:0;
    box-shadow:0 18px 40px -12px rgba(0,0,0,0.6);
  }
  .kategori-menu.open .kategori-tabs{ display:flex; }
  .kategori-menu .kategori-tab, .kategori-menu .kategori-tab-sim{
    width:100%; text-align:left; border-radius:6px; padding:10px 12px;
  }
  .kategori-menu .kategori-tab-sim{ margin-left:0; margin-top:2px; border-top:1px dashed var(--line); border-radius:6px 6px 6px 6px; padding-top:12px; }
}

/* "Umpan rasa penasaran" di bawah tab kategori — bercanda, justru mendorong
   client menggeser ke bawah untuk melihat daftar produk. */
.curiosity-note{
  display:flex; align-items:center; gap:13px;
  border:1px dashed rgba(232,196,104,0.5); border-radius:12px;
  background:rgba(232,196,104,0.07);
  padding:12px 16px; margin:0 0 24px; max-width:560px;
}
.curiosity-ico{ font-size:18px; line-height:1; flex-shrink:0; }
.curiosity-note strong{
  display:block; color:var(--wheat); font-size:13.5px; font-weight:600;
}
.curiosity-note span[data-i18n]{
  display:block; color:var(--sage); font-size:12px; margin-top:2px;
}
.curiosity-arrow{
  margin-left:auto; flex-shrink:0; color:var(--gold-bright);
  font-size:18px; font-weight:700;
  animation:curiosityBounce 1.4s ease-in-out infinite;
}
@keyframes curiosityBounce{
  0%, 100%{ transform:translateY(-3px); }
  50%{ transform:translateY(3px); }
}
@media (prefers-reduced-motion: reduce){
  .curiosity-arrow{ animation:none; }
}

/* Panel simulator versi "tab" (menggantikan grid produk di Step 1) */
.sim-panel--tab{ padding:20px 20px 22px; }
.sim-panel--tab > h2{ margin-top:0; }

/* ---------- Kartu pilihan EA ---------- */
.ea-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.ea-card{
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(32,30,26,0.92) 0%, rgba(17,17,20,0.94) 100%);
  padding:18px 18px; cursor:pointer; transition:border-color .18s ease, transform .18s ease;
}
.ea-card:hover{ border-color:rgba(232,196,104,0.42); transform:translateY(-3px); }
.ea-card.selected{ border-color:var(--gold); background:rgba(201,162,39,0.08); }
.ea-card.segera-hadir{ opacity:0.72; }
.ea-banner{
  margin:-18px -18px 12px; height:128px; border-radius:14px 14px 0 0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:inset 0 -30px 22px -10px rgba(17,17,20,0.9);
}
.ea-kategori-tag{ font-size:10.5px; font-weight:600; color:var(--gold-bright); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px; }
.ea-card h3{ font-family:'Fraunces', serif; font-size:16.5px; color:var(--wheat); margin:0 0 4px; }
.ea-card p{ color:#C4BCB1; font-size:13px; line-height:1.48; margin:0; }

/* "Cara kerja singkat" — <details> yang bisa dibuka/tutup di dalam kartu EA */
.ea-poin{ margin-top:8px; }
.ea-poin summary{
  cursor:pointer; list-style:none; font-size:12px; font-weight:600;
  color:var(--gold-bright); display:inline-flex; align-items:center; gap:6px;
  padding:3px 0; user-select:none;
}
.ea-poin summary::-webkit-details-marker{ display:none; }
.ea-poin summary::before{ content:"▸"; font-size:10px; transition:transform .15s ease; }
.ea-poin[open] summary::before{ transform:rotate(90deg); }
.ea-poin ul{
  margin:6px 0 0; padding:0 0 0 16px;
  color:#C4BCB1; font-size:12px; line-height:1.55;
}
.ea-poin li{ margin:5px 0; }
.badge-segera{
  display:inline-block; margin-top:8px; font-size:10.5px; font-weight:600; color:var(--gold-bright);
  background:rgba(232,196,104,0.12); border:1px solid rgba(232,196,104,0.34);
  padding:3px 10px; border-radius:999px;
}

/* Baris jumlah pengguna (kiri) & rating bintang (kanan) di bawah tiap kartu EA
   — dibungkus kotak sendiri biar rapi & menonjol. */
.ea-meta-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:10px; padding:6px 11px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:9px;
  font-size:12px;
}
.ea-pengguna{ color:var(--sage); }
.ea-rating{
  color:var(--amber); font-weight:700; font-family:'IBM Plex Mono', monospace;
  background:rgba(232,196,104,0.12); border:1px solid rgba(232,196,104,0.3);
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}

/* ---------- Akun Pantau (read-only) di dalam tiap kartu EA ---------- */
/* Dibungkus jadi satu "kotak" panel di dalam kartu EA supaya terlihat rapi
   & profesional; tiap nilai (ID/Server/Password) juga dikotakkan seperti
   field read-only. */
.ea-pantau{
  margin-top:10px;
  padding:10px 12px 9px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(11,11,13,0.55);
  cursor:default;
}
.ea-pantau-title{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:7px;
}
.ea-pantau-title svg{ width:11px; height:11px; flex-shrink:0; opacity:0.9; }
.ea-pantau-row{
  display:flex; align-items:center; gap:10px; padding:2.5px 0; font-size:12.5px;
}
.ea-pantau-row .k{
  width:74px; flex-shrink:0; color:var(--sage);
  font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
}
.ea-pantau-row .v{
  flex:1;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--wheat);
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 9px;
  word-break:break-all;
}
.ea-pantau-row .copy-btn{ flex-shrink:0; padding:4px 9px; font-size:10.5px; }
.ea-pantau-note{
  margin-top:7px; padding-top:7px; border-top:1px dashed var(--line);
  font-size:10.5px; line-height:1.42; color:var(--sage);
}

/* ---------- Sorotan teknologi (bawah step 1) ---------- */
/* Blok ini "menembus" lebar .wrap supaya garis pemisah di atasnya benar-benar
   full-width (tidak terpotong), tapi isinya (teks + kartu) tetap sejajar dengan
   konten lain lewat padding-kiri/kanan penyeimbang. margin-top besar supaya
   blok turun jauh dari kartu produk di atasnya. */
.tech-strip{
  position:relative;
  margin-top: clamp(88px, 11vw, 132px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(44px, 5vw, 64px) calc(50vw - 50%) 0;
}
/* garis full-width (mentok kiri-kanan viewport), dibuat lebih terang dari
   --line supaya tetap kelihatan sampai ke tepi (di pojok ada vignette gelap). */
.tech-strip::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  border-top:1px solid rgba(241, 237, 225, 0.18);
}
.tech-strip-head span{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-bright); margin-bottom:12px;
}
.tech-strip-head h2{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(18px, 1.9vw, 21px); color:var(--wheat);
  margin:0 0 28px; max-width:44ch; line-height:1.35;
}
.tech-strip-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:1100px){ .tech-strip-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:680px){ .tech-strip-grid{ grid-template-columns:minmax(0,1fr); } }
.tech-item{
  display:flex; gap:14px; padding:22px 20px;
  border:1px solid var(--line); border-radius:13px;
  background:linear-gradient(180deg, rgba(32,30,26,0.9) 0%, rgba(17,17,20,0.92) 100%);
  transition:border-color .18s ease, transform .18s ease;
}
.tech-item:hover{ border-color:rgba(232,196,104,0.4); transform:translateY(-2px); }
.tech-item svg{
  width:22px; height:22px; flex-shrink:0; color:var(--gold-bright); margin-top:2px;
  padding:7px; border:1px solid rgba(232,196,104,0.28); border-radius:9px;
  background:rgba(232,196,104,0.06); box-sizing:content-box;
}
.tech-item h4{ font-size:14.5px; color:var(--wheat); margin:0 0 5px; font-weight:600; }
.tech-item p{ font-size:13px; color:#C4BCB1; line-height:1.58; margin:0; }

/* ---------- Peringatan risiko (paling bawah step 1) ---------- */
.risk-note{
  display:flex; gap:16px;
  margin-top: clamp(52px, 8vw, 92px);
  padding:22px 24px;
  border:1px solid rgba(232,196,104,0.26);
  border-left:3px solid var(--gold);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(232,196,104,0.06) 0%, rgba(17,17,20,0.35) 100%);
}
.risk-note .risk-ico{ width:22px; height:22px; flex-shrink:0; color:var(--gold-bright); margin-top:2px; }
.risk-note h3{ font-size:14.5px; color:var(--wheat); margin:0 0 8px; font-weight:600; }
.risk-note p{ font-size:13px; line-height:1.72; color:#C4BCB1; margin:0; max-width:82ch; }
@media (max-width:620px){ .risk-note{ flex-direction:column; gap:10px; padding:18px 18px; } }
.risk-disclaimer{
  margin:14px 0 0; padding-left:3px;
  font-size:11.5px; line-height:1.6; color:var(--sage); max-width:82ch;
}

/* Simulator lot/risiko/deposit: gaya ada di css/style.css (dipakai bersama
   daftar.html & client-portal.html). */

/* ---------- Kartu pilihan paket ---------- */
.paket-list{ display:flex; flex-direction:column; gap:10px; }
.paket-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:16px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  transition:border-color .15s ease; gap:16px;
}
.paket-card:hover{ border-color:var(--sage); }
a.paket-card{ text-decoration:none; color:inherit; }
.paket-card.selected{ border-color:var(--gold); background:rgba(201,162,39,0.06); }
.paket-card .info .nama{ font-size:14.5px; font-weight:600; }
.paket-card .info .durasi{ font-size:12px; color:var(--sage); margin-top:2px; }
.paket-card .harga{ font-family:'IBM Plex Mono', monospace; font-size:15px; color:var(--gold-bright); white-space:nowrap; }

/* ---------- Kartu broker + Kode Partner IB (lihat renderStepBroker di daftar.js) ----------
   Satu kartu = SATU kotak: bagian atas link broker, bagian bawah (kalau ada)
   kode partner — dipisah cuma garis tipis, bukan kotak terpisah. */
#broker-list{ display:flex; flex-direction:column; gap:12px; }
.broker-item{
  display:flex; flex-direction:column;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; transition:border-color .15s ease;
}
.broker-item:hover{ border-color:var(--sage); }
.broker-item > .paket-card{ border:none; border-radius:0; background:transparent; }
.broker-item > .paket-card:hover{ border:none; }
/* Tombol "Tekan" di ujung kanan kartu broker (ganti tanda panah) */
.broker-cta{
  flex-shrink:0; white-space:nowrap;
  background:var(--gold); color:#14210F;
  font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:700;
  border-radius:var(--radius-pill, 999px); padding:8px 18px;
  transition:filter .15s ease;
}
.broker-item:hover .broker-cta{ filter:brightness(1.08); }
.broker-kode{
  padding:12px 20px 14px;
  border-top:1px dashed var(--line);
  background:rgba(232,196,104,0.06);
}
.broker-kode-baris{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.broker-kode-label{ font-size:11.5px; font-weight:600; color:var(--wheat); }
.broker-kode-nilai{
  font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:600;
  color:var(--gold-bright); letter-spacing:0.08em;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 11px;
}
.broker-kode-note{
  display:block; margin-top:8px; font-size:10.5px; line-height:1.5; color:var(--sage);
}
.copy-btn.saved{ color:var(--green); border-color:var(--green); }

/* badge kecil "Paling Laris" dsb -- opsional, tinggal tempel class ini di paket tertentu */
.tag-highlight{
  display:inline-block; font-size:10.5px; font-weight:600; color:#14210F; background:var(--gold-bright);
  padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle;
}

/* ---------- Opsi VPS ---------- */
.vps-box{
  margin-top:18px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px;
  padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.vps-box .info .nama{ font-size:14px; font-weight:600; }
.vps-box .info .ket{ font-size:12px; color:var(--sage); margin-top:3px; }
.vps-box.disabled{ opacity:0.5; }

/* ---------- Navigasi bawah (Kembali / Lanjut) ---------- */
.step-nav-btns{ display:flex; justify-content:space-between; margin-top:28px; }

/* ---------- Form data diri ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--sage); margin-bottom:6px; }
.field input{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--wheat);
  padding:11px 14px; border-radius:6px; font-size:14px; font-family:'IBM Plex Sans', sans-serif;
}

/* ---------- Ringkasan pembayaran ---------- */
.ringkasan{ background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ringkasan-row{
  display:flex; justify-content:space-between; padding:14px 20px; border-bottom:1px dashed var(--line); font-size:14px;
}
.ringkasan-row .label{ color:var(--sage); }
.ringkasan-row .value{ font-family:'IBM Plex Mono', monospace; }
.ringkasan-row.total{ background:var(--bg-panel-2); border-bottom:none; font-size:16px; font-weight:600; }
.ringkasan-row.total .value{ color:var(--gold-bright); font-size:19px; }

.payment-info{ margin-top:20px; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; padding:22px; }
.payment-info h4{ font-family:'Fraunces', serif; font-size:16px; margin:0 0 12px; }
.bank-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.bank-row:last-child{ border-bottom:none; }
/* Baris USDT / kripto — alamat dompet panjang, jadi ditata vertikal & mono */
.bank-row-crypto{ align-items:flex-start; }
.bank-row-crypto > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bank-row-crypto .bank-line{ color:var(--sage); font-size:12.5px; }
.bank-row-crypto b{ color:var(--gold-bright); font-size:13.5px; }
.bank-addr{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--wheat);
  word-break:break-all; line-height:1.4;
}
.bank-crypto-note{
  color:var(--sage); font-size:11.5px; line-height:1.5;
  margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line);
}
.copy-btn{ background:none; border:1px solid var(--line); color:var(--sage); border-radius:5px; padding:8px 12px; font-size:11.5px; cursor:pointer; }
.copy-btn:hover{ color:var(--wheat); border-color:var(--gold); }

.success-box{ text-align:center; padding:50px 20px; }
.success-box h2{ font-family:'Fraunces', serif; color:var(--wheat); font-size:22px; margin:16px 0 10px; }
.success-box p{ color:var(--sage); font-size:14px; max-width:400px; margin:0 auto; }