/*
 * mobile.css - Perbaikan tampilan responsive / mobile view.
 * Di-load setelah custom.css di semua halaman. Semua aturan dibatasi
 * media query sehingga tampilan desktop tidak berubah.
 */

/* ===== Tablet & HP (< 768px) ===== */
@media (max-width: 767px) {

    /* --- Umum: cegah konten melebar keluar layar --- */
    html, body { overflow-x: hidden; }
    img, video, iframe, embed, object { max-width: 100%; }
    img { height: auto; }

    /* --- Header: logo kiri + tombol menu kanan dalam satu baris --- */
    #header .col-md-10 { position: static; }
    #header .logo-container { text-align: left; padding: 8px 0; height: auto; }
    #header .logo-container .site-logo { margin: 0; padding: 0; display: block; text-align: left; }
    #header .site-logo img { max-width: 150px !important; height: auto; }
    #header .separator { display: none; }
    #header .kl-top-header { margin-top: 0; padding: 0; height: auto; }
    /* container menu desktop (disembunyikan di mobile) punya margin negatif inline yang memotong tinggi header */
    #header .header-links-container { float: none; margin: 0 !important; text-align: center; }
    #header .topnav.navRight { float: none; display: block; margin: 0 0 6px; padding: 0; white-space: nowrap; }
    #header .topnav.navRight > li { float: none; display: inline-block; vertical-align: middle; margin: 0 1px; }
    #header .topnav > li > a { padding: 4px 5px; font-size: 10px; }
    #header #primary_nav_wrap ul { margin: 0; padding: 0; }
    #zn-res-menuwrapper { position: absolute; top: 12px; right: 15px; height: auto; z-index: 5; }
    #header #zn-res-menuwrapper .zn-res-trigger { float: none; margin: 0 !important; }

    /* --- Tabel data (Kendo Grid): scroll horizontal, kolom tetap terbaca --- */
    *:has(> .k-grid) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .k-grid { min-width: 640px; }
    *:has(> table.shop_table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* tema memakai display:table sehingga .tab-content ikut melebar sesuai isi tabel */
    .tabbable .tab-content,
    .tab-content { display: block !important; width: 100% !important; max-width: 100%; box-sizing: border-box; }

    /* --- Grafik Highcharts / Highstock --- */
    .highcharts-container, .highcharts-root { max-width: 100%; }

    /* --- Form: hilangkan margin negatif .row bersarang tanpa kolom --- */
    .kl-title-block > .row,
    .contact-form .row { margin-left: 0; margin-right: 0; }
    .contact-form label { float: none !important; display: block; text-align: left; }

    /* --- Slider beranda: tinggi mengikuti rasio banner (2147x1000 = 46.6%),
           responsive.css memaksa 80-84% sehingga ada area abu-abu kosong --- */
    .kl-slideshow.iosslider-slideshow.iosslider--custom-height { padding-bottom: 46.6% !important; }
    .kl-slideshow.iosslider-slideshow .sliderbox img { width: 100%; }

    /* --- Kartu beranda: margin-top negatif inline membuat kartu saling menumpuk --- */
    .image-boxes[style*="margin-top: -50px"] { margin-top: 20px !important; }

    /* --- Teks justify di layar sempit menimbulkan spasi lebar --- */
    p[style*="justify"], div[style*="justify"] { text-align: left !important; }

    /* --- Judul besar agar tidak terpotong --- */
    h1, h2, .subheader-maintitle { word-wrap: break-word; overflow-wrap: break-word; }

    /* --- Footer --- */
    #footer img { max-width: 100% !important; height: auto; }
    #footer span[style*="padding-right"] { display: inline-block; padding: 4px 8px !important; }
}