/* ================================================
   css/mobile.css — Mobile Responsive
   Tambahkan di index.html setelah semua CSS lain
   ================================================ */

@media (max-width: 768px) {

  /* === SECTION PADDING === */
  .section { padding: 48px 16px; }

  /* === HERO === */
  .slide-content h1 { font-size: 2rem; }
  .slide-content p  { font-size: 0.9rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline { width: 100%; max-width: 280px; text-align: center; }

  /* === STATS === */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px 12px; }
  .stat-num  { font-size: 1.5rem; }

  /* === PROFIL HOME === */
  .profil-grid { grid-template-columns: 1fr; gap: 32px; }
  .profil-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .profil-card  { padding: 16px; }

  /* === PROGRAM === */
  .program-section { padding: 48px 0; }
  .program-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
  .program-card { padding: 16px; }

  /* === ARTIKEL === */
  .artikel-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .artikel-grid   { grid-template-columns: 1fr; }

  /* === ADMIN BAR ARTIKEL === */
  .admin-artikel-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .admin-artikel-bar input,
  .admin-artikel-bar select,
  .admin-artikel-bar textarea,
  #quill-editor { width: 100% !important; min-width: unset !important; }

  /* === PRESTASI === */
  .admin-prestasi-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .admin-prestasi-bar input,
  .admin-prestasi-bar select { width: 100% !important; }
  .prestasi-podium  { flex-direction: column; align-items: center; gap: 16px; }
  .podium-card      { width: 100% !important; max-width: 320px; order: unset !important; }
  .prestasi-grid    { grid-template-columns: 1fr; }
  .filter-bar       { gap: 8px; }
  .filter-btn       { font-size: 0.78rem; padding: 6px 12px; }

  /* === GALERI === */
  #galeri-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #adminGaleriBar { flex-direction: column !important; }
  #adminGaleriBar select,
  #adminGaleriBar button { width: 100% !important; }

  /* === PSB === */
  .psb-grid { grid-template-columns: 1fr; gap: 24px; }
  .psb-form-wrap { padding: 20px 16px; }

  /* === TENTANG === */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-visual { aspect-ratio: 16/9; }
  .pendiri-card { flex-direction: row; }

  /* === KONTAK === */
  .kontak-grid { grid-template-columns: 1fr; gap: 24px; }
  .map-placeholder { height: 250px; }
  .embed-grid { grid-template-columns: 1fr; }

  /* === FOOTER === */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }

  /* === ADMIN BADGE === */
  .admin-badge {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
  }
  .admin-badge button { font-size: 0.75rem !important; padding: 4px 8px !important; }
}

@media (max-width: 480px) {

  /* === HERO === */
  .slide-content h1 { font-size: 1.7rem; }
  .section-title    { font-size: 1.6rem; }

  /* === STATS === */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  /* === PROGRAM === */
  .program-grid { grid-template-columns: repeat(2, 1fr); }

  /* === PROFIL CARDS === */
  .profil-cards { grid-template-columns: 1fr; }

  /* === GALERI === */
  #galeri-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* === PSB FORM === */
  .psb-grid > div:first-child > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* === LIGHTBOX === */
  #lightbox button[onclick="prevPhoto(event)"] { left: 8px !important; font-size: 1.8rem !important; }
  #lightbox button[onclick="nextPhoto(event)"] { right: 8px !important; font-size: 1.8rem !important; }
}