/* ============================================================
   MYTRIPOL — Tampilan PPOB (isi ulang & bayar tagihan)
   ============================================================ */
.ppob-hero{position:relative;overflow:hidden;border-radius:22px;margin:14px 0 4px;padding:18px 18px 16px;
  background:linear-gradient(140deg,#12a150 0%,#0f7a3d 52%,#08441f 100%);color:#fff;
  box-shadow:0 14px 30px rgba(10,92,45,.20)}
.ppob-hero::before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  right:-56px;top:-70px;background:rgba(255,255,255,.09)}
.ppob-hero::after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;
  right:34px;bottom:-72px;background:rgba(255,255,255,.06)}
.ppob-hero .isi{position:relative;z-index:2;max-width:72%}
.ppob-hero small{font-size:9.5px;font-weight:800;letter-spacing:1.6px;opacity:.85}
.ppob-hero h2{margin:6px 0 6px;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.3px}
.ppob-hero p{margin:0;font-size:11.5px;line-height:1.5;opacity:.92}
.ppob-hero .lencana{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ppob-hero .lencana span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 9px;font-size:9.5px;font-weight:700}
.ppob-hero .gambar{position:absolute;right:12px;bottom:8px;z-index:1;color:rgba(255,255,255,.22);
  transform:rotate(-8deg)}

.ppob-cari{position:sticky;top:0;z-index:30;background:var(--bg);padding:10px 0 8px}
.ppob-cari .kotak{display:flex;align-items:center;gap:9px;background:#fff;border:1.4px solid var(--garis);
  border-radius:15px;padding:11px 13px;box-shadow:0 3px 12px rgba(10,92,45,.05);color:var(--teks-3)}
.ppob-cari input{flex:1;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--teks)}

.ppob-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:6px}
.ppob-kat{display:flex;align-items:center;gap:10px;min-width:0;background:#fff;border:1px solid var(--garis);
  border-radius:16px;padding:11px;box-shadow:0 3px 12px rgba(10,92,45,.05);cursor:pointer;
  transition:transform .13s ease,box-shadow .15s ease;text-align:left}
.ppob-kat:active{transform:scale(.975)}
.ppob-kat .ubin{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--w,#e7f7ee);color:var(--t,#0f7a3d)}
.ppob-kat .teks{min-width:0;flex:1;overflow:hidden}
.ppob-kat b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11.5px;font-weight:800;line-height:1.3;color:var(--teks);
  overflow:hidden}
.ppob-kat small{display:block;font-size:9.5px;font-weight:700;color:var(--teks-3);margin-top:2px}
.ppob-kat small.hidup{color:var(--hijau)}

.ppob-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--garis);
  border-radius:15px;padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:.13s}
.ppob-item:active{transform:scale(.985);background:var(--mint-3)}
.ppob-item .lambang{width:40px;height:40px;flex:none;border-radius:12px;background:var(--mint);
  color:var(--hijau);display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.2px}
.ppob-item .tengah{flex:1;min-width:0;text-align:left}
.ppob-item b{display:block;font-size:12.5px;font-weight:800;line-height:1.3;color:var(--teks)}
.ppob-item small{display:block;font-size:10px;color:var(--teks-3);margin-top:2px;font-weight:600}
.ppob-item .harga{font-size:13px;font-weight:800;color:var(--hijau);white-space:nowrap}
.ppob-item .harga span{display:block;font-size:9px;color:var(--teks-3);font-weight:700;text-align:right}

.ppob-kosong{text-align:center;padding:30px 18px;color:var(--teks-3);font-size:12.5px}
.ppob-kosong b{display:block;color:var(--teks);font-size:14px;margin:10px 0 4px}

.ppob-langkah{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--garis);
  border-radius:14px;padding:10px;margin-bottom:12px;box-shadow:var(--sh)}
.ppob-langkah .titik{flex:1;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--teks-3)}
.ppob-langkah .titik i{width:20px;height:20px;border-radius:50%;background:#eef3f0;color:var(--teks-3);
  display:grid;place-items:center;font-style:normal;font-size:10px;flex:none}
.ppob-langkah .titik.aktif{color:var(--hijau)}
.ppob-langkah .titik.aktif i{background:var(--hijau);color:#fff}

.ppob-bayar{border:1.4px dashed var(--mint-2);background:linear-gradient(180deg,#f7fdf9,#fff);
  border-radius:18px;padding:15px;margin-top:12px;text-align:center}
.ppob-bayar .jumlah{font-size:24px;font-weight:800;color:var(--hijau-tua);letter-spacing:-.5px}
.ppob-bayar .ket{font-size:11px;color:var(--teks-3);margin:2px 0 10px;font-weight:600}
.ppob-bayar img.qr{width:198px;height:198px;margin:8px auto 10px;display:block;border-radius:12px;
  border:1px solid var(--garis);background:#fff;padding:6px}
.ppob-bayar .tautan{word-break:break-all;font-size:10.5px;color:var(--teks-2);background:#fff;
  border:1px solid var(--garis);border-radius:10px;padding:8px;margin-bottom:10px}
.ppob-va{font-size:20px;font-weight:800;letter-spacing:2px;color:var(--teks);margin:6px 0 2px}
.ppob-note{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;color:var(--teks-3);
  line-height:1.5;margin-top:10px;text-align:left}
.ppob-note svg{flex:none;margin-top:1px;color:var(--hijau)}

.ppob-sn{background:var(--mint-3);border:1.4px dashed var(--hijau-2);border-radius:14px;padding:12px;
  margin-top:12px}
.ppob-sn small{font-size:10px;font-weight:800;color:var(--teks-3);letter-spacing:.6px}
.ppob-sn b{display:block;font-size:15px;font-weight:800;color:var(--hijau-tua);word-break:break-all;margin:3px 0 8px}

.ppob-riwayat{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--garis);
  border-radius:15px;padding:11px 12px;margin-bottom:8px;cursor:pointer}
.ppob-riwayat .ikon{width:38px;height:38px;flex:none;border-radius:12px;background:var(--mint);
  color:var(--hijau);display:grid;place-items:center}
.ppob-riwayat .isi{flex:1;min-width:0}
.ppob-riwayat b{display:block;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppob-riwayat small{display:block;font-size:10px;color:var(--teks-3);margin-top:2px}
.ppob-riwayat .kanan{text-align:right;flex:none}
.ppob-riwayat .kanan b{font-size:12px;color:var(--teks);white-space:nowrap}

.st-ppob{display:inline-block;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:7px;margin-top:3px}
.st-ppob.menunggu{background:#fff5e5;color:#b06a00}
.st-ppob.jalan{background:#eaf1ff;color:#2f6fed}
.st-ppob.sukses{background:#e8f7ee;color:#0a7a3d}
.st-ppob.gagal{background:#fdecec;color:#e5484d}

.ppob-info{display:flex;gap:10px;background:#fffbeb;border:1px solid #fde9b8;border-radius:14px;
  padding:12px;font-size:11px;line-height:1.55;color:#8a5a06;margin-top:12px}
.ppob-info b{display:block;font-size:11.5px;margin-bottom:2px}
.ppob-info.warn{background:#fdf2f2;border-color:#f7d4d4;color:#a12d2d}

.pintas-ppob{display:flex;align-items:center;gap:11px;margin:14px 14px 2px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,#0f7a4f,#16a35f);color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(14,110,70,.22)}
.pintas-ppob .ikon{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.pintas-ppob .teks{flex:1;min-width:0}
.pintas-ppob b{display:block;font-size:13.5px;font-weight:800;letter-spacing:.1px}
.pintas-ppob small{display:block;font-size:10.5px;opacity:.86;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pintas-ppob .panah{font-size:22px;line-height:1;opacity:.9}