/* Dashboard Sellhead. Tata letak mengikuti Insightory, warna netral.
   Aksen kartun (garis navy tebal + bayangan keras + kuning) hanya di Kartu Seller, banner, dan Bang Sel. */
:root {
  --kuning:#E8A92E; --kuning-tua:#A8730F; --kuning-pucat:#FDF5E2; --kuning-garis:#F0D9A2;
  --navy:#1E2B4A; --navy-tua:#141D33;
  --latar:#F5F5F2; --kartu:#FFFFFF; --kartu-2:#F9F8F6; --garis:#E8E6E1; --garis-kuat:#D8D5CD;
  --teks:#1E2B4A; --teks-2:#4A5063; --redup:#7A776C; --merah:#C8433A; --merah-pucat:#FCEDEB; --hijau:#2E7D46; --hijau-pucat:#E9F5EC;
  --tombol:#1E2B4A; --tombol-teks:#FFFFFF; --tombol-hover:#2B3B61;
  --bayang:0 1px 2px rgba(30,43,74,.04), 0 12px 32px rgba(30,43,74,.05);
  --sans:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color-scheme:light;
}
html[data-tema="gelap"] {
  --kuning-tua:#F0BE5A; --kuning-pucat:rgba(232,169,46,.12); --kuning-garis:rgba(232,169,46,.38);
  --latar:#0D1220; --kartu:#151B2B; --kartu-2:#1A2134; --garis:#262E44; --garis-kuat:#36415F;
  --teks:#EEF0F5; --teks-2:#C2C7D3; --redup:#8E95A7; --merah:#F07A70; --merah-pucat:rgba(240,122,112,.12); --hijau:#6CC58A; --hijau-pucat:rgba(108,197,138,.12);
  --tombol:#E8A92E; --tombol-teks:#1E2B4A; --tombol-hover:#F3C35C;
  --bayang:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.25);
  color-scheme:dark;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--latar); color:var(--teks); font-family:var(--sans); font-weight:500; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
svg { flex:none; }
[hidden] { display:none !important; }
.k-latar { position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 620px 380px at 52% -40px, rgba(30,43,74,.07), transparent 70%), radial-gradient(ellipse 420px 420px at 100% 70%, rgba(232,169,46,.05), transparent 70%); }

/* kepala melayang */
.k-kepala { position:fixed; z-index:40; top:20px; left:50%; transform:translateX(-50%); width:min(1405px, calc(100% - 40px)); height:62px;
  display:flex; align-items:center; gap:18px; padding:0 10px 0 22px; background:var(--kartu); border:1px solid var(--garis); border-radius:999px; box-shadow:var(--bayang); }
.k-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.k-logo-sel { width:36px; height:36px; border-radius:50%; background:var(--kuning); display:grid; place-items:center; }
.k-logo-sel img { width:32px; height:32px; }
.k-logo b { display:block; font-size:19px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.k-logo small { display:block; font-size:10.5px; color:var(--redup); font-weight:600; line-height:1.2; margin-top:2px; }
.k-cari { position:relative; flex:0 1 450px; margin:0 auto; display:flex; align-items:center; gap:10px; height:40px; padding:0 8px 0 16px;
  background:var(--kartu-2); border:1px solid var(--garis); border-radius:999px; color:var(--redup); }
.k-cari:focus-within { border-color:var(--garis-kuat); }
.k-cari svg { width:17px; height:17px; }
.k-cari input { flex:1; min-width:0; border:0; background:none; outline:none; font-size:14.5px; color:var(--teks); }
.k-cari input::placeholder { color:var(--redup); }
.k-cari kbd { font:inherit; font-size:11px; font-weight:700; padding:2px 7px; border-radius:7px; border:1px solid var(--garis-kuat); color:var(--redup); background:var(--kartu); }
.k-cari-hasil { position:absolute; left:0; right:0; top:48px; background:var(--kartu); border:1px solid var(--garis); border-radius:18px; box-shadow:var(--bayang); padding:8px; max-height:360px; overflow:auto; }
.k-cari-hasil a { display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:12px; text-decoration:none; font-size:14px; color:var(--teks); }
.k-cari-hasil a small { color:var(--redup); font-size:12px; font-weight:600; flex:none; }
.k-cari-hasil a:hover, .k-cari-hasil a.pilih { background:var(--kartu-2); }
.k-cari-hasil p { padding:10px 12px; font-size:13.5px; color:var(--redup); }
.k-kanan { display:flex; align-items:center; gap:8px; flex:none; }
.k-tema { display:flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 14px; border-radius:999px; border:1px solid var(--garis); background:var(--kartu); cursor:pointer; font-size:13.5px; font-weight:600; color:var(--teks-2); }
.k-tema svg { width:16px; height:16px; }
.k-saklar { width:34px; height:20px; border-radius:99px; background:var(--garis-kuat); position:relative; display:block; }
.k-saklar::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; }
html[data-tema="gelap"] .k-saklar { background:var(--kuning); }
html[data-tema="gelap"] .k-saklar::after { transform:translateX(14px); background:var(--navy); }
.k-akun-menu { position:relative; }
.k-avatar { display:flex; align-items:center; gap:9px; height:44px; padding:0 10px 0 4px; border-radius:999px; border:1px solid var(--kuning-garis); background:var(--kuning-pucat); cursor:pointer; text-align:left; }
.k-avatar i { width:34px; height:34px; border-radius:50%; background:var(--kuning); color:var(--navy); display:grid; place-items:center; font-style:normal; font-weight:800; font-size:15px; }
.k-avatar b { display:block; font-size:13.5px; line-height:1.15; }
.k-avatar small { display:block; font-size:11px; color:var(--redup); font-weight:600; line-height:1.2; }
.k-avatar svg { width:15px; height:15px; color:var(--redup); }
.k-turun { position:absolute; right:0; top:52px; min-width:210px; background:var(--kartu); border:1px solid var(--garis); border-radius:16px; box-shadow:var(--bayang); padding:6px; }
.k-turun a { display:block; padding:9px 12px; border-radius:10px; text-decoration:none; font-size:14px; }
.k-turun a:hover { background:var(--kartu-2); }
.k-menu-hp { display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--garis); background:var(--kartu); cursor:pointer; place-items:center; }
.k-menu-hp svg { width:20px; height:20px; }

/* tombol */
.k-tombol { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:999px; border:1px solid var(--tombol);
  background:var(--tombol); color:var(--tombol-teks); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s; }
.k-tombol:hover { background:var(--tombol-hover); border-color:var(--tombol-hover); }
.k-tombol svg { width:16px; height:16px; }
.k-tombol.garis { background:var(--kartu); color:var(--teks); border-color:var(--garis-kuat); }
.k-tombol.garis:hover { border-color:var(--teks); }
.k-tombol.kecil { padding:7px 14px; font-size:13px; }
.k-tombol.lebar { width:100%; padding:13px 18px; font-size:15px; }
.k-tombol.mati { background:var(--kartu-2); border-color:var(--garis); color:var(--redup); cursor:default; }
.k-tautan { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--teks); text-decoration:none; }
.k-tautan svg { width:16px; height:16px; }
.k-tautan:hover { text-decoration:underline; }

/* menu samping melayang */
.k-samping { position:fixed; z-index:30; left:12px; top:112px; width:240px; max-height:calc(100vh - 130px); overflow:auto; scrollbar-width:none;
  background:var(--kartu); border:1px solid var(--garis); border-radius:24px; box-shadow:var(--bayang); padding:14px 10px 12px; transition:width .2s; }
.k-samping::-webkit-scrollbar { display:none; }
.k-samping-atas { display:flex; justify-content:space-between; align-items:center; padding:2px 6px 6px 10px; }
.k-samping-atas span { font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--redup); }
.k-samping-atas button { width:32px; height:32px; border-radius:50%; border:1px solid var(--garis); background:var(--kartu-2); cursor:pointer; display:grid; place-items:center; color:var(--teks-2); }
.k-samping-atas button svg { width:15px; height:15px; transition:transform .2s; }
.k-samping h6 { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--redup); margin:12px 0 4px 12px; white-space:nowrap; }
.k-samping h6::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--kuning); flex:none; }
.k-samping a { display:flex; align-items:center; gap:13px; padding:6px 10px; margin:2px 0; border-radius:14px; border:1px solid transparent; text-decoration:none; font-size:15px; font-weight:500; color:var(--teks); white-space:nowrap; }
.k-samping a:hover { background:var(--kartu-2); }
.k-ikon { width:36px; height:36px; border-radius:11px; background:var(--kartu-2); border:1px solid var(--garis); display:grid; place-items:center; flex:none; }
.k-ikon svg { width:18px; height:18px; }
.k-samping a.aktif { background:var(--kuning-pucat); border-color:var(--kuning-garis); font-weight:700; }
.k-samping a.aktif .k-ikon { background:var(--kuning); border-color:var(--kuning); color:var(--navy); }
.k-samping a em { margin-left:auto; font-style:normal; font-size:11px; font-weight:800; min-width:22px; text-align:center; padding:2px 7px; border-radius:99px; background:var(--kuning); color:var(--navy); }
.k-samping .k-bawah { margin-top:12px; padding-top:10px; border-top:1px solid var(--garis); }
.k-samping .k-bawah a { font-size:14px; color:var(--teks-2); }
.k-samping .k-bawah .k-ikon { background:none; border-color:transparent; }
body.ciut .k-samping { width:72px; }
body.ciut .k-samping .k-label, body.ciut .k-samping h6, body.ciut .k-samping-atas span, body.ciut .k-samping a em { display:none; }
body.ciut .k-samping-atas { justify-content:center; padding:2px 0 6px; }
body.ciut .k-samping-atas button svg { transform:rotate(180deg); }
body.ciut .k-samping a { justify-content:center; padding:8px 0; }
body.ciut .k-samping h6 + a { margin-top:14px; }

/* isi utama */
.k-utama { padding:112px 32px 0 285px; min-height:100vh; display:flex; flex-direction:column; transition:padding .2s; }
body.ciut .k-utama { padding-left:118px; }
.k-isi { flex:1; width:100%; max-width:1600px; }
.k-kaki { margin-top:72px; border-top:1px solid var(--garis); padding:26px 0 34px; text-align:center; }
.k-kaki b { display:block; font-size:13.5px; font-weight:600; color:var(--teks-2); }
.k-kaki small { display:block; font-size:12px; color:var(--redup); margin-top:4px; }

/* kepala halaman */
.k-alis { font-size:13.5px; font-weight:600; color:var(--kuning-tua); }
.k-alis a { color:inherit; text-decoration:none; }
.k-kembali { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--teks-2); text-decoration:none; margin-bottom:6px; }
.k-kembali svg { width:16px; height:16px; }
.k-kepala-hal { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.k-judul { display:flex; align-items:center; gap:16px; margin-top:8px; }
.k-judul .k-ikon { width:56px; height:56px; border-radius:16px; background:var(--kuning-pucat); border-color:var(--kuning-garis); }
.k-judul .k-ikon svg { width:26px; height:26px; }
.k-judul h1 { font-size:clamp(30px, 3vw, 40px); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.k-desk { font-size:15.5px; color:var(--teks-2); max-width:700px; margin-top:12px; line-height:1.7; }
.k-sapa h1 { font-size:clamp(40px, 4.2vw, 54px); font-weight:700; letter-spacing:-.035em; line-height:1.1; margin-top:8px; }
.k-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.k-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; border:1px solid var(--garis-kuat); background:var(--kartu); font-size:13.5px; font-weight:600; color:var(--teks-2); cursor:pointer; white-space:nowrap; }
.k-chip svg { width:15px; height:15px; }
.k-chip b { font-weight:700; color:var(--redup); }
.k-chip.aktif, .k-chip.emas { background:var(--kuning-pucat); border-color:var(--kuning-garis); color:var(--teks); }
.k-chip.aktif b { color:var(--kuning-tua); }
span.k-chip { cursor:default; }

/* kartu */
.k-kartu { background:var(--kartu); border:1px solid var(--garis); border-radius:22px; padding:28px; box-shadow:var(--bayang); }
.k-kartu h2 { font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.k-kartu-kepala { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.k-kartu > p.k-desk { margin-top:8px; font-size:14.5px; }
.k-kisi { display:grid; gap:22px; }
.k-kisi.dua { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.k-kisi.tiga { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.k-kisi.kiri-lebar { grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); align-items:start; }
.k-kisi.kiri-lebar.seimbang { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); }
.k-jarak { margin-top:22px; }
.k-redup { color:var(--redup); }
.k-kecil { font-size:13px; color:var(--redup); }
.k-label-caps { display:block; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teks-2); margin-bottom:8px; }
.k-lencana { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:1px 8px; border-radius:99px; border:1px solid; line-height:1.6; white-space:nowrap; }
.k-lencana.diperbarui { color:var(--kuning-tua); border-color:var(--kuning-garis); background:var(--kuning-pucat); }
.k-lencana.baru, .k-lencana.lunas, .k-lencana.dijawab { color:var(--hijau); border-color:rgba(46,125,70,.3); background:var(--hijau-pucat); }
.k-lencana.abu { color:var(--teks-2); border-color:var(--garis-kuat); background:var(--kartu-2); }

/* Kartu Seller: aksen kartun */
.k-baris-sapa { display:grid; grid-template-columns:385px minmax(0, 1fr); gap:22px; align-items:stretch; }
.k-member { position:relative; overflow:hidden; border-radius:22px; padding:24px 24px 20px; min-height:240px; color:#fff;
  background:linear-gradient(140deg, #24345A 0%, var(--navy) 45%, var(--navy-tua) 100%); border:2px solid var(--navy); box-shadow:6px 6px 0 var(--kuning); display:flex; flex-direction:column; }
.k-member::before { content:""; position:absolute; right:-40px; top:-40px; width:260px; height:260px; opacity:.16;
  background-image:radial-gradient(var(--kuning) 1.4px, transparent 1.7px); background-size:13px 13px; mask-image:radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 70%); }
.k-member::after { content:""; position:absolute; left:-10%; right:-10%; top:58%; height:1px; background:linear-gradient(90deg, transparent, rgba(232,169,46,.45), transparent); transform:rotate(-12deg); }
.k-member-atas { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; }
.k-member-atas b { display:block; font-size:18px; font-weight:800; letter-spacing:-.04em; }
.k-member-atas small { display:block; font-size:10.5px; font-weight:700; letter-spacing:.24em; color:rgba(255,255,255,.65); margin-top:2px; }
.k-member-sel { width:62px; height:62px; border-radius:50%; background:var(--kuning); border:2px solid #FFF7E8; display:grid; place-items:center; }
.k-member-sel img { width:54px; height:54px; }
.k-member-tier { position:relative; z-index:1; margin:10px 0 0 auto; text-align:right; }
.k-member-tier b { display:block; font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--kuning); line-height:1.1; }
.k-member-tier small { font-size:12.5px; color:rgba(255,255,255,.7); }
.k-member-chips { position:relative; z-index:1; display:flex; gap:6px; margin-top:12px; }
.k-member-chips span { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; border:1px solid rgba(232,169,46,.5); color:#fff; }
.k-member-chips span b { color:var(--kuning); }
.k-member-bawah { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); }
.k-member-bawah small { display:block; font-size:10px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.55); }
.k-member-bawah b { display:block; font-size:14.5px; font-weight:700; }
.k-member-bawah div:last-child { text-align:right; }

/* mulai dari sini */
.k-mulai-kisi { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:20px; }
.k-mulai { border:1px solid var(--garis); border-radius:16px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; background:var(--kartu-2); }
.k-mulai .k-ikon { width:40px; height:40px; background:var(--kuning-pucat); border-color:var(--kuning-garis); }
.k-mulai b { font-size:15px; font-weight:600; margin-top:14px; }
.k-mulai small { font-size:13px; color:var(--redup); margin:4px 0 14px; flex:1; }

/* daftar pembaruan */
.k-daftar { display:grid; }
.k-baris { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:14px; align-items:center; padding:13px 10px; border-radius:14px; text-decoration:none; color:var(--teks); }
.k-baris + .k-baris { border-top:1px solid var(--garis); border-radius:0 0 14px 14px; }
.k-baris:hover { background:var(--kartu-2); }
.k-baris .k-ikon { width:40px; height:40px; overflow:hidden; }
.k-baris .k-ikon img { width:40px; height:40px; object-fit:cover; }
.k-baris b { display:block; font-size:15px; font-weight:600; line-height:1.4; }
.k-baris .meta { display:flex; align-items:center; gap:7px; margin-top:3px; font-size:12.5px; color:var(--redup); flex-wrap:wrap; }
.k-baris > svg { width:18px; height:18px; color:var(--redup); }
.k-daftar.terpisah { gap:10px; }
.k-daftar.terpisah .k-baris { background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:13px 18px; box-shadow:0 1px 2px rgba(30,43,74,.03); }
.k-daftar.terpisah .k-baris + .k-baris { border-top:1px solid var(--garis); border-radius:16px; }
.k-saring-baris { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.k-saring-baris > span { width:74px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--redup); }
.k-hitung-tampil { font-size:13px; color:var(--redup); margin:16px 0 10px; }

/* banner beranda: aksen kartun */
.k-banner { position:relative; overflow:hidden; border-radius:22px; padding:34px; min-height:380px; background:var(--navy); color:#fff; border:2px solid var(--navy); box-shadow:6px 6px 0 var(--kuning); display:flex; flex-direction:column; }
.k-banner::before { content:""; position:absolute; inset:0; opacity:.1; background-image:radial-gradient(var(--kuning) 1.4px, transparent 1.7px); background-size:15px 15px; mask-image:linear-gradient(200deg, #000, transparent 60%); -webkit-mask-image:linear-gradient(200deg, #000, transparent 60%); }
.k-banner > * { position:relative; }
.k-banner .k-lencana { align-self:flex-start; color:var(--navy); background:var(--kuning); border-color:var(--kuning); }
.k-banner h2 { font-size:clamp(26px, 2.4vw, 34px); font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:16px 0 14px; max-width:420px; }
.k-banner ul { list-style:none; display:grid; gap:8px; font-size:14.5px; color:rgba(255,255,255,.82); max-width:340px; }
.k-banner li { padding-left:24px; position:relative; }
.k-banner li::before { content:""; position:absolute; left:0; top:7px; width:12px; height:12px; border-radius:50%; background:var(--kuning); }
.k-banner .k-tombol { align-self:flex-start; margin-top:auto; background:var(--kuning); border-color:var(--kuning); color:var(--navy); }
.k-banner .k-tombol:hover { background:#F3C35C; }
.k-banner-sel { position:absolute !important; right:22px; bottom:20px; width:170px; height:170px; border-radius:50%; background:var(--kuning); border:3px solid #FFF7E8; display:grid; place-items:center; }
.k-banner-sel img { width:146px; }
.k-banner-gambar { position:absolute !important; right:26px; bottom:24px; width:190px; border-radius:14px; border:2px solid #FFF7E8; transform:rotate(4deg); }

/* terkunci */
.k-kunci-kisi { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.k-kunci { position:relative; display:flex; gap:14px; padding:18px 20px; background:var(--kartu); border:1px solid var(--garis); border-radius:16px; text-decoration:none; color:var(--teks); }
.k-kunci .k-ikon { width:42px; height:42px; }
.k-kunci b { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.k-kunci p { font-size:13.5px; color:var(--redup); margin-top:3px; padding-right:24px; }
.k-kunci > svg { position:absolute; right:18px; top:18px; width:16px; height:16px; color:var(--redup); }
.k-kunci:hover { border-color:var(--garis-kuat); }

/* alat hitung */
.k-bidang { display:grid; gap:7px; }
.k-bidang + .k-bidang { margin-top:16px; }
.k-bidang label, .k-bidang .k-label-caps { margin:0; }
.k-bidang > label { font-size:13.5px; font-weight:600; color:var(--teks-2); }
.k-bidang small { font-size:12.5px; color:var(--redup); }
.k-masukan { display:flex; align-items:center; height:46px; border:1px solid var(--garis); border-radius:12px; background:var(--kartu-2); overflow:hidden; transition:border-color .15s; }
.k-masukan:focus-within { border-color:var(--teks-2); }
.k-masukan span { padding-left:14px; font-weight:700; font-size:14px; color:var(--redup); }
.k-masukan span.blk { padding:0 14px 0 0; }
.k-masukan input, .k-masukan select { flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none; font-size:15.5px; font-weight:600; color:var(--teks); padding:0 14px; }
.k-masukan select option { background:var(--kartu); }
textarea.k-masukan { width:100%; height:auto; min-height:150px; padding:12px 14px; outline:none; resize:vertical; font-size:15px; color:var(--teks); }
textarea.k-masukan:focus { border-color:var(--teks-2); }
.k-dua { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.k-dua .k-bidang + .k-bidang { margin-top:0; }
.k-dua + .k-dua, .k-bidang + .k-dua, .k-dua + .k-bidang { margin-top:16px; }
.k-tarif { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--redup); padding:10px 14px; border-radius:12px; background:var(--kartu-2); border:1px solid var(--garis); margin-bottom:18px; }
.k-rincian { width:100%; border-collapse:collapse; font-size:14px; }
.k-rincian td { padding:9px 2px; border-bottom:1px solid var(--garis); color:var(--teks-2); }
.k-rincian td small { color:var(--redup); font-size:12px; }
.k-rincian td:last-child { text-align:right; font-weight:700; color:var(--merah); font-variant-numeric:tabular-nums; white-space:nowrap; }
.k-rincian tr.plus td:last-child { color:var(--teks); }
.k-rincian tr.total td { font-weight:700; color:var(--teks); background:var(--kartu-2); border-bottom:0; padding:11px 12px; }
.k-rincian tr.total td:first-child { border-radius:10px 0 0 10px; }
.k-rincian tr.total td:last-child { border-radius:0 10px 10px 0; color:var(--merah); }
.k-hasil { margin-top:16px; padding:16px 20px; border-radius:16px; background:var(--kuning-pucat); border:1px solid var(--kuning-garis); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.k-hasil span { font-size:14px; font-weight:600; color:var(--teks-2); }
.k-hasil b { font-size:34px; font-weight:700; letter-spacing:-.04em; line-height:1.1; }
.k-hasil.rugi { background:var(--merah-pucat); border-color:rgba(200,67,58,.3); }
.k-hasil.rugi b { color:var(--merah); }
.k-mini { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.k-mini div { border:1px solid var(--garis); border-radius:14px; padding:12px 16px; background:var(--kartu); }
.k-mini span { display:block; font-size:12.5px; color:var(--redup); font-weight:600; }
.k-mini b { font-size:21px; font-weight:700; letter-spacing:-.02em; }
.k-rumus { margin-top:14px; font-size:13px; color:var(--teks-2); background:var(--kartu-2); border:1px dashed var(--garis-kuat); border-radius:12px; padding:10px 14px; }
.k-rumus code { font-family:inherit; font-weight:700; color:var(--teks); }
.k-fitur { border:1px solid var(--garis); border-radius:18px; background:var(--kartu); padding:18px 20px; }
.k-fitur + .k-fitur { margin-top:14px; }
.k-fitur-kepala { display:flex; align-items:center; gap:13px; }
.k-fitur-kepala .k-ikon { width:42px; height:42px; }
.k-fitur-kepala b { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.k-fitur-kepala small { display:block; font-size:13px; color:var(--redup); }
.k-fitur-kepala .k-tombol { margin-left:auto; }
.k-fitur.kunci { border-style:dashed; }
.k-fitur.buka-lengkap .k-fitur-kepala .k-ikon { background:var(--kuning-pucat); border-color:var(--kuning-garis); }
.k-intip { display:none; position:relative; margin-top:14px; }
.k-fitur.buka .k-intip { display:block; }
.k-kabur { filter:blur(5px); pointer-events:none; user-select:none; }
.k-tirai { position:absolute; inset:0; display:grid; place-items:center; }
.k-tirai div { background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:14px 18px; box-shadow:var(--bayang); text-align:center; }
.k-tirai p { font-size:13.5px; font-weight:600; margin-bottom:10px; }

/* kartu alat (kalkulator) */
.k-alat { display:block; text-decoration:none; color:var(--teks); }
.k-alat .k-alat-kepala { display:flex; align-items:center; gap:14px; }
.k-alat .k-ikon { width:46px; height:46px; border-radius:14px; background:var(--kartu); }
.k-alat h2 { font-size:22px; font-weight:600; }
.k-alat p { font-size:14.5px; color:var(--teks-2); margin:14px 0 16px; }
.k-alat:hover { border-color:var(--garis-kuat); }

/* katalog */
.k-statistik { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.k-statistik div { background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:16px 20px; }
.k-statistik b { display:block; font-size:24px; font-weight:600; letter-spacing:-.02em; }
.k-statistik span { font-size:12.5px; color:var(--redup); }
.k-cari-baris { display:flex; gap:10px; margin-top:12px; }
.k-cari-baris .k-masukan { flex:1; height:42px; border-radius:999px; background:var(--kartu); }
.k-cari-baris .k-masukan svg { width:16px; height:16px; margin-left:16px; color:var(--redup); }
.k-cari-baris .k-masukan input { font-size:14.5px; font-weight:500; }
.k-cari-baris .k-tombol.garis { height:42px; }
.k-cari-baris select { height:42px; border-radius:12px; border:1px solid var(--garis-kuat); background:var(--kartu); padding:0 12px; font-size:14px; font-weight:600; }
.k-katalog { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:18px; margin-top:22px; }
.k-produk { display:flex; flex-direction:column; border:1px solid var(--garis); border-radius:20px; padding:16px; background:linear-gradient(180deg, var(--kartu) 0%, var(--kartu-2) 100%); box-shadow:var(--bayang); }
.k-produk-tag { display:flex; gap:6px; flex-wrap:wrap; }
.k-produk-gambar { height:190px; display:grid; place-items:center; margin:10px 0 14px; }
.k-produk-gambar span { width:150px; height:150px; border-radius:50%; background:var(--kuning); border:3px solid var(--navy); display:grid; place-items:center; box-shadow:5px 5px 0 var(--navy); }
.k-produk-gambar img { width:128px; }
.k-produk h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.k-produk p { font-size:13.5px; color:var(--redup); margin:6px 0 14px; flex:1; }
.k-produk hr { border:0; border-top:1px solid var(--garis); margin-bottom:12px; }
.k-produk .harga { font-size:19px; font-weight:700; letter-spacing:-.02em; margin:8px 0 12px; }
.k-produk .k-dua-tombol { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.k-produk .k-meta { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--redup); margin-top:10px; }
.k-produk .k-meta svg { width:14px; height:14px; }
.k-produk.segera { background:transparent; border-style:dashed; box-shadow:none; }
.k-produk.segera .k-produk-gambar span { background:var(--kartu-2); border:1px dashed var(--garis-kuat); box-shadow:none; color:var(--redup); }
.k-produk.segera .k-produk-gambar svg { width:44px; height:44px; }

/* tab detail */
.k-tab { display:flex; gap:6px; flex-wrap:wrap; padding:5px; border:1px solid var(--garis); border-radius:16px; background:var(--kartu); width:fit-content; max-width:100%; margin-bottom:18px; }
.k-tab button { border:0; background:none; padding:8px 16px; border-radius:11px; font-size:14px; font-weight:600; color:var(--teks-2); cursor:pointer; white-space:nowrap; }
.k-tab button.aktif { background:var(--kuning-pucat); color:var(--teks); box-shadow:inset 0 0 0 1px var(--kuning-garis); }
.k-masalah { border-radius:16px; padding:20px 22px; border:1px solid; }
.k-masalah.m { background:var(--merah-pucat); border-color:rgba(200,67,58,.25); }
.k-masalah.s { background:var(--hijau-pucat); border-color:rgba(46,125,70,.25); }
.k-masalah h3 { font-size:15px; font-weight:700; margin-bottom:8px; }
.k-masalah li { font-size:14px; color:var(--teks-2); margin:5px 0 5px 18px; }
.k-centang { list-style:none; display:grid; gap:10px; }
.k-centang li { display:flex; gap:10px; font-size:14.5px; color:var(--teks-2); }
.k-centang li svg { width:18px; height:18px; color:var(--kuning-tua); margin-top:2px; }
.k-centang li.mati { opacity:.55; }
.k-centang li.mati svg { color:var(--redup); }
.k-waktu > div { position:relative; padding:0 0 20px 26px; border-left:1px solid var(--garis-kuat); margin-left:6px; }
.k-waktu > div:last-child { padding-bottom:0; }
.k-waktu > div::before { content:""; position:absolute; left:-6px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--kuning); }
.k-waktu time { font-size:12.5px; font-weight:600; color:var(--redup); }
.k-waktu b { display:block; font-size:15px; font-weight:600; }
.k-waktu p { font-size:14px; color:var(--teks-2); }
.k-langkah { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; counter-reset:l; }
.k-langkah div { border:1px solid var(--garis); border-radius:16px; padding:18px; background:var(--kartu-2); }
.k-langkah div::before { counter-increment:l; content:counter(l); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--kuning-pucat); border:1px solid var(--kuning-garis); font-weight:700; font-size:14px; margin-bottom:12px; }
.k-langkah b { display:block; font-size:15px; font-weight:600; }
.k-langkah p { font-size:13.5px; color:var(--redup); margin-top:4px; }
.k-paket { border:1px solid var(--garis); border-radius:18px; padding:24px; display:flex; flex-direction:column; background:var(--kartu); }
.k-paket.utama { border-color:var(--kuning-garis); box-shadow:0 0 0 3px var(--kuning-pucat); }
.k-paket .nama { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:700; }
.k-paket .harga { font-size:38px; font-weight:700; letter-spacing:-.04em; margin:8px 0 16px; }
.k-paket .harga small { font-size:14px; font-weight:600; color:var(--redup); letter-spacing:0; }
.k-paket .k-centang { margin-bottom:22px; flex:1; padding-top:16px; border-top:1px solid var(--garis); }

/* tabel + kosong */
.k-tabel { width:100%; border-collapse:collapse; font-size:14px; }
.k-tabel th { text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--redup); padding:0 10px 12px; border-bottom:1px solid var(--garis); }
.k-tabel td { padding:15px 10px; border-bottom:1px solid var(--garis); color:var(--teks-2); vertical-align:middle; }
.k-tabel td b { color:var(--teks); font-weight:700; }
.k-tabel td.angka { font-weight:700; color:var(--teks); white-space:nowrap; font-variant-numeric:tabular-nums; }
.k-kosong { text-align:center; padding:36px 20px; }
.k-kosong img { width:96px; margin:0 auto 14px; }
.k-kosong h2 { font-size:19px; }
.k-kosong p { color:var(--teks-2); font-size:14.5px; margin:6px auto 18px; max-width:420px; }
.k-kosong-kotak { border:1px dashed var(--garis-kuat); border-radius:16px; padding:22px; text-align:center; font-size:14px; color:var(--teks-2); background:var(--kartu-2); }

/* akun */
.k-profil { display:flex; align-items:center; gap:18px; }
.k-profil > i { width:64px; height:64px; border-radius:50%; background:var(--kuning); color:var(--navy); display:grid; place-items:center; font-style:normal; font-size:26px; font-weight:700; flex:none; }
.k-profil h2 { font-size:22px; font-weight:600; }
.k-profil p { font-size:14px; color:var(--redup); }
.k-info { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-top:26px; }
.k-info span { display:block; font-size:12.5px; color:var(--redup); }
.k-info b { font-size:15px; font-weight:500; word-break:break-word; }
.k-baris-data { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--garis); font-size:14.5px; }
.k-baris-data:last-child { border-bottom:0; }
.k-baris-data span { color:var(--redup); font-size:13px; }
.k-baris-data b { font-weight:500; text-align:right; word-break:break-word; }
.k-ubah { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid var(--garis-kuat); background:var(--kartu); font-size:13px; font-weight:600; cursor:pointer; color:var(--teks); }
.k-ubah svg { width:13px; height:13px; }
.k-ubah:hover { border-color:var(--teks); }
.k-sakelar { position:relative; width:44px; height:26px; flex:none; }
.k-sakelar input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; z-index:1; }
.k-sakelar i { position:absolute; inset:0; border-radius:99px; background:var(--garis-kuat); transition:background .15s; }
.k-sakelar i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.k-sakelar input:checked + i { background:var(--navy); }
html[data-tema="gelap"] .k-sakelar input:checked + i { background:var(--kuning); }
.k-sakelar input:checked + i::after { transform:translateX(18px); }
.k-sakelar input:focus-visible + i { outline:2px solid var(--kuning); outline-offset:2px; }
.k-hapus { font-size:13.5px; font-weight:600; color:var(--merah); }

/* pilihan + segmen */
.k-pilih { display:flex; gap:8px; flex-wrap:wrap; }
.k-pilih label { cursor:pointer; position:relative; }
.k-pilih input { position:absolute; opacity:0; pointer-events:none; }
.k-pilih span { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:999px; border:1px solid var(--garis-kuat); background:var(--kartu); font-size:14px; font-weight:600; color:var(--teks-2); }
.k-pilih input:checked + span { background:var(--kuning-pucat); border-color:var(--kuning-garis); color:var(--teks); }
.k-pilih input:focus-visible + span { outline:2px solid var(--kuning); outline-offset:2px; }
.k-segmen { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--garis); border-radius:12px; padding:4px; background:var(--kartu); }
.k-segmen label { position:relative; cursor:pointer; }
.k-segmen input { position:absolute; opacity:0; pointer-events:none; }
.k-segmen span { display:block; text-align:center; padding:10px 8px; border-radius:9px; font-size:14.5px; font-weight:500; color:var(--teks-2); }
.k-segmen input:checked + span { background:var(--kartu-2); box-shadow:0 1px 3px rgba(30,43,74,.1); color:var(--teks); font-weight:600; }
.k-segmen input:focus-visible + span { outline:2px solid var(--kuning); }
.k-kemajuan { display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600; color:var(--teks-2); margin-bottom:22px; }
.k-kemajuan i { flex:1; height:8px; border-radius:99px; background:var(--kartu-2); border:1px solid var(--garis); overflow:hidden; display:block; }
.k-kemajuan i::before { content:""; display:block; height:100%; width:var(--p); background:var(--kuning); border-radius:99px; transition:width .2s; }

/* bukti beli */
.k-modal { position:fixed; inset:0; z-index:80; background:rgba(13,18,32,.5); display:none; place-items:center; padding:16px; }
.k-modal.buka { display:grid; }
.k-bukti { width:100%; max-width:460px; max-height:calc(100vh - 32px); overflow:auto; background:var(--kartu); border:1px solid var(--garis); border-radius:22px; padding:26px; box-shadow:0 24px 60px rgba(13,18,32,.25); }
.k-bukti-atas { display:flex; justify-content:space-between; align-items:flex-start; }
.k-bukti-atas b { font-size:20px; font-weight:800; letter-spacing:-.04em; }
.k-bukti dl { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:18px 0; font-size:14px; }
.k-bukti dt { color:var(--redup); }
.k-bukti dd { font-weight:600; text-align:right; }
.k-bukti-total { display:flex; justify-content:space-between; padding:12px 16px; border-radius:12px; background:var(--kartu-2); border:1px solid var(--garis); font-weight:700; font-size:17px; }
.k-bukti .k-kecil { margin-top:14px; }
.k-bukti-aksi { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }

/* sakelar data contoh (hanya pratinjau) */
.k-contoh { display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 14px; margin-bottom:18px; border-radius:999px; background:var(--navy); color:#fff; font-size:12px; font-weight:600; }
.k-contoh button { border:0; cursor:pointer; padding:6px 12px; border-radius:999px; background:transparent; color:rgba(255,255,255,.75); font-size:12px; font-weight:700; }
.k-contoh button.aktif { background:var(--kuning); color:var(--navy); }

.k-toast { position:fixed; left:50%; bottom:28px; z-index:90; transform:translate(-50%, 16px); opacity:0; pointer-events:none; background:var(--navy); color:#fff; padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 10px 26px rgba(13,18,32,.25); transition:opacity .2s, transform .2s; }
.k-toast.tampil { opacity:1; transform:translate(-50%, 0); }

/* halaman satu kartu: masuk */
.k-tengah { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 16px 48px; }
.k-tengah > .k-logo { margin-bottom:30px; }
.k-kartu-tengah { position:relative; width:100%; max-width:450px; background:var(--kartu); border:1px solid var(--garis); border-radius:24px; padding:30px; box-shadow:var(--bayang); }
.k-kartu-tengah h1 { font-size:26px; font-weight:700; letter-spacing:-.03em; }
.k-kartu-tengah .k-segmen { margin-bottom:22px; }
.k-kartu-tengah .k-intip-sel { position:absolute; width:92px; right:-22px; top:-58px; transform:rotate(8deg); }
.k-atau { display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12.5px; font-weight:600; color:var(--redup); }
.k-atau::before, .k-atau::after { content:""; flex:1; height:1px; background:var(--garis); }
.k-setuju { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--teks-2); margin-top:14px; cursor:pointer; }
.k-setuju input { width:17px; height:17px; margin-top:3px; accent-color:var(--navy); flex:none; }
.k-setuju a { font-weight:700; color:var(--teks); }
.k-pesan { margin-top:16px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.55; border:1px solid var(--kuning-garis); background:var(--kuning-pucat); color:var(--teks); }
.k-pesan.galat { border-color:rgba(200,67,58,.3); background:var(--merah-pucat); color:var(--merah); }
.k-pesan.oke { border-color:rgba(46,125,70,.3); background:var(--hijau-pucat); color:var(--hijau); }
.k-tombol[disabled] { opacity:.6; cursor:wait; }
.k-memuat { padding:80px 0; text-align:center; color:var(--redup); font-size:14.5px; }
.k-catatan-pratinjau { max-width:450px; margin-top:24px; font-size:12.5px; text-align:center; color:var(--redup); }

/* halaman beli: gelap seperti Insightory */
body.k-beli { background:#0A0F1C; color:#E9ECF3; }
.k-beli .k-logo b { color:#fff; }
.k-beli .k-logo small { color:#8E95A7; }
.k-beli-kartu { width:100%; max-width:510px; background:#111827; border:1px solid #232C42; border-radius:22px; padding:28px; }
.k-beli-kartu .k-label-caps { color:#8E95A7; }
.k-beli-kartu h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.k-sorot { display:flex; gap:12px; margin-top:20px; padding:16px; border-radius:14px; border:1px solid rgba(232,169,46,.65); background:rgba(232,169,46,.08); }
.k-sorot .k-logo-sel { width:40px; height:40px; }
.k-sorot b { display:block; font-size:15px; color:#fff; }
.k-sorot small { display:block; font-size:12.5px; color:var(--kuning); font-weight:600; }
.k-sorot p { font-size:13.5px; color:#C9CEDA; margin-top:8px; }
.k-harga-kotak { margin-top:14px; padding:16px; border-radius:14px; border:1px solid #232C42; background:#0E1424; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.k-harga-kotak .k-label-caps { margin-bottom:2px; }
.k-harga-kotak b { font-size:28px; font-weight:600; color:#fff; letter-spacing:-.02em; }
.k-harga-kotak span.k-chip { background:transparent; border-color:#2F3954; color:#C9CEDA; font-size:12px; padding:3px 10px; }
.k-beli-daftar { list-style:none; display:grid; gap:9px; margin:18px 0; font-size:14px; color:#E9ECF3; }
.k-beli-daftar li { display:flex; gap:9px; }
.k-beli-daftar li svg { width:16px; height:16px; color:var(--kuning); margin-top:3px; }
.k-beli-daftar.titik li { color:#B9BFCD; font-size:13.5px; }
.k-beli-daftar.titik li::before { content:""; width:5px; height:5px; border-radius:50%; background:#5D6B8F; margin-top:9px; flex:none; }
.k-beli-kartu hr { border:0; border-top:1px solid #232C42; margin:6px 0 16px; }
.k-beli-akun { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid #232C42; font-size:13.5px; }
.k-beli-akun span { display:block; color:#8E95A7; font-size:12px; }
.k-beli-akun b { color:#fff; word-break:break-all; }
.k-beli-akun a { color:var(--kuning); font-weight:700; font-size:13px; }
.k-metode { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.k-metode span { font-size:12px; font-weight:600; padding:4px 11px; border-radius:99px; border:1px solid #2F3954; color:#C9CEDA; }
.k-bayar { width:100%; margin-top:18px; padding:14px; border-radius:999px; border:0; cursor:pointer; background:var(--kuning); color:var(--navy); font-size:16px; font-weight:700; }
.k-bayar:hover { background:#F3C35C; }
.k-beli-kartu .k-catatan { text-align:center; font-size:12.5px; color:#B9BFCD; margin-top:12px; }
.k-beli-kaki { margin-top:22px; font-size:12.5px; color:#8E95A7; text-align:center; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.k-beli-kaki svg { width:14px; height:14px; }
.k-beli-kaki a { color:#fff; font-weight:600; }
.k-beli-kartu .k-catatan a { color:#fff; }

/* bar bawah HP */
.k-bar-hp, .k-lapis-menu { display:none; }

@media (max-width: 1280px) {
  .k-baris-sapa { grid-template-columns:1fr; }
  .k-member { max-width:420px; }
  .k-tema span { display:none; }
}
@media (max-width: 1100px) {
  .k-kisi.tiga, .k-mulai-kisi { grid-template-columns:1fr 1fr; }
  .k-kisi.kiri-lebar, .k-kisi.kiri-lebar.seimbang { grid-template-columns:1fr; }
  .k-langkah { grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px) {
  .k-kepala { top:10px; width:calc(100% - 20px); height:56px; padding:0 8px 0 14px; gap:10px; }
  .k-cari, .k-upgrade, .k-avatar span, .k-avatar svg { display:none; }
  .k-kanan { margin-left:auto; }
  .k-tema { padding:0 8px; border:0; }
  .k-avatar { padding:0 4px; height:42px; }
  .k-menu-hp { display:grid; }
  .k-samping { top:0; left:0; bottom:0; max-height:none; border-radius:0 24px 24px 0; width:270px; transform:translateX(-105%); transition:transform .2s; z-index:70; }
  body.menu-buka .k-samping { transform:none; }
  body.menu-buka .k-lapis-menu { display:block; position:fixed; inset:0; z-index:60; background:rgba(13,18,32,.45); }
  .k-samping-atas button { display:none; }
  .k-utama, body.ciut .k-utama { padding:90px 16px 100px; }
  .k-kisi.dua, .k-kunci-kisi { grid-template-columns:1fr; }
  .k-statistik { grid-template-columns:1fr 1fr; }
  .k-bar-hp { display:grid; grid-template-columns:repeat(4, 1fr); position:fixed; z-index:50; left:10px; right:10px; bottom:10px; padding:6px; background:var(--kartu); border:1px solid var(--garis); border-radius:20px; box-shadow:var(--bayang); }
  .k-bar-hp a, .k-bar-hp button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0; border-radius:14px; border:0; background:none; cursor:pointer; text-decoration:none; font-size:11px; font-weight:600; color:var(--teks-2); }
  .k-bar-hp svg { width:20px; height:20px; }
  .k-bar-hp .aktif { background:var(--kuning-pucat); color:var(--teks); }
  .k-banner-sel { width:120px; height:120px; } .k-banner-sel img { width:102px; }
  .k-banner-gambar { width:130px; }
}
@media (max-width: 640px) {
  .k-logo small { display:none; }
  .k-kisi.tiga, .k-mulai-kisi, .k-dua, .k-mini, .k-info, .k-langkah { grid-template-columns:1fr; }
  .k-kartu { padding:20px; }
  .k-member { min-height:220px; }
  .k-banner { padding:24px; min-height:440px; }
  .k-banner-sel { right:16px; bottom:16px; }
  .k-banner .k-tombol { margin-top:auto; }
  .k-banner ul { padding-bottom:0; }
  .k-cari-baris { flex-wrap:wrap; }
  .k-cari-baris .k-masukan { flex-basis:100%; }
  .k-tabel thead { display:none; }
  .k-tabel, .k-tabel tbody, .k-tabel tr, .k-tabel td { display:block; width:100%; }
  .k-tabel tr { border:1px solid var(--garis); border-radius:14px; padding:8px 14px; margin-bottom:10px; }
  .k-tabel td { border:0; padding:5px 0; display:flex; justify-content:space-between; gap:12px; }
  .k-tabel td::before { content:attr(data-k); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--redup); }
  .k-fitur-kepala { flex-wrap:wrap; }
  .k-fitur-kepala .k-tombol { margin-left:55px; }
  .k-hasil b { font-size:28px; }
  .k-saring-baris > span { width:100%; }
  .k-contoh span { display:none; }
  .k-kartu-tengah .k-intip-sel { width:76px; right:-6px; top:-50px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-samping, .k-utama, .k-toast, .k-saklar::after, .k-sakelar i::after { transition:none; }
}
@media print {
  body.cetak-bukti { background:#fff; }
  body.cetak-bukti > *:not(#lapis-bukti) { display:none !important; }
  body.cetak-bukti .k-modal { position:static; display:block; background:none; padding:0; }
  body.cetak-bukti .k-bukti { box-shadow:none; max-height:none; margin:0 auto; }
  body.cetak-bukti .k-bukti-aksi { display:none; }
}