/* ==========================================================================
   MOBILE FIX — Koreksi tampilan mobile seluruh halaman guest
   Prioritas utama: pelamar mayoritas mendaftar lewat smartphone.

   Catatan: Bootstrap 3.3.7 punya .container padding 15px dan
   .row margin -15px. responsive.css bawaan theme mengubah .container
   menjadi padding 0 30px sehingga konten bergeser. File ini mengembalikan
   perilaku grid yang benar dan menyesuaikan tipografi/spacing di mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Perbaikan grid dasar (semua ukuran layar)
   -------------------------------------------------------------------------- */
html {
    /*
     * Cegah scroll horizontal akibat elemen yang meluber.
     * overflow-x: clip tidak membuat scroll container baru (berbeda dengan
     * hidden yang dapat merusak position:sticky/fixed pada sebagian browser).
     * 'hidden' tetap dipakai sebagai fallback browser lama.
     */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    overflow-x: hidden;
    /* Cegah teks membesar otomatis di iOS saat ganti orientasi */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Kembalikan padding container Bootstrap yang benar */
@media (max-width: 767px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* Gambar tidak boleh meluber keluar layar */
img {
    max-width: 100%;
    height: auto;
}

/* Tabel panjang bisa di-scroll horizontal, tidak merusak layout */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   3. Judul section
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .section-title {
        padding-bottom: 18px !important;
    }

    .section-title-text h2 {
        font-size: 22px !important;
        line-height: 1.3;
    }

    .latest-news-section .section-title {
        padding-bottom: 18px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Daftar lowongan (kartu)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .lowongan-section-content {
        padding: 12px 0 0 !important;
    }

    .lowongan-section-content .row.lowongan-grid {
        margin-left: -15px;
        margin-right: -15px;
    }

    .lowongan-item {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 16px !important;
    }

    /*
     * PENTING: netralkan aturan theme responsive.css
     * (.latest-news-slide-content { max-width:500px; margin:0 auto })
     * yang membuat kartu tidak full-width di layar 500-767px.
     */
    .lowongan-item .latest-news-slide-content {
        max-width: none !important;
        margin: 0 !important;
    }

    /* Di mobile kartu selebar layar, tinggi gambar lebih ringkas */
    .lowongan-thumb {
        height: 170px;
    }

    /* Thumbnail tetap menambatkan gambar ke ATAS (bukan tengah) di mobile */
    .lowongan-thumb img {
        object-fit: cover;
        object-position: top center;
    }

    .lowongan-body {
        padding: 14px 15px 6px;
    }

    /* Judul jangan dipotong 2 baris di layar sempit */
    .lowongan-title {
        font-size: 16px;
        min-height: 0;
        margin-bottom: 8px;
        -webkit-line-clamp: 3;
    }

    .lowongan-date,
    .lowongan-posisi,
    .lowongan-status {
        font-size: 13.5px;
    }

    .lowongan-footer {
        padding: 0 15px 15px;
    }

    /* Tombol lebih besar agar mudah disentuh */
    .lowongan-footer .btn {
        padding: 11px 14px;
        font-size: 14.5px;
    }

    /* Search input lebih nyaman diketik */
    #searchInput {
        height: 46px;
        font-size: 16px;
        /* >=16px mencegah auto-zoom iOS */
    }
}

/* --------------------------------------------------------------------------
   5. Halaman detail lowongan
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .detail-lowongan-section {
        padding: 14px 0 0 !important;
    }

    .detail-breadcrumb {
        margin-bottom: 12px;
        font-size: 12.5px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-breadcrumb > li {
        display: inline-block;
    }

    .detail-lowongan-content {
        padding: 0 0 18px !important;
    }

    .detail-card {
        padding: 15px !important;
        border-radius: 10px;
    }

    .detail-title {
        font-size: 17px !important;
        line-height: 1.35;
    }

    .detail-card-header {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .detail-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Tabel detail: font lebih kecil, kolom label jangan terlalu lebar */
    .detail-table > tbody > tr > th,
    .detail-table > tbody > tr > td {
        font-size: 13px !important;
        padding: 8px 6px !important;
    }

    .detail-table > tbody > tr > th {
        width: 42% !important;
    }

    .posisi-tag {
        font-size: 12px;
        padding: 2px 8px;
        margin: 0 4px 4px 0;
    }

    .detail-image-wrap {
        margin-top: 14px !important;
    }

    /*
     * Di mobile tampilkan gambar UTUH (tidak terpotong).
     * Sebelumnya max-height + object-fit:cover membuat gambar ter-crop.
     * Sekarang gambar menyesuaikan lebar penuh dan tinggi mengikuti rasio asli.
     */
    .detail-image {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .detail-image-placeholder {
        min-height: 160px;
    }

    .detail-image-placeholder i {
        font-size: 32px;
    }

    .detail-actions {
        flex-direction: column;
        gap: 8px;
        padding-top: 14px;
        margin-top: 14px;
    }

    .detail-actions .btn {
        width: 100%;
        padding: 11px 14px;
        font-size: 14.5px;
    }

    .detail-subtitle {
        font-size: 16px;
    }

    .detail-isi {
        font-size: 14px;
        line-height: 1.75;
        text-align: left;
        /* justify bikin celah aneh di layar sempit */
    }

    /* Isi berita dari editor: paksa menyesuaikan lebar */
    .detail-isi * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .detail-isi table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto;
    }

    /* Hapus paksa margin berlebih dari konten editor */
    .detail-isi p:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Halaman input lamaran (FORM PENDAFTARAN — paling kritis di mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .input-lamaran-section {
        padding: 14px 0 26px !important;
    }

    .input-lamaran-content {
        padding: 0 !important;
    }

    .lamaran-header {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 14px 15px !important;
        gap: 10px;
        margin-bottom: 12px;
    }

    .lamaran-title {
        font-size: 18px !important;
    }

    .lamaran-subtitle {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .lamaran-btn-back {
        width: 100%;
        text-align: center;
        padding: 9px 14px;
    }

    .lamaran-alert {
        font-size: 13px;
        padding: 10px 12px;
    }

    .lamaran-card {
        padding: 15px !important;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .lamaran-section-title {
        font-size: 15px !important;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .lamaran-step {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-right: 8px;
    }

    .lamaran-card label {
        font-size: 13.5px;
        margin-bottom: 5px;
    }

    /* Field lebih tinggi + font 16px (cegah auto-zoom iOS) */
    .lamaran-card .form-control {
        height: 46px !important;
        font-size: 16px !important;
        padding: 10px 12px;
    }

    .lamaran-card textarea.form-control {
        height: auto !important;
        min-height: 92px;
        line-height: 1.5;
    }

    .lamaran-card select.form-control {
        height: 46px !important;
        padding-right: 28px;
    }

    .lamaran-file {
        padding: 9px 10px !important;
        font-size: 14px !important;
        height: auto !important;
    }

    /* Radio jenis kelamin jadi tombol penuh agar mudah disentuh */
    .lamaran-radio-group {
        flex-direction: column;
        gap: 8px;
    }

    .lamaran-radio {
        padding: 10px 12px;
        border: 1px solid #d5e2ee;
        border-radius: 8px;
        background: #f8fbfd;
        width: 100%;
    }

    .lamaran-radio:has(input:checked) {
        border-color: #00A693;
        background: #eaf9f6;
    }

    .lamaran-radio input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    .lamaran-template-link {
        font-size: 13px;
        margin-top: 6px;
        padding: 6px 10px;
        background: #eef7f6;
        border-radius: 6px;
        display: inline-block;
    }

    .lamaran-hint {
        font-size: 12.5px;
    }

    .lamaran-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 15px !important;
        gap: 12px;
    }

    .lamaran-consent {
        flex: 1 1 auto;
        font-size: 13px;
    }

    .lamaran-consent label {
        align-items: flex-start;
    }

    .lamaran-btn-submit {
        width: 100% !important;
        min-width: 0;
        padding: 14px 20px;
        font-size: 15px;
    }

    /* Turnstile widget: batasi agar tidak meluber */
    .cf-turnstile {
        max-width: 100%;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   7. Modal petunjuk pendaftaran
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
        width: auto;
        max-width: calc(100% - 20px);
    }

    .petunjuk-modal .modal-content {
        border-radius: 12px;
    }

    .petunjuk-modal-header {
        padding: 14px 46px 14px 15px !important;
    }

    .petunjuk-modal-title {
        font-size: 15.5px !important;
        line-height: 1.35;
    }

    .petunjuk-modal-subtitle {
        font-size: 11.5px;
    }

    .petunjuk-modal-close {
        top: 9px;
        right: 10px;
        width: 32px;
        height: 32px;
    }

    .petunjuk-modal-close span {
        font-size: 21px;
        line-height: 30px;
    }

    .petunjuk-modal-body {
        padding: 12px 12px !important;
        max-height: 68vh;
    }

    .petunjuk-alert {
        font-size: 12.5px;
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .petunjuk-step {
        margin-bottom: 10px;
    }

    .petunjuk-step-head {
        padding: 10px 12px;
        gap: 9px;
    }

    .petunjuk-step-num {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        font-size: 12.5px;
    }

    .petunjuk-step-title {
        font-size: 13.5px !important;
        line-height: 1.4;
    }

    .petunjuk-step-body {
        padding: 11px 12px 12px !important;
    }

    .petunjuk-list,
    .petunjuk-sublist {
        font-size: 13px;
        line-height: 1.65;
    }

    .petunjuk-list > li {
        padding-left: 16px;
        margin-bottom: 6px;
    }

    .petunjuk-sublist {
        padding: 8px 10px;
    }

    .petunjuk-sublist > li {
        font-size: 12.5px;
        padding-left: 13px;
    }

    .petunjuk-link {
        word-break: break-all;
        font-size: 12.5px;
    }

    .petunjuk-doc-panel {
        padding: 10px;
    }

    .petunjuk-doc-title {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .petunjuk-doc-list > li {
        font-size: 12.5px;
        padding: 6px 8px 6px 24px;
        line-height: 1.5;
    }

    .petunjuk-warning {
        font-size: 12.5px;
        padding: 10px 12px;
    }

    .petunjuk-btn-preview {
        font-size: 11.5px;
        padding: 2px 8px;
    }

    .petunjuk-modal-footer {
        padding: 12px !important;
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .petunjuk-btn-masuk,
    .petunjuk-btn-tutup {
        width: 100%;
        margin: 0 !important;
        padding: 11px 16px;
    }
}

/* --------------------------------------------------------------------------
   8. Header & Navbar — penyesuaian mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Panel menu: pastikan tidak melebihi lebar layar */
    .site-nav-collapse {
        max-width: 100%;
    }

    .site-dropdown {
        margin-left: 10px !important;
        width: calc(100% - 10px) !important;
        max-height: 260px;
    }

    .site-dropdown-link {
        padding: 10px 10px;
        font-size: 13px;
    }

    /* Tombol menu lebih besar & mudah disentuh */
    .site-nav.nav.navbar-nav > li > a.site-nav-link {
        padding: 13px 12px !important;
        font-size: 14.5px;
    }
}

/* --------------------------------------------------------------------------
   9. Footer — penyesuaian mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .guest-footer {
        padding: 28px 0 18px !important;
    }

    .guest-footer-row {
        margin-left: -15px;
        margin-right: -15px;
    }

    .guest-footer-col {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px !important;
    }

    .guest-footer-address {
        font-size: 12.5px;
        line-height: 1.65;
    }

    .guest-footer-link {
        font-size: 13px;
    }

    .guest-footer-social {
        gap: 9px;
    }

    .guest-footer-social-link {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .guest-footer-heading {
        font-size: 13.5px;
        margin-bottom: 12px;
    }

    .guest-footer-copy,
    .guest-footer-credit {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* --------------------------------------------------------------------------
   10. Halaman auth (login / reset)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Turnstile di form login */
    .auth-turnstile {
        margin: 14px 0 12px;
        overflow: hidden;
    }

    .auth-btn {
        min-height: 48px;
        font-size: 15px;
    }

    .auth-card-home span {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   11. Sentuhan akhir: target tap minimum 44px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    a,
    button,
    .btn,
    input[type="checkbox"],
    input[type="radio"] {
        touch-action: manipulation;
    }

    /* Beri jarak bawah ekstra agar tidak tertutup browser bar */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* --------------------------------------------------------------------------
   12. Layar sangat kecil (<= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .detail-table > tbody > tr > th,
    .detail-table > tbody > tr > td {
        font-size: 12.5px !important;
    }

    .detail-table > tbody > tr > th {
        width: 45% !important;
    }

    .lamaran-card .form-control {
        font-size: 16px !important;
    }

    .petunjuk-step-title {
        font-size: 12.5px !important;
    }

    .guest-footer-social-link {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   13. Pelengkap form lamaran
   -------------------------------------------------------------------------- */
.lamaran-label-note {
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    margin-top: 3px;
    color: #7a8b99;
}

@media (max-width: 767px) {
    .lamaran-label-note {
        font-size: 11.5px;
    }

    /* Label panjang di form berkas */
    .lamaran-card label {
        line-height: 1.45;
        display: block;
    }

    /* Pastikan select tidak terpotong */
    .lamaran-card select.form-control {
        text-overflow: ellipsis;
    }

    /* Hint di bawah field berkas */
    .lamaran-card .lamaran-hint {
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   14. Anchor scroll: cegah judul tertutup navbar sticky
   -------------------------------------------------------------------------- */
#rekrutmen,
#detail-lowongan,
#input-lamaran,
#berita-isi,
section[id] {
    scroll-margin-top: 84px;
}

@media (max-width: 991px) {
    #rekrutmen,
    #detail-lowongan,
    #input-lamaran,
    #berita-isi,
    section[id] {
        scroll-margin-top: 80px;
    }
}

@media (max-width: 767px) {
    #rekrutmen,
    #detail-lowongan,
    #input-lamaran,
    #berita-isi,
    section[id] {
        scroll-margin-top: 76px;
    }
}

/* --------------------------------------------------------------------------
   14b. Breadcrumb detail lowongan: jangan tertutup navbar saat scroll
   --------------------------------------------------------------------------
   Penyebab: saat halaman di-scroll lalu dinaikkan kembali, navbar berubah
   menjadi position:fixed (top:0, z-index 1040) sehingga menutupi area
   paling atas dokumen — yaitu breadcrumb.

   Penanganan utama ada di JS (guest-header.js): saat navbar menempel,
   sebuah "spacer" setinggi navbar disisipkan untuk menggantikannya dalam
   alur dokumen, sehingga breadcrumb tetap berada di bawah navbar fixed.

   CSS di sini hanya jaring pengaman: pastikan breadcrumb tidak pernah
   menabrak zona navbar sticky (jika spacer gagal dibuat karena JS error
   atau dimuat lambat), dengan memberi jarak saat header dalam keadaan
   stuck DAN spacer belum ada.
   -------------------------------------------------------------------------- */
.detail-breadcrumb {
    position: relative;
    z-index: 1;
}

/* Jaring pengaman bila spacer JS tidak terbentuk: beri ruang pada section */
.site-header.is-stuck~#detail-lowongan {
    padding-top: 84px;
}

@media (max-width: 767px) {
    .site-header.is-stuck~#detail-lowongan {
        padding-top: 72px;
    }
}

/* Jika spacer yang disisipkan JS sudah ada, kembalikan ke padding normal */
.site-header-spacer~#detail-lowongan {
    padding-top: 25px;
}

@media (max-width: 767px) {
    .site-header-spacer~#detail-lowongan {
        padding-top: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   15. Modal petunjuk: cegah body ter-scroll ganda di iOS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .modal-open .petunjuk-modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Modal selalu di tengah vertikal & tidak melebihi tinggi layar */
    .petunjuk-modal {
        margin: 0 auto;
    }

    .petunjuk-modal .modal-dialog {
        max-height: calc(100vh - 20px);
        display: flex;
        align-items: center;
    }

    .petunjuk-modal .modal-content {
        max-height: calc(100vh - 20px);
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .petunjuk-modal .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   16. Cegah overflow horizontal dari elemen lebar (jaring pengaman)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .latest-news-section,
    .detail-lowongan-section,
    .input-lamaran-section,
    .berita-section,
    .site-header,
    .guest-footer {
        overflow-x: hidden;
    }

    /* Semua tabel dalam konten dibungkus scroll */
    .detail-isi table,
    .dokumen table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Iframe (mis. video/peta) jangan meluber */
    iframe,
    video,
    embed {
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   17. Safe area (iPhone notch / home indicator) & viewport dinamis
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    .guest-footer {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .auth-main {
        padding-bottom: calc(36px + env(safe-area-inset-bottom));
    }

    .site-topbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* Modal mengikuti tinggi viewport dinamis (iOS address bar) */
@supports (height: 100dvh) {
    @media (max-width: 767px) {
        .petunjuk-modal .modal-dialog {
            max-height: calc(100dvh - 20px);
        }

        .petunjuk-modal .modal-content {
            max-height: calc(100dvh - 20px);
        }

        .petunjuk-modal-body {
            max-height: none;
        }
    }
}

/* --------------------------------------------------------------------------
   10. Modal Perhatian Pendaftaran (tampil otomatis di beranda)
   Prefix .perhatian-* agar tidak bertabrakan dengan .petunjuk-*.
   Dirancang responsif untuk semua rasio layar (potret/landscape).
   -------------------------------------------------------------------------- */

/* --- Dasar (desktop) --- */
.perhatian-modal-dialog {
    max-width: 620px;
    margin: 30px auto;
}

.perhatian-modal {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(13, 59, 102, 0.28);
}

.perhatian-modal-header {
    position: relative;
    padding: 18px 58px 18px 22px;
    border-bottom: 0;
    background: linear-gradient(135deg, #00A693 0%, #00897b 100%);
    color: #ffffff;
}

.perhatian-modal-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
}

.perhatian-modal-title .fa {
    margin-right: 8px;
    font-size: 18px;
}

.perhatian-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    opacity: 0.95;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

.perhatian-modal-close:hover,
.perhatian-modal-close:focus {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    opacity: 1;
    outline: 0;
}

.perhatian-modal-close span {
    display: block;
    font-size: 24px;
    line-height: 36px;
    font-weight: 400;
}

.perhatian-modal-body {
    padding: 22px 24px;
    color: #33424f;
    font-size: 14.5px;
    line-height: 1.7;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.perhatian-intro {
    margin: 0 0 16px;
    color: #33424f;
}

.perhatian-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    counter-reset: perhatian-counter;
}

.perhatian-list > li {
    position: relative;
    padding: 12px 14px 12px 48px;
    margin-bottom: 10px;
    border: 1px solid #e2ebf3;
    border-radius: 10px;
    background: #f7fbfc;
    counter-increment: perhatian-counter;
}

.perhatian-list > li:last-child {
    margin-bottom: 0;
}

.perhatian-list > li::before {
    content: counter(perhatian-counter);
    position: absolute;
    top: 12px;
    left: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #00A693;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.perhatian-list > li strong {
    color: #00897b;
}

.perhatian-closing {
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed #e2ebf3;
    color: #6b7b8a;
    font-size: 13.5px;
    font-style: italic;
}

.perhatian-closing .fa {
    margin-right: 6px;
    color: #00A693;
    font-style: normal;
}

.perhatian-modal-footer {
    padding: 14px 22px 18px;
    border-top: 0;
    text-align: right;
}

.perhatian-btn-mengerti {
    padding: 10px 26px;
    border: 0;
    border-radius: 8px;
    background: #00A693;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.perhatian-btn-mengerti:hover,
.perhatian-btn-mengerti:focus {
    background: #00897b;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 166, 147, 0.34);
}

/* --- Tablet & mobile (<= 767px) --- */
@media (max-width: 767px) {
    .perhatian-modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 8px auto !important;
    }

    .perhatian-modal {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        display: flex;
        flex-direction: column;
        border-radius: 12px;
    }

    .perhatian-modal-header {
        flex: 0 0 auto;
        padding: 14px 50px 14px 15px;
    }

    .perhatian-modal-title {
        font-size: 15.5px;
    }

    .perhatian-modal-title .fa {
        font-size: 15px;
        margin-right: 6px;
    }

    .perhatian-modal-close {
        top: 7px;
        right: 8px;
        width: 34px;
        height: 34px;
    }

    .perhatian-modal-close span {
        font-size: 22px;
        line-height: 32px;
    }

    /* Body dapat di-scroll; footer selalu terlihat */
    .perhatian-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 15px;
        font-size: 13.5px;
        line-height: 1.65;
    }

    .perhatian-intro {
        margin-bottom: 12px;
    }

    .perhatian-list > li {
        padding: 10px 12px 10px 42px;
        margin-bottom: 8px;
        border-radius: 9px;
    }

    .perhatian-list > li::before {
        top: 10px;
        left: 10px;
        width: 23px;
        height: 23px;
        font-size: 12px;
        line-height: 23px;
    }

    .perhatian-closing {
        padding-top: 12px;
        font-size: 12.5px;
    }

    .perhatian-modal-footer {
        flex: 0 0 auto;
        padding: 10px 15px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        text-align: stretch;
    }

    .perhatian-btn-mengerti {
        display: block;
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* --- Layar sangat sempit (<= 360px) --- */
@media (max-width: 360px) {
    .perhatian-modal-dialog {
        max-width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }

    .perhatian-modal-header {
        padding: 12px 44px 12px 12px;
    }

    .perhatian-modal-title {
        font-size: 14.5px;
    }

    .perhatian-modal-body {
        padding: 12px;
        font-size: 13px;
    }

    .perhatian-list > li {
        padding: 9px 10px 9px 40px;
    }

    .perhatian-list > li::before {
        width: 21px;
        height: 21px;
        line-height: 21px;
        font-size: 11.5px;
    }
}

/* --- Layar pendek / landscape handphone (tinggi terbatas) --- */
@media (max-height: 500px) {
    .perhatian-modal-dialog {
        margin: 4px auto !important;
    }

    .perhatian-modal {
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        display: flex;
        flex-direction: column;
    }

    .perhatian-modal-header {
        flex: 0 0 auto;
        padding: 10px 48px 10px 14px;
    }

    .perhatian-modal-title {
        font-size: 15px;
    }

    .perhatian-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.55;
    }

    .perhatian-list > li {
        margin-bottom: 7px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .perhatian-modal-footer {
        flex: 0 0 auto;
        padding: 8px 14px;
    }

    .perhatian-btn-mengerti {
        display: block;
        width: 100%;
        padding: 9px 16px;
        font-size: 13.5px;
    }
}