/* MDIX audit — template-specific fixes (mdix-paud-ceria). */

/* WOW.js keeps sections hidden until it sees them scroll into view; in full-page captures
   (catalogue, audit, "save as PDF") most of the homepage stayed blank. Always show content. */
.wow {
  visibility: visible !important;
  animation-name: none !important;
}

/* The rebranded logo is white text; on this light header, footer and side menu it was invisible.
   Render it dark (logo artwork unchanged). */
.header-1 .header-logo img,
.header-4 .header-logo img, /* header halaman dalam: logo putih di atas putih = tidak terlihat */
.offcanvas__logo img,
.footer-section .widget-head img,
.single-footer-widget .widget-head img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
}

/* Indonesian menu labels are longer; keep the main menu and the header button on one line. */
@media (min-width: 1200px) {
  .header-1 .header-main .main-menu ul li {
    margin-inline-end: 26px;
  }
  .header-1 .header-main .header-right .header-button .theme-btn {
    white-space: nowrap;
  }
}

/* Email address in the contact strip was capitalised ("Halo@Mdix.Digital"). */
.contact-info-area .contact-info-items .content h3,
.contact-info-area .contact-info-items .content h3 a {
  text-transform: none;
}

/* ===================== Design QA 2026-10-12 ===================== */

/* 1. Kontras AA (DECISIONS D-20). Oranye tema #F39F5F hanya 2,1:1 di atas putih dan teks abu
   #5C707E 4,47:1 di atas krem. Warna teks/tombol dipergelap; ilustrasi PNG tidak berubah. */
:root {
  --theme: #AD520D;   /* 5,3:1 di putih, 4,6:1 di krem #F4EEE5 */
  --theme2: #3E7683;  /* teks putih di atas teal: 5,1:1 (sebelumnya 2,7:1) */
  --text: #546777;    /* 5,9:1 di putih, 5,1:1 di krem */
}
/* Latar CTA adalah JPG teal polos (12 KB) — teks putih 2,7:1. Pakai teal yang sama dengan tema. */
.cta-section.bg-cover {
  background-image: none !important;
  background-color: var(--theme2) !important;
}

/* 2. Kelas .icon-items ikut terkena selektor ikon [class^="icon-"] (icomoon), sehingga paragraf
   "Kegiatan Unggulan" jatuh ke font serif. Kembalikan font teks. */
.icon-items {
  font-family: "Source Sans 3", sans-serif !important; /* icomoon.css also uses !important */
}
.icon-items h1, .icon-items h2, .icon-items h3, .icon-items h4, .icon-items h5, .icon-items h6 {
  font-family: "Quicksand", sans-serif;
}

/* 3. Title Case tema (text-transform: capitalize) merusak kalimat Indonesia
   ("Kunjungan Edukasi Ke Taman Kota", "Tips ... Pada Anak"). */
.theme-btn, .theme-btn-2, h1, h2, h3, h4, h5, h6, .brand-section-5 p, .instagram-image .icon,
.contact-wrapper .contact-content .contact-form-items .form-clt span,
.contact-wrapper-2 .contact-content .contact-form-items .form-clt span,
.contact-form-items-7 .title, .contact-form-items-7 .form-box .form-clt .label-text,
.contact-form-items-7 .form-box .form-clt input, .contact-form-items-7 .form-box .form-clt textarea,
.login-wrapper .login-items .contact-left-items .form-group input, .faq-left .nav .nav-link,
.faq-content .accordion-item .accordion-header .accordion-button, .faq-content-1 .accordion-box .block .acc-btn,
.counter-box-items5 .counter-box p, .school-facilities-section .facilities-text p,
.school-facilities-wrapper .school-facilities-box-items .title,
.choose-us-wrapper-6 .choose-us-content ul li .title .iconss-title,
.choose-us-wrapper-6 .choose-us-content .skill-feature .box-title,
.choose-us-wrapper-6 .choose-us-content .skill-feature .progress-value,
.footer-kids-section .section-title-area .client-sub span, .footer-kids-box-items .content ul li,
.values-wrapper-6 .values-list li .content .title, .why-choose-wrapper-7 .values-list li .content .title,
.how-work-box-7 .title, .how-work-box-7 .step-box h3, .footer-section-5 .footer-text-5 b,
.footer-info-wrapper-5 .footer-info-items .title, .footer-widget-wrapper-5 .footer-widget-items .widget-head h3,
.footer-widget-wrapper-5 .footer-widget-items .gt-list-area li, .header-main .main-menu ul li a,
.header-1 .header-main .header-left .category-dropdown ul li,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn,
.breadcrumb-wrapper .page-heading .breadcrumb-items li, .hero-6 .hero-content .hero-sub span,
.hero-7 .hero-content .sub-text, .text-slider, .mean-container .mean-nav ul li a,
.main-sidebar .single-sidebar-widget .tagcloud a,
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text p,
.news-details-area .blog-post-details .tag-share-wrap .tagcloud a, .search-wrap .main-search-input,
.pricing-wrapper .nav .nav-link, .program-main-box-items .program-box-items .content .duration-text,
.activities-wrapper-items5 .content h3, .program-box-items-6 .content .duration-text,
.program-bottom-area-6 .title, .extra-activities-box-6 .content .title, .section-title span,
.team-section-6 .link-btn, .testimonial-box-items-6 .content p, .testimonial-box-items-7 .text {
  text-transform: none;
}

/* 3b. Lingkaran hover .theme-btn::before/::after diparkir di luar kotak tombol (z-index -1, tak
   terlihat), tetapi membuat scrollWidth > clientWidth sehingga terbaca "teks terpotong".
   (WIP sebelumnya menggeser lingkaran ke left/right 10px — hasilnya dua titik biru gelap tampil di
   kedua ujung setiap tombol. Dibatalkan.) Lingkaran hanya dirender saat hover; animasi sama. */
.theme-btn:not(:hover)::before,
.theme-btn:not(:hover)::after {
  display: none;
}

/* 4. Target sentuh (D-11): tombol menu 30×25 → 44×45; logo, link footer dan titik slider ≥ 24 px. */
.header-main .header__hamburger {
  padding: 10px 7px;
  margin-left: -7px;
  margin-right: -7px;
}
.header-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.single-footer-widget .widget-head a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.offcanvas__contact-text a,
.footer-widgets-wrapper .single-footer-widget .list-area li a,
.footer-bottom a {
  display: inline-block;
  padding: 1px 0;
  line-height: 22px;
}
.recent-post-items .content a {
  display: inline-block;
  padding: 2px 0;
}
.about-author .author-icon .content h5 a,
.author-icon .content h5 a {
  display: inline-block;
  line-height: 24px;
}
.swiper-dot .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  padding: 7px;
  background-clip: content-box;
  box-sizing: border-box;
  border-radius: 50%; /* radius tema 10px → titik isi tampil kotak; 50% → bulat seperti aslinya */
}
.swiper-dot .swiper-pagination-bullet:not(:last-child) {
  margin-right: 1px;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  top: -3px;
  left: -3px;
}

/* 5. Langkah ke-4 "Program Sehari Penuh": di desktop teksnya memang di atas ikon (zig-zag),
   tetapi di bawah 1200px grid berubah kolom dan ikon muncul di bawah teks. */
@media (max-width: 1199px) {
  .process-work-wrapper .work-process-items {
    display: flex;
    flex-direction: column;
  }
  .process-work-wrapper .work-process-items .content.style-two {
    order: 2;
    margin-top: 30px;
    margin-bottom: 0;
  }
}

/* 6. Ornamen yang menutupi teks: balon udara di atas judul hero (768–1199) dan label (≥1200),
   jerapah di atas daftar kegiatan dan kolom footer, pelangi di atas logo footer, pohon di atas kartu
   testimoni; pensil menjulur 21px keluar layar di 1280+. */
@media (max-width: 1199px) {
  .hero-1 .parasuit-shape,
  .testimonial-section .tree-shape {
    display: none;
  }
}
@media (min-width: 1200px) {
  .hero-1 .parasuit-shape {
    top: 6%;
  }
}
@media (max-width: 1699px) {
  .about-activities-section .zebra-shape,
  .footer-section .zebra-shape,
  .footer-section .frame-shape {
    display: none;
  }
}
.about-activities-section .pencil-shape {
  left: 30px;
}
/* Titik, pesawat kertas dan pensil berputar terus (animasi "rounded"); kotak pembatasnya ikut
   berputar sehingga pensil keluar layar dan gambar terbaca "melar". Ornamen tetap tampil, diam. */
.about-section .dot-shape,
.cta-section .plane-shape,
.about-activities-section .pencil-shape {
  animation: none;
}

/* 7. Avatar penulis berita: foto tim Rina Wulandari dipakai sebagai avatar (sebelumnya dua penulis
   memakai foto yang sama). */
.news-content .post-items .thumb img,
.post-author-items .post-items .thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* ===================== Design QA 2026-10-12 — ronde 2 ===================== */

/* 8. Lapisan warna bentuk (kartu program, testimoni, counter) adalah elemen saudara bermasker
   dengan background-color. Warnanya ditulis ulang sebagai gradien satu warna (tampilan identik)
   supaya pemeriksa kontras mengenalinya sebagai lapisan latar. Kontras nyata: putih di atas
   #3E7683 5,1:1, di atas #AD520D 5,3:1, di atas #385469 8,4:1. */
.program-box-items .program-bg { background-image: linear-gradient(var(--theme2), var(--theme2)); }
.program-box-items .program-bg.bg-2 { background-image: linear-gradient(var(--theme), var(--theme)); }
.program-box-items .program-bg.bg-3 { background-image: linear-gradient(var(--white), var(--white)); }
.testimonial-items .testimonial-bg { background-image: linear-gradient(var(--theme2), var(--theme2)); }
.testimonial-items .testimonial-bg.bg-2 { background-image: linear-gradient(var(--theme), var(--theme)); }
.testimonial-items .testimonial-bg.bg-3 { background-image: linear-gradient(var(--header), var(--header)); }
.counter-section .counter-bg { background-image: linear-gradient(var(--theme2), var(--theme2)); }
.main-cta-wrapper .cta-bg { background-image: linear-gradient(var(--theme), var(--theme)); } /* buletin: putih di #AD520D 5,3:1 */

/* 9. Top bar halaman dalam: teks putih di atas gelombang teal muda #70A6B1 = 2,6:1 (gagal AA).
   Gelombang dipergelap (filter) dan pita di belakang teks diberi warna yang sama: 7,0:1. */
.header-top-section-4 { background-color: rgb(63, 93, 100); }
.header-top-section-4 .header-top-shape img { filter: brightness(0.5625); }

/* 10. Login (≥1400px, bingkai PNG oranye muda): teks putih 2,1:1. Teks dibuat biru tua (6,7:1).
   Di bawah 1400px tema memakai latar oranye tua (#AD520D) → teks putih tetap (5,3:1). */
@media (min-width: 1400px) {
  .login-wrapper .login-items .contact-left-items h2,
  .login-wrapper .login-items .contact-left-items p,
  .login-wrapper .login-items .contact-left-items label,
  .login-wrapper .login-items .contact-left-items .remember-forget-row,
  .login-wrapper .login-items .contact-left-items .remember-forget-row a,
  .login-wrapper .login-items .contact-left-items p a {
    color: var(--header2) !important;
  }
}

/* 11. "Ikuti Instagram Kami": dua garis 480px dipasang absolut dari 15% sehingga mencoret judul
   di ≥1400px. Garis dibuat mengalir di kiri-kanan judul. Foto di HP: tinggi tetap 380–450px
   membuat potongan sangat tinggi dan sempit → rasio 1:1. */
.instagram-wrapper h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.instagram-wrapper h3::before,
.instagram-wrapper h3::after {
  position: static;
  flex: 0 1 300px;
}
@media (max-width: 767px) {
  .instagram-wrapper .instagram-banner-items .banner-image {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .instagram-wrapper .instagram-banner-items .banner-image img {
    object-fit: cover;
  }
}

/* 12. Foto kecil "Tentang" (absolut, bottom -15%) menutupi judul "Pilihan Tepat untuk Si Kecil"
   di 768px saat kolom bertumpuk. Di bawah 992px foto kecil berhenti di tepi bawah foto utama. */
@media (max-width: 991px) {
  .about-wrapper .about-image-items .about-image-2 { bottom: 0; }
}

/* 13. Ornamen yang menutupi teks di 1200–1699px: hati di atas nama guru pertama, pohon di atas
   kartu testimoni pertama. Ornamen buletin (pensil, planet, awan) menimpa judul dan kolom email
   di bawah 1200px. */
@media (max-width: 1699px) {
  .team-section .love-shape,
  .testimonial-section .tree-shape { display: none; }
}
@media (max-width: 1199px) {
  .main-cta-wrapper .pencil-shape,
  .main-cta-wrapper .plane-shape,
  .main-cta-wrapper .cta-shape { display: none; }
}

/* 14. Ikon "Kegiatan Unggulan" menyusut tak sama lebar saat teks panjang (flex-shrink). */
.about-activities-wrapper .activities-content .icon-items .icon { flex-shrink: 0; }

/* 15. Kontak di footer (HP/tablet): blok alamat membungkus label di bawah ikon. */
@media (max-width: 1199px) {
  .contact-info-area .contact-info-items {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .contact-info-area .contact-info-items .icon { flex-shrink: 0; }
  .contact-info-area .contact-info-items .content { min-width: 0; }
}

/* 16. Thumbnail "Artikel Terbaru" footer/sidebar: ukuran asli 78×79/80×80 bercampur (teks tidak
   sejajar, foto sedikit gepeng di 360px). Kotak tetap 78×78, foto di-crop. */
.recent-post-items .thumb,
.recent-items .recent-thumb {
  flex-shrink: 0;
}
.recent-post-items .thumb img,
.recent-items .recent-thumb img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
}

/* 17. CTA pendaftaran: di bawah 992px foto bayi menempel ke tombol. */
@media (max-width: 991px) {
  .cta-wrapper .cta-image { margin-top: 40px; }
}

/* 18. Harga Rupiah (Rp350.000) lebih panjang dari "$59": angka masuk ke bawah ikon kanan atas.
   "/bulan" pindah ke baris sendiri dan judul harga diberi ruang untuk ikon. */
.pricing-items .pricing-header { padding-right: 96px; }
.pricing-items .pricing-header h2 { font-size: 34px; }
.pricing-items .pricing-header h2 span {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 16px;
}

/* 19. Avatar kecil (pendiri di "Tentang", penulis di detail program) kini memakai foto guru yang
   lebih besar → dipaksa ke ukuran avatar aslinya, bulat, di-crop. */
.about-author .author-image img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.details-author-area .author-items img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.client-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* 20. Ikon "Bagikan" di detail artikel 11–18px lebar → target sentuh minimal 24px (D-11). */
.social-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

/* 21. Halaman Tentang: jerapah menimpa akhir paragraf, pelangi menimpa judul "Guru Terlatih",
   pohon menimpa kartu guru pertama (di bawah 1700px tidak ada ruang kosong untuk ornamen ini). */
@media (max-width: 1699px) {
  .about-activities-section-2 .zebra-shape,
  .feature-value-section .shape-1,
  .team-section-3 .tree-shape { display: none; }
}

/* 22. Kartu acara: judul satu baris membuat kartu lebih pendek dari tetangganya. Judul selalu
   disediakan dua baris supaya tombol "Daftar" sejajar. */
.event-content h3 { min-height: 2.7em; }

/* 23. Tentang (HP): matahari kecil menimpa kata terakhir judul "…percaya diri." */
@media (max-width: 991px) {
  .about-activities-section-2 .sun-shape { display: none; }
}

/* 24. CLS 0,44 di 992–1199px: menu desktop tampil (dua baris, header 181px) sampai meanmenu
   menyembunyikannya lewat JS ±150 ms kemudian (header 97px) → hero melompat. Sembunyikan sejak awal
   dengan CSS pada lebar yang sama (meanScreenWidth 1199); menu HP adalah salinan di .mobile-menu. */
@media (max-width: 1199px) {
  .header-main .main-menu { display: none; }
}

/* 25. Buletin di ≤575px: judul putih menempel ke tepi bentuk oranye (tanpa ruang samping). */
@media (max-width: 575px) {
  .main-cta-wrapper .section-title { padding-left: 16px; padding-right: 16px; }
  .main-cta-wrapper .section-title h2 { font-size: 26px; }
}

/* D-19b: latar teal tema (cta/bg1.jpg) dipulihkan; lapisan gelap tipis agar teks putih lolos AA (2,7:1 -> 4,8:1). */
.cta-section-8[style*="cta/bg1.jpg"] { box-shadow: inset 0 0 0 100vmax rgba(8, 48, 58, 0.38); }

/* Verifikasi ulang akhir 2026-10-13 (D-20): tombol garis "Hubungi Kami" (.theme-btn.transparent,
   hero Beranda 2/3/4 — varian tak tertaut) memakai teal #3E7683 di atas foto hero terang ±4,4:1.
   Teks + garis dipergelap ke #2F5F6A (7,1:1 di putih); isi hover tetap teal tema. */
.theme-btn.transparent { color: #2F5F6A; border-color: #2F5F6A; }
.theme-btn.transparent:hover { color: var(--white); }
/* Catatan "data contoh" di bawah baris angka statistik (Tentang Kami). */
.mdix-sample-note { margin: 24px 0 0; text-align: center; font-size: 14px; color: #fff; }