/* =========================================================
   VERSI 39 - RESPONSIVE TABLET FRIENDLY
   Tujuan: tampilan tablet mengikuti pola HP agar tidak tabrakan.
   Aktif untuk tablet biasa, iPad portrait/landscape, dan layar <=1180px.
   ========================================================= */

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box !important;
  }

  img,
  video,
  iframe{
    max-width:100% !important;
  }

  /* ---------- HEADER / KOP ---------- */
  .site-header{
    width:100% !important;
    min-height:82px !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
  }

  .site-header .container,
  .site-header .container.site-header-inner,
  .site-header-inner,
  header.site-header > .container{
    width:100% !important;
    max-width:100% !important;
    min-height:82px !important;
    margin:0 !important;
    padding-left:22px !important;
    padding-right:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .brand{
    min-width:0 !important;
    max-width:calc(100% - 84px) !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
  }

  .brand-logo{
    width:56px !important;
    height:56px !important;
    flex:0 0 56px !important;
  }

  .brand-title{
    font-size:clamp(16px, 2.3vw, 22px) !important;
    line-height:1.08 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  .brand-sub{
    font-size:clamp(13px, 1.8vw, 17px) !important;
    line-height:1.18 !important;
  }

  .public-nav,
  .desktop-only,
  .user-chip.desktop-only{
    display:none !important;
  }

  .mobile-menu-btn{
    display:flex !important;
    width:58px !important;
    height:58px !important;
    flex:0 0 58px !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    margin-left:14px !important;
  }

  .mobile-menu-btn .hamb,
  .mobile-menu-btn .hamb span{
    display:block !important;
  }

  /* Drawer menu publik dan role */
  .mobile-drawer{
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    display:none !important;
    background:rgba(3,14,35,.48) !important;
    backdrop-filter:blur(8px) !important;
  }

  .mobile-drawer.open{
    display:block !important;
  }

  .mobile-panel{
    width:min(390px, 86vw) !important;
    height:100dvh !important;
    margin-left:auto !important;
    background:#ffffff !important;
    padding:24px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    box-shadow:-20px 0 50px rgba(2,18,46,.22) !important;
    overflow-y:auto !important;
  }

  .mobile-panel a{
    display:flex !important;
    min-height:50px !important;
    align-items:center !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    color:#0b2f6f !important;
    font-weight:900 !important;
    text-decoration:none !important;
    background:#f8fbff !important;
  }

  .mobile-panel .close{
    align-self:flex-end !important;
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  /* ---------- CONTAINER UMUM ---------- */
  .container,
  .page-hero .container,
  .public-form-grid,
  .success-card,
  .catalog-layout,
  .catalog-layout-v21,
  .gallery-layout,
  .about-ekskul-section,
  .value-strip,
  .footer .container,
  .copyright{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .page-hero{
    padding:38px 0 30px !important;
  }

  .page-hero h1{
    font-size:clamp(34px, 6vw, 54px) !important;
    line-height:1.05 !important;
    max-width:100% !important;
  }

  .page-hero p{
    max-width:100% !important;
    font-size:clamp(15px, 2.2vw, 18px) !important;
    line-height:1.7 !important;
  }

  .tag{
    max-width:100% !important;
    white-space:normal !important;
  }

  /* ---------- HOME ---------- */
  .hero-home-slider-v2,
  .hero{
    min-height:auto !important;
    width:100% !important;
  }

  .hero-home-slider-v2 .hero-inner-slider-v2,
  .hero-home-slider-v2 .hero-inner,
  .hero-inner{
    width:100% !important;
    max-width:100% !important;
    min-height:clamp(520px, 70vh, 760px) !important;
    padding:70px 24px 56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-copy h1,
  .hero h1{
    font-size:clamp(42px, 7.5vw, 72px) !important;
    line-height:1.02 !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-copy p,
  .hero p{
    font-size:clamp(15px, 2.2vw, 19px) !important;
    line-height:1.75 !important;
    max-width:700px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-actions{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
  }

  .hero-actions .btn{
    min-width:220px !important;
    justify-content:center !important;
  }

  .home-slider-v2-dots{
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  .value-strip{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:0 !important;
    transform:none !important;
    margin-top:0 !important;
  }

  .value-item{
    min-width:0 !important;
    padding:22px !important;
  }

  .about-ekskul-card,
  .about-ekskul-content{
    width:100% !important;
    max-width:100% !important;
  }

  .about-ekskul-card::before,
  .about-ekskul-card::after,
  .about-ekskul-content::before,
  .about-ekskul-content::after{
    display:none !important;
  }

  .activity-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px !important;
  }

  .activity-card{
    width:100% !important;
    min-width:0 !important;
  }

  /* ---------- FORM / GRID ---------- */
  .grid-2,
  .grid-3,
  .public-form-grid,
  .pendaftaran-form-wide-v18,
  .access-grid,
  .access-grid-v20{
    grid-template-columns:1fr !important;
  }

  .panel,
  .form-card,
  .pendaftaran-panel-v18,
  .success-card-v20{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .choice-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .selected-actions-v20,
  .download-row-v20,
  .submit-row-v18{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }

  .selected-actions-v20 .btn,
  .download-row-v20 .btn,
  .submit-row-v18 .btn{
    min-width:220px !important;
  }

  /* ---------- KATALOG ---------- */
  .catalog-layout,
  .catalog-layout-v21{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .catalog-sidebar,
  .catalog-sidebar-v21{
    width:100% !important;
    max-width:100% !important;
    position:relative !important;
    top:auto !important;
  }

  .catalog-mobile-picker-v21{
    display:block !important;
  }

  .catalog-sidebar-v21 .catalog-list,
  .catalog-sidebar .catalog-list{
    display:none !important;
  }

  .mobile-search-results-v23.is-open{
    display:grid !important;
  }

  .catalog-detail,
  .catalog-detail-v21{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .detail-top-v21{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "foto"
      "info"
      "harga"
      "manfaat" !important;
    gap:18px !important;
  }

  .detail-img-v21{
    width:100% !important;
    min-height:260px !important;
    height:260px !important;
  }

  .detail-main-v21 h1{
    font-size:clamp(32px, 6vw, 46px) !important;
  }

  .price-card-v21{
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
  }

  .benefit-grid-v21,
  .schedule-grid-v21,
  .trainer-grid-v21,
  .schedule-grid,
  .trainer-grid{
    grid-template-columns:1fr !important;
  }

  .trainer-card-v21,
  .trainer-card{
    grid-template-columns:78px minmax(0, 1fr) !important;
    align-items:start !important;
  }

  .trainer-card-v21 .trainer-photo,
  .trainer-photo{
    width:78px !important;
    height:78px !important;
  }

  .trainer-cv-v21{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
  }

  /* ---------- GALERI ---------- */
  .gallery-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .gallery-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px !important;
  }

  .gallery-preview{
    display:none !important;
  }

  /* ---------- ROLE ADMIN/PIC/SISWA ---------- */
  .app-body .site-header{
    min-height:82px !important;
  }

  .app-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }

  .app-sidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:min(380px, 86vw) !important;
    height:100dvh !important;
    z-index:9999 !important;
    transform:translateX(-105%) !important;
    transition:transform .25s ease !important;
    overflow-y:auto !important;
    box-shadow:22px 0 50px rgba(2,18,46,.22) !important;
  }

  .app-sidebar.open{
    transform:translateX(0) !important;
  }

  .sidebar-overlay{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    z-index:9998 !important;
    background:rgba(3,14,35,.48) !important;
    backdrop-filter:blur(8px) !important;
  }

  .sidebar-overlay.open{
    display:block !important;
  }

  .app-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:28px 24px 90px !important;
    overflow-x:hidden !important;
  }

  .app-title{
    width:100% !important;
    max-width:100% !important;
  }

  .app-title h1{
    font-size:clamp(34px, 6vw, 52px) !important;
    line-height:1.05 !important;
  }

  .stat-grid,
  .dash-grid,
  .quick-grid,
  .katalog-admin-layout-v36,
  .toolbar-actions-v36,
  .jadwal-guide-v37,
  .image-manager-v37{
    grid-template-columns:1fr !important;
  }

  .stat-card,
  .quick-card,
  .joined-item-v34,
  .account-card-v35,
  .profile-card,
  .payment-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .table-wrap,
  .data-table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  table{
    max-width:100% !important;
  }

  .toolbar-actions-v36 .btn,
  .hapus-ekskul-form-v36 .btn,
  .btn-save-katalog-v36{
    width:100% !important;
  }

  /* ---------- FOOTER + FLOATING WA ---------- */
  .footer-clean-grid-v10,
  .footer .container{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:26px !important;
  }

  .floating-wa-help{
    right:22px !important;
    bottom:22px !important;
    transform:scale(.92) !important;
    transform-origin:right bottom !important;
    z-index:9997 !important;
  }

  .toast{
    max-width:calc(100% - 32px) !important;
    right:16px !important;
    left:16px !important;
  }
}

/* HP kecil tetap lebih rapat */
@media (max-width:640px){
  .site-header .container,
  .site-header .container.site-header-inner,
  .site-header-inner,
  header.site-header > .container,
  .container,
  .page-hero .container,
  .public-form-grid,
  .success-card,
  .catalog-layout,
  .catalog-layout-v21,
  .gallery-layout,
  .about-ekskul-section,
  .value-strip,
  .footer .container,
  .copyright{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .brand-logo{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }

  .brand-title{
    font-size:18px !important;
  }

  .brand-sub{
    font-size:15px !important;
  }

  .mobile-menu-btn{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }

  .hero-home-slider-v2 .hero-inner-slider-v2,
  .hero-home-slider-v2 .hero-inner,
  .hero-inner{
    min-height:calc(100svh - 82px) !important;
    padding:58px 18px 48px !important;
  }

  .hero-copy h1,
  .hero h1{
    font-size:clamp(42px, 11vw, 58px) !important;
  }

  .hero-actions{
    flex-direction:column !important;
  }

  .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }

  .value-strip,
  .activity-grid,
  .choice-grid,
  .gallery-grid,
  .footer-clean-grid-v10,
  .footer .container{
    grid-template-columns:1fr !important;
  }

  .app-content{
    padding:24px 18px 92px !important;
  }

  .selected-actions-v20 .btn,
  .download-row-v20 .btn,
  .submit-row-v18 .btn{
    width:100% !important;
    min-width:0 !important;
  }

  .floating-wa-help{
    right:16px !important;
    bottom:18px !important;
    transform:scale(.86) !important;
  }
}