/* ============================================================
   RESPONSIVE.CSS — Media queries (URUT dari BESAR ke KECIL)
   Agar rule yang lebih spesifik (kecil) otomatis menang.
   ============================================================ */

/* ============================================================
   SAFETY NET — Cegah overflow horizontal
   TANPA mematikan position:sticky
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Gunakan overflow-x: clip (bukan hidden) — tidak memutus sticky */
html {
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

/* Fallback untuk browser lama yang belum support clip */
@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden;
  }
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
/* ============================================================
   1100px — TABLET LANDSCAPE
   ============================================================ */
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns:repeat(3,1fr); }
  .about-grid { grid-template-columns:1fr 1fr; }
  .about-panel { grid-column:1 / -1; }
  .services-layout { grid-template-columns:1fr; }
  .services-banner { min-height:260px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .partners-grid { grid-template-columns:repeat(4,1fr); }
  .partners-supplier-grid { grid-template-columns:repeat(3,1fr); }
}

/* ============================================================
   992px — TABLET PORTRAIT
   ============================================================ */
@media (max-width: 992px) {
  /* Grid umum */
  .grid-4, .grid-3 { grid-template-columns:repeat(2,1fr); }
  .article-grid { grid-template-columns:repeat(2,1fr); }

  /* Kontak */
  .contact-cards { grid-template-columns:repeat(2,1fr); }
  .contact-layout { grid-template-columns:1fr; }
  .contact-info { position: static; }
  .map-container { height: 340px; }

  /* Detail produk */
  .detail-grid { grid-template-columns:1fr; gap:32px; }
  .detail-image { position: static; }

  /* Tentang */
  .visi-misi-grid { grid-template-columns:1fr; gap:16px; }
  .about-grid-tentang { grid-template-columns:1fr; gap:24px; }
  .about-image-tentang img { height:280px; }

  /* Footer */
  .footer-col-nav ul {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* ============================================================
   900px
   ============================================================ */
@media (max-width: 900px) {
  .grid-4, .grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   768px — TABLET/MOBILE UMUM
   ============================================================ */
@media (max-width: 768px) {

  /* --- NAVIGASI --- */
  .menu-toggle { display:block; }
  .main-nav {
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    padding:20px;
    box-shadow:var(--shadow-md);
    display:none;
  }
  .main-nav.active { display:block; }
  .main-nav ul { flex-direction:column; gap:0; }
  .main-nav a {
    display:block;
    padding:12px 0;
    border-bottom:1px solid var(--border);
  }
  .header-actions .btn-primary { display:none; }

  /* Header — search & hamburger rapat */
  .header-inner {
    gap: 8px;
    padding: 14px 20px;
  }
  .header-actions {
    margin-right: 0;
    margin-left: auto;
    gap: 6px;
  }
  .search-btn {
    margin-right: 0;
    width: 42px;
    height: 42px;
  }
  .search-btn .icon {
    width: 18px;
    height: 18px;
  }
  .menu-toggle {
    padding: 4px;
    line-height: 1;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- SERVICES PAGE (publik) --- */
  .services-page-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card-media {
    height: 180px;
  }
  .service-card-body {
    padding: 18px;
  }
  .service-card-head h3 {
    font-size: 15px;
  }

  /* --- HERO SLIDER --- */
  .hero {
    min-height:auto;
    padding:60px 0 40px;
    align-items:flex-start;
  }
  .hero-slider-nav {
    position:static;
    padding:16px 0 0;
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:28px;
  }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { width:100%; justify-content:center; }

  /* Slider teks di tengah */
  .slide.slide-pos-left .slide-content,
  .slide.slide-pos-center .slide-content,
  .slide.slide-pos-right .slide-content {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  .slide.slide-pos-left .slide-overlay,
  .slide.slide-pos-center .slide-overlay,
  .slide.slide-pos-right .slide-overlay {
    background:linear-gradient(180deg,
      rgba(15,34,53,.85) 0%,
      rgba(15,34,53,.75) 100%);
  }
  .slide.slide-pos-left .hero-actions,
  .slide.slide-pos-center .hero-actions,
  .slide.slide-pos-right .hero-actions {
    justify-content:center;
  }
  .slide.slide-pos-left .slide-content p,
  .slide.slide-pos-right .slide-content p {
    margin-left:auto;
    margin-right:auto;
  }
  .slide-content { padding-top:40px; padding-bottom:40px; }
  .slide-content .hero-badge {
    font-size:10px;
    padding:5px 12px;
    letter-spacing:1px;
    margin-bottom:16px;
  }
  .slide-content h1 {
    font-size:24px;
    line-height:1.25;
    margin-bottom:14px;
    letter-spacing:-.3px;
  }
  .slide-content p {
    font-size:13px;
    line-height:1.6;
    margin-bottom:24px;
    max-width:100%;
  }
  .slide-content .hero-actions {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .slide-content .hero-actions .btn {
    width:100%;
    justify-content:center;
    padding:12px 18px;
    font-size:13px;
  }

  /* --- GRIDS UMUM --- */
  .grid-5, .grid-4, .grid-3 { grid-template-columns:1fr 1fr; }
  .features .grid-5 { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; }
  .services-list {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
    gap: 12px;
  }
  .service-item {
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }
  .service-item p { -webkit-line-clamp: 3; line-clamp: 3; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .cta-inner { flex-direction:column; align-items:flex-start; }

  /* --- SERVICES BANNER --- */
  .services-banner {
    min-height: auto;
    padding: 40px 0;
  }
  .banner-inner {
    padding: 28px 24px;
  }
  .banner-inner h2 { font-size: 22px; }
  .banner-inner p { font-size: 13px; margin-bottom: 20px; }

  /* --- SECTION --- */
  .section { padding:56px 0; }
  .section-head { flex-direction:column; align-items:flex-start; }

  /* --- LOGO --- */
  .logo-img { max-height:42px; }
  .logo-text { padding-left:10px; }
  .logo-text strong { font-size:11px; }
  .logo-text span { font-size:12px; letter-spacing:2px; }
  .logo-text small { font-size:9px; }
  .logo-footer-img { max-height:48px; padding:4px 8px; }
  .logo-footer-text strong { font-size:11px; }
  .logo-footer-text span { font-size:12px; }

  /* --- SECTION GROUP (halaman dinamis) --- */
  .section-group { padding:20px; }
  .page-list { grid-template-columns:1fr; }

  /* --- PAGE HEADER --- */
  .page-header { padding:56px 0; }
  .page-header h1 { font-size:22px; line-height:1.3; }
  .page-header p {
    font-size:13px;
    line-height:1.5;
    max-width:90%;
    margin:8px auto 0;
  }

  /* --- SEARCH MODAL --- */
  .search-modal { padding-top:8vh; }
  .search-modal-form { padding:6px 6px 6px 16px; border-radius:12px; }
  .search-modal-form input { font-size:15px; padding:12px 0; }
  .search-modal-icon svg { width:18px; height:18px; }
  .search-modal-close { width:36px; height:36px; margin-left:-15px; }
  .search-modal-hint { font-size:12px; }
  .search-modal-hint kbd { font-size:11px; padding:1px 6px; }

  /* --- SEARCH FORM (halaman search) --- */
  .search-form-main { flex-direction:column; padding:12px; }
  .search-form-main .btn { width:100%; justify-content:center; }
  .search-results { grid-template-columns:1fr; }
  .search-thumb { width:72px; height:72px; }

  /* --- CTA DARK --- */
  .cta-dark { padding:56px 0; }
  .cta-dark-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .cta-dark h2 { font-size:22px; }
  .cta-dark p { font-size:13px; }
  .btn-cta-yellow {
    width:100%;
    justify-content:center;
    padding:14px 24px;
    font-size:13px;
  }

  /* --- VISI MISI --- */
  .vm-card { padding:24px 20px; }
  .vm-card .panel-icon { width:46px; height:46px; margin-bottom:14px; }
  .vm-card h3 { font-size:16px; }
  .vm-card p { font-size:13px; }

  /* --- TENTANG --- */
  .about-grid-tentang { gap:20px; }
  .about-grid-tentang .about-text h2 { font-size:22px; }
  .about-image-tentang {
    margin-left:-20px;
    margin-right:-20px;
    width:calc(100% + 40px);
    border-radius:0;
  }
  .about-image-tentang img {
    height:220px;
    border-radius:0;
  }

  /* --- PARTNERS --- */
  .partners-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
  .partner-logo-card { height:80px; padding:12px; }
  .partners-supplier-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .supplier-card { padding:20px 16px; gap:10px; }
  .supplier-logo-wrap { height:70px; }
  .supplier-card h4 { font-size:13px; }

  /* --- PRODUK FILTER --- */
  .products-page .filter-bar { flex-direction:column; padding:12px; }
  .filter-search,
  .filter-bar select,
  .filter-bar .btn-primary,
  .filter-bar .btn-reset {
    width:100%;
    min-width:0;
  }
  .product-thumb { height:160px; }
  .detail-actions { flex-direction:column; }
  .detail-actions .btn { width:100%; justify-content:center; }

  /* ============================================================
     PRODUK PAGE — Grid tetap 2 kolom di mobile (compact)
     ============================================================ */
  .products-page .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .products-page .product-thumb {
    height: 120px;
  }
  .products-page .product-body {
    padding: 12px;
  }
  .products-page .product-body h4 {
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .products-page .product-body p {
    font-size: 11.5px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .products-page .product-price {
    font-size: 13px;
    padding-top: 8px;
    margin-bottom: 8px;
    gap: 4px;
  }
  .products-page .product-price small {
    font-size: 10.5px;
  }
  .products-page .product-badge {
    font-size: 9.5px;
    padding: 3px 8px;
    top: 8px;
    left: 8px;
  }
  .products-page .product-card .link-arrow {
    font-size: 11.5px;
  }

  /* --- KONTAK --- */
  .contact-info-section,
  .contact-section,
  .contact-map-section { padding:40px 0; }

  .contact-cards {
    grid-template-columns:1fr;
    gap:12px;
  }
  .contact-card {
    padding:18px;
    gap:14px;
    border-radius:12px;
  }
  .contact-icon { width:44px; height:44px; border-radius:10px; }
  .contact-icon svg { width:20px; height:20px; }
  .contact-card h4 { font-size:13px; margin-bottom:4px; }
  .contact-card p,
  .contact-card a { font-size:12.5px; line-height:1.5; }

  .contact-form-wrap { padding:24px 20px; }
  .contact-form-wrap h2 { font-size:20px; }
  .contact-form-wrap .section-desc { margin-bottom:20px; font-size:13px; }
  .contact-form .form-row-2 { grid-template-columns:1fr; gap:0; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { padding:11px 14px; font-size:14px; }
  .contact-form textarea { min-height:110px; }
  .btn-submit {
    width:100%;
    justify-content:center;
    padding:14px 24px;
  }

  .contact-info { gap:14px; }
  .info-card { padding:20px; }
  .info-card h3 { font-size:14px; margin-bottom:12px; }
  .hours-list li { padding:9px 0; font-size:12.5px; }
  .wa-icon { width:48px; height:48px; }
  .info-card-wa p { font-size:12.5px; margin-bottom:14px; }
  .btn-wa-full { font-size:13px; padding:12px 18px; }

  .map-card-header {
    padding:18px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .map-card-header h3 { font-size:16px; }
  .map-card-header .btn {
    width:100%;
    justify-content:center;
    padding:10px 16px;
    font-size:13px;
  }
  .map-container { height:260px; }

  /* --- TIMELINE MOBILE --- */
  .timeline { margin-top:40px; padding:0; }
  .timeline::before {
    left:20px;
    transform:none;
    width:2px;
  }
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 52px;
    margin-bottom: 40px;
    align-items: stretch;
    justify-content: flex-start;
  }
  .timeline-item > .timeline-content,
  .timeline-item > .timeline-image {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .timeline-content,
  .timeline-item.right .timeline-content,
  .timeline-item.left .timeline-content {
    text-align: left;
    padding: 20px 22px;
  }
  .timeline-item > .timeline-dot,
  .timeline-item.left > .timeline-dot,
  .timeline-item.right > .timeline-dot,
  .timeline-dot {
    position: absolute !important;
    top: 30px !important;
    left: 12px !important;
    transform: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 5px rgba(245,184,46,.15) !important;
    box-sizing: content-box !important;
    padding: 0 !important;
    display: block !important;
    flex: none !important;
    margin: 0 !important;
  }
  .timeline-image { aspect-ratio: 16 / 9; }
  .timeline-image-empty { min-height: 180px; }
  .timeline-content h3 { font-size: 17px; }
  .timeline-subtitle { font-size: 12px; margin-bottom: 10px; }
  .timeline-content p { font-size: 13px; }

  /* --- FOOTER --- */
  .footer-col-nav { line-height:1.2; }

  /* --- CTA YELLOW (legacy) --- */
  .cta-yellow { padding:40px 0; }
  .cta-yellow h2 { font-size:20px; }
  .cta-yellow p { font-size:13px; }
  .cta-yellow .btn {
    width:100%;
    justify-content:center;
    margin-top:12px;
  }
}

/* ============================================================
   640px — HP BESAR
   ============================================================ */
@media (max-width: 640px) {
  .article-grid { grid-template-columns:1fr; }
  .article-thumb { height:180px; }
  .article-header h1 { font-size:22px; }
  .article-content { font-size:15px; }

  /* Contact cards pastikan 1 kolom */
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { padding: 16px 18px; gap: 14px; border-radius: 12px; }
  .contact-icon { width: 42px; height: 42px; border-radius: 10px; }
  .contact-icon svg,
  .contact-icon .icon { width: 20px; height: 20px; }
  .contact-card h4 { font-size: 13.5px; margin-bottom: 4px; }
  .contact-card p,
  .contact-card a {
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
  }
}

/* ============================================================
   520px — HP KECIL
   ============================================================ */
@media (max-width: 520px) {
  /* Grid — kecuali halaman produk yang tetap 2 kolom compact */
  .grid-5, .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr; }
  .products-page .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Header — search & hamburger compact, TINGGI NORMAL */
  .header-inner {
    gap: 6px;
    padding: 12px 16px;
  }
  .header-actions {
    gap: 4px;
  }
  .search-btn {
    width: 40px;
    height: 40px;
  }
  .search-btn .icon {
    width: 17px;
    height: 17px;
  }
  .menu-toggle {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .service-card-media {
    height: 160px;
  }
  .service-card-body {
    padding: 16px;
  }
  .service-card-head h3 {
    font-size: 14.5px;
  }
  .service-card-desc {
    font-size: 13px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* Logo */
  .logo-img { max-height:36px; }
  .logo-text strong { font-size:10px; }
  .logo-text span { font-size:11px; letter-spacing:1.5px; }
  .logo-text small { display:none; }
  .logo-footer-text small { display:none; }

  /* Hero */
  .hero-slider-nav { display:none; }
  .hero { padding-bottom:44px; }
  .slide-content {
    padding-top:32px;
    padding-bottom:32px;
    padding-left:16px;
    padding-right:16px;
  }
  .slide-content .hero-badge {
    font-size:9px;
    padding:4px 10px;
    letter-spacing:.8px;
  }
  .slide-content h1 {
    font-size:20px;
    line-height:1.3;
    margin-bottom:12px;
  }
  .slide-content p { font-size:12px; margin-bottom:20px; }
  .slide-content .hero-actions .btn {
    padding:11px 16px;
    font-size:12px;
  }

  /* Page header */
  .page-header { padding:32px 0; }
  .page-header h1 { font-size:20px; }
  .page-header p { font-size:12px; }

  /* Visi misi */
  .vm-card { padding:20px 16px; }
  .vm-card h3 { font-size:15px; }
  .vm-card p { font-size:12.5px; line-height:1.6; }

  /* Tentang */
  .about-image-tentang {
    margin-left:-16px;
    margin-right:-16px;
    width:calc(100% + 32px);
  }
  .about-image-tentang img { height:180px; }

  /* Partners */
  .partners-grid { grid-template-columns:repeat(2,1fr); }
  .partner-logo-card { height:72px; }
  .partners-supplier-grid { grid-template-columns:repeat(2,1fr); }
  .supplier-logo-wrap { height:60px; }
  .supplier-initial { width:52px; height:52px; font-size:18px; }
  .supplier-badge { font-size:10px; padding:3px 10px; }

  /* CTA Dark */
  .cta-dark { padding:44px 0; }
  .cta-dark h2 { font-size:20px; }
  .cta-dark-label { font-size:11px; }

  /* Kontak */
  .contact-info-section,
  .contact-section,
  .contact-map-section { padding:32px 0; }
  .contact-form-wrap { padding:20px 16px; }
  .contact-form-wrap h2 { font-size:18px; }
  .map-container { height:220px; }

  /* Timeline */
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    padding-left: 44px;
    margin-bottom: 32px;
    gap: 12px;
  }
  .timeline-content { padding: 18px; }
  .timeline-content h3 { font-size: 16px; }
  .timeline-year { font-size: 12px; padding: 3px 12px; }
  .timeline-item > .timeline-dot,
  .timeline-item.left > .timeline-dot,
  .timeline-item.right > .timeline-dot,
  .timeline-dot {
    top: 26px !important;
    left: 8px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
  .timeline::before { left: 15px; width: 2px; }
  .timeline-content p { font-size: 12.5px; }

  /* ============================================================
     PRODUK PAGE — Compact lebih lagi di HP kecil
     ============================================================ */
  .products-page .grid-4 {
    gap: 8px;
  }
  .products-page .product-thumb {
    height: 100px;
  }
  .products-page .product-body {
    padding: 10px;
  }
  .products-page .product-body h4 {
    font-size: 12.5px;
  }
  .products-page .product-body p {
    font-size: 11px;
  }
  .products-page .product-price {
    font-size: 12.5px;
  }
  .products-page .product-badge {
    font-size: 9px;
    padding: 2px 7px;
  }
}

/* ============================================================
   400px — HP SANGAT KECIL
   ============================================================ */
@media (max-width: 400px) {
  .contact-card h4 { font-size: 13px; }
  .contact-card p,
  .contact-card a { font-size: 12.5px; }
  .contact-icon { width: 38px; height: 38px; }

  /* ============================================================
     PRODUK PAGE — super compact
     ============================================================ */
  .products-page .product-thumb {
    height: 90px;
  }
  .products-page .product-body {
    padding: 8px;
  }
  .products-page .product-body h4 {
    font-size: 12px;
  }
  .products-page .product-body p {
    font-size: 10.5px;
  }
  .products-page .product-price {
    font-size: 12px;
  }
}