/*
| ---------------------------------------------------------------------------
| Pushti - Colours & Space
| Stylesheet company profile. Tanpa build step: edit file ini lalu refresh.
| Dimuat SETELAH bootstrap.min.css, jadi aman untuk menimpa style Bootstrap.
| ---------------------------------------------------------------------------
*/

/* ===== 1. Token warna & font ============================================= */

:root {
    --pt-navy: #1b2e6d;
    --pt-navy-dark: #101e4c;
    --pt-navy-bright: #1e38a0;
    --pt-cream: #f4f1e9;
    --pt-cream-soft: #faf8f3;
    --pt-gold: #c1a05a;
    --pt-gold-soft: #e0d2b4;
    --pt-ink: #1d2433;
    --pt-muted: #6b7280;

    --pt-serif: "Playfair Display", "Times New Roman", Georgia, serif;
    --pt-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --pt-shadow: 0 18px 45px rgba(16, 30, 76, .10);
    --pt-shadow-sm: 0 8px 24px rgba(16, 30, 76, .08);
}

body {
    font-family: var(--pt-sans);
    color: var(--pt-ink);
    background-color: var(--pt-cream-soft);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;

    /* Pengaman: elemen AOS "fade-left/right" mulai dari posisi 100px di luar
       layar. Tanpa ini halaman bisa digeser ke samping di HP, dan navbar
       fixed ikut bergeser sehingga terlihat seperti tidak sticky. */
    overflow-x: hidden;
}

/* ===== 2. Tipografi ====================================================== */

.pt-serif { font-family: var(--pt-serif); }

.section-title {
    font-family: var(--pt-serif);
    font-weight: 700;
    color: var(--pt-ink);
    letter-spacing: -.01em;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    margin-bottom: 0;
}

.section-title em {
    font-style: normal;
    color: var(--pt-navy-bright);
}

.eyebrow {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pt-navy);
}

.eyebrow--muted { color: var(--pt-muted); }

.lead-text {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #3d4657;
    font-weight: 300;
}

/* Garis emas dengan daun kecil, meniru ornamen di company profile */
.rule-gold {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
}

.rule-gold::before {
    content: "";
    height: 1px;
    width: clamp(80px, 18vw, 190px);
    background: linear-gradient(90deg, var(--pt-gold), rgba(193, 160, 90, .15));
}

/* Belah ketupat kecil dari CSS murni. Sebelumnya memakai glyph bootstrap-icons
   \F1B0 yang ternyata tidak ada di font-nya, jadi yang muncul kotak kosong. */
.rule-gold::after {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--pt-gold);
    transform: rotate(45deg);
    border-radius: 1px;
    flex: 0 0 auto;
}

.rule-gold--center { justify-content: center; }
.rule-gold--light::before { background: linear-gradient(90deg, var(--pt-gold), rgba(193, 160, 90, .15)); }

/* ===== 3. Palet bantu ==================================================== */

.bg-navy { background-color: var(--pt-navy) !important; }
.bg-navy-dark { background-color: var(--pt-navy-dark) !important; }
.bg-cream { background-color: var(--pt-cream) !important; }
.bg-cream-soft { background-color: var(--pt-cream-soft) !important; }
.text-navy { color: var(--pt-navy) !important; }
.text-gold { color: var(--pt-gold) !important; }
.text-cream { color: var(--pt-cream) !important; }

.section { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }

/* ===== 4. Logo wordmark (dipakai kalau file logo belum diupload) ========= */

.wordmark { line-height: 1; display: inline-block; }

.wordmark__name {
    font-family: var(--pt-sans);
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -.02em;
    color: var(--pt-navy);
    display: block;
}

.wordmark__tag {
    display: inline-block;
    background: var(--pt-navy);
    color: #fff;
    font-size: .6rem;
    letter-spacing: .06em;
    padding: .18rem .6rem;
    border-radius: 999px;
    margin-top: .2rem;
}

.wordmark--light .wordmark__name { color: #fff; }
.wordmark--light .wordmark__tag { background: rgba(255, 255, 255, .18); }

.wordmark--lg .wordmark__name { font-size: 2.6rem; }
.wordmark--lg .wordmark__tag { font-size: .8rem; padding: .3rem 1rem; }

/* Logo asli bentuknya bertumpuk (daun di atas, tulisan di bawah), jadi
   tingginya perlu lebih besar dari logo mendatar biasa supaya tetap terbaca. */
.brand-logo {
    height: 58px;
    width: auto;
    transition: height .3s ease;
}

.is-stuck .brand-logo { height: 46px; }

.hero-logo {
    height: clamp(110px, 8vw, 150px);
    width: auto;
}

.footer-logo { height: 72px; width: auto; }

/* Logo utama berwarna navy, di footer navy perlu alas putih supaya terlihat */
.footer-logo-chip {
    display: inline-block;
    background: #fff;
    border-radius: 1rem;
    padding: .85rem 1.25rem;
}

.footer-logo-chip img { height: 74px; width: auto; display: block; }

/* ===== 5. Navbar ========================================================= */

.pt-navbar {
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
    padding-block: 1.1rem;
}

.pt-navbar.is-stuck {
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--pt-shadow-sm);
    padding-block: .55rem;
    backdrop-filter: blur(6px);
}

.pt-navbar .nav-link {
    color: var(--pt-ink);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .04em;
    padding-inline: .9rem;
}

.pt-navbar .nav-link:hover,
.pt-navbar .nav-link.active {
    color: var(--pt-navy-bright);
}

.pt-navbar .navbar-toggler {
    border-color: rgba(27, 46, 109, .2);
    padding: .35rem .5rem;
}

.pt-navbar .navbar-toggler:focus { box-shadow: none; }

/* ===== 6. Tombol ========================================================= */

.btn-navy {
    background: var(--pt-navy);
    border: 1px solid var(--pt-navy);
    color: #fff;
    border-radius: 999px;
    padding: .6rem 1.6rem;
    font-size: .875rem;
    letter-spacing: .04em;
    font-weight: 400;
    transition: background-color .2s ease, transform .2s ease;
}

.btn-navy:hover { background: var(--pt-navy-dark); border-color: var(--pt-navy-dark); color: #fff; }

.btn-gold-outline {
    border: 1px solid var(--pt-gold);
    color: var(--pt-gold);
    border-radius: 999px;
    padding: .6rem 1.6rem;
    font-size: .875rem;
    letter-spacing: .04em;
    background: transparent;
}

.btn-gold-outline:hover { background: var(--pt-gold); color: #fff; }

.btn-light-outline {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    border-radius: 999px;
    padding: .6rem 1.6rem;
    font-size: .875rem;
    background: transparent;
}

.btn-light-outline:hover { background: #fff; color: var(--pt-navy); }

/* ===== 7. Hero =========================================================== */

.hero {
    position: relative;
    background: var(--pt-cream);
    overflow: hidden;
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(6rem, 4rem + 8vw, 9rem) clamp(3rem, 2rem + 5vw, 6rem);
}

.hero__title {
    font-family: var(--pt-serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
    line-height: 1.05;
    letter-spacing: .04em;
    color: var(--pt-ink);
    text-transform: uppercase;
}

.hero__title strong {
    display: block;
    font-weight: 700;
    color: var(--pt-navy);
}

.hero__services {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero__services li {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4a5163;
    padding-inline: .85rem;
    border-right: 1px solid var(--pt-gold-soft);
}

.hero__services li:first-child { padding-left: 0; }
.hero__services li:last-child { border-right: 0; }

.hero__media {
    position: relative;
    min-height: 340px;
    height: 100%;
}

/* Pita navy melengkung di bawah hero, meniru bentuk di halaman sampul */
.hero__wave {
    position: relative;
    background: var(--pt-navy);
    color: #fff;
    margin-top: -1px;
}

.hero__wave-top {
    display: block;
    width: 100%;
    height: clamp(40px, 6vw, 90px);
    margin-bottom: -1px;
    fill: var(--pt-navy);
}

.hero__slogan {
    font-family: var(--pt-serif);
    font-style: italic;
    font-size: clamp(1.15rem, .9rem + 1vw, 1.6rem);
    color: var(--pt-gold-soft);
    line-height: 1.35;
}

.hero__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 2.5rem;
    font-size: .95rem;
}

.hero__contact a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.hero__contact a:hover { color: var(--pt-gold-soft); }

.hero__contact i { color: var(--pt-gold); font-size: 1.15rem; }

/* ===== 8. Kartu nilai / fitur ============================================ */

.value-panel {
    background: var(--pt-navy);
    color: #fff;
    border-radius: 2rem;
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.value-item { text-align: center; }

.value-item__icon {
    width: 62px;
    height: 62px;
    border: 1px solid var(--pt-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--pt-gold);
    margin-bottom: 1rem;
}

.value-item__title {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    margin-bottom: .5rem;
}

.value-item__title::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    background: var(--pt-gold);
    margin: .65rem auto 0;
}

.value-item__text {
    font-size: .82rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
    font-weight: 300;
    margin: 0;
}

/* Versi terang, dipakai di section dengan latar krem */
.value-item--light .value-item__icon {
    border-color: rgba(27, 46, 109, .18);
    background: rgba(27, 46, 109, .05);
    color: var(--pt-navy);
}

.value-item--light .value-item__title { color: var(--pt-navy); }
.value-item--light .value-item__title::after { background: var(--pt-gold); }
.value-item--light .value-item__text { color: var(--pt-muted); }

/* ===== 9. Kutipan ======================================================== */

.quote-block {
    position: relative;
    padding-left: 2.5rem;
}

.quote-block::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -1.5rem;
    font-family: var(--pt-serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--pt-gold);
}

.quote-block p {
    font-family: var(--pt-serif);
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
    line-height: 1.45;
    color: var(--pt-navy);
    margin: 0;
}

/* ===== 10. Timeline layanan interior ===================================== */

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.step-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: var(--pt-gold-soft);
}

.step-item {
    display: flex;
    gap: 1.15rem;
    position: relative;
    padding-bottom: 1.75rem;
}

.step-item:last-child { padding-bottom: 0; }

.step-item__icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--pt-cream);
    border: 1px solid var(--pt-gold-soft);
    color: var(--pt-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
}

.step-item__title {
    font-family: var(--pt-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pt-ink);
    margin-bottom: .25rem;
}

.step-item__text {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--pt-muted);
    margin: 0;
}

/* ===== 11. Daftar fitur ikon kotak ====================================== */

.feature-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-row__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pt-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.feature-row__body { border-left: 1px solid var(--pt-gold-soft); padding-left: 1rem; }

.feature-row__title {
    font-family: var(--pt-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pt-navy);
    margin-bottom: .2rem;
}

.feature-row__text {
    font-size: .85rem;
    line-height: 1.65;
    color: var(--pt-muted);
    margin: 0;
}

.service-badge {
    width: 58px;
    height: 58px;
    border-radius: .75rem;
    background: var(--pt-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* ===== 12. Why rent ===================================================== */

.reason-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.reason-card__ring {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e8e9ec;
    border: 2px dotted #cfd3da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--pt-navy);
    position: relative;
}

.reason-card__ring::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid var(--pt-navy);
    border-right-color: transparent;
    border-top-color: transparent;
    transform: rotate(-45deg);
}

.reason-card__body { border-left: 1px solid var(--pt-gold-soft); padding-left: 1.5rem; }

.reason-card__title {
    font-family: var(--pt-serif);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--pt-navy-bright);
    margin-bottom: .5rem;
}

.reason-card__text {
    color: #4a5163;
    line-height: 1.8;
    margin: 0;
    font-size: .95rem;
}

/* ===== 13. Tabel short vs long term ===================================== */

.plan-block { margin-bottom: 2.5rem; }

.plan-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--pt-navy);
    color: #fff;
    border-radius: .75rem .75rem 0 0;
    padding: .6rem 1.5rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .85rem;
    margin-bottom: -1px;
}

/* Catatan: elemen ini juga memakai .table-responsive dari Bootstrap yang
   memberi overflow-x: auto. Jangan diganti jadi overflow: hidden - itu
   mematikan geser sampingnya dan kolom tabel jadi terpotong diam-diam. */
.plan-table {
    border: 1px solid #dfe3ea;
    border-radius: 0 .9rem .9rem .9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

/* Scrollbar tipis supaya jelas tabelnya bisa digeser */
.plan-table::-webkit-scrollbar { height: 8px; }
.plan-table::-webkit-scrollbar-track { background: #eef2f9; }

.plan-table::-webkit-scrollbar-thumb {
    background: var(--pt-gold);
    border-radius: 999px;
}

.plan-table { scrollbar-width: thin; scrollbar-color: var(--pt-gold) #eef2f9; }

.plan-table table { margin: 0; }

.plan-table th,
.plan-table td {
    text-align: center;
    vertical-align: middle;
    border-color: #e6e9ef;
    padding: 1rem .75rem;
}

.plan-table th {
    background: #fff;
    color: var(--pt-navy);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    min-width: 140px;
}

.plan-table td {
    background: #eef2f9;
    color: var(--pt-navy);
    font-size: .9rem;
    font-weight: 400;
}

.plan-table__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--pt-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: .6rem;
}

/* ===== 14. Project ====================================================== */

.project-block + .project-block { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.location-pill {
    display: inline-flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--pt-navy);
    color: #fff;
    border-radius: 1rem;
    padding: .9rem 1.5rem .9rem 1.1rem;
    box-shadow: var(--pt-shadow-sm);
}

.location-pill__pin {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.location-pill__name { font-weight: 500; line-height: 1.3; }
.location-pill__place { font-size: .85rem; color: rgba(255, 255, 255, .75); font-weight: 300; }

.project-card {
    border: 1px solid rgba(27, 46, 109, .18);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    height: 100%;
}

.project-card__caption {
    background: var(--pt-navy);
    color: #fff;
    text-align: center;
    font-size: .875rem;
    padding: .6rem .75rem;
    letter-spacing: .02em;
}

/* Titik-titik ornamen seperti di halaman Our Project */
.dot-grid {
    width: 110px;
    height: 70px;
    background-image: radial-gradient(var(--pt-navy) 1.6px, transparent 1.6px);
    background-size: 18px 18px;
    opacity: .35;
}

/* ===== 15. Kontak & footer ============================================== */

.contact-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    color: var(--pt-ink);
}

.contact-row__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pt-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.contact-row a { color: inherit; text-decoration: none; }
.contact-row a:hover { color: var(--pt-navy-bright); }

.badge-strip {
    background: var(--pt-navy-dark);
    color: #fff;
    padding: 1.75rem 0;
}

.badge-strip__item {
    display: flex;
    gap: .9rem;
    align-items: center;
}

.badge-strip__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}

.badge-strip__title {
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .1rem;
}

.badge-strip__text { font-size: .8rem; color: rgba(255, 255, 255, .7); margin: 0; font-weight: 300; }

.site-footer {
    background: var(--pt-navy);
    color: rgba(255, 255, 255, .75);
    padding: 3rem 0 1.5rem;
    font-size: .9rem;
}

.site-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: .8rem;
}

/* ===== 16. Tombol WhatsApp mengambang =================================== */

.wa-float {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1040;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    text-decoration: none;
    transition: transform .2s ease;
}

.wa-float:hover { color: #fff; transform: translateY(-3px); }

/* ===== 17. Kotak placeholder gambar ===================================== */

.ph-box {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(27, 46, 109, .035),
            rgba(27, 46, 109, .035) 10px,
            rgba(27, 46, 109, .06) 10px,
            rgba(27, 46, 109, .06) 20px
        );
    border: 1px dashed rgba(27, 46, 109, .28);
    color: var(--pt-navy);
    width: 100%;
    height: 100%;
}

.ph-box__icon { font-size: 1.6rem; opacity: .45; margin-bottom: .4rem; }

.ph-box__label {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    margin-bottom: .15rem;
}

.ph-box__path {
    font-size: .68rem;
    color: var(--pt-muted);
    background: rgba(255, 255, 255, .75);
    padding: .1rem .4rem;
    border-radius: .25rem;
    word-break: break-all;
    max-width: 100%;
}

/* ===== 18. Penyesuaian layar kecil ====================================== */

@media (max-width: 991.98px) {
    .pt-navbar:not(.is-stuck) {
        background: rgba(255, 255, 255, .96);
        box-shadow: var(--pt-shadow-sm);
    }

    .pt-navbar .navbar-collapse {
        background: #fff;
        border-radius: .75rem;
        padding: .75rem 1rem;
        margin-top: .75rem;
        box-shadow: var(--pt-shadow-sm);
    }

    .hero__media { min-height: 260px; }
    .quote-block { padding-left: 2rem; }
    .reason-card { gap: 1rem; }
    .reason-card__ring { flex-basis: 74px; width: 74px; height: 74px; font-size: 1.5rem; }
    .reason-card__body { padding-left: 1rem; }
}

@media (max-width: 575.98px) {
    .hero__services li {
        border-right: 0;
        padding-inline: 0;
        flex: 0 0 100%;
    }

    .value-panel { border-radius: 1.25rem; }
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* Supaya anchor #section tidak tertutup navbar yang fixed */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ===== 19. Sentuhan hover supaya halaman terasa hidup ==================== */

.project-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pt-shadow);
}

/* Foto sedikit membesar saat disentuh kursor */
.ratio img {
    transition: transform .5s ease;
}

.ratio:hover img {
    transform: scale(1.04);
}

.value-item__icon,
.service-badge,
.contact-row__icon {
    transition: transform .3s ease;
}

.value-item:hover .value-item__icon,
.feature-row:hover .feature-row__icon,
.contact-row:hover .contact-row__icon {
    transform: translateY(-3px);
}

/* ===== 20. Perbaikan khusus layar kecil ================================= */

@media (max-width: 991.98px) {
    /* Menu panjang tidak boleh mendorong tinggi navbar sampai keluar layar */
    .pt-navbar .navbar-collapse {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    /* Di HP, animasi masuk dari samping diubah jadi dari bawah. Geseran
       horizontal 100px milik AOS adalah penyebab halaman bisa digeser
       ke samping, dan di layar sempit efeknya juga terasa berlebihan. */
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        transform: translate3d(0, 30px, 0);
    }

    [data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"].aos-animate {
        transform: translate3d(0, 0, 0);
    }

    /* Tabel perbandingan: beri ruang untuk scrollbar */
    .plan-table { padding-bottom: 2px; }
}

@media (max-width: 575.98px) {
    /* Bootstrap: .row dengan g-5 memberi margin samping -24px, sedangkan
       .container hanya punya padding 12px. Selisih 12px inilah yang bikin
       halaman bisa digeser ke samping di HP. Jarak antar-kolom (vertikal)
       tetap lebar karena yang dikecilkan hanya gutter horizontal. */
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ===== 21. Kurung overflow AOS per section ============================== */
/* AOS menggeser elemen fade-left/right sejauh 100px sebelum animasi masuk.
   Kalau sisa ruang di kanan container kurang dari itu (hampir selalu),
   halaman jadi bisa digeser ke samping. overflow-x: clip mengurung geseran
   di dalam section tanpa membuat scroll container, jadi position: sticky
   dan anchor #section tetap berfungsi normal. */
main > section,
.badge-strip,
.site-footer {
    overflow-x: clip;
}