/* Cara Kami Belajar: jalur emas tergambar, kartu naik berurutan, ikon tergambar, miring 3D mengikuti kursor */
.cb{--cb-navy:#14296b;--cb-emas:#c9a24a;--cb-teks:#55607a;position:relative;isolation:isolate;overflow:hidden}
.cb-latar{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cb-daun{position:absolute;width:clamp(28px,4vw,52px);fill:none;stroke:var(--cb-emas);stroke-width:1.2;stroke-linejoin:round;opacity:.28;
  animation:cb-ayun var(--d) ease-in-out var(--w) infinite alternate}
@keyframes cb-ayun{from{transform:translate(0,0) rotate(-14deg)}to{transform:translate(18px,-26px) rotate(18deg)}}

.cb-garis{display:block;width:76px;height:4px;margin:1.1rem auto 0;border-radius:4px;background:linear-gradient(90deg,var(--cb-navy),var(--cb-emas));transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .5s}
.cb.tampil .cb-garis{transform:none}
.cb-kepala small,.cb-kepala h2{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.cb-kepala h2{transition-delay:.12s}
.cb.tampil .cb-kepala small,.cb.tampil .cb-kepala h2{opacity:1;transform:none}

.cb-jalur{position:relative;max-width:1160px;margin:0 auto;padding-top:64px}
.cb-tali{position:absolute;left:0;right:0;top:6px;width:100%;height:40px;overflow:visible;z-index:0}
.cb-tali path{fill:none;stroke:var(--cb-emas);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;transition:stroke-dashoffset 2.2s cubic-bezier(.5,.1,.2,1) .35s}
.cb.tampil .cb-tali path{stroke-dashoffset:0}
.cb-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);perspective:1100px}

.cb-kartu{--rx:0deg;--ry:0deg;position:relative;overflow:hidden;padding:2rem 1.8rem 2.4rem;background:#fff;border:1px solid #e6e9f2;border-radius:22px;
  box-shadow:0 18px 40px -26px rgba(20,41,107,.45);opacity:0;transform:translateY(46px) rotate(calc(1.8deg * (1 - var(--i) * 1)));
  transition:opacity .8s ease calc(.5s + .18s * var(--i)),transform .9s cubic-bezier(.2,.9,.25,1) calc(.5s + .18s * var(--i)),box-shadow .4s,border-color .4s}
.cb.tampil .cb-kartu{opacity:1;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.cb.tampil .cb-kartu.siap{transition:transform .18s ease-out,box-shadow .4s,border-color .4s}
.cb-kartu::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--cb-navy) 0 50%,var(--cb-emas) 50%) 0 0/200% 100%;transition:background-position .6s cubic-bezier(.2,.8,.2,1)}
.cb-kartu:hover{border-color:#d9c58f;box-shadow:0 34px 50px -26px rgba(20,41,107,.5)}
.cb-kartu:hover::before{background-position:100% 0}
.cb-kilau{position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(201,162,74,.2),transparent 62%);opacity:0;transition:opacity .35s}
.cb-kartu:hover .cb-kilau{opacity:1}

.cb-atas{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.cb-no{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--cb-navy);color:#fff;font:800 1.5rem 'DM Sans',sans-serif;
  box-shadow:0 12px 20px -10px rgba(20,41,107,.7);transform:scale(0);transition:transform .7s cubic-bezier(.3,1.6,.4,1) calc(.85s + .18s * var(--i))}
.cb.tampil .cb-no{transform:none}
.cb-no::after{content:"";position:absolute;inset:-4px;border-radius:22px;border:2px solid var(--cb-emas);opacity:0}
.cb.tampil .cb-no::after{animation:cb-cincin 3.4s ease-out calc(1.6s + .6s * var(--i)) infinite}
@keyframes cb-cincin{0%{transform:scale(.9);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.cb-kartu:hover .cb-no{animation:cb-goyang .6s ease}
@keyframes cb-goyang{30%{transform:rotate(-8deg) scale(1.08)}65%{transform:rotate(6deg) scale(1.08)}}

.cb-ikon{width:46px;height:46px;fill:none;stroke:var(--cb-emas);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cb-ikon *{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.6s ease calc(1.1s + .18s * var(--i))}
.cb.tampil .cb-ikon *{stroke-dashoffset:0}
.cb-kartu:hover .cb-ikon{animation:cb-tumbuh 1s ease}
@keyframes cb-tumbuh{40%{transform:translateY(-6px) scale(1.12)}}

.cb-kartu h3{margin:0 0 .7rem;font:700 1.32rem/1.3 'Playfair Display',Georgia,serif;color:var(--cb-navy)}
.cb-kartu p{margin:0;font:400 1.02rem/1.75 'DM Sans',sans-serif;color:var(--cb-teks)}
.cb-bawah{position:absolute;right:-46px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:#eef0f7;transition:transform .7s cubic-bezier(.2,.8,.2,1),background .4s;z-index:-1}
.cb-kartu:hover .cb-bawah{transform:scale(2.6);background:#f6efd9}

@media (max-width:860px){
  .cb-grid{grid-template-columns:1fr}
  .cb-tali{display:none}
  .cb-jalur{padding-top:0}
  .cb-kartu{transform:translateY(34px)}
}
@media (prefers-reduced-motion:reduce){
  .cb *,.cb *::before,.cb *::after{animation:none!important;transition:none!important}
  .cb-kartu,.cb-no,.cb-kepala small,.cb-kepala h2,.cb-garis{opacity:1;transform:none}
  .cb-tali path,.cb-ikon *{stroke-dashoffset:0}
}