/* =============================================================================
   IMMERO PAGES — halaman informasi & layanan, dipadatkan dan diselaraskan dengan
   desain acuan (oranye #F26522 + navy #133E68). Dimuat SETELAH chael-ui.css.
   =============================================================================
   Permintaan pemilik (2026-10-29): "sesuaikan semua desain dari awal sampai akhir
   dan jangan terlalu besar". Beranda & katalog sudah memakai immero-theme.css;
   berkas ini menyamakan halaman lain yang punya kepala/banner sendiri:

     body.pg-info  about, karir, mitra, systemdesign, bantuan, terms, privacy
                   -> bilah atas & banner oranye dipangkas (dulu py-20/py-32,
                      judul 48-60px), jarak antar bagian dirapatkan.
     body.pg-dark  digital, topup_koin
                   -> latar halaman navy (dulu oranye penuh dengan kartu hitam,
                      teks amber di atas oranye nyaris tak terbaca), tombol
                      gradien "logam" diganti oranye polos, hero & kartu dirapatkan.

   Kelas pg-* dipasang di <body> tiap halaman; semua aturan berawalan itu sehingga
   tidak bocor ke halaman lain. Kelas Tailwind (py-20, text-5xl, dst.) tidak diubah
   karena tailwind-built.css bersifat statis — di sini hanya ditimpa dengan
   kekhususan lebih tinggi. Batalkan dengan membuang kelas pg-* atau <link> ini.
   ========================================================================== */

/* =========================================================== HALAMAN INFORMASI */
body.pg-info { padding-bottom: 2.5rem; }

/* Bilah atas navy (karir, mitra, systemdesign, bantuan, terms, privacy) */
body.pg-info nav.bg-night.py-6 { padding-top: .65rem; padding-bottom: .65rem; }
body.pg-info nav.bg-night h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3; }

/* Banner oranye */
body.pg-info header.bg-brand.py-20,
body.pg-info header.bg-brand.py-16 { padding-top: 1.9rem; padding-bottom: 2.1rem; }
body.pg-info header.bg-brand h1 {
    font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.25; margin-bottom: .55rem;
}
/* Teks di atas oranye: putih penuh (text-white/70 dan kuning amber hanya ±2,5:1 di atas #F26522; putih 3,15:1). */
body.pg-info header.bg-brand p { font-size: .85rem; line-height: 1.55; color: #FFFFFF; }
body.pg-info header.bg-brand p.uppercase { margin-bottom: .35rem; font-size: 10.5px; }
body.pg-info section.relative.bg-brand.py-32 p.font-serif { color: #FFFFFF; }
body.pg-info header.bg-brand form { margin-top: .2rem; }

/* Isi halaman */
body.pg-info main.mt-16 { margin-top: 1.5rem; }
body.pg-info main.mt-12 { margin-top: 1.25rem; }
body.pg-info main section.mb-16 { margin-bottom: 1.6rem; }
body.pg-info main h2.text-2xl { font-size: 1.15rem; font-weight: 700; padding-bottom: .6rem; }
body.pg-info main > h1.text-3xl { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .6rem; }
body.pg-info section.bg-brand-deep.p-10 { padding: 1.6rem 1.25rem; }

/* ---- about.php: kepala putih, hero oranye, dua seksi isi, kaki oranye ---- */
body.pg-info header .h-20 { height: 3.5rem; }
body.pg-info section.relative.bg-brand.py-32 { padding-top: 2.6rem; padding-bottom: 2.8rem; }
body.pg-info section.relative.bg-brand.py-32 h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }
body.pg-info section.relative.bg-brand.py-32 p.font-serif { font-size: 1rem; }
body.pg-info section.relative.bg-brand.py-32 .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
body.pg-info section.py-24 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
body.pg-info section.py-24 .gap-16 { gap: 2rem; }
body.pg-info section.py-24 .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.2rem; }
body.pg-info section.py-24 .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.6rem; }
body.pg-info section.py-24 .sm\:p-12 { padding: 1.5rem; }
body.pg-info section.py-24 .p-8 { padding: 1.3rem; }
body.pg-info section.py-24 h2.text-3xl { font-size: 1.45rem; }
body.pg-info section.py-24 p.text-3xl { font-size: 1.5rem; }
body.pg-info footer.bg-brand.py-16 { padding-top: 1.6rem; padding-bottom: 1.6rem; }
/* ---- about.php: Filosofi Perusahaan & Sang Pendiri (2026-10-30) ----
   Teks filosofi (kiri, beberapa blok judul + paragraf) dan kartu pendiri (kanan, menempel saat digulir di desktop).
   Ditulis sebagai CSS biasa — tailwind-built.css statis dan tidak memuat kelas tata letak baru. */
body.pg-info .ab-fil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
body.pg-info .ab-fil-teks { min-width: 0; }
body.pg-info .ab-fil-teks > span { display: block; margin-bottom: .7rem; }
body.pg-info .ab-fil-blok > * + * { margin-top: .85rem; }
body.pg-info .ab-fil-blok + .ab-fil-blok { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid #E5E5E5; }
body.pg-info .ab-fil-blok h3 { font-size: 1.3rem; }
@media (min-width: 1024px) {
    body.pg-info .ab-fil { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; }
    body.pg-info .ab-fil-card { position: sticky; top: 5rem; }
}

/* Kaki halaman navy, bukan oranye: teks putih transparan (2,7:1) dan tautan abu "Admin Portal" (1,5:1) nyaris tak terbaca di atas oranye. */
body.pg-info footer.bg-brand { background-color: #133E68; border-color: rgba(255, 255, 255, .08); }
body.pg-info footer.bg-brand a.text-neutral-500 { color: #9DB7D5; }
body.pg-info footer.bg-brand a:hover { color: #FFFFFF; }

/* Teks kecil di atas oranye/oranye tua: putih penuh (text-white/70 dan amber-300 hanya 2,2–2,7:1). */
body.pg-info section.bg-brand-deep p { color: #FFFFFF; }
body.pg-info header.bg-brand a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================== HALAMAN GELAP */
/* digital.php & topup_koin.php: kartu "kaca" gelap di atas NAVY, bukan oranye penuh. */
body.pg-dark {
    background: linear-gradient(180deg, #133E68 0%, #0D2F52 100%) fixed;
    background-color: #133E68;
}
/* bilah pengumuman & navigasi atas (kelas Tailwind bernilai arbitrer #B83C0B / #CB430D/90) */
body.pg-dark > div[class*="B83C0B"] { background-color: #0A2644; border-color: rgba(255, 255, 255, .08); }
body.pg-dark > nav { background-color: rgba(13, 47, 82, .94); border-color: rgba(255, 255, 255, .10); }
body.pg-dark > nav .font-serif { font-size: 1rem; letter-spacing: .08em; }
/* (tombol .gold-gradient sudah oranye polos lewat chael-ui.css) */
/* kartu kaca: kebiruan agar menyatu dengan latar navy */
body.pg-dark .glass-card {
    background: rgba(7, 27, 50, .78);
    border-color: rgba(255, 255, 255, .10);
    border-radius: 1rem;
}
body.pg-dark .glass-card-active { border-color: #F26522; }
/* hero & kartu dirapatkan */
body.pg-dark > header.relative { padding-top: 1.6rem; padding-bottom: 1.3rem; }
body.pg-dark > header.relative h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; margin-bottom: .6rem; }
body.pg-dark > header.relative p { font-size: .85rem; line-height: 1.55; }
body.pg-dark > header.relative > div:first-child { margin-bottom: .7rem; }
body.pg-dark > main { margin-bottom: 2.2rem; }
body.pg-dark .glass-card.p-6 { padding: 1.25rem; }
body.pg-dark > footer { background-color: #0A2240; border-color: rgba(255, 255, 255, .08); padding-top: 1.6rem; padding-bottom: 1.6rem; }
@media (max-width: 639.98px) {
    body.pg-dark .glass-card.p-6 { padding: 1rem; }
}

/* ============================================ NAVIGASI ATAS HALAMAN LAYANAN
   digital, topup_koin (pg-dark) dan seller, reseller (pg-top) memakai kepala yang sama: nama merek di kiri, tautan
   tengah (hanya >= 768px), pengalih bahasa + tombol masuk di kanan, dalam SATU baris setinggi tetap (h-20).
   Di bawah ±1100px jumlah lebarnya melebihi layar: tautan tengah menumpuk dan tombol "Masuk / Daftar" terpotong
   di tepi kanan (di ponsel 390px terpotong ±80px). Kini barisnya boleh membungkus: tautan tengah turun ke baris
   kedua, tinggi mengikuti isi (min 3,6rem, lebih ringkas dari 5rem semula), dan tombol dikecilkan di ponsel. */
body.pg-dark > nav > div, body.pg-top > nav > div {
    flex-wrap: wrap; row-gap: .35rem; height: auto; min-height: 3.6rem; padding-top: .4rem; padding-bottom: .4rem;
}
body.pg-top > nav .font-serif { font-size: 1rem; letter-spacing: .08em; }
/* seller & reseller: bilah atas ikut NAVY seperti halaman layanan lain. Dulu oranye berteks gelap + tagline putih 9px
   (2,9:1) dan tautan aktif putih (2,9:1). Tombol "Masuk / Daftar" tetap oranye (kini paling jelas di atas navy),
   tombol nama pengguna (bg-slate-100) tetap terang berteks gelap. */
body.pg-top > nav { background-color: rgba(13, 47, 82, .96); border-color: rgba(255, 255, 255, .10); }
body.pg-top > nav .text-ink:not(.bg-slate-100) { color: #FFFFFF; }
body.pg-top > nav .text-ink\/60 { color: rgba(255, 255, 255, .45); }
body.pg-top > nav a.text-white.font-bold, body.pg-top > nav a.text-white.underline { color: #FFB68A; }
body.pg-top > nav a.transition-colors:hover { color: #FFB68A; }
/* sisa warna tema gelap di atas kartu PUTIH (sky-300/400 hanya 1,6-2,1:1) */
body.pg-top main .text-sky-300, body.pg-top main .text-sky-400 { color: #0369A1; }
@media (max-width: 1099.98px) {
    body.pg-dark > nav > div > .md\:flex, body.pg-top > nav > div > .md\:flex {
        order: 3; flex: 0 0 100%; justify-content: center; gap: 1.1rem; font-size: 12.5px;
    }
}
@media (max-width: 639.98px) {
    body.pg-dark > nav > div > div.flex.items-center, body.pg-top > nav > div > div.flex.items-center { gap: .55rem; }
    body.pg-dark > nav .gold-gradient, body.pg-top > nav .gold-gradient { padding: .45rem .7rem; font-size: 10.5px; }
    body.pg-dark > nav a.px-4.py-2, body.pg-top > nav a.px-4.py-2 { padding: .4rem .65rem; }
}