/* Kartix 2.0 — latar terang, header navy, aksen kuning: beda dari Cardtell yang serba gelap.
   Palet brand: navy #0B1F44, kuning #FFC629, merah #E63946, abu dingin #E9EEF6, ungu #6C3AED (Pro/premium). */
:root {
  --navy: #0B1F44;
  --navy-2: #16346E;
  --kuning: #FFC629;
  --kuning-tua: #E8A800;
  --kuning-lembut: #FFF4CC;
  --merah: #E63946;
  --merah-lembut: #FFF5F6;
  --ungu: #6C3AED;
  --bg: #EEF2F8;
  --panel: #FFFFFF;
  --panel-2: #F4F7FC;
  --garis: #DCE3EE;
  --garis-emas: rgba(232, 168, 0, 0.45);
  --teks: #0B1F44;
  --redup: #5B6B86;
  --emas: #6C3AED;            /* warna aksen teks/tautan (nama lama dipertahankan supaya kode lama tetap jalan) */
  --emas-muda: #0B1F44;
  --emas-tua: #4C1D95;
  --emas-gradasi: linear-gradient(135deg, #FFD84D 0%, #FFC629 55%, #F2B000 100%);
  --naik: #16A34A;
  --turun: #E63946;
  --radius: 16px;
  --serif: "Montserrat", "Poppins", system-ui, sans-serif;   /* judul */
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Mode gelap: navy pekat, panel navy, teks abu dingin; kuning & ungu tetap jadi aksen. */
html[data-mode="gelap"] {
  color-scheme: dark;
  --bg: #071229;
  --panel: #0F1E3D;
  --panel-2: #152850;
  --garis: #24395F;
  --teks: #E9EEF6;
  --redup: #9AABC7;
  --emas: #B39DFF;
  --emas-muda: #E9EEF6;
  --emas-tua: #D3C6FF;
  --kuning-lembut: rgba(255, 198, 41, 0.14);
  --naik: #34D399;
  --turun: #FF6B76;
  --input: #0B1832;
  --merah-lembut: rgba(255, 107, 118, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 380px at 100% -120px, rgba(255, 198, 41, 0.18), transparent 70%),
    radial-gradient(700px 320px at 0% -80px, rgba(108, 58, 237, 0.08), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--teks);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: rgba(255, 198, 41, 0.5); }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
  background: rgba(11, 31, 68, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 3px solid var(--kuning);
  color: #fff;
}
.logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; }
.logo-teks { font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: 0; color: currentColor; }
.logo-teks em { font-style: italic; color: var(--kuning); }
.logo-svg { height: 66px; width: auto; display: block; margin: -6px 0 -4px; }
@media (max-width: 760px) { .logo-svg { height: 58px; } }
/* Header dua baris: logo, cari & akun di atas; semua menu di baris sendiri supaya tidak ada yang terpotong */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.menu { display: flex; gap: 2px; min-width: 0; overflow-x: auto; order: 10; flex-basis: 100%; margin: 0 -12px -6px; }
.menu a {
  padding: 6px 12px; color: rgba(255, 255, 255, 0.72); font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; border-bottom: 3px solid transparent;
}
.menu a:hover { color: #fff; }
.menu a.aktif { color: #fff; border-bottom-color: var(--kuning); }
.ikon-kanan { display: flex; align-items: center; gap: 6px; }
.ikon {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 16px; color: #fff;
}
.ikon:hover { border-color: var(--kuning); color: var(--kuning); }
.ikon .ik { width: 18px; height: 18px; }
button.ikon { background: transparent; cursor: pointer; padding: 0; font: inherit; }
.ikon-mode .ik-matahari, html[data-mode="gelap"] .ikon-mode .ik-bulan { display: none; }
html[data-mode="gelap"] .ikon-mode .ik-matahari { display: block; }
.ik { display: block; flex: none; }
.lencana {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--merah); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.feed-item .lencana { position: static; display: inline-grid; margin-top: 4px; }
.akun {
  padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.6px; text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 800;
  background: var(--kuning); color: var(--navy); border: 0;
}
.akun:hover { background: #FFD84D; }
.cari { flex: 1; min-width: 170px; max-width: 340px; margin-left: auto; }
.cari input {
  width: 100%; padding: 10px 16px;
  background: #fff; color: var(--navy);
  border: 1px solid transparent; border-radius: 999px;
  font-size: 14px; outline: none; font-family: var(--sans);
}
.cari input:focus { border-color: var(--kuning); box-shadow: 0 0 0 3px rgba(255, 198, 41, 0.35); }

.peringatan {
  padding: 7px 20px; font-size: 12px; text-align: center; letter-spacing: 0.3px;
  background: var(--kuning-lembut);
  color: var(--navy); border-bottom: 1px solid #F3DE94;
}

main { max-width: 1140px; margin: 0 auto; padding: 28px 16px 48px; }
/* Tombol kembali ke halaman sebelumnya (semua halaman kecuali Beranda) */
.bar-kembali { max-width: 1140px; margin: 0 auto; padding: 16px 16px 0; }
.bar-kembali:not([hidden]) + main { padding-top: 12px; }
.tombol-kembali { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 9px; border-radius: 999px;
  border: 1px solid var(--garis); background: var(--panel); color: var(--teks); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 1px 2px rgba(11, 31, 68, .06); }
.tombol-kembali svg { width: 18px; height: 18px; }
.tombol-kembali:hover { border-color: var(--kuning-tua); color: var(--emas); }

.kaki {
  text-align: center; color: rgba(255, 255, 255, 0.72); font-size: 12px; padding: 32px 16px 40px;
  background: var(--navy); border-top: 3px solid var(--kuning);
}
.kaki a { color: #fff; }
.kaki .logo-svg { height: 52px; margin: 0 auto 6px; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 800; letter-spacing: -0.3px; }
h1 { font-size: 34px !important; }
h2 { font-size: 24px; margin-bottom: 14px; }
h3 { font-size: 19px !important; }
.redup { color: var(--redup); }
.naik { color: var(--naik); }
.turun { color: var(--turun); }

.panel {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(11, 31, 68, 0.04), 0 14px 34px -22px rgba(11, 31, 68, 0.28);
}

/* Indeks utama */
.panel-indeks { border-top: 4px solid var(--kuning); }
.indeks-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-bottom: 14px; }
.indeks-nama { font-size: 12px; color: var(--ungu); font-family: "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600; }
.indeks-nilai {
  font-family: var(--serif); font-size: 52px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.indeks-ubah { font-size: 16px; font-weight: 600; }

/* Sampul set: artwork kartu terlangka + nama set */
.kotak-set.bersampul {
  position: relative; overflow: hidden; min-height: 120px; padding: 0; display: flex; align-items: flex-end;
  border-color: var(--garis);
}
.kotak-set.bersampul img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transform: scale(1.04); transition: transform 0.5s ease; filter: saturate(1.05);
}
.kotak-set.bersampul:hover img { transform: scale(1.1); }
.kotak-set.bersampul::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 68, 0) 20%, rgba(11, 31, 68, 0.94) 85%);
}
.kotak-set.bersampul .isi { position: relative; z-index: 1; padding: 12px 14px; }
.kotak-set.bersampul .nama { font-family: var(--serif); font-size: 18px; font-weight: 800; color: #fff; line-height: 1.15; }
.kotak-set.bersampul .sub { color: rgba(255, 255, 255, 0.8); }
.kotak-set.bersampul:hover { border-color: var(--kuning); }
.rentang { display: flex; gap: 6px; margin-left: auto; }
.rentang button {
  background: var(--panel-2); color: var(--redup);
  border: 1px solid var(--garis); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; font-size: 13px;
}
.rentang button.aktif { color: #fff; background: var(--navy); border-color: var(--navy); font-weight: 700; }

.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.statistik div { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.statistik b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.statistik span { font-size: 12px; color: var(--redup); }

/* Grafik */
.grafik { position: relative; width: 100%; }
.pasang-aplikasi { margin-top: 14px; }
.tombol-bagikan { padding: 8px 14px; font-size: 13px; }
.lembar-bagikan { position: absolute; z-index: 60; display: grid; min-width: 190px; padding: 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--garis); box-shadow: 0 14px 34px rgba(11, 31, 68, .22); }
.lembar-bagikan a, .lembar-bagikan button { display: block; text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; background: none;
  color: var(--teks); font: 600 14px var(--sans); cursor: pointer; }
.lembar-bagikan a:hover, .lembar-bagikan button:hover { background: var(--panel-2); }
.lembar-bagikan a, .lembar-bagikan button { display: flex; align-items: center; gap: 10px; }
.logo-bagi { width: 20px; height: 20px; flex: none; }
.notif { display: flex; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--garis); border-radius: 10px; color: inherit; }
.notif:hover { background: var(--panel-2); }
.notif.baru { background: var(--kuning-lembut); }
.notif .titik-baru { width: 8px; height: 8px; border-radius: 50%; background: var(--merah); flex: none; margin-top: 7px; }
.notif .titik-baru.dibaca { visibility: hidden; }
.order-book td, .order-book th { padding: 7px 10px; }
.order-book .sisi-bid { background: rgba(22, 163, 74, .07); }
.order-book .sisi-ask { background: rgba(230, 57, 70, .07); text-align: left; }
.order-book th:nth-child(3) { text-align: left; }
.order-book .total-ob td { font-weight: 700; font-size: 12px; color: var(--redup); border-top: 2px solid var(--garis); }
.chip-porto { border: 1px solid var(--garis); background: var(--panel-2); color: var(--teks); border-radius: 999px; padding: 5px 12px;
  font: 600 12px var(--sans); cursor: pointer; }
.chip-porto:hover { border-color: var(--kuning-tua); }
.tanda-garis { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--naik); vertical-align: middle; margin-right: 4px; }
.tanda-garis.putus { border-top: 2px dashed var(--redup); }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik .tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -110%);
  background: var(--panel-2); border: 1px solid var(--garis); border-radius: 8px;
  padding: 4px 8px; font-size: 12px; white-space: nowrap; display: none;
}

/* Tabel gainer/loser */
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.daftar-gerak { list-style: none; margin: 0; padding: 0; }
.daftar-gerak li a {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--garis);
}
.daftar-gerak li:last-child a { border-bottom: 0; }
.daftar-gerak li a:hover { background: var(--panel-2); }
.daftar-gerak img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--panel-2); }
.daftar-gerak .nama { font-weight: 600; font-size: 14px; }
.daftar-gerak .sub { font-size: 12px; color: var(--redup); }
.daftar-gerak .angka { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }

/* Grid set & kartu */
.grid-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kotak-set {
  background: var(--panel-2); border: 1px solid var(--garis); border-radius: 10px; padding: 12px;
}
.kotak-set:hover { border-color: var(--kuning-tua); }
.kotak-set .nama { font-weight: 600; }
.kotak-set .sub { font-size: 12px; color: var(--redup); }
/* Form listing: pilih cara menentukan harga */
.pilih-harga { display: inline-flex; margin-bottom: 6px; border: 1px solid var(--garis); border-radius: 999px; padding: 2px; background: var(--panel-2); }
.pilih-harga button { border: 0; background: none; color: var(--redup); font: 600 12px var(--sans); padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pilih-harga button.aktif { background: var(--navy); color: #fff; }
html[data-mode="gelap"] .pilih-harga button.aktif { background: var(--kuning); color: var(--navy); }
.mode-trade .pilih-harga, .mode-trade .ket-harga { display: none; }
.i-harga[readonly] { opacity: .85; cursor: not-allowed; }
.ket-harga { font-size: 11.5px; margin-top: 4px; max-width: 220px; line-height: 1.35; }
.tanda-pasar { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(108, 58, 237, .12); color: var(--emas); margin-left: 6px; vertical-align: middle; }

/* Ikon set = kemasan resmi */
.kotak-set.berikon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--panel);
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.kotak-set.berikon:hover { border-color: var(--kuning); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 31, 68, .12); }
.kotak-set.berikon .nama { font-family: var(--serif); font-weight: 800; line-height: 1.2; }
.ikon-set { width: 64px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(11, 31, 68, .28)); transition: transform .25s; }
.kotak-set.berikon:hover img.ikon-set { transform: rotate(-4deg) scale(1.06); }
.ikon-set.kode-set { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 84px; width: 60px; margin: 2px;
  border-radius: 8px; background: linear-gradient(160deg, #1E4590, #0B1F44 75%); border: 2px solid var(--kuning); color: var(--kuning);
  font-family: var(--serif); font-weight: 900; font-size: 13px; letter-spacing: .02em; filter: none; text-align: center; word-break: break-all; padding: 4px; }
.judul-set { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.judul-set h2 { margin: 0; }
.slide img.kemasan-slide { width: 96px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5)); }

.grid-kartu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.kartu-mini { background: var(--panel); border: 1px solid var(--garis); border-radius: 10px; padding: 8px; }
.kartu-mini:hover { border-color: var(--kuning-tua); }
.kartu-mini .gbr {
  aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--redup); font-size: 12px; padding: 6px;
}
.kartu-mini img { width: 100%; height: 100%; object-fit: cover; }
.kartu-mini .nama { font-weight: 600; font-size: 13px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kartu-mini .sub { font-size: 12px; color: var(--redup); }
.kartu-mini .harga { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.jejak { font-size: 13px; color: var(--redup); margin-bottom: 14px; }
.jejak a:hover { color: var(--emas); }

/* Detail kartu */
.detail { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.detail .gbr-besar {
  width: 100%; aspect-ratio: 63 / 88; border-radius: 14px; overflow: hidden; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; color: var(--redup); text-align: center; padding: 12px;
}
.detail .gbr-besar img { width: 100%; height: 100%; object-fit: cover; }
.harga-besar { font-family: var(--serif); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.label {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: var(--panel-2); color: var(--redup); vertical-align: middle;
}
.label.contoh { background: var(--kuning-lembut); color: #8A6100; }
.label.komunitas { background: #DCFCE7; color: #166534; }

form.lapor { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
form.lapor label { font-size: 12px; color: var(--redup); display: grid; gap: 4px; }
form.lapor input, form.lapor select {
  width: 100%; min-width: 0;
  padding: 8px 10px; background: var(--panel-2); color: var(--teks);
  border: 1px solid var(--garis); border-radius: 8px; font-size: 14px;
}
form.lapor button {
  align-self: end; padding: 9px 14px; border: 0; border-radius: 8px;
  background: var(--emas-gradasi); color: var(--navy); font-weight: 800; cursor: pointer; font-family: "Montserrat", sans-serif;
}

table.laporan { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
table.laporan th, table.laporan td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--garis); }
table.laporan th { color: var(--redup); font-weight: 600; }
table.laporan td.uang { font-variant-numeric: tabular-nums; }

.pesan { font-size: 13px; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
.pesan.ok { background: #DCFCE7; color: #166534; }
.pesan.galat { background: #FDE2E4; color: #B42318; }

.kosong { color: var(--redup); font-size: 14px; padding: 8px 0; }

/* Pasar, portofolio, rekber, grading */
.tombol {
  display: inline-block; padding: 8px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--emas-gradasi); color: var(--navy); font-weight: 800; font-size: 14px; font-family: "Montserrat", sans-serif;
}
.tombol.sekunder { background: #fff; color: var(--navy); border: 1px solid var(--garis); }
.tombol.bahaya { background: var(--merah); color: #fff; }
.tombol:disabled { opacity: 0.5; cursor: default; }
.baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.antara { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip-filter button {
  background: #fff; color: var(--redup); border: 1px solid var(--garis);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.chip-filter button.aktif { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }

.label.wts { background: #DCFCE7; color: #166534; }
.label.wtb { background: #DBEAFE; color: #1E40AF; }
.label.wtt { background: var(--kuning-lembut); color: #8A6100; }

.feed-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--garis);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: var(--panel-2); }
.feed-item .tumpuk { position: relative; width: 64px; height: 88px; }
.feed-item .tumpuk img { width: 64px; height: 88px; object-fit: cover; border-radius: 5px; background: var(--panel-2); }
.feed-item .tumpuk .lebih {
  position: absolute; right: -6px; bottom: -6px; background: var(--kuning); color: var(--navy);
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 6px;
}
.feed-item .judul { font-weight: 700; }
.feed-item .sub { font-size: 12px; color: var(--redup); }
.feed-item .angka { text-align: right; font-variant-numeric: tabular-nums; }

table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabel th, table.tabel td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
table.tabel th { color: var(--redup); font-weight: 600; font-size: 12px; }
table.tabel td.uang, table.tabel th.uang { text-align: right; font-variant-numeric: tabular-nums; }
table.tabel img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; background: var(--panel-2); }
.gulir-x { overflow-x: auto; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.form-grid label, .bidang { font-size: 12px; color: var(--redup); display: grid; gap: 4px; }
.form-grid input, .form-grid select, .bidang input, .bidang select {
  width: 100%; min-width: 0; padding: 8px 10px; background: var(--panel-2); color: var(--teks);
  border: 1px solid var(--garis); border-radius: 8px; font-size: 14px;
}
.saran-kartu { position: relative; }
.saran-kartu ul {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--garis); border-radius: 8px; max-height: 280px; overflow-y: auto;
}
.saran-kartu li { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--teks); }
.saran-kartu li:hover { background: var(--panel); }
.saran-kartu li img { width: 28px; height: 39px; object-fit: cover; border-radius: 3px; }

.status { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.status.MENUNGGU_BAYAR { background: var(--kuning-lembut); color: #8A6100; }
.status.DIBAYAR { background: #DBEAFE; color: #1E40AF; }
.status.DIKIRIM { background: #EDE9FE; color: #5B21B6; }
.status.SELESAI { background: #DCFCE7; color: #166534; }
.status.DIBATALKAN, .status.KOMPLAIN { background: #FDE2E4; color: #B42318; }
.status.ISI_ALAMAT, .status.MENUNGGU_ONGKIR { background: var(--kuning-lembut); color: #8A6100; }
.status.DIKEMBALIKAN { background: #E5E7EB; color: #374151; }
.rincian-bayar { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 13px; margin-top: 10px; }
.rincian-bayar .total { font-weight: 800; border-top: 1px solid var(--garis); padding-top: 6px; }
.rincian-bayar > span:nth-child(even) { text-align: right; }
.baris-cair { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.form-pesanan { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.form-pesanan input, .form-pesanan select, .form-pesanan textarea {
  width: 100%; box-sizing: border-box; padding: 9px 10px; background: var(--panel); color: var(--teks); border: 1px solid var(--garis); border-radius: 8px; font: inherit;
}
.form-pesanan .lebar { grid-column: 1 / -1; }
.form-pesanan .centang, .centang { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.form-pesanan .centang input, .centang input { width: auto; margin-top: 2px; }
.isi-paket { margin-top: 8px; border-top: 1px solid var(--garis); }
.struk-kartu { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--garis); font-size: 13px; }
.struk-kartu img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex: none; }
.struk { margin-top: 10px; border: 1px solid var(--garis-emas); border-radius: 10px; font-size: 13px; }
.struk summary { cursor: pointer; padding: 9px 12px; font-weight: 700; }
.struk-isi { padding: 0 12px 12px; }
.struk-judul { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--redup, #a8a294); }
.foto-bukti { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.foto-bukti img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); }
.langkah { display: flex; gap: 4px; margin: 10px 0; }
.langkah span { flex: 1; height: 4px; border-radius: 2px; background: var(--garis); }
.langkah span.lewat { background: var(--kuning); }

.kartu-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kartu-ringkas div { background: var(--panel-2); border-radius: 10px; padding: 12px; }
.kartu-ringkas b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.kartu-ringkas span { font-size: 12px; color: var(--redup); }

.kanvas-centering { position: relative; width: 100%; max-width: 420px; margin: 0 auto; touch-action: none; user-select: none; }
.kanvas-centering img { width: 100%; display: block; border-radius: 6px; }
.kanvas-centering .garis-ukur { position: absolute; background: rgba(230, 57, 70, 0.9); }
.kanvas-centering .garis-ukur.v { width: 2px; top: 0; bottom: 0; cursor: ew-resize; }
.kanvas-centering .garis-ukur.h { height: 2px; left: 0; right: 0; cursor: ns-resize; }
.kanvas-centering .garis-ukur.dalam { background: rgba(34, 197, 94, 0.95); }
.kanvas-centering .garis-ukur::after { content: ""; position: absolute; inset: -10px; }
.kosong-unggah {
  border: 2px dashed var(--garis); border-radius: 12px; padding: 40px 16px; text-align: center; color: var(--redup); cursor: pointer;
}

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .cari { order: 2; max-width: none; }
  .feed-item { grid-template-columns: 52px 1fr; }
  .feed-item .angka { grid-column: 2; text-align: left; }
  .feed-item .tumpuk, .feed-item .tumpuk img { width: 52px; height: 72px; }
  .dua-kolom, .detail { grid-template-columns: 1fr; }
  .detail .gbr-besar { max-width: 260px; margin: 0 auto; }
  .indeks-nilai { font-size: 30px; }
  .rentang { margin-left: 0; }
  .topbar { padding: 10px 16px; }
}

/* --- Sentuhan tambahan --- */
.tombol, form.lapor button { letter-spacing: 0.3px; box-shadow: 0 8px 18px -10px rgba(232, 168, 0, 0.75); }
.tombol.sekunder, .tombol.bahaya { box-shadow: none; }
.tombol.sekunder:hover { border-color: var(--navy); }
.tombol:hover { filter: brightness(1.03); }
.kartu-mini { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.kartu-mini:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(11, 31, 68, 0.35); }
.kartu-mini .harga { color: var(--navy); }
.statistik b, .kartu-ringkas b { font-family: var(--serif); font-size: 22px; font-weight: 800; }
.statistik div, .kartu-ringkas div { border: 1px solid var(--garis); background: var(--panel-2); }
.label.contoh { border: 1px solid #F3DE94; }
.jejak { letter-spacing: 0.5px; }

/* Chat */
.avatar {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--emas-gradasi); color: var(--navy); font-family: var(--serif); font-weight: 800; font-size: 20px;
}
.gelembung-wadah {
  height: min(60vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 14px; margin-top: 12px; background: var(--bg); border: 1px solid var(--garis); border-radius: 12px;
}
.gelembung {
  max-width: 75%; padding: 9px 12px 6px; border-radius: 14px 14px 14px 4px;
  background: var(--panel-2); border: 1px solid var(--garis); white-space: pre-wrap; word-wrap: break-word; font-size: 14px;
}
.gelembung.saya {
  align-self: flex-end; border-radius: 14px 14px 4px 14px;
  background: var(--kuning-lembut); border-color: #F3DE94;
}
.gelembung span { display: block; text-align: right; font-size: 10px; color: var(--redup); margin-top: 3px; }
/* Peringatan ajakan pindah ke luar Kartix (DM/WA/FB): pesan tetap terkirim, hanya diingatkan */
.peringatan-keluar { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: #FFF4D6; color: #6B4A00; border: 1px solid #F2C94C; }
.peringatan-keluar.kecil { margin-top: 6px; padding: 6px 8px; font-size: 11.5px; }
html[data-mode="gelap"] .peringatan-keluar { background: #3A2E0E; color: #FFE08A; border-color: #8A6A12; }

/* Keranjang */
.baris-keranjang { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.baris-keranjang img { width: 44px; height: 61px; object-fit: cover; border-radius: 4px; background: var(--panel); }
.baris-keranjang .i-jml {
  width: 64px; padding: 6px 8px; background: var(--panel); color: var(--teks); border: 1px solid var(--garis); border-radius: 8px;
}

@media (max-width: 760px) {
  .logo-teks { font-size: 22px; letter-spacing: 3px; }
  .indeks-nilai { font-size: 42px; }
  .ikon-kanan { order: 1; margin-left: auto; }
  .gelembung { max-width: 88%; }
}
.lencana[hidden] { display: none; }

/* Binder */
.bar-progres { height: 4px; border-radius: 2px; background: var(--garis); margin-top: 6px; overflow: hidden; }
.bar-progres.besar { height: 8px; margin-top: 14px; }
.bar-progres span { display: block; height: 100%; background: var(--emas-gradasi); }
.binder {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px;
  background: #fff; border: 1px solid var(--garis); border-radius: 16px; box-shadow: inset 0 0 0 6px var(--panel-2);
}
@media (min-width: 900px) { .binder { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kantong { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.kantong .gbr {
  position: relative; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
  background: var(--panel-2); border: 1px dashed #C7D2E3; color: var(--redup); text-align: center; padding: 0;
}
.kantong .gbr img { width: 100%; height: 100%; object-fit: cover; }
.kantong.kosong-kantong .gbr img { filter: grayscale(1) opacity(0.35); }
.kantong.ada .gbr { border: 1px solid var(--garis-emas); box-shadow: 0 8px 20px -12px rgba(11, 31, 68, 0.4); }
.kantong.langka.ada .gbr { border-color: var(--kuning-tua); }
.kantong .centang {
  position: absolute; top: 6px; right: 6px; background: var(--kuning); color: var(--navy);
  font-weight: 800; font-size: 11px; border-radius: 999px; padding: 2px 7px;
}
.kantong .ket { color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kantong .ket b { color: var(--teks); }
.kantong .tawaran { color: var(--ungu); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kantong .tombol { padding: 5px 8px; font-size: 12px; }

/* Header di layar sedang: menu turun ke baris kedua supaya tidak meluber */
@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .akun { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
}

/* Live */
@keyframes kedip { 50% { opacity: 0.35; } }
.titik-live, .menu-live::before {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #ef4444;
  margin-right: 6px; vertical-align: middle; animation: kedip 1.4s infinite;
}
.menu-live::before { content: ""; }
.lencana-live {
  position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; padding: 3px 8px; border-radius: 4px;
}
.lencana-live.statis { position: static; }
.grid-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kotak-live .sampul {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--garis);
}
.kotak-live .sampul img { width: 100%; height: 100%; object-fit: cover; }
.kotak-live:hover .sampul { border-color: var(--emas); }
.kotak-live .penonton {
  position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.7); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
}
.kotak-live .judul { font-weight: 600; margin-top: 8px; }
.kotak-live .sub { font-size: 12px; color: var(--redup); }
.ruang-live { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.layar {
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--navy); border: 1px solid var(--garis);
}
.layar iframe { width: 100%; height: 100%; border: 0; display: block; }
.layar-kosong { height: 100%; display: grid; place-items: center; text-align: center; padding: 20px;
  color: #fff; background: radial-gradient(circle at 50% 30%, rgba(255, 198, 41, 0.22), transparent 60%), var(--navy); }
.sorotan { border-color: var(--kuning-tua); position: sticky; top: 130px; }
.sorotan-isi { display: grid; grid-template-columns: 120px 1fr; gap: 14px; margin-top: 10px; align-items: center; }
.sorotan-isi img { width: 120px; border-radius: 8px; box-shadow: 0 12px 30px -10px rgba(11, 31, 68, 0.45); }
.chat-live { height: 300px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.chat-live b { color: var(--redup); font-weight: 600; }
.chat-live b.tuan { color: var(--ungu); }
.chat-sistem { background: var(--kuning-lembut); border: 1px solid #F3DE94; color: var(--navy); border-radius: 8px; padding: 5px 9px; }
.baris-keranjang.disorot { background: #FFF8E1; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
@media (max-width: 900px) {
  .ruang-live { grid-template-columns: 1fr; }
  .sorotan { position: static; }
}
.untung-rugi { margin-top: 8px; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--garis); background: var(--panel-2); }

/* Kemasan produk sealed */
.kemasan {
  position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, #1E4590, #0B1F44 70%); border: 1px solid rgba(11, 31, 68, 0.3);
}
.kemasan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0.55; }
.kemasan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,68,0.05) 30%, rgba(11,31,68,0.92) 90%); }
.kemasan.booster-box { box-shadow: inset 0 0 0 3px rgba(255, 198, 41, 0.6); }
.kemasan.booster-pack { border-radius: 14px 14px 6px 6px; }
/* Foto kemasan resmi: pack utuh di tengah, booster box = tiga pack berjajar */
.kemasan.berfoto { background: radial-gradient(circle at 50% 38%, #24509E 0%, #0B1F44 72%); }
.kemasan.berfoto img { inset: 5% 16% 33%; width: auto; height: auto; max-width: 66%; max-height: 62%; margin: auto;
  object-fit: contain; opacity: 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.kemasan.berfoto img.pack-belakang { opacity: .9; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)) brightness(.8); }
.kemasan.berfoto img.pack-belakang.kiri { transform: translateX(-30%) rotate(-12deg) scale(.86); }
.kemasan.berfoto img.pack-belakang.kanan { transform: translateX(30%) rotate(12deg) scale(.86); }
.kemasan.berfoto::after { background: linear-gradient(180deg, transparent 62%, rgba(11, 31, 68, 0.9) 82%); }
.kemasan.berfoto .kemasan-nama { font-size: 14px; overflow-wrap: normal; }
.gbr-besar .kemasan.berfoto .kemasan-nama { font-size: 28px; }
.thumb-kemasan .kemasan.berfoto .kemasan-nama { font-size: 8px; }
.gambar-hadiah .kemasan.berfoto .kemasan-nama { font-size: 13px; }
.kemasan-isi { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px; text-align: left; display: grid; gap: 2px; }
.kemasan-jenis { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--kuning); }
.kemasan-nama { font-family: var(--serif); font-weight: 800; font-size: 16px; line-height: 1.1; color: #fff; }
.gbr-besar .kemasan-nama { font-size: 28px; }
.gbr-besar .kemasan-jenis { font-size: 13px; }
.menu a { white-space: nowrap; }
.menu { scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.kemasan-nama { overflow-wrap: anywhere; }

/* Saran binder per Pokémon */
.chip-pokemon {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--garis); background: #fff; color: var(--teks);
}
.chip-pokemon span { color: var(--redup); font-size: 11px; }
.chip-pokemon:hover { border-color: var(--kuning-tua); background: var(--kuning-lembut); }

/* ============ Pemantauan ala aplikasi saham ============ */

/* Pita berjalan */
.ticker {
  overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--garis);
  background: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.t-jalur { display: inline-flex; animation: jalan 60s linear infinite; }
.ticker:hover .t-jalur { animation-play-state: paused; }
@keyframes jalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .t-jalur { animation: none; } .ticker { overflow-x: auto; } }
.t-item { display: inline-flex; gap: 6px; align-items: center; padding: 7px 18px; border-right: 1px solid var(--garis); }
.t-item b { color: var(--teks); font-weight: 600; }
.t-item i { color: var(--redup); font-size: 10px; }
.t-item:hover { background: var(--panel); }

/* Tombol pantau ☆ */
.bintang {
  border: 1px solid var(--garis); background: rgba(255, 255, 255, 0.92); color: var(--kuning-tua);
  border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.bintang.aktif { background: var(--kuning); color: var(--navy); border-color: var(--kuning-tua); }
.bintang.besar { font-size: 16px; padding: 8px 14px; font-weight: 700; }
.bintang.besar span { font-size: 13px; }
.kartu-mini .gbr { position: relative; }
.kartu-mini .gbr .bintang { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 5px 7px; font-size: 13px; }

/* Notifikasi kecil */
.kabar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--navy); border: 0; color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; transition: all 0.25s ease; pointer-events: none;
}
.kabar.tampil { opacity: 1; transform: translate(-50%, 0); }

/* Strip statistik ala halaman saham */
.strip-saham { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.strip-saham div { background: var(--panel); padding: 10px 12px; display: grid; gap: 2px; }
.strip-saham span { font-size: 11px; color: var(--redup); text-transform: uppercase; letter-spacing: 0.8px; }
.strip-saham b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* Tabel watchlist */
.tabel-pantau { display: grid; }
.baris-pantau {
  display: grid; grid-template-columns: minmax(200px, 2.2fr) 1fr 0.8fr 0.8fr 120px minmax(190px, 1.3fr) 40px;
  gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--garis); font-variant-numeric: tabular-nums;
}
.baris-pantau.kepala { font-size: 11px; color: var(--redup); text-transform: uppercase; letter-spacing: 0.8px; padding-top: 0; }
.baris-pantau.tercapai { background: rgba(74, 222, 128, 0.06); }
.bp-kartu { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.bp-kartu img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; }
.bp-ikon { width: 40px; height: 56px; display: grid; place-items: center; background: var(--panel-2); border-radius: 4px; font-size: 20px; }
.bp-harga { font-weight: 700; }
.spark { display: block; }
form.alarm { display: flex; gap: 4px; }
form.alarm select, form.alarm input {
  padding: 6px; background: var(--panel-2); color: var(--teks); border: 1px solid var(--garis); border-radius: 6px; font-size: 13px; min-width: 0;
}
form.alarm input { width: 100%; }
form.alarm .tombol { padding: 6px 10px; font-size: 12px; }

/* Navigasi bawah & lembar menu (HP) */
.nav-bawah, .lembar-lainnya { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: 68px; font-size: 15px; }
  .menu { display: none; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .cari { order: 5; flex-basis: 100%; }
  .ikon-kanan { margin-left: auto; }
  .ikon-kanan .ikon:not(.ikon-mode):not(.ikon-lonceng) { display: none; }
  .peringatan { font-size: 11px; padding: 5px 12px; }
  main { padding: 16px 12px 32px; }
  .panel { padding: 16px; border-radius: 12px; }
  h1 { font-size: 28px !important; }
  .tombol { padding: 10px 14px; }

  .nav-bawah {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); border-top: 1px solid var(--garis); box-shadow: 0 -8px 24px -18px rgba(11, 31, 68, 0.45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-bawah a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 0 9px; font-size: 11px; color: var(--redup); }
  .nav-bawah a span { display: grid; place-items: center; }
  .nav-bawah .ik { width: 23px; height: 23px; }
  .nav-bawah a.aktif { color: var(--navy); font-weight: 700; }
  .nav-bawah a.aktif .ik { color: var(--navy); stroke-width: 2.2; }
  .nav-bawah a.aktif::before {
    content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--kuning);
  }

  .lembar-lainnya:not([hidden]) {
    display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.6);
  }
  .lembar-isi {
    width: 100%; background: var(--panel); border-top: 3px solid var(--kuning); border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
  .grid-menu a { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 12px; background: var(--panel-2); font-size: 12px; }
  .grid-menu a { gap: 8px; color: var(--teks, #ece8df); text-align: center; line-height: 1.25; align-content: start; }
  .grid-menu a span {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--navy);
    background: var(--kuning-lembut); border: 1px solid #F3DE94;
  }
  .grid-menu .ik { width: 22px; height: 22px; }

  .kabar { bottom: 84px; }
  .strip-saham { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Watchlist jadi kartu di HP */
  .baris-pantau.kepala { display: none; }
  .baris-pantau {
    grid-template-columns: 1fr auto; grid-template-areas: "kartu harga" "ubah7 spark" "ubah30 spark" "alarm bintang";
    gap: 6px 10px; padding: 12px 4px;
  }
  .bp-kartu { grid-area: kartu; }
  .bp-harga { grid-area: harga; text-align: right; }
  .baris-pantau > [data-label="7H"] { grid-area: ubah7; font-size: 13px; }
  .baris-pantau > [data-label="30H"] { grid-area: ubah30; font-size: 13px; }
  .baris-pantau > [data-label]::before { content: attr(data-label) " "; color: var(--redup); font-size: 11px; }
  .bp-spark { grid-area: spark; justify-self: end; }
  form.alarm { grid-area: alarm; }
  .baris-pantau > .bintang { grid-area: bintang; }
}
@media (max-width: 760px) {
  .kartu-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .kartu-ringkas b { font-size: 17px; overflow-wrap: anywhere; }
  .kartu-ringkas div { padding: 8px; }
  .kartu-ringkas b { font-size: 18px; }
  .kartu-ringkas span { font-size: 10.5px; line-height: 1.25; display: block; }
}
@media (max-width: 760px) {
  .baris-pantau > .bintang { justify-self: end; align-self: center; }
}

/* Lelang */
.grid-lelang { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.kotak-lelang { background: var(--panel); border: 1px solid var(--garis); border-radius: 12px; padding: 8px; display: block; }
.kotak-lelang:hover { border-color: var(--kuning-tua); }
.kotak-lelang .gbr { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.kotak-lelang .gbr img { width: 100%; height: 100%; object-fit: cover; }
.kotak-lelang .nama { font-weight: 600; font-size: 13px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kotak-lelang .sub { font-size: 11.5px; color: var(--redup); }
.harga-lelang { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.sisa-waktu {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; background: var(--navy); border: 0;
  color: var(--kuning); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.sisa-waktu.mendesak { background: var(--merah); color: #fff; }
.sisa-besar b.mendesak { color: var(--merah); }
.sisa-besar { font-size: 15px; font-variant-numeric: tabular-nums; }
.form-tawar { margin-top: 14px; }
.form-tawar input {
  flex: 1; min-width: 0; padding: 11px 12px; background: var(--panel-2); color: var(--teks); border: 1px solid var(--garis-emas);
  border-radius: 10px; font-size: 16px; font-variant-numeric: tabular-nums;
}
.form-tawar .tombol.sekunder { flex: 1; font-size: 13px; }

/* Tab di halaman kartu */
.tab-kartu { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.tab-kartu button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--redup); padding: 10px 14px; cursor: pointer;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.tab-kartu button span { font-size: 11px; background: var(--panel-2); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.tab-kartu button.aktif { color: var(--navy); border-bottom-color: var(--kuning); }
@media (max-width: 760px) { .grid-lelang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Verifikasi laporan (admin) */
.verif-isi { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
.verif-bukti img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--garis); }
.kotak-verifikasi.curiga { border-color: var(--merah); }
@media (max-width: 760px) { .verif-isi { grid-template-columns: 1fr; } }

/* Gambar kecil di daftar (kartu & produk sealed) */
.thumb { display: inline-block; flex: none; width: 40px; height: 56px; border-radius: 4px; background: var(--panel-2); overflow: hidden; vertical-align: middle; }
.thumb-kemasan .kemasan { border-radius: 4px; }
.thumb-kemasan .kemasan-isi { padding: 3px; }
.thumb-kemasan .kemasan-jenis { font-size: 6px; letter-spacing: 0.5px; }
.thumb-kemasan .kemasan-nama { font-size: 8px; }
.daftar-gerak .thumb { width: 40px; height: 56px; }
table.tabel .thumb { margin-right: 8px; }
.baris-keranjang .thumb { width: 44px; height: 61px; }

/* Membership */
.kartu-member {
  border-color: var(--warna-tier);
  background: radial-gradient(600px 200px at 0% 0%, color-mix(in srgb, var(--warna-tier) 18%, transparent), transparent 70%), var(--panel);
}
.nama-tier { font-family: var(--serif); font-size: 44px; font-weight: 900; font-style: italic; color: var(--warna-tier); line-height: 1.05; }
.lencana-pro { background: var(--ungu); color: #fff; padding: 1px 8px; border-radius: 4px; font-weight: 800; letter-spacing: 1px; }
.daftar-manfaat { padding-left: 18px; margin: 12px 0; line-height: 1.9; font-size: 14px; }
.grid-hadiah { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kotak-hadiah { background: var(--panel-2); border: 1px solid var(--garis-emas); border-radius: 12px; padding: 14px; display: grid; gap: 6px; text-align: center; }
.kotak-hadiah.kurang { border-color: var(--garis); opacity: 0.8; }
.kotak-hadiah .ikon-hadiah { font-size: 34px; }
.kotak-hadiah .nama { font-weight: 600; font-size: 14px; min-height: 38px; }
@media (max-width: 760px) {
  .nama-tier { font-size: 38px; }
  .grid-hadiah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gambar-hadiah {
  display: grid; place-items: center; width: 100%; max-width: 130px; aspect-ratio: 63 / 88; margin: 0 auto 4px;
  border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255, 198, 41, 0.28), transparent 70%), var(--panel-2);
  border: 1px solid var(--garis-emas);
}
.gambar-hadiah .kemasan { border: 0; }
.gambar-hadiah { position: relative; }
.grid-lelang-energi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.kotak-lelang-energi { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px;
  border: 1px solid var(--garis-emas); border-radius: 14px; background: var(--panel-2); }
.kotak-lelang-energi .gambar-hadiah { max-width: 120px; margin: 0; }
.kotak-lelang-energi.selesai { opacity: .85; border-color: var(--garis); }
@media (max-width: 760px) { .grid-lelang-energi { grid-template-columns: 1fr; } .kotak-lelang-energi { grid-template-columns: 96px minmax(0, 1fr); } }
.jumlah-hadiah { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 9px; border-radius: 999px; background: var(--merah); color: #fff;
  font: 900 14px var(--serif); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.gambar-hadiah > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gambar-hadiah .ikon-hadiah { font-size: 46px; }
.gambar-hadiah .kemasan-nama { font-size: 13px; overflow-wrap: normal; word-break: keep-all; }
.gambar-hadiah .kemasan-jenis { font-size: 9px; }

/* Grading lokal & populasi */
.grid-grader { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kotak-grader { background: var(--panel-2); border: 1px solid var(--garis); border-radius: 12px; padding: 14px; }
.kotak-grader.lokal { border-color: var(--garis-emas); background: linear-gradient(160deg, rgba(255, 198, 41, 0.18), transparent 60%), var(--panel-2); }
.distribusi { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 12px; }
.distribusi .batang { flex: 1; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; height: 100%; font-variant-numeric: tabular-nums; }
.distribusi .batang span { width: 100%; align-self: end; min-height: 3px; background: var(--emas-gradasi); border-radius: 3px 3px 0 0; }
.distribusi .batang small { font-size: 10px; color: var(--redup); }
.distribusi .batang em { font-size: 10px; font-style: normal; }
.bendera {
  display: inline-block; width: 16px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 2px;
  background: linear-gradient(#e11d2a 50%, #fff 50%); box-shadow: 0 0 0 1px rgba(11, 31, 68, 0.2);
}

/* Uji coba: fitur berbayar disembunyikan, program penguji, tombol Masukan */
html:not(.uji) [data-uji-saja], html:not(.uji) .hanya-uji { display: none !important; }
.pita-simulasi { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #EDE9FE; color: #4C1D95; border: 1px solid #D8CCFB; font-size: 13px; line-height: 1.5; }
.peringatan a { color: var(--ungu); font-weight: 600; }
.menu .menu-uji { color: var(--kuning); }
.menu .menu-admin { color: var(--kuning); }
[data-admin-saja][hidden] { display: none !important; }   /* menu Admin hanya untuk admin/moderator */
.daftar-hadiah { display: grid; gap: 10px; }
.daftar-hadiah div { background: var(--panel-2); border-radius: 10px; padding: 12px; display: grid; gap: 4px; }
.daftar-hadiah span { font-size: 13px; color: var(--redup); }
.papan-teratas { margin: 0; padding: 0; list-style: none; counter-reset: urut; display: grid; }
.papan-teratas li { counter-increment: urut; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.papan-teratas li::before { content: counter(urut) "."; color: var(--redup); min-width: 22px; font-variant-numeric: tabular-nums; }
.papan-teratas li > span { flex: 1; min-width: 0; }
.papan-teratas li b { font-variant-numeric: tabular-nums; color: var(--navy); }
.lencana-pendiri { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; padding: 2px 8px; border-radius: 999px;
  background: var(--kuning-lembut); color: #8A6100; border: 1px solid #F3DE94; }
.tombol-masukan {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 20px; z-index: 35;
  font: 600 13px var(--sans); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; border: 2px solid var(--kuning); box-shadow: 0 10px 24px -10px rgba(11, 31, 68, 0.6);
}
.tombol-masukan:hover, .tombol-masukan:focus-visible { background: var(--navy-2); outline: none; }
.lembar-masukan:not([hidden]) {
  display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 45;
  background: rgba(0, 0, 0, 0.6); padding: 16px;
}
.lembar-masukan-isi {
  width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--garis-emas); border-radius: 16px; padding: 18px;
}
.form-grid textarea {
  width: 100%; min-width: 0; padding: 8px 10px; background: var(--panel-2); color: var(--teks);
  border: 1px solid var(--garis); border-radius: 8px; font: 14px/1.5 var(--sans); resize: vertical;
}
.tab-akun { margin-bottom: 14px; }
@media (max-width: 760px) {
  .tombol-masukan { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px 13px; font-size: 12px; }
  .lembar-masukan:not([hidden]) { align-items: flex-end; padding: 0; }
  .lembar-masukan-isi { border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

[hidden] { display: none !important; }
.target-uji { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.target-uji > div { background: var(--panel-2); border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.target-uji span { font-size: 12px; color: var(--redup); }
.target-uji b { font-size: 26px; font-variant-numeric: tabular-nums; }
.target-uji b small { font-size: 14px; color: var(--redup); font-weight: 500; }
.bar-target { position: relative; height: 8px; border-radius: 4px; background: var(--garis); }
.bar-target i { display: block; height: 100%; border-radius: 4px; background: var(--emas-gradasi); }
.bar-target em { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--teks); opacity: 0.6; }
.grafik-harian { display: flex; align-items: flex-end; gap: 3px; height: 80px; margin-top: 14px; }
.grafik-harian div { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.grafik-harian i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--navy); }
.tanda-terkait { margin-top: 6px; font-size: 12px; line-height: 1.5; padding: 6px 10px; border-radius: 8px;
  background: var(--kuning-lembut); color: #8A6100; border: 1px solid #F3DE94; }
.tanda-terkait.coret { background: #FDE2E4; color: #B42318; border-color: #F9C5CB; }
.tombol.kecil { padding: 5px 10px; font-size: 12px; }
.papan-teratas li .tombol { margin-left: 8px; align-self: center; }
.riwayat-admin { display: grid; gap: 6px; font-size: 13px; max-height: 360px; overflow-y: auto; }
.riwayat-admin div { padding: 6px 0; border-bottom: 1px solid var(--garis); }
.riwayat-admin div > span:first-child { display: block; font-size: 11px; }
.aturan-nilai { display: grid; gap: 14px; }
.aturan-nilai h3 { margin: 0 0 6px; font-size: 15px; }
.aturan-nilai ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--redup); }

/* ---------- Beranda versi hidup: online, banner geser, kategori, deret geser ---------- */
.online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--redup); padding: 4px 10px;
  border: 1px solid var(--garis); border-radius: 999px; background: var(--panel-2); }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: denyut 2s infinite; }
.online b { color: var(--teks); }
@keyframes denyut { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .online i { animation: none; } }

.banner-geser { margin: 0 0 16px; }
.banner-jalur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; scrollbar-width: none; }
.banner-jalur::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; gap: 16px; min-height: 168px;
  padding: 22px 24px; box-sizing: border-box; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(115deg, transparent 62%, rgba(255, 198, 41, .95) 62.2%, #FFC629 74%, transparent 74.2%),
    radial-gradient(420px 220px at 85% 50%, rgba(108, 58, 237, .35), transparent 70%), linear-gradient(135deg, #16346E, #0B1F44 70%);
  border: 0; border-radius: 16px; }
.slide-isi { display: grid; gap: 6px; max-width: 62%; position: relative; z-index: 1; }
.slide-isi b { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: 25px; line-height: 1.1; }
.slide-isi span { font-size: 14px; color: rgba(255, 255, 255, .82); }
.slide-isi em { font-style: normal; font-weight: 800; color: var(--kuning); font-size: 14px; margin-top: 4px; font-family: var(--serif); }
.slide img { position: absolute; right: 18px; top: 50%; width: 112px; transform: translateY(-50%) rotate(6deg); border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.banner-titik { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.banner-titik button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--garis); cursor: pointer; transition: width .2s; }
.banner-titik button.aktif { width: 22px; background: var(--kuning-tua); }

.kategori { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.kategori a { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--garis); text-decoration: none; color: var(--teks); font-size: 13px; font-weight: 600; text-align: center; }
.kategori a:hover { border-color: var(--kuning-tua); transform: translateY(-2px); }
.kategori a { transition: transform .2s ease, border-color .2s ease; }
/* Ikon kategori: ubin gradasi berwarna (palet Kartix) dengan ikon putih, jelas di mode terang & gelap */
.kategori span { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -8px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s ease; }
.kategori span::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%); pointer-events: none; }
.kategori .ik-ilustrasi { width: 36px; height: 36px; position: relative; z-index: 1; overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(11, 31, 68, .25)); }
.kategori a:hover span { transform: translateY(-2px) rotate(-4deg); }
.kategori .ik-pasar { --c1: #FFE07A; --c2: #F2B000; }
.kategori .ik-trade { --c1: #9F7AFA; --c2: #6C3AED; }
.kategori .ik-grading { --c1: #60A5FA; --c2: #2563EB; }
.kategori .ik-sealed { --c1: #FF7A85; --c2: #E63946; }
.kategori .ik-indeks { --c1: #34D399; --c2: #16A34A; }
.kategori .ik-panduan { --c1: #3B6FD0; --c2: #16346E; box-shadow: 0 8px 18px -8px #16346E, inset 0 0 0 1.5px rgba(255, 198, 41, .55); }
@media (prefers-reduced-motion: reduce) { .kategori span, .kategori a { transition: none; } .kategori a:hover span { transform: none; } }

.deret { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 180px); gap: 12px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(11, 31, 68, .25) transparent; }
.deret::-webkit-scrollbar { height: 6px; }
.deret::-webkit-scrollbar-track { background: transparent; }
.deret::-webkit-scrollbar-thumb { background: rgba(11, 31, 68, .25); border-radius: 999px; }
.deret > * { scroll-snap-align: start; }

@media (max-width: 760px) {
  .kategori { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slide { min-height: 150px; padding: 18px; }
  .slide-isi { max-width: 66%; }
  .slide-isi b { font-size: 21px; }
  .slide-isi span { font-size: 13px; }
  .slide img { width: 88px; right: 12px; }
  .deret { grid-auto-columns: minmax(140px, 46%); }
}

/* ---------- Tixi, maskot Kartix ---------- */
.panel-indeks { position: relative; }
.maskot-hero { position: absolute; right: 26px; top: 20px; width: 118px; height: auto; pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(11, 31, 68, .22)); animation: melayang 4s ease-in-out infinite; }
.panel-indeks:has(.maskot-hero) .online { margin-right: 130px; }
@keyframes melayang { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .maskot-hero { animation: none; } }
.kosong-maskot { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 12px; color: var(--teks); }
.kosong-maskot .maskot { width: 104px; height: auto; }
.kosong-maskot h2 { margin: 4px 0 0; }
@media (max-width: 760px) {
  .maskot-hero { width: 76px; right: 14px; top: 12px; }
  .panel-indeks:has(.maskot-hero) .online { margin-right: 76px; }
  .panel-indeks:has(.maskot-hero) h1 { padding-right: 70px; }
}

/* Portofolio galeri */
.alat-porto { gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.alat-porto select { padding: 8px 12px; background: var(--panel-2); color: var(--teks); border: 1px solid var(--garis); border-radius: 999px; font: inherit; font-size: 13px; }
.galeri-porto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kartu-porto { background: var(--panel-2); border: 1px solid var(--garis); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.kartu-porto .gbr { display: block; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: var(--panel); margin-bottom: 8px; }
.kartu-porto .gbr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kartu-porto .nama { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-porto b { font-variant-numeric: tabular-nums; }
.jml-porto { display: flex; align-items: center; gap: 6px; flex: none; }
.jml-porto button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--garis); background: var(--panel); color: var(--teks); font: inherit; line-height: 1; cursor: pointer; }
.jml-porto span { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.wts-porto { margin-top: 8px; padding: 7px 10px; font-size: 13px; }

/* Reputasi penjual & ulasan */
.lencana-penjual { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--teks); }
.feed-item .sub.reputasi { color: var(--ungu); }
.label.lencana { background: #EDE9FE; color: var(--ungu); }
.ulasan { padding: 10px 0; border-bottom: 1px solid var(--garis); font-size: 13px; }
.bintang-isi { color: var(--kuning-tua); letter-spacing: 2px; }
.pilih-bintang { display: flex; gap: 4px; }
.pilih-bintang button { background: none; border: 0; padding: 0 2px; font-size: 28px; line-height: 1; cursor: pointer; color: var(--garis); }
.pilih-bintang button.aktif { color: var(--kuning-tua); }
.kartu-ringkas.angka-sans b { font-family: var(--sans); }

/* Verifikasi Facebook */
.verif-fb { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--garis-emas); border-radius: 12px; font-size: 13px; }
.verif-fb ol { margin: 0 0 6px; padding-left: 18px; line-height: 1.6; }
.kode-fb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.kode-fb code, .kode-besar { padding: 6px 10px; background: var(--panel-2); border: 1px dashed var(--garis-emas); border-radius: 8px; font-weight: 700; color: var(--emas); }
.kode-fb .tombol { padding: 6px 12px; }
.centang-fb { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1877f2; color: #fff; font-size: 11px; font-weight: 800; }

/* Tawar-menawar */
.riwayat-tawar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tgl-tawar { align-self: center; font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--panel); color: var(--redup); }
.gelembung { align-self: flex-start; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel); border: 1px solid var(--garis); font-size: 13px; line-height: 1.45; }
.gelembung.kanan { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #E8F8EE; border-color: #BBE8CC; }
.gelembung .jam { display: block; text-align: right; font-size: 11px; color: var(--redup); margin-top: 2px; }
.form-tawar { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--garis-emas); border-radius: 12px; }
.tawar-baru input { flex: 1; min-width: 160px; padding: 9px 10px; background: var(--panel); color: var(--teks); border: 1px solid var(--garis); border-radius: 8px; font: inherit; }

/* Tawar beberapa kartu sekaligus di halaman listing */
.bar-tawar { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--garis); border-radius: 12px; display: grid; gap: 8px; font-size: 13px; }
.bar-tawar.aktif { border-color: var(--kuning-tua); background: #FFF8E1; }
.bar-tawar input { flex: 1; min-width: 160px; padding: 9px 10px; background: var(--panel); color: var(--teks); border: 1px solid var(--garis); border-radius: 8px; font: inherit; }
.pilih-item { width: 18px; height: 18px; accent-color: var(--navy); }
.feed-item .sub.cocok-koleksi { color: #16A34A; font-weight: 600; }
.tawar-lipat { margin-top: 10px; font-size: 13px; }
.tawar-lipat summary { cursor: pointer; color: var(--emas); font-weight: 600; }

/* ---------- Kartix 2.0: sentuhan khusus ---------- */
.t-item:hover { background: var(--panel-2); }
.panel-indeks:has(.maskot-hero) {
  color: #fff; border: 0;
  background: linear-gradient(118deg, transparent 66%, rgba(255, 198, 41, .95) 66.2%, #FFC629 80%, transparent 80.2%),
    radial-gradient(520px 260px at 90% 20%, rgba(108, 58, 237, .35), transparent 70%), linear-gradient(135deg, #16346E, #0B1F44 65%);
  box-shadow: 0 18px 40px -22px rgba(11, 31, 68, .7);
}
.panel-indeks:has(.maskot-hero) .indeks-nama { color: var(--kuning); }
.panel-indeks:has(.maskot-hero) .redup { color: rgba(255, 255, 255, .78); }
.panel-indeks:has(.maskot-hero) h1 { color: #fff; font-style: italic; font-weight: 900; }
.panel-indeks:has(.maskot-hero) .online { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); }
.panel-indeks:has(.maskot-hero) .online b { color: #fff; }
.panel-indeks:has(.maskot-hero) a:not(.tombol) { color: var(--kuning); }
.panel-indeks:has(.maskot-hero) .tombol.sekunder { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.panel-indeks:has(.maskot-hero) input { background: #fff; color: var(--navy); }
.panel-indeks:has(.maskot-hero) .label { background: rgba(255, 255, 255, .12); color: #fff; }
.logo { color: #fff; }
.lembar-isi .logo-teks { color: var(--navy); }
input, select, textarea { accent-color: var(--navy); }

/* ---------- Beranda ala mockup: hero navy + kartu miring + strip kepercayaan ---------- */
.hero-kartix {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  margin: 0 0 18px; border-radius: 22px; color: #fff; min-height: 380px;
  background:
    linear-gradient(118deg, transparent 63%, #FFC629 63.2%, #FFC629 72%, transparent 72.2%),
    linear-gradient(118deg, transparent 75%, rgba(255, 198, 41, .55) 75.2%, rgba(255, 198, 41, .55) 79%, transparent 79.2%),
    radial-gradient(560px 300px at 92% 18%, rgba(108, 58, 237, .38), transparent 70%),
    linear-gradient(135deg, #16346E, #0B1F44 62%);
  box-shadow: 0 24px 50px -26px rgba(11, 31, 68, .8);
}
.hero-isi { position: relative; z-index: 2; padding: 38px 0 92px 40px; display: grid; align-content: start; gap: 12px; }
.hero-kartix h1 { font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic; font-size: 46px !important; line-height: 1.04; letter-spacing: -0.8px; color: #fff; margin: 4px 0 0; }
.hero-kartix h1 em { color: var(--kuning); font-style: italic; }
.hero-isi > p { margin: 0; max-width: 520px; color: rgba(255, 255, 255, .82); font-size: 15px; }
.hero-cari { display: flex; gap: 8px; max-width: 540px; margin-top: 6px; }
.hero-cari input { flex: 1; min-width: 0; padding: 14px 18px; font-size: 15px; background: #fff; color: var(--navy); border: 0; border-radius: 999px; outline: none; font-family: var(--sans); }
.hero-cari input:focus { box-shadow: 0 0 0 4px rgba(255, 198, 41, .45); }
.hero-cari .tombol { border-radius: 999px; padding: 12px 22px; }
.chip-hero { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.chip-hero:hover { background: rgba(255, 255, 255, .2); }
.hero-mulai { justify-self: start; margin-top: 8px; border-radius: 999px; padding: 12px 24px; font-size: 15px; }
.hero-mulai span { margin-left: 6px; }
.hero-kartix .online { justify-self: start; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .85); }
.hero-kartix .online b { color: #fff; }
.hero-kartu { position: relative; z-index: 1; min-height: 300px; }
.hero-kartu img[class^="kartu-"] { position: absolute; width: 168px; border-radius: 12px; box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .6); border: 3px solid #fff; }
.hero-kartu .kartu-0 { right: 150px; top: 46px; transform: rotate(-11deg); }
.hero-kartu .kartu-1 { right: 40px; top: 30px; transform: rotate(9deg); }
.hero-kartix .maskot-hero { position: absolute; right: 10px; top: auto; bottom: 64px; width: 110px; z-index: 3; }
.hero-percaya {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 0;
  background: rgba(6, 18, 42, .72); backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, .1);
}
.hero-percaya span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; font-size: 13px; font-weight: 700; font-family: "Montserrat", sans-serif; }
.hero-percaya span + span { border-left: 1px solid rgba(255, 255, 255, .18); }
.hero-percaya .ik { width: 20px; height: 20px; color: var(--kuning); }
.statistik-beranda { margin: 0 0 18px; }
.statistik-beranda div { background: #fff; }
@media (max-width: 760px) {
  .hero-kartix { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }
  .hero-isi { padding: 24px 18px 20px; }
  .hero-kartix h1 { font-size: 32px !important; padding-right: 64px; }
  .hero-cari { flex-direction: column; }
  .hero-cari .tombol { width: 100%; }
  .hero-kartu { min-height: 0; position: absolute; inset: 0; pointer-events: none; }
  .hero-kartu img[class^="kartu-"] { display: none; }
  .hero-kartix .maskot-hero { width: 70px; right: 12px; top: 16px; bottom: auto; }
  .hero-percaya { position: static; grid-column: 1; }
  .hero-percaya span { font-size: 11px; padding: 11px 4px; gap: 5px; flex-direction: column; text-align: center; }
  .hero-mulai { justify-self: stretch; text-align: center; }
}

/* ===== Mode gelap: timpa warna keras yang dibuat untuk latar terang ===== */
html[data-mode="gelap"] body {
  background:
    radial-gradient(900px 380px at 100% -120px, rgba(255, 198, 41, 0.08), transparent 70%),
    radial-gradient(700px 320px at 0% -80px, rgba(108, 58, 237, 0.14), transparent 70%),
    var(--bg);
}
html[data-mode="gelap"] .topbar { background: rgba(5, 13, 31, 0.96); }
html[data-mode="gelap"] .tombol.sekunder,
html[data-mode="gelap"] .statistik-beranda div { background: var(--panel); color: var(--teks); }
html[data-mode="gelap"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-mode="gelap"] select, html[data-mode="gelap"] textarea { background: var(--input); color: var(--teks); border-color: var(--garis); }
html[data-mode="gelap"] .baris-keranjang.disorot, html[data-mode="gelap"] .bar-tawar.aktif { background: rgba(255, 198, 41, 0.12); }
html[data-mode="gelap"] .pita-simulasi { background: rgba(108, 58, 237, 0.18); color: #DDD3FF; border-color: rgba(167, 139, 250, 0.4); }
html[data-mode="gelap"] .kotak-set.berikon:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
html[data-mode="gelap"] .ikon-set { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
html[data-mode="gelap"] .logo-svg { filter: none; }
html[data-mode="gelap"] .ticker { background: var(--panel); }
html[data-mode="gelap"] .peringatan { color: #FFE9A8; border-bottom-color: rgba(255, 198, 41, 0.25); }
html[data-mode="gelap"] .peringatan a { color: var(--kuning); }
/* Teks navy/ungu yang dibuat untuk latar terang → terang di mode gelap */
html[data-mode="gelap"] .indeks-nama, html[data-mode="gelap"] .feed-item .sub.reputasi,
html[data-mode="gelap"] .kantong .tawaran { color: var(--emas); }
html[data-mode="gelap"] .kartu-mini .harga, html[data-mode="gelap"] .harga-lelang,
html[data-mode="gelap"] .tab-kartu button.aktif { color: var(--teks); }
html[data-mode="gelap"] .tab-kartu button span { background: var(--garis); }
html[data-mode="gelap"] .chip-filter button { background: var(--panel-2); color: var(--redup); }
html[data-mode="gelap"] .chip-filter button.aktif { background: var(--kuning); color: var(--navy); border-color: var(--kuning); }
html[data-mode="gelap"] .chip-pokemon, html[data-mode="gelap"] .binder { background: var(--panel); }
html[data-mode="gelap"] .bintang { background: rgba(7, 18, 41, 0.85); color: var(--kuning); }
html[data-mode="gelap"] .bintang.aktif { background: var(--kuning); color: var(--navy); }
html[data-mode="gelap"] .label.contoh, html[data-mode="gelap"] .label.wtt { color: #FFD66B; border-color: rgba(255, 198, 41, .35); }
html[data-mode="gelap"] .label.komunitas, html[data-mode="gelap"] .label.wts, html[data-mode="gelap"] .pesan.ok { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
html[data-mode="gelap"] .label.wtb { background: rgba(96, 165, 250, .18); color: #93C5FD; }
html[data-mode="gelap"] .label.lencana { background: rgba(167, 139, 250, .2); color: #D3C6FF; }
html[data-mode="gelap"] .pesan.galat { background: rgba(255, 107, 118, .16); color: #FFB4BA; }
html[data-mode="gelap"] .nav-bawah { background: rgba(10, 22, 48, 0.97); box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.7); }
html[data-mode="gelap"] .nav-bawah a.aktif, html[data-mode="gelap"] .nav-bawah a.aktif .ik { color: var(--kuning); }
html[data-mode="gelap"] .grid-menu a span { color: var(--kuning); border-color: rgba(255, 198, 41, 0.3); }
.kotak-lelang-energi .kemasan.berfoto .kemasan-nama { font-size: 11px; }
.ikon-set.kartu-set { width: 60px; height: 84px; margin: 2px; object-fit: cover; border-radius: 5px; border: 2px solid var(--kuning); transform: rotate(-4deg); }
/* HP: logo + mode + lonceng + akun tetap satu baris */
@media (max-width: 760px) {
  .topbar .logo-svg { height: 46px; }
  .ikon-kanan { gap: 5px; }
  .ikon-kanan .ikon { width: 34px; height: 34px; }
  .akun { max-width: 104px; padding: 8px 11px; }
}
/* Isi halaman kartu tidak boleh melebarkan grid (tabel lebar cukup digeser di dalam .gulir-x) */
.detail > * { min-width: 0; }
.order-book { min-width: 0; }

/* ---------------------------------------------------------------------------
   Deck builder & META
   --------------------------------------------------------------------------- */
.pil { border: 1px solid var(--garis); background: var(--panel-2); color: var(--teks); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.pil.aktif { background: var(--navy); color: #fff; border-color: var(--navy); }
html[data-mode="gelap"] .pil.aktif { background: var(--kuning); color: var(--navy); border-color: var(--kuning); }
.grid-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.kotak-deck { display: block; border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; background: var(--panel-2); color: inherit; text-decoration: none; }
.kotak-deck:hover { border-color: var(--kuning-tua); }
.kotak-deck .sampul { height: 120px; overflow: hidden; background: var(--navy); }
.kotak-deck .sampul img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.kotak-deck .isi { padding: 10px 12px; }
.kotak-deck .judul { font-weight: 700; }
.kotak-deck .sub { font-size: 12px; color: var(--redup); }

.lencana-tier { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .3px; vertical-align: middle; }
.lencana-tier.t0 { background: linear-gradient(135deg, #E63946, #FF8A3D 55%, #FFC629); color: #fff; box-shadow: 0 0 0 2px rgba(255, 198, 41, .45); }
.lencana-tier.t1 { background: var(--kuning); color: var(--navy); }
.meta-besar.tier-nol .pita { border-color: #E63946; box-shadow: 0 0 0 2px rgba(255, 198, 41, .55), 0 6px 16px rgba(230, 57, 70, .25); }
.meta-besar.tier-nol .angka { color: #E63946; }
html[data-mode="gelap"] .meta-besar.tier-nol .angka { color: #FF6B76; }
.lencana-tier.t2 { background: #C9D3E3; color: var(--navy); }
.lencana-tier.t3 { background: #E8C9A8; color: #5A3410; }

.tab-meta { display: flex; gap: 22px; border-bottom: 1px solid var(--garis); margin: 14px 0 12px; overflow-x: auto; }
.tab-meta button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; font: inherit; font-weight: 700; color: var(--redup); cursor: pointer; letter-spacing: .4px; white-space: nowrap; }
.tab-meta button.aktif { color: var(--teks); border-color: var(--kuning-tua); }
.tab-meta a { padding: 8px 0; border-bottom: 2px solid transparent; font-weight: 700; color: var(--redup); text-decoration: none; white-space: nowrap; letter-spacing: .3px; }
.tab-meta a.aktif { color: var(--teks); border-color: var(--kuning-tua); }
.tab-meta a { display: inline-flex; align-items: center; gap: 7px; }
.tab-meta a svg { width: 18px; height: 18px; flex: none; }
.tab-meta a.aktif svg { color: var(--kuning-tua); }
html[data-mode="gelap"] .tab-meta a.aktif svg { color: var(--kuning); }
.judul-gym { display: flex; align-items: center; gap: 12px; margin: 0; }
/* Lambang region Trainer (Pokémon ikonik tiap region) */
.lambang-region { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--warna-tier) 30%, transparent), color-mix(in srgb, var(--warna-tier) 10%, transparent) 70%);
  border: 2px solid color-mix(in srgb, var(--warna-tier) 70%, transparent); overflow: visible; }
.lambang-region img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.lambang-region.besar { width: 104px; height: 104px; border-width: 3px; }
.sel-region { display: flex; align-items: center; gap: 10px; }
.ikon-gym { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.filter-meta { gap: 10px; flex-wrap: wrap; }
.saklar-meta { display: inline-flex; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.saklar-meta button { border: 0; background: var(--panel-2); color: var(--teks); padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.saklar-meta button.aktif { background: var(--navy); color: #fff; font-weight: 700; }
html[data-mode="gelap"] .saklar-meta button.aktif { background: var(--kuning); color: var(--navy); }
.ringkas-meta { margin-top: 10px; font-size: 13px; color: var(--redup); }
.ringkas-meta b { color: var(--teks); }

.daftar-meta-besar { display: grid; gap: 10px; margin-top: 12px; }
.meta-besar { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.meta-besar .pita { display: flex; align-items: center; width: min(320px, 55%); min-height: 58px; border: 2px solid var(--navy-2); border-radius: 6px; background: #B9C6D6; color: var(--navy); overflow: hidden; }
.meta-besar .pita b { flex: 1; text-align: center; text-transform: uppercase; font-size: 16px; letter-spacing: .4px; padding: 0 8px; }
.meta-besar .angka { font-size: 26px; font-weight: 800; white-space: nowrap; }
.meta-besar:hover .pita, .meta-kecil:hover { border-color: var(--kuning-tua); }
.potong-wadah, .potong.kosong-gbr { width: 60px; height: 58px; overflow: hidden; flex: none; }
.potong-wadah img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 18%; }
.grid-meta-kecil { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.meta-kecil { position: relative; display: flex; align-items: center; min-height: 58px; border: 2px solid var(--navy-2); border-radius: 6px; background: #B9C6D6; color: var(--navy); overflow: hidden; text-decoration: none; }
.meta-kecil b { flex: 1; text-align: center; text-transform: uppercase; font-size: 14px; padding: 0 8px 12px; line-height: 1.15; }
.meta-kecil .angka { position: absolute; right: 4px; bottom: 3px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .75); border-radius: 6px; padding: 1px 5px; }
.angka-besar { font-size: 22px; font-weight: 800; }
.lencana-tier.tL { background: var(--panel-2); color: var(--teks); border: 1px solid var(--garis); }
.lencana-baru { position: absolute; top: 3px; left: 3px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .4px; color: #fff; background: linear-gradient(135deg, #FF5A5F, #E63946); box-shadow: 0 0 0 2px #FFC629; }
.meta-besar.dipilih .pita, .meta-kecil.dipilih { border-color: var(--kuning-tua); box-shadow: 0 0 0 2px var(--kuning); }
.grid-60 { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.kartu-60 { position: relative; display: block; color: inherit; text-decoration: none; }
.kartu-60 img, .kartu-60 .kosong-gbr { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; display: block; }
.kartu-60 .jml { position: absolute; top: 4px; left: 4px; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; border: 2px solid var(--kuning); }
.kartu-60 .nm { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.2; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-60 .hg { display: block; font-size: 11px; color: var(--redup); }
.kartu-60.kurang img { outline: 2px dashed var(--turun); outline-offset: 1px; }
@media (max-width: 760px) { .grid-60 { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } }
.inti { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.inti span { font-size: 12px; background: var(--panel-2); border: 1px solid var(--garis); border-radius: 999px; padding: 3px 9px; }
.harga-meta { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabel-meta { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-meta th, .tabel-meta td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--garis); }
.tabel-meta th { color: var(--redup); font-weight: 600; }
.grid-form-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.grid-form-meta label { display: grid; gap: 4px; font-size: 13px; color: var(--redup); }

.input-judul { width: 100%; font: inherit; font-size: 22px; font-weight: 800; padding: 8px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--panel-2); color: var(--teks); }
.tata-deck { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tata-deck.baca { grid-template-columns: minmax(0, 1fr); }
.cari-deck { position: sticky; top: 120px; }
.hasil-deck { display: grid; gap: 6px; margin-top: 10px; max-height: 62vh; overflow-y: auto; }
.hasil-kartu { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 1px solid var(--garis); border-radius: 10px; background: var(--panel-2); color: var(--teks); font: inherit; cursor: pointer; }
.hasil-kartu:hover { border-color: var(--kuning-tua); }
.hasil-kartu .plus { font-size: 20px; font-weight: 800; color: var(--emas); }
img.mini, .mini.kosong-gbr { width: 38px; height: 53px; object-fit: cover; border-radius: 4px; flex: none; }
.kosong-gbr { display: grid; place-items: center; background: var(--panel-2); color: var(--redup); }
.ringkas-deck { display: flex; gap: 24px; flex-wrap: wrap; }
.ringkas-deck b { font-size: 22px; }
.aturan-deck { margin: 10px 0; padding-left: 18px; color: var(--turun); font-size: 13px; }
.judul-kelompok { margin: 16px 0 6px; font-size: 15px; }
.baris-deck { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.baris-deck .nama { font-weight: 600; color: inherit; }
.jumlah-deck { display: flex; align-items: center; gap: 8px; }
.jumlah-deck button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--garis); background: var(--panel-2); color: var(--teks); font-size: 16px; cursor: pointer; }
.kotak-impor { margin-top: 10px; }
.kotak-impor textarea { font: inherit; padding: 8px; border: 1px solid var(--garis); border-radius: 10px; background: var(--panel-2); color: var(--teks); }
@media (max-width: 760px) {
  .tata-deck { grid-template-columns: 1fr; }
  .cari-deck { position: static; }
  .meta-besar .pita { width: 62%; }
  .meta-besar .angka { font-size: 18px; }
  .tabel-meta { display: block; overflow-x: auto; }
}
/* Panel IKK (Indeks Komposit Kartix) */
#panel-ikk select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--garis); background: var(--panel-2); color: var(--teks); font: inherit; font-size: 13px; }
.ikk-kosong { margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--garis); font-size: 13px; line-height: 1.5; color: var(--redup); }
.ikk-kosong b { display: block; color: var(--teks); margin-bottom: 4px; }
/* Masuk dengan Google */
.tombol-google { display: flex; justify-content: center; margin: 12px 0 4px; min-height: 44px; }
.pemisah-atau { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--redup); font-size: 12px; }
.pemisah-atau::before, .pemisah-atau::after { content: ""; flex: 1; border-top: 1px solid var(--garis); }
#form-google { margin: 10px 0 4px; }