/* =========================================================
   LANDING PAGE — Al Khoir Boyolali
   Gaya: ceria, playful, banyak lengkungan & elemen dekoratif
   sesuai mockup awal. Semua animasi dimatikan otomatis kalau
   pengguna mengaktifkan "reduce motion" di perangkatnya.
   ========================================================= */

.pub-body {
    background: linear-gradient(180deg, #BFE4FF 0%, #E8F4FF 22%, #F4F9FF 45%, #FFFFFF 100%);
    background-attachment: fixed;
    min-height: 100vh;
    padding: clamp(8px, 2vw, 22px);
}

/* Bungkus putih membulat seperti "kartu besar" di mockup */
.pub-shell {
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border-radius: clamp(18px, 3vw, 34px);
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(24, 68, 128, .16);
    position: relative;
}

/* ---------------- NAVBAR ---------------- */
.lp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(14px, 3vw, 30px);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(200, 220, 245, .7);
}

.lp-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lp-brand img.lockup { height: clamp(34px, 5vw, 52px); width: auto; }
.lp-brand img.seal { height: clamp(30px, 4.4vw, 46px); width: auto; }

.lp-nav-links { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.lp-nav-links a {
    color: #33475F; font-weight: 600; font-size: 14px; position: relative;
    padding: 4px 2px; white-space: nowrap;
}
.lp-nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: var(--color-primary); border-radius: 3px;
    transform: scaleX(0); transition: transform .25s ease;
}
.lp-nav-links a:hover { text-decoration: none; color: var(--color-primary); }
.lp-nav-links a:hover::after, .lp-nav-links a.active::after { transform: scaleX(1); }
.lp-nav-links a.active { color: var(--color-primary); }

.lp-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lp-btn-staff {
    background: transparent; color: var(--color-primary);
    border: 1.5px solid #BFDBFE; padding: 9px 18px; border-radius: 999px;
    font-weight: 700; font-size: 13px; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}
.lp-btn-staff:hover { background: var(--color-primary-light); border-color: var(--color-primary); text-decoration: none; color: var(--color-primary); }

/* Link "Login Staff" khusus di dalam menu hamburger mobile — di layar lebar
   sudah ada tombol .lp-btn-staff terpisah, jadi yang ini disembunyikan
   secara default dan hanya tampil saat menu hamburger aktif (lihat media query). */
.lp-nav-staff-mobile { display: none; }

.lp-btn-portal {
    background: linear-gradient(135deg, #FF4FA3, #E0338B);
    color: #fff; padding: 10px 20px; border-radius: 999px;
    font-weight: 700; font-size: 13.5px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(224, 51, 139, .34);
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-btn-portal:hover {
    color: #fff; text-decoration: none;
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(224, 51, 139, .45);
}

/* Tombol hamburger (muncul di layar kecil) */
.lp-burger {
    display: none; background: none; border: none; cursor: pointer;
    font-size: 24px; color: var(--color-primary); padding: 4px 8px; line-height: 1;
}

/* ---------------- HERO ---------------- */
.lp-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(20px, 4vw, 46px);
    padding: clamp(28px, 5vw, 58px) clamp(20px, 5vw, 56px) clamp(70px, 9vw, 110px);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 214, 92, .22), transparent 42%),
        linear-gradient(165deg, #EAF6FF 0%, #F7FBFF 60%, #fff 100%);
    /* CATATAN: sengaja TIDAK overflow:hidden di sini — maskot di .lp-hero-visual
       diposisikan meluber sedikit di kiri/kanan untuk efek melayang dinamis;
       overflow:hidden di sini akan memotongnya. .pub-shell di luar tetap
       overflow:hidden untuk menjaga sudut rounded, dan maskot masih berada
       jauh di dalam batas itu (lihat perhitungan offset di bawah). */
}

.lp-hero-text { position: relative; z-index: 2; }

.lp-hero-eyebrow {
    color: #FF4FA3; font-weight: 700; font-size: clamp(14px, 1.8vw, 17px);
    margin-bottom: 6px;
}

.lp-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 4.4vw, 46px);
    line-height: 1.12;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}
.lp-hero-title span { display: block; }
.lp-hero-title .l1 { color: #4CAF50; }
.lp-hero-title .l2 { color: #F5A623; }
.lp-hero-title .l3 {
    color: #2F80ED;
    /* efek outline putih tebal seperti di mockup */
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
    text-shadow: 0 4px 0 rgba(47, 128, 237, .16);
}

.lp-hero-desc {
    color: #56687E; font-size: clamp(13.5px, 1.5vw, 15.5px); line-height: 1.75;
    max-width: 470px; margin-bottom: 26px;
}
.lp-hero-desc b { color: #33475F; }

.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-btn-blue, .lp-btn-pink {
    padding: 13px 26px; border-radius: 999px; font-weight: 700;
    font-size: clamp(13px, 1.4vw, 14.5px); color: #fff;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-btn-blue { background: linear-gradient(135deg, #3D8FF5, #1B6FD8); box-shadow: 0 8px 20px rgba(47,128,237,.34); }
.lp-btn-pink { background: linear-gradient(135deg, #FF4FA3, #E0338B); box-shadow: 0 8px 20px rgba(224,51,139,.34); }
.lp-btn-blue:hover, .lp-btn-pink:hover { color: #fff; text-decoration: none; transform: translateY(-3px); }
.lp-btn-blue:hover { box-shadow: 0 12px 28px rgba(47,128,237,.46); }
.lp-btn-pink:hover { box-shadow: 0 12px 28px rgba(224,51,139,.46); }

/* Panggung foto + maskot */
.lp-hero-visual { position: relative; overflow: visible; }
.lp-hero-photo {
    border-radius: 26px; overflow: hidden;
    box-shadow: 0 16px 44px rgba(24, 68, 128, .22);
    aspect-ratio: 4/3;
}
.lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.lp-maskot {
    position: absolute; bottom: -28px; width: clamp(76px, 11vw, 124px);
    filter: drop-shadow(0 10px 16px rgba(24, 68, 128, .26));
    animation: lp-float 4.5s ease-in-out infinite;
    z-index: 3;
}
.lp-maskot.kiri { left: -8px; }
.lp-maskot.kanan { right: -6px; animation-delay: -2.2s; }

@keyframes lp-float {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* Elemen dekoratif melayang di hero */
.lp-dot {
    position: absolute; border-radius: 50%; opacity: .5;
    animation: lp-float 6s ease-in-out infinite;
    pointer-events: none;
}
.lp-dot.d1 { width: 16px; height: 16px; background: #FFD35C; top: 14%; left: 6%; }
.lp-dot.d2 { width: 11px; height: 11px; background: #FF7FBF; top: 30%; left: 46%; animation-delay: -1.5s; }
.lp-dot.d3 { width: 20px; height: 20px; background: #7FD3FF; bottom: 24%; left: 3%; animation-delay: -3s; }
.lp-dot.d4 { width: 13px; height: 13px; background: #A78BFA; top: 9%; right: 34%; animation-delay: -2s; }

/* Lengkungan bawah hero (efek "bukit"/awan) */
.lp-hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; }
.lp-hero-wave svg { width: 100%; height: clamp(44px, 6vw, 78px); display: block; }

/* ---------------- STRIP KEUNGGULAN ---------------- */
.lp-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 26px);
    background: #fff; border-radius: 22px;
    box-shadow: 0 10px 34px rgba(24, 68, 128, .1);
    padding: clamp(18px, 2.6vw, 26px) clamp(18px, 3vw, 32px);
    margin: -46px clamp(20px, 5vw, 56px) 0;
    position: relative; z-index: 6;
}
.lp-strip-item { display: flex; align-items: flex-start; gap: 12px; }
.lp-strip-item .ico {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 19px;
    transition: transform .25s ease;
}
.lp-strip-item:hover .ico { transform: rotate(-8deg) scale(1.08); }
.lp-strip-item strong { display: block; font-size: 14px; margin-bottom: 3px; color: #22364C; }
.lp-strip-item p { margin: 0; font-size: 12px; color: #6E829A; line-height: 1.55; }

/* ---------------- SECTION UMUM ---------------- */
.lp-section { padding: clamp(46px, 7vw, 78px) clamp(20px, 5vw, 56px); text-align: center; position: relative; }
.lp-section-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(22px, 3.2vw, 33px); color: #7C4DDB; margin: 0 0 8px;
}
.lp-section-title .spark { color: #FFC94D; }
.lp-section-sub { color: #6E829A; font-size: clamp(13px, 1.5vw, 15px); margin: 0 auto 40px; max-width: 560px; }

/* Animasi muncul saat di-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.tampil { opacity: 1; transform: none; }

/* ---------------- PROGRAM ---------------- */
.lp-program { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.lp-prog-card {
    border-radius: 24px; padding: 28px 20px 26px; text-align: center;
    position: relative; overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.lp-prog-card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(24,68,128,.16); }
.lp-prog-card .emoji {
    font-size: 42px; margin-bottom: 12px; display: block;
    transition: transform .35s ease;
}
.lp-prog-card:hover .emoji { transform: scale(1.16) rotate(-7deg); }
.lp-prog-card h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.lp-prog-card p { font-size: 12.8px; color: #61748C; line-height: 1.65; min-height: 62px; margin: 0 0 14px; }
.lp-prog-card .link {
    display: inline-block; padding: 9px 20px; border-radius: 999px;
    font-weight: 700; font-size: 12.5px; color: #fff;
    transition: transform .2s ease;
}
.lp-prog-card .link:hover { text-decoration: none; color: #fff; transform: translateX(4px); }

/* ---------------- MENGAPA MEMILIH ---------------- */
.lp-why-wrap { position: relative; }
.lp-why {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 24px);
    max-width: 860px; margin: 0 auto; position: relative; z-index: 2;
}
.lp-why-item { padding: 8px 6px; transition: transform .3s ease; }
.lp-why-item:hover { transform: translateY(-6px); }
.lp-why-item .ico {
    width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 14px;
    display: grid; place-items: center; font-size: 26px;
    background: linear-gradient(140deg, #E8F3FF, #D6EAFF);
    box-shadow: inset 0 -3px 0 rgba(47,128,237,.12);
    transition: transform .3s ease;
}
.lp-why-item:hover .ico { transform: rotate(8deg); }
.lp-why-item strong { display: block; font-size: 13.8px; margin-bottom: 6px; color: #22364C; }
.lp-why-item p { font-size: 12.3px; color: #6E829A; line-height: 1.6; margin: 0; }

/* Maskot dekoratif HANYA tampil di layar sangat lebar (>=1300px). Di lebar itu,
   .pub-shell sudah pasti mentok di max-width 1180px (angka TETAP, bukan relatif
   lagi), jadi ruang sisa di kiri-kanan grid 860px yang di-center bisa dihitung
   PASTI, bukan perkiraan seperti clamp() sebelumnya:
     1180 - 2x56 (padding section)   = 1068px ruang konten
     (1068 - 860) / 2                = 104px margin tiap sisi
     maskot lebar 70px + posisi 20px dari tepi = berhenti di 90px
   90px kurang dari 104px, jadi dijamin tidak pernah menimpa grid di lebar
   berapa pun, sebab setelah shell mentok, angka ini konstan dan tidak lagi
   ikut membesar mengikuti vw. Kalau masih ragu, cara paling aman adalah
   hapus blok media query di bawah ini agar maskot tidak pernah muncul. */
.lp-side-maskot {
    display: none; position: absolute; top: 50%; transform: translateY(-50%);
    width: 70px; opacity: .9; pointer-events: none; z-index: 1;
    animation: lp-float 5.5s ease-in-out infinite;
}
.lp-side-maskot.kiri { left: 20px; }
.lp-side-maskot.kanan { right: 20px; animation-delay: -2.5s; }

@media (min-width: 1300px) {
    .lp-side-maskot { display: block; }
}

/* ---------------- BANNER PPDB ---------------- */
.lp-ppdb {
    background: linear-gradient(135deg, #4C9DF7 0%, #2F80ED 55%, #6FB6FF 100%);
    border-radius: 30px; color: #fff; padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 44px);
    position: relative; overflow: hidden;
}
.lp-ppdb::before, .lp-ppdb::after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.12); pointer-events: none;
}
.lp-ppdb::before { width: 240px; height: 240px; top: -90px; right: -60px; }
.lp-ppdb::after { width: 170px; height: 170px; bottom: -80px; left: -50px; }
.lp-ppdb h3 { font-family: var(--font-display); font-size: clamp(21px, 3vw, 30px); margin: 0 0 4px; position: relative; }
.lp-ppdb .sub { opacity: .92; font-size: clamp(12.5px, 1.5vw, 15px); margin: 0 0 30px; position: relative; }

.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; position: relative; }
.lp-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.lp-step .bulat {
    width: 74px; height: 74px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-size: 30px; margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
    transition: transform .3s ease;
}
.lp-step:hover .bulat { transform: translateY(-6px) scale(1.06); }
.lp-step .no {
    position: absolute; top: -6px; left: 50%; margin-left: 16px;
    width: 26px; height: 26px; border-radius: 50%; color: #fff;
    display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
    border: 2.5px solid #fff;
}
.lp-step strong { font-size: 13.5px; }
.lp-step p { font-size: 11.5px; opacity: .9; margin: 5px 0 0; line-height: 1.5; }
/* garis penghubung antar langkah */
.lp-step:not(:last-child)::after {
    content: '→'; position: absolute; top: 26px; right: -12px;
    font-size: 20px; opacity: .55;
}

.lp-btn-white {
    background: #fff; color: #2F80ED; padding: 13px 30px; border-radius: 999px;
    font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18); position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-btn-white:hover { text-decoration: none; color: #1B5FC1; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.24); }

/* ---------------- FOOTER ---------------- */
.lp-footer-wave { line-height: 0; margin-top: -2px; }
.lp-footer-wave svg { width: 100%; height: clamp(40px, 5vw, 66px); display: block; }

.lp-footer { background: #EAF3FE; padding: clamp(30px, 4vw, 46px) clamp(20px, 5vw, 56px) 26px; }
.lp-footer-grid { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1fr; gap: clamp(18px, 3vw, 36px); }
.lp-footer h5 { font-size: 13.5px; margin: 0 0 12px; color: #22364C; }
.lp-footer p, .lp-footer li { font-size: 12.5px; color: #61748C; line-height: 1.85; }
.lp-footer ul { list-style: none; padding: 0; margin: 0; }
.lp-footer ul a { color: #61748C; }
.lp-footer ul a:hover { color: var(--color-primary); }
.lp-footer .kontak-item { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.lp-footer-social { display: flex; gap: 9px; margin-top: 14px; }
.lp-footer-social a {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 14px; transition: transform .2s ease;
}
.lp-footer-social a:hover { transform: translateY(-3px) scale(1.08); text-decoration: none; color: #fff; }

.lp-footer-bottom {
    background: #1B5FC1; color: #fff; padding: 14px clamp(20px, 5vw, 56px);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 12.5px;
}
.lp-footer-bottom .chips { display: flex; gap: 9px; flex-wrap: wrap; }
.lp-footer-bottom .chips a {
    background: rgba(255,255,255,.16); color: #fff; padding: 7px 15px; border-radius: 999px;
    font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
    transition: background .2s ease;
}
.lp-footer-bottom .chips a:hover { background: rgba(255,255,255,.3); text-decoration: none; }

/* Tombol WhatsApp mengambang */
.lp-wa-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25D366; color: #fff; display: grid; place-items: center;
    font-size: 26px; box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
    transition: transform .22s ease;
}
.lp-wa-float:hover { transform: scale(1.1); color: #fff; text-decoration: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .lp-strip { grid-template-columns: repeat(2, 1fr); }
    .lp-program { grid-template-columns: repeat(2, 1fr); }
    .lp-why { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    /* Navigasi jadi menu geser */
    .lp-burger { display: block; order: 3; }
    .lp-nav { flex-wrap: wrap; }
    .lp-nav-links {
        order: 4; width: 100%; flex-direction: column; align-items: stretch;
        gap: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    .lp-nav-links.buka { max-height: 340px; }
    .lp-nav-links a {
        padding: 12px 4px; border-bottom: 1px solid #EEF3FA; font-size: 15px;
    }
    .lp-nav-links a::after { display: none; }
    .lp-nav-staff-mobile { display: block; font-weight: 700; color: var(--color-primary) !important; }
    .lp-btn-staff { display: none; }
    .lp-btn-portal { font-size: 12.5px; padding: 9px 15px; }

    /* Hero jadi satu kolom, teks di atas gambar */
    .lp-hero { grid-template-columns: 1fr; text-align: center; padding-bottom: clamp(56px, 12vw, 92px); }
    .lp-hero-desc { margin-left: auto; margin-right: auto; }
    .lp-hero-cta { justify-content: center; }
    .lp-hero-visual { order: -1; margin-bottom: 26px; }
    .lp-maskot { width: clamp(66px, 17vw, 100px); bottom: -22px; }
    .lp-maskot.kiri { left: -8px; }
    .lp-maskot.kanan { right: -6px; }
    .lp-dot { display: none; }

    .lp-steps { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .lp-step:nth-child(2)::after { display: none; }
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
    .lp-side-maskot { display: none; }
}

@media (max-width: 560px) {
    .lp-strip { grid-template-columns: 1fr; margin-top: -32px; }
    .lp-program { grid-template-columns: 1fr; }
    .lp-why { grid-template-columns: repeat(2, 1fr); }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-step::after { display: none !important; }
    .lp-footer-grid { grid-template-columns: 1fr; }
    .lp-footer-bottom { flex-direction: column; text-align: center; }
    .lp-prog-card p { min-height: 0; }
    .lp-hero-title .l3 { -webkit-text-stroke: 1.4px #fff; }
}

/* Hormati preferensi pengguna yang sensitif terhadap gerakan */
@media (prefers-reduced-motion: reduce) {
    .lp-maskot, .lp-dot, .lp-side-maskot { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
}