/* ===== Budaya Sekolah: hero bintang bersudut, garis waktu nilai, semboyan ===== */

/* ---- Hero ---- */
.ih.ih-bd{
  background:
    radial-gradient(700px 460px at 86% 8%,#e9c46a2e,transparent 62%),
    radial-gradient(640px 440px at 4% 96%,#2dd4bf26,transparent 66%),
    linear-gradient(135deg,#021820 0%,#043a3a 50%,#09593f 100%);
  padding-bottom:5.6rem}
.ih-bd .bd-kerlip{position:absolute;width:var(--u,10px);height:var(--u,10px);background:#f6e3a1;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:bdKerlip var(--t,4s) ease-in-out var(--k,0s) infinite}
@keyframes bdKerlip{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}

.ih-bd h1{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.05;letter-spacing:-.025em}
.ih-bd 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:bdKilau 5.5s linear infinite}
@keyframes bdKilau{to{background-position:-220% 0}}
.ih-bd .ih-label{padding:.45rem .95rem;border:1px solid #e9c46a55;border-radius:999px;background:#e9c46a14;width:fit-content;letter-spacing:.14em}
.ih-bd .ih-sub{max-width:36ch;font:italic 500 clamp(1.08rem,1.9vw,1.4rem)/1.55 'Playfair Display',Georgia,serif;color:#f1e3b0;letter-spacing:0}
.ih-bd .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-bd .ih-stat b{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#f6e3a1}
.ih-bd .ih-bingkai{width:min(100%,460px)}
.ih-bd .ih-bingkai::before{display:none}
.ih-bd .ih-kotak.bd-kotak{aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;display:grid;gap:1.1rem}

/* Bintang */
.bd-bintang{position:relative;width:100%;aspect-ratio:1;animation:bdMasuk 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdMasuk{from{opacity:0;transform:scale(.85) rotate(-8deg)}to{opacity:1;transform:none}}
.bd-bintang::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#e9c46a26,transparent 68%);animation:bdDenyut 4.5s ease-in-out infinite}
@keyframes bdDenyut{50%{transform:scale(1.1);opacity:.6}}
.bd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bd-cin1,.bd-cin2{fill:none;stroke:#e9c46a;transform-origin:50px 50px}
.bd-cin1{stroke-opacity:.3;stroke-width:.4;stroke-dasharray:.6 2;animation:bdPutar 90s linear infinite}
.bd-cin2{stroke-opacity:.35;stroke-width:.35;stroke-dasharray:2 2.5;animation:bdPutar 60s linear infinite reverse}
@keyframes bdPutar{to{transform:rotate(360deg)}}
.bd-l0{fill:none;stroke:#e9c46a;stroke-opacity:.2;stroke-width:.3}
.bd-l{fill:none;stroke:#e9c46a;stroke-opacity:.34;stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:bdGambar 1.6s ease forwards;animation-delay:calc(var(--d,0)*.12s + .4s);transition:stroke-opacity .4s,stroke-width .4s}
@keyframes bdGambar{to{stroke-dashoffset:0}}
.bd-l.nyala{stroke-opacity:1;stroke-width:.8;filter:drop-shadow(0 0 1.4px #e9c46a)}

.bd-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:bdApung 5s ease-in-out infinite}
.bd-pusat img{width:68%;height:68%;object-fit:contain}
@keyframes bdApung{50%{translate:-50% calc(-50% - 5px)}}

.bd-node{position:absolute;width:clamp(2.2rem,10.5%,2.9rem);aspect-ratio:1;translate:-50% -50%;rotate:45deg;display:grid;place-items:center;padding:0;border-radius:.55rem;border:1.5px solid #e9c46a99;background:#04352f;color:#f6e3a1;font:600 .98rem/1 'Playfair Display',Georgia,serif;cursor:pointer;box-shadow:0 8px 18px -8px #000a;transition:scale .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s;animation:bdMuncul .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.bd-node span{display:block;rotate:-45deg}
@keyframes bdMuncul{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.bd-bintang.rapat .bd-node{width:clamp(1.9rem,9%,2.5rem);font-size:.85rem}
.bd-node:hover,.bd-node:focus-visible{scale:1.12;border-color:#f6e3a1;outline:none}
.bd-node.aktif{scale:1.25;background:linear-gradient(135deg,#f6e3a1,#e9c46a);color:#3a2c00;border-color:#fff3c4;box-shadow:0 0 0 5px #e9c46a33,0 0 28px 4px #e9c46a88}
.bd-node.aktif::after{content:"";position:absolute;inset:-6px;border-radius:.8rem;border:1.5px solid #e9c46a;animation:bdGelombang 1.8s ease-out infinite}
@keyframes bdGelombang{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}

.bd-ket{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;border:1px solid #e9c46a40;border-left:4px solid #e9c46a;border-radius:6px 18px 18px 6px;background:linear-gradient(135deg,#ffffff1c,#ffffff0a);backdrop-filter:blur(8px);box-shadow:0 24px 40px -28px #000c;min-height:6.6rem}
.bd-ket-no{flex:none;font:italic 600 2.4rem/1 'Playfair Display',Georgia,serif;color:#e9c46a;min-width:1.3ch}
.bd-ket-judul{display:block;font:700 1.1rem/1.3 'Playfair Display',Georgia,serif;color:#fff}
.bd-ket-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}
.bd-ket.ganti>*{animation:bdGanti .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdGanti{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ---- Bagian isi ---- */
.bd-pembuka{max-width:820px;margin:0 auto 3.2rem;text-align:center}
.bd-lead{margin:0 0 2.4rem;font-size:clamp(1.05rem,1.8vw,1.22rem);line-height:1.9;color:var(--redup,#566a60)}
.bd-judul-bagian{position:relative;display:inline-block;margin:0;padding:0 .2rem 1.1rem;font:700 clamp(1.8rem,3.4vw,2.6rem)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.015em;color:var(--hijau-tua,#064b32)}
.bd-judul-bagian::after{content:"";position:absolute;left:50%;bottom:0;width:90px;height:3px;translate:-50% 0;border-radius:3px;background:linear-gradient(90deg,transparent,#c9a227,#f6e3a1,#c9a227,transparent)}
:root[data-tema=gelap] .bd-judul-bagian{color:#fff}

/* ---- Garis waktu ---- */
.bd-jalur{position:relative;max-width:1000px;margin:0 auto;padding:.5rem 0 1rem}
.bd-rel{position:absolute;left:50%;top:0;bottom:0;width:3px;translate:-50% 0;border-radius:3px;background:linear-gradient(#c9a22733,#c9a22722)}
.bd-rel-isi{position:absolute;left:0;top:0;width:100%;height:0;border-radius:3px;background:linear-gradient(#f6e3a1,#c9a227);box-shadow:0 0 14px 2px #e9c46a99;transition:height .25s linear}
.bd-n{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:2.4rem}
.bd-n:last-child{margin-bottom:0}
.bd-n-titik{position:absolute;left:50%;top:1.6rem;translate:-50% 0;z-index:2;display:grid;place-items:center;width:2.9rem;height:2.9rem;rotate:45deg;border-radius:.7rem;border:2px solid #c9a22799;background:var(--kartu,#fff);color:var(--hijau-tua,#064b32);font:700 1.05rem/1 'Playfair Display',Georgia,serif;transition:background .5s,color .5s,border-color .5s,box-shadow .5s,scale .5s}
.bd-n.capai .bd-n-titik{background:linear-gradient(135deg,#f6e3a1,#c9a227);color:#3a2c00;border-color:#fff3c4;box-shadow:0 0 0 6px #e9c46a2e,0 0 24px 2px #e9c46a88;scale:1.1}
.bd-n-titik b{display:block;rotate:-45deg;font-weight:inherit}
.bd-n-kartu{position:relative;padding:1.7rem 1.8rem 1.6rem;border:1px solid var(--garis,#dfe9e3);border-radius:20px;background:linear-gradient(160deg,var(--kartu,#fff) 55%,color-mix(in srgb,#e9c46a 11%,var(--kartu,#fff)));box-shadow:0 22px 44px -34px #064b32;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.bd-n-kartu:hover{transform:translateY(-5px);border-color:#c9a22799;box-shadow:0 34px 56px -32px #064b32}
.bd-n-kartu::before{content:"";position:absolute;top:2.55rem;width:3.2rem;height:2px;background:linear-gradient(90deg,#c9a227,#f6e3a1)}
.bd-n.kiri .bd-n-kartu{grid-column:1;margin-right:3.4rem;text-align:right}
.bd-n.kiri .bd-n-kartu::before{right:-3.2rem}
.bd-n.kanan .bd-n-kartu{grid-column:2;margin-left:3.4rem}
.bd-n.kanan .bd-n-kartu::before{left:-3.2rem;background:linear-gradient(270deg,#c9a227,#f6e3a1)}
.bd-n-ikon{display:inline-grid;place-items:center;width:3rem;height:3rem;margin-bottom:.7rem;border-radius:50%;background:linear-gradient(135deg,#065f42,#0a8a5f);color:#f6e3a1;box-shadow:0 0 0 5px #e9c46a22,0 12px 20px -12px #064b32;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bd-n-ikon svg{width:1.4rem;height:1.4rem}
.bd-n-kartu:hover .bd-n-ikon{transform:rotate(-8deg) scale(1.1)}
.bd-n-kartu h3{margin:0 0 .45rem;font:700 1.25rem/1.3 'Playfair Display',Georgia,serif;color:var(--hijau-tua,#064b32)}
.bd-n-kartu p{margin:0;font-size:.98rem;line-height:1.75;color:var(--redup,#566a60)}
:root[data-tema=gelap] .bd-n-kartu{background:linear-gradient(160deg,#0f2a21,#0b1f18);border-color:#ffffff1c;box-shadow:0 20px 44px -30px #000}
:root[data-tema=gelap] .bd-n-kartu h3{color:#fff}
:root[data-tema=gelap] .bd-n-kartu p{color:#b9d3c6}
:root[data-tema=gelap] .bd-n-titik{background:#0f2a21;color:#f6e3a1}

/* Muncul dari samping */
.bd-jalur.siap .bd-n:not(.tampak) .bd-n-kartu{opacity:0}
.bd-n.kiri.tampak .bd-n-kartu{animation:bdDariKiri .9s cubic-bezier(.2,.8,.2,1) backwards}
.bd-n.kanan.tampak .bd-n-kartu{animation:bdDariKanan .9s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes bdDariKiri{from{opacity:0;transform:translateX(-60px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bdDariKanan{from{opacity:0;transform:translateX(60px) scale(.96)}to{opacity:1;transform:none}}

/* ---- Semboyan ---- */
.bd-semboyan{position:relative;overflow:hidden;isolation:isolate;margin:4rem auto 0;max-width:1000px;padding:4rem 2.2rem 3.4rem;border-radius:28px;text-align:center;color:#fff;background:radial-gradient(520px 320px at 82% 0,#e9c46a2e,transparent 70%),radial-gradient(420px 280px at 0 100%,#2dd4bf22,transparent 70%),linear-gradient(135deg,#032b2a,#064b32 60%,#0a6b48);box-shadow:0 40px 70px -40px #032b2a}
.bd-semboyan::before{content:"\201C";position:absolute;left:1.4rem;top:-2rem;z-index:-1;font:700 13rem/1 'Playfair Display',Georgia,serif;color:#e9c46a1f}
.bd-sem-label{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:1.4rem;font:700 .78rem/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#e9c46a}
.bd-sem-label::before,.bd-sem-label::after{content:"";width:34px;height:1px;background:#e9c46a99}
.bd-sem-kata{margin:0 auto;max-width:26ch;font:italic 600 clamp(1.6rem,3.6vw,2.7rem)/1.4 'Playfair Display',Georgia,serif;color:#fff}
.bd-sem-kata span{display:inline-block}
.bd-sem-garis{display:block;width:70px;height:3px;margin:1.8rem auto 0;border-radius:3px;background:linear-gradient(90deg,#c9a227,#f6e3a1,#c9a227)}
.bd-semboyan.siap .bd-sem-kata span{opacity:0}
.bd-semboyan.tampak .bd-sem-kata span{animation:bdKata .8s cubic-bezier(.2,.8,.2,1) calc(var(--w,0)*80ms) backwards}
@keyframes bdKata{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* ---- Layar kecil ---- */
@media (max-width:900px){
  .ih-bd .ih-bingkai{justify-self:center;width:min(100%,400px)}
}
@media (max-width:760px){
  .bd-rel{left:1.45rem}
  .bd-n{grid-template-columns:1fr}
  .bd-n-titik{left:1.45rem;width:2.5rem;height:2.5rem;font-size:.95rem}
  .bd-n.kiri .bd-n-kartu,.bd-n.kanan .bd-n-kartu{grid-column:1;margin:0 0 0 3.6rem;text-align:left}
  .bd-n.kiri .bd-n-kartu::before,.bd-n.kanan .bd-n-kartu::before{left:-2.2rem;right:auto;width:2.2rem;background:linear-gradient(270deg,#c9a227,#f6e3a1)}
  .bd-n-kartu{padding:1.4rem 1.3rem}
  .bd-n.kiri.tampak .bd-n-kartu{animation-name:bdDariKanan}
  .bd-semboyan{padding:3.2rem 1.4rem 2.8rem;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .ih-bd *,.bd-bintang *,.bd-ket *,.bd-n-kartu,.bd-semboyan *{animation:none!important;transition:none!important}
  .bd-l{stroke-dashoffset:0}
  .bd-jalur.siap .bd-n:not(.tampak) .bd-n-kartu,.bd-semboyan.siap .bd-sem-kata span{opacity:1}
}