/* Mutqinin — komponen responsif. Scope: halaman depan, bukan wp-admin. */
:root{--mq-space:16px;--mq-touch:48px}
*,*::before,*::after{box-sizing:border-box}
img,video,svg{max-width:100%}img{height:auto}
:where(input,select,textarea,button){font-family:inherit}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select,textarea){font-size:16px!important;max-width:100%;min-width:0}
:where(button,input[type=submit],input[type=button],.btn,.button){min-height:48px;white-space:normal;overflow-wrap:break-word}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #17668f!important;outline-offset:3px}
:where(main,section,article,fieldset,.grid>*):not(svg){min-width:0}
:where(main p,main h1,main h2,main h3,main a,main label){overflow-wrap:break-word}
.mq-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px}
.mq-table-scroll:focus-visible{outline:3px solid #17668f;outline-offset:2px}
.mq-table-help{font-size:14px;color:#455f73;margin:8px 0}
.mq-account #loginform label{display:block;margin-bottom:6px}
.mq-account #loginform input:not([type=checkbox]){display:block;width:100%;min-height:48px;border:1px solid #9eb8cc;border-radius:8px;font-size:16px;padding:12px;background:#fff;color:#14314d}
.mq-account #loginform input[type=submit]{background:#2259ad;color:#fff;font-weight:700;border-color:#2259ad}
.mq-account .login-remember label{display:flex!important;align-items:center;gap:10px;min-height:48px}
.mq-account #loginform .nsl-container a{min-height:48px}
.mqj button,.mqj .button,.mqj input:not([type=checkbox]):not([type=radio]),.mqj select{min-height:48px!important}
.mqj input[type=checkbox],.mqj input[type=radio]{width:20px;height:20px;flex-shrink:0}
.mqj label:has(input[type=checkbox]),.mqj label:has(input[type=radio]){min-height:48px;display:flex;align-items:center;gap:10px}
.mqj .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important}
.mqj fieldset,.mqtl-practice fieldset{min-inline-size:0;max-width:100%}
.mqtl-practice legend{max-width:100%;margin:0;box-sizing:border-box;overflow-wrap:break-word}
.mqtl-practice select{width:100%;min-height:48px}.mqtl-practice textarea{font-size:18px!important}
.mqtl-practice .mqz-option{min-height:52px;overflow-wrap:anywhere}
.mqtl-practice [lang=ar],.mqtl-practice [dir=rtl]{line-height:2;font-size:1.25em}
.mqj .scroll{max-width:100%}.mqj .check{min-height:48px}
.mqj .proof{object-fit:contain}
@media(max-width:767px){
 main.mqj{padding:16px 16px 100px!important}.mqj section,.mqj article{padding:16px!important;border-radius:12px!important}.mqj h1{font-size:28px!important}.mqj h2{font-size:22px!important}
 .mqj>nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:12px 0!important;align-items:stretch!important}
 .mqj>nav>a{font-size:15px!important;line-height:1.4;min-height:48px!important;display:flex!important;align-items:center;padding:10px 12px!important}
 .mqj>nav>.mqj-more{grid-column:1/-1}.mqj-more summary{min-height:48px!important}.mqj-more-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.mqj-more-links a{min-height:48px!important}
 .mqj button{font-size:16px!important;max-width:100%}.mqj .button{margin:4px 0;max-width:100%}
 .mq-account{margin:16px!important;padding:20px!important;border-radius:14px!important}
 .mq-account h1{font-size:26px!important}.mq-account .nsl-container-buttons{width:100%}
 .mqtl-practice{padding:16px!important}.mqtl-practice fieldset{margin-inline:0!important;padding-inline:0!important}.mqtl-practice legend{font-size:18px!important;line-height:1.8!important}
 .mqtl-practice .mqz-result{font-size:21px}.mqtl-practice .mqz-option{padding:12px!important;gap:10px!important}
 .tutor-container{max-width:100%!important}.tutor-course-details-title{font-size:26px!important;line-height:1.35!important}
 .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}.woocommerce .woocommerce-input-wrapper{display:block}
 .woocommerce ul.products li.product{min-width:0}.woocommerce .input-text{font-size:16px!important}.woocommerce table.shop_table{font-size:16px}
 body.mqhub .eco-hero{padding-block:24px!important}.mqhub .eco-summary{max-width:65ch}
 .mq-fab{right:16px!important;bottom:calc(20px + env(safe-area-inset-bottom))!important;width:52px!important;height:52px!important}
 body:has(.mqtl-practice) .mq-fab,body:has(.tutor-course-single-content-wrapper) .mq-fab{bottom:calc(90px + env(safe-area-inset-bottom))!important}
 .mq-chat{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 100px)!important}
}
@media(max-width:400px){.mqj>nav>a{font-size:14px!important}.mqj section,.mqj article{padding:14px!important}.mqtl-practice{padding:12px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.mq-table-help{display:none}.mq-table-scroll{overflow:visible}}
/* Perbaikan dari pemeriksaan layar 320 piksel. */
.mq-account .nsl-button-label-container{white-space:normal!important;overflow:visible!important;line-height:1.4!important;padding:10px 6px!important;margin:0!important;font-size:14px!important}
.mq-account .nsl-button{min-height:48px!important;height:auto!important}.mq-account .nsl-button-svg-container{flex:0 0 36px!important}
.mqj details>summary{min-height:48px;padding-block:10px;line-height:1.5}
.mqj>form,.mqj details>form{max-width:720px}
@media(max-width:767px){
 .mqhub .top nav{font-size:14px!important;gap:4px 16px!important}.mqhub .top nav a{min-height:48px!important}
 .mqhub .eco-node-title{font-size:18px!important}.mqhub .eco-node-desc{font-size:16px!important;line-height:1.6!important}.mqhub .eco-node-foot{font-size:14px!important;min-height:40px;align-items:center}.mqhub .eco-node{padding:18px!important}
 body.has-bar .head-in{display:grid!important;grid-template-columns:1fr auto!important;gap:12px!important;padding-block:14px!important}
 body.has-bar .head-in .search{grid-column:1/-1;order:3;width:100%!important;min-width:0!important;display:flex!important}
 body.has-bar .search input{flex:1;min-width:0!important;width:100%!important;min-height:48px!important;padding:10px!important}
 body.has-bar .search button{flex-shrink:0;min-height:48px!important}
 body.has-bar .mq-fab{bottom:calc(90px + env(safe-area-inset-bottom))!important}
 .mq-panel{right:12px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;width:min(380px,calc(100vw - 24px))!important;max-height:calc(100dvh - 112px)!important}
 .topbar .nav{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.topbar .nav a{min-height:48px;display:inline-flex;align-items:center;padding:8px;color:#f4e6ba!important;font-size:14px!important}
 .topbar-in{flex-wrap:wrap!important;gap:8px!important}.topbar .brand{color:#f4e6ba!important}
 body:has(.topbar) .hero{padding-top:32px!important;padding-bottom:32px!important;min-height:0!important}
 body:has(.topbar) .overline{font-size:12px!important;letter-spacing:.12em!important;line-height:1.6!important}
 body:has(.topbar) .hero h1{font-size:clamp(28px,8vw,40px)!important;line-height:1.25!important}
}
@media(max-width:480px){.mqhub .eco-directory{grid-template-columns:minmax(0,1fr)!important}.mqhub .eco-icon{margin-bottom:8px!important}}
/* Kontrol tablet, navigasi bantuan, dan lebar menengah. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:48px}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}section.hero:has(.hero-grid){padding-block:32px!important}}
@media(max-width:767px){
 body:not(:has(.mqtl-practice)):not(:has(.tutor-course-single-content-wrapper)) .mq-fab{position:relative!important;inset:auto!important;display:flex!important;margin:16px 16px 90px auto!important;}
}
.woocommerce form.checkout input.input-text,.woocommerce form.checkout textarea,.woocommerce form.checkout select{font-size:16px!important}
.woocommerce .select2-container .select2-selection--single{min-height:48px!important;height:auto!important}
.woocommerce .select2-container .select2-selection__rendered{line-height:1.5!important;padding-block:11px!important;font-size:16px!important;white-space:normal!important}
.woocommerce .select2-container .select2-selection__arrow{height:46px!important}
.woocommerce select.select2-hidden-accessible{min-height:0!important}