/* ============================================================
   EPIC Academy — Homepage v2 (mengikuti layout referensi desain)
   Dibangun di atas token warna & komponen dari style.css
   ============================================================ */

/* ---------- Eyebrow terpusat ---------- */
.stamp-center{ display:flex; justify-content:center; }
.section-head{ max-width:600px; margin:0 auto 38px; text-align:center; }
.section-head p{ max-width:56ch; margin-left:auto; margin-right:auto; }

/* ---------- HERO v2 ---------- */
.hero-v2{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(12,112,137,.35), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(63,185,212,.18), transparent 55%),
    linear-gradient(160deg, #073A4B 0%, var(--primary-900) 45%, var(--primary-800) 100%);
  padding:126px 0 68px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-v2 h1{ color:#fff; font-size:clamp(29px,3.7vw,44px); }
.hero-v2 h1 .accent{ color:var(--accent-500); }
.hero-feat-row{ display:flex; flex-wrap:wrap; gap:22px; margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.hero-feat{ display:flex; align-items:center; gap:10px; min-width:135px; }
.hero-feat-icon{
  width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; font-size:15.5px; color:var(--accent-500); flex:none;
}
.hero-feat b{ display:block; font-size:12.5px; color:#fff; font-family:var(--font-label); font-weight:600; }
.hero-feat span{ font-size:11px; color:rgba(255,255,255,.6); }

.hero-visual{ position:relative; }
.hero-globe{
  width:100%; aspect-ratio:1/1; max-width:320px; margin:0 auto; position:relative;
  border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), linear-gradient(145deg, var(--primary-600), var(--primary-800));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px rgba(0,0,0,.35), inset -18px -18px 50px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.hero-globe .globe-emoji{ font-size:min(15vw,110px); filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.hero-orbit{
  position:absolute; inset:-6%; border-radius:50%; border:1.5px dashed rgba(255,255,255,.25);
  animation:spin 40s linear infinite;
}
.hero-orbit::before{
  content:"✈"; position:absolute; top:-4px; left:50%; transform:translateX(-50%); font-size:17px; color:var(--accent-500);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hero-orbit{ animation:none; } }

.hero-badge-card{
  position:absolute; top:6%; right:-4%; background:#fff; color:var(--ink); border-radius:14px; padding:11px 15px;
  box-shadow:0 20px 45px rgba(2,22,28,.28); display:flex; align-items:center; gap:10px; max-width:200px;
}
.hero-badge-card .bic{
  width:32px; height:32px; border-radius:9px; background:var(--primary-100); color:var(--primary-700);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:none;
}
.hero-badge-card b{ display:block; font-size:11.5px; }
.hero-badge-card span{ font-size:10px; color:var(--ink-soft); }
@media (max-width:991.98px){ .hero-badge-card{ right:2%; } }

.hero-flag-strip{
  position:absolute; bottom:2%; left:-2%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); border-radius:12px; padding:10px 13px; display:flex; align-items:center; gap:8px;
}

/* ---------- FLAG IMAGES (menggantikan emoji bendera agar tampil konsisten di semua perangkat) ---------- */
.flag-img{ display:inline-block; object-fit:cover; background:#DDE7EA; flex:none; }
.flag-img-strip{ width:22px; height:16px; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.flag-img-badge{ width:100%; height:100%; border-radius:50%; }

@media (max-width:991.98px){
  .hero-v2{ padding:108px 0 56px; text-align:center; }
  .hero-feat-row{ justify-content:center; }
  .hero-visual{ margin-top:44px; }
  .hero-badge-card{
    position:static; margin:22px auto 0; right:auto; left:auto; max-width:85%;
    box-shadow:0 18px 32px rgba(2,22,28,.22);
  }
  .hero-flag-strip{
    position:static; margin:22px auto 0; left:auto; right:auto; justify-content:center; gap:10px;
    padding:12px 15px;
    width:auto;
  }
  .hero-globe .globe-emoji{ font-size:min(18vw,95px); }
}

@media (max-width:767.98px){
  .hero-v2{ padding:96px 0 44px; }
  .hero-v2 h1{ font-size:clamp(25px,6.4vw,32px); line-height:1.18; }
  .hero-feat-row{ gap:15px; }
  .hero-feat{ min-width:calc(50% - 10px); }
  .hero-feat-icon{ width:32px; height:32px; font-size:14.5px; }
  .hero-feat b{ font-size:12px; }
  .hero-feat span{ font-size:10.5px; }
  .hero-badge-card{ padding:10px 12px; }
  .hero-flag-strip{ padding:10px 12px; }
}

@media (max-width:575.98px){
  .hero-v2{ padding:86px 0 38px; }
  .hero-v2 h1{ font-size:clamp(22px,7vw,27px); }
  .hero-visual{ margin-top:32px; }
  .hero-badge-card{ max-width:100%; }
  .hero-flag-strip{ width:100%; margin:16px auto 0; }
  .hero-globe{ max-width:240px; margin:0 auto; }
  .hero-feat{ min-width:120px; }
  .hero-feat-row{ gap:12px; justify-content:center; }
  .hero-feat-icon{ width:30px; height:30px; font-size:13.5px; }
  .hero-feat b{ font-size:11.5px; }
  .hero-feat span{ font-size:9.5px; }
  .hero-badge-card{ padding:12px 14px; }
  .hero-flag-strip{ padding:12px 14px; }
}

/* ---------- PROGRAM CARDS (besar) ---------- */
.prog-card-big{
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.prog-card-big:hover{ transform:translateY(-6px); box-shadow:0 24px 46px rgba(15,32,39,.12); }
.prog-card-big .prog-media{
  height:150px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary-700), var(--primary-900));
}
.prog-card-big .prog-media::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,22,28,.05), rgba(2,22,28,.42));
  pointer-events:none;
}
.prog-card-big .landmark-img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.prog-card-big:hover .landmark-img{ transform:scale(1.06); }
.prog-card-big .prog-flag-badge{
  position:absolute; z-index:1; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.prog-card-big .prog-body{ padding:22px; }
.prog-card-big h3{ font-size:18px; margin-bottom:8px; }
.prog-card-big p{ font-size:13.5px; min-height:58px; }

/* ---------- PROGRAM CARDS (kecil / kursus) ---------- */
.prog-card-sm{
  border-radius:16px; border:1px solid var(--line); background:#fff; height:100%; padding:26px 20px; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prog-card-sm:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,32,39,.1); border-color:transparent; }
.prog-card-sm .sm-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin-bottom:16px;
  background:linear-gradient(135deg, var(--primary-600), var(--primary-800));
}
.prog-card-sm h4{ font-size:15.5px; margin-bottom:6px; }
.prog-card-sm p{ font-size:12.8px; min-height:52px; }

/* ---------- PROGRAM CARDS (kecil) — scroll horizontal ---------- */
.prog-scroll-wrap{
  position:relative;
  margin:0 -4px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.prog-scroll{
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:nowrap; flex-wrap:nowrap;
  -webkit-box-orient:horizontal; -webkit-box-direction:normal;
  gap:20px; overflow-x:auto; overflow-y:hidden; padding:4px 4px 20px;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  width:100%; max-width:100%; box-sizing:border-box;
}
.prog-scroll::-webkit-scrollbar{ height:6px; }
.prog-scroll::-webkit-scrollbar-track{ background:var(--primary-50); border-radius:999px; }
.prog-scroll::-webkit-scrollbar-thumb{ background:var(--primary-100); border-radius:999px; }
.prog-scroll::-webkit-scrollbar-thumb:hover{ background:var(--line); }
.prog-scroll-item{
  flex:0 0 220px; -webkit-flex:0 0 220px; width:220px; min-width:220px; max-width:220px;
  scroll-snap-align:start; box-sizing:border-box;
}
@media (max-width:767.98px){
  .prog-scroll-item{ flex:0 0 min(220px, 90vw); width:min(220px, 90vw); min-width:0; max-width:100%; }
}
@media (max-width:575.98px){
  .prog-scroll-item{ flex:0 0 min(200px, 92vw); width:min(200px, 92vw); min-width:0; max-width:100%; }
}
.prog-link{
  font-family:var(--font-label); font-size:12.5px; font-weight:700; color:var(--primary-700);
  display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0;
}
.prog-link i{ transition:transform .2s ease; }
.prog-link:hover i{ transform:translateX(3px); }

/* ---------- KENAPA EPIC Academy ---------- */
.why-card{ text-align:center; padding:8px; }
.why-icon{
  width:58px; height:58px; border-radius:50%; background:var(--primary-100); color:var(--primary-700);
  display:flex; align-items:center; justify-content:center; font-size:23px; margin:0 auto 15px;
}
.why-card h4{ font-size:14.5px; }
.why-card p{ font-size:12.5px; }

/* ---------- TESTIMONIAL ---------- */
.testi-wrap{ max-width:820px; margin:0 auto; }
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; gap:20px; align-items:flex-start;
  box-shadow:0 20px 50px rgba(15,32,39,.06);
}
.testi-avatar{
  width:52px; height:52px; border-radius:50%; background:var(--brand-gradient); color:#fff; flex:none; position:relative;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px;
}
.testi-avatar .flag-corner{
  position:absolute; bottom:-4px; right:-4px; width:22px; height:22px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.testi-body p.quote{ font-size:14px; line-height:1.65; color:var(--ink); }
.testi-body .stars{ color:var(--accent-500); font-size:12px; }
.testi-body .testi-badge{
  display:inline-block; margin-top:10px; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--primary-700); background:var(--primary-100); border-radius:999px; padding:5px 12px;
}
.testi-nav-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;
}
.testi-nav-btn:hover{ background:var(--primary-600); color:#fff; border-color:var(--primary-600); }
#testiCarousel .carousel-indicators{ position:static; margin-top:22px; }
#testiCarousel .carousel-indicators button{
  width:8px; height:8px; border-radius:50%; background-color:var(--line); border:0; opacity:1;
}
#testiCarousel .carousel-indicators button.active{ background-color:var(--primary-600); width:22px; border-radius:4px; }

@media (max-width:575.98px){
  .testi-card{ flex-direction:column; padding:26px 22px; }
}

/* ---------- CTA BAR ---------- */
.cta-bar{
  background:linear-gradient(120deg, var(--primary-900), var(--primary-700));
  border-radius:20px; padding:34px 40px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-bar .cta-icon{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center;
  justify-content:center; font-size:26px; flex:none;
}
.cta-bar h3{ color:#fff; font-size:19px; margin-bottom:4px; }
.cta-bar p{ color:rgba(255,255,255,.75); font-size:13.5px; margin-bottom:0; }
.cta-bar .btn-light{ font-weight:700; white-space:nowrap; }

/* ---------- FOOTER v2 ---------- */
footer.site-v2{ background:linear-gradient(160deg, #073A4B, var(--primary-900)); color:rgba(255,255,255,.68); }
footer.site-v2 h6{ color:#fff; font-family:var(--font-label); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
footer.site-v2 ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
footer.site-v2 a{ color:rgba(255,255,255,.68); font-size:13.5px; text-decoration:none; }
footer.site-v2 a:hover{ color:#fff; }
footer.site-v2 p.brand-desc{ font-size:13px; color:rgba(255,255,255,.6); line-height:1.7; max-width:280px; }
footer.site-v2 .foot-brand{ color:#fff; font-family:var(--font-display); font-size:19px; display:flex; align-items:center; }
footer.site-v2 .social-icon{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; transition:background .2s ease;
}
footer.site-v2 .social-icon:hover{ background:var(--primary-600); border-color:var(--primary-600); }
footer.site-v2 .foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px; font-size:12.5px; text-align:center; }
footer.site-v2 .contact-line{ display:flex; gap:10px; font-size:13px; margin-bottom:12px; align-items:flex-start; }
footer.site-v2 .contact-line i{ color:var(--accent-500); margin-top:3px; }

/* ---------- Program detail modal ---------- */
.modal-prog .modal-content{ border-radius:18px; border:0; }
.modal-prog .modal-header{ background:var(--brand-gradient); color:#fff; border-radius:18px 18px 0 0; border:0; }
.modal-prog .modal-header .btn-close{ filter:invert(1); }
.modal-prog .modal-body{ padding:1.25rem 1.35rem 1.5rem; }
.modal-prog .skill-list{ margin:0; padding:0; list-style:none; }
.modal-prog .skill-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.8px; line-height:1.6; margin-bottom:8px; }
.modal-prog .skill-list i{ color:var(--primary-600); margin-top:3px; }
.modal-prog .req-list{ counter-reset:reqnum; list-style:none; margin:0; padding:0; }
.modal-prog .req-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.8px; line-height:1.6; margin-bottom:10px; counter-increment:reqnum; color:var(--ink-soft, #4A6069); }
.modal-prog .req-list li span{ display:block; }
.modal-prog .req-list li::before{ content:counter(reqnum); flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--primary-600); color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; margin-top:2px; }
.modal-prog .meta-chip{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; text-align:center; flex:1;
}
.modal-prog .meta-chip b{ display:block; font-size:13.5px; }
.modal-prog .meta-chip span{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:575.98px){
  .modal-prog .modal-body{ padding:1rem 1rem 1.1rem; }
  .modal-prog .req-list li, .modal-prog .skill-list li{ font-size:13px; }
}

/* ---------- Contact modal ---------- */
.modal-contact .modal-content{ border-radius:18px; border:0; }