/* Override & tambahan di atas Bootstrap 5.3 */
:root{
  --bs-body-font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  --bs-body-color:#4a5775;
  --bs-body-font-size:.94rem;
  --bs-primary:#1d6fe8;--bs-primary-rgb:29,111,232;
  --bs-link-color:#1d6fe8;
  --navy:#0f1f4b;
  --line:#e3ebf7;
}
body{line-height:1.65}
h1,h2,h3{color:var(--navy);line-height:1.2}
.fw-extrabold{font-weight:800}
.text-navy{color:var(--navy)!important}
.bg-alt{background:#f2f7ff}
.bg-purple{background:#7c4dde!important}
.bg-warning{background:#f59e0b!important}
.bg-success{background:#22b573!important}
.bg-blue-soft{background:#eef5ff}.bg-green-soft{background:#ecfaf3}.bg-purple-soft{background:#f3eefe}.bg-orange-soft{background:#fff6ea}
.btn-primary{--bs-btn-bg:#1d6fe8;--bs-btn-border-color:#1d6fe8;--bs-btn-hover-bg:#1558bd;--bs-btn-hover-border-color:#1558bd;font-weight:700;border-radius:10px}
.btn-outline-primary{--bs-btn-color:#1d6fe8;--bs-btn-border-color:#1d6fe8;--bs-btn-hover-bg:#eef5ff;--bs-btn-hover-color:#1d6fe8;--bs-btn-hover-border-color:#1d6fe8;background:#fff;font-weight:700;border-radius:10px}
.btn-success{--bs-btn-bg:#22b573;--bs-btn-border-color:#22b573;--bs-btn-hover-bg:#1a9c61;--bs-btn-hover-border-color:#1a9c61;border-radius:10px}
.btn-soft{background:#e4efff;color:#1d6fe8;font-weight:700;font-size:.8rem;border-radius:10px}
.btn-soft:hover{background:#d3e5ff;color:#1d6fe8}
.badge-soft{background:#e4efff;color:#1d6fe8;font-weight:600;font-size:.75rem;padding:.4em .9em;border-radius:99px}
h2{font-size:clamp(1.5rem,3vw,1.9rem)}

/* navbar */
.navbar .nav-link{color:var(--navy);padding:.9rem 0;border-bottom:3px solid transparent}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#1d6fe8;border-color:#1d6fe8}
@media(max-width:991px){.navbar .nav-link{padding:.5rem 0}}

/* gambar */
.img{background:linear-gradient(135deg,#cfe3ff,#eaf3ff);overflow:hidden;position:relative}
.img img{width:100%;height:100%;object-fit:cover}

/* hero */
.hero{background:linear-gradient(120deg,#eaf3ff,#f6faff)}
.hero h1{font-size:clamp(2rem,4.4vw,2.8rem)}
.hero-img{height:300px;border-radius:24px}
@media(min-width:992px){
  .hero-img{height:400px;border-radius:200px 0 0 200px / 50% 0 0 50%;margin-right:calc(50% - 50vw)}
}

/* tentang */
.about-img{height:300px}
.feat{border:1px solid var(--line);border-radius:14px;padding:26px 14px;text-align:center}
.feat i,.si{font-style:normal;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:24px;margin:0 auto 12px;box-shadow:0 0 0 1px var(--line) inset}
.feat h3{font-size:.95rem;font-weight:700;margin-bottom:6px}
.feat p{font-size:.8rem;margin:0}

/* manfaat */
.ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#fff;font-weight:800;font-size:20px}
.bg-word{background:#2b6fd6}.bg-excel{background:#1e8a52}.bg-ppt{background:#e2522f}
.thumb{min-height:80px}

/* cara belajar & program */
.step{position:relative;padding-top:6px}
@media(min-width:992px){.step{padding:0 20px;border-left:1px solid var(--line)}.steps .col-lg-3:first-child .step{border-left:0;padding-left:0}}
.step .si{margin:0 0 16px 24px;width:56px;height:56px}
.step h3{font-size:.95rem;font-weight:700;margin-bottom:8px}
.step p{font-size:.82rem}
.num{position:absolute;top:0;left:0;width:28px;height:28px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;z-index:1}
.prog-card{border-radius:12px}
.prog-card .card-body{position:relative;padding:22px 16px 18px}
.prog-card .num{top:12px;left:12px}
.prog-card .si{margin:0 0 12px 18px;width:44px;height:44px;font-size:20px}
.mascot{background:none;min-height:200px}
.mascot img{object-fit:contain}

/* testimoni */
.testi{display:flex;gap:14px;margin:0;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 4px 14px rgba(15,31,75,.05);background:#fff}
.testi p{font-size:.78rem;font-style:italic;margin-bottom:12px}
.testi small{font-size:.7rem}
.av{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#cfe3ff,#eaf3ff)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.dots span{width:8px;height:8px;border-radius:50%;background:#cdd8ea}
.dots .on{background:#1d6fe8}

/* CTA & footer */
.cta{background:#1d6fe8;color:#dbe9ff}
.cta-ic{font-size:5rem!important}
.foot{background:var(--navy);color:#c5d1ee}
.tagline{border-left:0}
@media(min-width:768px){.tagline{border-left:1px solid #2a3b6b;padding-left:28px}}
.soc a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--navy);font-size:13px;font-weight:700;text-decoration:none}

a:focus-visible,.btn:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*{transition:none!important}}

/*whatsapp button*/
.whatsapp-floating {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-floating:hover {
  background-color: #20ba5a;
  transform: scale(1.1);
}

/*Tombol Daftar Mengambang*/
/* Tombol mengambang (prefix kfab- agar tidak bentrok) */
.kfab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:1030;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kfab__daftar,.kfab__wa{display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-family:inherit;font-weight:700;box-shadow:0 6px 18px rgba(15,31,75,.28);transition:transform .2s,background .2s}
.kfab__daftar{background:#1d6fe8;font-size:14px;padding:12px 20px;border-radius:99px;animation:kfab-pulse 2.4s infinite}
.kfab__daftar:hover{background:#1558bd;transform:translateY(-2px)}
.kfab__wa{background:#22b573;width:56px;height:56px;border-radius:50%;font-size:26px}
.kfab__wa:hover{background:#1a9c61;transform:translateY(-2px)}
@keyframes kfab-pulse{
  0%{box-shadow:0 6px 18px rgba(15,31,75,.28),0 0 0 0 rgba(29,111,232,.5)}
  70%{box-shadow:0 6px 18px rgba(15,31,75,.28),0 0 0 14px rgba(29,111,232,0)}
  100%{box-shadow:0 6px 18px rgba(15,31,75,.28),0 0 0 0 rgba(29,111,232,0)}
}
@media(prefers-reduced-motion:reduce){.kfab__daftar{animation:none}}