/* ========================================================================== Astrindo Company Profile - Global Responsive Layer -------------------------------------------------------------------------- File ini dimuat paling akhir pada layout visitor. Hampir seluruh aturan dibungkus media query `max-width`, sehingga tampilan desktop tidak berubah; yang dirapikan hanya tablet & ponsel. Urutan: 1. Dasar (semua ukuran) 5. <= 767px (ponsel, per halaman) 2. <= 1199px (tablet landscape) 6. <= 575px (ponsel kecil) 3. <= 991px (tablet portrait) 7. <= 400px (ponsel sempit) 4. Komponen umum <= 767px 8. Perangkat sentuh & aksesibilitas ========================================================================== */ /* ========================================================================== 1. DASAR - berlaku di semua ukuran layar ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Pengaman utama: tidak ada scroll horizontal di halaman manapun. Dipakai `clip`, bukan `hidden`, karena `overflow-x: hidden` menjadikan scroll container dan membuat `position: sticky` (header, sidebar detail produk, sidebar karir) berhenti bekerja. */ html, body { overflow-x: clip; } /* Semua media mengikuti lebar induknya. CATATAN: `svg` sengaja TIDAK dimasukkan. Seluruh SVG di situs ini adalah ikon berukuran tetap (mis. `.icon-dropdown` 18x18) yang berada di dalam flex container. `max-width: 100%` membuat lebar min-content-nya jadi 0, sehingga ikon ikut menyusut saat flex item-nya dipadatkan - itu yang membuat panah dropdown Brand/Products/About gepeng di halaman home. SVG ilustratif hanya muncul di konten rich-text, ditangani di bawah. */ img, video, canvas, iframe, embed, object { max-width: 100%; } /* Ikon berukuran tetap tidak boleh dipadatkan oleh flex container. */ .open-submenu, .header-action-item, .faq-heading-icon, .sorting-icon { flex: none; } /* Panah pagination di markup tema ditulis `width="100" height="100"`, padahal wadahnya (`.pagination .link`) cuma 40x25. Dipatok ke ukuran wajar sekali di sini supaya tidak perlu diperbaiki di 5 halaman terpisah. */ .pagination .link svg { width: 20px; height: 20px; flex: none; } /* Form Google yang di-embed di halaman survei: `width="640"` bawaan Google memaksa scroll horizontal di ponsel. */ .eskp-form { width: 100%; max-width: 640px; margin: 0 auto 40px; } .eskp-form iframe { display: block; width: 100%; height: 1540px; border: 0; } /* Kartu promo: tinggi kartu disamakan lewat `h-100`, tombolnya ditengahkan. */ .promo-card-action { display: flex; justify-content: center; } img, video { height: auto; } iframe { border: 0; } /* Teks/URL panjang dipotong, bukan melebarkan layout. */ h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, figcaption, blockquote, .card-text, .breadcrumb-item { overflow-wrap: break-word; word-wrap: break-word; } /* Konten rich-text (CKEditor) dari halaman admin. */ .pd-rte, .nd-body, .cr-prose { overflow-wrap: break-word; } .pd-rte img, .nd-body img, .cr-prose img { height: auto; } /* Di sinilah SVG bisa berupa ilustrasi lebar, jadi di-fluid-kan - bukan secara global (lihat catatan pada blok media di atas). */ .pd-rte svg, .nd-body svg, .cr-prose svg { max-width: 100%; height: auto; } /* Tabel di dalam rich-text & tabel spesifikasi produk boleh digeser horizontal sendiri, tanpa ikut melebarkan halaman. */ .pd-rte figure.table, .nd-body figure.table, .cr-prose figure.table, .rte-scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Video/peta yang di-embed lewat editor artikel jadi 16:9 fleksibel. */ .pd-rte iframe, .nd-body iframe, .cr-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } /* ========================================================================== 2. <= 1199px - tablet landscape ========================================================================== */ @media screen and (max-width: 1199.98px) { /* Grid dua kolom (konten + sidebar) pada halaman listing produk menyisakan ruang yang cukup untuk kartu produk. */ .collection .collection-sidebar { padding-left: 14px; padding-right: 14px; } } /* ========================================================================== 3. <= 991px - tablet portrait & ke bawah (menu sudah jadi drawer) ========================================================================== */ @media screen and (max-width: 991.98px) { /* ---------- Header ---------- */ .header-logo img { max-height: 42px; width: auto; } .header-action .header-action-item { margin-left: 16px !important; } /* Drawer menu tidak boleh lebih lebar dari layar. */ .offcanvas.offcanvas-start, .offcanvas.offcanvas-end { max-width: 92vw; } .offcanvas-wrapper { max-width: 100%; overflow-x: hidden; } /* ---------- Jarak antar-section ---------- */ .mt-100 { margin-top: 60px; } .pt-100 { padding-top: 60px; } .pb-100 { padding-bottom: 60px; } /* ---------- Modal quickview produk ---------- */ .modal-dialog.modal-xl { max-width: calc(100% - 24px); margin-left: auto; margin-right: auto; } .modal .img-large-wrapper { margin-left: 0 !important; width: 100% !important; } .modal .product-details.ps-lg-4 { padding-left: 0 !important; margin-top: 20px; } /* ---------- Listing produk (brand / category / search / shop) ---------- */ /* `ms-3` bawaan markup membuat konten miring ke kanan di layar kecil. */ .collection .filter-sort-wrapper, .collection .collection-title-wrap, .collection .collection-product-container, .collection .collection-sidebar, .collection .accordion-collapse, .collection .pagination { margin-left: 0 !important; } /* Toolbar judul + sorting: tinggi mengikuti isi, bukan dipatok. */ .collection .filter-sort-wrapper { height: auto !important; min-height: 0 !important; row-gap: 10px; padding: 12px 14px; } .collection .collection-title-wrap { flex-wrap: wrap; } .collection .filter-sorting { width: 100%; } .collection .mobile-filter { justify-content: center; width: 100%; cursor: pointer; } /* Panel filter jadi drawer. Markup & handler-nya sudah ada (main.js men-toggle `.active` pada `.filter-drawer`), tapi belum pernah ada CSS-nya - tombol "Filter and Sorting" jadi tidak melakukan apa-apa di ponsel. */ .collection .collection-sidebar { margin-top: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .collection .filter-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1055; width: 320px; max-width: 86vw; padding: 18px 18px 32px; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(-102%); visibility: hidden; transition: transform .3s ease, visibility .3s ease; } .collection .filter-drawer.active { transform: none; visibility: visible; /* spread besar = lapisan gelap menutupi sisa layar */ box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); } /* ---------- Footer ---------- */ footer.footer-modern .footer-widget { margin-bottom: 26px; } footer.footer-modern .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; } /* ---------- Halaman WBS (whistleblowing) ---------- */ /* Kartu kriteria dipasang di flex container tanpa kelas kolom, jadi lebarnya timpang begitu ruang menyempit. */ .criteria { width: 100%; } /* `p-5` (48px) pada kartu pilihan identitas terlalu longgar. */ .price-card .card.p-5 { padding: 24px !important; } } /* ========================================================================== 4. KOMPONEN UMUM - dirapikan mulai lebar ponsel ========================================================================== */ @media screen and (max-width: 767.98px) { /* ---------- Tipografi ---------- */ .section-heading { font-size: 24px; line-height: 1.3; } .heading_24 { font-size: 19px; } .heading_18 { font-size: 16px; } /* ---------- Form ---------- */ /* 16px mencegah Safari iOS auto-zoom saat field difokus. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select, .select2-container .select2-selection--single { font-size: 16px !important; } .select2-container { max-width: 100% !important; } .select2-container--default .select2-selection--single { height: 44px; } /* ---------- Tabel ---------- */ .table-responsive-auto, .pd-spec-wrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tabel spesifikasi produk: kolom label dipersempit, isi boleh memutus kata panjang (kode SKU) supaya tidak melebar. */ .pd-spec { table-layout: fixed; width: 100%; } .pd-spec th { width: 38%; } .pd-spec th, .pd-spec td { word-break: break-word; } /* ---------- Pagination ---------- */ .pagination, .pagination ul, .pagination .page-numbers { flex-wrap: wrap; justify-content: center; gap: 6px; margin-left: 0 !important; padding-left: 0; } .pagination .page-link, .pagination .page-numbers li a, .pagination .page-numbers li span { min-width: 38px; padding: 6px 10px; font-size: 14px; } /* ---------- Breadcrumb ---------- */ .breadcrumb, .breadcrumb-list { flex-wrap: wrap; row-gap: 4px; font-size: 13px; } /* ---------- Tombol ---------- */ .btn-lg { padding: 10px 18px; font-size: 15px; } /* ---------- Slider bawaan tema ---------- */ .common-slider .slick-arrow { transform: scale(.85); } } /* ========================================================================== 5. <= 767px - ponsel: penyesuaian per halaman ========================================================================== */ @media screen and (max-width: 767.98px) { /* ---------- Listing produk ---------- */ .collection { padding-top: 16px !important; } /*
penjarak bawaan markup tidak diperlukan di ponsel. */ #MainContent > br { display: none; } /* Hack lama menarik toolbar ke atas 80px. Diganti jarak normal supaya judul tidak menabrak header sticky. */ .collection .flt { margin-top: 0 !important; } .collection .collection-title { font-size: 16px !important; } .collection .collection-counter { font-size: 13px !important; margin-left: 0 !important; } /* ---------- Halaman detail produk ---------- */ .pd-gallery, .pd-panel, .pd-card { max-width: 100%; } /* ---------- Halaman berita ---------- */ .nd-share, .nd-tags-list { flex-wrap: wrap; row-gap: 8px; } /* ---------- Halaman WBS (whistleblowing) ---------- */ /* `p-5`/`px-5` (48px) terlalu longgar di ponsel. */ .criteria.p-5, .form-pelaporan.p-5, .form-pelaporan .p-5 { padding: 20px !important; } .form-pelaporan .px-5 { padding-left: 12px !important; padding-right: 12px !important; } .area-steps { height: auto !important; } /* Panel melayang saat scroll tidak boleh menutupi seluruh layar. */ #myDiv.floating { left: 0; right: 0; padding: 12px !important; } /* ---------- Halaman cek serial number (Intel) ---------- */ .pvs-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- Service center ---------- */ .sv-map-frame iframe { width: 100%; height: 100%; } /* Daftar cabang bisa digeser tanpa memotong kartu terakhir. */ .sv-branch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sv-branch-scroll::-webkit-scrollbar { display: none; } /* ---------- Cookie consent ---------- */ /* Tombol boleh membungkus & melebar, tidak terpotong di layar sempit. */ .cookie-consent-actions { flex-wrap: wrap; width: 100%; } .cookie-consent-actions .cookie-btn { flex: 1 1 140px; white-space: normal; } /* ---------- Halaman WBS: form pelaporan & tiket ---------- */ /* Radius 2rem dipakai bersama oleh panel putih dan setiap field; pada input selebar layar sudutnya jadi terlihat menggelembung. `!important` diperlukan: wbs.css / wbs-3.css dimuat di dalam @section('content'), jadi urutannya sesudah berkas ini. */ .form-pelaporan { border-radius: 16px !important; } input.form-pelaporan, select.form-pelaporan, textarea.form-pelaporan { border-radius: 10px !important; padding: 12px 14px; } .select2-container .select2-selection--multiple { border-radius: 10px !important; padding: 10px 12px !important; } /* Tombol kirim tidak lagi mepet ke kanan - lebih mudah dijangkau jempol. */ button.custom-link { width: 100%; } /* Menu anchor melayang: 5 tombol harus tetap muat tanpa terpotong. */ #menuButtons { row-gap: 8px; } #menuButtons .btn { padding: 6px 14px; font-size: 13px; } /* Jarak antar-kartu kontak diperkecil dari gap-5 (48px). */ #contactUs .d-flex.gap-5 { gap: 16px !important; } /* ---------- Halaman cek serial number (Intel) ---------- */ /* `white-space: nowrap` pada teks 1.5rem melebarkan modal di ponsel. */ .pvs-auth-text { white-space: normal; font-size: 1.1rem; } /* ---------- Halaman survei kepuasan pelanggan ---------- */ /* Isi form Google membungkus lebih panjang saat sempit; tanpa tambahan tinggi, iframe-nya memunculkan scrollbar kedua di dalam halaman. */ .eskp-form iframe { height: 1900px; } } /* ========================================================================== 6. <= 575px - ponsel kecil ========================================================================== */ @media screen and (max-width: 575.98px) { /* Padding container dibuat konsisten kiri-kanan. */ .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl { padding-left: 16px; padding-right: 16px; } /* Grid produk tetap 2 kolom, jarak antar kartu dirapatkan. */ .collection .collection-product-container > .row { margin-left: -8px; margin-right: -8px; row-gap: 16px; } .collection .collection-product-container > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } /* Toolbar sorting jadi satu kolom penuh. */ .collection .filter-sort-wrapper { flex-direction: column; align-items: flex-start !important; } /* Tombol utama melebar penuh - lebih mudah ditekan. */ .btn-primary.btn-lg, .cf-submit, .btn-buyit-now { width: 100%; } /* Modal quickview hampir penuh layar. */ .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: calc(100% - 16px); margin: 12px auto; } /* Judul & teks hero. */ .cf-hero-title { font-size: 28px; } .cf-hero-sub { font-size: 14px; } .section-heading { font-size: 21px; } /* Footer: sosial media & QR dibungkus rapi. */ footer.footer-modern .footer-social { flex-wrap: wrap; gap: 10px; } footer.footer-modern .footer-qr { max-width: 140px; } /* ---------- Halaman WBS ---------- */ /* Kartu kontak (email & WhatsApp) melebar penuh; alamat email panjang dipatahkan supaya tidak mendorong lebar halaman. */ #contactUs .custom-link { width: 100%; } #contactUs .custom-link .fs-5 { font-size: 15px !important; word-break: break-word; } /* Ikon 50px di sebelah teks tidak boleh ikut dipadatkan. */ #contactUs .custom-link svg { flex: none; } /* ---------- Halaman promo ---------- */ /* Dua kartu per baris di ponsel; judul & tanggal dirapatkan agar muat. */ .promo-card .card-body { padding: 12px; } .promo-card .card-text { font-size: 13px; } } /* ========================================================================== 7. <= 400px - ponsel sempit (mis. iPhone SE) ========================================================================== */ @media screen and (max-width: 400px) { .container, .container-fluid { padding-left: 12px; padding-right: 12px; } .header-logo img { max-height: 34px; } .section-heading { font-size: 19px; } .ap-pcard-body { padding: 10px; } .ap-pcard-name { font-size: 12px; } /* Di layar sangat sempit label spesifikasi ditumpuk di atas nilainya. */ .pd-spec, .pd-spec tbody, .pd-spec tr, .pd-spec th, .pd-spec td { display: block; width: 100%; } .pd-spec th { padding-bottom: 0; border-bottom: 0; } .pd-spec td { padding-top: 2px; } .pagination .page-link, .pagination .page-numbers li a, .pagination .page-numbers li span { min-width: 32px; padding: 5px 8px; font-size: 13px; } } /* ========================================================================== 8. Perangkat sentuh & aksesibilitas ========================================================================== */ /* Di layar sentuh efek hover tidak pernah lepas - matikan animasi angkat. */ @media (hover: none) and (max-width: 991.98px) { .ap-pcard:hover, .ap-org-card:hover, .card:hover { transform: none; } .ap-pcard:hover .ap-pcard-img img { transform: none; } } /* Target sentuh minimal untuk ikon header & aksi kecil. */ @media screen and (max-width: 991.98px) { .header-action-item, .search-close, .btn-close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }