/* ==========================================================================
   ios.css — lapisan tampilan ala iOS / macOS
   --------------------------------------------------------------------------
   Hanya MENGUBAH TAMPILAN. Tidak ada markup, widget, atau fungsi yang dihapus.
   Semua aturan dibatasi pada body.ios supaya halaman lain tidak
   terpengaruh selama proses migrasi bertahap.

   Prinsip yang dipakai:
   - Tipografi sistem (SF Pro di Apple, Segoe UI Variable di Windows),
     bukan webfont — supaya terasa native dan tidak menambah beban unduh.
   - Permukaan bersih: kartu putih di atas latar abu-abu terang (mode terang)
     atau kartu #1c1c1e di atas hitam (mode gelap), seperti grup di Pengaturan.
   - Sudut membulat besar, bayangan sangat tipis, garis pemisah rambut.
   - Satu warna aksen saja (biru sistem), tanpa gradien dekoratif.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token warna & dasar
   -------------------------------------------------------------------------- */
body.ios {
  /* mode terang — default iOS */
  --ios-bg: #f2f2f7;
  --ios-card: #ffffff;
  --ios-card-sunken: #f2f2f7;
  --ios-label: #1c1c1e;
  --ios-label-2: #5f5f66;
  --ios-label-3: #6e6e73;
  --ios-sep: rgba(60, 60, 67, .12);
  --ios-fill: rgba(120, 120, 128, .10);
  --ios-fill-2: rgba(120, 120, 128, .16);
  /* Dua nada biru: --ios-blue untuk teks/ikon, --ios-blue-fill untuk latar
     tombol. #007AFF asli gagal ambang kontras WCAG (3,5:1) untuk teks kecil,
     jadi teks memakai #0068D6 (4,9:1 di atas #F2F2F7) dan latar tombol
     memakai #0071E3 (4,7:1 terhadap teks putih). */
  --ios-blue: #0068d6;
  --ios-blue-fill: #0071e3;
  --ios-blue-soft: rgba(0, 113, 227, .10);
  --ios-nav: rgba(242, 242, 247, .78);
  --ios-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .05);
  --ios-radius: 20px;

  margin: 0 !important;
  padding: 0 !important;
  background: var(--ios-bg) !important;
  background-image: none !important;
  color: var(--ios-label) !important;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"] body.ios {
  --ios-bg: #000000;
  --ios-card: #1c1c1e;
  --ios-card-sunken: #2c2c2e;
  --ios-label: #ffffff;
  --ios-label-2: #a1a1a6;
  --ios-label-3: #8e8e93;
  --ios-sep: rgba(84, 84, 88, .38);
  --ios-fill: rgba(120, 120, 128, .20);
  --ios-fill-2: rgba(120, 120, 128, .30);
  --ios-blue: #0a84ff;
  --ios-blue-fill: #0a6ee0;
  --ios-blue-soft: rgba(10, 132, 255, .16);
  --ios-nav: rgba(10, 10, 12, .72);
  --ios-shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .34);
}

/* Satu keluarga huruf untuk seluruh halaman, mengalahkan Lexend. */
body.ios,
body.ios * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body.ios h1,
body.ios h2,
body.ios h3 {
  letter-spacing: -.028em;
  text-wrap: balance;
}

/* Dekorasi lama: cahaya radial, garis pemisah, bulatan blur. Dibuat rata. */
body.ios .av-section:before,
body.ios .av-hero-area:before,
body.ios .av-process-card:after,
body.ios .section-title:before,
body.ios .section-title:after,
body.ios .divider {
  display: none !important;
}

body.ios .bg-premium-section,
body.ios .av-hero-area {
  background: transparent !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   2. Bilah navigasi — meniru toolbar macOS / iOS dengan blur
   -------------------------------------------------------------------------- */
body.ios nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 52px !important;
  padding: 0 !important;
  background: var(--ios-nav) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ios-sep) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

body.ios nav > div {
  height: 52px !important;
  max-width: 1080px !important;
  padding: 0 24px !important;
  background: transparent !important;
}

body.ios .nav-logo-img {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 7px;
}

body.ios .brand-name {
  color: var(--ios-label) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

body.ios .brand-subtitle {
  margin-top: 3px !important;
  color: var(--ios-label-3) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .10em !important;
}

body.ios .nav-link {
  color: var(--ios-label-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  transition: color .18s ease;
}

body.ios .nav-link:hover,
body.ios .nav-link:focus-visible {
  color: var(--ios-label) !important;
}

body.ios .btn-login {
  padding: 7px 15px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ios-blue-fill) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: filter .18s ease;
}

body.ios .btn-login:hover {
  background: var(--ios-blue-fill) !important;
  filter: brightness(.93);
}

body.ios #burgerBtn {
  color: var(--ios-label) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px;
}

body.ios .mobile-menu {
  background: var(--ios-nav) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
}

body.ios .mobile-menu .nav-link {
  color: var(--ios-label) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
}

body.ios .menu-close svg {
  color: var(--ios-label) !important;
  stroke: currentColor !important;
}

body.ios .theme-toggle {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
  box-shadow: none !important;
}

body.ios .theme-toggle:hover {
  background: var(--ios-fill-2) !important;
  transform: none !important;
}

body.ios .theme-toggle svg {
  width: 17px !important;
  height: 17px !important;
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
body.ios .av-hero-area > div:first-child {
  padding-top: 84px !important;
  padding-bottom: 56px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.ios .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ios-fill) !important;
  box-shadow: none !important;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.ios .hero-badge svg {
  color: var(--ios-blue) !important;
}

body.ios .hero-title {
  max-width: 960px;
  margin: 0 auto 22px !important;
  color: var(--ios-label) !important;
  font-size: clamp(38px, 5.6vw, 58px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -.038em !important;
  text-shadow: none !important;
}

body.ios .av-hero-area > div:first-child p {
  max-width: 34rem;
  margin-bottom: 34px !important;
  color: var(--ios-label-2) !important;
  font-size: clamp(16px, 1.9vw, 18px) !important;
  line-height: 1.55 !important;
  letter-spacing: -.012em;
}

/* --------------------------------------------------------------------------
   4. Tombol — satu bahasa: pil biru, pil abu, tautan biru
   -------------------------------------------------------------------------- */
body.ios .btn-primary,
body.ios .btn-outline,
body.ios .btn-detail,
body.ios .modal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  box-shadow: none !important;
  transition: filter .18s ease, background-color .18s ease;
}

body.ios .btn-primary,
body.ios .modal-link {
  background: var(--ios-blue-fill) !important;
  color: #fff !important;
}

body.ios .btn-primary:hover,
body.ios .modal-link:hover {
  background: var(--ios-blue-fill) !important;
  filter: brightness(.93);
  transform: none !important;
  box-shadow: none !important;
}

body.ios .btn-outline,
body.ios .btn-detail {
  background: var(--ios-fill) !important;
  color: var(--ios-blue) !important;
  border: 0 !important;
}

body.ios .btn-outline:hover,
body.ios .btn-detail:hover {
  background: var(--ios-fill-2) !important;
  border: 0 !important;
  transform: none !important;
}

body.ios .btn-detail {
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   5. Ritme bagian & judul
   -------------------------------------------------------------------------- */
body.ios section.av-section,
body.ios .av-hero-area ~ section {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 84px 24px !important;
}

body.ios .section-label {
  margin-bottom: 8px;
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
}

body.ios .section-title {
  color: var(--ios-label) !important;
  font-size: clamp(27px, 3.4vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -.028em !important;
}

body.ios .av-partner-title:after {
  display: none !important;
}

/* Semua teks abu-abu bawaan Tailwind diselaraskan ke label sekunder iOS. */
body.ios .text-slate-300,
body.ios .text-slate-400,
body.ios .text-slate-500,
body.ios .text-slate-600 {
  color: var(--ios-label-2) !important;
}

body.ios .text-white,
body.ios .font-semibold.text-white,
body.ios .feature-item .text-white {
  color: var(--ios-label) !important;
}

body.ios .text-accent {
  color: var(--ios-blue) !important;
}

/* --------------------------------------------------------------------------
   6. Kartu dasar (dipakai statistik, kelas, testimoni, mentor, alur)
   -------------------------------------------------------------------------- */
body.ios .av-glass-card,
body.ios .stat-card,
body.ios .course-card,
body.ios .testi-card,
body.ios .mentor-card,
body.ios .faq-item,
body.ios .cta-section,
body.ios .bg-surface {
  background: var(--ios-card) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: var(--ios-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   7. Statistik
   -------------------------------------------------------------------------- */
body.ios .av-hero-area .grid {
  gap: 12px !important;
}

body.ios .stat-card {
  padding: 22px 16px !important;
  border-radius: 18px !important;
  text-align: center;
}

body.ios .stat-num {
  color: var(--ios-label) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

body.ios .stat-card .text-sm {
  margin-top: 4px;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   8. Logo mitra (marquee tetap berjalan seperti semula)
   -------------------------------------------------------------------------- */
body.ios .partner-logo-clickable {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--ios-card) !important;
  box-shadow: var(--ios-shadow) !important;
}

body.ios .partner-logo-clickable[data-bg-color] {
  background: var(--ios-card) !important;
}

body.ios .partner-logo-clickable img {
  filter: none !important;
  opacity: 1 !important;
}

body.ios .av-partner-title {
  font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

/* --------------------------------------------------------------------------
   9. Kartu kelas
   -------------------------------------------------------------------------- */
body.ios .course-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

body.ios .course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .10) !important;
  border: 0 !important;
}

body.ios .card-thumb {
  background: var(--ios-card-sunken) !important;
}

body.ios .card-thumb:after {
  display: none !important;
}

body.ios .card-thumb img {
  width: 100%;
  display: block;
}

body.ios .card-body {
  padding: 18px 20px 20px !important;
}

body.ios .card-instructor {
  color: var(--ios-label-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.ios .card-title {
  margin: 6px 0 10px;
  color: var(--ios-label) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -.02em !important;
}

body.ios .schedule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
}

body.ios .schedule svg {
  flex: 0 0 auto;
  opacity: .75;
}

body.ios .card-body p.text-xs {
  margin-bottom: 16px !important;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.ios .price {
  color: var(--ios-label) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}

body.ios .price-original {
  margin-left: 6px;
  color: var(--ios-label-3) !important;
  font-size: 13px !important;
}

/* Lencana di atas poster: dibuat seperti label sistem, bukan pil neon. */
body.ios .course-badge {
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.ios .badge-primary,
body.ios .badge-meta,
body.ios .badge-hybrid,
body.ios .badge-online,
body.ios .badge-offline,
body.ios .badge-secondary {
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
}

body.ios .poster-view-btn {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .55) !important;
  padding: 6px 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.ios .poster-view-btn:hover {
  background: rgba(0, 0, 0, .72) !important;
}

/* --------------------------------------------------------------------------
   10. Bagian fitur & alur
   -------------------------------------------------------------------------- */
body.ios .feature-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--ios-blue-soft) !important;
  color: var(--ios-blue) !important;
  box-shadow: none !important;
}

body.ios .feature-item > div > div:first-child {
  color: var(--ios-label) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

body.ios .feature-item .text-slate-500 {
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.ios .bg-surface {
  border-radius: 22px !important;
  padding: 26px !important;
}

body.ios .bg-white\/10 {
  width: 26px !important;
  height: 26px !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label) !important;
  font-weight: 600 !important;
}

body.ios .av-process-card .font-medium {
  color: var(--ios-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.ios .av-process-card .text-xs {
  color: var(--ios-label-2) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   11. Testimoni
   -------------------------------------------------------------------------- */
body.ios .testi-card {
  display: flex;
  flex-direction: column;
  padding: 22px !important;
  border-radius: 20px !important;
}

/* Nama pemberi testimoni selalu menempel di bawah, walau panjang kutipan
   berbeda-beda — supaya ketiga kartu tidak terlihat menggantung. */
body.ios .testi-card > div:last-child {
  margin-top: auto;
  padding-top: 16px;
}

body.ios .stars {
  margin-bottom: 12px;
  color: #ff9f0a !important;
  font-size: 13px;
  letter-spacing: 2px;
}

body.ios .testi-card p {
  color: var(--ios-label-2) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

body.ios .testi-card .font-semibold {
  color: var(--ios-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.ios .testi-card .text-xs {
  color: var(--ios-label-3) !important;
  font-size: 12px !important;
}

body.ios .testi-card > div > div[style*="border-radius:50%"] {
  width: 32px !important;
  height: 32px !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   12. Mentor
   -------------------------------------------------------------------------- */
body.ios .mentor-card {
  padding: 26px 22px !important;
  border-radius: 20px !important;
  text-align: center;
}

body.ios .mentor-avatar {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10) !important;
}

body.ios .mentor-name {
  color: var(--ios-label) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}

body.ios .mentor-title {
  margin-top: 3px;
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.ios .mentor-desc {
  margin-top: 8px;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   13. FAQ — daftar bergrup seperti layar Pengaturan iOS
   -------------------------------------------------------------------------- */
body.ios .av-faq > .space-y-3 {
  background: var(--ios-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ios-shadow);
}

body.ios .av-faq .space-y-3 > * + * {
  margin-top: 0 !important;
}

body.ios .faq-item {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ios-sep) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ios-card) !important;
}

body.ios .faq-item:last-child {
  border-bottom: 0 !important;
}

body.ios .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px !important;
  color: var(--ios-label) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  background: transparent !important;
}

body.ios .faq-question:hover {
  background: var(--ios-fill) !important;
}

body.ios .faq-question svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ios-label-3) !important;
  transition: transform .22s ease;
}

body.ios .faq-answer {
  padding: 0 20px !important;
  color: var(--ios-label-2) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  border-top: 0 !important;
}

body.ios .faq-item.active .faq-answer,
body.ios .faq-item.open .faq-answer,
body.ios .faq-item.is-open .faq-answer {
  padding: 0 20px 18px !important;
  border-top: 0 !important;
}

/* --------------------------------------------------------------------------
   14. Ajakan daftar
   -------------------------------------------------------------------------- */
body.ios .cta-section {
  padding: 56px 28px !important;
  border-radius: 26px !important;
  text-align: center;
}

body.ios .cta-section:before {
  display: none !important;
}

body.ios .cta-section .section-title {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

body.ios .cta-section p.text-slate-400 {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--ios-label-2) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.ios .cta-section p.text-xs {
  color: var(--ios-label-3) !important;
  font-size: 12.5px !important;
}

body.ios .cta-section p.text-xs a {
  color: var(--ios-blue) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
body.ios footer {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.ios footer > div {
  max-width: 1080px !important;
  padding: 26px 24px 34px !important;
  border: 0 !important;
  border-top: 1px solid var(--ios-sep) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.ios footer .text-xs {
  color: var(--ios-label-3) !important;
  font-size: 12.5px !important;
}

body.ios footer a {
  color: var(--ios-label-2) !important;
}

body.ios footer a:hover {
  color: var(--ios-label) !important;
}

/* --------------------------------------------------------------------------
   16. Modal poster & menu
   -------------------------------------------------------------------------- */
body.ios .home-course-poster-modal {
  background: rgba(0, 0, 0, .78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.ios .home-course-poster-modal-img {
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
}

body.ios .home-course-poster-modal-close {
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, .6) !important;
  color: #fff !important;
  font-size: 22px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.ios .modal-content,
body.ios .poster-modal-img-wrapper {
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38) !important;
}

body.ios .modal-close,
body.ios .poster-modal-close {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ios-fill-2) !important;
  color: var(--ios-label) !important;
}

/* --------------------------------------------------------------------------
   17. Layar kecil
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.ios nav,
  body.ios nav > div {
    height: 48px !important;
  }

  body.ios nav > div {
    padding: 0 16px !important;
  }

  body.ios .av-hero-area > div:first-child {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.ios .hero-title {
    font-size: clamp(32px, 10.5vw, 44px) !important;
  }

  body.ios section.av-section {
    padding: 60px 20px !important;
  }

  body.ios .stat-card {
    padding: 18px 10px !important;
    border-radius: 16px !important;
  }

  body.ios .stat-num {
    font-size: 22px !important;
  }

  body.ios .cta-section {
    padding: 40px 20px !important;
    border-radius: 22px !important;
  }

  body.ios .btn-primary,
  body.ios .btn-outline {
    width: 100%;
    padding: 14px 20px !important;
  }

  body.ios .mentor-card {
    padding: 22px 18px !important;
  }
}

/* --------------------------------------------------------------------------
   18. Hormati preferensi gerak minimal
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ios *,
  body.ios *:before,
  body.ios *:after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   HALAMAN KURSUS — daftar & detail
   Blok di bawah hanya menyentuh tampilan. Struktur, tautan, dan skrip
   (modal poster, tombol daftar) tetap seperti semula.
   Catatan: <style> milik tiap view dimuat SETELAH berkas ini, jadi selektor
   di sini sengaja dibuat lebih spesifik agar tetap menang.
   ========================================================================== */

/* --- 19. Modal poster versi halaman /course ------------------------------- */
body.ios .course-poster-modal {
  background: rgba(0, 0, 0, .78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.ios .course-poster-modal-img {
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
}

body.ios .course-poster-modal-close {
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, .6) !important;
  color: #fff !important;
  font-size: 22px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- 20. Daftar kursus ---------------------------------------------------- */
body.ios .page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  color: var(--ios-label-3) !important;
  font-size: 13px !important;
}

body.ios .page-breadcrumb a {
  color: var(--ios-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.ios .page-breadcrumb a:hover {
  text-decoration: none !important;
  opacity: .7;
}

body.ios .page-breadcrumb span {
  color: var(--ios-label-3) !important;
}

/* --- 21. Detail kursus ---------------------------------------------------- */
body.ios .course-detail-page .wrap {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 40px 24px 80px !important;
}

body.ios .course-detail-page .detail-topbar {
  margin-bottom: 28px !important;
}

body.ios .course-detail-page .breadcrumb {
  color: var(--ios-label-3) !important;
  font-size: 13px !important;
}

body.ios .course-detail-page .breadcrumb a,
body.ios .course-detail-page .all-courses-link {
  color: var(--ios-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.ios .course-detail-page .breadcrumb a:hover,
body.ios .course-detail-page .all-courses-link:hover {
  text-decoration: none !important;
  opacity: .7;
}

body.ios .course-detail-page .breadcrumb-separator {
  color: var(--ios-label-3) !important;
}

body.ios .course-detail-page .all-courses-link {
  font-size: 13px !important;
}

body.ios .course-detail-page .grid-detail {
  gap: 32px !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
}

body.ios .course-detail-page .main-title {
  margin-bottom: 24px !important;
  color: var(--ios-label) !important;
  font-size: clamp(26px, 3.6vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -.03em !important;
}

body.ios .course-detail-page .block {
  margin-bottom: 32px !important;
}

body.ios .course-detail-page .block-label {
  margin-bottom: 10px !important;
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.ios .course-detail-page .block-text {
  color: var(--ios-label-2) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

body.ios .course-detail-page .block-text strong {
  color: var(--ios-label) !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .topic-list {
  gap: 10px !important;
}

body.ios .course-detail-page .topic-list li {
  color: var(--ios-label-2) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

body.ios .course-detail-page .topic-list li:before {
  color: var(--ios-blue) !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .info-grid {
  gap: 12px !important;
  margin-bottom: 32px !important;
}

body.ios .course-detail-page .info-item {
  padding: 15px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ios .course-detail-page .info-label {
  margin-bottom: 5px !important;
  color: var(--ios-label-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}

body.ios .course-detail-page .info-value {
  color: var(--ios-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .mentor-box {
  gap: 14px !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
}

body.ios .course-detail-page .mentor-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  background: var(--ios-blue-fill) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .mentor-name {
  color: var(--ios-label) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .mentor-title {
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.ios .course-detail-page hr {
  margin: 28px 0 !important;
  border-top: 1px solid var(--ios-sep) !important;
}

/* Kartu samping: poster + harga + tombol daftar */
body.ios .course-detail-page .sidebar-detail {
  top: 72px !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ios .course-detail-page .sidebar-poster {
  border-radius: 14px !important;
}

body.ios .course-detail-page .sidebar-content {
  padding: 18px 6px 6px !important;
}

body.ios .course-detail-page .price-hero {
  color: var(--ios-label) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

body.ios .course-detail-page .price-hero s {
  margin-left: 8px !important;
  color: var(--ios-label-3) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

body.ios .course-detail-page .badge-discount {
  margin-top: 8px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ios-blue-soft) !important;
  color: var(--ios-blue) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.ios .course-detail-page .btn-reg {
  margin-top: 16px !important;
  padding: 15px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ios-blue-fill) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: filter .18s ease !important;
}

body.ios .course-detail-page .btn-reg:hover {
  background: var(--ios-blue-fill) !important;
  filter: brightness(.93);
  transform: none !important;
}

body.ios .course-detail-page .benefit-list {
  gap: 11px !important;
  margin-top: 18px !important;
}

body.ios .course-detail-page .benefit-list li {
  color: var(--ios-label-2) !important;
  font-size: 13.5px !important;
}

body.ios .course-detail-page .benefit-list li svg {
  stroke: var(--ios-blue) !important;
}

/* Lencana tipe/format/batch di halaman detail duduk di atas latar halaman,
   bukan di atas poster, jadi memakai isian abu-abu sistem. */
body.ios .course-detail-page .course-tag-row {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

body.ios .course-detail-page .badge-type {
  padding: 5px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body.ios .course-detail-page .badge-type.badge-primary {
  background: var(--ios-blue-soft) !important;
  color: var(--ios-blue) !important;
}

body.ios .course-detail-page .badge-type.badge-online,
body.ios .course-detail-page .badge-type.badge-offline,
body.ios .course-detail-page .badge-type.badge-hybrid,
body.ios .course-detail-page .badge-type.badge-batch {
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
}

/* Aturan mode terang milik view detail lebih spesifik; ini mengimbanginya. */
html[data-theme="light"] body.ios .course-detail-page .info-item,
html[data-theme="light"] body.ios .course-detail-page .mentor-box,
html[data-theme="light"] body.ios .course-detail-page .sidebar-detail {
  background: var(--ios-card) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: var(--ios-shadow) !important;
}

html[data-theme="light"] body.ios .course-detail-page .badge-discount {
  background: var(--ios-blue-soft) !important;
  color: var(--ios-blue) !important;
}

@media (max-width: 900px) {
  body.ios .course-detail-page .wrap {
    padding: 28px 20px 64px !important;
  }

  body.ios .course-detail-page .grid-detail {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 560px) {
  body.ios .course-detail-page .breadcrumb {
    padding: 9px 12px !important;
    background: var(--ios-fill) !important;
    border: 0 !important;
    border-radius: 11px !important;
  }

  body.ios .course-detail-page .all-courses-link {
    padding: 9px 12px !important;
    background: var(--ios-fill) !important;
    border: 0 !important;
    border-radius: 11px !important;
  }
}

/* ==========================================================================
   TOKO DIGITAL — daftar produk & detail produk
   Kedua view memakai partials/header.php, jadi nav/footer ikut otomatis.
   Aturan di bawah hanya menyentuh tampilan.
   ========================================================================== */

/* --- 22. Daftar produk ---------------------------------------------------- */
body.ios.page-shop .shop-wrap {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 40px 24px 80px !important;
}

body.ios.page-shop .shop-breadcrumb {
  gap: 8px !important;
  margin-bottom: 22px !important;
  color: var(--ios-label-3) !important;
  font-size: 13px !important;
}

body.ios.page-shop .shop-breadcrumb a {
  color: var(--ios-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.ios.page-shop .shop-breadcrumb svg {
  color: var(--ios-label-3) !important;
}

body.ios.page-shop .shop-header {
  max-width: 640px !important;
  margin-bottom: 32px !important;
}

body.ios.page-shop .shop-label {
  margin-bottom: 8px !important;
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.ios.page-shop .shop-title {
  color: var(--ios-label) !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

body.ios.page-shop .shop-subtitle {
  margin-top: 12px !important;
  color: var(--ios-label-2) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body.ios.page-shop .product-grid {
  gap: 20px !important;
}

body.ios.page-shop .product-card {
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

body.ios.page-shop .product-card:hover {
  border: 0 !important;
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .10) !important;
}

body.ios.page-shop .product-media {
  aspect-ratio: 16 / 10;
  border-bottom: 0 !important;
  background: var(--ios-fill) !important;
}

body.ios.page-shop .product-cover-placeholder {
  color: var(--ios-label-3) !important;
  background: var(--ios-fill) !important;
}

body.ios.page-shop .product-type-badge {
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.ios.page-shop .product-body {
  padding: 18px !important;
}

body.ios.page-shop .product-title {
  margin-bottom: 8px !important;
  color: var(--ios-label) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}

body.ios.page-shop .product-meta {
  margin-bottom: 10px !important;
  color: var(--ios-label-3) !important;
  font-size: 12.5px !important;
}

body.ios.page-shop .product-description {
  margin-bottom: 16px !important;
  color: var(--ios-label-2) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

body.ios.page-shop .product-footer {
  padding-top: 14px !important;
  border-top: 1px solid var(--ios-sep) !important;
}

body.ios.page-shop .product-price {
  color: var(--ios-label) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

body.ios.page-shop .product-price.free {
  color: var(--ios-blue) !important;
}

body.ios.page-shop .product-detail-label {
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.ios.page-shop .shop-empty {
  padding: 64px 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ios-card) !important;
  box-shadow: var(--ios-shadow) !important;
}

body.ios.page-shop .shop-empty-icon {
  color: var(--ios-blue) !important;
  background: var(--ios-blue-soft) !important;
  border: 0 !important;
  border-radius: 14px !important;
}

body.ios.page-shop .shop-empty-title {
  color: var(--ios-label) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

body.ios.page-shop .shop-empty-text {
  color: var(--ios-label-2) !important;
  font-size: 14px !important;
}

/* --- 23. Detail produk ---------------------------------------------------- */
body.ios.page-shop-detail .product-wrap {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 40px 24px 80px !important;
}

body.ios.page-shop-detail .product-breadcrumb-row {
  margin-bottom: 24px !important;
}

body.ios.page-shop-detail .product-breadcrumb,
body.ios.page-shop-detail .product-back {
  color: var(--ios-label-3) !important;
  font-size: 13px !important;
}

body.ios.page-shop-detail .product-breadcrumb a,
body.ios.page-shop-detail .product-back {
  color: var(--ios-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.ios.page-shop-detail .product-breadcrumb svg {
  color: var(--ios-label-3) !important;
}

body.ios.page-shop-detail .product-alert {
  padding: 13px 15px !important;
  color: #d70015 !important;
  background: rgba(255, 59, 48, .10) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
}

html[data-theme="dark"] body.ios.page-shop-detail .product-alert {
  color: #ff6961 !important;
  background: rgba(255, 69, 58, .16) !important;
}

body.ios.page-shop-detail .product-layout {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 36px !important;
}

body.ios.page-shop-detail .product-title {
  margin-bottom: 28px !important;
  color: var(--ios-label) !important;
  font-size: clamp(26px, 3.4vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

body.ios.page-shop-detail .product-section {
  margin-bottom: 30px !important;
}

body.ios.page-shop-detail .product-section-label {
  gap: 0 !important;
  margin-bottom: 10px !important;
  color: var(--ios-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.ios.page-shop-detail .product-section-label:before {
  display: none !important;
}

body.ios.page-shop-detail .product-description {
  color: var(--ios-label-2) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

body.ios.page-shop-detail .file-grid {
  gap: 12px !important;
}

body.ios.page-shop-detail .file-item {
  padding: 15px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ios.page-shop-detail .file-label {
  margin-bottom: 5px !important;
  color: var(--ios-label-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}

body.ios.page-shop-detail .file-value {
  color: var(--ios-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Panel pembelian */
body.ios.page-shop-detail .purchase-panel {
  top: 72px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
}

body.ios.page-shop-detail .purchase-cover-wrap {
  aspect-ratio: 4 / 5;
  border-bottom: 0 !important;
  background: var(--ios-fill) !important;
}

body.ios.page-shop-detail .purchase-cover-placeholder {
  color: var(--ios-label-3) !important;
}

body.ios.page-shop-detail .purchase-badge {
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.ios.page-shop-detail .purchase-body {
  padding: 18px !important;
}

body.ios.page-shop-detail .purchase-price {
  color: var(--ios-label) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

body.ios.page-shop-detail .purchase-price.free {
  color: var(--ios-blue) !important;
}

body.ios.page-shop-detail .purchase-file-info {
  margin-top: 6px !important;
  color: var(--ios-label-3) !important;
  font-size: 12.5px !important;
}

body.ios.page-shop-detail .rating-stars {
  color: #ff9f0a !important;
}

body.ios.page-shop-detail .rating-caption {
  color: var(--ios-label-2) !important;
  font-size: 12.5px !important;
}

body.ios.page-shop-detail .purchase-action {
  min-height: 0 !important;
  margin-top: 16px !important;
  padding: 15px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ios-blue-fill) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: filter .18s ease !important;
}

body.ios.page-shop-detail .purchase-action:hover {
  background: var(--ios-blue-fill) !important;
  filter: brightness(.93);
  transform: none !important;
  box-shadow: none !important;
}

body.ios.page-shop-detail .purchase-notice {
  margin-top: 14px !important;
  padding: 11px 13px !important;
  color: var(--ios-label-2) !important;
  background: var(--ios-fill) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
}

body.ios.page-shop-detail .benefit-list {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ios-sep) !important;
  gap: 10px !important;
}

body.ios.page-shop-detail .benefit-list li {
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
}

body.ios.page-shop-detail .benefit-list li svg {
  color: var(--ios-blue) !important;
}

/* Ulasan */
body.ios.page-shop-detail .reviews-section {
  margin-top: 40px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--ios-sep) !important;
}

body.ios.page-shop-detail .review-average {
  color: var(--ios-label) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

body.ios.page-shop-detail .review-summary-meta,
body.ios.page-shop-detail .review-empty,
body.ios.page-shop-detail .review-note {
  color: var(--ios-label-2) !important;
  font-size: 13.5px !important;
}

body.ios.page-shop-detail .review-list {
  gap: 10px !important;
}

body.ios.page-shop-detail .review-item {
  padding: 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ios.page-shop-detail .review-name {
  color: var(--ios-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.ios.page-shop-detail .review-date {
  color: var(--ios-label-3) !important;
  font-size: 12px !important;
}

body.ios.page-shop-detail .review-content {
  color: var(--ios-label-2) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.ios.page-shop-detail .review-form {
  margin-top: 22px !important;
  padding: 20px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--ios-card) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
}

body.ios.page-shop-detail .review-form-title {
  margin-bottom: 16px !important;
  color: var(--ios-label) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

body.ios.page-shop-detail .review-label {
  margin-bottom: 6px !important;
  color: var(--ios-label-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.ios.page-shop-detail .star-button {
  color: var(--ios-fill-2) !important;
  font-size: 26px !important;
}

body.ios.page-shop-detail .star-button.selected,
body.ios.page-shop-detail .star-button:hover {
  color: #ff9f0a !important;
}

body.ios.page-shop-detail .review-textarea {
  min-height: 104px !important;
  padding: 14px 16px !important;
  color: var(--ios-label) !important;
  background: var(--ios-fill) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.ios.page-shop-detail .review-textarea:focus {
  border: 0 !important;
  box-shadow: 0 0 0 2px var(--ios-blue), 0 0 0 5px var(--ios-blue-soft) !important;
  background: var(--ios-card) !important;
}

body.ios.page-shop-detail .review-submit {
  min-height: 0 !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ios-blue-fill) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Aturan mode terang milik view lebih spesifik; ini mengimbanginya. */
html[data-theme="light"] body.ios.page-shop .product-card,
html[data-theme="light"] body.ios.page-shop .shop-empty,
html[data-theme="light"] body.ios.page-shop-detail .file-item,
html[data-theme="light"] body.ios.page-shop-detail .purchase-panel,
html[data-theme="light"] body.ios.page-shop-detail .review-item,
html[data-theme="light"] body.ios.page-shop-detail .review-form {
  background: var(--ios-card) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: var(--ios-shadow) !important;
}

html[data-theme="light"] body.ios.page-shop .product-media,
html[data-theme="light"] body.ios.page-shop .product-cover-placeholder,
html[data-theme="light"] body.ios.page-shop-detail .purchase-cover-wrap {
  background: var(--ios-fill) !important;
  border-bottom: 0 !important;
}

html[data-theme="light"] body.ios.page-shop .product-type-badge,
html[data-theme="light"] body.ios.page-shop-detail .purchase-badge {
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  border: 0 !important;
}

html[data-theme="light"] body.ios.page-shop .product-price.free,
html[data-theme="light"] body.ios.page-shop-detail .purchase-price.free {
  color: var(--ios-blue) !important;
}

html[data-theme="light"] body.ios.page-shop-detail .purchase-notice {
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  body.ios.page-shop-detail .product-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.ios.page-shop-detail .purchase-panel {
    position: static !important;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  body.ios.page-shop .shop-wrap,
  body.ios.page-shop-detail .product-wrap {
    padding: 28px 20px 60px !important;
  }

  body.ios.page-shop .product-card {
    border-radius: 18px !important;
  }

  body.ios.page-shop .product-title {
    font-size: 14.5px !important;
  }

  body.ios.page-shop-detail .file-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tampilan asli view menyembunyikan teks "Semua Produk" di ponsel dan
     menyisakan ikon 34×34. Aturan font-size di atas membatalkannya
     (font-size:0 kalah oleh !important), jadi dipulihkan di sini. */
  body.ios.page-shop-detail .product-back {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
  }
}

/* ==========================================================================
   Navigasi 768–940px
   Enam tautan + tombol tema + tombol masuk tidak muat pada lebar ini,
   sehingga tautan terpotong menjadi dua baris dan menabrak logo. Tautan
   disembunyikan, tombol tema & Masuk tetap, burger dimunculkan.
   (Aturan yang sama dipakai halaman depan di landing-v2.css.)
   ========================================================================== */
@media (max-width: 940px) {
  body.ios nav .hidden.md\:flex .nav-link { display: none !important; }
  body.ios #burgerBtn { display: block !important; }
}