/* =========================================================
   LANDING PAGE TANDEMKU (Home::index -> landing_page.php)
   Bagian dinamis (Landing_model). Bahasa visual sama dengan halaman
   login & dashboard: Plus Jakarta Sans, biru #2563eb / #1e40af, aksen
   oranye #f76400, hijau #16a34a, kartu putih gaya .dk-kpi.
   Sengaja tanpa teks gradien, efek kaca, cahaya, atau angka contoh palsu.
   ========================================================= */
* {
    box-sizing: border-box;
}

/* tinggi top bar = min-height .lp-nav .lp-wadah (74px) + garis oranye (4px) */
:root {
    --lp-tinggi-nav: 78px;
}

/* lompatan tautan #kode (tanpa JS) berhenti tepat di bawah top bar yang menempel */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--lp-tinggi-nav);
}

body.lp {
    margin: 0;
    background: #fff;
    color: #101828;
    font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.lp a {
    color: inherit;
}

.lp-wadah {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Top bar: gaya primarybanner dashboard (biru gradien) ---------- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    transition: box-shadow .2s ease;
}

/* saat isi slide digulir: bayangan */
.lp-nav.tergulir {
    box-shadow: 0 .5rem 1.5rem rgba(30, 64, 175, .28);
}

.lp-nav .lp-wadah {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: calc(var(--lp-tinggi-nav) - 4px);
}

.lp-merek {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: #fff !important;
    min-width: 0;
}

.lp-merek-logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

.lp-merek-logo img {
    max-width: 32px;
    max-height: 32px;
}

.lp-merek-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.lp-merek-nama {
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.lp-merek-desk {
    font-size: .74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* menu berbentuk pil */
.lp-menu {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    padding: .3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    font-size: .86rem;
    font-weight: 600;
}

.lp-menu a {
    position: relative;
    padding: .45rem .85rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.lp-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.lp-menu a.aktif {
    color: #1e40af;
    background: #fff;
}

/* titik oranye penanda bagian yang sedang dilihat */
.lp-menu a.aktif::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 14px;
    height: 3px;
    margin-left: -7px;
    border-radius: 999px;
    background: #f76400;
}

.lp-menu-tombol {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lp-menu-tombol svg {
    width: 20px;
    height: 20px;
}

.lp a:focus-visible,
.lp button:focus-visible,
.lp select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

.lp-nav a:focus-visible,
.lp-nav button:focus-visible {
    outline-color: rgba(255, 255, 255, .6);
}

.lp-tombol {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 44px;
    padding: 0 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.lp-tombol svg {
    width: 17px;
    height: 17px;
}

.lp-tombol-biru {
    background: #2563eb;
    color: #fff !important;
}

.lp-tombol-biru:hover {
    background: #1e40af;
}

.lp-tombol-putih {
    background: #fff;
    color: #1e40af !important;
}

.lp-tombol-putih:hover {
    background: #eff6ff;
}

.lp-tombol-oranye {
    background: #f76400;
    color: #fff !important;
}

.lp-tombol-oranye:hover {
    background: #e05a00;
}

.lp-nav .lp-tombol-oranye {
    box-shadow: 0 4px 12px rgba(247, 100, 0, .35);
}

.lp-nav .lp-tombol-oranye:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .7);
    outline-offset: 2px;
}

/* salinan tombol dashboard di panel menu ponsel (lihat media 575.98px) */
.lp-menu .lp-menu-dashboard {
    display: none;
}

.lp-nav .lp-tombol-putih {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}

.lp-tombol-garis {
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff !important;
}

.lp-tombol-garis:hover {
    border-color: #fff;
}

/* ---------- Bagian umum ---------- */
.lp-bagian {
    padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
}

.lp-kepala {
    max-width: 680px;
    margin-bottom: 1.25rem;
}

.lp-kepala-label {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f76400;
}

.lp-kepala h2 {
    margin: .45rem 0 .5rem;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #101828;
}

.lp-kepala p {
    margin: 0;
    color: #475467;
}

.lp-grid {
    display: grid;
    gap: 1rem;
}

.lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kartu gaya .dk-kpi */
.lp-kartu {
    --warna: #2563eb;
    --lembut: #eff6ff;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 1.35rem 1.4rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}

.lp-kartu::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--lembut);
    opacity: .7;
}

.lp-kartu > * {
    position: relative;
    z-index: 1;
}

.lp-hijau { --warna: #16a34a; --lembut: #ecfdf3; }
.lp-oranye { --warna: #f76400; --lembut: #fff4ec; }
.lp-biru-tua { --warna: #1e40af; --lembut: #e0e7ff; }

.lp-kartu-kepala {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .8rem;
}

.lp-ikon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lembut);
    color: var(--warna);
    flex-shrink: 0;
}

.lp-ikon svg {
    width: 19px;
    height: 19px;
}

.lp-kartu-label {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #667085;
}

.lp-nilai {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #101828;
}

.lp-ket {
    margin-top: .35rem;
    font-size: .85rem;
    color: #667085;
}

/* ---------- Halaman Periode: banner kiri (gaya primarybanner dashboard) + kartu jadwal kanan ----------
   Banner TIDAK memakai aspect-ratio: tingginya mengikuti kolom kanan (stretch) agar kedua sisi selalu
   sejajar dan tidak bertabrakan saat teks kartu terlipat di layar sedang. */
/* aksen oranye menempel langsung di bawah top bar */
.lp-nav {
    border-bottom: 4px solid #f76400;
}

.lp-bagian.lp-periode {
    padding: 1.5rem 0;
}

.lp-periode-grid {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.lp-utama {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 .75rem 2rem rgba(78, 115, 223, .25);
    color: #fff;
}

.lp-utama-persegi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .9rem;
    min-width: 0;
    min-height: 340px;
    padding: clamp(1.15rem, 2.5vw, 1.6rem);
}

.lp-utama::before,
.lp-utama::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lp-utama::before {
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, .08);
}

.lp-utama::after {
    bottom: -60px;
    left: -60px;
    width: 190px;
    height: 190px;
    background: rgba(255, 255, 255, .05);
}

.lp-utama > * {
    position: relative;
    z-index: 1;
}

.lp-utama-atas {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.lp-utama-ikon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .22);
}

.lp-utama-ikon svg {
    width: 21px;
    height: 21px;
}

.lp-utama-label {
    min-width: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.lp-utama-sub {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: #f76400;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.lp-utama h2 {
    margin: .45rem 0 0;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: #fff;
}

.lp-utama-ta {
    margin-top: .2rem;
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}

.lp-utama-ket {
    max-width: 34ch;
    margin: .5rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}

.lp-utama-bawah {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.lp-utama-waktu {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

.lp-utama-waktu svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* kolom kanan: kartu putih bertumpuk, tinggi kolom ini yang menentukan tinggi banner */
.lp-periode-kolom {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
}

.lp-jadwal {
    flex: 1;
    min-width: 0;
    padding: .75rem 1.1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .85rem;
}

.lp-jadwal-isi {
    min-width: 0;
}

.lp-jadwal-nilai {
    margin-top: .1rem;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: #101828;
}

.lp-jadwal .lp-ket {
    margin-top: .1rem;
    font-size: .8rem;
}

.lp-potong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* desktop: banner + 4 kartu setinggi ±80% layar di bawah top bar (sisanya jadi ruang atas-bawah,
   blok menempatkannya di tengah), maks. 600px; kartu kanan membagi tinggi sama rata */
@media (min-width: 992px) {
    .lp-periode-grid {
        min-height: min(600px, calc((100vh - var(--lp-tinggi-nav)) * .8));
        min-height: min(600px, calc((100svh - var(--lp-tinggi-nav)) * .8));
    }

    .lp-periode-kolom {
        gap: .85rem;
    }

    .lp-jadwal {
        flex: 1 1 0;
        padding: 1rem 1.35rem;
    }

    .lp-utama-persegi {
        padding: clamp(1.5rem, 2.5vw, 2rem);
    }

    .lp-utama h2 {
        font-size: clamp(2.6rem, 4.5vw, 3.4rem);
    }
}

/* badge status: label pendek, tidak terlipat (aturan skill UI 4a); di kolom grid sendiri */
.lp-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.lp-status-hijau { background: #dcfce7; color: #15803d; }
.lp-status-oranye { background: #ffedd5; color: #c2410c; }
.lp-status-abu { background: #f2f4f7; color: #475467; }

.min-w-0 {
    min-width: 0;
}

/* ---------- Bank mitra: grid logo dua baris (tanpa marquee) ---------- */
.lp-bank-grid {
    --kolom: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.lp-bank-kolom-1 { --kolom: 1; }
.lp-bank-kolom-2 { --kolom: 2; }
.lp-bank-kolom-3 { --kolom: 3; }
.lp-bank-kolom-4 { --kolom: 4; }
.lp-bank-kolom-5 { --kolom: 5; }
.lp-bank-kolom-6 { --kolom: 6; }

.lp-bank {
    width: calc((100% - (var(--kolom) - 1) * 1rem) / var(--kolom));
    height: 150px;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, transform .15s ease;
}

.lp-bank:hover {
    border-color: #bfdbfe;
    transform: translateY(-2px);
}

.lp-bank img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

.lp-bank-nama {
    font-weight: 800;
    font-size: 1.05rem;
    color: #1e40af;
    text-align: center;
    line-height: 1.25;
}

/* ---------- Diagram batang komposisi pendapatan per fakultas (persen saja) ----------
   Desktop: kolom tegak dengan sumbu persen & 4 garis bantu (25% tinggi area per garis).
   Ponsel (<576px): batang mendatar, nama di atas batang. Tinggi = lp-h-N, lebar mendatar = lp-w-N. */
.lp-diagram-area {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .75rem;
    padding: 2.25rem 1.5rem 1rem 1rem;
}

.lp-diagram-sumbu {
    position: relative;
    height: 280px;
}

.lp-diagram-sumbu span {
    position: absolute;
    right: 0;
    margin-bottom: -.55em;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.1;
    color: #98a2b3;
    font-variant-numeric: tabular-nums;
}

.lp-sumbu-0 { bottom: 0; }
.lp-sumbu-25 { bottom: 25%; }
.lp-sumbu-50 { bottom: 50%; }
.lp-sumbu-75 { bottom: 75%; }
.lp-sumbu-100 { bottom: 100%; }

.lp-diagram-isi {
    display: flex;
    gap: clamp(.5rem, 2vw, 1.5rem);
    min-width: 0;
}

.lp-diagram-kolom {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* area batang: garis bantu tiap 25% + garis dasar */
.lp-diagram-jalur {
    position: relative;
    height: 280px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 2px solid #d0d5dd;
    background: linear-gradient(to bottom, #eef2f7 1px, transparent 1px) 0 0 / 100% 25%;
}

.lp-diagram-batang {
    position: relative;
    display: block;
    border-radius: 10px 10px 0 0;
    background: #f76400;
    animation: lpNaik .9s cubic-bezier(.2, .7, .3, 1) both;
    transition: filter .15s ease;
}

/* lebar kolom tegak (menimpa lp-w-N yang hanya dipakai mode mendatar di ponsel) */
@media (min-width: 576px) {
    .lp-diagram .lp-diagram-batang {
        width: min(64px, 70%);
    }
}

.lp-diagram-kolom:hover .lp-diagram-batang {
    filter: brightness(.95);
}

/* label persen di atas kolom */
.lp-diagram-batang b {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: .35rem;
    transform: translateX(-50%);
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lp-diagram-nama {
    order: 2; /* di bawah kolom pada mode tegak */
    margin-top: .65rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: #344054;
    overflow-wrap: anywhere;
}

/* tumbuh dari 0 ke tinggi class lp-h-N (keyframe tanpa "to" = nilai yang berlaku) */
@keyframes lpNaik {
    from { height: 0; }
}

@keyframes lpMelebar {
    from { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-diagram-batang { animation: none; }
}

/* makin tinggi persentase makin pekat oranyenya (tingkat relatif terhadap fakultas terbesar) */
.lp-diagram-batang.lp-tingkat-1 { background: #fde3cc; }
.lp-diagram-batang.lp-tingkat-2 { background: #fcd5b5; }
.lp-diagram-batang.lp-tingkat-3 { background: #fcc79f; }
.lp-diagram-batang.lp-tingkat-4 { background: #fbb988; }
.lp-diagram-batang.lp-tingkat-5 { background: #faab71; }
.lp-diagram-batang.lp-tingkat-6 { background: #fa9c5b; }
.lp-diagram-batang.lp-tingkat-7 { background: #f98e44; }
.lp-diagram-batang.lp-tingkat-8 { background: #f8802d; }
.lp-diagram-batang.lp-tingkat-9 { background: #f87217; }
.lp-diagram-batang.lp-tingkat-10 { background: #f76400; }

.lp-tingkat-teks-1, .lp-tingkat-teks-2, .lp-tingkat-teks-3 { color: #9a5a2a; }
.lp-tingkat-teks-4, .lp-tingkat-teks-5, .lp-tingkat-teks-6 { color: #c2410c; }
.lp-tingkat-teks-7, .lp-tingkat-teks-8, .lp-tingkat-teks-9, .lp-tingkat-teks-10 { color: #f76400; }


/* tinggi kolom per 1% (tanpa style inline) */
.lp-h-0 { height: 0%; }
.lp-h-1 { height: 1%; }
.lp-h-2 { height: 2%; }
.lp-h-3 { height: 3%; }
.lp-h-4 { height: 4%; }
.lp-h-5 { height: 5%; }
.lp-h-6 { height: 6%; }
.lp-h-7 { height: 7%; }
.lp-h-8 { height: 8%; }
.lp-h-9 { height: 9%; }
.lp-h-10 { height: 10%; }
.lp-h-11 { height: 11%; }
.lp-h-12 { height: 12%; }
.lp-h-13 { height: 13%; }
.lp-h-14 { height: 14%; }
.lp-h-15 { height: 15%; }
.lp-h-16 { height: 16%; }
.lp-h-17 { height: 17%; }
.lp-h-18 { height: 18%; }
.lp-h-19 { height: 19%; }
.lp-h-20 { height: 20%; }
.lp-h-21 { height: 21%; }
.lp-h-22 { height: 22%; }
.lp-h-23 { height: 23%; }
.lp-h-24 { height: 24%; }
.lp-h-25 { height: 25%; }
.lp-h-26 { height: 26%; }
.lp-h-27 { height: 27%; }
.lp-h-28 { height: 28%; }
.lp-h-29 { height: 29%; }
.lp-h-30 { height: 30%; }
.lp-h-31 { height: 31%; }
.lp-h-32 { height: 32%; }
.lp-h-33 { height: 33%; }
.lp-h-34 { height: 34%; }
.lp-h-35 { height: 35%; }
.lp-h-36 { height: 36%; }
.lp-h-37 { height: 37%; }
.lp-h-38 { height: 38%; }
.lp-h-39 { height: 39%; }
.lp-h-40 { height: 40%; }
.lp-h-41 { height: 41%; }
.lp-h-42 { height: 42%; }
.lp-h-43 { height: 43%; }
.lp-h-44 { height: 44%; }
.lp-h-45 { height: 45%; }
.lp-h-46 { height: 46%; }
.lp-h-47 { height: 47%; }
.lp-h-48 { height: 48%; }
.lp-h-49 { height: 49%; }
.lp-h-50 { height: 50%; }
.lp-h-51 { height: 51%; }
.lp-h-52 { height: 52%; }
.lp-h-53 { height: 53%; }
.lp-h-54 { height: 54%; }
.lp-h-55 { height: 55%; }
.lp-h-56 { height: 56%; }
.lp-h-57 { height: 57%; }
.lp-h-58 { height: 58%; }
.lp-h-59 { height: 59%; }
.lp-h-60 { height: 60%; }
.lp-h-61 { height: 61%; }
.lp-h-62 { height: 62%; }
.lp-h-63 { height: 63%; }
.lp-h-64 { height: 64%; }
.lp-h-65 { height: 65%; }
.lp-h-66 { height: 66%; }
.lp-h-67 { height: 67%; }
.lp-h-68 { height: 68%; }
.lp-h-69 { height: 69%; }
.lp-h-70 { height: 70%; }
.lp-h-71 { height: 71%; }
.lp-h-72 { height: 72%; }
.lp-h-73 { height: 73%; }
.lp-h-74 { height: 74%; }
.lp-h-75 { height: 75%; }
.lp-h-76 { height: 76%; }
.lp-h-77 { height: 77%; }
.lp-h-78 { height: 78%; }
.lp-h-79 { height: 79%; }
.lp-h-80 { height: 80%; }
.lp-h-81 { height: 81%; }
.lp-h-82 { height: 82%; }
.lp-h-83 { height: 83%; }
.lp-h-84 { height: 84%; }
.lp-h-85 { height: 85%; }
.lp-h-86 { height: 86%; }
.lp-h-87 { height: 87%; }
.lp-h-88 { height: 88%; }
.lp-h-89 { height: 89%; }
.lp-h-90 { height: 90%; }
.lp-h-91 { height: 91%; }
.lp-h-92 { height: 92%; }
.lp-h-93 { height: 93%; }
.lp-h-94 { height: 94%; }
.lp-h-95 { height: 95%; }
.lp-h-96 { height: 96%; }
.lp-h-97 { height: 97%; }
.lp-h-98 { height: 98%; }
.lp-h-99 { height: 99%; }
.lp-h-100 { height: 100%; }

/* lebar batang per 1% (tanpa style inline) */
.lp-w-0 { width: 0%; }
.lp-w-1 { width: 1%; }
.lp-w-2 { width: 2%; }
.lp-w-3 { width: 3%; }
.lp-w-4 { width: 4%; }
.lp-w-5 { width: 5%; }
.lp-w-6 { width: 6%; }
.lp-w-7 { width: 7%; }
.lp-w-8 { width: 8%; }
.lp-w-9 { width: 9%; }
.lp-w-10 { width: 10%; }
.lp-w-11 { width: 11%; }
.lp-w-12 { width: 12%; }
.lp-w-13 { width: 13%; }
.lp-w-14 { width: 14%; }
.lp-w-15 { width: 15%; }
.lp-w-16 { width: 16%; }
.lp-w-17 { width: 17%; }
.lp-w-18 { width: 18%; }
.lp-w-19 { width: 19%; }
.lp-w-20 { width: 20%; }
.lp-w-21 { width: 21%; }
.lp-w-22 { width: 22%; }
.lp-w-23 { width: 23%; }
.lp-w-24 { width: 24%; }
.lp-w-25 { width: 25%; }
.lp-w-26 { width: 26%; }
.lp-w-27 { width: 27%; }
.lp-w-28 { width: 28%; }
.lp-w-29 { width: 29%; }
.lp-w-30 { width: 30%; }
.lp-w-31 { width: 31%; }
.lp-w-32 { width: 32%; }
.lp-w-33 { width: 33%; }
.lp-w-34 { width: 34%; }
.lp-w-35 { width: 35%; }
.lp-w-36 { width: 36%; }
.lp-w-37 { width: 37%; }
.lp-w-38 { width: 38%; }
.lp-w-39 { width: 39%; }
.lp-w-40 { width: 40%; }
.lp-w-41 { width: 41%; }
.lp-w-42 { width: 42%; }
.lp-w-43 { width: 43%; }
.lp-w-44 { width: 44%; }
.lp-w-45 { width: 45%; }
.lp-w-46 { width: 46%; }
.lp-w-47 { width: 47%; }
.lp-w-48 { width: 48%; }
.lp-w-49 { width: 49%; }
.lp-w-50 { width: 50%; }
.lp-w-51 { width: 51%; }
.lp-w-52 { width: 52%; }
.lp-w-53 { width: 53%; }
.lp-w-54 { width: 54%; }
.lp-w-55 { width: 55%; }
.lp-w-56 { width: 56%; }
.lp-w-57 { width: 57%; }
.lp-w-58 { width: 58%; }
.lp-w-59 { width: 59%; }
.lp-w-60 { width: 60%; }
.lp-w-61 { width: 61%; }
.lp-w-62 { width: 62%; }
.lp-w-63 { width: 63%; }
.lp-w-64 { width: 64%; }
.lp-w-65 { width: 65%; }
.lp-w-66 { width: 66%; }
.lp-w-67 { width: 67%; }
.lp-w-68 { width: 68%; }
.lp-w-69 { width: 69%; }
.lp-w-70 { width: 70%; }
.lp-w-71 { width: 71%; }
.lp-w-72 { width: 72%; }
.lp-w-73 { width: 73%; }
.lp-w-74 { width: 74%; }
.lp-w-75 { width: 75%; }
.lp-w-76 { width: 76%; }
.lp-w-77 { width: 77%; }
.lp-w-78 { width: 78%; }
.lp-w-79 { width: 79%; }
.lp-w-80 { width: 80%; }
.lp-w-81 { width: 81%; }
.lp-w-82 { width: 82%; }
.lp-w-83 { width: 83%; }
.lp-w-84 { width: 84%; }
.lp-w-85 { width: 85%; }
.lp-w-86 { width: 86%; }
.lp-w-87 { width: 87%; }
.lp-w-88 { width: 88%; }
.lp-w-89 { width: 89%; }
.lp-w-90 { width: 90%; }
.lp-w-91 { width: 91%; }
.lp-w-92 { width: 92%; }
.lp-w-93 { width: 93%; }
.lp-w-94 { width: 94%; }
.lp-w-95 { width: 95%; }
.lp-w-96 { width: 96%; }
.lp-w-97 { width: 97%; }
.lp-w-98 { width: 98%; }
.lp-w-99 { width: 99%; }
.lp-w-100 { width: 100%; }

/* ---------- Tabel tarif ---------- */
.lp-panel {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
    overflow: hidden;
}

.lp-panel-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
}

.lp-pilih label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #344054;
}

.lp-pilih select {
    width: min(440px, 100%);
    height: 48px;
    padding: 0 2.6rem 0 1rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .9rem center;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: #101828;
    cursor: pointer;
}

.lp-pilih select:hover {
    border-color: #98a2b3;
}

.lp-pilih select:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.lp-panel-kosong {
    padding: 1.4rem;
}

.lp-panel-kaki {
    border-top: 1px solid #eef2f7;
    border-bottom: 0;
}

.lp-catatan {
    font-size: .8rem;
    color: #667085;
}

.lp-tabel-wadah {
    overflow-x: auto;
}

.lp-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.lp-tabel th {
    padding: .7rem 1.4rem;
    background: #f9fafb;
    border-bottom: 1px solid #eef2f7;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667085;
    text-align: left;
    white-space: nowrap;
}

.lp-tabel td {
    padding: .8rem 1.4rem;
    border-bottom: 1px solid #f2f4f7;
    vertical-align: top;
}

.lp-tabel tbody tr {
    transition: background .15s ease;
}

.lp-tabel tbody tr:hover td {
    background: #f9fbff;
}

.lp-tabel tr:last-child td {
    border-bottom: 0;
}

.lp-kanan {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lp-tebal {
    font-weight: 700;
    color: #101828;
}

.lp-kelompok,
.lp-baris-masuk > td > .lp-kelompok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 800;
    font-size: .9rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    animation: lpGeserMasuk .4s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: inherit;
}

.lp-badge {
    display: inline-block;
    margin-top: .3rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #fff4ec;
    color: #c4320a;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.lp-rincian-tombol {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
    padding: .25rem .65rem;
    border: 1px solid #dbe6ff;
    border-radius: 999px;
    background: #f5f8ff;
    color: #2563eb;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}

.lp-rincian-tombol:hover {
    background: #eff6ff;
    border-color: #b2ccff;
}

.lp-rincian-tombol svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.lp-rincian-tombol[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.lp-rincian {
    display: none;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: #475467;
}

.lp-rincian.buka {
    display: block;
}

.lp-rincian li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
    border-bottom: 1px dashed #eaecf0;
    max-width: 420px;
}

/* Animasi pergantian data tabel UKT saat prodi diganti */
#tabelUkt {
    transition: opacity .15s ease;
}

#tabelUkt.lp-keluar {
    opacity: 0;
}

.lp-baris-masuk {
    animation: lpBarisMasuk .4s cubic-bezier(.2, .7, .3, 1) both;
}

.lp-baris-masuk > td > *:not(.lp-kelompok) {
    display: inline-block;
    animation: lpGeserMasuk .4s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: inherit;
}

/* baris muncul bergantian (tanpa style inline dari JS) */
.lp-baris-masuk:nth-child(2) { animation-delay: 45ms; }
.lp-baris-masuk:nth-child(3) { animation-delay: 90ms; }
.lp-baris-masuk:nth-child(4) { animation-delay: 135ms; }
.lp-baris-masuk:nth-child(5) { animation-delay: 180ms; }
.lp-baris-masuk:nth-child(6) { animation-delay: 225ms; }
.lp-baris-masuk:nth-child(7) { animation-delay: 270ms; }
.lp-baris-masuk:nth-child(8) { animation-delay: 315ms; }
.lp-baris-masuk:nth-child(n + 9) { animation-delay: 360ms; }

@keyframes lpBarisMasuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lpGeserMasuk {
    from { transform: translateY(8px); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-baris-masuk, .lp-baris-masuk > td > *, .lp-baris-masuk > td > .lp-kelompok { animation: none; }
    #tabelUkt { transition: none; }
}

/* ---------- Blok per menu (digulir vertikal) ----------
   Tiap blok minimal setinggi layar di bawah top bar, isinya di tengah vertikal: klik menu = satu
   layar penuh berisi bagian itu saja (judul blok berikutnya tidak ikut terlihat). Blok yang isinya
   lebih tinggi dari layar (mis. tabel UKT) tumbuh mengikuti isi. svh = tinggi layar ponsel saat
   bilah alamat tampil, agar blok tidak lebih tinggi dari layar yang benar-benar terlihat. */
.lp-blok {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--lp-tinggi-nav));
    min-height: calc(100svh - var(--lp-tinggi-nav));
}

/* dua bagian dalam satu blok (Cakupan & Sivitas): jarak antar bagian lebih rapat */
.lp-blok > .lp-bagian + .lp-bagian {
    padding-top: 0;
}

/* ---------- Footer ---------- */
.lp-footer {
    padding: 1.5rem 0;
    border-top: 1px solid #eef2f7;
    font-size: .84rem;
    color: #667085;
}

.lp-footer .lp-wadah {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
    /* banner di atas, kartu 2 kolom di bawahnya; badge turun ke bawah teks agar kartu sempit tidak meluber */
    .lp-periode-grid { grid-template-columns: 1fr; }
    .lp-utama-persegi { min-height: 0; }
    .lp-periode-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-jadwal { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .lp-jadwal .lp-status { grid-column: 2; justify-self: start; }
    .lp-bank-grid { --kolom: 3; }
}

/* menu jadi panel tarik-turun di bawah 1200px: logo + 6 menu + tombol "Dashboard Operator" butuh lebar sekitar 1100px */
@media (max-width: 1199.98px) {
    .lp-menu-tombol { display: inline-flex; margin-left: auto; }
    .lp-menu {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: .5rem;
        border-radius: 16px;
        background: #1e40af;
        box-shadow: 0 1rem 2rem rgba(15, 23, 42, .25);
    }
    .lp-menu.buka { display: flex; }
    .lp-menu a { padding: .7rem .9rem; }
    .lp-menu a.aktif::after { left: auto; right: .9rem; bottom: 50%; margin: 0 0 -1.5px; }
}

@media (max-width: 991.98px) {
    .lp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .lp-wadah { padding: 0 16px; }
    /* tombol "Dashboard Operator" tidak muat di top bar ponsel: pindah ke panel menu, tetap berlabel lengkap */
    .lp-nav-dashboard { display: none; }
    .lp-menu .lp-menu-dashboard { display: flex; justify-content: center; margin-top: .35rem; padding: 0 1rem; color: #fff; }
    .lp-menu .lp-menu-dashboard:hover { background: #e05a00; }
    .lp-periode-kolom { grid-template-columns: 1fr; }
    .lp-bank-grid { --kolom: 2; }
    /* diagram batang mendatar: nama di atas, batang (lebar lp-w-N) + persen di kanan */
    .lp-diagram-area { grid-template-columns: 1fr; padding: 1rem; }
    .lp-diagram-sumbu { display: none; }
    .lp-diagram-isi { flex-direction: column; gap: .85rem; }
    .lp-diagram-nama { order: 0; margin: 0 0 .3rem; text-align: left; font-size: .84rem; }
    .lp-diagram-jalur { height: 14px; justify-content: flex-start; padding-right: 3.75rem; border: 0; background: none; }
    .lp-diagram .lp-diagram-batang { height: 100%; border-radius: 999px; animation-name: lpMelebar; }
    .lp-diagram-batang b { left: 100%; bottom: 50%; margin: 0 0 0 .5rem; transform: translateY(50%); font-size: .85rem; }
    .lp-bank { height: 104px; padding: 1rem; }
    .lp-bank img { max-height: 52px; }
    .lp-grid-2, .lp-grid-3, .lp-grid-4 { grid-template-columns: 1fr; }
    .lp-merek-desk { display: none; }
    .lp-tabel th, .lp-tabel td { padding-left: 1rem; padding-right: 1rem; }
}