/* =====================================================================
   home.css — gaya khusus section di Beranda
   ===================================================================== */

/* ---------- HERO ---------- */
.hero{position:relative;color:#fff;padding-top:clamp(2.5rem,1.5rem + 4.5vw,5.5rem)}
.hero__bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,var(--navy) 0%,#061C86 58%,var(--blue) 135%)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--photo .hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,95,.93) 0%,rgba(3,16,95,.8) 48%,rgba(3,16,95,.4) 100%)}
.hero__shape{position:absolute;pointer-events:none;z-index:1}
.hero__shape--disc{width:min(56vw,560px);aspect-ratio:1;border-radius:50%;background:var(--blue);opacity:.5;right:-14%;top:-18%}
.hero__shape--ring{width:min(34vw,330px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(231,243,252,.4);right:14%;bottom:-16%}
.hero__shape--quarter{width:clamp(90px,15vw,200px);aspect-ratio:1;background:var(--red);border-radius:100% 0 0 0;right:0;bottom:0}
.hero__shape--dots{width:220px;height:130px;left:0;bottom:0;background-image:radial-gradient(rgba(231,243,252,.28) 1.6px,transparent 1.7px);background-size:18px 18px;opacity:.7}
.hero__ph{position:absolute;right:1rem;top:1rem;z-index:2}
.hero__inner{position:relative;z-index:2}
.hero__content{max-width:40rem;padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
.hero__eyebrow{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;font-weight:600;font-size:.975rem;color:#CFE0F6}
.hero__eyebrow::before{content:"";width:2rem;height:3px;border-radius:2px;background:var(--red)}
.hero h1{color:#fff;margin-bottom:.55em}
.hero__lead{font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);color:#E3ECFA;max-width:34rem;margin-bottom:1.75rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__tagline{margin:1.5rem 0 0;font:500 .975rem var(--font-head);color:#CFE0F6}

.js .hero__content>*{animation:rise .65s cubic-bezier(.2,.7,.2,1) both}
.js .hero__content>:nth-child(2){animation-delay:.07s}
.js .hero__content>:nth-child(3){animation-delay:.14s}
.js .hero__content>:nth-child(4){animation-delay:.21s}
.js .hero__content>:nth-child(5){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero__barwrap{position:relative;z-index:3;margin-top:clamp(1rem,.5rem + 2vw,2rem);margin-bottom:-2.5rem}
.hero__bar{display:grid;grid-template-columns:1fr;background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow)}
.hero__bar li{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.15rem;color:var(--navy);font-weight:600;font-size:.95rem}
.hero__bar li+li{border-top:1px solid var(--line)}
.hero__bar .icon{width:2.4rem;height:2.4rem;padding:.55rem;border-radius:50%;background:var(--light);color:var(--blue)}
@media (min-width:768px){
  .hero__bar{grid-template-columns:repeat(3,1fr)}
  .hero__bar li{justify-content:center;padding:1.15rem 1rem}
  .hero__bar li+li{border-top:0;border-left:1px solid var(--line)}
}
.section--after-hero{padding-top:calc(var(--section-y) + 2.5rem)}

/* ---------- JALUR (Perusahaan / Individu) ---------- */
.paths{display:grid;gap:1.25rem}
@media (min-width:860px){.paths{grid-template-columns:1fr 1fr;gap:1.75rem}}
.path{position:relative;overflow:hidden;border-radius:var(--radius-l);padding:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.path--corp{background:var(--navy);color:#DDE7F8}
.path--corp h3{color:#fff}
.path--indiv{background:var(--light);color:var(--ink)}
.path::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;aspect-ratio:1;border-radius:50%;background:var(--blue);opacity:.22;pointer-events:none}
.path--indiv::after{opacity:.1}
.path>*{position:relative;z-index:1}
.path__icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:16px;background:rgba(255,255,255,.12);color:#fff}
.path--indiv .path__icon{background:#fff;color:var(--blue)}
.path__icon .icon{width:1.6rem;height:1.6rem}
.path h3{font-size:1.4rem;margin:0}
.path p{margin:0 0 .5rem;max-width:26rem}
.path .btn{margin-top:auto}

/* ---------- BIDANG PELATIHAN ---------- */
.fields{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.fields{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.fields{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.field{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem}
.field__icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:14px;background:var(--light);color:var(--blue);margin-bottom:1rem}
.field__icon .icon{width:1.5rem;height:1.5rem}
.field h3{margin-bottom:.4rem}
.field p{margin:0;color:var(--muted);font-size:.95rem}
.fields-cta{margin-top:clamp(1.5rem,1rem + 2vw,2.25rem)}

/* ---------- PROSES + VIDEO ---------- */
.process{display:grid;gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:960px){.process{grid-template-columns:1.1fr .9fr}}
.process--no-video{grid-template-columns:1fr!important;max-width:44rem}
.video{position:relative}
.video__box{position:relative;aspect-ratio:16/9;border-radius:var(--radius-l);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.video__box>img,.video__frame,.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__box>img{object-fit:cover}
.video__box::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,16,95,0) 45%,rgba(3,16,95,.45));pointer-events:none}
.video.is-playing .video__box::after,.video.is-playing .video__play,.video.is-playing .video__box>img{display:none}
.video__play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:0;background:#fff;color:var(--blue);cursor:pointer;box-shadow:0 8px 24px rgba(3,16,95,.35)}
.video__play .icon{width:30px;height:30px;margin-left:4px;fill:currentColor;stroke:none}
.video__play:hover{background:var(--light)}
.video__play:disabled{opacity:.7;cursor:not-allowed}
.video__caption{margin:.9rem 0 0;color:var(--muted);font-size:.925rem}
.video__ph{position:absolute;left:1rem;top:1rem;z-index:3}

.steps{counter-reset:step;position:relative;display:grid;gap:0}
.steps li{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:0 0 1.4rem}
.steps li:last-child{padding-bottom:0}
.steps li::before{counter-increment:step;content:counter(step);flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--blue);color:#fff;font:700 1rem var(--font-head);position:relative;z-index:1}
.steps li::after{content:"";position:absolute;left:1.2rem;top:2.5rem;bottom:0;width:2px;background:var(--line);transform-origin:top;transform:scaleY(1)}
.steps li:last-child::after{display:none}
.js .steps:not(.is-visible) li::after{transform:scaleY(0)}
.js .steps li::after{transition:transform .5s ease-out}
.js .steps.is-visible li:nth-child(2)::after{transition-delay:.12s}
.js .steps.is-visible li:nth-child(3)::after{transition-delay:.24s}
.js .steps.is-visible li:nth-child(4)::after{transition-delay:.36s}
.js .steps.is-visible li:nth-child(5)::after{transition-delay:.48s}
.steps h3{margin:.45rem 0 0;font-size:1.05rem}

/* ---------- PRINSIP KELAS ---------- */
.principles{display:grid;gap:1rem}
@media (min-width:860px){.principles{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.principle{position:relative;overflow:hidden;background:#0A1B78;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:1.6rem 1.5rem 1.75rem}
.principle::after{content:"";position:absolute;right:0;top:0;width:54px;aspect-ratio:1;background:var(--red);border-radius:0 0 0 100%}
.principle h3{margin-bottom:.5rem;padding-right:2.5rem;font-size:1.25rem}
.principle p{margin:0;color:#DDE7F8}
.cycle{margin-top:clamp(2rem,1.5rem + 2vw,3rem);padding-top:clamp(1.5rem,1rem + 1.5vw,2rem);border-top:1px solid rgba(255,255,255,.18)}
.cycle__title{margin:0 0 1rem;font:500 1rem var(--font-head);color:#fff}
.cycle ol{display:grid;gap:.6rem}
.cycle li{position:relative;padding:.85rem 1.1rem;border-radius:var(--radius-m);background:rgba(255,255,255,.08);color:#fff;font-weight:600}
@media (min-width:860px){
  .cycle ol{grid-template-columns:repeat(4,1fr);gap:1.6rem}
  .cycle li{text-align:center}
  .cycle li:not(:last-child)::after{content:"";position:absolute;right:-1.1rem;top:50%;width:.6rem;height:.6rem;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:translateY(-50%) rotate(45deg)}
}

/* ---------- LMS ---------- */
.lms-cards{display:grid;gap:1rem}
@media (min-width:860px){.lms-cards{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.lms-card{background:#fff;color:var(--ink);border-radius:20px;padding:1.5rem}
.lms-card .field__icon{margin-bottom:.9rem}
.lms-card h3{color:var(--navy)!important;margin-bottom:.35rem}
.lms-card p{margin:0;color:var(--muted);font-size:.95rem}
.lms-parts{margin-top:clamp(1.5rem,1rem + 2vw,2.25rem)}
.lms-parts__title{margin:0 0 .8rem;font:500 1rem var(--font-head);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips li{padding:.4rem .95rem;border:1px solid rgba(255,255,255,.7);border-radius:999px;font-weight:500;font-size:.9rem;color:#fff}
.lms-cta{margin-top:clamp(1.5rem,1rem + 2vw,2.25rem)}

/* ---------- TRAINER ---------- */
.trainer{display:grid;gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:900px){.trainer{grid-template-columns:.85fr 1.15fr}}
.trainer__figure{position:relative;overflow:hidden;border-radius:var(--radius-l);background:var(--navy);aspect-ratio:5/8;max-width:400px;width:100%;margin:0 auto}
.trainer__figure::before{content:"";position:absolute;width:96%;aspect-ratio:1;border-radius:50%;background:var(--blue);opacity:.7;left:2%;top:9%}
.trainer__figure::after{content:"";position:absolute;right:0;bottom:0;width:24%;aspect-ratio:1;background:var(--red);border-radius:100% 0 0 0;z-index:0}
.trainer__figure img{position:absolute;z-index:1;left:50%;bottom:0;width:112%;max-width:none;height:auto;transform:translateX(-50%)}
.trainer__role{margin:-.15rem 0 1.25rem;font-weight:600;color:var(--blue)}
.trainer__list{border-top:1px solid var(--line);margin-bottom:1.5rem}
.trainer__list li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.trainer__list strong{font-weight:600;color:var(--navy)}
.trainer__list li>span{flex:none;color:var(--muted);font-size:.925rem;white-space:nowrap}
.trainer__list li>.trainer__year{white-space:normal;text-align:right;max-width:55%}
@media (max-width:480px){.trainer__list li{flex-direction:column;gap:.1rem}}

/* ---------- GALERI ---------- */
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-bottom:.75rem;margin-inline:-1.25rem;padding-inline:1.25rem;scroll-padding-inline:1.25rem}
.gallery__item{flex:0 0 82%;scroll-snap-align:start;margin:0}
.gallery__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-m);overflow:hidden}
.gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-m)}
.gallery figcaption{margin-top:.6rem;font-size:.9rem;color:var(--muted);line-height:1.45}
.gallery__ph{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--radius-m);border:2px dashed #C29A00;background:#FFFBE0;text-align:center;padding:1rem}
@media (min-width:768px){
  .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .gallery__item{flex:none}
}
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:94vh;color:#fff;overflow:visible}
.lightbox::backdrop{background:rgba(2,10,61,.88)}
.lightbox img{max-width:100%;max-height:80vh;margin-inline:auto;border-radius:var(--radius-m)}
.lightbox p{margin:.75rem 0 0;text-align:center;font-size:.95rem}
.lightbox__close{position:absolute;right:0;top:-3rem;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center}

/* ---------- REFERENSI KLIEN ---------- */
.client-list{display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.client-list li{padding:.55rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);font-weight:600;color:var(--navy)}

/* ---------- CTA PENUTUP ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:-90px;bottom:-110px;width:300px;aspect-ratio:1;border-radius:50%;border:2px solid rgba(231,243,252,.3)}
.cta-band::after{content:"";position:absolute;right:0;top:0;width:clamp(80px,12vw,160px);aspect-ratio:1;background:var(--red);border-radius:0 0 0 100%}
.cta-band .container{position:relative;z-index:1}
.cta-band .container>*{max-width:46rem}
.cta-band p{font-size:1.0625rem;max-width:34rem}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
@media (max-width:480px){.hero__actions .btn,.cta-band__actions .btn{width:100%}}

.ph-slot{display:block;margin-top:.7rem}

.trainer__year:empty{display:none}
.trainer__year .ph-slot{margin:0}

/* Video berupa file (pemutar bawaan browser) */
.video__box>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.video__box--native::after{display:none}