/* SI-TENGORO | Perbaikan tampilan presisi HP dan laptop
   CSS ini tidak mengubah data kontak, fungsi admin, atau Firebase.
   Muat setelah seluruh CSS lama sebagai stylesheet terakhir. */

:root { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; width: 100%; overflow-x: clip; }
body { margin-inline: 0; }

/* Seluruh konten tetap terpusat pada lebar layar dan tidak melebar. */
.container {
  width: min(1180px, calc(100% - 28px));
  max-width: calc(100% - 28px);
  margin-inline: auto;
  min-width: 0;
}

/* Grid/Flex harus boleh menyusut, bukan memaksa halaman melebar. */
.nav, .brand, .nav-actions, .nav-links,
.hero-grid, .hero-copy, .hero-visual, .hero-wrap,
.search-panel, .search-tabs, .search-grid, .field,
.cards5, .service-card, .service-body,
.deals-grid, .mini-card, .mini-card .content, .deal-main,
.feature-row, .feature-chip, .testi-grid, .testi-card,
.gesah-grid, .gesah-wrap, .history-wrap,
.contacts-grid, .contact-card, .contact-card > div,
.gallery-grid, .gallery-card, .news-grid, .news-card,
.newsletter, .newsletter-copy, .newsletter-visual,
.footer-grid, .footer-grid > div, .form-grid, .modal {
  min-width: 0;
  max-width: 100%;
}

.cards5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.deals-grid { grid-template-columns: 1.15fr repeat(3, minmax(0,1fr)); }
.feature-row { grid-template-columns: repeat(5,minmax(0,1fr)); }
.testi-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.contacts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gallery-grid, .news-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hero-grid { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); }
.search-grid { grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto; }
.gesah-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.newsletter { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.footer-grid { grid-template-columns: 1.2fr .8fr .8fr .9fr; }

/* Teks panjang, nama petugas, nomor telepon dan berita aman di kolom. */
.brand p, .contact-meta, .contact-card h5,
.service-title, .service-desc, .gallery-details,
.news-details, .history-item, .newsletter-copy,
.section-head p, .hero-copy h2, .hero-copy p,
.photo-status, .online-status, .feature-chip,
.modal, .footer-grid, .deal-main h4 {
  overflow-wrap: anywhere;
}
img, video, svg, canvas { max-width: 100%; }
img, video { height: auto; }
.hero-visual img, .service-thumb img, .mini-card .img img,
.contact-photo img, .gallery-media img, .news-media img,
.newsletter-visual img { height: 100%; object-fit: cover; }

.btn, button { max-width: 100%; }
.btn { white-space: normal; text-align: center; }
input, select, textarea { max-width: 100%; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; }
.search-tabs, .hero-cta, .contact-actions, .service-actions,
.section-head-actions, .photo-status-actions { flex-wrap: wrap; }
.modal-backdrop { max-width: 100vw; overflow-x: clip; }
.modal { width: min(100%, 820px); max-width: 100%; }

/* Laptop/desktop: pisahkan baris menu agar tidak saling menimpa tombol admin. */
@media (min-width: 1251px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 3px;
  }
  .nav > .brand { grid-column: 1; grid-row: 1; }
  .nav > .nav-actions { grid-column: 2; grid-row: 1; }
  .nav > .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    position: static;
    padding-bottom: 9px;
  }
  .nav-links a:hover::after,
  .nav-links a.active::after { bottom: -3px; }
}

/* Laptop sedang/tablet: kartu mengalir tanpa terpotong. */
@media (max-width: 1250px) {
  .nav { gap: 12px; }
  .brand { flex: 1 1 auto; }
  .brand p { line-height: 1.35; }
  .nav-actions { flex: 0 0 auto; }
}
@media (max-width: 1100px) {
  .hero-grid, .newsletter, .gesah-grid, .footer-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .cards5, .feature-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .testi-grid, .deals-grid, .search-grid,
  .contacts-grid, .gallery-grid, .news-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .newsletter-visual { min-height: 220px; }
}

/* HP dan tablet kecil. */
@media (max-width: 800px) {
  .container { width: calc(100% - 24px); max-width: calc(100% - 24px); }
  .nav { gap: 8px; align-items: center; }
  .brand { flex: 1 1 0; min-width: 0; }
  .brand > div:last-child { min-width: 0; }
  .brand h1 { overflow-wrap: normal; font-size: clamp(17px,4.8vw,24px); }
  .brand p { font-size: clamp(10px,2.6vw,12px); }
  .nav-actions { flex: 0 0 auto; }
  .nav-links { max-height: calc(100dvh - 105px); overflow-y: auto; }
  .hero-grid, .newsletter, .gesah-grid, .footer-grid,
  .cards5, .deals-grid, .search-grid, .contacts-grid,
  .gallery-grid, .news-grid, .testi-grid, .feature-row,
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .hero-copy { padding: 30px 22px 26px; }
  .hero-copy h2 { font-size: clamp(29px,8vw,43px); line-height: 1.08; }
  .hero-copy p { font-size: 15px; line-height: 1.65; }
  .hero-visual { min-height: 270px; }
  .hero-offer { max-width: calc(100% - 24px); }
  .search-panel { width: calc(100% - 24px); max-width: calc(100% - 24px); padding: 13px; }
  .section { padding-block: 32px; }
  .section-head { flex-wrap: wrap; }
  .section-head h3 { font-size: clamp(25px,7vw,32px); }
  .span-2 { grid-column: auto; }
  .contact-card { grid-template-columns: 86px minmax(0,1fr) !important; }
  .contact-photo { width:86px; height:92px; }
  .newsletter-copy { min-width: 0; padding: 22px 17px; }
  .newsletter-copy h4 { font-size: clamp(24px,6vw,35px); overflow-wrap: anywhere; }
  .newsletter-visual { width:100%; min-width:0; min-height:200px; }
  .footer-grid { gap: 14px; }
  .modal { padding: 16px; }
}

/* HP sempit: menu tidak memaksa halaman bergeser. */
@media (max-width: 380px) {
  .container { width: calc(100% - 20px); max-width: calc(100% - 20px); }
  .nav { flex-wrap: wrap; }
  .brand { flex: 1 1 100%; }
  .nav-actions { width: 100%; justify-content: flex-end; }
  .nav-actions .btn { font-size: 11px; padding: 8px 10px; }
  .contact-card { grid-template-columns: 74px minmax(0,1fr) !important; gap: 10px; }
  .contact-photo { width: 74px !important; height: 82px !important; }
  .contact-actions .btn { font-size: 11px; padding: 8px 9px; }
  .hero-copy { padding: 24px 15px; }
  .hero-offer { width: 145px; right: 10px; top: 10px; }
  .search-panel { width: calc(100% - 16px); max-width: calc(100% - 16px); }
  .newsletter-copy { padding: 18px 14px; }
}