/* =========================================================
   Website Wisata Pantai Lon Malang — stylesheet utama
   Tema warna berubah otomatis lewat class body.cuaca-* yang
   diisi server berdasarkan data cuaca real-time (lihat
   app/Services/WeatherService.php dan layouts/app.blade.php).
   ========================================================= */

:root {
    --font-judul: 'Fraunces', Georgia, serif;
    --font-teks: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius: 18px;
    --radius-kecil: 10px;
    --bayangan: 0 20px 45px -20px rgba(15, 35, 55, .35);
    --bayangan-kuat: 0 24px 50px -16px rgba(15, 35, 55, .45);
    --transisi: .25s cubic-bezier(.4, 0, .2, 1);

    /* Palet dasar (kondisi cerah adalah default) */
    --langit-1: #4fb4e8;
    --langit-2: #8fd7f4;
    --pasir: #fdeecb;
    --aksen: #ff9d3d;
    --aksen-gelap: #e07d1e;
    --teks-terang: #ffffff;
    --teks-gelap: #1c2b39;
    --laut-dalam: #0d3b52;
    --permukaan: #ffffff;
    --permukaan-alt: #f4f8fa;
    --garis: #e3ebee;
}

body.cuaca-berawan {
    --langit-1: #7f97a8;
    --langit-2: #b7c7d1;
    --pasir: #e9e2d3;
    --aksen: #4c8ba8;
    --aksen-gelap: #396c85;
    --laut-dalam: #2c4051;
}

body.cuaca-hujan {
    --langit-1: #33495e;
    --langit-2: #587189;
    --pasir: #cdd6da;
    --aksen: #6ec6d9;
    --aksen-gelap: #3f96ab;
    --laut-dalam: #17222c;
}

body.cuaca-badai {
    --langit-1: #1b2836;
    --langit-2: #37485a;
    --pasir: #b9c2c8;
    --aksen: #ffcf5c;
    --aksen-gelap: #d9a83a;
    --laut-dalam: #0c141c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-teks);
    color: var(--teks-gelap);
    background: var(--permukaan);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-judul); line-height: 1.15; margin: 0 0 .5rem; }

p { margin: 0 0 1rem; }

::selection { background: var(--aksen); color: #241505; }

.wadah {
    width: min(1120px, 92%);
    margin-inline: auto;
}

.wadah-sempit { width: min(760px, 92%); }

/* ---------- Lapisan langit animasi (dekorasi belakang, tidak intrusif) ---------- */
.langit-lapisan {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: .5;
}

.awan {
    position: absolute;
    width: 220px;
    height: 70px;
    background: #fff;
    border-radius: 100px;
    filter: blur(2px);
    opacity: .35;
    animation: melayang 60s linear infinite;
}
body.cuaca-hujan .awan, body.cuaca-badai .awan { opacity: .12; }
.awan-1 { top: 8%; left: -10%; animation-duration: 70s; }
.awan-2 { top: 18%; left: -30%; animation-duration: 95s; animation-delay: -20s; transform: scale(.7); }

@keyframes melayang {
    from { transform: translateX(0); }
    to { transform: translateX(140vw); }
}

.hujan-lapisan { display: none; }
body.cuaca-hujan .hujan-lapisan,
body.cuaca-badai .hujan-lapisan {
    display: block;
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255,255,255,.15) 0px,
        rgba(255,255,255,.15) 1px,
        transparent 1px,
        transparent 14px
    );
    animation: hujan-turun 0.4s linear infinite;
    opacity: .5;
}
@keyframes hujan-turun {
    from { background-position: 0 0; }
    to { background-position: -30px 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .awan, .hujan-lapisan { animation: none !important; }
}

/* ---------- Reveal-on-scroll (progressive enhancement, aman tanpa JS) ---------- */
.js .js-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}
.js .js-reveal.terlihat {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .js .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- "Bongkar pasang" beranda ----------
   Tiap potongan beranda mulai dari posisi acak: kelempar jauh, miring,
   mengecil, dan buram — kesannya berantakan — lalu satu per satu "dirakit"
   jatuh ke posisi rapinya dengan sedikit lenting di akhir, ditutup ombak
   putih di bawah hero yang naik paling terakhir sebagai penutup rakitan.

   Sengaja pakai CSS animation murni, BUKAN observer scroll seperti
   .js-reveal di atas: callback IntersectionObserver dijalankan pas tahap
   render frame, jadi untuk elemen yang dari awal sudah kelihatan (hero),
   posisi "berantakan"-nya nggak pernah sempat kegambar dan animasinya
   ke-skip total. Dengan @keyframes + animation-delay, urutan rakitannya
   dijamin selalu jalan tiap beranda dibuka, bahkan kalau JS gagal dimuat.

   animation-fill-mode: backwards (bukan both) dipakai supaya setelah
   animasi kelar nggak ada sisa filter/transform yang nempel — penting
   buat kartu cuaca & kartu fakta yang pakai backdrop-filter, karena
   filter sisa (walau blur(0)) bikin efek liquid glass-nya mati. */
.beranda .navbar { animation: rakitNavbar .75s cubic-bezier(.2,.85,.25,1.06) backwards; }
@keyframes rakitNavbar {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

.hero-masuk {
    animation-duration: .9s;
    animation-timing-function: cubic-bezier(.2,.85,.25,1.12);
    animation-fill-mode: backwards;
}
.hero-masuk-1 { animation-name: rakitLencana; animation-delay: .08s; }
.hero-masuk-2 { animation-name: rakitJudul;   animation-delay: .20s; }
.hero-masuk-3 { animation-name: rakitTeks;    animation-delay: .32s; }
.hero-masuk-4 { animation-name: rakitWidget;  animation-delay: .46s; }
.hero-masuk-5 { animation-name: rakitTombol;  animation-delay: .56s; }
.hero-masuk-6 { animation-name: rakitKartu;   animation-delay: .26s; }

@keyframes rakitLencana {
    from { opacity: 0; transform: translate(-120px,-64px) rotate(-14deg) scale(.66); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rakitJudul {
    from { opacity: 0; transform: translate(-150px,28px) rotate(-7deg) scale(.85); filter: blur(9px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rakitTeks {
    from { opacity: 0; transform: translate(115px,48px) rotate(5deg) scale(.9); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Dua yang di bawah ini elemen kaca — tanpa filter blur biar backdrop-filter
   liquid glass-nya tetap hidup selama terbang. */
@keyframes rakitWidget {
    from { opacity: 0; transform: translate(-90px,88px) rotate(-12deg) scale(.62); }
    to   { opacity: 1; transform: none; }
}
@keyframes rakitKartu {
    from { opacity: 0; transform: translate(160px,-76px) rotate(12deg) scale(.7); }
    to   { opacity: 1; transform: none; }
}
@keyframes rakitTombol {
    from { opacity: 0; transform: translate(65px,95px) rotate(8deg) scale(.78); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

.beranda .hero::after { animation: rakitOmbak .85s cubic-bezier(.2,.85,.25,1.04) .62s backwards; }
@keyframes rakitOmbak {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .beranda .navbar,
    .hero-masuk,
    .beranda .hero::after { animation: none !important; }
}

/* ---------- Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--garis);
    transition: box-shadow .25s ease, background .25s ease;
}
.navbar.navbar-mengambang {
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 30px -20px rgba(15,35,55,.5);
}
.navbar-dalam {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 0;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-judul);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--laut-dalam);
    transition: opacity .2s;
}
.navbar-brand:hover { opacity: .8; }
.navbar-brand-ikon { font-size: 1.3rem; }
.navbar-brand-logo { height: 2.9rem; width: auto; display: block; }
.navbar-menu { display: flex; gap: 1.75rem; align-items: center; }
.navbar-menu a { position: relative; font-weight: 500; font-size: .95rem; color: var(--teks-gelap); opacity: .75; transition: opacity .2s, color .2s; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.navbar-menu a:hover, .navbar-menu a.aktif { opacity: 1; color: var(--aksen-gelap); border-color: var(--aksen); }
.navbar-toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.navbar-toggle span { width: 22px; height: 2px; background: var(--laut-dalam); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
    .navbar-toggle { display: flex; }
    .navbar-menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        border-bottom: 1px solid var(--garis);
        box-shadow: 0 16px 30px -20px rgba(15,35,55,.4);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .navbar-menu.terbuka { max-height: 340px; }
    .navbar-menu a { width: 100%; padding: 1rem 6%; border-bottom: 1px solid var(--garis); border-left: 3px solid transparent; }
    .navbar-menu a.aktif { border-left-color: var(--aksen); background: var(--permukaan-alt); }
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(160deg, var(--langit-1), var(--langit-2) 55%, var(--pasir));
    background-size: cover;
    background-position: center;
    padding: 5.5rem 0 7rem;
    color: var(--teks-terang);
    position: relative;
    isolation: isolate;
    overflow: hidden; /* nampung elemen "hero-masuk" yang mulai dari posisi geser jauh */
    /* Hero sengaja dibikin tinggi (bukan sekadar setinggi isinya) supaya foto
       banner-nya kelihatan utuh. Foto aslinya 4:3, sedangkan banner itu jauh
       lebih lebar — kalau hero-nya pendek, background-size: cover terpaksa
       memotong bagian atas & bawah foto (pucuk cemara dan hamparan pasirnya
       hilang). Dengan hero setinggi ini + file foto yang sudah dilebarkan
       jadi 2:1, seluruh isi foto muat tanpa terpotong.
       display:grid + align-content:center dipakai (bukan flex) supaya .wadah
       di dalamnya tetap memakai lebar & margin auto-nya sendiri. */
    min-height: 88vh;
    display: grid;
    align-content: center;
}
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 70px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,40 C240,100 480,0 720,44 C960,88 1200,10 1440,44 L1440,100 L0,100 Z' fill='white'/></svg>");
    background-size: 100% 100%;
    pointer-events: none;
}
/* Satu kolom: kartu fakta di kanan sudah dihapus, jadi teks hero berdiri
   sendiri. Diberi max-width supaya barisnya tidak memanjang sampai tepi
   layar di monitor lebar (baris terlalu panjang bikin susah dibaca). */
.hero-dalam { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.hero-teks { max-width: 640px; }
.lencana {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.25); }
.hero-sub { font-size: clamp(1rem, 2.4vw, 1.1rem); max-width: 44ch; opacity: .96; }
.hero-aksi { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* "Liquid glass" ala iOS: blur kuat + saturasi diangkat (bikin warna di
   belakangnya kelihatan "meresap" ke kaca, bukan cuma buram rata), lapisan
   highlight tipis di atas buat kesan cahaya mantul di permukaan kaca, dan
   double-border (outer redup + inset terang) buat kesan tebal/melengkung. */
.widget-cuaca {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    /* Kaca gelap (bukan putih) supaya teks terang di dalamnya tetap kebaca
       di SEMUA foto hero — foto senja yang cerah bikin kaca putih jadi
       sama-sama terang, tulisannya ikut hilang. */
    background: linear-gradient(135deg, rgba(13,35,52,.62), rgba(13,35,52,.4) 60%, rgba(13,35,52,.54));
    border: 1px solid rgba(255,255,255,.34);
    padding: .75rem 1.25rem;
    border-radius: 1.15rem;
    /* Jarak lebih lega dari teks/foto di atasnya, biar kartunya kelihatan
       terpisah jelas, bukan numpuk/tabrakan sama elemen lain di foto hero. */
    margin: 1.6rem 0 .9rem;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        0 12px 34px rgba(8,28,44,.34),
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
    isolation: isolate;
}
.widget-cuaca::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    z-index: -1;
}
.widget-cuaca-ikon {
    font-size: 1.7rem;
    filter: drop-shadow(0 2px 3px rgba(8,28,44,.2));
}
.widget-cuaca-teks { display: flex; flex-direction: column; font-size: .85rem; }
.widget-cuaca-teks strong { font-size: 1rem; text-shadow: 0 1px 2px rgba(8,28,44,.15); }
.widget-cuaca-teks small { opacity: .88; }

@media (prefers-reduced-transparency: reduce) {
    .widget-cuaca { background: rgba(13,59,82,.75); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.hero-kartu {
    position: relative;
    background: linear-gradient(135deg, rgba(13,35,52,.5), rgba(13,35,52,.28) 60%, rgba(13,35,52,.4));
    border: 1px solid rgba(255,255,255,.32);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        var(--bayangan-kuat),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
    isolation: isolate;
}
.hero-kartu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
    z-index: -1;
}
.hero-kartu-baris { display: flex; align-items: flex-start; gap: .8rem; font-weight: 500; }
/* Ikon SVG garis, bukan emoji. flex:none supaya tidak ikut mengecil saat
   teksnya membungkus ke dua baris; margin-top kecil agar sejajar optis
   dengan baris pertama teks (align-items sengaja flex-start). */
.hero-kartu-ikon {
    flex: none;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    color: rgba(255,255,255,.9);
    filter: drop-shadow(0 1px 2px rgba(8,28,44,.4));
}

@media (prefers-reduced-transparency: reduce) {
    .hero-kartu { background: rgba(13,35,52,.85); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 900px) {
    .hero { padding: 3.5rem 0 5rem; }
    .hero-dalam { grid-template-columns: 1fr; }
    .hero-teks { max-width: none; }
}

/* Di layar potret (HP berdiri), foto hero 2:1 harus diperbesar banyak untuk
   menutupi layar yang jauh lebih tinggi daripada lebar — akibatnya foto
   tampak pecah. min-height dikecilkan supaya pembesarannya berkurang, dan
   titik fokusnya digeser ke atas agar garis langit & siluet orang tetap
   masuk frame, bukan cuma pasir. */
@media (max-width: 700px) and (orientation: portrait) {
    .hero {
        min-height: 58vh;
        padding: 2.5rem 0 4rem;
        background-position: center 38%;
    }
}

/* ---------- Tombol & chip ---------- */
.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    transition: transform var(--transisi), box-shadow var(--transisi), background var(--transisi);
    border: 2px solid transparent;
}
.tombol-utama { background: var(--aksen); color: #241505; box-shadow: 0 14px 26px -14px rgba(224,125,30,.7); }
.tombol-utama:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.4); }
.tombol-utama:active { transform: translateY(0); }
.tombol-luar { border-color: rgba(255,255,255,.7); color: #fff; }
.tombol-luar:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.tombol-utama-terang { background: #fff; color: var(--laut-dalam); }
.tombol-utama-terang:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.35); }

.chip {
    display: inline-block;
    padding: .55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--garis);
    font-size: .88rem;
    font-weight: 500;
    color: var(--teks-gelap);
    margin-right: .5rem;
    margin-bottom: .5rem;
    transition: background var(--transisi), color var(--transisi), border-color var(--transisi), transform var(--transisi);
}
.chip:hover { border-color: var(--aksen); color: var(--aksen-gelap); transform: translateY(-1px); }
.chip-aktif, .chip-aktif:hover { background: var(--laut-dalam); color: #fff; border-color: var(--laut-dalam); transform: none; }
.filter-baris { margin-bottom: 1.75rem; }

/* ---------- Sections umum ---------- */
.bagian { padding: 5rem 0; }
.bagian-alt { background: var(--permukaan-alt); }
.judul-bagian { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.judul-flex { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.teks-muted { color: #5a6b76; margin-top: -.25rem; margin-bottom: 2rem; }
.tautan-panah { font-weight: 600; color: var(--aksen-gelap); white-space: nowrap; transition: opacity var(--transisi); }
.tautan-panah:hover { opacity: .7; }

@media (max-width: 640px) {
    .bagian { padding: 3.25rem 0; }
}

.bagian-cerita { padding-top: 3.5rem; padding-bottom: 3.5rem; position: relative; }
.cerita-tata { display: grid; grid-template-columns: 1.4fr .8fr; gap: 3rem; align-items: start; }
.cerita-statistik { display: grid; gap: 1.1rem; position: relative; z-index: 3; }
.cerita-statistik div { background: #fff; border-radius: var(--radius-kecil); padding: 1.2rem 1.4rem; border: 1px solid var(--garis); box-shadow: var(--bayangan); transition: transform var(--transisi), box-shadow var(--transisi); }
.cerita-statistik div:hover { transform: translateY(-3px); box-shadow: var(--bayangan-kuat); }
.cerita-statistik strong { display: block; font-family: var(--font-judul); font-size: 1.8rem; color: var(--laut-dalam); }
.cerita-statistik span { font-size: .85rem; color: #5a6b76; }
@media (max-width: 860px) { .cerita-tata { grid-template-columns: 1fr; } }


/* ---------- Grids & kartu ---------- */
.grid-kartu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.kartu-fasilitas, .kartu-edukasi, .kartu-testimoni {
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--bayangan);
    transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi);
}
.kartu-fasilitas:hover, .kartu-edukasi:hover {
    transform: translateY(-6px);
    box-shadow: var(--bayangan-kuat);
    border-color: rgba(224,125,30,.3);
}
.ikon-emoji {
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--permukaan-alt), #fff);
    border: 1px solid var(--garis);
    margin-bottom: .9rem;
}
.kartu-fasilitas { overflow: hidden; }
.kartu-fasilitas-galeri { display: flex; gap: 2px; margin: -1.6rem -1.6rem 1.1rem; }
.kartu-fasilitas-galeri img {
    flex: 1 1 0;
    min-width: 0;
    height: 140px;
    object-fit: cover;
    cursor: zoom-in;
    transition: filter .2s ease;
}
.kartu-fasilitas-galeri img:hover,
.kartu-fasilitas-galeri img:focus-visible {
    filter: brightness(1.06);
    outline: none;
}
.kartu-fasilitas-atas { display: flex; align-items: flex-start; justify-content: space-between; }
.kartu-fasilitas { display: flex; flex-direction: column; }
.kartu-detail-tombol {
    margin-top: auto;
    padding-top: .9rem;
    align-self: flex-start;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    color: var(--aksen-gelap);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: gap .2s ease, opacity .2s ease;
}
.kartu-detail-tombol:hover, .kartu-detail-tombol:focus-visible { gap: .55rem; opacity: .8; outline: none; }
.kartu-detail-tombol span { transition: transform .2s ease; }
.kartu-detail-tombol:hover span, .kartu-detail-tombol:focus-visible span { transform: translateX(2px); }

/* ---------------------------------------------------------
   Lightbox foto: klik thumbnail di galeri fasilitas/wahana
   membesar dengan animasi "pop" dari posisi kotak aslinya,
   bukan fade biasa — thumbnail-nya sendiri tetap dibiarkan
   minimalis (lihat aturan di atas), efek "wah"-nya cuma pas
   dibesarkan.
   --------------------------------------------------------- */
body.lightbox-aktif, body.detail-aktif { overflow: hidden; }

/* ---------------------------------------------------------
   Modal detail kartu: teks di kartu sengaja dipotong singkat
   (lihat @php Str::limit di fasilitas/index.blade.php) supaya
   grid kartu tetap rapi & seragam tingginya; info lengkap +
   semua foto baru muncul di modal ini saat tombol "Lihat detail
   lengkap" dipencet. Animasinya "pop" dari tengah, ringan aja
   biar tetap kerasa profesional bukan norak.
   --------------------------------------------------------- */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 16, 24, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, background .3s ease, visibility 0s linear .3s;
}
.detail-overlay.detail-terbuka {
    opacity: 1;
    visibility: visible;
    background: rgba(10, 16, 24, .72);
    transition: opacity .3s ease, background .3s ease, visibility 0s linear 0s;
}
.detail-modal {
    background: var(--permukaan);
    border-radius: var(--radius);
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 1.8rem;
    padding-top: 3.4rem;
    position: relative;
    box-shadow: var(--bayangan-kuat);
    transform: scale(.92) translateY(14px);
    transition: transform .4s cubic-bezier(.22, .9, .16, 1);
}
.detail-overlay.detail-terbuka .detail-modal { transform: scale(1) translateY(0); }
.detail-tutup {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--permukaan-alt);
    color: var(--teks-gelap);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.detail-tutup:hover, .detail-tutup:focus-visible { background: var(--garis); outline: none; }
.detail-judul { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.detail-judul h3 { margin: 0; }
.kartu-fasilitas-galeri.detail-galeri {
    margin: 0 0 1.1rem;
    border-radius: var(--radius-kecil);
    overflow: hidden;
    flex-wrap: wrap;
}
.detail-galeri img { height: 220px; min-width: 160px; }

@media (prefers-reduced-motion: reduce) {
    .detail-overlay, .detail-modal { transition-duration: .01ms !important; }
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 16, 24, 0);
    transition: background .35s ease;
}
.lightbox-overlay.lightbox-terbuka { background: rgba(10, 16, 24, .88); }

.lightbox-gambar {
    position: fixed;
    display: block;
    object-fit: cover;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    border-radius: 4px;
    cursor: zoom-out;
    transition:
        top .45s cubic-bezier(.22, .9, .16, 1),
        left .45s cubic-bezier(.22, .9, .16, 1),
        width .45s cubic-bezier(.22, .9, .16, 1),
        height .45s cubic-bezier(.22, .9, .16, 1),
        border-radius .45s cubic-bezier(.22, .9, .16, 1),
        box-shadow .45s cubic-bezier(.22, .9, .16, 1);
}
.lightbox-overlay.lightbox-terbuka .lightbox-gambar {
    border-radius: var(--radius);
    box-shadow: var(--bayangan-kuat);
}

.lightbox-tutup {
    position: fixed;
    top: 1.1rem;
    right: 1.3rem;
    z-index: 2001;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s ease .1s, transform .3s ease .1s, background .2s ease;
}
.lightbox-overlay.lightbox-terbuka .lightbox-tutup { opacity: 1; transform: scale(1); }
.lightbox-tutup:hover, .lightbox-tutup:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }

@media (prefers-reduced-motion: reduce) {
    .lightbox-gambar, .lightbox-overlay, .lightbox-tutup { transition-duration: .01ms !important; }
}
.kartu-harga { font-weight: 600; color: var(--aksen-gelap); margin-top: .5rem; margin-bottom: 0; }
.catatan-status { font-size: .85rem; background: #fff4e0; border: 1px solid #f4dcad; padding: .5rem .7rem; border-radius: 8px; color: #7a5710; }

.status-lencana { font-size: .72rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.status-aktif { background: #e3f6ea; color: #1c7a41; }
.status-terbatas { background: #fff2df; color: #9a5b0a; }
.status-tidak_aktif { background: #fde3e3; color: #a32323; }

.kartu-edukasi { display: block; padding: 0; overflow: hidden; }
.kartu-edukasi-gambar { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s ease; }
.kartu-edukasi:hover .kartu-edukasi-gambar { transform: scale(1.06); }
.kartu-edukasi > .lencana-kecil,
.kartu-edukasi > h3,
.kartu-edukasi > p,
.kartu-edukasi > .tautan-panah { margin-left: 1.6rem; margin-right: 1.6rem; }
.kartu-edukasi > .lencana-kecil { margin-top: 1.6rem; }
.kartu-edukasi > p { margin-bottom: 0; }
.kartu-edukasi > .tautan-panah { display: block; margin-top: .6rem; margin-bottom: 1.6rem; }
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) { padding: 1.6rem; }
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > .lencana-kecil,
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > h3,
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > p,
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > .tautan-panah { margin-left: 0; margin-right: 0; }
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > .lencana-kecil { margin-top: 0; }
.kartu-edukasi:not(:has(.kartu-edukasi-gambar)) > .tautan-panah { margin-bottom: 0; }
.kartu-edukasi h3 { margin-top: .5rem; }

/* ---------- Galeri foto pendukung di halaman detail materi edukasi ---------- */
.galeri-materi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .9rem;
    margin: 1.8rem 0;
}
.galeri-materi-item {
    margin: 0;
    background: var(--permukaan-alt);
    border: 1px solid var(--garis);
    border-radius: var(--radius-kecil);
    overflow: hidden;
    box-shadow: var(--bayangan);
}
.galeri-materi-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.galeri-materi-item figcaption { padding: .5rem .6rem; font-size: .8rem; font-weight: 600; color: #33454f; text-align: center; }
.lencana-kecil {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    background: var(--permukaan-alt);
    color: var(--aksen-gelap);
    padding: .25rem .6rem;
    border-radius: 999px;
}

.kartu-testimoni p { font-style: italic; }
.testimoni-bintang { color: var(--aksen); letter-spacing: .1em; margin-bottom: .5rem; }

/* ---------- Galeri: kartu foto model overlay, caption menyatu di atas gambar ---------- */
.grid-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}
.kartu-galeri {
    position: relative;
    margin: 0;
    background: var(--laut-dalam);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--garis);
    box-shadow: var(--bayangan);
    transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, filter .35s ease;
}
.kartu-galeri:hover { transform: translateY(-6px); box-shadow: var(--bayangan-kuat); }
.kartu-galeri-gambar { aspect-ratio: 4/3; width: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
/* Fotonya sengaja TIDAK di-zoom sendiri saat disorot. Kalau foto ikut
   membesar di dalam bingkainya, yang terasa bergerak cuma fotonya saja
   sedangkan kotaknya diam. Dengan dihapus, seluruh kartu (kotak +
   foto + keterangan) membesar sebagai satu kesatuan. */
img.kartu-galeri-gambar { cursor: zoom-in; }

/* ---------- Galeri: kartu yang disorot "mendorong" tetangganya ----------
   Saat satu kartu disorot, kartu itu naik & membesar, dua tetangga
   persisnya menggeser menjauh, dan kartu lain mengecil serta meredup —
   jadi fokusnya jelas ke satu foto.

   Dipakai :has(), yang membaca kondisi "induk berisi anak yang disorot".
   Browser lama yang belum mendukung :has() cukup memakai efek hover
   sederhana di atas, jadi tidak ada yang rusak — hanya tanpa dorongan. */
.grid-galeri:has(.kartu-galeri:hover) .kartu-galeri {
    transform: scale(.95);
    filter: brightness(.78) saturate(.85);
}
.grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:has(+ .kartu-galeri:hover) {
    transform: translateX(-14px) scale(.96);
}
.grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:hover + .kartu-galeri {
    transform: translateX(14px) scale(.96);
}
.grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:hover {
    transform: translateY(-12px) scale(1.07);
    filter: none;
    z-index: 3;
    box-shadow: 0 28px 55px -18px rgba(15,35,55,.6);
}

@media (prefers-reduced-motion: reduce) {
    .grid-galeri:has(.kartu-galeri:hover) .kartu-galeri,
    .grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:hover,
    .grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:hover + .kartu-galeri,
    .grid-galeri:has(.kartu-galeri:hover) .kartu-galeri:has(+ .kartu-galeri:hover) {
        transform: none;
        filter: none;
    }
}
.kartu-galeri-gambar[data-placeholder="cerah"] { background: linear-gradient(140deg, #4fb4e8, #fdeecb); }
.kartu-galeri-gambar[data-placeholder="berawan"] { background: linear-gradient(140deg, #7f97a8, #e9e2d3); }
.kartu-galeri-gambar[data-placeholder="hujan"] { background: linear-gradient(140deg, #33495e, #6ec6d9); }
.kartu-galeri-gambar[data-placeholder="badai"] { background: linear-gradient(140deg, #1b2836, #37485a); }
.kartu-galeri-gambar[data-placeholder="umum"] { background: linear-gradient(140deg, #0d3b52, #4fb4e8); }
.kartu-galeri figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1.1rem .9rem;
    background: linear-gradient(0deg, rgba(6,20,30,.88), rgba(6,20,30,0));
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: flex-start;
    pointer-events: none;
}
.kartu-galeri figcaption small { font-weight: 400; color: rgba(255,255,255,.8); }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(155deg, var(--laut-dalam), #08283a); color: #fff; padding: 4rem 0; }
.cta-dalam { text-align: center; }
.cta h2 { color: #fff; }
.cta p { opacity: .85; max-width: 50ch; margin-inline: auto; }
.cta .tombol { margin-top: 1rem; }

/* ---------- Header halaman dalam ---------- */
.header-halaman { background: var(--permukaan-alt); padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--garis); }
.header-halaman h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.header-halaman p { max-width: 60ch; color: #5a6b76; }

/* ---------- Artikel edukasi ---------- */
.konten-artikel { font-size: 1.05rem; color: #33454f; }
.kotak-kaitan { background: var(--permukaan-alt); border-left: 4px solid var(--aksen); padding: 1.3rem 1.5rem; border-radius: var(--radius-kecil); margin: 1.5rem 0 2rem; }
.kotak-kaitan h3 { margin-top: 0; }

/* ---------- Kontak & Form ---------- */
.kontak-tata { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; }
.kontak-info h3 { font-size: 1rem; margin-top: 1.2rem; }
.kontak-info h3:first-child { margin-top: 0; }
.kontak-info a { color: var(--aksen-gelap); font-weight: 600; }
.kontak-info a:hover { text-decoration: underline; }
.form-kontak { display: grid; gap: 1rem; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--bayangan); }
.form-baris { display: grid; gap: .4rem; }
.form-baris label { font-weight: 600; font-size: .9rem; }
.form-baris input, .form-baris select, .form-baris textarea {
    font: inherit;
    padding: .75rem .95rem;
    border-radius: var(--radius-kecil);
    border: 1px solid var(--garis);
    background: var(--permukaan-alt);
    transition: border-color var(--transisi), background var(--transisi);
}
.form-baris input:focus, .form-baris select:focus, .form-baris textarea:focus { outline: 2px solid var(--aksen); outline-offset: 1px; background: #fff; border-color: var(--aksen); }
.form-error { color: #c23434; font-size: .82rem; }
@media (max-width: 860px) { .kontak-tata { grid-template-columns: 1fr; } }

.notifikasi-flash {
    background: #e3f6ea;
    color: #1c7a41;
    border: 1px solid #b9e6c8;
    padding: .9rem 1.2rem;
    border-radius: var(--radius-kecil);
    width: min(1120px, 92%);
    margin: 1.5rem auto 0;
    font-weight: 600;
}

/* ---------- Footer ---------- */
.footer { background: #0c1f2b; color: #cfe0e8; padding: 3.5rem 0 0; margin-top: 2rem; }
.footer-dalam { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-kolom h4 { color: #fff; font-family: var(--font-teks); font-size: .95rem; margin-bottom: .8rem; }
.footer-kolom a { display: block; padding: .3rem 0; opacity: .85; transition: opacity var(--transisi); }
.footer-kolom a:hover { opacity: 1; color: var(--aksen); }
.footer-bawah { border-top: 1px solid rgba(255,255,255,.1); padding: 1.2rem 0; font-size: .82rem; opacity: .7; }
@media (max-width: 760px) { .footer-dalam { grid-template-columns: 1fr; } }

/* ---------- Penyesuaian layar kecil tambahan ---------- */
@media (max-width: 480px) {
    .hero-aksi .tombol { width: 100%; }
    .hero-kartu { padding: 1.2rem; }
    .grid-kartu, .grid-galeri { gap: 1rem; }
}
/* ---------- Materi per bagian: teks lalu fotonya langsung di bawah ---------- */
.daftar-isi-materi { background: var(--permukaan-alt); border: 1px solid var(--garis); border-radius: var(--radius-kecil); padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: .92rem; }
.daftar-isi-materi strong { display: block; margin-bottom: .4rem; color: var(--laut-dalam); }
.daftar-isi-materi ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.daftar-isi-materi li { margin: .15rem 0; break-inside: avoid; }
.daftar-isi-materi li.kelompok { font-weight: 600; }
.daftar-isi-materi a { color: var(--aksen-gelap); }
.daftar-isi-materi a:hover { text-decoration: underline; }
@media (max-width: 560px) { .daftar-isi-materi ul { columns: 1; } }

.bagian-materi { margin: 0 0 1.6em; }
.bagian-materi-kelompok { margin-bottom: 1rem; padding-top: .6rem; border-top: 2px solid var(--garis); }
.judul-bagian-materi { color: var(--laut-dalam); margin: 0 0 .7rem; }
h2.judul-bagian-materi { font-size: clamp(1.35rem, 3vw, 1.7rem); }
h3.judul-bagian-materi { font-size: clamp(1.15rem, 2.5vw, 1.35rem); }
.bagian-materi .konten-artikel p { margin: 0 0 .9rem; line-height: 1.75; }

.foto-materi { display: grid; gap: .8rem; margin: 1rem 0 0; }
.foto-materi-2 { grid-template-columns: repeat(2, 1fr); }
.foto-materi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .foto-materi-3 { grid-template-columns: repeat(2, 1fr); } }
.foto-materi figure { margin: 0; border-radius: var(--radius-kecil); overflow: hidden; background: var(--permukaan-alt); border: 1px solid var(--garis); }
.foto-materi img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.foto-materi-1 img { aspect-ratio: auto; max-height: 460px; object-fit: cover; }
.foto-materi figcaption { padding: .5rem .75rem; font-size: .82rem; font-weight: 600; color: #33454f; }
@media (max-width: 480px) { .foto-materi-2 { grid-template-columns: 1fr; } }

/* ---------- Kuis ---------- */
.kuis { margin: 2.5rem 0 2rem; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 2rem); box-shadow: var(--bayangan); scroll-margin-top: 90px; }
.kuis-kepala h2 { margin: .5rem 0 .3rem; color: var(--laut-dalam); }
.kuis-kepala p { color: #5a6b76; margin: 0 0 1.2rem; }
.kuis-peringatan { background: #fdecec; color: #9b2424; border-radius: var(--radius-kecil); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.kuis-identitas { display: grid; grid-template-columns: 1.3fr .7fr 1.3fr; gap: .9rem; margin-bottom: 1.5rem; }
@media (max-width: 700px) { .kuis-identitas { grid-template-columns: 1fr; } }
.kuis-identitas .form-baris { min-width: 0; }
.kuis-identitas input { width: 100%; box-sizing: border-box; }
.kuis-jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kuis-daftar { list-style: none; counter-reset: soal; padding: 0; margin: 0; display: grid; gap: 1rem; }
.kuis-soal { counter-increment: soal; background: var(--permukaan-alt); border: 1px solid var(--garis); border-radius: var(--radius-kecil); padding: 1rem 1.1rem; }
.kuis-soal fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kuis-soal legend, .hasil-pertanyaan { font-weight: 600; margin: 0 0 .7rem; padding: 0; line-height: 1.5; }
.kuis-soal legend::before, .hasil-pertanyaan::before { content: counter(soal) ". "; color: var(--aksen-gelap); }
.kuis-opsi { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .75rem; margin-top: .45rem; border: 1px solid var(--garis); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.kuis-opsi:hover { border-color: var(--aksen); }
.kuis-opsi input { position: absolute; opacity: 0; pointer-events: none; }
.kuis-opsi:has(input:checked) { border-color: var(--aksen-gelap); background: #fff6ec; }
.kuis-opsi:has(input:focus-visible) { outline: 2px solid var(--aksen); outline-offset: 2px; }
.kuis-huruf { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--permukaan-alt); border: 1px solid var(--garis); color: var(--laut-dalam); }
.kuis-opsi:has(input:checked) .kuis-huruf { background: var(--aksen); border-color: var(--aksen); color: #241505; }
.kuis-aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.kuis-progres { font-size: .88rem; color: #5a6b76; }

.hasil-skor { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); margin-bottom: 2rem; background: #fff6ec; border: 1px solid #f6d3ad; }
.hasil-skor.lulus { background: #e8f7ee; border-color: #b8e2c6; }
.hasil-skor h2 { margin: 0 0 .2rem; }
.hasil-skor p { margin: 0; color: #4a5b66; }
.hasil-angka { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; box-shadow: var(--bayangan); }
.hasil-angka strong { font-family: var(--font-judul); font-size: 2.4rem; line-height: 1; color: var(--laut-dalam); }
.hasil-angka span { font-size: .8rem; color: #5a6b76; }
@media (max-width: 520px) { .hasil-skor { flex-direction: column; text-align: center; } }
.hasil-soal { position: relative; border-left-width: 4px; }
.hasil-soal.benar { border-left-color: #2f9e5b; }
.hasil-soal.salah { border-left-color: #d04545; }
.hasil-status { font-size: .8rem; font-weight: 700; margin-bottom: .35rem; }
.hasil-soal.benar .hasil-status { color: #2f9e5b; }
.hasil-soal.salah .hasil-status { color: #d04545; }
.hasil-opsi { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.hasil-opsi li { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--garis); }
.hasil-opsi li em { margin-left: auto; font-size: .75rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.hasil-opsi li.kunci { border-color: #7ccf9c; background: #eefaf2; }
.hasil-opsi li.kunci em { color: #2f9e5b; }
.hasil-opsi li.kunci .kuis-huruf { background: #2f9e5b; border-color: #2f9e5b; color: #fff; }
.hasil-opsi li.dipilih-salah { border-color: #eaa2a2; background: #fdf0f0; }
.hasil-opsi li.dipilih-salah em { color: #d04545; }
.hasil-opsi li.dipilih-salah .kuis-huruf { background: #d04545; border-color: #d04545; color: #fff; }
.hasil-pembahasan { margin-top: .7rem; padding: .7rem .85rem; background: #fff; border-radius: 10px; border: 1px dashed var(--garis); font-size: .93rem; line-height: 1.6; }
.kartu-edukasi .jumlah-soal { display: inline-block; margin-left: .35rem; }

/* ---------- Media di soal kuis (gambar & video YouTube) ---------- */
.kuis-media-gambar { margin: 0 0 .8rem; }
.kuis-media-gambar img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; border: 1px solid var(--garis); background: #fff; cursor: zoom-in; }
.kuis-media-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 .8rem; border-radius: 10px; overflow: hidden; background: #000; }
.kuis-media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kuis-opsi-isi { display: grid; gap: .4rem; min-width: 0; }
.kuis-opsi-isi img { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; object-fit: contain; background: #fff; }
.kuis-pilihan-bergambar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .6rem; }
@media (max-width: 520px) { .kuis-pilihan-bergambar { grid-template-columns: 1fr; } }
.hasil-opsi .kuis-opsi-isi img { max-height: 110px; }

/* ---------- Soal uraian (esai) ---------- */
.kuis-soal-esai .kuis-label-esai { font-size: .76rem; font-weight: 700; color: var(--aksen-gelap); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.kuis-soal-esai .kuis-pertanyaan { font-weight: 600; line-height: 1.55; margin: 0 0 .7rem; }
.kuis-soal-esai .kuis-pertanyaan::before { content: counter(soal) ". "; color: var(--aksen-gelap); }
.kuis-soal-esai textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .97rem; padding: .8rem .9rem; border-radius: var(--radius-kecil); border: 1px solid var(--garis); background: #fff; resize: vertical; }
.kuis-soal-esai textarea:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: var(--aksen); }
.kuis-catatan { font-size: .82rem; color: #5a6b76; flex-basis: 100%; }
.hasil-skor.menunggu { background: #eef4f8; border-color: #c6d9e6; }
.hasil-soal-esai { border-left-color: #4c8ba8; }
.hasil-soal-esai .hasil-status { color: #2f6f8c; }
.hasil-soal-esai .hasil-pertanyaan { font-weight: 400; }
.hasil-soal-esai .hasil-pertanyaan::first-line { font-weight: 700; }
.hasil-jawaban-siswa { background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: .7rem .85rem; margin-bottom: .6rem; font-size: .95rem; }
.hasil-jawaban-siswa p { margin: .3rem 0 0; }
.hasil-catatan { background: #fff6ec; border-radius: 10px; padding: .6rem .8rem; font-size: .92rem; margin-bottom: .6rem; }
.hasil-rubrik { margin-top: .6rem; font-size: .9rem; }
.hasil-rubrik summary { cursor: pointer; font-weight: 600; color: var(--aksen-gelap); }
.hasil-rubrik div { margin-top: .5rem; background: #fff; border: 1px dashed var(--garis); border-radius: 10px; padding: .7rem .85rem; line-height: 1.6; }

/* =======================================================================
   TAMPILAN "APLIKASI" — hero baru, menu bawah di HP, gerak per layar,
   dan dukungan dipasang ke layar utama (PWA).
   ======================================================================= */

/* ---------- Navbar menyatu dengan foto di beranda ---------- */
body.beranda .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
body.beranda .navbar .navbar-brand,
body.beranda .navbar-menu a { color: #fff; }
body.beranda .navbar-menu a { opacity: .88; }
body.beranda .navbar-menu a:hover,
body.beranda .navbar-menu a.aktif { color: #fff; opacity: 1; border-color: var(--aksen); }
body.beranda .navbar-toggle span { background: #fff; }
/* logo diberi bayangan tipis supaya tetap terbaca di atas foto gelap */
body.beranda .navbar-brand-logo { filter: drop-shadow(0 2px 7px rgba(0,0,0,.55)); }
@media (max-width: 860px) { .navbar-brand-logo { height: 2.5rem; } }
body.beranda .navbar.navbar-mengambang .navbar-brand-logo { filter: none; }
/* Begitu halaman digeser, navbar berubah jadi panel putih biasa supaya teks tetap terbaca */
body.beranda .navbar.navbar-mengambang {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom-color: var(--garis);
}
body.beranda .navbar.navbar-mengambang .navbar-brand { color: var(--laut-dalam); }
body.beranda .navbar.navbar-mengambang .navbar-menu a { color: var(--teks-gelap); }
body.beranda .navbar.navbar-mengambang .navbar-menu a:hover,
body.beranda .navbar.navbar-mengambang .navbar-menu a.aktif { color: var(--aksen-gelap); }
body.beranda .navbar.navbar-mengambang .navbar-toggle span { background: var(--laut-dalam); }

/* ---------- Hero versi baru ---------- */
.hero-app {
    padding: 7rem 0 0;
    min-height: 88vh;
    min-height: 100svh;   /* 100svh = tinggi layar HP tanpa ikut terpotong bar browser */
    align-content: end;    /* isi hero menempel ke bawah, langit dibiarkan lega */
}
.hero-app::after { display: none; } /* ombak putih dihapus, diganti pita info */
.hero-app .hero-dalam { padding-bottom: clamp(6.5rem, 13vh, 9rem); }
.hero-app .hero-teks { max-width: 46rem; }

.hero-lokasi {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    margin-bottom: 1.1rem;
}
.hero-garis { width: 2rem; height: 1px; background: var(--aksen); display: inline-block; flex: 0 0 auto; }

.hero-judul {
    margin: 0;
    font-size: clamp(2.7rem, 7.6vw, 5.4rem);
    line-height: .99;
    letter-spacing: -.015em;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0,0,0,.32);
}
.hero-brand {
    display: block;
    font-family: var(--font-teks);
    font-size: clamp(.78rem, 1.6vw, .95rem);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .92;
    margin-bottom: .85rem;
}
.hero-judul em { font-style: italic; color: #ffc27a; }

.hero-app .hero-sub { margin-top: 1.2rem; max-width: 36ch; }
.hero-app .hero-aksi { margin-top: 2rem; }
.tombol-ikon { width: 1.05em; height: 1.05em; margin-left: .5rem; vertical-align: -.15em; }
.hero-app .tombol { border-radius: 999px; padding: .95rem 1.8rem; }
/* Tombol utama selalu oranye di semua kondisi cuaca supaya tetap mencolok
   dipakai sebagai ajakan utama (dulu ikut tema, jadi pucat saat berawan). */
.hero-app .tombol-utama { background: #e8743b; color: #fff; }
.hero-app .tombol-utama:hover { background: #cf5f2a; }

/* Widget cuaca jadi "pil" kecil di pojok, tidak lagi menghalangi judul */
.hero-cuaca { position: absolute; top: 6.4rem; right: max(4vw, 1rem); z-index: 2; }
.hero-cuaca .widget-cuaca { margin: 0; }

/* Pita di dasar hero: dua pintu masuk ke info yang paling dicari */
.hero-pita {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255,255,255,.22);
    background: rgba(8,28,38,.42);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    color: #fff;
}
.hero-pita-aksi {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: 1.05rem clamp(1.1rem, 4vw, 3rem);
    color: #fff;
    text-decoration: none;
    transition: background var(--transisi);
}
.hero-pita-aksi + .hero-pita-aksi { border-left: 1px solid rgba(255,255,255,.18); }
.hero-pita-aksi:hover, .hero-pita-aksi:focus-visible { background: rgba(255,255,255,.12); }
.hero-pita-aksi span {
    font-size: clamp(.95rem, 2.2vw, 1.12rem);
    font-weight: 700;
    letter-spacing: -.01em;
}
.hero-pita-aksi strong {
    font-size: .8rem;
    font-weight: 500;
    opacity: .78;
}
.hero-pita-aksi svg { width: 20px; height: 20px; margin-left: auto; opacity: .8; }

@media (prefers-reduced-transparency: reduce) {
    .hero-pita { background: rgba(8,28,38,.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 860px) {
    /* Tinggi hero dikurangi setinggi navbar (±68px) + menu bawah (±60px)
       supaya pita info berhenti tepat di atas menu bawah, tidak ketutup. */
    .hero-app { padding-top: 4.6rem; min-height: calc(100svh - 60px); }
    .hero-app .hero-dalam { padding-bottom: 4.2rem; }
    .hero-app .hero-judul { font-size: clamp(2rem, 8vw, 2.7rem); }
    .hero-app .hero-brand { font-size: .7rem; margin-bottom: .6rem; }
    .hero-lokasi { font-size: .62rem; letter-spacing: .14em; margin-bottom: .8rem; }
    .hero-app .hero-sub { font-size: .92rem; line-height: 1.55; max-width: 32ch; margin-top: .75rem; }
    .hero-app .hero-aksi { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: 1.1rem; }
    .hero-app .tombol { justify-content: center; text-align: center; padding: .8rem 1.3rem; font-size: .95rem; }
    .hero-cuaca { top: 4.4rem; right: 4vw; }
    .hero-cuaca .widget-cuaca { padding: .45rem .8rem; gap: .45rem; }
    .hero-cuaca .widget-cuaca small { display: none; }
    .hero-cuaca .widget-cuaca strong { font-size: .82rem; }
    .hero-cuaca .widget-cuaca-ikon { font-size: 1.1rem; }
    .hero-pita-aksi { padding: .7rem .8rem; gap: .3rem; flex-wrap: nowrap; }
    .hero-pita-aksi span { font-size: .82rem; white-space: nowrap; }
    .hero-pita-aksi strong { font-size: .66rem; white-space: nowrap; }
    .hero-pita-aksi svg { width: 16px; height: 16px; }
}

/* ---------- Menu bawah ala aplikasi (hanya layar kecil) ---------- */
.tab-bawah { display: none; }
@media (max-width: 860px) {
    .navbar-toggle, .navbar-menu { display: none !important; }

    .tab-bawah {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        background: rgba(255,255,255,.93);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border-top: 1px solid var(--garis);
        box-shadow: 0 -10px 30px -22px rgba(15,35,55,.6);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .tab-bawah a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 56px;
        padding: .5rem .2rem;
        font-size: .67rem;
        font-weight: 600;
        color: #5a6b76;
        text-decoration: none;
    }
    .tab-bawah a.aktif { color: var(--aksen-gelap); }
    .tab-bawah a.aktif svg { stroke: var(--aksen-gelap); }
    .tab-bawah svg { width: 22px; height: 22px; }

    /* ruang supaya isi halaman & footer tidak ketutup menu bawah */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Gerak per layar di beranda (swipe ke bawah) ---------- */
html.beranda-snap {
    scroll-snap-type: y proximity;  /* "proximity": tetap bisa berhenti di tengah, tidak memaksa */
    scroll-padding-top: 4.2rem;
}
html.beranda-snap .hero,
html.beranda-snap main > .bagian,
html.beranda-snap .cta { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
    html.beranda-snap { scroll-snap-type: none; }
}

/* ---------- Tombol "Pasang aplikasi" (muncul sendiri kalau browser mendukung) ---------- */
.tombol-pasang {
    position: fixed;
    right: 1rem;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 61;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--laut-dalam);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 16px 30px -16px rgba(0,0,0,.6);
}
.tombol-pasang.tampil { display: inline-flex; }
.tombol-pasang svg { width: 18px; height: 18px; }
@media (min-width: 861px) { .tombol-pasang { bottom: 1.5rem; } }

/* ---------- Bagian tiket & parkir ---------- */
.bagian-tarif { scroll-margin-top: 5rem; }
#parkir { scroll-margin-top: 5rem; }
.tarif-tata { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; align-items: stretch; }
.tarif-kartu {
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: var(--bayangan);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.tarif-kartu .judul-bagian { margin: .5rem 0 1rem; }
.tarif-kartu .lencana-kecil { align-self: flex-start; }
.tarif-kartu-utama { border-left: 4px solid var(--aksen); }
.tarif-harga { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tarif-harga > div {
    background: var(--permukaan-alt);
    border-radius: var(--radius-kecil);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.tarif-harga strong { font-family: var(--font-judul); font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--laut-dalam); line-height: 1; }
.tarif-harga span { font-size: .82rem; color: #5a6b76; }
.tarif-daftar { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.tarif-daftar li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .95rem;
    background: var(--permukaan-alt);
    border-radius: var(--radius-kecil);
}
.tarif-daftar span { color: #5a6b76; }
.tarif-daftar strong { font-size: 1.02rem; color: var(--laut-dalam); }
.tarif-catatan { font-size: .88rem; color: #5a6b76; line-height: 1.6; margin: 1rem 0 0; }
.tarif-aksi { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.2rem; }
.tarif-aksi .tombol { border-radius: 999px; }
@media (max-width: 860px) {
    .tarif-tata { grid-template-columns: 1fr; }
    .tarif-harga { grid-template-columns: 1fr; }
}