/* * TEMPLATE 3 — "BENTO" * * Tiga arus desain 2026 yang dipakai apa adanya, bukan sebagai hiasan: * * 1. TATA LETAK BENTO. Ubin modular asimetris di atas CSS Grid asli, menyusun * ulang dirinya sendiri saat layar menyempit. SATU rangkaian DOM untuk semua * ukuran — grid tersembunyi terpisah untuk desktop dan HP menggandakan berat * halaman dan merusak urutan bacanya di layar kecil. * * 2. BRUTALISME TAKTIL. Sudut 0px atau pil penuh, tak ada di antaranya. Garis * 1px keras, dan TIDAK ADA SATU PUN box-shadow: kedalaman dibangun dari * garis yang bertumpuk dan lapisan z-index, bukan dari bayangan lembut. * Ini yang membedakannya dari tata letak generik. * * 3. TIPOGRAFI SEBAGAI STRUKTUR. Judul berskala viewport (clamp + vw) yang * membentang selebar layar, dipasangkan dengan monospace untuk angka dan * metadata. Halaman jadi ringan karena tak bergantung pada foto stok. * * Warnanya SATU aksen sangat jenuh di atas hitam pekat — interupsi, bukan * gradasi. Hitam #000 juga menghemat baterai layar OLED. * * Tekstur butiran memakai SVG feTurbulence sebagai data-URI, bukan gambar dan * bukan WebGL: nol permintaan jaringan, nol beban render 3D. * * Warna toko masuk lewat --accent dan --brand dari layout. TIDAK ADA warna * merek yang dipatok di berkas ini. */ :root { --bg: #000000; --card: #0A0A0A; --card-2: #121212; --line: #262626; --line-2: #3A3A3A; --ink: #FAFAFA; --ink-2: #A3A3A3; --ink-3: #6B6B6B; --accent: #D9F900; /* Tinta = aksen untuk TEKS di atas hitam. Sedikit diangkat supaya aksen yang gelap sekalipun tetap lewat ambang. */ --accent-ink: color-mix(in srgb, var(--accent) 85%, #ffffff); --accent-10: color-mix(in srgb, var(--accent) 10%, transparent); --accent-20: color-mix(in srgb, var(--accent) 20%, transparent); --brand: #FF2E88; --ok: #39FF6A; --bad: #FF3B30; --warn: #FFC400; --gap: 2px; /* Celah antarubin: garisnya yang jadi kisi, bukan jaraknya. */ --bar-h: calc(72px + env(safe-area-inset-bottom, 0px)); } * { box-sizing: border-box; } /* `hidden` HARUS menang: ubin dan bilah bayar punya display dari kelasnya, dan display kelas mengalahkan display:none bawaan atribut. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Butiran halus di seluruh halaman. Fixed supaya tak ikut menggulir — teksturnya jadi milik layar, bukan milik isi. */ body::before { content: ""; /* * z-index -1: butiran duduk DI BAWAH seluruh isi tanpa perlu memaksa setiap * anak jadi position:relative. Versi sebelumnya melakukan itu, dan * memaksa konteks penumpukan pada tiap anak body adalah cara termudah * membuat bilah bayar yang menempel tiba-tiba tertimbun elemen lain. */ position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; } .b3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 12px; } @media (min-width: 768px) { .b3-wrap { padding: 0 20px; } } .b3-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .b3-mute { color: var(--ink-2); } .b3-dim { color: var(--ink-3); } .b3-small { font-size: 13px; } /* Label huruf kapital berjarak: penanda metadata di seluruh tema. */ .b3-kap { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } /* ───────────────────────────── Tipografi ──────────────────────────────── */ /* * Judul berskala viewport. clamp() menahan ujungnya supaya di layar 320px tak * mengecil jadi tak terbaca, dan di monitor lebar tak melar jadi konyol. */ .b3-huge { margin: 0; font-size: clamp(2.25rem, 9vw, 5.5rem); line-height: .92; letter-spacing: -.045em; font-weight: 800; text-transform: uppercase; } .b3-big { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.5rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; text-transform: uppercase; } .b3-h { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } /* ─────────────────────────────── Navigasi ─────────────────────────────── */ .b3-nav { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); } .b3-nav-in { display: flex; align-items: center; gap: 10px; height: 60px; } .b3-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; } .b3-logo-mark { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--accent); color: #000; } .b3-logo-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; } .b3-nav-sp { margin-left: auto; } .b3-search-wrap { position: relative; flex: 1 1 auto; max-width: 360px; display: none; } @media (min-width: 900px) { .b3-search-wrap { display: block; } } .b3-search { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--card); color: var(--ink); outline: none; } .b3-search:focus { border-color: var(--accent); } .b3-search-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: var(--card); border: 1px solid var(--line-2); max-height: 60vh; overflow-y: auto; } .b3-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .b3-search-item:hover, .b3-search-item.is-active { background: var(--accent); color: #000; } .b3-nav-link { display: none; font-size: 12px; } @media (min-width: 720px) { .b3-nav-link { display: inline-block; } } .b3-nav-link:hover { color: var(--accent-ink); } /* ──────────────────────────────── Akun ────────────────────────────────── */ .b3-acc { position: relative; flex: 0 0 auto; } .b3-acc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; } .b3-acc-btn:hover { border-color: var(--accent); } .b3-avatar { width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--accent); color: #000; } .b3-acc-lbl { display: none; line-height: 1.1; text-align: left; } @media (min-width: 520px) { .b3-acc-lbl { display: block; } } .b3-acc-name { display: block; font-size: 12.5px; font-weight: 700; } .b3-acc-saldo { display: block; font-size: 11px; color: var(--accent-ink); font-weight: 700; font-family: ui-monospace, monospace; } .b3-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 252px; background: var(--card); border: 1px solid var(--line-2); } .b3-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--line); } .b3-menu-head strong { display: block; font-size: 14px; } .b3-menu-head span { display: block; font-size: 12px; color: var(--ink-3); word-break: break-all; } .b3-menu-item { display: block; width: 100%; text-align: left; padding: 12px 14px; font-size: 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; } .b3-menu-item:hover { background: var(--accent); color: #000; } .b3-menu-saldo { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--accent-ink); font-weight: 700; font-size: 13px; } .b3-menu-cta { background: var(--accent); color: #000; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .04em; } .b3-menu-note { margin: 0; padding: 10px 14px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; } /* ──────────────────────────────── Tombol ──────────────────────────────── */ /* * Pil penuh atau kotak tegas — tak ada radius setengah jalan. Itu inti * brutalisme taktil: bentuknya harus terbaca sebagai keputusan, bukan bawaan. */ .b3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #000; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color .12s ease, color .12s ease; } .b3-btn:hover:not(:disabled) { background: transparent; color: var(--accent-ink); } .b3-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .b3-btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: transparent; } .b3-btn-full { width: 100%; } .b3-btn:disabled { opacity: .4; cursor: not-allowed; } .b3-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ────────────────────────────── Kisi bento ────────────────────────────── */ /* * Satu kisi, satu DOM. Ubin menyatakan sendiri berapa kolom yang diambilnya * lewat kelas span; di layar sempit semuanya jatuh ke satu kolom tanpa markup * kedua. */ .b3-bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); } @media (min-width: 720px) { .b3-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .b3-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .b3-tile { background: var(--bg); padding: 18px 16px; min-width: 0; display: flex; flex-direction: column; } @media (min-width: 720px) { .b3-tile { padding: 24px 22px; } } .b3-tile--soft { background: var(--card); } .b3-tile--accent { background: var(--accent); color: #000; } .b3-tile--accent .b3-kap, .b3-tile--accent .b3-mute { color: rgba(0,0,0,.62); } .b3-sp-2 { grid-column: span 2; } .b3-sp-3 { grid-column: span 2; } .b3-sp-4 { grid-column: span 2; } .b3-sp-6 { grid-column: span 2; } @media (min-width: 720px) { .b3-sp-3 { grid-column: span 3; } .b3-sp-4 { grid-column: span 4; } .b3-sp-6 { grid-column: span 4; } } @media (min-width: 1024px) { .b3-sp-3 { grid-column: span 3; } .b3-sp-4 { grid-column: span 4; } .b3-sp-6 { grid-column: span 6; } } /* ──────────────────────────────── Langkah ─────────────────────────────── */ .b3-step { border: 1px solid var(--line); background: var(--card); padding: 20px 16px; margin-top: var(--gap); } @media (min-width: 720px) { .b3-step { padding: 26px 24px; } } .b3-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .b3-step-num { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800; background: var(--accent); color: #000; } .b3-step.is-wait .b3-step-num { background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); } .b3-step.is-wait .b3-h { color: var(--ink-3); } .b3-step-num.is-done { background: var(--ok); } /* ────────────────────────────── Kolom isian ───────────────────────────── */ .b3-label { display: block; margin: 0 0 6px; } .b3-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); color: var(--ink); outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .b3-input::placeholder { color: var(--ink-3); font-family: inherit; } .b3-input:focus { border-color: var(--accent); } .b3-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .b3-hint strong { color: var(--ink); } .b3-row-2 { display: grid; gap: var(--gap); } @media (min-width: 520px) { .b3-row-2 { grid-template-columns: 1fr 1fr; } } .b3-nick { margin: 10px 0 0; font-size: 13px; font-family: ui-monospace, monospace; } .b3-nick.is-ok { color: var(--ok); font-weight: 700; } .b3-nick.is-bad { color: var(--bad); } /* ────────────────────────────── Akun tersimpan ────────────────────────── */ .b3-saved { display: grid; gap: var(--gap); margin-bottom: 16px; } .b3-saved-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); } .b3-saved-btn:hover, .b3-saved-btn.is-active { border-color: var(--accent); } .b3-saved-btn.is-active { background: var(--accent-10); } .b3-saved-av { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--accent); color: #000; } .b3-saved-in { min-width: 0; } .b3-saved-in strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .b3-saved-in span { display: block; font-size: 12px; color: var(--ink-3); font-family: ui-monospace, monospace; } /* ───────────────────────────────── Nominal ────────────────────────────── */ .b3-chips { display: flex; gap: var(--gap); overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; } .b3-chips::-webkit-scrollbar { display: none; } .b3-chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; cursor: pointer; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .b3-chip.is-active { background: var(--accent); border-color: var(--accent); color: #000; } .b3-tier { margin: 20px 0 8px; } .b3-tier:first-child { margin-top: 0; } /* Kisi nominal memakai kisi yang sama dengan bento: garis 1px sebagai latar, celah 2px, sehingga ubinnya terbaca sebagai satu blok padat berkisi. */ .b3-noms { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); } @media (min-width: 560px) { .b3-noms { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .b3-nom { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 96px; padding: 14px 12px; cursor: pointer; background: var(--bg); border: 0; transition: background-color .1s ease, color .1s ease; } .b3-nom:hover { background: var(--card-2); } /* Terpilih = blok aksen padat. Tak ada cincin, tak ada bayangan. */ .b3-nom.is-active { background: var(--accent); color: #000; } .b3-nom-name { font-size: 12px; line-height: 1.35; color: var(--ink-2); } .b3-nom.is-active .b3-nom-name { color: rgba(0,0,0,.7); } .b3-nom-price { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-ink); } .b3-nom.is-active .b3-nom-price { color: #000; } /* ───────────────────────── Metode & tanda aman ────────────────────────── */ .b3-pays { display: grid; gap: var(--gap); border: 1px solid var(--line); background: var(--line); } .b3-pay { background: var(--bg); padding: 12px 14px; } .b3-pay strong { display: block; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; } .b3-pay span { display: block; font-size: 12px; color: var(--ink-2); } .b3-trust { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid var(--line-2); } .b3-trust-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; } .b3-trust-item svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-ink); margin-top: 2px; } /* ─────────────────────────────── Ringkasan ────────────────────────────── */ .b3-sum { border: 1px solid var(--line-2); } .b3-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; } .b3-sum-row span:last-child { text-align: right; overflow-wrap: anywhere; font-weight: 600; } .b3-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px; background: var(--accent); color: #000; } .b3-sum-total b { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 800; letter-spacing: -.03em; } /* ────────────────────── Bilah bayar (zona jempol) ─────────────────────── */ .b3-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--accent); } .b3-bar[hidden] { display: none !important; } .b3-bar-info { flex: 1 1 auto; min-width: 0; line-height: 1.15; } .b3-bar-info strong { display: block; font-family: ui-monospace, monospace; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-ink); } .b3-bar .b3-btn { flex: 0 0 auto; min-width: 148px; } .b3-has-bar { padding-bottom: var(--bar-h); } /* ───────────────────────────── Kartu game ─────────────────────────────── */ .b3-games { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); } @media (min-width: 560px) { .b3-games { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .b3-games { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .b3-game { display: flex; flex-direction: column; background: var(--bg); transition: background-color .1s ease; } .b3-game:hover { background: var(--card-2); } .b3-game-art { aspect-ratio: 1 / 1; background: var(--card); position: relative; overflow: hidden; } .b3-game-art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .15s ease; } /* Abu-abu jadi warna hanya saat disentuh: katalognya terbaca sebagai satu kesatuan, dan yang sedang dipilih benar-benar menonjol. */ .b3-game:hover .b3-game-art img { filter: none; } .b3-game-body { padding: 10px 12px 14px; } .b3-game-name { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .b3-game-price { margin: 5px 0 0; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { .b3-game-art img { transition: none; } } /* ───────────────────────── Peringatan & status ────────────────────────── */ .b3-alert { padding: 14px; border: 1px solid; font-size: 13.5px; line-height: 1.5; margin-top: var(--gap); } .b3-alert-info { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-10); } .b3-alert-error { border-color: var(--bad); color: var(--bad); } .b3-alert-ok { border-color: var(--ok); color: var(--ok); } .b3-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; } .b3-badge-wait { color: var(--warn); } .b3-badge-ok { color: var(--ok); } .b3-badge-bad { color: var(--bad); } .b3-badge-run { color: var(--accent-ink); } .b3-dot { width: 6px; height: 6px; background: currentColor; animation: b3-pulse 1.4s ease-in-out infinite; } @keyframes b3-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .b3-dot { animation: none; } } /* ───────────────────────────────── Tabel ──────────────────────────────── */ .b3-table-wrap { overflow-x: auto; border: 1px solid var(--line); } .b3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .b3-table th { text-align: left; padding: 10px 14px; background: var(--card); font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .b3-table td { padding: 13px 14px; border-top: 1px solid var(--line); } .b3-num { text-align: right; font-family: ui-monospace, monospace; } /* ───────────────────────────────── Footer ─────────────────────────────── */ .b3-footer { margin-top: 56px; border-top: 1px solid var(--line); } .b3-footer-in { padding: 32px 0; display: grid; gap: 24px; } @media (min-width: 700px) { .b3-footer-in { grid-template-columns: 1.4fr 1fr; } } .b3-footer-bot { padding: 16px 0 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); } .b3-footer-bot a { color: var(--accent-ink); } /* ──────────────────────── Notifikasi transaksi nyata ──────────────────── */ .b3-proof { position: fixed; left: 12px; bottom: 12px; z-index: 70; display: flex; align-items: center; gap: 10px; max-width: min(330px, calc(100vw - 24px)); padding: 11px 13px; background: var(--card); border: 1px solid var(--accent); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } .b3-proof.is-in { opacity: 1; transform: none; } .b3-proof-dot { width: 7px; height: 7px; background: var(--accent); flex: 0 0 auto; } .b3-proof-body { min-width: 0; line-height: 1.3; } .b3-proof-title { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .b3-proof-meta { display: block; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-3); } .b3-proof-x { border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .b3-has-bar .b3-proof { bottom: calc(var(--bar-h) + 10px); } /* Baris jaminan di kaki halaman. Kotak bergaris, sesuai bahasa tema. */ .b3-jaminan { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 26px 0 0; border: 1px solid var(--line); background: var(--line); } @media (min-width: 860px) { .b3-jaminan { grid-template-columns: repeat(4, minmax(0,1fr)); } } .b3-jaminan-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px; background: var(--bg); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); } .b3-jaminan-item svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-ink); margin-top: 2px; } .b3-jaminan-item strong { display: block; color: var(--ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; } /* Lencana potongan harga: tema brutalis tak mengenal bentuk pil. */ .ff-hemat { border-radius: 0; } /* * Komponen bersama (pengumuman & artikel) dibuat dengan sudut membulat karena * tiga template lain memang begitu. Brutalisme tak mengenal lengkung dan tak * mengenal bayangan, jadi di sini semuanya diluruskan. */ /* * Diawali `body` demi KEKHUSUSAN, bukan gaya penulisan. Gaya bersama itu * ditulis sebagai blok