/* Situs publik Bank BSA (di atas styles.css NexLink/Bootstrap 5.3 + bsa.css). Identitas tema lama: Poppins, biru #14438a, aksen oranye. */
@font-face { font-family: Poppins; font-weight: 300; font-display: swap; src: url(../fonts/Poppins-Light.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(../fonts/Poppins-Regular.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(../fonts/Poppins-Medium.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(../fonts/Poppins-SemiBold.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(../fonts/Poppins-Bold.ttf) format("truetype"); }

:root, [data-bs-theme=light] {
  --bsa-biru: #14438a;
  --bsa-biru-tua: #0c2a57;
  --bsa-oranye: #f39c12;
  --bsa-latar: #eff0f4;
  --bs-body-font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: #4b5160;
  --bs-heading-color: #181920;
}
body.situs { font-family: var(--bs-body-font-family); background: var(--bsa-latar); color: var(--bs-body-color); font-size: .975rem; line-height: 1.7; }
.situs h1, .situs h2, .situs h3, .situs h4, .situs h5, .situs h6 { font-family: var(--bs-body-font-family); color: var(--bs-heading-color); font-weight: 600; }
.situs a { text-decoration: none; }
.lompat { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; }

/* Header */
.situs-topbar { background: #fff; color: #8b8e94; font-size: 12px; }
.situs-topbar > .container { border-bottom: 1px solid #f2f2f2; padding-top: 7px; padding-bottom: 7px; }
.situs-topbar i { color: #e37b18; }
.situs-nav { background: #fff; padding-top: .6rem; padding-bottom: .6rem; }
@media (min-width: 992px) { .situs-nav { padding-top: 0; padding-bottom: 0; } .situs-nav .navbar-nav .nav-link { padding: 26px 0 !important; margin: 0 15px; } }
@media (min-width: 992px) and (max-width: 1500px) { .situs-nav .navbar-nav .nav-link { margin: 0 8px; } }
@media (min-width: 992px) and (max-width: 1200px) { .situs-nav .navbar-nav .nav-link { margin: 0 4px; font-size: 14px; } nav.situs-nav .navbar-brand img { height: 38px; } }
.situs-nav .navbar-brand img { height: 44px; width: auto; }
.situs-nav .nav-link { white-space: nowrap; color: #000; font-weight: 400; font-size: 15px; padding: .5rem .8rem !important; }
.situs-nav .nav-link:hover, .situs-nav .nav-link:focus-visible, .situs-nav .nav-link.active, .situs-nav .nav-link.show { color: var(--bsa-biru); }
.situs-nav .dropdown-menu { border: 0; box-shadow: 0 10px 30px rgba(16,24,40,.12); border-top: 3px solid var(--bsa-biru); border-radius: .4rem; }
.situs-nav .dropdown-item { font-size: .9rem; padding: .5rem 1.1rem; }
.situs-nav .dropdown-item { color: #222; }
.situs-nav .dropdown-item:hover, .situs-nav .dropdown-item:focus { background: #eef3fa; color: var(--bsa-biru); }
.situs-nav .dropdown-item:active, .situs-nav .dropdown-item.active { background: var(--bsa-biru); color: #fff; }
.situs-nav .navbar-toggler { border: 0; font-size: 1.4rem; color: var(--bsa-biru); }
@media (max-width: 991.98px) {
  .situs-nav .navbar-collapse { max-height: calc(100vh - 70px); overflow-y: auto; padding-bottom: .75rem; }
  .situs-nav .dropdown-menu { box-shadow: none; border-top: 0; padding-left: .75rem; }
}

/* Tipografi isi situs seperti tema lama: judul tipis (300), teks abu lembut (digelapkan sedikit agar kontras cukup) */
.situs-bingkai { color: #6f7380; font-weight: 400; }
.situs-bingkai h1, .situs-bingkai h2, .situs-bingkai h3 { font-weight: 300; }

/* Judul halaman = .probootstrap-section-colored lama: biru polos, judul besar tipis, tanpa breadcrumb */
.judul-halaman { background: var(--bsa-biru); color: #fff; padding: 4.5em 0; position: relative; }
.judul-halaman.dengan-gambar { background-size: cover; background-position: center; }
.judul-halaman.dengan-gambar::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.judul-halaman > .container { position: relative; }
.judul-halaman h1 { color: #fff; font-size: clamp(30px, 5vw, 46px); line-height: 1.3; margin-bottom: .5rem; }
.judul-halaman p { color: #fff; font-size: 18px; margin: 0; max-width: 760px; }
@media (max-width: 768px) { .judul-halaman { padding: 2.5em 0; } .judul-halaman p { font-size: 16px; } }

.bagian { padding: 4em 0; }
.bagian-abu { background: var(--bsa-latar); }
.garis-oranye { display: flex; align-items: center; gap: 1rem; }
.garis-oranye::after { content: ""; flex: 1; border-top: 3px solid var(--bsa-oranye); }

/* Panel biasa (tabel laporan, kartu kantor) */
.kartu { background: #fff; border: 1px solid #e8eaef; height: 100%; display: flex; flex-direction: column; color: inherit; }
.kartu-isi { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.kartu-meta { font-size: 13px; color: #9a9da4; margin-bottom: .35rem; }
.kartu-gambar { aspect-ratio: 16 / 10; background: #dfe5ef; object-fit: cover; width: 100%; display: block; }
/* Kartu tautan (berita, produk, karir) = .probootstrap-featured-news-box lama: kotak teks menumpang di atas gambar, garis oranye; hover oranye */
a.kartu { border: 0; background: transparent; }
a.kartu .kartu-isi { position: relative; background: #fff; margin: 0 10px; box-shadow: 0 2px 10px rgba(0,0,0,.05); border-bottom: 3px solid #e37b18; transition: .3s all; }
a.kartu .kartu-gambar + .kartu-isi { margin-top: -30px; }
a.kartu .kartu-isi h2, a.kartu .kartu-isi h3 { font-size: 18px; line-height: 1.35; margin: 0 0 10px; color: #181920; }
a.kartu .kartu-isi p { color: #666; margin-bottom: 0; }
a.kartu:hover .kartu-isi, a.kartu:focus-visible .kartu-isi { background: #e37b18; transform: translateY(-10px); box-shadow: 0 2px 20px rgba(0,0,0,.1); }
a.kartu .kartu-isi * { transition: color .3s; }
a.kartu:hover .kartu-isi *, a.kartu:focus-visible .kartu-isi * { color: #fff !important; }
.potong-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.potong-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Beranda */
.slider .carousel-item img { width: 100%; aspect-ratio: 1320 / 600; object-fit: cover; background: #dfe5ef; }


/* Visi & misi: tipografis seperti halaman lama (judul "Visi"/"Misi" besar tipis) */
.visi-misi h2 { font-size: 36px; color: #181920; margin-bottom: 1rem; }
.visi-misi .visi { font-size: 22px; line-height: 1.6; color: #181920; font-weight: 300; }
@media (min-width: 992px) { .visi-misi > div + div { border-left: 1px solid #e8eaef; } }

.berita-sisi { background: var(--bsa-latar); border-radius: .6rem; padding: 1.4rem 1.25rem; }
.berita-sisi a { display: flex; gap: .8rem; color: inherit; }
.berita-sisi a:hover h3 { color: var(--bsa-biru); }
.berita-sisi li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dfe3ea; }
.berita-sisi img { width: 68px; height: 68px; flex: 0 0 68px; object-fit: cover; border-radius: .4rem; background: #dfe5ef; }
.berita-sisi h3 { font-size: 14px; font-weight: 500; margin: 0; line-height: 1.4; color: #181920; }

/* Isi artikel (HTML dari editor) */
.isi-artikel { font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.isi-artikel img { max-width: 100%; height: auto; }
.isi-artikel .ql-align-center { text-align: center; }
.isi-artikel .ql-align-right { text-align: right; }
.isi-artikel .ql-align-justify { text-align: justify; }
.isi-artikel .ql-indent-1 { padding-left: 3em; }
.isi-artikel .ql-indent-2 { padding-left: 6em; }
.isi-artikel .ql-indent-3 { padding-left: 9em; }
.isi-artikel blockquote { border-left: 4px solid var(--bsa-oranye); padding-left: 1rem; color: #5b6170; }
.gambar-utama { width: 100%; border-radius: .6rem; margin-bottom: 1.5rem; }
.galeri a { display: block; border-radius: .4rem; overflow: hidden; }
.galeri img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s; }
.galeri a:hover img { transform: scale(1.04); }
.galeri video { width: 100%; border-radius: .4rem; background: #000; }

/* Simulasi */
.simulasi { background: var(--bsa-latar); border-radius: .6rem; padding: 1.5rem; }
.simulasi .hasil { background: #fff; border-radius: .5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--bsa-oranye); }
.simulasi .hasil strong { font-size: 1.35rem; color: var(--bsa-biru); }

/* Laporan */
.tabel-laporan td, .tabel-laporan th { vertical-align: middle; }

/* Pengurus */
.situs-bingkai .tingkat-label { display: inline-block; background: var(--bsa-biru); color: #fff; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: .8rem; padding: .45rem 1.4rem; border-radius: 2rem; margin-bottom: 1.5rem; }
.kartu-pengurus { background: #fff; border: 1px solid #e3e8ef; border-top: 4px solid var(--bsa-biru); border-radius: .5rem; padding: 1.4rem 1rem; text-align: center; height: 100%; }
.kartu-pengurus.utama { border-top-color: var(--bsa-oranye); }
.kartu-pengurus .avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .8rem; display: grid; place-items: center; background: var(--bs-primary-bg-subtle) center / cover; color: var(--bsa-biru); font-size: 2rem; }
.kartu-pengurus .nama { font-weight: 600; color: var(--bs-heading-color); margin: 0; }
.kartu-pengurus .jabatan { font-size: .85rem; color: #8a94a6; }

/* Kontak */
.kartu-kantor dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .9rem; }
.kartu-kantor dt { color: var(--bsa-biru); font-weight: 400; }
.kartu-kantor dd { margin: 0; overflow-wrap: anywhere; }
.kartu-kantor iframe { width: 100%; height: 240px; border: 0; display: block; }

/* CTA = .probootstrap-cta lama: biru polos, judul tipis, gambar kontak resmi */
.situs-cta { background: #f2f5fa; border-top: 1px solid #e3e8f0; padding: 2.5em 0; }
.situs-cta h2 { color: var(--bsa-biru); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 .3rem; }
.situs-cta p { margin: 0; color: #5b6170; }
.situs-cta .btn { padding: .65rem 1.2rem; font-weight: 500; }
.situs-cta .btn-wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.situs-cta .btn-wa:hover, .situs-cta .btn-wa:focus-visible { background: #17834a; border-color: #17834a; color: #fff; }
@media (min-width: 992px) { .situs-cta .cta-aksi { flex-shrink: 0; flex-wrap: nowrap !important; } }
@media (max-width: 575.98px) { .situs-cta .btn { flex: 1 1 100%; } }
.situs-footer { background: #111317; color: rgba(255,255,255,.7); padding-top: 3rem; font-size: .9rem; }
.situs-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.situs-footer a { color: rgba(255,255,255,.8); }
.situs-footer a:hover, .situs-footer a:focus-visible { color: #fff; }
.situs-footer li { margin-bottom: .4rem; }
.situs-footer .sertifikat { max-width: 200px; margin-top: .5rem; background: #fff; border-radius: .3rem; }
.situs-footer .sosmed { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.situs-footer .sosmed svg { width: 18px; height: 18px; fill: currentColor; }
.situs-copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding: 1rem 0; font-size: .8rem; }
.wa-mengambang { position: fixed; right: 18px; bottom: 18px; z-index: 1030; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.wa-mengambang svg { width: 30px; height: 30px; fill: #fff; }

/* Modal pengumuman */
#modalPengumuman .modal-content { background: transparent; border: 0; }
#modalPengumuman .carousel-item img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: .5rem; }
#modalPengumuman .btn-close { position: absolute; top: -.25rem; right: -.25rem; z-index: 5; background-color: #fff; opacity: 1; border-radius: 50%; padding: .6rem; }
#modalGambar .modal-content { background: transparent; border: 0; }
#modalGambar img { width: 100%; max-height: 85vh; object-fit: contain; }

.pagination { --bs-pagination-active-bg: var(--bsa-biru); --bs-pagination-active-border-color: var(--bsa-biru); }
@media (prefers-reduced-motion: reduce) { a.kartu .kartu-isi, .galeri img, .produk-kartu-item .label, .produk-kartu-item .lapisan { transition: none; } }

/* Caret dropdown: styles.css NexLink memakai font uicons (tidak disertakan) -> pakai FontAwesome solid */
.situs .dropdown-toggle::after { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f107"; border: 0; width: auto; vertical-align: 0; margin-left: .35em; font-size: .75em; }

/* Beranda: tiga bagian mengikuti beranda situs lama (blok LPS + kontak, kartu produk penuh lebar, "Kenapa harus Bank BSA?") */
.lps-kontak { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.lps-kontak > div { min-height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lps-kontak .lps { flex: 65 1 0; background: #fff; }
.lps-kontak .lps img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lps-kontak .kontak { flex: 35 1 0; flex-direction: column; text-align: center; background: var(--bsa-biru); color: #fff; padding: 30px 25px; }
.lps-kontak .kontak h2 { color: #fff; margin: 0 0 8px; }
.lps-kontak .kontak p { color: rgba(255,255,255,.85); margin-bottom: 18px; }
.lps-kontak .ikon-bulat { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); font-size: 24px; margin-bottom: 15px; }
.lps-kontak .nomor { display: inline-block; background: #fff; color: var(--bsa-biru); font-weight: 700; padding: 10px 24px; border-radius: 30px; }
.lps-kontak .nomor:hover, .lps-kontak .nomor:focus-visible { background: rgba(255,255,255,.85); color: var(--bsa-biru); }
@media (max-width: 768px) { .lps-kontak .lps, .lps-kontak .kontak { flex: 0 0 100%; max-width: 100%; } .lps-kontak .lps { min-height: 200px; } }

.produk-judul { text-align: center; margin: 20px 0 0; padding: 0 30px; }
.produk-judul h2 { display: inline-block; position: relative; padding-bottom: 14px; margin: 0; color: var(--bsa-biru); font-weight: 700; font-size: 24px; letter-spacing: 2px; text-transform: uppercase; }
.produk-judul h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 3px; border-radius: 2px; background: var(--bsa-biru); }
.produk-kartu { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.produk-kartu-item { flex: 1 1 300px; position: relative; display: block; height: 340px; background: #1d3f73 center / cover no-repeat; overflow: hidden; }
.produk-kartu-item .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 0 22px; text-align: center; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: 1px; transition: opacity .35s ease; }
.produk-kartu-item .lapisan { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, rgba(20,67,138,.92), rgba(10,30,66,.92)); opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.produk-kartu-item .lapisan .h3 { color: #fff; font-weight: 700; font-size: 20px; letter-spacing: 1px; margin: 0 0 12px; }
.produk-kartu-item .lapisan .teks { color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.6; }
.produk-kartu-item:hover .lapisan, .produk-kartu-item:focus-visible .lapisan { opacity: 1; transform: translateY(0); }
.produk-kartu-item:hover .label, .produk-kartu-item:focus-visible .label { opacity: 0; }

.kenapa { padding: 7em 0; border-top: 1px solid rgba(0,0,0,.1); background: #fff; }
.kenapa-judul { max-width: 50%; margin: 0 auto 70px; text-align: center; }
.kenapa-judul h2 { font-size: 40px; line-height: 1.2; font-weight: 300; margin-bottom: 1rem; }
.kenapa-judul .lead { font-size: 18px; }
.kenapa-item { display: flex; gap: 0; margin-bottom: 20px; }
.kenapa-item .ikon { flex: 0 0 70px; position: relative; top: 20px; color: #e37b18; font-size: 40px; line-height: 1; }
.kenapa-item h3 { font-size: 22px; margin: 22px 0 0; }
.kenapa-item p { font-size: 14px; margin: 0; }
@media (max-width: 768px) { .kenapa { padding: 4em 0; } .kenapa-judul { max-width: none; margin-bottom: 40px; } .kenapa-judul h2 { font-size: 24px; } .kenapa-judul .lead { font-size: 16px; } }
@media (max-width: 480px) { .kenapa-judul h2 { font-size: 21px; } }

/* Bingkai halaman seperti situs lama: lebar bertingkat sama dengan situs lama: 1500px, 1200px (layar <=1500), 960px (layar <=1200), latar abu-abu di kiri-kanan; eForm tanpa bingkai */
.situs-bingkai { max-width: 1500px; margin: 0 auto; background: #fff; min-height: 100vh; }
.situs-bingkai .container { max-width: 1170px; }
@media (max-width: 1500px) { .situs-bingkai { max-width: 1200px; } .situs-bingkai .container { max-width: 1000px; } }
@media (max-width: 1200px) { .situs-bingkai { max-width: 960px; } .situs-bingkai .container { max-width: 900px; } }