/* =========================================================
   MOBILE OPTIMIZE — YCHI
   File tambahan (tidak mengubah file CSS lain).
   Hanya berlaku di layar mobile (<= 768px), tampilan desktop
   tidak terpengaruh sama sekali.
   ========================================================= */

@media (max-width: 768px) {

  /* ---------- 1. KECEPATAN ---------- */
  * {
    animation-duration: 0.4s !important;
    transition-duration: 0.25s !important;
  }
  img:not([height]):not([width]), video, iframe {
    max-width: 100%;
    height: auto;
  }
  .img-fluid, .owl-carousel img {
    max-width: 100%;
    height: auto;
  }

  /* ---------- 2. FONT & TULISAN RAPI ---------- */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    font-size: 15px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }
  h1 { font-size: 1.7rem !important; line-height: 1.3 !important; }
  h2 { font-size: 1.45rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.2rem !important; line-height: 1.35 !important; }
  h4 { font-size: 1.05rem !important; line-height: 1.35 !important; }
  h5, h6 { font-size: 1rem !important; line-height: 1.4 !important; }
  p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .btn, button, a.btn {
    font-size: 0.9rem;
    white-space: normal;
  }

  /* ---------- 3. COMPACTNESS (padat & rapi) ---------- */
  section:not(#topbar) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* Jangan sentuh topbar di dalam header — biarkan tinggi aslinya
     supaya navbar (logo, hamburger, tombol) tidak numpuk/overlap
     dengan konten di bawahnya (mis. hero gallery.php) */
  #topbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .container, .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .row {
    margin-left: -7px !important;
    margin-right: -7px !important;
  }
  .row > * {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  .card, .card-body {
    padding: 12px !important;
  }
  hr, .divider {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Perkecil jarak antar elemen umum tanpa mengubah struktur */
  .mb-5, .my-5 { margin-bottom: 1.5rem !important; }
  .mt-5, .my-5 { margin-top: 1.5rem !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .p-5 { padding: 1.5rem !important; }

  /* ---------- Fix: jarak kosong di atas banner slider ----------
     (dihapus — aturan height:auto/min-height:0 di sini ternyata
     merusak perhitungan tinggi Owl Carousel di section lain,
     termasuk carousel foto "Tentang" di index.php) */

  /* ---------- Fix: bubble WhatsApp jangan menutupi konten ---------- */
  div[style*="background-color:#128C7E"] {
    bottom: 12px !important;
    right: 12px !important;
    max-width: 56px !important;
    padding: 12px !important;
    border-radius: 50% !important;
    overflow: hidden;
  }
  div[style*="background-color:#128C7E"] p,
  div[style*="background-color:#128C7E"] h6 {
    font-size: 0 !important;
  }
  div[style*="background-color:#128C7E"] .bi-whatsapp {
    font-size: 26px !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  body { font-size: 14px; }
}

/* =========================================================
   TAMBAHAN — Optimasi komponen spesifik YCHI (index.php & gallery.php)
   Tetap hanya berlaku di mobile, tidak mengubah tampilan desktop.
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- Gallery Hero ---------- */
  .ychig-hero { padding: 22px 0 18px !important; }
  .ychig-hero .ychig-container { padding: 0 16px !important; }
  .ychig-hero h1 { font-size: 1.1rem !important; line-height: 1.25 !important; padding: 0 !important; margin-bottom: 6px !important; }
  .ychig-hero p { font-size: 0.78rem !important; line-height: 1.4 !important; padding: 0 !important; }
  .ychig-puzzle-strip { margin-top: 10px !important; }
  .ychig-puzzle-strip span { width: 7px !important; height: 7px !important; }
  .ychig-badges { gap: 5px !important; margin-top: 10px !important; }
  .ychig-badge { font-size: 0.68rem !important; padding: 4px 10px !important; }

  /* ---------- Kotak info CSR (di bawah hero gallery) ---------- */
  /* Dibuat 2 baris rapi di mobile: baris 1 judul, baris 2 paragraf (justify) */
  #ychigCsrIntro .ychig-container { padding-top: 12px !important; padding-bottom: 12px !important; }
  #ychigCsrIntro > .ychig-container > div {
    display: block !important;
    padding: 14px 16px !important;
    gap: 0 !important;
  }
  #ychigCsrIntro h2 {
    white-space: normal !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }
  #ychigCsrIntro p {
    min-width: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    text-align: justify !important;
  }
  #ychigCsrIntro p a { white-space: normal !important; }

  /* ---------- Filter bar & back bar (gallery.php) ---------- */
  .ychig-filter-btn { font-size: 0.78rem !important; padding: 7px 14px !important; }
  .ychig-back-btn { font-size: 0.82rem !important; padding: 7px 14px !important; }
  .ychig-back-title { font-size: 0.9rem !important; }

  /* ---------- Grid cover album & grid foto (gallery.php) ---------- */
  .ychig-cover-grid, .ychig-photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ychig-cover-title { font-size: 0.85rem !important; }
  .ychig-cover-meta { font-size: 0.72rem !important; }

  /* ---------- Section CSR di index.php ---------- */
  .csr-box { padding: 20px 16px !important; }
  .csr-box h2 { font-size: 1.15rem !important; }
  .csr-box ul li { font-size: 0.88rem !important; }
  .csr-badge { font-size: 0.78rem !important; padding: 5px 12px !important; }
  .csr-mini-grid, .csr-carousel { margin-top: 16px !important; }
  .csr-carousel .item img { aspect-ratio: 16/9 !important; }
  .csr-carousel-label { font-size: 0.78rem !important; padding: 8px 12px 6px !important; }

  /* Tombol CSR: susun rapi ke bawah, tidak berdempetan */
  .csr-box .mt-3 { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .csr-box .mt-3 a { margin: 0 !important; width: 100% !important; text-align: center !important; }

  /* ---------- Statistik & Join-us banner (index.php) ---------- */
  .ychi-stats-wrap { padding: 20px 16px !important; }
  .ychi-stat-card h5 { font-size: 1.1rem !important; }
  .ychi-stat-card p { font-size: 0.78rem !important; }
  .join-us { flex-direction: column !important; align-items: flex-start !important; padding: 16px 18px !important; }
  .join-us a { width: 100% !important; text-align: center !important; }

  /* ---------- Kartu webinar (index.php) ---------- */
  .card-title { font-size: 0.92rem !important; }
  .card-pemateri { font-size: 0.8rem !important; }

  /* ---------- Client/partner slider ---------- */
  .clients-slider .swiper-slide img { max-width: 90px !important; }

  /* ---------- Testimoni ---------- */
  .testimonial-item { padding: 16px !important; }
  .testimonial-item h3 { font-size: 1rem !important; }
  .testimonial-item h4 { font-size: 0.82rem !important; }
  .testimonial-item p { font-size: 0.85rem !important; }
}

@media (max-width: 420px) {
  .ychig-cover-grid, .ychig-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ychig-hero h1 { font-size: 1rem !important; }
  .ychig-hero p { font-size: 0.72rem !important; }
  .ychig-badge { font-size: 0.62rem !important; padding: 3px 8px !important; }
  .csr-box h2 { font-size: 1.02rem !important; }
}

/* =========================================================
   FIX: Navbar/header numpuk (overlap) dengan konten di bawahnya
   di beberapa halaman (mis. gallery.php).
   Header dipaksa jadi bagian alur normal halaman (bukan fixed)
   di layar mobile, supaya tidak bergantung pada spacer 105px
   yang ternyata tidak konsisten di semua halaman.
   ========================================================= */
@media (max-width: 768px) {
  #header {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
  }
  div[style*="margin-bottom:105px"] {
    margin-bottom: 12px !important;
  }

  /* Baris "Instagram / WhatsApp / Rekening Donasi" hanya untuk desktop —
     paksa tetap tersembunyi di mobile supaya tidak numpuk dengan baris
     "Layanan / info@..." di atasnya */
  #topbar .social-links {
    display: none !important;
  }
  #topbar .container {
    flex-wrap: wrap !important;
  }
  #topbar .contact-info {
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }

  /* Logo YCHI di sebelah hamburger menu — pastikan selalu tampil di mobile */
  .header-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .header-2 > a.d-md-none {
    display: block !important;
  }
  .header-2 > a.d-md-none img {
    display: block !important;
    height: 40px !important;
    width: auto !important;
  }
}