/* [t1235] Desktop/laptop memakai tampilan HP di kolom tengah 480px.
   File ini TIDAK diproses filter KwColumn (aturan @media di sini memakai lebar layar asli).
   Elemen position:fixed bawaan lebarnya mengikuti layar, jadi di sini ditarik masuk ke kolom. */
@media (min-width: 481px) {
    html {
        background: #e6ebf1 !important;
        overflow-x: hidden;
    }
    html[data-theme="dark"] {
        background: #05070d !important;
    }
    body {
        max-width: 480px;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 100vh;
        position: relative;
        overflow-x: clip;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 12px 48px rgba(15, 23, 42, .14);
    }
    html[data-theme="dark"] body {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
    }
    /* [t1240] style.css memberi body overflow-y:scroll. Karena html di atas overflow-x:hidden,
       scroll itu tidak lagi diteruskan ke jendela browser -> body menggambar track scrollbar kosong
       sendiri di tepi kanan kolom (terlihat di Chrome Windows). Scrollbar tetap dipindah ke html. */
    html { overflow-y: scroll; }
    body { overflow-y: visible; }

    /* bar atas, menu bawah & latar dekor: selebar kolom */
    .navbar,
    .kwbn-bar,
    .mobileNav,
    .kiosweb-background-blur {
        left: calc(50% - 240px) !important;
        right: calc(50% - 240px) !important;
        width: auto !important;
    }

    /* tombol melayang di kanan: tetap di tepi kanan kolom */
    .floating-contact { right: calc(50% - 240px + 10px) !important; }
    .floating-btu { right: calc(50% - 240px + 10px) !important; }
    .kwac-btn { right: calc(50% - 240px + 18px) !important; }
    #qontak-webchat-widget,
    iframe[src*="webchat.qontak.com"] { right: calc(50% - 240px) !important; }

    /* panel & lembar bawah yang di HP selebar layar */
    .kwbn-panel {
        left: calc(50% - 240px) !important;
        right: calc(50% - 240px) !important;
    }
    .kwlc-panel {
        left: calc(50% - 240px) !important;
        right: calc(50% - 240px) !important;
    }
    .offcanvas.offcanvas-start {
        left: calc(50% - 240px) !important;
        max-width: 480px;
    }
    .offcanvas.offcanvas-end {
        right: calc(50% - 240px) !important;
        max-width: 480px;
    }
    .offcanvas.offcanvas-top,
    .offcanvas.offcanvas-bottom {
        left: calc(50% - 240px) !important;
        right: calc(50% - 240px) !important;
    }
    #toast-container.toast-top-right,
    #toast-container.toast-bottom-right { right: calc(50% - 240px + 12px) !important; }
    #toast-container.toast-top-left,
    #toast-container.toast-bottom-left { left: calc(50% - 240px + 12px) !important; }

    /* modal: tetap seukuran kolom, bukan selebar layar */
    .modal-dialog:not(.modal-fullscreen) {
        max-width: 464px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .modal-fullscreen {
        left: calc(50% - 240px) !important;
        width: 480px !important;
    }

    /* yang di CSS asli memakai satuan layar (vw) */
    .logins-wrapper,
    .register-wrapper { min-width: 100% !important; }
    .fs-1 { font-size: calc(1.375rem + 7.2px) !important; }
    .fs-2 { font-size: calc(1.325rem + 4.32px) !important; }
    .fs-3 { font-size: calc(1.3rem + 2.88px) !important; }
    .fs-4 { font-size: calc(1.275rem + 1.44px) !important; }
}