/* =========================================================================
   TAMPILAN HALAMAN JENJANG: TK / SD / SMP / SMA
   - Struktur halaman sama; setiap jenjang punya bahasa desain sendiri
       TK  : ceria & lembut (bentuk blob, gelembung, memantul)
       SD  : "buku tulis" (kertas kotak-kotak, stiker miring, garis putus-putus)
       SMP : modern & dinamis (potongan diagonal, gradasi, cincin)
       SMA : formal & elegan (sudut tegas, braket, penomoran, garis tipis)
   - Warna dan font TIDAK diubah: oranye #ff8c00 / #ff5722, biru #0d6efd, teks #374050, font Calibri.
   - Dimuat setelah Bootstrap, aktif hanya bila <body class="jp tema-xx">.
   ========================================================================= */

.jp {
    --o: #ff8c00;
    --o2: #ff5722;
    --od: #e67e00;
    --b: #0d6efd;
    --ink: #374050;
    --mut: #6c757d;
    --line: #e9ecef;
    --r: 20px;          /* radius kartu */
    --sh: 0 10px 30px rgba(55, 64, 80, .09);
    --sh-h: 0 22px 44px rgba(255, 140, 0, .22);
    font-family: 'Calibri', sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
.jp a, .jp a:hover { text-decoration: none; }
.jp img { max-width: 100%; }

/* ---------------------------------------------------------------------- */
/* 1. ANIMASI MASUK                                                        */
/* ---------------------------------------------------------------------- */
@keyframes jpNaik   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes jpZoom   { from { opacity: 0; transform: scale(.88); }       to { opacity: 1; transform: none; } }
@keyframes jpMelayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes jpPutar  { to { transform: rotate(360deg); } }
@keyframes jpGeser  { to { background-position: 200% 0; } }
@keyframes jpDenyut { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }

.jp-js .rv {
    opacity: 0;
    transition: opacity .7s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
    will-change: opacity, transform;
}
.jp-js .rv-up    { transform: translateY(34px); }
.jp-js .rv-kiri  { transform: translateX(-44px); }
.jp-js .rv-kanan { transform: translateX(44px); }
.jp-js .rv-zoom  { transform: scale(.9); }
.jp-js .rv.in    { opacity: 1; transform: none; }

/* animasi bawaan animate.css pada kartu fasilitas diganti reveal saat scroll */
.jp .fasilitas-item.animate__animated { animation: none !important; }

/* ---------------------------------------------------------------------- */
/* 2. NAVBAR                                                               */
/* ---------------------------------------------------------------------- */
.jp .navbar {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    backdrop-filter: saturate(1.5) blur(12px);
    transition: box-shadow .3s ease, background .3s ease;
}
.jp .navbar.nav-gulir { box-shadow: 0 8px 24px rgba(55, 64, 80, .12); }
.jp .navbar-nav .nav-link:not(.dropdown-toggle):not(.btn-orange-nav) { position: relative; }
.jp .navbar-nav .nav-link:not(.dropdown-toggle):not(.btn-orange-nav)::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--o), var(--o2));
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.jp .navbar-nav .nav-link:not(.dropdown-toggle):not(.btn-orange-nav):hover::after { transform: scaleX(1); }
.jp .navbar-nav .nav-link.btn-orange-nav {
    background: linear-gradient(135deg, var(--o), var(--o2)) !important;
    box-shadow: 0 6px 16px rgba(255, 140, 0, .38);
}
.jp .navbar-nav .nav-link.btn-orange-nav:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(230, 126, 0, .45); }
.jp .dropdown-menu { padding: 8px; border-radius: 16px; animation: jpNaik .25s ease both; }
.jp .dropdown-item { border-radius: 10px; }
.jp .navbar-brand img { transition: transform .4s ease; }
.jp .navbar-brand:hover img { transform: rotate(-4deg) scale(1.05); }

@media (max-width: 991.98px) {
    .jp .navbar-collapse { max-height: calc(100vh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .jp .navbar-nav { align-items: stretch !important; gap: 2px !important; animation: jpNaik .3s ease both; }
    .jp .navbar-nav .nav-link:not(.btn-orange-nav) { padding: 12px 4px !important; border-bottom: 1px solid var(--line); }
    .jp .navbar-nav .nav-link.btn-orange-nav { display: block !important; text-align: center; margin-top: 10px; padding: 12px 20px !important; }
    .jp .navbar-nav .nav-link:not(.dropdown-toggle):not(.btn-orange-nav)::after { display: none; }
    .jp .navbar .dropdown-menu { box-shadow: none; background: #f8f9fa; margin-bottom: 6px; }
}

/* ---------------------------------------------------------------------- */
/* 3. HERO                                                                 */
/* ---------------------------------------------------------------------- */
.jp .hero-area-full {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #fff !important;
}
.jp .hero-area-full > .container { position: relative; z-index: 2; }

.jp .hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.jp .hero-deco i { position: absolute; display: block; }

.jp .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 18px; padding: 7px 16px;
    font-size: .85rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: var(--od); background: rgba(255, 140, 0, .12);
    border: 1px solid rgba(255, 140, 0, .35);
    animation: jpNaik .7s .05s ease both;
}
.jp .hero-text-content h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.1;
    letter-spacing: .5px;
    animation: jpNaik .7s .15s ease both;
}
.jp .hero-text-content .lead { font-size: clamp(1.02rem, 1.7vw, 1.25rem); line-height: 1.65; animation: jpNaik .7s .28s ease both; }
.jp .hero-text-content > .d-flex { animation: jpNaik .7s .4s ease both; }
.jp .hero-text-content .btn { transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; }
.jp .hero-text-content .btn-outline-secondary { background: #fff; border-width: 2px; color: var(--ink); border-color: rgba(55, 64, 80, .35); }
.jp .hero-text-content .btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-3px); }

.jp .hero-image-wrapper {
    position: relative;
    max-width: 560px;
    margin-inline: auto;
    transform: translate(var(--tx, 0), var(--ty, 0));
    transition: transform .25s ease-out;
    animation: jpZoom .9s .1s cubic-bezier(.2, .8, .2, 1) both;
}
.jp .hero-img-custom {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------------- */
/* 4. JUDUL SECTION                                                        */
/* ---------------------------------------------------------------------- */
.jp .section-header h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: .5px; }
.jp .section-header .lead { max-width: 760px; margin-inline: auto; color: var(--mut); }
.jp .section-header.text-start .lead { margin-inline: 0; }

/* ---------------------------------------------------------------------- */
/* 5. TENTANG KAMI                                                         */
/* ---------------------------------------------------------------------- */
.jp #tentang-kami { box-shadow: none; }
.jp .tentang-kami-container { gap: clamp(28px, 5vw, 64px); }
.jp .tentang-kami-image { position: relative; flex: 0 0 42%; max-width: 440px; }
.jp .tentang-kami-image img { height: 400px; box-shadow: var(--sh); position: relative; z-index: 2; transition: transform .5s ease; }
.jp .tentang-kami-image:hover img { transform: scale(1.02); }
.jp .tentang-kami-content .lead { font-size: 1.12rem; line-height: 1.8; color: #4b5563; text-align: left; }

/* ---------------------------------------------------------------------- */
/* 6. LOKASI                                                               */
/* ---------------------------------------------------------------------- */
.jp .lokasi-content { border-radius: var(--r) !important; box-shadow: var(--sh) !important; }
.jp .lokasi-content > .d-flex { align-items: center !important; padding: 10px 0; }
.jp .lokasi-content > .d-flex > i {
    flex: 0 0 48px; width: 48px; height: 48px; margin-right: 16px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem !important; border-radius: 14px;
    background: rgba(255, 140, 0, .12);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.jp .lokasi-content > .d-flex:hover > i { background: var(--o); color: #fff !important; transform: rotate(-8deg) scale(1.08); }
.jp .lokasi-content p { overflow-wrap: anywhere; }
.jp .lokasi-map { border-radius: var(--r) !important; overflow: hidden; box-shadow: var(--sh) !important; min-height: 320px; }
.jp .lokasi-map iframe { width: 100%; height: 100% !important; min-height: 320px; border-radius: 0 !important; display: block; }
.jp .main-button { transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }

/* ---------------------------------------------------------------------- */
/* 7. PROGRAM                                                              */
/* ---------------------------------------------------------------------- */
.jp #program .row { counter-reset: prog; }
.jp #program .program-card-box {
    counter-increment: prog;
    position: relative;
    border-radius: var(--r);
    box-shadow: var(--sh);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.jp #program .program-card-box:hover { transform: translateY(-8px); box-shadow: var(--sh-h); }
.jp #program .program-img-wrapper-fixed { height: clamp(210px, 26vw, 290px); }
.jp #program .program-img-wrapper-fixed::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(55, 64, 80, 0) 55%, rgba(55, 64, 80, .45) 100%);
    opacity: .85; transition: opacity .4s ease;
}
.jp #program .program-img-wrapper-fixed::after {
    content: counter(prog, decimal-leading-zero);
    position: absolute; z-index: 2; left: 18px; bottom: 14px;
    font-size: 2rem; font-weight: 700; line-height: 1; color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.jp #program .program-card-body { padding: 26px 24px 24px; text-align: left; }
.jp #program .program-card-body h4 { font-size: 1.35rem; }
.jp #program .program-card-body a.text-orange { transition: gap .3s ease, color .3s ease; gap: 4px; }
.jp #program .program-card-box:hover a.text-orange { gap: 10px; color: var(--od) !important; }

/* ---------------------------------------------------------------------- */
/* 8. FASILITAS                                                            */
/* ---------------------------------------------------------------------- */
.jp .fasilitas-section { position: relative; }
.jp .fasilitas-section > .container { position: relative; z-index: 2; }
.jp .fasilitas-section .section-header .lead { color: rgba(255, 255, 255, .92); }
.jp .fasilitas-item { border-radius: var(--r); min-height: 170px; padding: 26px 16px; gap: 14px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.jp .fasilitas-icon-box { width: 68px; height: 68px; margin: 0 auto; transition: transform .4s ease, background .3s ease; }
.jp .fasilitas-item:hover .fasilitas-icon-box { transform: translateY(-3px) scale(1.12); }
.jp .fasilitas-item p { min-height: 0; }

/* ---------------------------------------------------------------------- */
/* 9. PENDAFTARAN (CTA)                                                    */
/* ---------------------------------------------------------------------- */
.jp #pendaftaran .row.g-0 { border-radius: calc(var(--r) + 6px) !important; box-shadow: var(--sh) !important; position: relative; }
.jp #pendaftaran img { transition: transform .8s ease; }
.jp #pendaftaran .row.g-0:hover img { transform: scale(1.05); }
.jp #pendaftaran h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.jp #pendaftaran .btn-orange-action { transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }

/* ---------------------------------------------------------------------- */
/* 10. BERITA, TESTIMONI, MITRA                                            */
/* ---------------------------------------------------------------------- */
.jp .news-section .card, .jp #testimoni .card { border-radius: var(--r) !important; }
.jp .news-section .card { transition: transform .35s ease, box-shadow .35s ease; }
.jp .news-section .card:hover { transform: translateY(-8px); box-shadow: var(--sh-h) !important; }
.jp .news-section .badge, .jp #testimoni .badge { letter-spacing: .3px; }
.jp .swiper-outer-wrapper { padding-inline: 4px; }
.jp .news-section .card .position-relative.overflow-hidden { background: linear-gradient(135deg, rgba(255, 140, 0, .18), rgba(13, 110, 253, .1)); }
.jp .partner-grid { gap: 28px 40px; }
.jp .partner-item { background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(55, 64, 80, .07); padding: 6px 20px; }
.jp .jenjang-card { border-radius: var(--r) !important; transition: transform .35s ease, box-shadow .35s ease; }
.jp .jenjang-card:hover { transform: translateY(-6px); box-shadow: var(--sh-h) !important; }

/* ---------------------------------------------------------------------- */
/* 11. TOMBOL MELAYANG                                                     */
/* ---------------------------------------------------------------------- */
.jp .floating-wa-btn { animation: jpDenyut 2.6s ease-in-out infinite; }
.jp .floating-wa-btn:hover { animation: none; }

/* =========================================================================
   TEMA TK : ceria, lembut, membulat
   ========================================================================= */
.tema-tk { --r: 30px; --sh: 0 12px 30px rgba(255, 140, 0, .13); }

.tema-tk .navbar { border-radius: 0 0 26px 26px; border-bottom: 3px solid rgba(255, 140, 0, .55); }
.tema-tk .hero-area-full {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 140, 0, .13) 0 90px, transparent 91px),
        radial-gradient(circle at 92% 84%, rgba(13, 110, 253, .09) 0 130px, transparent 131px),
        radial-gradient(rgba(255, 140, 0, .16) 2px, transparent 2.5px);
    background-size: auto, auto, 26px 26px;
}
.tema-tk .hero-eyebrow { border-radius: 999px; }
.tema-tk .hero-eyebrow i { animation: jpDenyut 1.8s ease-in-out infinite; }
.tema-tk .hero-text-content .btn-orange-action { border-radius: 999px !important; animation: tkLompat 2.4s 1.4s ease-in-out infinite; }
.tema-tk .hero-text-content .btn-orange-action:hover { animation: none; }
.tema-tk .hero-text-content .btn-outline-secondary { border-radius: 999px; }
@keyframes tkLompat { 0%, 100% { transform: translateY(0); } 8% { transform: translateY(-9px); } 16% { transform: translateY(0); } 22% { transform: translateY(-4px); } 28% { transform: translateY(0); } }

.tema-tk .hero-img-custom {
    border-radius: 58% 42% 55% 45% / 50% 55% 45% 50% !important;
    border: 8px solid #fff;
    box-shadow: 0 24px 50px rgba(255, 140, 0, .28) !important;
    animation: tkBlob 11s ease-in-out infinite;
}
.tema-tk .hero-image-wrapper::before {
    content: ''; position: absolute; z-index: 1; inset: -18px -22px 22px 22px;
    border: 4px dashed rgba(255, 140, 0, .55);
    border-radius: 45% 55% 42% 58% / 55% 45% 55% 45%;
    animation: jpPutar 34s linear infinite;
}
@keyframes tkBlob {
    0%, 100% { border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%; }
    33%      { border-radius: 44% 56% 42% 58% / 56% 44% 56% 44%; }
    66%      { border-radius: 52% 48% 60% 40% / 42% 58% 42% 58%; }
}
/* gelembung */
.tema-tk .hero-deco i { border-radius: 50%; animation: jpMelayang 6s ease-in-out infinite; }
.tema-tk .hero-deco i:nth-child(1) { width: 70px;  height: 70px;  left: 6%;  top: 14%; background: rgba(255, 140, 0, .22); }
.tema-tk .hero-deco i:nth-child(2) { width: 34px;  height: 34px;  left: 44%; top: 8%;  background: rgba(13, 110, 253, .18); animation-delay: -2s; }
.tema-tk .hero-deco i:nth-child(3) { width: 96px;  height: 96px;  right: 5%; top: 18%; border: 6px solid rgba(255, 140, 0, .28); animation-delay: -3s; }
.tema-tk .hero-deco i:nth-child(4) { width: 50px;  height: 50px;  left: 52%; bottom: 10%; background: rgba(255, 87, 34, .18); animation-delay: -1s; }
.tema-tk .hero-deco i:nth-child(5) { width: 26px;  height: 26px;  left: 4%;  bottom: 12%; border: 4px solid rgba(13, 110, 253, .25); animation-delay: -4s; }

.tema-tk .section-header h2::after {
    width: 76px; height: 12px; border-radius: 0; background: none;
    background-image: radial-gradient(circle, var(--o) 0 4px, transparent 4.5px);
    background-size: 19px 12px; background-repeat: repeat-x;
}
.tema-tk .section.bg-light { background-image: radial-gradient(rgba(255, 140, 0, .12) 1.6px, transparent 2px); background-size: 28px 28px; }
.tema-tk .tentang-kami-image img { border-radius: 42% 58% 46% 54% / 40% 40% 60% 60%; border: 7px solid #fff; box-shadow: 0 18px 40px rgba(255, 140, 0, .22); }
.tema-tk .tentang-kami-image::before {
    content: ''; position: absolute; z-index: 1; width: 62%; height: 62%; left: -16px; bottom: -16px;
    border-radius: 50%; background: rgba(255, 140, 0, .18);
}
.tema-tk .lokasi-content > .d-flex > i { border-radius: 50%; }

.tema-tk #program .program-card-box { border: 0; }
.tema-tk #program .program-card-box:hover { transform: translateY(-10px) rotate(-1deg); }
.tema-tk #program .program-img-wrapper-fixed { border-radius: 0 0 50% 50% / 0 0 26px 26px; }
.tema-tk #program .program-img-wrapper-fixed::after {
    content: '★'; left: auto; right: 18px; bottom: auto; top: 14px;
    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--o); font-size: 1.4rem; text-shadow: none;
    box-shadow: 0 6px 14px rgba(255, 140, 0, .45); animation: jpDenyut 2.4s ease-in-out infinite;
}

.tema-tk .fasilitas-section::before {
    content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 26px; z-index: 1;
    background: #f8f9fa;
    -webkit-mask: radial-gradient(circle at 25px 0, #000 24.5px, transparent 25px) 0 0 / 50px 26px repeat-x;
            mask: radial-gradient(circle at 25px 0, #000 24.5px, transparent 25px) 0 0 / 50px 26px repeat-x;
}
.tema-tk .fasilitas-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 8% 70%, rgba(255, 255, 255, .16) 0 60px, transparent 61px), radial-gradient(circle at 93% 30%, rgba(255, 255, 255, .14) 0 90px, transparent 91px);
}
.tema-tk .fasilitas-item { border-radius: 30px 30px 38px 38px; }
.tema-tk .fasilitas-icon-box { border-radius: 50%; background: rgba(255, 140, 0, .13); }
.tema-tk .fasilitas-item:hover .fasilitas-icon-box { animation: tkGoyang .6s ease; }
@keyframes tkGoyang { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 75% { rotate: 14deg; } }

.tema-tk #pendaftaran .btn-orange-action { border-radius: 999px !important; }
.tema-tk .partner-item { border-radius: 24px; }

/* =========================================================================
   TEMA SD : buku tulis, stiker, garis putus-putus
   ========================================================================= */
.tema-sd { --r: 16px; --sh: 0 8px 0 rgba(255, 140, 0, .16), 0 14px 26px rgba(55, 64, 80, .08); }

.tema-sd .navbar { border-bottom: 3px dashed rgba(255, 140, 0, .6); }
.tema-sd .hero-area-full {
    background-image:
        linear-gradient(rgba(13, 110, 253, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 110, 253, .07) 1px, transparent 1px);
    background-size: 30px 30px;
}
.tema-sd .hero-area-full::after {    /* garis margin buku tulis */
    content: ''; position: absolute; z-index: 1; left: clamp(14px, 4vw, 60px); top: 0; bottom: 0; width: 2px;
    background: rgba(255, 87, 34, .35); pointer-events: none;
}
.tema-sd .hero-eyebrow { border-radius: 6px; transform: rotate(-2deg); border-style: dashed; background: #fff8ec; }
.tema-sd .hero-text-content h1 { text-shadow: 3px 3px 0 rgba(255, 140, 0, .18); }
.tema-sd .hero-text-content .btn-orange-action { border-radius: 14px !important; box-shadow: 5px 5px 0 var(--od) !important; transition: transform .2s ease, box-shadow .2s ease; }
.tema-sd .hero-text-content .btn-orange-action:hover { transform: translate(3px, 3px) !important; box-shadow: 2px 2px 0 var(--od) !important; }
.tema-sd .hero-text-content .btn-outline-secondary { border-radius: 14px !important; border-style: dashed; }

.tema-sd .hero-image-wrapper { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(-2.5deg); }
.tema-sd .hero-img-custom { border-radius: 14px !important; border: 10px solid #fff; box-shadow: 0 16px 34px rgba(55, 64, 80, .22) !important; }
.tema-sd .hero-image-wrapper::before {
    content: ''; position: absolute; z-index: 1; inset: 18px -18px -18px 18px;
    border: 3px dashed var(--o); border-radius: 18px; background: rgba(255, 140, 0, .1);
}
.tema-sd .hero-image-wrapper::after {   /* selotip */
    content: ''; position: absolute; z-index: 3; top: -14px; left: 50%; width: 120px; height: 30px;
    transform: translateX(-50%) rotate(3deg);
    background: rgba(255, 140, 0, .55); border-left: 2px dashed rgba(255, 255, 255, .7); border-right: 2px dashed rgba(255, 255, 255, .7);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
.tema-sd .hero-deco i:nth-child(1) { width: 54px; height: 54px; left: 9%; top: 16%; background: rgba(255, 140, 0, .22); transform: rotate(18deg); animation: jpMelayang 7s ease-in-out infinite; }
.tema-sd .hero-deco i:nth-child(2) { width: 0; height: 0; right: 8%; top: 12%; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 42px solid rgba(13, 110, 253, .2); animation: jpMelayang 6s -2s ease-in-out infinite; }
.tema-sd .hero-deco i:nth-child(3) { width: 80px; height: 80px; right: 4%; bottom: 14%; border: 4px dashed rgba(255, 140, 0, .45); border-radius: 50%; animation: jpPutar 26s linear infinite; }
.tema-sd .hero-deco i:nth-child(4) { width: 30px; height: 30px; left: 46%; bottom: 8%; background: rgba(255, 87, 34, .22); border-radius: 6px; transform: rotate(-12deg); animation: jpMelayang 5s -1s ease-in-out infinite; }
.tema-sd .hero-deco i:nth-child(5) { width: 18px; height: 18px; left: 40%; top: 10%; border-radius: 50%; background: rgba(13, 110, 253, .25); animation: jpMelayang 8s -3s ease-in-out infinite; }

.tema-sd .section-header h2::after {
    width: 96px; height: 0; background: none; border-bottom: 4px dashed var(--o2); border-radius: 0;
}
.tema-sd .section.bg-light {
    background-image:
        linear-gradient(rgba(55, 64, 80, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 64, 80, .045) 1px, transparent 1px);
    background-size: 28px 28px;
}
.tema-sd .tentang-kami-image img { border: 9px solid #fff; border-radius: 12px; transform: rotate(2deg); box-shadow: 0 16px 34px rgba(55, 64, 80, .2); }
.tema-sd .tentang-kami-image:hover img { transform: rotate(0) scale(1.02); }
.tema-sd .tentang-kami-image::before {
    content: ''; position: absolute; z-index: 1; inset: 14px -14px -14px 14px; border: 3px dashed var(--o); border-radius: 14px;
}
.tema-sd .lokasi-content { border: 2px dashed rgba(255, 140, 0, .5) !important; }
.tema-sd .lokasi-content > .d-flex > i { border-radius: 12px; transform: rotate(-4deg); }

.tema-sd #program .program-card-box { border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(255, 140, 0, .45); }
.tema-sd #program .program-card-box:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 rgba(255, 140, 0, .6); }
.tema-sd #program .program-img-wrapper-fixed { border-bottom: 2px solid var(--ink); }
.tema-sd #program .program-img-wrapper-fixed::after {
    left: 0; bottom: auto; top: 18px; padding: 6px 16px 6px 14px; font-size: 1.15rem;
    background: var(--o); border-radius: 0 10px 10px 0; text-shadow: none; box-shadow: 3px 3px 0 var(--ink);
}

.tema-sd .fasilitas-section::before {
    content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 16px; z-index: 1;
    background: linear-gradient(135deg, #f8f9fa 25%, transparent 25%) -16px 0 / 32px 16px, linear-gradient(225deg, #f8f9fa 25%, transparent 25%) -16px 0 / 32px 16px;
}
.tema-sd .fasilitas-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 2px, transparent 2.5px); background-size: 24px 24px;
}
.tema-sd .fasilitas-item { border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
.tema-sd .fasilitas-item:nth-child(odd) { transform: rotate(-1.2deg); }
.tema-sd .fasilitas-item:nth-child(even) { transform: rotate(1.2deg); }
.tema-sd .fasilitas-item:hover { transform: translate(-3px, -3px) rotate(0); box-shadow: 8px 8px 0 var(--ink); }
.tema-sd .fasilitas-icon-box { border-radius: 14px; background: rgba(255, 140, 0, .14); border: 2px dashed var(--o); }

.tema-sd #pendaftaran .row.g-0 { border: 2px solid var(--ink) !important; box-shadow: 9px 9px 0 rgba(255, 140, 0, .5) !important; }
.tema-sd #pendaftaran .btn-orange-action { border-radius: 14px !important; box-shadow: 5px 5px 0 var(--od) !important; }
.tema-sd #pendaftaran .btn-orange-action:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--od) !important; }
.tema-sd .news-section .card { border: 2px solid var(--ink) !important; box-shadow: 6px 6px 0 rgba(255, 140, 0, .4) !important; }
.tema-sd .news-section .card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(255, 140, 0, .55) !important; }
.tema-sd .partner-item { border: 2px dashed rgba(55, 64, 80, .25); box-shadow: none; border-radius: 14px; }

/* =========================================================================
   TEMA SMP : modern, diagonal, gradasi
   ========================================================================= */
.tema-smp { --r: 18px; --sh: 0 14px 34px rgba(55, 64, 80, .1); }

.tema-smp .navbar::after {
    content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--o), var(--o2), var(--b), var(--o));
    background-size: 200% 100%; animation: jpGeser 7s linear infinite;
}
.tema-smp .hero-area-full {
    background-image:
        linear-gradient(115deg, rgba(255, 140, 0, .10) 0%, rgba(255, 140, 0, 0) 40%),
        linear-gradient(295deg, rgba(13, 110, 253, .09) 0%, rgba(13, 110, 253, 0) 38%);
}
.tema-smp .hero-area-full::after {   /* potongan diagonal bawah */
    content: ''; position: absolute; z-index: 1; left: 0; bottom: -1px; width: 100%; height: clamp(26px, 5vw, 70px);
    background: #f8f9fa; clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.tema-smp .hero-eyebrow { border-radius: 10px; border: 0; background: linear-gradient(90deg, rgba(255, 140, 0, .16), rgba(13, 110, 253, .1)); }
.tema-smp .hero-eyebrow i { color: var(--o2); }
.tema-smp .hero-text-content h1 { letter-spacing: 1px; }
.tema-smp .hero-text-content .btn-orange-action {
    border-radius: 12px !important; background: linear-gradient(135deg, var(--o), var(--o2)) !important;
    background-size: 160% 100% !important; position: relative; overflow: hidden;
}
.tema-smp .hero-text-content .btn-orange-action:hover { background-position: 100% 0 !important; }
.tema-smp .hero-text-content .btn-outline-secondary { border-radius: 12px !important; }

.tema-smp .hero-img-custom {
    clip-path: polygon(0 0, 100% 0, 100% 84%, 86% 100%, 0 100%);
    border-radius: 18px 18px 0 18px !important;
}
.tema-smp .hero-image-wrapper::before {
    content: ''; position: absolute; z-index: 1; inset: -14px 14px 14px -14px;
    background: linear-gradient(135deg, var(--o), var(--o2) 55%, var(--b));
    clip-path: polygon(0 0, 100% 0, 100% 84%, 86% 100%, 0 100%); border-radius: 18px; opacity: .9;
}
.tema-smp .hero-image-wrapper::after {   /* kartu kaca kecil */
    content: ''; position: absolute; z-index: 3; right: -10px; bottom: -14px; width: 92px; height: 92px;
    border-radius: 22px; background: rgba(255, 255, 255, .65); border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 28px rgba(55, 64, 80, .15);
    background-image: linear-gradient(135deg, rgba(255, 140, 0, .5), rgba(13, 110, 253, .35)); animation: jpMelayang 5s ease-in-out infinite;
}
.tema-smp .hero-deco i:nth-child(1) { width: 130px; height: 130px; left: -30px; top: 16%; border-radius: 50%; border: 18px solid rgba(255, 140, 0, .13); animation: jpMelayang 9s ease-in-out infinite; }
.tema-smp .hero-deco i:nth-child(2) { width: 22px; height: 22px; left: 46%; top: 12%; background: linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat, linear-gradient(currentColor, currentColor) center / 4px 100% no-repeat; color: rgba(13, 110, 253, .45); animation: jpPutar 14s linear infinite; }
.tema-smp .hero-deco i:nth-child(3) { width: 260px; height: 260px; right: -70px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 110, 253, .12), transparent 68%); }
.tema-smp .hero-deco i:nth-child(4) { width: 22px; height: 22px; left: 8%; bottom: 20%; background: linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat, linear-gradient(currentColor, currentColor) center / 4px 100% no-repeat; color: rgba(255, 140, 0, .6); animation: jpPutar 18s linear infinite reverse; }
.tema-smp .hero-deco i:nth-child(5) { width: 90px; height: 4px; right: 12%; bottom: 22%; border-radius: 4px; background: linear-gradient(90deg, var(--o), transparent); transform: rotate(-30deg); }

.tema-smp .section-header h2::after {
    width: 84px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--o), var(--o2), var(--b)); background-size: 200% 100%; animation: jpGeser 5s linear infinite;
}
.tema-smp .section.bg-light { background-image: radial-gradient(circle at 100% 0, rgba(255, 140, 0, .09), transparent 42%), radial-gradient(circle at 0 100%, rgba(13, 110, 253, .07), transparent 40%); }
.tema-smp .tentang-kami-image img { border-radius: 18px 18px 18px 80px; }
.tema-smp .tentang-kami-image::before {
    content: ''; position: absolute; z-index: 1; inset: -14px 14px 14px -14px; border-radius: 18px 18px 18px 80px;
    background: linear-gradient(135deg, var(--o), var(--b)); opacity: .85;
}
.tema-smp .lokasi-content > .d-flex > i { border-radius: 14px; background: linear-gradient(135deg, rgba(255, 140, 0, .18), rgba(13, 110, 253, .1)); }

.tema-smp #program .program-card-box { border: 0; }
.tema-smp #program .program-card-box::before {   /* aksen gradasi di sisi kiri */
    content: ''; position: absolute; z-index: 3; left: 0; top: 0; width: 5px; height: 0;
    background: linear-gradient(180deg, var(--o), var(--o2), var(--b)); transition: height .5s ease;
}
.tema-smp #program .program-card-box:hover::before { height: 100%; }
.tema-smp #program .program-img-wrapper-fixed { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); height: clamp(220px, 27vw, 300px); }
.tema-smp #program .program-card-body { padding-top: 20px; }
.tema-smp #program .program-img-wrapper-fixed::after {
    left: auto; right: 16px; bottom: 26px; padding: 4px 14px; font-size: 1.05rem; border-radius: 999px;
    background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.tema-smp .fasilitas-section { padding-top: 110px !important; padding-bottom: 110px !important; margin: 0 !important; clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%); }
.tema-smp .fasilitas-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .22), transparent 40%), radial-gradient(circle at 10% 90%, rgba(255, 87, 34, .35), transparent 45%);
}
.tema-smp .fasilitas-item { background: rgba(255, 255, 255, .95); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tema-smp .fasilitas-item::before {
    content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--o), var(--o2)); transform: scaleX(0); transition: transform .4s ease;
}
.tema-smp .fasilitas-item:hover::before { transform: scaleX(1); }
.tema-smp .fasilitas-icon-box { border-radius: 20px; background: linear-gradient(135deg, rgba(255, 140, 0, .16), rgba(13, 110, 253, .08)); }

.tema-smp #pendaftaran .row.g-0 { overflow: hidden; }
.tema-smp #pendaftaran .row.g-0::after {
    content: ''; position: absolute; z-index: 1; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, .18), transparent 68%); pointer-events: none;
}
.tema-smp #pendaftaran .btn-orange-action { border-radius: 12px !important; background: linear-gradient(135deg, var(--o), var(--o2)) !important; }
.tema-smp .news-section .card { border: 0 !important; }
.tema-smp .partner-item { border-radius: 14px; box-shadow: 0 8px 22px rgba(55, 64, 80, .08); }

/* =========================================================================
   TEMA SMA : formal, tegas, elegan
   ========================================================================= */
.tema-sma { --r: 6px; --sh: 0 14px 34px rgba(55, 64, 80, .1); }

.tema-sma .navbar { border-top: 4px solid var(--o); border-bottom: 1px solid var(--line); }
.tema-sma .navbar-nav .nav-link { letter-spacing: .8px; }
.tema-sma .navbar-nav .nav-link.btn-orange-nav { border-radius: 4px !important; }
.tema-sma .dropdown-menu { border-radius: 6px; border-top: 3px solid var(--o) !important; }
.tema-sma .dropdown-item { border-radius: 4px; }

.tema-sma .hero-area-full {
    background-image: linear-gradient(90deg, rgba(55, 64, 80, .035) 1px, transparent 1px);
    background-size: 120px 100%;
}
.tema-sma .hero-area-full::after {    /* bilah tipis di dasar */
    content: ''; position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, var(--ink) 0 34%, var(--o) 34% 60%, var(--o2) 60% 100%);
}
.tema-sma .hero-eyebrow { border-radius: 0; border: 0; border-left: 4px solid var(--o); padding-left: 14px; background: rgba(55, 64, 80, .05); color: var(--ink); letter-spacing: 2px; }
.tema-sma .hero-eyebrow i { color: var(--o); }
.tema-sma .hero-text-content h1 { text-transform: uppercase; letter-spacing: 3px; }
.tema-sma .hero-text-content .btn-orange-action { border-radius: 4px !important; letter-spacing: 1.5px; }
.tema-sma .hero-text-content .btn-orange-action::after { content: '\2192'; margin-left: 10px; display: inline-block; transition: transform .3s ease; }
.tema-sma .hero-text-content .btn-orange-action:hover::after { transform: translateX(6px); }
.tema-sma .hero-text-content .btn-outline-secondary { border-radius: 4px !important; text-transform: uppercase; letter-spacing: 1.2px; }

.tema-sma .hero-img-custom { border-radius: 4px !important; box-shadow: 0 24px 50px rgba(55, 64, 80, .25) !important; filter: saturate(1.05) contrast(1.02); }
.tema-sma .hero-image-wrapper::before, .tema-sma .hero-image-wrapper::after {   /* braket sudut */
    content: ''; position: absolute; z-index: 3; width: 25%; height: 25%; max-width: 110px; max-height: 110px; pointer-events: none;
    transition: all .5s ease;
}
.tema-sma .hero-image-wrapper::before { left: -14px; top: -14px; border-top: 5px solid var(--o); border-left: 5px solid var(--o); }
.tema-sma .hero-image-wrapper::after  { right: -14px; bottom: -14px; border-bottom: 5px solid var(--o2); border-right: 5px solid var(--o2); }
.tema-sma .hero-area-full:hover .hero-image-wrapper::before { left: -6px; top: -6px; }
.tema-sma .hero-area-full:hover .hero-image-wrapper::after  { right: -6px; bottom: -6px; }
.tema-sma .hero-deco i:nth-child(1) { width: 420px; height: 420px; right: -150px; top: -130px; border-radius: 50%; border: 1px solid rgba(255, 140, 0, .35); }
.tema-sma .hero-deco i:nth-child(2) { width: 300px; height: 300px; right: -80px; top: -60px; border-radius: 50%; border: 1px solid rgba(55, 64, 80, .14); }
.tema-sma .hero-deco i:nth-child(3) { width: 220px; height: 220px; left: -90px; bottom: -90px; border-radius: 50%; border: 1px solid rgba(255, 140, 0, .3); animation: jpDenyut 6s ease-in-out infinite; }
.tema-sma .hero-deco i:nth-child(4) { width: 64px; height: 4px; left: 6%; top: 16%; background: var(--o); }
.tema-sma .hero-deco i:nth-child(5) { width: 4px; height: 64px; right: 6%; bottom: 14%; background: var(--ink); opacity: .25; }

.tema-sma .section-header h2 { letter-spacing: 3px; }
.tema-sma .section-header h2::after { width: 64px; height: 3px; border-radius: 0; background: var(--o); box-shadow: 72px 0 0 -0px rgba(55, 64, 80, .18); transform: translateX(-68%); left: 50%; }
.tema-sma .section-header.text-start h2::after { transform: none; left: 0; }
.tema-sma .section.bg-light { background-image: linear-gradient(180deg, rgba(55, 64, 80, .03), transparent 120px); }
.tema-sma .tentang-kami-image img { border-radius: 4px; }
.tema-sma .tentang-kami-image::before {
    content: ''; position: absolute; z-index: 1; inset: 16px -16px -16px 16px; border: 3px solid var(--o); border-radius: 4px; transition: all .4s ease;
}
.tema-sma .tentang-kami-image:hover::before { inset: 8px -8px -8px 8px; }
.tema-sma .tentang-kami-content .lead { border-left: 4px solid var(--o); padding-left: 22px; }
.tema-sma .lokasi-content { border-top: 4px solid var(--o) !important; }
.tema-sma .lokasi-content > .d-flex > i { border-radius: 4px; }
.tema-sma .main-button { border-radius: 4px; letter-spacing: 1.5px; }

.tema-sma #program .program-card-box { border: 1px solid var(--line); border-bottom: 4px solid var(--o); }
.tema-sma #program .program-card-box:hover { transform: translateY(-8px); border-bottom-color: var(--o2); }
.tema-sma #program .program-img-wrapper-fixed::after { font-size: 3rem; font-weight: 700; left: 20px; bottom: 12px; opacity: .92; letter-spacing: 2px; }
.tema-sma #program .program-img-wrapper-fixed::before { background: linear-gradient(180deg, transparent 40%, rgba(55, 64, 80, .75)); }
.tema-sma #program .program-card-body h4 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.2rem; }

.tema-sma .jenjang-card { border: 1px solid var(--line) !important; border-top: 4px solid var(--o) !important; }
.tema-sma .jenjang-card:nth-child(2) { border-top-color: var(--b) !important; }
.tema-sma .jenjang-card:hover { transform: translateY(-8px); }
.tema-sma .jenjang-card .rounded-circle { border-radius: 6px !important; }

.tema-sma .fasilitas-section { counter-reset: fas; }
.tema-sma .fasilitas-section::before {
    content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, .45); pointer-events: none; z-index: 1;
}
.tema-sma .fasilitas-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 90px 100%;
}
.tema-sma .fasilitas-item { counter-increment: fas; border-radius: 4px; box-shadow: none; border-bottom: 4px solid var(--ink); }
.tema-sma .fasilitas-item::before {
    content: counter(fas, decimal-leading-zero); position: absolute; top: 10px; left: 14px;
    font-size: .8rem; font-weight: 700; letter-spacing: 2px; color: rgba(55, 64, 80, .4);
}
.tema-sma .fasilitas-item:hover { transform: translateY(-8px); border-bottom-color: var(--o2); box-shadow: 0 18px 30px rgba(55, 64, 80, .25); }
.tema-sma .fasilitas-icon-box { border-radius: 4px; border: 2px solid rgba(255, 140, 0, .55); transition: all .35s ease; }
.tema-sma .fasilitas-item:hover .fasilitas-icon-box { background: rgba(255, 140, 0, .12); transform: rotate(45deg) scale(1.05); }
.tema-sma .fasilitas-item:hover .fasilitas-icon-box i { transform: rotate(-45deg); }
.tema-sma .fasilitas-icon-box i { transition: transform .35s ease, color .3s ease; }

.tema-sma #pendaftaran .row.g-0 { border-radius: 6px !important; border-left: 6px solid var(--o) !important; }
.tema-sma #pendaftaran .btn-orange-action { border-radius: 4px !important; letter-spacing: 1.5px; }
.tema-sma .news-section .card { border: 1px solid var(--line) !important; border-bottom: 4px solid var(--o) !important; box-shadow: none !important; }
.tema-sma .news-section .badge { border-radius: 2px !important; text-transform: uppercase; letter-spacing: 1px; }
.tema-sma #testimoni .card { border: 1px solid var(--line) !important; border-top: 4px solid var(--o) !important; }
.tema-sma .partner-item { border-radius: 4px; box-shadow: none; border: 1px solid var(--line); }

/* =========================================================================
   RESPONSIF
   ========================================================================= */
/* ---------- Laptop kecil & tablet landscape ---------- */
@media (max-width: 1199.98px) {
    .jp .hero-area-full { min-height: auto !important; padding-top: 3rem !important; padding-bottom: 3.5rem !important; }
    .jp .tentang-kami-image img { height: 340px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    .jp .hero-area-full .row { text-align: center; row-gap: 2.5rem; }
    .jp .hero-text-content .d-flex { justify-content: center; }
    .jp .hero-image-wrapper { max-width: 460px; }
    .jp .hero-img-custom { aspect-ratio: 16 / 11; max-height: 340px; }
    .jp .hero-deco { opacity: .75; }

    .jp .tentang-kami-container { flex-direction: column; text-align: center; }
    .jp .tentang-kami-image { flex: none; width: 100%; max-width: 520px; }
    .jp .tentang-kami-image img { height: 300px; }
    .jp .tentang-kami-content .lead { text-align: left; }
    .tema-sma .tentang-kami-content .lead { text-align: left; }
    .jp .section-header.text-start { text-align: center !important; }

    .jp .fasilitas-item { min-height: 150px; }
    .tema-smp .fasilitas-section { padding-top: 90px !important; padding-bottom: 90px !important; clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%); }
    .jp #pendaftaran .col-lg-6.p-5 { padding: 2.2rem 1.6rem !important; }
    .jp #pendaftaran .col-lg-6.position-relative { min-height: 240px !important; }
    .tema-sd .hero-area-full::after { display: none; }
}

/* ---------- HP ---------- */
@media (max-width: 767.98px) {
    .jp .hero-area-full { padding-top: 2.2rem !important; padding-bottom: 3rem !important; }
    .jp .hero-image-wrapper { max-width: 100%; }
    .jp .hero-img-custom { max-height: 260px; }
    .jp .hero-text-content h1 { font-size: 2.3rem; }
    .jp .hero-text-content > .d-flex { flex-direction: column; gap: .75rem !important; }
    .jp .hero-text-content > .d-flex .btn { width: 100%; padding-top: 14px !important; padding-bottom: 14px !important; }
    .jp .hero-eyebrow { font-size: .78rem; padding: 6px 13px; }

    .jp .tentang-kami-image img { height: 240px; }
    .jp .lokasi-content { padding: 1.4rem !important; }
    .jp .lokasi-map, .jp .lokasi-map iframe { min-height: 280px; }
    .jp .lokasi-content .main-button { display: block; width: 100%; }
    .jp #program .program-card-body { padding: 22px 18px 20px; }
    .jp #program .program-img-wrapper-fixed { height: 210px; }
    .jp .fasilitas-section .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .jp .fasilitas-section .row > [class*="col-"] { width: 50%; }
    .jp .fasilitas-item { min-height: 140px; padding: 18px 10px; }
    .jp .fasilitas-item p { font-size: .92rem; }
    .jp .fasilitas-icon-box { width: 58px; height: 58px; }
    .jp .fasilitas-item i { font-size: 2.2rem; }
    .jp .news-section .d-flex.justify-content-between { gap: 14px; }
    .jp .partner-grid { gap: 14px 16px; }
    .jp .partner-item { padding: 4px 12px; }

    .tema-tk .hero-img-custom { border-width: 5px; }
    .tema-tk .hero-image-wrapper::before { inset: -10px -8px 10px 8px; }
    .tema-sd .hero-image-wrapper::before { inset: 12px -10px -12px 10px; }
    .tema-sd .hero-image-wrapper::after { width: 90px; height: 24px; }
    .tema-sd .fasilitas-item:nth-child(odd), .tema-sd .fasilitas-item:nth-child(even) { transform: none; }
    .tema-sd #program .program-card-box { box-shadow: 5px 5px 0 rgba(255, 140, 0, .45); }
    .tema-smp .hero-image-wrapper::after { width: 60px; height: 60px; right: -4px; bottom: -10px; border-radius: 16px; }
    .tema-smp .hero-image-wrapper::before { inset: -9px 9px 9px -9px; }
    .tema-smp .fasilitas-section { padding-top: 70px !important; padding-bottom: 70px !important; clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0 100%); }
    .tema-sma .hero-text-content h1 { letter-spacing: 1.5px; }
    .tema-sma .section-header h2 { letter-spacing: 1.5px; }
    .tema-sma .hero-image-wrapper::before { left: -8px; top: -8px; }
    .tema-sma .hero-image-wrapper::after { right: -8px; bottom: -8px; }
    .tema-sma .fasilitas-section::before { inset: 10px; }
    .tema-sma .tentang-kami-image::before { inset: 10px -10px -10px 10px; }
}

@media (max-width: 400px) {
    .jp .hero-text-content h1 { font-size: 2rem; }
}

@media (hover: none) {
    .jp .hero-image-wrapper { transform: none; }
    .tema-sd .hero-image-wrapper { transform: rotate(-2.5deg); }
}

/* ---------- Hormati pengaturan "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
    .jp *, .jp *::before, .jp *::after { animation: none !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}