/* =========================================================
   VoucherNESIA • Typo Compact Patch (mobile-first ≤480px)
   Tujuan:
   - Mengecilkan ukuran font global (lebih hemat ruang)
   - Skala heading rapat & readable
   - Tabel/produk/form jadi lebih padat
   - Tanpa ubah HTML
   ========================================================= */

/* ----- 1) Basis & skala fluid (320–480px) ----- */
html{
  /* Basis 13–15px (fluid). Di device kecil turun, di 480px naik sedikit. */
  font-size: clamp(13px, 3.2vw, 15px);
}
body{
  line-height: 1.35; /* default lebih rapat */
  letter-spacing: .1px;
}

/* ----- 2) Heading lebih kecil & ringkas ----- */
h1{ font-size: 1.15rem; line-height:1.22; }
h2{ font-size: 1.08rem; line-height:1.22; }
h3{ font-size: 1.02rem; line-height:1.22; }
h4{ font-size: 0.98rem; line-height:1.22; }
h5{ font-size: 0.92rem; line-height:1.22; }
h6{ font-size: 0.88rem; line-height:1.22; }

/* ----- 3) Teks umum & utilitas ----- */
p, li, .card, .modal, .dropdown-menu,
.form-text, .alert, .toast, .badge,
.navbar, .offcanvas, .site-footer{
  font-size: .92rem; /* sedikit di bawah 1rem */
}

.small, small{ font-size: .78rem !important; }
.text-xs{ font-size: .74rem !important; }
.text-2xs{ font-size: .68rem !important; }

/* ----- 4) Produk (judul + harga) ----- */
/* Cover berbagai kemungkinan selector judul produk */
.product-card .card-title,
.product-card .title,
.product-card h5, 
.product-card h6{
  font-size: .95rem;
  line-height: 1.25;
  margin-bottom: .25rem;
  font-weight: 700;
}
.product-card .price-label{ font-size: .66rem; }
.product-card .price-value{ font-size: .78rem; }

/* Jika ada deskripsi pendek di kartu */
.product-card .desc,
.product-card .subtitle,
.product-card .meta{
  font-size: .82rem; line-height:1.28;
}

/* ----- 5) Tabel lebih padat (global) ----- */
.table{ font-size: .82rem; }
.table td, .table th{ padding: .45rem .5rem; }
.table thead th{
  font-size: .78rem; 
  letter-spacing: .15px; 
  text-transform: none; 
  opacity:.95;
}

/* Opsi “lebih padat lagi” bila Anda tambahkan class .table-dense di HTML (optional) */
.table.table-dense{ font-size:.78rem; }
.table.table-dense td, .table.table-dense th{ padding:.38rem .45rem; }
.table.table-dense thead th{ font-size:.74rem; }

/* ----- 6) Form field & label ----- */
.form-control, .form-select{
  font-size: .9rem;
  padding-top: .5rem; padding-bottom: .5rem;
}
.form-label, label{ font-size: .86rem; }
.input-group-text{ font-size: .86rem; }

/* ----- 7) Button & badge ukuran lebih hemat ----- */
.btn{ font-size: .9rem; line-height:1.25; }
.btn-sm{ font-size: .82rem; }
.badge{ font-size: .64rem; padding:.28em .42em; }

/* ----- 8) Header & bottom nav ----- */
.header-bar .navbar-brand,
.header-bar .brand{ font-size: .95rem; }

.mobile-bottom-nav .nav-item{ font-size: .74rem; }
.mobile-bottom-nav .nav-item i{ font-size: 1.05rem; }
.mobile-bottom-nav .nav-item small{ font-size: .62rem; }

/* ----- 9) List, link, helper text ----- */
.list-group-item{ font-size: .9rem; }
a{ font-size: .92rem; }
.form-text, .help-text, .hint{
  font-size: .78rem !important;
}

/* ----- 10) Responsive touch-up untuk layar >480px (opsional) ----- */
@media (min-width: 481px){
  html{ font-size: 16px; }      /* kalau dibuka di desktop, sedikit dinaikkan */
  .table{ font-size: .86rem; }
  .table thead th{ font-size: .8rem; }
}

/* ----- 11) Komponen yang sering “kebablasan besar” (fallback) ----- */
/* Jika ada elemen yang masih terasa terlalu besar, kita “netralkan” */
.hero h1, .hero h2{ font-size: 1rem; }
.card .card-header h5, .card .card-header .h5{ font-size: .95rem; }
.card .card-header small{ font-size: .72rem; }

/* Sering dipakai di halaman riwayat / tabel ringkasan */
.summary-title, .section-title{ font-size: .95rem; }
.summary-meta, .section-meta{ font-size: .78rem; }