/* =========================================================
   LMS SMK Muhammadiyah 4 Palembang, lapisan rupa

   Di atas Bootstrap 5.3. Berkas ini hanya memperhalus: bila gagal dimuat,
   halaman tetap terbaca dan semua tombol tetap berfungsi.

   Proporsi memakai rasio emas (phi = 1,618):
   - skala jarak  0,382 / 0,618 / 1 / 1,618 / 2,618 / 4,236 rem
   - hero publik dibagi 1,618 : 1 (61,8% teks, 38,2% panel)
   - tinggi baris teks 1,618
   Warna: hijau tua untuk wibawa, emas secukupnya sebagai aksen.
   ========================================================= */

:root {
    --phi: 1.618;
    --s-2: .382rem;
    --s-1: .618rem;
    --s0: 1rem;
    --s1: 1.618rem;
    --s2: 2.618rem;
    --s3: 4.236rem;

    --hijau-tua: #0a3d2e;
    --hijau: #0b6e4f;
    --hijau-muda: #e6f2ec;
    --emas: #c9a227;
    --emas-muda: #f7efd6;
    --tinta: #14221c;
    --tinta-lembut: #56655e;
    --kabut: #f4f7f5;
    --garis: #e2eae5;

    --radius: 14px;
    --radius-kecil: 10px;
    --bayang: 0 1px 2px rgba(10, 61, 46, .06), 0 8px 24px -16px rgba(10, 61, 46, .22);
    --bayang-angkat: 0 2px 4px rgba(10, 61, 46, .06), 0 22px 40px -22px rgba(10, 61, 46, .38);

    --ease-lembut: cubic-bezier(.22, 1, .36, 1);
    --ease-pegas: cubic-bezier(.34, 1.56, .64, 1);

    /* Bootstrap memakai variabel ini untuk warna dasar */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--tinta);
    --bs-border-color: var(--garis);
    --bs-link-color-rgb: 11, 110, 79;
    --bs-link-hover-color-rgb: 10, 61, 46;
    --warna-utama: var(--hijau);
}

body {
    /* Latar abu-abu hanya di body; --bs-body-bg tetap putih karena dipakai kartu, daftar, dan isian */
    background-color: var(--kabut);
    line-height: var(--phi);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .navbar-brand, .display-6 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: -.01em;
    line-height: 1.25;
}
h4 { font-weight: 700; color: var(--hijau-tua); }

::selection { background: var(--emas-muda); color: var(--hijau-tua); }

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
.bg-utama {
    background: linear-gradient(120deg, var(--hijau-tua) 0%, var(--hijau) 100%) !important;
}
.navbar { position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 20px -14px rgba(10, 61, 46, .6); }
.navbar-brand { font-weight: 700; }
.navbar .badge.text-bg-warning { background: var(--emas) !important; color: #2b2204 !important; letter-spacing: .04em; }

/* Garis kemajuan gulir emas di bawah navbar, nilainya diisi lms-motion.js */
.garis-gulir {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--emas), #f1d27a);
    transform: scaleX(var(--kemajuan, 0)); transform-origin: left;
    pointer-events: none;
}

/* Tautan navbar publik: garis bawah yang tumbuh */
#navPublik .nav-link { position: relative; white-space: nowrap; font-size: .92rem; padding-inline: .6rem; }
#navPublik .nav-link::after {
    content: ""; position: absolute; left: var(--s-1); right: var(--s-1); bottom: 4px; height: 2px;
    border-radius: 99px; background: var(--emas);
    transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-lembut);
}
#navPublik .nav-link:hover::after, #navPublik .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */
.sidebar { background: #fff; }
.sidebar .nav-link {
    position: relative; border-radius: var(--radius-kecil); color: var(--tinta);
    padding: .45rem .75rem; margin-bottom: 2px;
    transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-lembut);
}
.sidebar .nav-link .fa-fw { color: var(--tinta-lembut); transition: color .25s ease, transform .4s var(--ease-pegas); }
.sidebar .nav-link:hover { background: var(--hijau-muda); color: var(--hijau-tua); transform: translateX(3px); }
.sidebar .nav-link:hover .fa-fw { color: var(--hijau); transform: scale(1.12); }
.sidebar .nav-link.active {
    background: linear-gradient(120deg, var(--hijau-tua), var(--hijau)); color: #fff;
    box-shadow: 0 8px 18px -12px rgba(10, 61, 46, .8);
}
.sidebar .nav-link.active .fa-fw { color: var(--emas); }
/* Penanda emas di tepi kiri menu aktif */
.sidebar .nav-link.active::before {
    content: ""; position: absolute; left: -8px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 99px; background: var(--emas);
}

/* ---------------------------------------------------------
   Kartu, tabel, formulir
   --------------------------------------------------------- */
.card {
    border: 1px solid var(--garis); border-radius: var(--radius);
    box-shadow: var(--bayang);
}
.card-header {
    background: #fff; border-bottom-color: var(--garis);
    font-weight: 600; color: var(--hijau-tua);
    border-top-left-radius: var(--radius) !important; border-top-right-radius: var(--radius) !important;
}
.card-header .fa-solid { color: var(--emas); margin-right: .25rem; }

/* Kartu angka dashboard: terangkat pelan dan garis emas tumbuh saat disentuh */
.kartu-angka { position: relative; overflow: hidden; transition: transform .35s var(--ease-lembut), box-shadow .35s ease; }
.kartu-angka::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--emas), var(--hijau));
    transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-lembut);
}
.kartu-angka:hover { transform: translateY(-3px); box-shadow: var(--bayang-angkat); }
.kartu-angka:hover::after { transform: scaleY(1); }
.kartu-angka .fs-3, .kartu-angka .fs-4 { color: var(--hijau-tua); font-family: 'Plus Jakarta Sans', sans-serif; }

.list-group-item-action { transition: background-color .25s ease, padding-left .3s var(--ease-lembut); }
.list-group-item-action:hover { background: var(--hijau-muda); padding-left: 1.25rem; }

.table { --bs-table-striped-bg: rgba(11, 110, 79, .03); --bs-table-hover-bg: rgba(11, 110, 79, .06); }
.table > thead > tr:first-child > th {
    background: var(--hijau-muda); color: var(--hijau-tua);
    font-weight: 600; font-size: .85rem; letter-spacing: .01em; white-space: nowrap;
}
.table > tbody > tr { transition: background-color .2s ease; }
.table > tbody > tr:hover > * { background-color: rgba(201, 162, 39, .07); }
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.dataTables_wrapper .page-link { color: var(--hijau); }
.dataTables_wrapper .dataTables_processing { border-radius: var(--radius-kecil); box-shadow: var(--bayang-angkat); }

.form-control, .form-select { border-radius: var(--radius-kecil); border-color: #d5dfda; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--hijau); box-shadow: 0 0 0 .2rem rgba(11, 110, 79, .15);
}
.form-check-input:checked { background-color: var(--hijau); border-color: var(--hijau); }

.nav-tabs .nav-link { color: var(--tinta-lembut); border-radius: var(--radius-kecil) var(--radius-kecil) 0 0; }
.nav-tabs .nav-link.active { color: var(--hijau-tua); font-weight: 600; box-shadow: inset 0 2px 0 var(--emas); }
.tab-content { border-radius: 0 0 var(--radius) var(--radius); }

.breadcrumb a { text-decoration: none; }
.badge { font-weight: 600; letter-spacing: .01em; }
.alert { border-radius: var(--radius-kecil); }
.modal-content { border: 0; border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(10, 61, 46, .45); }

/* ---------------------------------------------------------
   Tombol: kilau menyapu saat disentuh
   --------------------------------------------------------- */
.btn { border-radius: var(--radius-kecil); transition: transform .2s var(--ease-lembut), box-shadow .3s ease, filter .2s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-utama {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(120deg, var(--hijau-tua), var(--hijau)); border: 0; color: #fff;
}
.btn-utama:hover { color: #fff; filter: none; box-shadow: 0 10px 22px -12px rgba(10, 61, 46, .75), 0 0 0 3px rgba(201, 162, 39, .25); }
.btn-utama::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--ease-lembut);
}
.btn-utama:hover::after, .btn-utama:focus-visible::after { transform: translateX(120%); }
.btn-outline-secondary:hover { background: var(--hijau-muda); color: var(--hijau-tua); border-color: var(--hijau); }

/* ---------------------------------------------------------
   Gerak masuk: isi halaman naik perlahan, berurutan
   --------------------------------------------------------- */
@keyframes naik-masuk {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
.isi-halaman > * { animation: naik-masuk .7s var(--ease-lembut) both; }
.isi-halaman > :nth-child(1) { animation-delay: .02s; }
.isi-halaman > :nth-child(2) { animation-delay: .08s; }
.isi-halaman > :nth-child(3) { animation-delay: .14s; }
.isi-halaman > :nth-child(4) { animation-delay: .20s; }
.isi-halaman > :nth-child(5) { animation-delay: .26s; }
.isi-halaman > :nth-child(n+6) { animation-delay: .32s; }

/* Kartu angka dalam satu baris ikut masuk berurutan */
.row > [class*="col"]:nth-child(1) > .kartu-angka { animation: naik-masuk .7s var(--ease-lembut) .10s both; }
.row > [class*="col"]:nth-child(2) > .kartu-angka { animation: naik-masuk .7s var(--ease-lembut) .17s both; }
.row > [class*="col"]:nth-child(3) > .kartu-angka { animation: naik-masuk .7s var(--ease-lembut) .24s both; }
.row > [class*="col"]:nth-child(4) > .kartu-angka { animation: naik-masuk .7s var(--ease-lembut) .31s both; }
.row > [class*="col"]:nth-child(n+5) > .kartu-angka { animation: naik-masuk .7s var(--ease-lembut) .38s both; }

/* Reveal saat digulir (halaman publik). Tanpa JS kelas tampak tidak pernah
   dipasang, jadi elemen hanya disembunyikan bila JS sudah menandai <html>. */
.js-gerak [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s var(--ease-lembut), transform .8s var(--ease-lembut);
    transition-delay: var(--tunda, 0s);
}
.js-gerak [data-reveal].tampak { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Halaman publik
   --------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: calc(var(--radius) * var(--phi));
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 162, 39, .18), transparent 38%),
        linear-gradient(135deg, var(--hijau-tua) 0%, var(--hijau) 100%);
    color: #fff; padding: var(--s3) var(--s2);
}
.hero-grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s2); align-items: center; }
@media (max-width: 991.98px) {
    .hero { padding: var(--s2) var(--s1); }
    .hero-grid { grid-template-columns: 1fr; }
}
.hero h1 { color: #fff; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.hero .lead { color: rgba(255, 255, 255, .85); max-width: 38em; }
.hero-salin > * { animation: naik-masuk .85s var(--ease-lembut) both; }
.hero-salin > :nth-child(1) { animation-delay: .05s; }
.hero-salin > :nth-child(2) { animation-delay: .14s; }
.hero-salin > :nth-child(3) { animation-delay: .23s; }
.hero-salin > :nth-child(4) { animation-delay: .32s; }
.hero-panel { animation: naik-masuk 1s var(--ease-lembut) .3s both; }

.alis {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--emas-muda); background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; padding: .3rem .8rem;
}
.alis-titik { width: 8px; height: 8px; border-radius: 50%; background: var(--emas); animation: denyut 2.6s ease-in-out infinite; }
@keyframes denyut {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .6); }
    60% { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0); }
}

/* Kata SMART di judul: kilau emas yang bergeser pelan */
.teks-emas {
    background: linear-gradient(100deg, #f1d27a 0%, var(--emas) 40%, #fff3c4 60%, var(--emas) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: geser-kilau 8s ease-in-out infinite;
}
@keyframes geser-kilau { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.btn-emas {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--emas); color: #231b02; border: 0; font-weight: 600;
}
.btn-emas:hover { background: #d8b23a; color: #231b02; box-shadow: 0 12px 26px -12px rgba(201, 162, 39, .9); }
.btn-emas::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--ease-lembut);
}
.btn-emas:hover::after { transform: translateX(120%); }

/* Panel SMART di hero: empat huruf, masing-masing satu nilai */
.panel-smart {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius); padding: var(--s1); backdrop-filter: blur(6px);
}
.smart-kata { display: flex; gap: var(--s-2); }
.smart-kata .smart-huruf { flex: 1 1 0; width: auto; height: 3.4rem; font-size: 1.4rem; }
.smart-kata .smart-huruf:hover { transform: rotate(-8deg) scale(1.08); background: var(--emas); color: #231b02; }
.hero-panel .smart-kata .smart-huruf { animation: naik-masuk .6s var(--ease-lembut) both; }
.hero-panel .smart-kata .smart-huruf:nth-child(2) { animation-delay: .08s; }
.hero-panel .smart-kata .smart-huruf:nth-child(3) { animation-delay: .16s; }
.hero-panel .smart-kata .smart-huruf:nth-child(4) { animation-delay: .24s; }
.hero-panel .smart-kata .smart-huruf:nth-child(5) { animation-delay: .32s; }
.smart-baris { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) 0; }
.smart-baris + .smart-baris { border-top: 1px solid rgba(255, 255, 255, .1); }
.smart-huruf {
    flex: 0 0 auto; width: 2.618rem; height: 2.618rem; border-radius: var(--radius-kecil);
    display: grid; place-items: center; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
    background: rgba(201, 162, 39, .18); color: var(--emas-muda);
    transition: transform .45s var(--ease-pegas), background-color .3s ease, color .3s ease;
}
.smart-baris:hover .smart-huruf { transform: rotate(-8deg) scale(1.08); background: var(--emas); color: #231b02; }
.hero-panel .smart-baris { animation: geser-masuk .6s var(--ease-lembut) both; }
.hero-panel .smart-baris:nth-child(1) { animation-delay: .55s; }
.hero-panel .smart-baris:nth-child(2) { animation-delay: .68s; }
.hero-panel .smart-baris:nth-child(3) { animation-delay: .81s; }
.hero-panel .smart-baris:nth-child(4) { animation-delay: .94s; }
@keyframes geser-masuk { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Hiasan latar hero: cincin dan lingkaran tipis yang mengapung pelan, di tepi saja
   supaya tidak lewat di belakang judul. Dibuat oleh lms-motion.js. */
.hiasan { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hiasan span { position: absolute; border-radius: 50%; animation: apung var(--dur, 16s) ease-in-out infinite; animation-delay: var(--tunda, 0s); }
.hiasan .h1 { width: 300px; height: 300px; right: -90px; top: -110px; border: 1px solid rgba(201, 162, 39, .35); }
.hiasan .h2 { width: 180px; height: 180px; right: 14%; bottom: -80px; border: 1px solid rgba(255, 255, 255, .12); --dur: 19s; --tunda: -5s; }
.hiasan .h3 { width: 12px; height: 12px; right: 36%; top: 9%; background: rgba(201, 162, 39, .5); --dur: 12s; --tunda: -3s; }
.hiasan .h4 { width: 110px; height: 110px; left: -55px; bottom: -55px; background: rgba(255, 255, 255, .05); --dur: 21s; --tunda: -8s; }
@keyframes apung { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } }

.judul-bagian { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s0); }
.judul-bagian::before { content: ""; width: 28px; height: 3px; border-radius: 99px; background: var(--emas); }

.kartu-program { transition: transform .35s var(--ease-lembut), box-shadow .35s ease, border-color .3s ease; }
.kartu-program:hover { transform: translateY(-5px); box-shadow: var(--bayang-angkat); border-color: #c9e3d6; }
.kartu-program .ikon-program {
    width: 2.618rem; height: 2.618rem; border-radius: var(--radius-kecil); display: grid; place-items: center;
    background: var(--hijau-muda); color: var(--hijau); transition: transform .45s var(--ease-pegas), background-color .3s, color .3s;
}
.kartu-program:hover .ikon-program { transform: rotate(-8deg) scale(1.08); background: var(--emas); color: #231b02; }

/* Halaman masuk: panel identitas 38,2% di samping formulir */
.masuk-bingkai { display: grid; grid-template-columns: 1fr 1.618fr; border-radius: calc(var(--radius) * var(--phi)); overflow: hidden; box-shadow: var(--bayang-angkat); background: #fff; }
.masuk-bingkai .hero { border-radius: 0; padding: var(--s2) var(--s1); }
@media (max-width: 767.98px) { .masuk-bingkai { grid-template-columns: 1fr; } }

.kaki-publik { background: var(--hijau-tua); color: rgba(255, 255, 255, .75); }
.kaki-publik a { color: var(--emas-muda); }

/* Tombol kembali ke atas */
.ke-atas {
    position: fixed; right: 22px; bottom: 22px; z-index: 1030; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--garis); background: #fff; color: var(--hijau-tua); box-shadow: var(--bayang-angkat);
    display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity .3s ease, transform .35s var(--ease-pegas), visibility .3s, background-color .25s, color .25s;
}
.ke-atas.tampil { opacity: 1; visibility: visible; transform: none; }
.ke-atas:hover { background: var(--hijau); color: #fff; }

/* ---------------------------------------------------------
   Hormati permintaan mengurangi gerak: yang berulang dimatikan
   sepenuhnya, bukan sekadar dipercepat.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js-gerak [data-reveal] { opacity: 1; transform: none; }
    .hiasan { display: none; }
    .teks-emas { -webkit-text-fill-color: var(--emas); color: var(--emas); background: none; }
}