/* ===== Hero halaman Pendekatan Pembelajaran (khusus halaman ini) ===== */
.ih.ih-pk{
  background:
    radial-gradient(760px 460px at 88% 14%,#e9c46a33,transparent 64%),
    radial-gradient(680px 460px at 0 100%,#34d39930,transparent 66%),
    linear-gradient(135deg,#02281c 0%,#054a33 52%,#0a6b48 100%);
  padding-bottom:5.6rem}

/* Partikel emas melayang */
.ih-pk .pk-bintik{position:absolute;width:6px;height:6px;border-radius:50%;background:#e9c46a;box-shadow:0 0 14px 3px #e9c46a88;opacity:0;animation:pkMengambang var(--t,8s) ease-in-out var(--k,0s) infinite}
@keyframes pkMengambang{0%{opacity:0;transform:translateY(24px) scale(.6)}25%{opacity:.9}70%{opacity:.5}100%{opacity:0;transform:translateY(-110px) scale(1.1)}}

/* Judul: serif mewah dengan kilau emas */
.ih-pk h1{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.08;letter-spacing:-.02em}
.ih-pk h1 em{font-style:italic;text-decoration:none;color:transparent;background:linear-gradient(100deg,#f6e3a1 0%,#e9c46a 35%,#fff4c9 50%,#e9c46a 65%,#f6e3a1 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:pkKilau 5.5s linear infinite}
@keyframes pkKilau{to{background-position:-220% 0}}
.ih-pk .ih-label{padding:.45rem .9rem .45rem .8rem;border:1px solid #e9c46a55;border-radius:999px;background:#e9c46a14;width:fit-content}
.ih-pk .ih-label::before{width:18px}
.ih-pk .ih-sub{font-size:1.08rem;color:#cfe6d9;letter-spacing:.01em}
.ih-pk .ih-stat li{padding:.7rem 1.4rem;border:1px solid #e9c46a40;border-left:3px solid #e9c46a;border-radius:14px;background:#ffffff0d;backdrop-filter:blur(4px)}
.ih-pk .ih-stat b{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#f6e3a1}

/* Bingkai & kotak visual */
.ih-pk .ih-bingkai{width:min(100%,460px)}
.ih-pk .ih-bingkai::before{display:none}
.ih-pk .ih-kotak.pk-kotak{aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;display:grid;gap:1.1rem}

/* Orbit */
.pk-orbit{position:relative;width:100%;aspect-ratio:1;animation:pkMasuk .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pkMasuk{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.pk-orbit::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#e9c46a22,transparent 68%);animation:pkDenyut 4s ease-in-out infinite}
@keyframes pkDenyut{50%{transform:scale(1.08);opacity:.65}}
.pk-cincin{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pk-cincin circle{fill:none;stroke:#e9c46a;transform-origin:50px 50px}
.pk-c1{stroke-opacity:.28;stroke-width:.5;stroke-dasharray:.6 2.2;animation:pkPutar 80s linear infinite reverse}
.pk-c2{stroke-opacity:.45;stroke-width:.35;stroke-dasharray:2 2.4;animation:pkPutar 60s linear infinite}
.pk-c3{stroke-opacity:.5;stroke-width:.4}
.pk-jari{stroke:#e9c46a;stroke-opacity:.2;stroke-width:.35;stroke-dasharray:1.2 1.6;transition:stroke-opacity .4s,stroke-width .4s}
.pk-jari.aktif{stroke-opacity:.95;stroke-width:.7;stroke-dasharray:2 1.4;animation:pkAlir 1.2s linear infinite}
@keyframes pkPutar{to{transform:rotate(360deg)}}
@keyframes pkAlir{to{stroke-dashoffset:-6.8}}

.pk-pusat{position:absolute;left:50%;top:50%;width:25%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#f4ecd0);border:2px solid #e9c46a;box-shadow:0 0 0 7px #e9c46a22,0 0 36px 4px #e9c46a55;animation:pkApung 5s ease-in-out infinite}
.pk-pusat img{width:68%;height:68%;object-fit:contain}
@keyframes pkApung{50%{translate:-50% calc(-50% - 5px)}}

.pk-node{position:absolute;width:clamp(2.5rem,12%,3.3rem);aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid #e9c46a99;background:#05402c;color:#f6e3a1;font:600 1rem/1 'Playfair Display',Georgia,serif;cursor:pointer;box-shadow:0 8px 18px -8px #000a;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s;animation:pkMuncul .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes pkMuncul{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.pk-orbit.rapat .pk-node{width:clamp(2rem,10%,2.7rem);font-size:.85rem}
.pk-node:hover,.pk-node:focus-visible{transform:scale(1.12);border-color:#f6e3a1;outline:none}
.pk-node.aktif{transform:scale(1.22);background:linear-gradient(135deg,#f6e3a1,#e9c46a);color:#3a2c00;border-color:#fff3c4;box-shadow:0 0 0 5px #e9c46a33,0 0 28px 4px #e9c46a88}
.pk-node.aktif::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #e9c46a;animation:pkGelombang 1.8s ease-out infinite}
@keyframes pkGelombang{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}

/* Keterangan di bawah orbit */
.pk-ket{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;border:1px solid #e9c46a40;border-radius:18px;background:linear-gradient(135deg,#ffffff1c,#ffffff0a);backdrop-filter:blur(8px);box-shadow:0 24px 40px -28px #000c;min-height:6.6rem}
.pk-ket .pk-no{flex:none;font:italic 600 2.4rem/1 'Playfair Display',Georgia,serif;color:#e9c46a}
.pk-ket .pk-judul{display:block;font:700 1.12rem/1.3 'Playfair Display',Georgia,serif;color:#fff}
.pk-ket .pk-uraian{margin:.35rem 0 0;font-size:.9rem;line-height:1.6;color:#d3e8dc;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pk-ket.ganti>*{animation:pkGanti .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes pkGanti{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .ih-pk .ih-bingkai{justify-self:center;width:min(100%,400px)}
}
@media (max-width:480px){
  .pk-ket{padding:.9rem 1rem}
  .pk-ket .pk-no{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .ih-pk *,.pk-orbit *,.pk-ket *{animation:none!important}
  .ih-pk h1 em{background-position:0 0}
}


/* ===== Daftar kartu Pendekatan Pembelajaran (desain baru) ===== */
.pk-daftar .mk-pengantar{display:flex;align-items:center;justify-content:center;gap:1.2rem;max-width:820px;margin:0 auto 3rem;text-align:center;font:italic 500 clamp(1.15rem,2.2vw,1.5rem)/1.55 'Playfair Display',Georgia,serif;color:var(--hijau-tua,#064b32)}
.pk-daftar .mk-pengantar::before,.pk-daftar .mk-pengantar::after{content:"";flex:1 1 40px;max-width:90px;height:1px;background:linear-gradient(90deg,transparent,#c9a227)}
.pk-daftar .mk-pengantar::after{background:linear-gradient(270deg,transparent,#c9a227)}
:root[data-tema=gelap] .pk-daftar .mk-pengantar{color:#f6e3a1}

.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.5rem}
.pk-k{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;padding:2.1rem 1.8rem 1.8rem;border-radius:22px;border:1px solid var(--garis,#dfe9e3);background:linear-gradient(165deg,var(--kartu,#fff) 55%,color-mix(in srgb,#e9c46a 12%,var(--kartu,#fff)));box-shadow:0 20px 44px -34px #064b32;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.pk-k::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#c9a227,#f6e3a1,#c9a227);transform:scaleX(.16);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pk-k::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#e9c46a2e,transparent 70%);z-index:-1;transition:transform .6s}
.pk-k:hover{transform:translateY(-7px);border-color:#c9a22799;box-shadow:0 34px 56px -32px #064b32}
.pk-k:hover::before{transform:scaleX(1)}
.pk-k:hover::after{transform:scale(1.5)}

.pk-k-no{position:absolute;right:1.1rem;top:.2rem;z-index:-1;font:italic 700 5.6rem/1 'Playfair Display',Georgia,serif;color:transparent;-webkit-text-stroke:1.3px #c9a22788;opacity:.7;transition:transform .5s,opacity .5s}
.pk-k:hover .pk-k-no{transform:translateY(6px) scale(1.06);opacity:1}
.pk-k-ikon{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:16px;background:linear-gradient(135deg,#065f42,#0a8a5f);color:#f6e3a1;box-shadow:0 0 0 5px #e9c46a22,0 14px 22px -12px #064b32;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pk-k-ikon svg{width:1.55rem;height:1.55rem}
.pk-k:hover .pk-k-ikon{transform:rotate(-7deg) scale(1.08)}
.pk-k h3{margin:.55rem 0 0;font:700 1.32rem/1.3 'Playfair Display',Georgia,serif;letter-spacing:-.005em;color:var(--hijau-tua,#064b32)}
.pk-k p{margin:0;font-size:.99rem;line-height:1.75;color:var(--redup,#566a60)}
.pk-k-garis{margin-top:auto;padding-top:.4rem;display:block;width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,#c9a227,#f6e3a1);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pk-k:hover .pk-k-garis{width:84px}
:root[data-tema=gelap] .pk-k{background:linear-gradient(165deg,#0f2a21,#0b1f18);border-color:#ffffff1c;box-shadow:0 20px 44px -30px #000}
:root[data-tema=gelap] .pk-k h3{color:#fff}
:root[data-tema=gelap] .pk-k p{color:#b9d3c6}

/* Muncul bertahap saat digulir */
.pk-grid.siap .pk-k:not(.tampak){opacity:0}
.pk-k.tampak{animation:pkNaik .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*90ms) backwards}
@keyframes pkNaik{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pk-k,.pk-k *{transition:none!important;animation:none!important}.pk-grid.siap .pk-k:not(.tampak){opacity:1}}