/* ============================================================
   BERANDA SEKOLAH — "DIGITAL CAMPUS" THEME
   Palet: Navy dalam + Emas (tanpa merah), terinspirasi dari
   estetika 3D futuristik tapi diselaraskan untuk website sekolah.
   Ganti nilai --* di :root untuk menyesuaikan warna resmi sekolah.
   ============================================================ */

:root{
  /* -- warna dasar -- */
  --navy-950:#060a1c;
  --navy-900:#0a1230;
  --navy-800:#101a42;
  --navy-700:#172352;
  --indigo-600:#4338ca;
  --blue-500:#3b82f6;
  --blue-400:#60a5fa;
  --cyan-400:#22d3ee;
  --gold-400:#fbbf24;
  --gold-300:#fcd34d;
  --gold-100:#fef3c7;
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-500:#64748b;
  --paper-0:#ffffff;
  --paper-50:#f8fafc;
  --paper-100:#eef2ff;
  --line:rgba(15,23,42,.08);

  /* -- aksen "ember" — signature glow terinspirasi UI modern (emas → oranye → rose),
     dipakai secukupnya di hero, tag section, & ghost-text supaya beranda terasa
     lebih "wow" tanpa keluar dari identitas navy/emas sekolah -- */
  --ember-300:#fdba74;
  --ember-500:#f97316;
  --ember-600:#fb7185;
  --grad-ember: linear-gradient(120deg,var(--gold-300),var(--ember-500) 55%,var(--ember-600));

  /* -- gradasi turunan -- */
  --grad-gold: linear-gradient(120deg,var(--gold-300),var(--gold-400) 55%,#f59e0b);
  --grad-blue: linear-gradient(120deg,var(--cyan-400),var(--blue-500) 60%,var(--indigo-600));
  /* -- gradasi murni (dipakai juga di section lain seperti CTA banner, TANPA foto) -- */
  --grad-hero: radial-gradient(60% 55% at 22% 20%, rgba(59,130,246,.35), transparent 60%),
               radial-gradient(55% 50% at 82% 15%, rgba(251,191,36,.16), transparent 60%),
               radial-gradient(70% 60% at 60% 100%, rgba(67,56,202,.35), transparent 60%),
               linear-gradient(180deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800));

  /* -- foto gedung: 2 lapisan (foto WebP ~110KB di atas, placeholder blur base64 <1KB di
     bawah supaya langsung terisi warna sebelum foto selesai diunduh). Ditempel KHUSUS di
     hero (lihat .bp-hero & varian bp-time-*), bukan lewat --grad-hero, supaya section lain
     yang memakai --grad-hero (mis. CTA banner) tidak ikut kena foto tanpa disengaja -- */
  --hero-photo: url("../img/hero-bg.webp"),
                url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCYNbCwY22zaDgO3Xp6fWs5rhoow5cOcjKkDv8ASqdtdB96lGCuu1gG6j8qcYk8zhEwem5c4o9pNC9nC2xsxPZzxh5HEbdNrDpRXPSjEhHTHZeBRT+tTM/q8T//2Q==");
  /* overlay gelap yang ditaruh di ATAS foto (biar teks hero tetap kontras di semua jam) */
  --hero-photo-overlay: linear-gradient(180deg, rgba(6,10,28,.90), rgba(10,18,48,.80) 55%, rgba(16,26,66,.93));

  --shadow-soft: 0 20px 50px rgba(15,23,42,.08);
  --shadow-card: 0 10px 30px rgba(15,23,42,.10);
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.beranda-body{
  margin:0;
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--ink-900);
  background:var(--paper-50);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{font-family:inherit}

/* Grain/noise tipis di seluruh halaman — kesan premium, tanpa request gambar eksternal */
.bp-noise{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Label kecil di atas judul seksi — ala terminal tag "[ fasilitas ]",
   senada dengan eyebrow hero tapi lebih tegas & bertekstur mono-space. */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',monospace;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#c99400;margin-bottom:12px;
  padding:6px 14px;border:1px solid rgba(201,148,0,.35);border-radius:999px;
  background:linear-gradient(90deg,rgba(249,115,22,.06),rgba(251,191,36,.06));
  position:relative;
}
.section-eyebrow::before{content:"[ ";opacity:.55}
.section-eyebrow::after{content:" ]";opacity:.55}
.bp-section.bg-soft .section-eyebrow,
.bp-cta .section-eyebrow{color:var(--gold-400);border-color:rgba(251,191,36,.4)}
.section-eyebrow-wrap{text-align:center;margin-bottom:2px}

/* Ghost watermark — teks outline raksasa di belakang judul seksi, murni dekoratif
   (aria-hidden lewat generated content, tidak terbaca screen reader). Signature
   element halaman: bold, senyap kalau tidak di-hover, tidak mengganggu keterbacaan. */
.bp-ghost-behind{position:relative;isolation:isolate}
.bp-ghost-behind::before{
  content:attr(data-ghost);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(52px,11vw,150px);line-height:1;
  white-space:nowrap;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(15,23,42,.08);
  z-index:-1;pointer-events:none;user-select:none;
}
.bp-section.bg-soft .bp-ghost-behind::before{-webkit-text-stroke-color:rgba(15,23,42,.06)}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#bpProgress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--grad-gold);
  z-index:999;
  box-shadow:0 0 12px rgba(251,191,36,.6);
  transition:width .08s linear;
}

/* ============================================================
   CUSTOM CURSOR (desktop only, fine pointer)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body.beranda-body{cursor:none}
  #bpCursorDot,#bpCursorRing{
    position:fixed;left:0;top:0;pointer-events:none;z-index:998;
    border-radius:50%;transform:translate(-50%,-50%);
  }
  #bpCursorDot{
    width:6px;height:6px;background:var(--gold-300);
    box-shadow:0 0 10px rgba(251,191,36,.9),0 0 22px rgba(96,165,250,.5);
  }
  #bpCursorRing{
    width:36px;height:36px;border:1px solid rgba(96,165,250,.55);
    transition:width .18s var(--ease-out),height .18s var(--ease-out),
               border-color .18s,background .18s;
  }
  body.cursor-hover #bpCursorRing{
    width:58px;height:58px;border-color:var(--gold-400);
    background:rgba(251,191,36,.08);
  }
  .bp-click-wave{
    position:fixed;width:10px;height:10px;border-radius:50%;
    border:1px solid var(--gold-300);pointer-events:none;z-index:997;
    transform:translate(-50%,-50%);
    animation:bpClickWave .7s ease-out forwards;
  }
}
@keyframes bpClickWave{
  0%{width:10px;height:10px;opacity:.9}
  100%{width:140px;height:140px;opacity:0}
}

/* ============================================================
   NAV
   ============================================================ */
.bp-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:rgba(6,10,28,.0);
  transition:background .35s var(--ease-out),padding .35s var(--ease-out),
             box-shadow .35s var(--ease-out),backdrop-filter .35s;
}
.bp-nav.scrolled{
  background:rgba(8,13,34,.72);
  backdrop-filter:blur(16px) saturate(140%);
  padding:12px clamp(20px,5vw,64px);
  box-shadow:0 10px 30px rgba(6,10,28,.25);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bp-nav .brand{
  display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:16px;letter-spacing:.01em;color:#fff;
}
.bp-nav .brand span{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.btn-nav{
  font-family:'Poppins',sans-serif;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  backdrop-filter:blur(6px);
  transition:transform .2s var(--ease-out),background .25s,box-shadow .25s,border-color .25s;
  will-change:transform;
}
.btn-nav:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
  border-color:rgba(251,191,36,.6);
  box-shadow:0 10px 26px rgba(251,191,36,.18);
}

/* ============================================================
   HERO — "DIGITAL CAMPUS CORE"
   ============================================================ */
.bp-hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:140px 20px 120px;
  overflow:hidden;
  background:var(--grad-hero), var(--hero-photo-overlay), var(--hero-photo);
  background-repeat:no-repeat;
  background-position:center center,center center,center center,center center,center center,center center;
  background-size:auto,auto,auto,auto,cover,cover;
  isolation:isolate;
}

/* animated grid floor */
.bp-hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.22;
  background-image:
    linear-gradient(rgba(96,165,250,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.28) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 40%,black,transparent 85%);
  animation:bpGridDrift 26s linear infinite;
}
@keyframes bpGridDrift{
  from{background-position:0 0,0 0}
  to{background-position:56px 56px,56px 56px}
}

/* scanning light line */
.bp-hero::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.7),transparent);
  box-shadow:0 0 20px rgba(251,191,36,.5);
  animation:bpScan 6s linear infinite;
}
@keyframes bpScan{
  0%{top:-2%;opacity:0}
  12%{opacity:.8}
  88%{opacity:.8}
  100%{top:102%;opacity:0}
}

#bpHeroCanvas{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
}

.blob{
  position:absolute;border-radius:50%;filter:blur(60px);z-index:0;
  opacity:.55;mix-blend-mode:screen;
}
.blob-1{
  width:44vw;height:44vw;left:-8%;top:8%;
  background:radial-gradient(circle,var(--blue-500),transparent 70%);
  animation:bpFloat1 16s ease-in-out infinite;
}
.blob-2{
  width:34vw;height:34vw;right:-6%;top:28%;
  background:radial-gradient(circle,var(--gold-400),transparent 70%);
  opacity:.32;
  animation:bpFloat2 20s ease-in-out infinite;
}
.blob-3{
  width:38vw;height:38vw;left:28%;bottom:-14%;
  background:radial-gradient(circle,var(--indigo-600),transparent 70%);
  animation:bpFloat3 22s ease-in-out infinite;
}
.blob-ember{
  width:30vw;height:30vw;left:50%;top:38%;
  background:radial-gradient(circle,var(--ember-500),transparent 70%);
  opacity:.28;mix-blend-mode:screen;
  animation:bpFloat2 18s ease-in-out infinite reverse;
}
@keyframes bpFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vw,3vw) scale(1.08)}
}
@keyframes bpFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3vw,4vw) scale(1.1)}
}
@keyframes bpFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2vw,-3vw) scale(1.06)}
}

/* Ghost watermark raksasa di belakang nama sekolah — signature moment hero,
   senyap (stroke tipis, tanpa fill) supaya h1 asli tetap jadi fokus utama. */
.bp-hero-ghost{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:100%;text-align:center;z-index:2;pointer-events:none;user-select:none;
  overflow:hidden;
}
.bp-hero-ghost span{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(70px,14vw,220px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.08);
  white-space:nowrap;
}

.bp-hero-content{
  position:relative;z-index:5;
  text-align:center;color:#fff;max-width:760px;
}
.bp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Space Grotesk',monospace;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:22px;
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .1s forwards;
}
.bp-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold-400);
  box-shadow:0 0 14px var(--gold-400);
  animation:bpPulseDot 1.8s ease-in-out infinite;
}
@keyframes bpPulseDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}

.logo-badge{
  opacity:0;animation:bpPopIn .9s var(--ease-out) .05s forwards;
}
@keyframes bpPopIn{
  0%{opacity:0;transform:scale(.7) translateY(10px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

.bp-hero h1{
  font-size:clamp(30px,5vw,52px);
  font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin:0 0 14px;position:relative;z-index:5;
  background:linear-gradient(100deg,#fff 30%,var(--gold-300) 55%,#fff 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bpFadeUp .9s var(--ease-out) .2s forwards, bpShine 7s linear 1.2s infinite,
            bpGlitchIn 1s steps(1) 1.1s 1;
  opacity:0;
}
@keyframes bpFadeUp{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes bpShine{
  0%{background-position:0% 0}
  100%{background-position:-220% 0}
}
/* Kedipan "digital glitch" singkat sekali saat judul muncul — RGB-split halus,
   berhenti sendiri (bukan loop terus-menerus) supaya tidak norak/mengganggu. */
@keyframes bpGlitchIn{
  0%{text-shadow:none}
  8%{text-shadow:-2px 0 var(--ember-600),2px 0 var(--blue-400)}
  16%{text-shadow:2px 0 var(--ember-600),-2px 0 var(--blue-400)}
  24%{text-shadow:none}
  40%{text-shadow:-1.5px 0 var(--ember-600),1.5px 0 var(--blue-400)}
  48%{text-shadow:none}
  100%{text-shadow:none}
}

.bp-hero .npsn,.bp-hero .alamat{
  opacity:0;animation:bpFadeUp .8s var(--ease-out) forwards;
  font-size:14px;color:rgba(255,255,255,.72);margin:6px 0;
}
.bp-hero .npsn{animation-delay:.32s}
.bp-hero .alamat{animation-delay:.42s}

@keyframes bpSweep{
  0%{left:-60%}
  40%{left:130%}
  100%{left:130%}
}
@keyframes bpGlowPulse{
  0%,100%{box-shadow:0 10px 30px rgba(245,158,11,.4)}
  50%{box-shadow:0 10px 44px rgba(245,158,11,.65)}
}

/* ============================================================
   STATS — floating glass panel overlapping the hero
   ============================================================ */
.bp-stats-wrap{
  padding-top:0 !important;
  margin-top:clamp(-64px,-6vw,-40px);
  position:relative;z-index:6;
}
.bp-stats{
  max-width:1080px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;overflow:hidden;
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 60px rgba(10,15,40,.28);
}
.bp-stat{
  background:linear-gradient(180deg,rgba(16,26,66,.92),rgba(10,18,48,.92));
  padding:30px 18px;text-align:center;position:relative;
}
.bp-stat::before{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--grad-gold);opacity:.6;
}
.bp-stat .num{
  font-family:'Space Grotesk',monospace;
  font-size:clamp(28px,4vw,40px);font-weight:700;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.bp-stat .label{
  margin-top:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.bp-section{padding:96px 20px;position:relative}
.bp-section.bg-soft{background:var(--paper-100)}
.bp-inner{max-width:1180px;margin:0 auto}

.bp-section > h2,.bp-inner > h2{
  max-width:1180px;margin:0 auto 10px;
  font-size:clamp(26px,3.4vw,38px);font-weight:800;
  color:var(--ink-900);letter-spacing:-.01em;text-align:center;
  position:relative;
}
.section-sub{
  max-width:560px;margin:0 auto 52px;text-align:center;
  color:var(--ink-500);font-size:15px;line-height:1.7;
}

/* gold underline accent under section titles */
.bp-section > h2::after,.bp-inner > h2::after{
  content:"";display:block;width:56px;height:4px;margin:16px auto 0;
  border-radius:99px;background:var(--grad-gold);
}

/* ============================================================
   SAMBUTAN KEPALA SEKOLAH
   ============================================================ */
.bp-kepsek{
  max-width:920px;margin:0 auto;
  display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:center;
  padding:40px;border-radius:28px;overflow:hidden;position:relative;
  box-shadow:var(--shadow-soft);
  border:1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,rgba(59,130,246,.55),rgba(251,191,36,.55),rgba(34,211,238,.55)) border-box;
}
.bp-kepsek::before{
  content:"“";position:absolute;top:-10px;left:20px;
  font-family:Georgia,serif;font-size:140px;line-height:1;
  color:var(--paper-100);z-index:0;
}
.bp-kepsek-photo{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  position:relative;z-index:1;
  border:4px solid var(--paper-0);
  box-shadow:0 0 0 3px var(--gold-300),0 20px 40px rgba(15,23,42,.14);
}
.bp-kepsek-photo img{width:100%;height:100%;object-fit:cover}
.bp-kepsek-photo .placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:44px;background:var(--paper-100);
}
.bp-kepsek .quote{position:relative;z-index:1}
.bp-kepsek .teks{
  font-size:16.5px;line-height:1.85;color:var(--ink-700);font-style:italic;margin:0 0 18px;
}
.bp-kepsek .nama{font-weight:700;color:var(--ink-900);margin:0;font-size:16px}
.bp-kepsek .jabatan{
  color:var(--gold-400);filter:brightness(.75);
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin:2px 0 0;
}

/* ============================================================
   FASILITAS — grid with tilt + glow cards
   ============================================================ */
.bp-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;
}
.bp-card{
  background:#fff;border-radius:20px;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .12s linear,box-shadow .35s var(--ease-out);
  transform-style:preserve-3d;will-change:transform;
  position:relative;isolation:isolate;
}
/* animated gradient border — hanya terlihat saat hover, murah secara performa (1 pseudo-element) */
.bp-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--bp-angle,0deg),var(--blue-500),var(--gold-400),var(--cyan-400),var(--blue-500));
  opacity:0;transition:opacity .4s var(--ease-out);
  animation:bpBorderSpin 5s linear infinite paused;
}
.bp-card:hover::before{opacity:1;animation-play-state:running}
/* spotlight cursor-follow (posisi diset lewat --mx/--my via JS) */
.bp-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(96,165,250,.14),transparent 70%);
  opacity:0;transition:opacity .35s var(--ease-out);
}
.bp-card:hover::after{opacity:1}
@keyframes bpBorderSpin{to{--bp-angle:360deg}}
@property --bp-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.bp-card:hover{
  box-shadow:0 26px 50px rgba(37,60,140,.18);
}
.bp-card .img-wrap{
  height:170px;overflow:hidden;position:relative;
  border-radius:20px 20px 0 0;
}
.bp-card .img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.bp-card:hover .img-wrap img{transform:scale(1.08)}
.bp-card .img-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,18,48,.35));
  opacity:0;transition:opacity .35s;
}
.bp-card:hover .img-wrap::after{opacity:1}
.bp-card .body{padding:20px}
.bp-card .body h3{margin:0 0 8px;font-size:16.5px;font-weight:700;color:var(--ink-900)}
.bp-card .body p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-500)}

/* ============================================================
   PRESTASI — timeline-style glowing list
   ============================================================ */
.bp-prestasi-list{
  max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px;
  position:relative;
}
/* garis timeline — melewati titik tengah ikon trofi (padding kartu 20px + separuh lebar trofi 26px) */
.bp-prestasi-list::before{
  content:"";position:absolute;top:4px;bottom:4px;left:46px;width:2px;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(251,191,36,.55) 12%,rgba(251,191,36,.55) 88%,transparent);
}
.bp-prestasi-item{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
  position:relative;z-index:1;
}
.bp-prestasi-item:hover{
  transform:translateX(6px);
  border-color:rgba(251,191,36,.5);
  box-shadow:0 16px 36px rgba(37,60,140,.14);
}
.bp-prestasi-item .trophy{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-700));
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.25),0 0 0 5px #fff;
}
.bp-prestasi-item .info{flex:1;min-width:0}
.bp-prestasi-item .info h4{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--ink-900)}
.bp-prestasi-item .info p{margin:0;font-size:12.5px;color:var(--ink-500)}
.bp-prestasi-item .tingkat-badge{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:7px 14px;border-radius:999px;color:#8a5a00;
  background:linear-gradient(120deg,var(--gold-100),var(--gold-300));
}

/* ============================================================
   GURU — profile cards
   ============================================================ */
.bp-guru-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;
}
.bp-guru-card{
  background:#fff;border-radius:18px;padding:22px 16px;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
  position:relative;isolation:isolate;
}
.bp-guru-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--bp-angle,0deg),var(--gold-400),var(--blue-500),var(--cyan-400),var(--gold-400));
  opacity:0;transition:opacity .4s var(--ease-out);
  animation:bpBorderSpin 5s linear infinite paused;
}
.bp-guru-card:hover::before{opacity:1;animation-play-state:running}
.bp-guru-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(251,191,36,.12),transparent 70%);
  opacity:0;transition:opacity .35s var(--ease-out);
}
.bp-guru-card:hover::after{opacity:1}
.bp-guru-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(37,60,140,.16);
}
.bp-guru-photo{
  width:84px;height:84px;border-radius:50%;overflow:hidden;margin:0 auto 14px;
  padding:3px;background:var(--grad-blue);
}
.bp-guru-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #fff}
.bp-guru-photo .placeholder{
  width:100%;height:100%;border-radius:50%;background:var(--paper-100);
  display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid #fff;
}
.bp-guru-card h4{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--ink-900)}
.bp-guru-card p{margin:0;font-size:12px;color:var(--ink-500);line-height:1.5}

/* ============================================================
   CTA BANNER
   ============================================================ */
.bp-cta{
  position:relative;overflow:hidden;text-align:center;
  padding:96px 20px;color:#fff;
  background:var(--grad-hero);
}
.bp-cta::before{
  content:"";position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(circle,rgba(251,191,36,.9) 0 1.5px,transparent 2px);
  background-size:64px 64px;
  animation:bpGridDrift 30s linear infinite;
}
.bp-cta h2{
  position:relative;z-index:1;
  font-size:clamp(24px,3.2vw,34px);font-weight:800;max-width:640px;margin:0 auto 14px;
}
.bp-cta p{
  position:relative;z-index:1;
  max-width:520px;margin:0 auto 30px;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.7;
}
.btn-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14.5px;
  color:#3a2400;background:var(--grad-gold);
  box-shadow:0 16px 40px rgba(251,191,36,.35);
  transition:transform .2s var(--ease-out),box-shadow .3s var(--ease-out);
  will-change:transform;
}
.btn-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 50px rgba(251,191,36,.5)}

/* ============================================================
   FOOTER
   ============================================================ */
.bp-footer{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 60%);
  color:rgba(255,255,255,.68);
  padding:64px 20px 0;
}
.bp-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.5),rgba(96,165,250,.5),transparent);
}
/* glow dekoratif -- konsisten dengan blob di hero, tapi lebih redup supaya tidak
   bersaing dengan konten footer */
.bp-footer-glow{
  position:absolute;inset:auto 0 0 0;height:280px;pointer-events:none;z-index:0;
  background:
    radial-gradient(45% 80% at 15% 100%, rgba(59,130,246,.16), transparent 70%),
    radial-gradient(40% 80% at 85% 100%, rgba(251,191,36,.10), transparent 70%);
}
.bp-footer-inner{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bp-footer-logo{
  width:52px;height:52px;border-radius:14px;background:#fff;padding:8px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.bp-footer-logo img{width:100%;height:100%;object-fit:contain}
.bp-footer-name{color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;margin:0 0 6px;letter-spacing:.01em}
.bp-footer-tagline{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);max-width:320px}
.bp-footer-badge{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--gold-300);border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);
  padding:5px 12px;border-radius:100px;
}
.bp-footer-col h4{
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 18px;
}
.bp-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bp-footer-col a{
  color:rgba(255,255,255,.62);text-decoration:none;font-size:14px;
  transition:color .2s var(--ease-out),padding-left .2s var(--ease-out);
}
.bp-footer-col a:hover{color:var(--gold-300);padding-left:4px}
.bp-footer-contact li{font-size:13.5px;line-height:1.6;display:flex;gap:10px;color:rgba(255,255,255,.62)}
.bp-footer-contact .ic{flex-shrink:0}
.bp-footer-bottom{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;padding:22px 0 26px;
  text-align:center;font-size:12.5px;color:rgba(255,255,255,.4);
}
@media (max-width:760px){
  .bp-footer-inner{grid-template-columns:1fr;gap:32px;text-align:center}
  .bp-footer-logo{margin:0 auto 16px}
  .bp-footer-tagline{margin-left:auto;margin-right:auto}
  .bp-footer-col ul{align-items:center}
  .bp-footer-contact li{justify-content:center}
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-delay-1.in-view{transition-delay:.05s}
.reveal-delay-2.in-view{transition-delay:.14s}
.reveal-delay-3.in-view{transition-delay:.23s}
.reveal-delay-4.in-view{transition-delay:.32s}

/* ============================================================
   C. INTRO SINEMATIK — nama sekolah "ditulis tangan" (SVG stroke)
   ============================================================ */
body.bp-intro-active{overflow:hidden}
.bp-intro{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-950);
}
.bp-intro-svg,#bpIntroSvg{width:min(86vw,720px);height:auto;overflow:visible}
#bpIntroText{
  font-family:'Space Grotesk','Poppins',sans-serif;
  font-size:44px;font-weight:700;letter-spacing:.02em;
  fill:none;
  stroke:var(--gold-300);
  stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:bpIntroWrite 1.1s var(--ease-out) forwards, bpIntroFill .5s ease .95s forwards;
}
@keyframes bpIntroWrite{to{stroke-dashoffset:0}}
@keyframes bpIntroFill{to{fill:#fff;stroke:var(--gold-300)}}
.bp-intro-curtain{
  position:absolute;top:0;bottom:0;width:50%;background:var(--navy-950);z-index:1;
  transition:transform .7s var(--ease-out);
}
.bp-intro-curtain-l{left:0;transform:translateX(0)}
.bp-intro-curtain-r{right:0;transform:translateX(0)}
.bp-intro.bp-intro-open .bp-intro-curtain-l{transform:translateX(-100%)}
.bp-intro.bp-intro-open .bp-intro-curtain-r{transform:translateX(100%)}
.bp-intro{transition:opacity .5s ease}
.bp-intro.bp-intro-done{opacity:0;pointer-events:none}
/* FAILSAFE: kalau JS gagal jalan sama sekali (di-block, error, dll), overlay intro
   ini tidak boleh mengunci menu untuk selamanya. Animasi ini murni CSS, berjalan
   independen dari JS, dan hanya melepas klik setelah durasi intro biasanya selesai. */
@keyframes bpIntroFailsafe{to{opacity:0;pointer-events:none}}
.bp-intro{animation:bpIntroFailsafe 0.01s linear 4.5s forwards}

/* ============================================================
   D. COMMAND PALETTE — tekan "/" untuk lompat cepat
   ============================================================ */
/* PENTING: [hidden] harus ditulis eksplisit di sini. Tanpa baris ini, aturan
   ".bp-palette{display:flex}" di bawah selalu MENANG melawan default browser untuk
   atribut hidden (CSS buatan sendiri selalu mengalahkan CSS bawaan browser, walau
   spesifisitasnya sama) — akibatnya panel ini selalu tampil penuh 1 layar (transparan,
   tak kasat mata karena opacity:0, tapi tetap ada) menutupi & menelan SEMUA ketukan di
   seluruh halaman, termasuk tombol nav/hero/CTA yang jadi terlihat "tidak berfungsi". */
.bp-palette[hidden]{display:none}
.bp-palette{position:fixed;inset:0;z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.bp-palette-backdrop{position:absolute;inset:0;background:rgba(6,10,28,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.bp-palette.open .bp-palette-backdrop{opacity:1}
.bp-palette-box{
  position:relative;z-index:1;width:min(92vw,560px);
  background:rgba(14,20,48,.92);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  backdrop-filter:blur(18px) saturate(150%);
  transform:translateY(-14px) scale(.98);opacity:0;
  transition:transform .22s var(--ease-out),opacity .22s var(--ease-out);
  overflow:hidden;
}
.bp-palette.open .bp-palette-box{transform:translateY(0) scale(1);opacity:1}
.bp-palette-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.bp-palette-icon{color:var(--gold-300);font-size:15px}
.bp-palette-input{
  flex:1;background:none;border:none;outline:none;color:#fff;
  font-family:'Poppins',sans-serif;font-size:15px;
}
.bp-palette-input::placeholder{color:rgba(255,255,255,.4)}
.bp-palette-list{list-style:none;margin:0;padding:8px;max-height:320px;overflow-y:auto}
.bp-palette-list li{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  color:rgba(255,255,255,.86);font-size:14px;cursor:pointer;transition:background .15s;
}
.bp-palette-list li .ic{font-size:16px;flex:none}
.bp-palette-list li span:nth-child(2){flex:1}
.bp-palette-list li .go{opacity:.4;font-size:12px}
.bp-palette-list li.active,.bp-palette-list li:hover{background:rgba(251,191,36,.14)}

/* ============================================================
   A. COUNTDOWN PPDB REAL-TIME
   ============================================================ */
.bp-countdown-nav{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);
  font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;color:var(--gold-300);
}
.bp-countdown-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 8px var(--gold-400);animation:bpPulseDot 1.8s ease-in-out infinite}
@media (max-width:680px){.bp-countdown-nav{display:none}}

.bp-cd-caption{
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .95s forwards;
  margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.02em;
}
.bp-countdown-hero{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .78s forwards;
}
.bp-cd-unit{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:56px;padding:8px 6px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}
.bp-cd-num{font-family:'Space Grotesk',monospace;font-size:22px;font-weight:700;color:#fff;line-height:1}
.bp-cd-lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px}
.bp-cd-sep{color:var(--gold-300);font-weight:700;font-size:18px;margin-top:-14px}

/* ============================================================
   E. DRAG HINT — label kecil di atas topi 3D
   ============================================================ */
.bp-drag-hint{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);z-index:5;
  font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.6);
  padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;
  animation:bpDragHintBob 2.4s ease-in-out infinite;
}
.bp-drag-hint.visible{opacity:1;pointer-events:none}
.bp-drag-hint.hidden{opacity:0;transform:translateX(-50%) translateY(6px)}
@keyframes bpDragHintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}

/* ============================================================
   F. KINETIC SCROLL TYPOGRAPHY
   ============================================================ */
.bp-section > h2,.bp-inner > h2,.bp-cta h2{
  transform-origin:center;transition:transform .18s ease-out;will-change:transform;
}

/* ============================================================
   G. MICRO-CELEBRATION — percikan emas halus
   ============================================================ */
.bp-spark{
  position:fixed;z-index:1200;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gold-300) 60%,transparent 75%);
  box-shadow:0 0 8px rgba(251,191,36,.8);
  pointer-events:none;
  animation:bpSparkFly .7s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes bpSparkFly{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}
}

/* ============================================================
   B. PETA RADAR PRESTASI
   ============================================================ */
.bp-radar-wrap{
  max-width:920px;margin:0 auto 56px;
  display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center;
  background:linear-gradient(180deg,var(--navy-950),var(--navy-900));
  border-radius:28px;padding:28px;box-shadow:var(--shadow-soft);
}
.bp-radar-svg{width:100%;height:auto;max-height:480px}
.bp-radar-ring{fill:none;stroke:rgba(96,165,250,.22);stroke-width:1}
.bp-radar-axis{stroke:rgba(96,165,250,.12);stroke-width:1}
.bp-radar-ring-label{
  fill:rgba(255,255,255,.4);font-family:'Space Grotesk',monospace;
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;text-anchor:middle;
}
.bp-radar-core{fill:var(--gold-400)}
.bp-radar-dot{cursor:pointer;outline:none}
.bp-radar-dot-halo{fill:rgba(251,191,36,.18);transition:r .25s var(--ease-out),fill .25s}
.bp-radar-dot-core{fill:var(--gold-300);transition:r .25s var(--ease-out)}
.bp-radar-dot:hover .bp-radar-dot-halo,.bp-radar-dot:focus .bp-radar-dot-halo{r:11;fill:rgba(251,191,36,.3)}
.bp-radar-dot.active .bp-radar-dot-core{fill:#60a5fa;r:6}
.bp-radar-dot.active .bp-radar-dot-halo{r:13;fill:rgba(96,165,250,.32)}
.bp-radar-dot.fresh .bp-radar-dot-core{fill:#fff}
.bp-radar-detail{
  color:#fff;min-height:120px;display:flex;align-items:center;gap:14px;
}
.bp-radar-detail .hint{color:rgba(255,255,255,.5);font-size:13px;line-height:1.6;margin:0}
.bp-radar-detail-icon{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);
}
.bp-radar-detail-body h4{margin:0 0 4px;font-size:14.5px;font-weight:700;color:#fff}
.bp-radar-detail-body p{margin:0;font-size:12px;color:rgba(255,255,255,.6)}
.bp-radar-detail-body .tingkat{
  display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;color:#8a5a00;
  background:linear-gradient(120deg,var(--gold-100),var(--gold-300));
}

/* ============================================================
   SAPAAN DINAMIS + TINT WAKTU PENGUNJUNG
   ============================================================ */
.bp-greeting{
  margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--gold-300);opacity:0;animation:bpFadeUp .8s var(--ease-out) .05s forwards;
}
body.bp-time-pagi .bp-hero::before{filter:hue-rotate(6deg) brightness(1.05)}
body.bp-time-siang .bp-hero{
  background:
    radial-gradient(60% 55% at 22% 20%, rgba(96,165,250,.4), transparent 60%),
    radial-gradient(55% 50% at 82% 15%, rgba(251,191,36,.22), transparent 60%),
    radial-gradient(70% 60% at 60% 100%, rgba(67,56,202,.3), transparent 60%),
    var(--hero-photo-overlay), var(--hero-photo);
  background-repeat:no-repeat;
  background-position:center center,center center,center center,center center,center center,center center;
  background-size:auto,auto,auto,auto,cover,cover;
}
body.bp-time-sore .bp-hero{
  background:
    radial-gradient(60% 55% at 22% 20%, rgba(251,146,60,.3), transparent 60%),
    radial-gradient(55% 50% at 82% 15%, rgba(251,191,36,.28), transparent 60%),
    radial-gradient(70% 60% at 60% 100%, rgba(67,56,202,.35), transparent 60%),
    var(--hero-photo-overlay), var(--hero-photo);
  background-repeat:no-repeat;
  background-position:center center,center center,center center,center center,center center,center center;
  background-size:auto,auto,auto,auto,cover,cover;
}
body.bp-time-malam .bp-hero::before{opacity:.14}

/* ============================================================
   TOMBOL DENGARKAN SAMBUTAN (Web Speech API)
   ============================================================ */
.bp-speak-btn{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(251,191,36,.4);
  background:rgba(251,191,36,.08);color:#8a5a00;font-weight:700;font-size:12.5px;
  cursor:pointer;font-family:'Poppins',sans-serif;transition:background .25s,transform .2s;
}
.bp-speak-btn:hover{background:rgba(251,191,36,.18);transform:translateY(-2px)}
.bp-speak-btn.speaking{background:var(--grad-gold);color:#3a2400;border-color:transparent}

/* ============================================================
   TOGGLE AMBIENT AUDIO
   ============================================================ */
.bp-ambient-toggle{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(8,13,34,.72);backdrop-filter:blur(10px);
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(6,10,28,.3);
  transition:transform .2s var(--ease-out),background .25s;
}
.bp-ambient-toggle:hover{transform:translateY(-3px) scale(1.05);background:rgba(8,13,34,.9)}
.bp-ambient-toggle[aria-pressed="true"]{border-color:rgba(251,191,36,.6);box-shadow:0 0 0 4px rgba(251,191,36,.14)}

/* ============================================================
   COMMAND PALETTE — footer shortcuts
   ============================================================ */
.bp-palette-foot{
  display:flex;gap:16px;flex-wrap:wrap;padding:10px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:rgba(255,255,255,.4);
}
.bp-palette-foot kbd{
  display:inline-block;padding:1px 6px;margin-right:3px;border-radius:5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-family:'Space Grotesk',monospace;font-size:10.5px;color:rgba(255,255,255,.75);
}

/* ============================================================
   HIGHLIGHT KARTU GURU (dipicu klik ikon mapel 3D)
   ============================================================ */
.bp-guru-card.bp-guru-highlight{
  animation:bpGuruPulse 1.8s ease;
}
@keyframes bpGuruPulse{
  0%,100%{box-shadow:var(--shadow-card)}
  30%{box-shadow:0 0 0 4px rgba(251,191,36,.5),0 22px 44px rgba(37,60,140,.16)}
}

/* ============================================================
   RADAR — pulsa "prestasi terbaru" (tahun berjalan)
   ============================================================ */
.bp-radar-dot-pulse{
  fill:none;stroke:var(--gold-300);stroke-width:1.4;opacity:.8;
  animation:bpRadarPulse 1.8s ease-out infinite;
  transform-origin:center;transform-box:fill-box;
}
@keyframes bpRadarPulse{
  0%{r:4.2;opacity:.75}
  100%{r:15;opacity:0}
}

/* ============================================================
   EASTER EGG — toast rahasia + percikan jatuh
   ============================================================ */
.bp-egg-note{
  position:fixed;left:50%;bottom:70px;transform:translate(-50%,14px);z-index:1600;
  background:rgba(8,13,34,.92);color:#fff;border:1px solid rgba(251,191,36,.4);
  padding:13px 22px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 20px 50px rgba(0,0,0,.4);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s ease,transform .4s var(--ease-out);
  max-width:90vw;text-align:center;
}
.bp-egg-note.show{opacity:1;transform:translate(-50%,0)}
.bp-spark-egg{
  width:7px;height:7px;
  animation-name:bpSparkFall;animation-duration:2.2s;animation-timing-function:ease-in;animation-fill-mode:forwards;
}
@keyframes bpSparkFall{
  0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(340deg);opacity:0}
}

/* ============================================================
   HERO AIDA — tagline, trust bar, dual CTA
   ============================================================ */
.bp-tagline{
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .3s forwards;
  font-size:15.5px;color:rgba(255,255,255,.78);margin:0 0 4px;font-weight:500;
}
.bp-trust-bar{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:20px 0 4px;
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .48s forwards;
}
.bp-trust-chip{
  display:flex;align-items:baseline;gap:6px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.bp-trust-chip strong{
  font-family:'Space Grotesk',monospace;font-size:16px;font-weight:700;color:var(--gold-300);
}
.bp-trust-chip span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}

.bp-cta-group{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;
  opacity:0;animation:bpFadeUp .8s var(--ease-out) .62s forwards;
}
.bp-cta-primary{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-gold);color:#3a2400;font-weight:800;font-size:15px;
  padding:15px 34px;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 38px rgba(245,158,11,.42);
  transition:transform .25s var(--ease-out),box-shadow .3s var(--ease-out);
  animation:bpGlowPulse 2.6s ease-in-out 1.4s infinite;
  will-change:transform;
}
.bp-cta-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 48px rgba(245,158,11,.58)}
.bp-cta-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);
  animation:bpSweep 3.2s ease-in-out 1.6s infinite;
}
.bp-cta-ghost{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.85);font-weight:600;font-size:14px;text-decoration:none;
  padding:14px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  transition:background .25s,border-color .25s,transform .2s var(--ease-out);
}
.bp-cta-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

.bp-countdown-hero{margin-top:26px !important}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .bp-stats{grid-template-columns:repeat(2,1fr)}
  .bp-kepsek{grid-template-columns:1fr;text-align:center;padding:32px 24px}
  .bp-kepsek-photo{width:150px;margin:0 auto}
  .bp-section{padding:72px 18px}
  .bp-prestasi-list::before{display:none}
  .bp-radar-wrap{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bp-nav .brand span{display:none}
  .bp-prestasi-item{flex-wrap:wrap}
  .bp-prestasi-item .tingkat-badge{margin-left:70px}
  #bpIntroText{font-size:30px}
  .bp-cd-unit{min-width:46px;padding:6px 4px}
  .bp-cd-num{font-size:17px}
  .bp-trust-bar{gap:8px}
  .bp-trust-chip{padding:7px 12px}
  .bp-cta-group{flex-direction:column;width:100%}
  .bp-cta-primary,.bp-cta-ghost{width:100%;justify-content:center}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  body.beranda-body{cursor:auto}
  #bpCursorDot,#bpCursorRing,#bpProgress{display:none}
  .bp-card::before,.bp-guru-card::before{display:none}
  .bp-intro{display:none}
  .bp-spark{display:none}
  .bp-drag-hint{animation:none}
  .bp-radar-dot-pulse{display:none}
  .bp-egg-note{transition:none}
}