/* Desain halaman utama mengikuti mockup #Main (dipakai hanya oleh templates/index.html).
   File ini berisi: penetralan pengaruh Bootstrap/site.css di dalam .mk, lalu CSS mockup
   yang sudah di-scope ke .mk. CSS modal ada di mockup.css (dipakai bersama). */

/* ---------- 1. Penetralan di dalam .mk ---------- */
/* ---- Mockup dirender dengan box model bawaan (content-box); Bootstrap
                memakai border-box. Samakan agar geometri identik. ---- */
        .mk, .mk *, .mk *::before, .mk *::after { box-sizing: content-box; }
        .mk select, .mk button, .mk textarea, .mk input[type="checkbox"],
        .mk input[type="radio"] { box-sizing: border-box; }
        .mk legend { float: none; width: auto; padding: 0 2px; }
        .mk input[type="checkbox"], .mk input[type="radio"] { margin: 3px 3px 3px 4px; }
        .mk a.btn { line-height: 1.6; }
        .mk h1, .mk h2, .mk h3, .mk h4, .mk h5, .mk h6 {
            line-height: 1.6; color: inherit; font-weight: 400; letter-spacing: normal; }
        .mk, .mk * { overflow-wrap: normal; word-break: normal; }
        /* ---- Banner musiman: gambar menggantikan placeholder mockup ---- */
        .holiday-media .carousel-inner { border-radius: 10px; overflow: hidden; background: #14294e; }
        .holiday-media img { display: block; width: 100%; height: auto; }
        /* ---- Foto pembicara ---- */
        .advisor-photo { width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover;
            display: inline-flex; align-items: center; justify-content: center; background: #e8eef7;
            color: #19305a; font-weight: 600; font-size: 14px; letter-spacing: .02em; }

/* ---------- 2. CSS mockup (scoped .mk) ---------- */
.mk{margin:0;background:#ffffff;color:#14223e;font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mk .lang{display:flex;gap:4px;align-items:center}
.mk .lang a{font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;text-decoration:none;color:#44516a;border:1px solid transparent}
.mk .lang a:hover{color:#0059a4}
.mk .lang a[aria-current="true"]{background:#e8eef7;color:#19305a;border-color:#dae2ed}
.mk a{color:#0059a4}
.mk a:hover{color:#19305a}
.mk h1,.mk h2,.mk h3,.mk h4{font-family:Poppins,"Segoe UI",system-ui,sans-serif;margin:0;text-wrap:pretty}
.mk p{margin:0}
.mk .wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.mk .eyebrow{font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0059a4}
.mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:8px;font-family:Poppins,sans-serif;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.mk .btn-primary{background:#0059a4;color:#ffffff;border-color:#0059a4}
.mk .btn-primary:hover{background:#19305a;border-color:#19305a;color:#fff}
.mk .btn-ghost{background:transparent;color:#14223e;border-color:#c5d1e2}
.mk .btn-ghost:hover{border-color:#14223e;color:#14223e}
.mk .btn-onband{background:#ffffff;color:#14294e;border-color:#ffffff}
.mk .btn-onband:hover{background:#e8eef7;color:#14294e}
.mk .btn-outline-onband{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.55)}
.mk .btn-outline-onband:hover{border-color:#fff;color:#fff}
.mk .card{background:#ffffff;border:1px solid #dae2ed;border-radius:14px}
.mk .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
@media(max-width:1140px){
.mk .nav{display:none!important}
}
@media(max-width:560px){
.mk .hdr-cta{display:none}
}
.mk .tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:#e8eef7;color:#19305a;font-size:12.5px;font-weight:600}
.mk .faq summary{cursor:pointer;list-style:none;font-family:Poppins,sans-serif;font-weight:600;font-size:17px;padding:20px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.mk .faq summary::-webkit-details-marker{display:none}
.mk .faq summary::after{content:"+";font-size:24px;color:#0059a4;font-weight:400;line-height:1}
.mk .faq details[open] summary::after{content:"–"}
.mk .faq details{border-bottom:1px solid #dae2ed}
.mk .faq details p{padding:0 0 20px;color:#44516a;max-width:70ch}
.mk input,.mk select{font:inherit}
.mk .field{display:flex;flex-direction:column;gap:6px}
.mk .field label{font-size:13.5px;font-weight:600;color:#19305a}
.mk .field input,.mk .field select{min-height:48px;border:1px solid #c5d1e2;border-radius:8px;padding:0 14px;background:#fff;color:#14223e}
.mk .field input:focus,.mk .field select:focus{outline:2px solid #0059a4;outline-offset:1px}
.mk .ph{border:1.5px dashed #9fb0c8;color:#52627a;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:600;padding:8px 10px;background:#f8fafc}
.mk .footer a{color:#b9c7dc;text-decoration:none;font-size:14px}
.mk .footer a:hover{color:#fff}
.mk .bar{height:10px;border-radius:5px;background:#e8eef7;position:relative;overflow:hidden}
.mk .bar span{position:absolute;inset:0 auto 0 0;border-radius:5px}
.mk{margin:0;background:#ffffff;color:#14223e;font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mk a{color:#0059a4}
.mk a:hover{color:#19305a}
.mk h1,.mk h2,.mk h3,.mk h4{font-family:Poppins,"Segoe UI",system-ui,sans-serif;margin:0;text-wrap:pretty}
.mk p{margin:0}
.mk .wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.mk .eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0059a4}
.mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:8px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.mk .btn-primary{background:#0059a4;color:#ffffff;border-color:#0059a4}
.mk .btn-primary:hover{background:#19305a;border-color:#19305a;color:#fff}
.mk .btn-ghost{background:transparent;color:#14223e;border-color:#c5d1e2}
.mk .btn-ghost:hover{border-color:#14223e;color:#14223e}
.mk .btn-onband{background:#ffffff;color:#14294e;border-color:#ffffff}
.mk .btn-onband:hover{background:#e8eef7;color:#14294e}
.mk .btn-outline-onband{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.55)}
.mk .btn-outline-onband:hover{border-color:#fff;color:#fff}
.mk .card{background:#ffffff;border:1px solid #dae2ed;border-radius:14px}
.mk .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.mk .tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:#e8eef7;color:#19305a;font-size:12.5px;font-weight:600}
.mk .lang{display:flex;gap:4px;align-items:center}
.mk .lang a{font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;text-decoration:none;color:#44516a;border:1px solid transparent}
.mk .lang a[aria-current="true"]{background:#e8eef7;color:#19305a;border-color:#dae2ed}
@media(max-width:1140px){
.mk .nav{display:none!important}
}
@media(max-width:560px){
.mk .hdr-cta{display:none}
}
.mk .crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13.5px;color:#5b687e}
.mk .crumb a{color:#5b687e;text-decoration:none}
.mk .crumb a:hover{color:#0059a4}
.mk .faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:17px;padding:20px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.mk .faq summary::-webkit-details-marker{display:none}
.mk .faq summary::after{content:"+";font-size:24px;color:#0059a4;font-weight:400;line-height:1}
.mk .faq details[open] summary::after{content:"–"}
.mk .faq details{border-bottom:1px solid #dae2ed}
.mk .faq details p{padding:0 0 20px;color:#44516a;max-width:70ch}
.mk input,.mk select{font:inherit}
.mk .field{display:flex;flex-direction:column;gap:6px}
.mk .field label{font-size:13.5px;font-weight:600;color:#19305a}
.mk .field input,.mk .field select{min-height:48px;border:1px solid #c5d1e2;border-radius:8px;padding:0 14px;background:#fff;color:#14223e}
.mk .field input:focus,.mk .field select:focus{outline:2px solid #0059a4;outline-offset:1px}
.mk .chk{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid #dae2ed;border-radius:12px;background:#fff;cursor:pointer;font-size:15px}
.mk .chk input{width:20px;height:20px;margin:3px 0 0;flex:none;accent-color:#0059a4}
.mk .ph{border:1.5px dashed #9fb0c8;color:#52627a;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:600;padding:8px 10px;background:#f8fafc}
.mk .footer a{color:#b9c7dc;text-decoration:none;font-size:14px}
.mk .footer a:hover{color:#fff}
.mk .step{display:flex;gap:16px;align-items:flex-start}
.mk .step .n{flex:none;width:40px;height:40px;border-radius:50%;background:#e8eef7;color:#0059a4;display:flex;align-items:center;justify-content:center;font-weight:600}
.mk{margin:0;background:#ffffff;color:#14223e;font-family:Poppins,"Segoe UI",system-ui,sans-serif;font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media(max-width:1140px){
.mk .nav{display:none!important}
}
@media(max-width:560px){
.mk .hdr-cta{display:none}
}
.mk .wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
.mk .lang{display:flex;gap:4px;align-items:center}
.mk .lang a{font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;text-decoration:none;color:#44516a;border:1px solid transparent}
.mk .lang a[aria-current="true"]{background:#e8eef7;color:#19305a;border-color:#dae2ed}
.mk a{color:#0059a4}
.mk a:hover{color:#19305a}
.mk h1,.mk h2,.mk h3{font-family:Poppins,"Segoe UI",system-ui,sans-serif;margin:0;text-wrap:pretty}
.mk p{margin:0}
.mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:8px;font-family:Poppins,sans-serif;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;white-space:nowrap}
.mk .btn-primary{background:#0059a4;color:#ffffff;border-color:#0059a4}
.mk .btn-primary:hover{background:#19305a;border-color:#19305a;color:#fff}
.mk .btn-ghost{background:transparent;color:#14223e;border-color:#c5d1e2}
.mk .btn-ghost:hover{border-color:#14223e;color:#14223e}
.mk .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.mk .btn-ghost{background:transparent;color:#14223e;border:1.5px solid #c5d1e2}
.mk .btn-ghost:hover{border-color:#14223e}
.mk .btn-outline-onband{background:transparent;color:#ffffff;border:1.5px solid rgba(255,255,255,.55)}
.mk .btn-outline-onband:hover{border-color:#fff}
.mk .btn-onband{border:1.5px solid #ffffff}
@media(max-width:700px){
.mk .milestone-journey{grid-template-columns:repeat(2,minmax(0,1fr))!importan}
}