/* =========================================================================
   site-ui.css — melengkapi style.css (dimuat SETELAH style.css)
   1. Menu navigasi utama (pil di layar lebar, tab bawah di HP)
   2. Aman untuk "Auto Dark Mode" Chrome: teks selalu di atas permukaan warna solid,
      bukan langsung di atas gambar latar
   3. Perbaikan kontras teks yang terlalu pudar
   ========================================================================= */

:root { color-scheme: only light; }

/* -------------------------------------------------------------------------
   1. MENU NAVIGASI UTAMA
   ------------------------------------------------------------------------- */
.mlp-nav {
    position: relative; z-index: 30;
    max-width: 700px; margin: 20px auto 0; padding: 0 16px;
}
.mlp-nav ul {
    list-style: none; margin: 0; padding: 6px;
    display: flex; justify-content: center; gap: 4px;
    background: #fff; border: 1px solid #F2DFEC; border-radius: 999px;
    box-shadow: 0 18px 34px -20px rgba(109, 76, 104, .55);
}
.mlp-nav li { flex: 1 1 0; min-width: 0; }
.mlp-nav a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 14px; border-radius: 999px; white-space: nowrap;
    font: 700 14px/1 'Poppins', system-ui, sans-serif; letter-spacing: .01em;
    color: #6D4C68; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.mlp-nav a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.mlp-nav a:hover { background: #FFF0F8; }
.mlp-nav a:focus-visible { outline: 3px solid #D9B66B; outline-offset: 2px; }
.mlp-nav a.is-active {
    color: #fff; background: linear-gradient(135deg, #6D4C68, #8E5F86);
    box-shadow: 0 12px 22px -12px rgba(109, 76, 104, .9);
}

/* HP & tablet kecil: tab bar tetap di bagian bawah layar */
@media (max-width: 780px) {
    .mlp-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        max-width: none; margin: 0; padding: 0;
    }
    .mlp-nav ul {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        background: #fff; border: 0; border-top: 1px solid #F2DFEC; border-radius: 22px 22px 0 0;
        box-shadow: 0 -16px 36px -14px rgba(109, 76, 104, .3);
    }
    .mlp-nav a {
        flex-direction: column; gap: 5px; padding: 9px 2px 8px; border-radius: 16px;
        font-size: 11px; font-weight: 600; letter-spacing: 0;
    }
    .mlp-nav a svg { width: 22px; height: 22px; flex-basis: 22px; }
    .mlp-nav a.is-active { font-weight: 700; }
    /* beri ruang di bawah supaya isi halaman/footer tidak tertutup tab bar */
    .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}
/* popup galeri (lightbox) menutupi menu */
body.htp-lb-open .mlp-nav { display: none; }
@media print { .mlp-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .mlp-nav a { transition: none; } }

/* -------------------------------------------------------------------------
   2. TEKS DI ATAS PERMUKAAN SOLID (aman untuk Auto Dark Mode)
      Auto Dark Mode memutihkan warna teks tetapi TIDAK menggelapkan gambar latar,
      sehingga teks yang menempel langsung di atas gambar latar jadi tak terbaca.
   ------------------------------------------------------------------------- */
.article-detail {
    background: #fff; border: 1px solid #F2DFEC; border-radius: 26px;
    max-width: 800px; width: calc(100% - 32px); margin: 28px auto 44px; padding: 34px 30px;
    box-shadow: 0 26px 50px -30px rgba(109, 76, 104, .5);
}
.article-detail h1 { line-height: 1.3; }
.article-detail .content a { color: #6D4C68; text-decoration: underline; }

.mlp-page-title {
    display: block; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 26px; padding: 12px 36px;
    background: #fff; border: 1px solid #F2DFEC; border-radius: 999px;
    font-size: 24px; font-weight: 800; line-height: 1.3; text-align: center; color: #6D4C68;
    box-shadow: 0 18px 34px -22px rgba(109, 76, 104, .55);
}
.mlp-empty {
    max-width: 520px; margin: 0 auto; padding: 26px; text-align: center;
    background: #fff; border: 1px solid #F2DFEC; border-radius: 20px; color: #6E5A6B;
}

/* -------------------------------------------------------------------------
   3. KONTRAS TEKS PUDAR
   ------------------------------------------------------------------------- */
.article-card .card-date, .article-detail .meta { color: #75606F; }

/* Tombol "Kirim Pesan": putih di atas cadetblue hanya 3,05:1 -> digelapkan agar >= 4,5:1 */
.btn-submit { background: #3A7C7E; }
.btn-submit:hover { background: #3B62C4; }
.btn-submit:disabled { background: #e2d1dd; color: #6E5A6B; }

@media (max-width: 600px) {
    .article-detail { padding: 24px 18px; border-radius: 22px; }
    .article-detail h1 { font-size: 24px; }
    .mlp-page-title { font-size: 20px; padding: 10px 28px; }
}

/* -------------------------------------------------------------------------
   4. FOOTER + "IKUTI KAMI"  (dipakai siteFooterOpen()/siteFooterClose())
   ------------------------------------------------------------------------- */
.footer .footer-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 28px; }
.footer .footer-text { flex: 1 1 auto; min-width: 0; text-align: center; }
/* ada blok sosial -> teks rata kiri, "Ikuti kami" di sisi kanan */
.footer.has-social .footer-inner { justify-content: space-between; }
.footer.has-social .footer-text { text-align: left; }
.footer-social { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.footer-social-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.footer-social-links { display: flex; gap: 10px; }
.footer-social a {
    width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; border: 1.5px solid rgba(255, 255, 255, .6);
    transition: background .25s, transform .25s, border-color .25s; -webkit-tap-highlight-color: transparent;
}
.footer-social a:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }
.footer-social a:focus-visible { outline: 3px solid #D9B66B; outline-offset: 3px; }
.footer-social svg { width: 22px; height: 22px; }
/* HP: ditumpuk -- teks di atas, "Ikuti kami" di bawahnya, semuanya di tengah */
@media (max-width: 780px) {
    .footer.has-social .footer-inner { flex-direction: column; gap: 18px; }
    .footer.has-social .footer-text { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } }