/* ==========================================================================
MONOCHROME - Design System
Ditulis tangan, tanpa framework. Target: Android 4.4 KitKat (Chromium 30).
ATURAN KOMPATIBILITAS - jangan dilanggar kalau masih mau jalan di KitKat:
- TANPA CSS custom properties (var(--x)) -> baru Chrome 49
- TANPA CSS grid -> baru Chrome 57
- TANPA flex gap -> baru Chrome 84
- TANPA :is() :where() clamp() aspect-ratio
- transform / animation WAJIB ada -webkit-
- placeholder WAJIB ada ::-webkit-input-placeholder
Tema diatur lewat class di : .t-dark atau .t-light
========================================================================== */
/* ---------- reset ---------- */
html, body, div, span, h1, h2, h3, h4, p, a, img, small,
form, label, input, button, table, thead, tbody, tr, th, td, ul, li, main, header, footer, section {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
main, header, footer, section { display: block; }
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* ==========================================================================
FONT - Roboto, sama seperti desain acuan.
Nama family sengaja 'Roboto Web' supaya tidak bentrok dengan Roboto
bawaan sistem. Urutannya bekerja begini:
- Android modern -> memuat woff2 di bawah ini
- Android KitKat -> woff2 tidak didukung, jatuh ke Roboto BAWAAN
sistem (ada sejak Android 4.0) -> 0 KB, huruf sama
- Desktop / iOS -> memuat woff2, karena Roboto tidak terpasang di sana
========================================================================== */
@font-face {
font-family: 'Roboto Web';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/roboto-latin-400-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Roboto Web';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/roboto-latin-500-normal.woff2) format('woff2');
}
/* 700 dipakai juga untuk 800/900 - Roboto tidak punya berat di atas Bold */
@font-face {
font-family: 'Roboto Web';
font-style: normal;
font-weight: 700 900;
font-display: swap;
src: url(../fonts/roboto-latin-700-normal.woff2) format('woff2');
}
body {
/* Roboto BAWAAN SISTEM ditaruh paling depan dengan sengaja.
Browser hanya mengunduh @font-face bila family sebelumnya tidak
ditemukan, jadi:
Android (semua versi) -> pakai Roboto lokal, 0 KB terunduh
Desktop / iOS -> Roboto tidak ada, baru unduh 'Roboto Web' */
font-family: Roboto, 'Roboto Web', "Helvetica Neue", -apple-system,
BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a { text-decoration: none; color: inherit; }
button { background: none; cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; border: 0; }
table { border-collapse: collapse; width: 100%; }
/* ==========================================================================
LAYOUT - pakai float, bukan grid (grid tidak ada di KitKat)
========================================================================== */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.row { margin-left: -8px; margin-right: -8px; }
.row:after { content: ""; display: table; clear: both; }
.col { float: left; width: 100%; padding: 8px; }
@media (min-width: 900px) {
/* Flexbox dipakai HANYA di layar lebar supaya kartu bersebelahan
sama tinggi. Chromium 30 sudah mendukung flexbox tanpa prefix,
tapi -webkit- tetap ditulis untuk perangkat 4.4 paling awal.
Di bawah 900px kolom kembali memakai float dan menumpuk. */
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
float: none;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.card {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
}
/* Kartu yang ditandai .card-fill boleh membagi sisa ruang ke elemen
.fill di dalamnya, supaya tidak menyisakan area kosong di bawah
saat tingginya disamakan dengan kartu sebelah. */
.card-fill {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
/* .fill -> menyerap sisa tinggi kartu (isi tetap rata kiri-kanan)
.fill-center -> menyerap sisa tinggi DAN menengahkan isinya */
.card-fill .fill {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.card-fill .fill-center {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
/* Di dalam flex, text-align:center tidak lagi menengahkan gambar
(gambar menjadi flex item, bukan konten inline). align-items
inilah yang menengahkannya. */
-webkit-align-items: center;
align-items: center;
}
/* Menata ulang posisi kartu di layar lebar tanpa mengubah urutan HTML.
Urutan HTML tetap mengikuti kebutuhan HP (paket sebelum bantuan),
sementara di sini kartu ditata jadi kisi 2x2 seperti desain acuan.
Properti order didukung sejak Chrome 29 -> aman di KitKat. */
.ord-1 { -webkit-order: 1; order: 1; }
.ord-2 { -webkit-order: 2; order: 2; }
.ord-3 { -webkit-order: 3; order: 3; }
.ord-4 { -webkit-order: 4; order: 4; }
.col-5 { width: 41.666%; }
.col-7 { width: 58.333%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
}
/* ==========================================================================
TOPBAR
========================================================================== */
.topbar {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
max-width: 1180px;
margin: 0 auto;
padding: 18px 24px;
}
.brand {
min-width: 0; /* boleh menyusut di layar sempit */
}
/* Logo memanjang.
Lebarnya yang ditentukan, tingginya dibiarkan auto — dengan begitu
max-width bisa mengecilkannya di layar sempit tanpa membuat gambar
gepeng. Kalau tinggi yang dipatok, max-width akan memampatkan lebar
saja dan logonya jadi penyok. */
.brand-logo {
display: block;
width: 490px;
max-width: 100%;
height: auto;
}
/* Slogan dimulai sejajar dengan tulisan "M280.NET", bukan di bawah ikon
lingkarannya. Di dalam berkas logo, tulisan itu mulai pada 12,57% dari
lebar gambar (13,01%) — angka padding di bawah mengikuti lebar logo
tiap ukuran layar. */
.brand-sub { font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.22em; line-height: 1.2; margin-top: 5px;
padding-left: 64px; }
.topbar-actions {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
/* tombol ikon di topbar (ganti tema, bantuan) */
.icon-btn {
width: 38px;
height: 38px;
border-radius: 12px;
border-width: 1px;
border-style: solid;
padding: 0;
line-height: 0;
-webkit-transition: background-color .18s ease, border-color .18s ease;
transition: background-color .18s ease, border-color .18s ease;
}
.icon-btn svg { width: 17px; height: 17px; vertical-align: middle; }
.icon-btn + .icon-btn { margin-left: 8px; }
/* hanya satu ikon tampil per tema */
.t-dark .icon-sun { display: inline-block; }
.t-dark .icon-moon { display: none; }
.t-light .icon-sun { display: none; }
.t-light .icon-moon { display: inline-block; }
/* ==========================================================================
CARD
========================================================================== */
.card {
border-radius: 14px;
border-width: 1px;
border-style: solid;
padding: 24px;
height: 100%;
}
.card-title {
font-size: 21px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.25;
}
.card-head {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.card-sub { font-size: 12px; margin-top: 4px; }
/* ==========================================================================
TILE - kotak statistik kecil di dalam card
========================================================================== */
.tiles { margin-left: -5px; margin-right: -5px; }
.tiles:after { content: ""; display: table; clear: both; }
.tile-col { float: left; width: 50%; padding: 5px; }
@media (min-width: 560px) { .tile-col-3 { width: 33.333%; } }
.tile {
border-radius: 10px;
border-width: 1px;
border-style: solid;
padding: 13px 14px;
}
/* height:100% HANYA untuk tile bersebelahan di dalam .tile-col, supaya
tingginya sama. Kalau dipasang di semua .tile, tile yang jadi anak
langsung kartu (misal kotak QRIS) ikut mengambil 100% tinggi KARTU
dan melimpah keluar batasnya. */
.tile-col .tile { height: 100%; }
.tile-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-bottom: 6px;
}
.tile-value {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.8px;
line-height: 1.15;
}
.tile-value small { font-size: 12px; font-weight: 600; margin-left: 2px; }
.tile-value.mono { font-size: 13px; letter-spacing: 0; word-break: break-all; }
.pill {
display: inline-block;
margin-top: 8px;
padding: 3px 8px;
border-radius: 7px;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 9px;
}
/* ==========================================================================
TAB
========================================================================== */
.tabs {
display: -webkit-flex;
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 20px;
}
.tab {
position: relative;
padding: 0 2px 11px;
margin-right: 26px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
-webkit-transition: color .18s ease;
transition: color .18s ease;
}
.tab:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 2px;
opacity: 0;
-webkit-transition: opacity .18s ease;
transition: opacity .18s ease;
}
.tab.active:after { opacity: 1; }
/* ==========================================================================
FORM
========================================================================== */
.field { margin-bottom: 14px; }
/* Kotak isian bergaya acuan: label KECIL DI DALAM kotak, nilainya di
bawahnya, ikon di sisi kanan. Yang diberi bingkai adalah pembungkusnya
(.input-shell), bukan -nya. */
.input-shell {
position: relative;
padding: 9px 44px 10px 15px;
border-radius: 13px;
border-width: 1px;
border-style: solid;
-webkit-transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field-label {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.11em;
margin-bottom: 2px;
}
.input-shell .input-ico {
position: absolute;
right: 15px;
top: 50%;
margin-top: -8px;
width: 16px;
height: 16px;
line-height: 0;
pointer-events: none;
}
.input {
display: block;
width: 100%;
height: 22px;
padding: 0;
margin: 0;
border: 0;
background: none;
font-size: 14px;
font-weight: 600;
font-family: inherit;
outline: 0;
-webkit-appearance: none;
appearance: none;
}
/* Kolom voucher TIDAK boleh dipaksa huruf besar.
Nama pengguna hotspot MikroTik peka huruf besar-kecil, jadi tampilan
harus apa adanya. Hanya jarak antar huruf yang direnggangkan supaya
kode panjang lebih enak dibaca. */
.input.code { letter-spacing: 0.04em; }
/* KitKat butuh selector berprefix, tidak boleh digabung koma dengan yang modern */
.input::-webkit-input-placeholder { font-weight: 500; letter-spacing: 0; }
.input::-moz-placeholder { font-weight: 500; letter-spacing: 0; opacity: 1; }
.input:-ms-input-placeholder { font-weight: 500; letter-spacing: 0; }
.input::placeholder { font-weight: 500; letter-spacing: 0; }
/* ==========================================================================
BUTTON
========================================================================== */
.btn {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 13px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
border: 0;
-webkit-transition: opacity .18s ease, -webkit-transform .12s ease;
transition: opacity .18s ease, transform .12s ease;
}
.btn:active { -webkit-transform: scale(.98); transform: scale(.98); }
.btn[disabled] { opacity: .65; }
/* Tombol utama: isian biru dengan teks putih, mengikuti desain acuan.
Biru acuan #198AEE dipakai apa adanya akan membuat teks putih hanya
3,55:1 - di bawah ambang. Nadanya dipertahankan (H 208°, S 86%) tetapi
digelapkan ke #0F76D1 sehingga teks putih mencapai 4,63:1. */
.btn-primary { background: #0F76D1; color: #FFFFFF; }
.btn-primary:active { background: #0D66B4; }
/* Tombol netral gelap, untuk aksi yang bukan ajakan utama (mis. Logout) */
.btn-dark { background: #12161E; color: #FFFFFF; }
.btn-dark:active { background: #1C222D; }
.t-light .btn-dark { background: #131A26; color: #FFFFFF; }
.btn-ghost {
height: 46px;
line-height: 44px; /* 46 dikurangi border 1px atas-bawah */
border-width: 1px;
border-style: solid;
background: none;
font-size: 11px;
margin-top: 10px;
}
.btn-inline {
display: inline-block;
width: auto;
height: 30px;
line-height: 30px;
padding: 0 13px;
border-radius: 9px;
font-size: 10px;
letter-spacing: 0.08em;
}
/* ==========================================================================
TABEL PAKET (mirip "screener")
========================================================================== */
.tbl th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
text-align: left;
padding: 0 8px 11px;
white-space: nowrap;
}
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.c, .tbl td.c { text-align: center; }
/* kolom durasi disembunyikan di layar kecil supaya tabel tidak sesak */
@media (max-width: 460px) { .tbl .opt { display: none; } }
.tbl td {
padding: 15px 8px;
border-top-width: 1px;
border-top-style: solid;
vertical-align: middle;
}
.tbl .plan {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.plan-mark {
width: 32px;
height: 32px;
border-radius: 10px;
margin-right: 11px;
text-align: center;
line-height: 32px;
font-size: 12px;
font-weight: 700;
color: #000;
background: #25B443;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.plan-name { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }
.plan-meta { display: block; font-size: 11px; margin-top: 1px; }
.price { font-size: 13px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
.tag {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
border-radius: 5px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
vertical-align: middle;
}
/* ==========================================================================
BARIS INFO (label kiri, nilai kanan)
========================================================================== */
.info-row {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 12px 0;
border-top-width: 1px;
border-top-style: solid;
}
.info-row:first-child { border-top: 0; }
.info-key {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
font-size: 12px;
font-weight: 600;
}
.info-key svg { width: 15px; height: 15px; margin-right: 9px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.info-val {
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
border-radius: 7px;
font-family: "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
}
/* ==========================================================================
ALERT
========================================================================== */
.alert {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
border-left-width: 3px;
border-left-style: solid;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
}
.alert svg { width: 17px; height: 17px; margin-right: 10px; -webkit-flex-shrink: 0; flex-shrink: 0; }
/* ==========================================================================
MODAL
========================================================================== */
.modal {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 100;
padding: 20px;
text-align: center;
overflow-y: auto;
}
.modal.open { display: block; }
/* font-size:0 menghapus spasi tak terlihat di antara ::before dan .modal-box.
Keduanya inline-block; spasi itu memakan ~4px sehingga di layar sempit
kotak modal terdorong ke baris berikutnya - yaitu di BAWAH elemen
penengah setinggi layar penuh, jadi modalnya nyaris tidak kelihatan.
Ukuran huruf dikembalikan di .modal-box. */
.modal { font-size: 0; }
.modal:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.modal-box {
display: inline-block;
vertical-align: middle;
font-size: 15px; /* dikembalikan setelah .modal disetel 0 */
text-align: center;
width: 100%;
max-width: 360px;
border-radius: 22px;
border-width: 1px;
border-style: solid;
padding: 30px 24px;
}
.modal-ico {
width: 54px;
height: 54px;
border-radius: 17px;
margin: 0 auto 16px;
line-height: 0;
padding-top: 15px;
}
.modal-ico svg { width: 24px; height: 24px; }
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.modal-text { font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
.modal-close { font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; margin-top: 14px; }
/* ==========================================================================
DAFTAR KONTAK WHATSAPP
Baris bernama supaya pengguna langsung tahu harus menghubungi siapa.
========================================================================== */
.wa-list { text-align: left; }
.wa-item {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 10px 12px;
margin-bottom: 8px;
border-radius: 12px;
border-width: 1px;
border-style: solid;
-webkit-transition: background-color .16s ease, border-color .16s ease;
transition: background-color .16s ease, border-color .16s ease;
}
.wa-ico {
width: 34px;
height: 34px;
border-radius: 50%;
margin-right: 11px;
background: #25D366; /* hijau resmi WhatsApp */
color: #FFFFFF;
line-height: 0;
padding-top: 9px;
text-align: center;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.wa-ico svg { width: 16px; height: 16px; }
.wa-txt { min-width: 0; } /* boleh menyusut, nomor panjang tidak mendorong keluar */
.wa-name {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.1px;
}
.wa-num {
display: block;
font-size: 11px;
font-weight: 500;
margin-top: 1px;
font-family: "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
}
.wa-go {
margin-left: auto;
padding-left: 8px;
line-height: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.wa-go svg { width: 15px; height: 15px; }
/* ==========================================================================
HALAMAN TENGAH (alogin / error / logout / radvert / flogout)
========================================================================== */
.center-page {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.center-card {
width: 100%;
max-width: 380px;
border-radius: 20px;
border-width: 1px;
border-style: solid;
padding: 34px 26px;
text-align: center;
}
.center-title { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 8px; }
.center-text { font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.status-ring {
position: relative;
width: 84px;
height: 84px;
margin: 0 auto 22px;
}
.status-ring .halo {
position: absolute;
top: 0; left: 0;
width: 84px;
height: 84px;
border-radius: 50%;
opacity: .16;
-webkit-animation: monoPulse 2s infinite;
animation: monoPulse 2s infinite;
}
.status-ring .core {
position: absolute;
top: 12px; left: 12px;
width: 60px;
height: 60px;
border-radius: 19px;
background: #000;
line-height: 0;
padding-top: 18px;
}
.status-ring .core svg { width: 24px; height: 24px; }
@-webkit-keyframes monoPulse {
0% { -webkit-transform: scale(.82); opacity: .38; }
100% { -webkit-transform: scale(1.28); opacity: 0; }
}
@keyframes monoPulse {
0% { transform: scale(.82); opacity: .38; }
100% { transform: scale(1.28); opacity: 0; }
}
/* bar progres */
.bar { height: 4px; border-radius: 4px; overflow: hidden; margin: 18px 0 12px; }
.bar i {
display: block;
height: 100%;
width: 0;
background: #198AEE;
-webkit-animation: monoGrow 3s linear forwards;
animation: monoGrow 3s linear forwards;
}
@-webkit-keyframes monoGrow { to { width: 100%; } }
@keyframes monoGrow { to { width: 100%; } }
.bar-row {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
}
/* titik loading */
.dots { line-height: 0; margin-bottom: 9px; }
.dots i {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
margin: 0 2px;
-webkit-animation: monoBlink 1.4s infinite linear;
animation: monoBlink 1.4s infinite linear;
}
.dots i:nth-child(2) { -webkit-animation-delay: .2s; animation-delay: .2s; }
.dots i:nth-child(3) { -webkit-animation-delay: .4s; animation-delay: .4s; }
@-webkit-keyframes monoBlink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes monoBlink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
/* ==========================================================================
KOMPONEN BERGAYA ACUAN
chips (pilihan cepat), subtabs (tab kecil + badge angka),
coin (ikon bulat berwarna), price (harga dengan prefiks redup)
========================================================================== */
/* --- deretan chip, mirip pemilih rentang waktu 1m/5m/1h --- */
.chips {
display: -webkit-flex;
display: flex;
border-radius: 10px;
padding: 3px;
margin-bottom: 16px;
}
.chip {
-webkit-flex: 1 1 0;
flex: 1 1 0;
text-align: center;
padding: 6px 4px;
border-radius: 7px;
border: 0;
font-size: 11px;
font-weight: 500;
font-family: inherit;
-webkit-transition: background-color .16s ease, color .16s ease;
transition: background-color .16s ease, color .16s ease;
}
/* --- tab kecil dengan garis bawah + badge angka --- */
.subtabs {
display: -webkit-flex;
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 4px;
}
.subtab {
position: relative;
padding: 0 2px 10px;
margin-right: 22px;
border: 0;
font-size: 12px;
font-weight: 500;
font-family: inherit;
white-space: nowrap;
}
.subtab:after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
opacity: 0;
}
.subtab.active:after { opacity: 1; }
.count {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
vertical-align: middle;
}
/* --- ikon bulat berwarna per paket, seperti ikon koin --- */
.coin {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 11px;
text-align: center;
line-height: 30px;
font-size: 13px;
font-weight: 700;
/* Teks selalu gelap: diuji terhadap kelima warna paket, semuanya
>= 5,27:1 dengan teks gelap, sedangkan teks putih gagal (1,77-3,69). */
color: #0A0D12;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
/* kode paket, seperti ticker BTC/ETH di sebelah nama */
.ticker {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
margin-left: 7px;
}
/* --- harga: prefiks "Rp" dan angka desimal dibuat redup --- */
.price .cur { font-weight: 400; margin-right: 3px; }
.price .dec { font-weight: 400; }
.chg { font-size: 12px; font-weight: 500; white-space: nowrap; }
/* --- tombol panah "buka", seperti kolom Trade --- */
.go {
display: inline-block;
line-height: 0;
padding: 6px;
border: 0;
background: none;
}
.go svg { width: 15px; height: 15px; }
/* --- tombol ikon kecil di kepala kartu --- */
.mini-btns {
-webkit-flex-shrink: 0;
flex-shrink: 0;
white-space: nowrap;
}
/* ==========================================================================
SLIDER GAMBAR (banner berjalan)
Gambar dipasang lewat background-image, BUKAN tag ![]()
, karena
object-fit baru ada di Chrome 32 sedangkan KitKat awal masih 30.
background-size:cover sudah didukung sejak lama dan hasilnya sama:
gambar mengisi bingkai tanpa gepeng.
========================================================================== */
.slider {
position: relative;
margin-top: 18px;
border-radius: 12px;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
/* Bingkai rasio tetap 12:5. aspect-ratio baru Chrome 88, jadi dipakai
cara lama: padding-top berupa persen dari LEBAR elemen. */
.slider-frame {
position: relative;
width: 100%;
padding-top: 41.66%;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
-webkit-transition: opacity .55s ease;
transition: opacity .55s ease;
}
.slide.on { opacity: 1; }
.slide > a { display: block; width: 100%; height: 100%; }
/* titik penanda */
.sdots {
position: absolute;
left: 0; right: 0; bottom: 9px;
text-align: center;
line-height: 0;
}
.sdot {
display: inline-block;
width: 7px;
height: 7px;
margin: 0 3px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
-webkit-transition: width .25s ease, background-color .25s ease;
transition: width .25s ease, background-color .25s ease;
}
.sdot.on { width: 18px; border-radius: 4px; background: #FFFFFF; }
/* panah kiri/kanan */
.snav {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .38);
color: #FFFFFF;
line-height: 0;
}
.snav svg { width: 15px; height: 15px; }
.sprev { left: 8px; }
.snext { right: 8px; }
/* di layar sempit panah disembunyikan - cukup geser dengan jari */
@media (max-width: 560px) {
.snav { display: none; }
}
/* Logo mengecil bertahap supaya tidak berebut tempat dengan tombol topbar.
Padding slogan selalu 12,57% dari lebar logo agar tetap sejajar dengan
tulisan "M280.NET" di gambar. */
@media (max-width: 899px) {
.brand-logo { width: 360px; }
.brand-sub { padding-left: 47px; }
}
@media (max-width: 560px) {
.brand-logo { width: 260px; }
.brand-sub { padding-left: 34px; }
.topbar { padding: 16px; }
}
@media (max-width: 420px) {
.brand-logo { width: 200px; }
.brand-sub { padding-left: 26px; }
}
@media (max-width: 340px) {
.brand-logo { width: 170px; }
.brand-sub { padding-left: 22px; }
}
/* ==========================================================================
UTIL
========================================================================== */
.hide { display: none; }
.mt-0 { margin-top: 0; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mb-14 { margin-bottom: 14px; }
.tiny {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
text-align: center;
}
.page-foot { padding: 26px 16px 34px; }
.qris-box { text-align: center; padding-top: 4px; }
/* Logo QRIS bawaan berwarna hitam. Tanpa alas putih ia hilang di tema gelap. */
.qris-box img {
max-width: 132px;
background: #FFFFFF;
border-radius: 8px;
padding: 7px 10px;
margin: 2px 0 6px;
}
/* ==========================================================================
=============== T E M A G E L A P ====================================
Warna diambil dari desain acuan yang dikirim pengguna:
latar kartu #2A2937 · kolom isian #343544 · biru #198AEE
Halaman dibuat sedikit lebih gelap (#232230) agar kartu tetap terbaca
sebagai bidang yang terangkat.
Biru #198AEE dipakai HANYA sebagai garis/isian (elemen grafis, ambang
3,0). Untuk TEKS dipakai #5EADF3 yang lebih terang, karena #198AEE
hanya mencapai 4,02:1 di atas kartu - di bawah ambang 4,5.
========================================================================== */
.t-dark body { background: #232230; color: #E7EAEF; }
.t-dark .brand-sub { color: #9AA0B3; }
.t-dark .icon-btn { background: #343544; border-color: #3F3E4F; color: #A6ABBC; }
.t-dark .icon-btn:active { background: #45445608; background: #454456; }
.t-dark .card { background: #2A2937; border-color: #363547; }
.t-dark .card-title { color: #E7EAEF; }
.t-dark .card-sub { color: #9AA0B3; }
.t-dark .tile { background: #343544; border-color: #3F3E4F; }
.t-dark .tile-label { color: #A6ABBC; }
.t-dark .tile-value { color: #E7EAEF; }
.t-dark .tile-value small { color: #A6ABBC; }
.t-dark .pill-up { background: rgba(53, 201, 84, .14); color: #4ED96B; }
.t-dark .pill-down { background: rgba(229, 72, 77, .14); color: #FF8A8D; }
.t-dark .pill-mute { background: #3F3E4F; color: #A6ABBC; }
.t-dark .dot-on { background: #35C954; }
.t-dark .tag { background: rgba(25, 138, 238, .18); color: #5EADF3; }
.t-dark .tabs { border-bottom-color: #363547; }
.t-dark .tab { color: #9AA0B3; }
.t-dark .tab.active { color: #E7EAEF; }
.t-dark .tab:after { background: #198AEE; }
.t-dark .field-label { color: #A6ABBC; }
.t-dark .input-shell { background: #343544; border-color: #3F3E4F; }
/* Garis biru saat kolom aktif — persis seperti desain acuan. */
.t-dark .input-shell.on { background: #2F2E3D; border-color: #198AEE;
box-shadow: 0 0 0 3px rgba(25, 138, 238, .16); }
.t-dark .input { color: #E7EAEF; }
.t-dark .input::-webkit-input-placeholder { color: #8E94A8; }
.t-dark .input::-moz-placeholder { color: #8E94A8; }
.t-dark .input:-ms-input-placeholder { color: #8E94A8; }
.t-dark .input::placeholder { color: #8E94A8; }
.t-dark .input-ico { color: #8E94A8; }
.t-dark .btn-ghost { border-color: #3F3E4F; color: #A6ABBC; }
.t-dark .btn-ghost:active { background: #343544; }
.t-dark .btn-inline { background: #0F76D1; color: #FFFFFF; }
.t-dark .btn-dark { background: #1B1A26; color: #FFFFFF; }
.t-dark .btn-dark:active { background: #232230; }
.t-dark .tbl th { color: #A6ABBC; }
.t-dark .tbl td { border-top-color: #363547; }
.t-dark .plan-name { color: #E7EAEF; }
.t-dark .plan-meta { color: #9AA0B3; }
.t-dark .price { color: #E7EAEF; }
.t-dark .price .cur { color: #9AA0B3; }
.t-dark .price .dec { color: #9AA0B3; }
.t-dark .info-row { border-top-color: #363547; }
.t-dark .info-key { color: #C8CCD8; }
.t-dark .info-key svg { color: #8E94A8; }
.t-dark .info-val { background: #343544; color: #A6ABBC; }
.t-dark .alert-err { background: rgba(229, 72, 77, .12); border-left-color: #E5484D; color: #FF9497; }
.t-dark .alert-warn { background: rgba(255, 196, 61, .12); border-left-color: #FFC43D; color: #FFD478; }
.t-dark .modal { background: rgba(15, 14, 22, .84); }
.t-dark .modal-box { background: #2A2937; border-color: #363547; }
.t-dark .modal-ico { background: rgba(25, 138, 238, .16); color: #5EADF3; }
.t-dark .modal-title { color: #E7EAEF; }
.t-dark .modal-text { color: #9AA0B3; }
.t-dark .modal-close { color: #A6ABBC; }
.t-dark .wa-item { background: #343544; border-color: #3F3E4F; }
.t-dark .wa-item:active { background: #3C3B4D; border-color: #4A4960; }
.t-dark .wa-name { color: #E7EAEF; }
.t-dark .wa-num { color: #A6ABBC; }
.t-dark .wa-go { color: #8E94A8; }
.t-dark .center-card { background: #2A2937; border-color: #363547; }
.t-dark .center-title { color: #E7EAEF; }
.t-dark .center-text { color: #9AA0B3; }
.t-dark .bar { background: #3F3E4F; }
.t-dark .bar-row { color: #A6ABBC; }
.t-dark .dots i { background: #A6ABBC; }
.t-dark .tiny { color: #8F93A6; }
.t-dark .status-ring .core svg { color: #5EADF3; }
.t-dark .slider { background: #343544; border-color: #3F3E4F; }
.t-dark .chips { background: #343544; }
.t-dark .chip { color: #A6ABBC; }
.t-dark .chip.active { background: #454456; color: #E7EAEF; }
.t-dark .subtabs { border-bottom-color: #363547; }
.t-dark .subtab { color: #9AA0B3; }
.t-dark .subtab.active { color: #E7EAEF; }
.t-dark .subtab.active:after { background: #E7EAEF; }
.t-dark .count { background: #3F3E4F; color: #A6ABBC; }
.t-dark .chg-up { color: #4ED96B; }
.t-dark .chg-down { color: #FF8A8D; }
.t-dark .go { color: #8E94A8; }
.t-dark .go:active { color: #5EADF3; }
/* ==========================================================================
=============== T E M A T E R A N G ==================================
========================================================================== */
.t-light body { background: #F2F5FA; color: #0E1420; }
.t-light .brand-sub { color: #5B6880; }
.t-light .brand-name { color: #0B1220; }
.t-light .icon-btn { background: #FFFFFF; border-color: #E1E7F0; color: #64748B; }
.t-light .icon-btn:active { background: #F1F5F9; }
.t-light .card { background: #FFFFFF; border-color: #E4EAF3; }
.t-light .card-title { color: #0B1220; }
.t-light .card-sub { color: #5B6880; }
.t-light .tile { background: #F7F9FC; border-color: #E9EEF6; }
.t-light .tile-label { color: #5B6880; }
.t-light .tile-value { color: #0B1220; }
.t-light .tile-value small { color: #5B6880; }
/* Hijau #25B443 terlalu terang di atas putih - pakai hijau tua untuk teks */
.t-light .pill-up { background: rgba(14, 159, 60, .1); color: #0A7C2E; }
.t-light .pill-down { background: rgba(220, 38, 38, .09); color: #C62828; }
.t-light .pill-mute { background: #EEF2F7; color: #556173; }
.t-light .dot-on { background: #0E9F3C; }
.t-light .tag { background: rgba(15, 118, 209, .12); color: #0D66B4; }
.t-light .tabs { border-bottom-color: #E4EAF3; }
.t-light .tab { color: #64748B; }
.t-light .tab.active { color: #0B1220; }
.t-light .tab:after { background: #0F76D1; }
.t-light .field-label { color: #5B6880; }
.t-light .input-shell { background: #F7F9FC; border-color: #E1E7F0; }
.t-light .input-shell.on { background: #FFFFFF; border-color: #0F76D1;
box-shadow: 0 0 0 3px rgba(15, 118, 209, .13); }
.t-light .input { color: #0B1220; }
.t-light .input::-webkit-input-placeholder { color: #A3AEC2; }
.t-light .input::-moz-placeholder { color: #A3AEC2; }
.t-light .input:-ms-input-placeholder { color: #A3AEC2; }
.t-light .input::placeholder { color: #A3AEC2; }
.t-light .input-ico { color: #A3AEC2; }
.t-light .btn-ghost { border-color: #E1E7F0; color: #64748B; }
.t-light .btn-ghost:active { background: #F1F5F9; }
.t-light .btn-inline { background: #0F76D1; color: #FFFFFF; }
.t-light .tbl th { color: #5B6880; }
.t-light .tbl td { border-top-color: #EDF1F7; }
.t-light .plan-name { color: #0B1220; }
.t-light .plan-meta { color: #5B6880; }
.t-light .price { color: #0B1220; }
.t-light .info-row { border-top-color: #EDF1F7; }
.t-light .info-key { color: #46536B; }
.t-light .info-key svg { color: #A3AEC2; }
.t-light .info-val { background: #F1F5F9; color: #556173; }
.t-light .alert-err { background: #FEF2F2; border-left-color: #DC2626; color: #B91C1C; }
.t-light .alert-warn { background: #FFFBEB; border-left-color: #F59E0B; color: #B45309; }
.t-light .modal { background: rgba(11, 18, 32, .55); }
.t-light .modal-box { background: #FFFFFF; border-color: #E4EAF3; }
.t-light .modal-ico { background: rgba(15, 118, 209, .1); color: #0F76D1; }
.t-light .modal-title { color: #0B1220; }
.t-light .modal-text { color: #5B6880; }
.t-light .modal-close { color: #64748B; }
.t-light .wa-item { background: #F7F9FC; border-color: #E4EAF3; }
.t-light .wa-item:active { background: #EEF2F7; border-color: #D4DDE9; }
.t-light .wa-name { color: #0B1220; }
.t-light .wa-num { color: #5B6880; }
.t-light .wa-go { color: #94A3B8; }
.t-light .center-card { background: #FFFFFF; border-color: #E4EAF3; }
.t-light .center-title { color: #0B1220; }
.t-light .center-text { color: #5B6880; }
.t-light .bar { background: #E9EEF6; }
.t-light .bar-row { color: #5B6880; }
.t-light .dots i { background: #A3AEC2; }
.t-light .tiny { color: #5B6880; }
.t-light .status-ring .core svg { color: #5EADF3; }
.t-light .slider { background: #F7F9FC; border-color: #E4EAF3; }
.t-light .chips { background: #EEF2F7; }
.t-light .chip { color: #556173; }
.t-light .chip.active { background: #FFFFFF; color: #0B1220; }
.t-light .subtabs { border-bottom-color: #E4EAF3; }
.t-light .subtab { color: #64748B; }
.t-light .subtab.active { color: #0B1220; }
.t-light .subtab.active:after { background: #0B1220; }
.t-light .count { background: #EEF2F7; color: #556173; }
.t-light .chg-up { color: #0A7C2E; }
.t-light .chg-down { color: #C62828; }
.t-light .go { color: #64748B; }
.t-light .go:active { color: #0B8A33; }
.t-light .price .cur { color: #5B6880; }
.t-light .price .dec { color: #5B6880; }
/* tanda merah/hijau untuk halaman error & sukses */
.ring-ok .halo { background: #198AEE; }
.ring-err .halo { background: #FF5A5A; }
.ring-err .core svg { color: #FF5A5A; }
/* ==========================================================================
HALAMAN BELI (beli.html)
========================================================================== */
.beli-wrap { max-width: 520px; margin-left: auto; margin-right: auto; }
/* Ringkasan paket yang sedang dibeli */
.pk {
display: block;
padding: 14px 16px;
border-radius: 14px;
border-width: 1px;
border-style: solid;
}
.pk-row {
display: -webkit-box; display: -webkit-flex; display: flex;
-webkit-box-align: center; -webkit-align-items: center; align-items: center;
}
.pk-row .coin { margin-right: 12px; }
.pk-txt { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.pk-right { text-align: right; white-space: nowrap; padding-left: 10px; }
/* Kotak QR selalu putih, di tema gelap sekalipun - pemindai e-wallet
butuh kontras hitam-di-putih dan tepi kosong di sekelilingnya. */
.qr-card {
background: #FFFFFF;
border-radius: 16px;
padding: 14px;
text-align: center;
}
.qr-card img {
display: inline-block;
width: 100%;
max-width: 250px;
height: auto;
}
.qr-card .qr-cap { color: #4A5261; font-size: 11px; margin-top: 6px; }
.total-box { text-align: center; padding: 4px 0 14px; }
.total-lbl {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .11em; margin-bottom: 4px;
}
.total-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.total-num .cur { font-size: 15px; font-weight: 700; margin-right: 3px; vertical-align: 3px; }
.total-num .unik { color: #E08A00; }
.langkah {
height: 4px; border-radius: 99px; overflow: hidden;
margin-bottom: 18px;
}
.langkah i { display: block; height: 100%; border-radius: 99px; }
.urut { padding-left: 20px; margin: 0; }
.urut li { font-size: 13px; line-height: 1.75; }
/* --- tema --- */
.t-light .pk { background: #F4F7FB; border-color: #E2E8F2; }
.t-light .qr-card { border: 1px solid #E2E8F2; }
.t-light .langkah { background: #E2E8F2; }
.t-light .langkah i { background: #0F76D1; }
.t-light .total-num .unik { color: #B36A00; }
.t-dark .pk { background: #343544; border-color: #3F3E4F; }
.t-dark .qr-card { border: 1px solid #FFFFFF; }
.t-dark .langkah { background: #3F3E4F; }
.t-dark .langkah i { background: #198AEE; }
/* --- daftar rekening transfer --- */
.bank {
padding: 12px 14px;
border-radius: 13px;
border-width: 1px;
border-style: solid;
margin-bottom: 10px;
}
.bank-atas {
display: -webkit-box; display: -webkit-flex; display: flex;
-webkit-box-align: center; -webkit-align-items: center; align-items: center;
margin-bottom: 6px;
}
.bank-nama {
-webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
}
.btn-salin {
-webkit-appearance: none; appearance: none;
border: 0; cursor: pointer; font-family: inherit;
padding: 7px 13px; border-radius: 8px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* Nomor rekening sengaja berupa kolom isian: di HP lama tombol Salin tidak
selalu bisa menyentuh papan klip, tetapi kolom isian selalu bisa disorot
lalu ditekan-lama untuk disalin. */
.bank-no {
display: block; width: 100%;
-webkit-appearance: none; appearance: none;
border: 0; padding: 0; margin: 0; background: none;
font-family: 'Courier New', Courier, monospace;
font-size: 19px; font-weight: 700; letter-spacing: .03em;
}
.bank-atas-nama { font-size: 11px; margin-top: 3px; }
.t-light .bank { background: #F4F7FB; border-color: #E2E8F2; }
.t-light .bank-nama { color: #5B6880; }
.t-light .bank-no { color: #0B1220; }
.t-light .bank-atas-nama { color: #5B6880; }
.t-light .btn-salin { background: #0D66B4; color: #FFFFFF; }
.t-dark .bank { background: #343544; border-color: #3F3E4F; }
.t-dark .bank-nama { color: #A7ABBD; }
.t-dark .bank-no { color: #FFFFFF; }
.t-dark .bank-atas-nama { color: #A7ABBD; }
.t-dark .btn-salin { background: #0F76D1; color: #FFFFFF; }
/* --- kartu paket yang bisa ditekan (halaman etalase website) --- */
.pk-pilih { cursor: pointer; }
.pk-pilih .pk-right { text-align: right; }
.t-light .pk-pilih:active { background: #E8EEF7; border-color: #0D66B4; }
.t-dark .pk-pilih:active { background: #3C3D4E; border-color: #198AEE; }
.mb-14 { margin-bottom: 14px; }
/* Label "Terlaris" duduk di atas kartu paket (#343544), bukan di atas kartu
biasa (#2A2937) yang lebih gelap. Di latar yang lebih terang itu warna
birunya hanya mencapai 4,1:1 - di bawah ambang. Dicerahkan khusus untuk
tempat ini saja: 5,06:1. */
.t-dark .pk .tag { color: #7FC0F5; }