:root {
    --primary-green: #090d51;
    --primary-green-dark: #070b57;
    --header-top: #070b57;
    --navy-btn: #090d51;
    --navy-btn-hover: #0a1b2d;
    --text-dark: #1f2937;
    --text-muted: #090d51;
    --border-color: #11151a;
}

* {
    .main-wrapper {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 60px 30px 100px; /* Ruang atas dan bawah */
    min-height: 450px;         /* Memastikan ada ruang scroll sebelum menyentuh footer */
}
}.main-footer {
    width: 100%;
    background-color: var(--primary-green);
    color: #ffffff;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Jangan gunakan fixed atau absolute */
    clear: both;
}

    html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    color: var(--text-dark);
    min-height: 100%; /* Gunakan min-height 100%, jangan gunakan height: 100vh */
    overflow-x: hidden; /* Mencegah geser ke samping */
    overflow-y: auto;   /* Memastikan scroll ke bawah selalu aktif */
}


/* TOP HEADER BAR */
.top-bar {
    background-color: var(--header-top);
    color: #070b57;
    font-size: 13px;
    padding: 8px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.top-info {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.top-info a {
    color: #e2ece7;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    transition: color 0.2s;
}

.top-info a:hover {
    color: #ffffff;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box input {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 6px 14px 6px 34px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    width: 200px;
    transition: all 0.25s;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-box input:focus {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: #ffffff;
    width: 240px;
}

.search-box i {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* NAVBAR UTAMA */
.main-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.nav-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; /* Mengubah posisi wadah ke kiri */
    align-items: center;
    padding: 0 40px; /* Jarak batas dari sisi paling kiri layar */
    min-height: 72px;
}

.nav-menu-center {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Menu berjejer mulai dari kiri */
    gap: 150px; /* Jarak antar menu */
    width: auto;
}

.nav-link {
    text-decoration: none;
    color: var(--primary-green);
    font-weight: 700;
    font-size: 19px; /* Ukuran teks diperbesar (sebelumnya 16px) */
    letter-spacing: -0.2px;
    position: relative;
    padding: 8px 0;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #070b57;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2.5px;
    background: var(--primary-green);
    transition: width 0.25s;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: var(--primary-green);
    transition: width 0.25s;
}

.nav-link:hover::after {
    width: 100%;
}

/* LOGO EMBLEM TENGAH */
.center-logo-wrapper {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 16px 28px 14px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 60;
    border: 1px solid #eee;
    border-top: none;
}

.logo-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.logo-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #070b57, #070b57);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.18);
    margin-bottom: 4px;
}

.logo-brand {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #070b57;
    line-height: 1.1;
}

.logo-sub {
    font-size: 8.5px;
    font-weight: 700;
    color: #070b57;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-top: 2px;
    line-height: 1.2;
}

/* 3. HERO BANNER PERSIS SEPERTI GAMBAR */
/* ===================================================
   HERO SECTION MODERN & INTERAKTIF
   =================================================== */
.hero-section {
    position: relative;
    min-height: 520px;
    background-image: 
        linear-gradient(115deg, rgba(7, 34, 23, 0.94) 0%, rgba(11, 69, 44, 0.85) 45%, rgba(15, 23, 42, 0.65) 100%),
        url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 70px 30px;
    overflow: hidden;
    border-bottom: 3px solid #090d51;
}

/* Ambient light effect di sudut kiri */
.hero-backdrop-glow {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #070b57(16, 185, 129, 0.28) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.hero-container {
    max-width: 1250px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 780px;
}

/* 1. Badge Status */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    padding: 7px 16px;
    border-radius: 9999px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.pulse-dot {
    width: 9px;
    height: 9px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 #ffffff(52, 211, 153, 0.7);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 #090d51(52, 211, 153, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* 2. Headline & Tipografi */
.hero-title {
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 14px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.text-gradient {
    color: #60a5fa !important;
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

.hero-subtitle {
    font-size: 19px;
    font-weight: 500;
    color: #e2e8f0;
    line-height: 1.5;
    margin-bottom: 32px;
    max-width: 640px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 3. Tombol Aksi */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 42px;
}


.btn-primary-hero:hover {
    background-color: #1d4ed8 !important; /* Biru sedikit lebih gelap saat disentuh kursor */
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(37, 99, 235, 0.65) !important;
}

.btn-primary-hero:hover {
    background-color: #090d51;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px #090d51(16, 185, 129, 0.65);
}

.btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    font-weight: 600;
    font-size: 14px;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* 4. Stat Grid Glassmorphism */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 680px;
}

.stat-card {
    background: rgba(15, 35, 25, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s, border-color 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: #070b57(52, 211, 153, 0.5);
}

.stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #070b57(16, 185, 129, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.stat-label {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 2px;
    font-weight: 500;
}

/* Responsif Mobile & Tablet */
@media (max-width: 768px) {
    .hero-title {
        font-size: 34px;
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .hero-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
/* ===================================================
   KARTU LAYANAN & DOKUMEN MUTU (SEPERTI REFERENSI)
   =================================================== */
.cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

/* Garis aksen hijau pada kartu yang aktif/fokus */
.feature-card.active-card {
    border-left: 4.5px solid #090d51;
}

/* Wadah Ikon */
.card-icon {
    width: 56px;
    height: 56px;
    background-color: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #070b57;
    flex-shrink: 0;
}

/* Teks Judul & Deskripsi */
.card-body {
    flex: 1;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.card-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Tautan Aksi Sisi Kanan */
.card-action {
    flex-shrink: 0;
}

/* Tautan eksternal berwarna biru khas link */
.btn-card-link.link-blue {
    color: #0284c7; /* Warna biru cerah */
    border-color: #0284c7;
}

.btn-card-link.link-blue:hover {
    color: #0369a1; /* Biru lebih pekat saat kursor diarahkan */
    border-color: #0369a1;
}

.btn-card-link.link-blue i {
    color: inherit;
}

/* Warna hijau untuk kartu aktif */
.btn-card-link.active-link {
    color: #070b57;
    border-color: #070b57;
}

/* Tampilan Responsif Mobile */
@media (max-width: 768px) {
    .feature-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }
    
    .card-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}
/* Header Khusus Halaman Dokumen */
.page-header-spmi {
    background: linear-gradient(120deg, #070b57 0%, #090d51 60%, #090d51 100%);
    color: #ffffff;
    padding: 50px 30px;
    border-bottom: 3px solid #090d51;
}

.page-header-content {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-spmi {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #a7f3d0;
    margin-bottom: 12px;
}

.breadcrumb-spmi a {
    color: #ffffff;
    text-decoration: none;
}

.page-title-spmi {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 10px 0;
}

.page-desc-spmi {
    font-size: 16px;
    color: #e2e8f0;
    margin: 0;
    max-width: 650px;
}

.spmi-page-wrapper {
    padding-top: 40px;
    padding-bottom: 80px;
}

/* 4 Pilar Kartu Ringkasan */
.spmi-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.pillar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pillar-card:hover {
    transform: translateY(-4px);
    border-color: #090d51;
}

.pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.bg-green-soft { background: #dcfce7; color: #090d51; }
.bg-emerald-soft { background: #d1fae5; color: #090d51; }
.bg-teal-soft { background: #ccfbf1; color: #090d51; }
.bg-lime-soft { background: #ecfccb; color: #070b57; }

.pillar-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.pillar-card p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 14px 0;
}

.pillar-count {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    background: #f1f5f9;
    color: #090d51;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Tabel Repositori */
.doc-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.doc-table-header {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 16px;
}

.doc-table-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.doc-table-header p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

.table-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
}

.table-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
}

.custom-spmi-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.custom-spmi-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.custom-spmi-table td {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-size: 14px;
}

.badge-code {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
}

.sub-meta {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
}

.tag-category {
    background: #e6f4ea;
    color: #090d51;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 9999px;
}

.btn-download-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #090d51;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-download-doc:hover {
    background: #090d51;
}

@media (max-width: 900px) {
    .spmi-pillars-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .spmi-pillars-grid {
        grid-template-columns: 1fr;
    }
}
/* ===================================================
   PANEL UPLOAD DOKUMEN MERIAH & MODERN
   =================================================== */
.upload-feature-card {
    position: relative;
    background: linear-gradient(135deg, #090d51 0%, #090d51 65%, #090d51 100%);
    border-radius: 18px;
    padding: 36px 40px;
    margin-bottom: 45px;
    box-shadow: 0 16px 35px -8px rgba(12, 106, 65, 0.4);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Ambient glow di sudut */
.upload-decor-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, #090d51(52, 211, 153, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.upload-card-content {
    position: relative;
    z-index: 2;
}

.upload-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #a7f3d0;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

.upload-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.upload-desc {
    font-size: 14px;
    color: #d1fae5;
    margin: 0 0 24px 0;
    max-width: 650px;
    line-height: 1.5;
}

/* Form Layout */
.form-inputs-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.input-field-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.input-field-group input,
.input-field-group select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.input-field-group input:focus,
.input-field-group select:focus {
    background: #ffffff;
    border-color: #090d51;
    box-shadow: 0 0 0 3px #090d51(52, 211, 153, 0.3);
}

/* Kotak Dropzone Interaktif */
.dropzone-box {
    background: rgba(255, 255, 255, 0.08);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 22px;
}

.dropzone-box:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #090d51;
    transform: translateY(-2px);
}

.dropzone-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #090d51(52, 211, 153, 0.25);
    color: #090d51;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.dropzone-info {
    display: flex;
    flex-direction: column;
}

.dropzone-info strong {
    font-size: 14.5px;
    color: #ffffff;
    font-weight: 600;
}

.dropzone-info .highlight-link {
    color: #6ee7b7;
    text-decoration: underline;
}

.dropzone-info span {
    font-size: 12px;
    color: #cbd5e1;
    margin-top: 3px;
}

/* Baris Tombol Aksi */
.upload-submit-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.secure-note {
    font-size: 12.5px;
    color: #a7f3d0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.btn-submit-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #090d51 0%, #090d51 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 28px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 20px #090d51(16, 185, 129, 0.4);
    transition: all 0.25s ease;
}

.btn-submit-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px #090d51(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #090d51 0%, #090d51 100%);
}

@media (max-width: 768px) {
    .upload-feature-card {
        padding: 24px 20px;
    }
    .form-inputs-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .dropzone-box {
        flex-direction: column;
        text-align: center;
    }
    .upload-submit-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-submit-upload {
        justify-content: center;
    }
}

/* ===================================================
   ACTION TOOLBAR MULTIFUNGSI (COMPACT & MODERN)
   =================================================== */
.spmi-action-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    flex-wrap: wrap;
}

/* Tabs Filter Kategori */
.toolbar-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tab-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-pill:hover {
    color: #090d51;
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.tab-pill.active {
    background: #e6f4ea;
    color: #090d51;
    border-color: #a7f3d0;
}

/* Pencarian & Tombol Unggah */
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 12px;
    color: #64748b;
}

.search-input-group input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1e293b;
    width: 170px;
}

.btn-open-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #090d51;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(12, 106, 65, 0.25);
    transition: all 0.2s ease;
}

.btn-open-upload:hover {
    background: #094d30;
    transform: translateY(-1px);
}

/* ===================================================
   MODAL POPUP UNGGAH DOKUMEN ELEGAN
   =================================================== */
.upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    padding: 20px;
    box-sizing: border-box;
}

.upload-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.upload-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 520px;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(15px);
    transition: transform 0.25s ease;
}

.upload-modal-overlay.active .upload-modal-card {
    transform: translateY(0);
}

.modal-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e6f4ea;
    color: #090d51;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.modal-subtitle {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.btn-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Dropzone Bersih di Dalam Modal */
.compact-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0 16px 0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compact-dropzone:hover {
    border-color: #090d51;
    background: #f0fdf4;
}

.dz-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.compact-dropzone:hover .dz-icon-wrap {
    background: #dcfce7;
    color: #090d51;
}

.dz-text-wrap strong {
    font-size: 13.5px;
    color: #1e293b;
    display: block;
}

.dz-text-wrap .text-highlight {
    color: #0c6a41;
    text-decoration: underline;
}

.dz-text-wrap span.file-size-tip {
    font-size: 12px;
    color: #64748b;
}

/* Form Input Modal */
.modal-input-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.modal-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.modal-field input,
.modal-field select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13.5px;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.modal-field input:focus,
.modal-field select:focus {
    border-color: #090d51;
    box-shadow: 0 0 0 3px rgba(12, 106, 65, 0.15);
}

.modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cancel {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel:hover {
    background: #e2e8f0;
}

.btn-confirm-upload {
    background: #090d51;
    color: #ffffff;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: 0 2px 8px #090d51(12, 106, 65, 0.3);
}

.btn-confirm-upload:hover {
    background: #090d51;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .spmi-action-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar-actions {
        flex-direction: column;
    }
    .search-input-group,
    .search-input-group input,
    .btn-open-upload {
        width: 100%;
        box-sizing: border-box;
    }
    .btn-open-upload {
        justify-content: center;
    }
}

/* ===================================================
   PANEL UPLOAD 1 BARIS (SLIM, HORIZONTAL, RAPI)
   =================================================== */
.upload-bar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border-left: 4px solid #090d51;
}

.upload-bar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
    padding-right: 20px;
}

.upload-bar-title .icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #e6f4ea;
    color: #090d51;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.upload-bar-title h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.upload-bar-title p {
    font-size: 11.5px;
    color: #64748b;
    margin: 2px 0 0 0;
}

/* Form Input Berjejer 1 Baris */
.upload-inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.flex-name { flex: 2.2; }
.flex-cat  { flex: 1.4; }
.flex-file { flex: 1.6; }

.upload-inline-form input[type="text"],
.upload-inline-form select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    background: #f8fafc;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s;
}

.upload-inline-form input[type="text"]:focus,
.upload-inline-form select:focus {
    background: #ffffff;
    border-color: #090d51;
    box-shadow: 0 0 0 2px rgba(12, 106, 65, 0.12);
}

.file-picker-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: #f8fafc;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    font-size: 12.5px;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.file-picker-btn:hover {
    border-color: #090d51;
    color: #090d51;
}

.file-picker-btn i {
    color: #090d51;
}

.btn-action-upload {
    height: 38px;
    padding: 0 18px;
    background: #090d51;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-action-upload:hover {
    background: #090d51;
}

/* Responsif untuk Layar Kecil */
@media (max-width: 992px) {
    .upload-bar-card {
        flex-direction: column;
        align-items: stretch;
    }
    .upload-bar-title {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 12px;
    }
    .upload-inline-form {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-action-upload {
        justify-content: center;
    }
}

/* ===================================================
   COMPACT & LUXURY SPMI UPLOAD BAR (RAMPING & ELEGAN)
   =================================================== */
.spmi-compact-upload-bar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-left: 5px solid #090d51;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

/* Info Kiri */
.scub-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid #e2e8f0;
}

.scub-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #090d51 0%, #090d51 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(12, 106, 65, 0.25);
}

.scub-text {
    display: flex;
    flex-direction: column;
}

.scub-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0c6a41;
    letter-spacing: 0.5px;
}

.scub-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

/* Form Inline */
.scub-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.scub-flex-name { flex: 2.2; }
.scub-flex-cat  { flex: 1.3; }

/* Wrapper Input dengan Ikon */
.scub-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.scub-input-group .input-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.scub-input-group input,
.scub-input-group select {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 34px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.scub-input-group input:focus,
.scub-input-group select:focus {
    border-color: #090d51;
    box-shadow: 0 0 0 3px rgba(12, 106, 65, 0.12);
}

/* Tombol File Ramping */
.scub-file-wrap {
    flex-shrink: 0;
}

.scub-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.scub-file-label:hover {
    border-color: #090d51;
    color: #090d51;
    background: #ecfdf5;
}

.scub-file-label.has-file {
    background: #e6f4ea;
    border-color: #090d51;
    color: #090d51;
}

/* Tombol Submit Cantik */
.scub-btn-submit {
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(135deg, #090d51 0%, #090d51 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(12, 106, 65, 0.3);
    transition: all 0.2s ease;
}

.scub-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #090d51(12, 106, 65, 0.4);
    background: linear-gradient(135deg, #090d51 0%, #070b57);
}

/* Penyesuaian Responsif Tablet & HP */
@media (max-width: 992px) {
    .spmi-compact-upload-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .scub-info {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 10px;
    }
    .scub-form {
        flex-direction: column;
        align-items: stretch;
    }
    .scub-btn-submit {
        justify-content: center;
    }
}

/* ===================================================
   BANNER HUBUNGI KAMI / SUPPORT CARD SPMI
   =================================================== */
.spmi-contact-banner {
    background: linear-gradient(135deg, #090d51 0%, #090d51 70%, #090d51 100%);
    border-radius: 16px;
    padding: 24px 32px;
    margin-top: 36px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(12, 106, 65, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

/* Aksen kilau lembut */
.spmi-contact-banner::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.contact-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-icon-box {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #a7f3d0;
    flex-shrink: 0;
}

.contact-badge {
    display: inline-block;
    background: rgba(167, 243, 208, 0.2);
    color: #a7f3d0;
    border: 1px solid rgba(167, 243, 208, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.contact-text-box h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.contact-text-box p {
    margin: 0;
    font-size: 13.5px;
    color: #e2e8f0;
    max-width: 560px;
    line-height: 1.45;
}

/* Tombol Aksi Kontak */
.contact-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-email {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-email:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #090d51;
    color: #ffffff;
    box-shadow: 0 4px 14px #090d51(37, 211, 102, 0.35);
}

.btn-whatsapp:hover {
    background: #090d51;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px #090d51(37, 211, 102, 0.5);
}

/* Responsif Mobile & Layar Kecil */
@media (max-width: 900px) {
    .spmi-contact-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .contact-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .contact-action-buttons {
        width: 100%;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    .btn-contact {
        flex: 1;
        justify-content: center;
    }
}
.hero-section {
    position: relative;
    min-height: 520px;
    background-image: 
        linear-gradient(115deg, rgba(15, 23, 62, 0.88) 0%, rgba(30, 58, 110, 0.72) 50%, rgba(15, 23, 42, 0.45) 100%),
        url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 70px 30px;
    overflow: hidden;
    border-bottom: 3px solid #012b85;
}
/* Layout & Hero SPMI */
.spmi-page-body {
    background-color: #f8fafc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #1e293b;
}

.spmi-hero-section {
    background: radial-gradient(circle at 10% 20%, #030b2c 0%, #012b85 90%);
    color: #ffffff;
    padding: 45px 20px 75px 20px;
}

.spmi-hero-container {
    max-width: 1100px;
    margin: 0 auto;
}

.spmi-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.spmi-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.spmi-breadcrumb a:hover {
    color: #ffffff;
}

.spmi-breadcrumb .active {
    color: #60a5fa;
    font-weight: 600;
}

.spmi-hero-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.spmi-hero-subtitle {
    font-size: 14px;
    color: #cbd5e1;
    margin: 0;
    max-width: 650px;
}

/* Container Konten Utama */
.spmi-main-container {
    max-width: 1300px;
    margin: -40px auto 60px auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card Bar Upload */
.admin-upload-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.upload-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1.5px solid #e2e8f0;
    padding-right: 20px;
}

.upload-badge i {
    font-size: 26px;
    color: #081a4b;
}

.upload-badge .sub-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    letter-spacing: 0.5px;
}

.upload-badge strong {
    font-size: 14px;
    color: #0f172a;
}

.upload-form-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.input-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    background: #ffffff;
    flex-grow: 1;
}

.input-field i {
    color: #94a3b8;
    font-size: 14px;
}

.input-field input,
.input-field select {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
    color: #334155;
}

.btn-file-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-submit-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #081a4b;
    color: #ffffff;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-submit-upload:hover {
    background: #0f2766;
    box-shadow: 0 4px 14px rgba(8, 26, 75, 0.3);
}

/* Card Tabel */
.table-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.table-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-header-bar h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f2a11;
}

.table-header-bar p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.table-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    background: #f8fafc;
    width: 240px;
}

.table-search-box i {
    color: #94a3b8;
    font-size: 13px;
}

.table-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
}

/* Desain Tabel */
.custom-spmi-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-spmi-table thead tr {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.custom-spmi-table th {
    padding: 12px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #475569;
    text-align: left;
}

.custom-spmi-table td {
    padding: 16px;
    font-size: 13.5px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.custom-spmi-table tr:last-child td {
    border-bottom: none;
}

.sk-code {
    font-weight: 600;
    color: #475569;
    font-family: monospace;
    font-size: 13px;
}

.official-name {
    font-weight: 700;
    color: #0f172a;
}

.official-role {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.badge-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #ecfdf5;
    color: #1d4ed8;
}

.badge-tag.prodi {
    background: #eff6ff;
    color: #1d4ed8;
}

.year-tag {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

.btn-action-unduh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #081a4b;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-action-unduh:hover {
    background: #1e3a8a;
    box-shadow: 0 4px 12px rgba(8, 26, 75, 0.25);
    transform: translateY(-1px);
}

/* Banner Dukungan Bawah */
.support-banner-card {
    background: radial-gradient(circle at top left, #0e1e5b, #030b2c);
    border-radius: 14px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
}

.support-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.support-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #93c5fd;
}

.support-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.5px;
}

.support-text h4 {
    margin: 3px 0 5px 0;
    font-size: 17px;
    font-weight: 700;
}

.support-text p {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
}

.support-actions {
    display: flex;
    gap: 12px;
}

.btn-support {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-email {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-email:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-wa {
    background: #ffffff;
    color: #030b2c;
}

.btn-wa:hover {
    background: #f1f5f9;
}

.text-center { text-align: center; }
.font-bold { font-weight: 700; }

/* Styling Khusus Halaman Auditor */
.auditor-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auditor-avatar {
    width: 36px;
    height: 36px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.auditor-cert {
    display: block;
    font-size: 11.5px;
    color: #64748b;
    margin-top: 1px;
}

.doc-title-text {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.4;
}

.year-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
}

.badge-tag.sk {
    background: #fef3c7;
    color: #b45309;
}

.text-muted {
    color: #94a3b8;
}

/* Styling Khusus Tab & Badge RTM / RTL */
.table-tools-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.category-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.category-tabs .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tabs .tab-btn.active {
    background: #ffffff;
    color: #081a4b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.text-code {
    color: #475569;
    font-size: 13px;
    font-family: monospace;
}

.doc-sub {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Badge Kategori RTM & RTL */
.badge-rtm {
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 700;
}

.badge-rtl {
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
}

/* Tab Switcher Sign In & Sign Up */
.auth-tabs {
    display: flex;
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 24px;
    gap: 4px;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.auth-tab:hover {
    color: #1e3a8a;
}

.auth-tab.active {
    background-color: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Teks Bawah Tombol Login */
.auth-bottom-text {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #64748b;
}

.auth-bottom-text a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.auth-bottom-text a:hover {
    text-decoration: underline;
}


.btn-profile-icon {
    margin-left: auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    border: 1.5px solid #dbeafe;
    font-size: 17px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

/* Efek saat diarahkan kursor (Hover) */
.btn-profile-icon:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -2px rgba(37, 99, 235, 0.35);
}

/* Efek saat diklik */
.btn-profile-icon:active {
    transform: scale(0.95);
}

/* Efek saat kursor diarahkan ke tombol */
.btn-logout-icon:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(239, 68, 68, 0.4);
}
/* Buat navbar utama sebagai patokan layar */
.main-navbar {
    position: relative;
}

/* HANYA ikon profil yang dipindahkan ke pojok kanan */
.btn-profile-icon {
    position: absolute !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99;
}
/* Container Dropdown di Pojok Kanan */
.profile-dropdown-container {
    position: absolute !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999;
}

/* Tombol Ikon */
.btn-profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: #EEF2F6;
    color: #1E3A8A;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s;
}

.btn-profile-icon:hover {
    background-color: #E2E8F0;
}

/* Box Card Dropdown */
.profile-dropdown-menu {
    display: none; /* Disembunyikan saat default */
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    width: 270px;
    background-color: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #E2E8F0;
    overflow: hidden;
    animation: fadeInMenu 0.2s ease-in-out;
}

.profile-dropdown-menu.active {
    display: block; /* Ditampilkan saat diklik */
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header Avatar di Dalam Menu */
.profile-header-card {
    background-color: #F8FAFC;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F1F5F9;
}

.profile-avatar-circle {
    width: 42px;
    height: 42px;
    background-color: #1E3A8A;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.profile-info-text {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-weight: 600;
    font-size: 14px;
    color: #0F172A;
}

.profile-role {
    font-size: 12px;
    color: #64748B;
}

/* Daftar Opsi Menu */
.profile-menu-list {
    padding: 8px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: #334155;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item i {
    width: 18px;
    color: #64748B;
    font-size: 15px;
}

.dropdown-item:hover {
    background-color: #F1F5F9;
    color: #1E3A8A;
}

.dropdown-item:hover i {
    color: #1E3A8A;
}

.dropdown-divider {
    height: 1px;
    background-color: #F1F5F9;
    margin: 6px 0;
}

/* Opsi Logout Warna Merah */
.dropdown-item.logout-item:hover {
    background-color: #FEF2F2;
    color: #DC2626;
}

.dropdown-item.logout-item:hover i {
    color: #DC2626;
}
.upload-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.input-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 150px;
}

.input-select-wrap .select-icon {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.input-select-wrap .arrow-icon {
    position: absolute;
    right: 14px;
    color: #64748b;
    font-size: 11px;
    pointer-events: none;
}

.custom-select {
    width: 100%;
    height: 44px;
    padding: 0 34px 0 38px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background-color: #ffffff;
    font-size: 13.5px;
    font-family: inherit;
    color: #334155;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
}

.custom-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}




/* ===================================================
   FOOTER LEMBAGA PENJAMINAN MUTU UMPAR (BLUE THEME)
   =================================================== */
.custom-lpm-footer {
    background-color: #07122b; /* Biru gelap elegan senada dengan background portal */
    background-image: radial-gradient(at 100% 0%, rgba(37, 99, 235, 0.18) 0px, transparent 60%);
    color: #cbd5e1;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding-top: 50px;
    margin-top: 60px;
    width: 100%;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.footer-inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 25px 45px 25px;
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 1.2fr;
    gap: 45px;
}

/* Kolom 1: Profil & Brand */
.footer-logo-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.logo-emblem {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-text h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.brand-text span {
    font-size: 13.5px;
    color: #93c5fd;
    font-weight: 500;
}

.footer-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 24px;
    max-width: 380px;
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 0.2s;
}

.contact-pill-item:hover {
    color: #60a5fa;
}

.icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}

.contact-pill-item:hover .icon-circle {
    background: #2563eb;
    color: #ffffff;
}

/* Heading Garis Pembatas */
.footer-heading {
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.8px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.4);
    display: inline-block;
    width: 100%;
}

.footer-heading.sub {
    margin-top:  26px;
}

/* Kolom 2: Jam Operasional */
.schedule-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.schedule-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: #cbd5e1;
}

.schedule-row .day {
    font-weight: 500;
}

.schedule-row .time {
    font-weight: 700;
    color: #ffffff;
}

/* Badge Jam Istirahat */
.break-time-badge {
    background: #ffffff;
    color: #0f172a;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.badge-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.badge-hours {
    font-size: 13.5px;
    font-weight: 800;
    color: #1d4ed8; /* Biru primer */
}

/* Kolom 3: Alamat & Media Sosial */
.address-text-block {
    font-size: 13.5px;
    line-height: 1.65;
    color: #94a3b8;
}

.address-text-block strong {
    color: #ffffff;
    font-size: 14px;
}

.btn-instagram-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s, color 0.2s;
}

.btn-instagram-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
}

/* Baris Bawah Hak Cipta */
.footer-copyright-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 25px;
    text-align: center;
    font-size: 12.5px;
    color: #64748b;
    background: rgba(3, 7, 18, 0.5);
}

/* Responsif Mobile */
@media (max-width: 900px) {
    .footer-inner-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .footer-desc {
        max-width: 100%;
    }
}
/* Penyesuaian Logo UMPAR di Footer */
.logo-emblem {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer-heading.sub {
    margin-top: 24px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}
/* ===================================================
   ANIMASI ULTRA DYNAMIC & ELASTIS - CARD MENU LPM
   =================================================== */

/* Container Card Default */
.list-menu-item, 
.menu-card, 
.card-item,
div[class*="menu-item"] {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    margin-bottom: 18px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden; /* Menahan kilatan cahaya di dalam card */
    
    /* Transisi membal/pegas (Spring Effect) */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.05);
}

/* 1. Efek Kilau Cahaya (Shimmer Sweep) */
.list-menu-item::after, 
.menu-card::after, 
.card-item::after,
div[class*="menu-item"]::after {
    content: '';
    position: absolute;
    top: 10px;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.65), 
        rgba(59, 130, 246, 0.15), 
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
}

/* 2. Strip Indikator Neon Samping Kiri */
.list-menu-item::before,
.menu-card::before,
.card-item::before,
div[class*="menu-item"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #1d4ed8, #3b82f6, #60a5fa);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.8);
    opacity: 0;
    transform: scaleY(0.2);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================= SAAT KURSOR MENYENTUH (HOVER) ================= */

.list-menu-item:hover, 
.menu-card:hover, 
.card-item:hover,
div[class*="menu-item"]:hover {
    /* Gerakan melompat tegas ke atas, geser kanan, dan membesar */
    transform: translateY(-8px) translateX(10px) scale(1.015);
    border-color: #3b82f6;
    
    /* Bayangan 3D tebal bergradasi biru safir */
    box-shadow: 
        0 20px 35px -8px rgba(37, 99, 235, 0.22),
        0 10px 20px -6px rgba(15, 23, 42, 0.1);
}

/* Jalankan kilatan cahaya menyapu dari kiri ke kanan */
.list-menu-item:hover::after, 
.menu-card:hover::after, 
.card-item:hover::after,
div[class*="menu-item"]:hover::after {
    left: 160%;
    transition: all 0.75s ease-in-out;
}

/* Strip neon kiri langsung aktif memanjang dan bersinar */
.list-menu-item:hover::before,
.menu-card:hover::before,
.card-item:hover::before,
div[class*="menu-item"]:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Kotak icon berputar sedikit dan meloncat */
.list-menu-item:hover i,
.menu-card:hover i,
.card-item:hover i {
    transform: scale(1.22) rotate(-6deg);
    color: #1d4ed8;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

/* Judul teks menu menjadi biru tajam */
.list-menu-item:hover h3,
.list-menu-item:hover h4,
.menu-card:hover h3,
.menu-card:hover h4,
.card-item:hover h3,
.card-item:hover h4 {
    color: #1d4ed8;
    transform: translateX(4px);
    transition: all 0.3s ease;
}

/* Tautan 'Login Admin' di kanan meluncur maju */
.list-menu-item:hover a,
.menu-card:hover a,
.card-item:hover a,
.list-menu-item:hover span[class*="login"],
.card-item:hover span[class*="login"] {
    transform: translateX(6px) scale(1.05);
    color: #1d4ed8;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ===================================================
   ANIMASI ULTRA DYNAMIC & SPRING HOVER - FEATURE CARDS
   =================================================== */

.cards-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 1. Kondisi Normal Card */
.feature-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    overflow: hidden; /* Mengunci kilatan cahaya di dalam kartu */
    cursor: pointer;
    
    /* Transisi membal pegas (Spring Physics) */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05);
}

/* 2. Strip Indikator Neon Samping Kiri */
.feature-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #1d4ed8, #3b82f6, #60a5fa);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.85);
    opacity: 0;
    transform: scaleY(0.2);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* 3. Efek Kilau Cahaya (Shimmer Sweep) */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.8), 
        rgba(59, 130, 246, 0.2), 
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
}

/* ================= SAAT KURSOR HOVER ================= */

.feature-card:hover {
    /* Gerakan melompat tegas ke atas, geser kanan, dan sedikit membesar */
    transform: translateY(-9px) translateX(12px) scale(1.012);
    border-color: #3b82f6;
    
    /* Bayangan 3D tebal bergradasi biru safir */
    box-shadow: 
        0 22px 35px -8px rgba(37, 99, 235, 0.22),
        0 10px 20px -6px rgba(15, 23, 42, 0.08);
}

/* Strip neon kiri aktif memanjang penuh */
.feature-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Sapuan kilat cahaya menyeberang kartu */
.feature-card:hover::after {
    left: 160%;
    transition: all 0.75s ease-in-out;
}

/* Icon meloncat dan berputar sedikit dinamis */
.feature-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

.feature-card:hover .card-icon {
    transform: scale(1.18) rotate(-7deg);
    background-color: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

/* Card Body & Title */
.feature-card .card-body {
    flex-grow: 1;
}

.feature-card .card-title {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.3s ease, transform 0.3s ease;
}

.feature-card:hover .card-title {
    color: #1d4ed8;
    transform: translateX(4px);
}

.feature-card .card-desc {
    margin: 0;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
}

/* Tombol Action Kanan (Login / Tautan) */
.feature-card .card-action {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .card-action {
    transform: translateX(6px);
}

.feature-card .card-action a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
/* ===================================================
   HALAMAN PENJAMINAN MUTU EKSTERNAL (TEMA NAVY BLUE)
   =================================================== */

/* Hero Section Eksternal */
.external-hero {
    position: relative;
    min-height: 290px;
    background: #0f172a url('../img/gedung-umpar.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px 70px;
    overflow: hidden;
}

/* Overlay Biru Gradasi Transparan */
.external-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 58, 138, 0.85) 60%, rgba(29, 78, 216, 0.78) 100%);
    backdrop-filter: blur(2px);
}

.external-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-badge-subtle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 16px;
    border-radius: 30px;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.pulse-dot-blue {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 10px #60a5fa;
    display: inline-block;
}

.external-hero-title {
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.text-blue-glow {
    background: linear-gradient(135deg, #60a5fa, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.external-hero-desc {
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

/* Pita Metrik Prestasi di Bawah Hero (Deep Navy Blue) */
.external-metrics-bar {
    background: linear-gradient(90deg, #0f172a, #1e3a8a, #172554);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.4);
    padding: 22px 20px;
}

.metrics-bar-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.metric-item {
    flex: 1;
}

.metric-number {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.metric-label {
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
}

.metric-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
}

/* Tombol Aksi di Kartu Eksternal */
.btn-external-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #1e293b;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

.feature-card:hover .btn-external-action {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

/* Responsif Layar HP */
@media (max-width: 768px) {
    .external-hero-title {
        font-size: 28px;
    }
    .metrics-bar-container {
        flex-direction: column;
        gap: 16px;
    }
    .metric-divider {
        display: none;
    }
}
.external-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 90px;
    overflow: hidden;

    /* Tempel link gambarnya langsung di dalam url('...') */
    background: 
        linear-gradient(
            180deg, 
            rgba(15, 23, 42, 0.65) 0%, 
            rgba(26, 54, 138, 0.72) 45%, 
            rgba(15, 23, 42, 0.92) 100%
        ),
        url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1920&q=85') center 35% / cover no-repeat;
}
/* ===================================================
   HERO EKSTERNAL (OVERLAY BIRU TRANSPARAN & GEDUNG TERANG)
   =================================================== */

.external-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 90px;
    overflow: hidden;

    /* Gradasi dibuat sangat tipis/transparan (0.35 - 0.5) agar gedung jelas terlihat */
    background: 
        linear-gradient(
            180deg, 
            rgba(15, 23, 42, 0.35) 0%, 
            rgba(30, 64, 175, 0.40) 50%, 
            rgba(15, 23, 42, 0.65) 100%
        ),
        url('http://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1920&q=85') 
        center 30% / cover no-repeat;
}

/* Hapus atau buat overlay radial lebih ringan */
.external-hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent; /* Dinonaktifkan agar tidak menumpuk gelap */
    pointer-events: none;
}

/* Berikan shadow tegas pada tulisan agar tetap kontras dan sangat jelas terbaca */
.external-hero-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9);
}

.external-hero-desc {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
}
/* ===================================================
   TYPOGRAPHY SOFT BLUE GRADIENT (TIDAK SILAU & SOLID)
   =================================================== */

.external-hero-title {
    /* Gradasi Biru Lembut (Light Sky Blue ke Muted Steel Blue) */
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 55%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    
    /* Drop shadow lembut gelap di belakang huruf agar kontras tanpa efek silau/glow */
    filter: drop-shadow(0 3px 6px rgba(10, 20, 45, 0.75));
}

/* Hilangkan class glow lama agar tidak bentrok */
.text-blue-glow {
    background: inherit;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: inherit;
}

/* Subtitle pendukung di bawah judul */
.external-hero-desc {
    color: #93c5fd;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(10, 20, 45, 0.8);
}
.external-hero-title {
    /* Warna solid biru langit terang sesuai referensi */
    color: #6ba5e7 !important;
    -webkit-text-fill-color: #6ba5e7 !important;
    background: none !important;
    
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    
    /* Bayangan tipis gelap agar tegas dan tidak blur/gosong */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    filter: none !important;
}

/* Pastikan span di dalamnya mengikuti warna yang sama */
.external-hero-title span,
.text-blue-glow {
    color: #7cb3f3 !important;
    -webkit-text-fill-color: #7cb3f3 !important;
    background: none !important;
}

.external-hero-desc {
    color: #9ac2ef !important;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* ===================================================
   TYPOGRAPHY TWO-TONE ELEGAN (PUTIH + BIRU LANGIT)
   =================================================== */

.external-hero-title {
    /* Baris Utama: Putih Bersih Solid */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    filter: none !important;
    
    font-size: 44px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    
    /* Bayangan lembut gelap agar huruf tetap tegas di atas background */
    text-shadow: 0 2px 10px rgba(10, 20, 45, 0.6);
}

/* Kata 'Eksternal': Biru Langit Lembut Sesuai Foto Referensi */
.external-hero-title span,
.external-hero-title .highlight-blue,
.text-blue-glow {
    color: #5b9bd5 !important;
    -webkit-text-fill-color: #5b9bd5 !important;
    background: none !important;
    filter: none !important;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(10, 20, 45, 0.6);
}

/* Subjudul di Bawahnya */
.external-hero-desc {
    color: #cbd5e1 !important;
    font-size: 15.5px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(10, 20, 45, 0.7);
}
/* ===================================================
   BACKGROUND OVERLAY EKSTERNAL (PERSIS HERO INTERNAL)
   =================================================== */

.external-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 90px;
    overflow: hidden;

    /* Warna Slate/Midnight Navy persis seperti foto referensi */
    background: 
        linear-gradient(
            135deg, 
            rgba(11, 20, 38, 0.88) 0%,   /* Navy gelap di sudut kiri atas */
            rgba(16, 29, 56, 0.80) 50%,  /* Biru dongker lembut di tengah */
            rgba(12, 22, 43, 0.76) 100%  /* Transparan seimbang di sudut kanan bawah */
        ),
       url('../img/ayam.jpg') center 30% / cover no-repeat;
        center 30% / cover no-repeat;
}

/* Pastikan layer tambahan tidak menumpuk agar warnanya tidak jadi hitam/gelap ganda */
.external-hero-overlay {
    display: none;
}
/* ===================================================
   OPTIMASI AREA KONTEN (EFISIEN, PADAT & RAPI)
   =================================================== */

/* Perkecil padding atas dan bawah wrapper utama */
.main-wrapper {
    padding: 35px 20px 45px !important;
    min-height: auto !important; /* Mencegah jarak kosong yang dipaksa */
}

/* Ubah kartu menjadi grid 3 kolom horizontal */
.cards-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Kolom sejajar */
    gap: 20px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Sesuaikan tata letak isi tiap kartu agar proporsional ke bawah */
.cards-container .feature-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 26px 24px !important;
    margin-bottom: 0 !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* Posisi Ikon */
.cards-container .feature-card .card-icon {
    margin-bottom: 14px;
}

/* Posisi Teks */
.cards-container .feature-card .card-body {
    width: 100%;
    margin-bottom: 20px;
}

.cards-container .feature-card .card-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.cards-container .feature-card .card-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

/* Tombol Aksi memenuhi bagian bawah */
.cards-container .feature-card .card-action {
    width: 100%;
}

.cards-container .feature-card .btn-external-action {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Responsif: Jika dibuka di tablet / HP */
@media (max-width: 992px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .cards-container {
        grid-template-columns: 1fr !important;
    }
}
/* ===================================================
   UKURAN JUDUL HERO EKSTERNAL (BESAR SEPERTI INTERNAL)
   =================================================== */

.external-hero-title {
    /* Warna Putih Solid */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    filter: none !important;
    
    /* Ukuran font disesuaikan setara dengan hero internal */
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    margin-bottom: 16px !important;
    
    /* Bayangan tipis agar tetap kontras dan tajam */
    text-shadow: 0 3px 12px rgba(10, 20, 45, 0.65);
}

/* Kata 'Eksternal' */
.external-hero-title span,
.external-hero-title .highlight-blue,
.text-blue-glow {
    color: #5b9bd5 !important;
    -webkit-text-fill-color: #5b9bd5 !important;
    background: none !important;
    filter: none !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

/* Subjudul di bawahnya dibuat proporsional */
.external-hero-desc {
    color: #cbd5e1 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 2px 8px rgba(10, 20, 45, 0.7);
}

/* Responsif untuk layar tablet dan ponsel */
@media (max-width: 768px) {
    .external-hero-title,
    .external-hero-title span {
        font-size: 36px !important;
    }
    
    .external-hero-desc {
        font-size: 14.5px !important;
    }
} 
.hero-section {
    position: relative;
    min-height: 520px;
    
    /* Ganti tautan Unsplash dengan path file PNG lokal Anda */
    background-image: 
        linear-gradient(115deg, rgba(15, 23, 62, 0.88) 0%, rgba(30, 58, 110, 0.72) 50%, rgba(15, 23, 42, 0.45) 100%),
        url('../img/asep.jpg'); /* <-- Ganti 'nama-file-kamu.png' sesuai nama file asli di folder img */

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 70px 30px;
    overflow: hidden;
    border-bottom: 3px solid #012b85;
}
/* ===================================================
   HALAMAN KAMAR AKREDITASI NASIONAL (BLUE THEME)
   =================================================== */

.akred-hero {
    background: linear-gradient(135deg, #07122b 0%, #0d214d 60%, #081a4b 100%);
    padding: 55px 24px 75px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid #1d4ed8;
}

.akred-hero::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.akred-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
    box-sizing: border-box;
}

.akred-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.akred-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.akred-breadcrumb a:hover {
    color: #60a5fa;
}

.akred-hero-title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.akred-hero-desc {
    font-size: 15.5px;
    color: #cbd5e1;
    max-width: 750px;
    line-height: 1.6;
    margin: 0;
}

/* Kartu Akreditasi Institusi */
.institusi-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 32px;
    margin-top: -38px;
    margin-bottom: 36px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    z-index: 5;
}

.institusi-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.institusi-badge-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}

.institusi-text h3 {
    margin: 0 0 6px 0;
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
}

.institusi-text p {
    margin: 0;
    font-size: 13.5px;
    color: #64748b;
}

.institusi-status-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}

.grade-pill {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #bfdbfe;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-unduh-sk {
    background: #07122b;
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.btn-unduh-sk:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}

/* Toolbar Filter & Search */
.akred-filter-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 7px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn.active, 
.filter-btn:hover {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.search-prodi-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 14px;
    width: 250px;
}

.search-prodi-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    width: 100%;
    font-family: inherit;
}

/* Tabel Akreditasi */
.table-responsive-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin-bottom: 60px;
}

.table-custom-akred {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-custom-akred th {
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 20px;
    border-bottom: 1.5px solid #e2e8f0;
}

.table-custom-akred td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #1e293b;
    vertical-align: middle;
}

.table-custom-akred tr:hover {
    background-color: #fcfdfe;
}

/* Predikat Badge */
.badge-predikat {
    display: inline-block;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 12px;
    border-radius: 6px;
}

.badge-unggul { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-baik-sekali { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-baik { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }

.btn-action-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: #eff6ff;
    transition: all 0.2s ease;
}

.btn-action-doc:hover {
    background: #1d4ed8;
    color: #ffffff;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .institusi-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .institusi-status-badge {
        width: 100%;
        justify-content: space-between;
    }
    .akred-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-prodi-box {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ===================================================
   LEBAR WADAH AKREDITASI (SEIMBANG & PROPORSIONAL)
   =================================================== */

/* 1. Kembalikan main-wrapper ke batas wajar */
main.main-wrapper:has(.akred-container),
.main-wrapper {
    max-width: 80% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Ukuran container ideal (tidak terlalu lebar, tidak sempit) */
.akred-container {
    max-width: 1280px !important;  /* Ukuran standar desktop modern yang pas */
    width: 100% !important;         /* Memberi ruang nafas 5% di sisi kiri & kanan */
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* 3. Padding elemen di dalamnya dibuat proporsional */
.institusi-card {
    padding: 26px 32px !important;
    border-radius: 16px !important;
}

.akred-filter-toolbar {
    padding: 14px 20px !important;
    border-radius: 14px !important;
}

.search-prodi-box {
    width: 260px !important;
}

.table-custom-akred th {
    padding: 15px 22px !important;
    font-size: 13px !important;
}

.table-custom-akred td {
    padding: 16px 22px !important;
    font-size: 14px !important;
}
/* ===================================================
   PANGKAS JARAK KOSONG BAWAH (TABEL KE FOOTER)
   =================================================== */

/* 1. Rapatkan batas bawah kartu pembungkus tabel */
.table-responsive-card {
    margin-bottom: 20px !important; /* Dari sebelumnya 60px dipangkas ke 20px */
}

/* 2. Kurangi jarak dorong atas footer */
.custom-lpm-footer,
footer {
    margin-top: 25px !important;   /* Menghilangkan rongga kosong besar di atas footer */
    padding-top: 40px !important;
}

/* 3. Pastikan tidak ada min-height berlebih */
main.main-wrapper {
    min-height: auto !important;
}
.badge-fakultas {
    background-color: #eff6ff;
    color: #1d4ed8;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.badge-prodi {
    background-color: #f0fdf4;
    color: #15803d;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}
/* ===================================================
   STYLING KAMAR SERTIFIKASI ISO / STANDAR MUTU
   =================================================== */

.iso-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* 1. Metric / Stat Cards */
.iso-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.iso-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iso-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
}

.iso-stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.icon-blue { background: #eff6ff; color: #1d4ed8; }
.icon-emerald { background: #ecfdf5; color: #059669; }
.icon-amber { background: #fffbeb; color: #d97706; }

.iso-stat-val {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.iso-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
}

/* 2. Grid Showcase Piagam ISO */
.iso-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 25px;
}

.iso-card-item {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    position: relative;
}

.iso-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -8px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
}

.iso-card-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 22px;
    color: #ffffff;
    position: relative;
}

.iso-badge-status {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-aktif { background: #10b981; color: #ffffff; }
.status-surveillance { background: #f59e0b; color: #ffffff; }
.status-perpanjangan { background: #6366f1; color: #ffffff; }

.iso-code-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.iso-cert-no {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.iso-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
}

.iso-standar-nama {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}

.iso-detail-row {
    font-size: 13px;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.iso-detail-row .label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}

.iso-detail-row .value {
    font-weight: 600;
    color: #334155;
}

.iso-card-footer {
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.iso-period {
    font-size: 12px;
    color: #64748b;
}

.iso-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.iso-btn-download:hover {
    background: #2563eb;
    color: #ffffff;
}

/* 3. Alert / Notifikasi */
.iso-alert-success {
    background: #dcfce7;
    color: #166534;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.iso-alert-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* ===================================================
   STYLING INOVATIF & MODERN - PROFIL BPM
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary-blue: #1d4ed8;
    --primary-blue-dark: #1e40af;
    --primary-blue-light: #eff6ff;
    --accent-cyan: #06b6d4;
    --text-dark: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --bg-page: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.25);
    --shadow-soft: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
    --shadow-hover: 0 20px 40px -10px rgba(29, 78, 216, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-body);
}

/* 1. HERO VIDEO LOOP DENGAN FROSTED GLASS EMBLEM */
.profil-hero-video-container {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 70vh;
    max-height: 640px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0b1329;
}

.profil-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.92) contrast(1.05);
}

/* Background container pendukung warna navy */
.profil-hero-video-container {
    background-color: #0a1c47;
}

/* Overlay Biru Deep Royal Navy (Sama persis dengan banner Eksternal) */
.profil-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg, 
        rgba(10, 28, 71, 0.45) 0%, 
        rgba(15, 41, 99, 0.70) 55%, 
        
    );
    z-index: 2;
}


.profil-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 850px;
    padding: 35px 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: heroFadeUp 0.9s ease-out;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(29, 78, 216, 0.25);
    border: 1px solid rgba(147, 197, 253, 0.4);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.profil-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 8px;
    color: #ffffff;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 30%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profil-hero-content p {
    font-size: 20px;
    font-weight: 500;
    color: #e2e8f0;
    letter-spacing: 0.5px;
    margin: 0;
}

/* 2. SECTION WRAPPER */
.profil-section {
    padding: 20px 20px;
    position: relative;
}

.profil-section.bg-soft {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
}

.profil-container {
    max-width: 1180px;
    margin: 0 auto;
}

.section-title-wrap {
    text-align: center;
    margin-bottom: 55px;
}

.section-tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 8px;
    display: block;
}

.section-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dark);
    position: relative;
    display: inline-block;
    letter-spacing: -0.5px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
    border-radius: 4px;
}

/* 3. SAMBUTAN KEPALA BPM (EXECUTIVE SUITE DESIGN) */
.sambutan-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: center;
    background: #ffffff;
    border-radius: 28px;
    padding: 40px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-soft);
}

.kepala-visual-wrap {
    position: relative;
}

.kepala-visual-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.15), rgba(6, 182, 212, 0.15));
    border-radius: 24px;
    z-index: 1;
    transform: rotate(-2deg);
}

.kepala-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px -8px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.kepala-img-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.kepala-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.kepala-card:hover .kepala-img-wrap img {
    transform: scale(1.05);
}

.kepala-info {
    padding: 22px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

.kepala-info h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.35;
}

.kepala-info span {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-blue);
    background: var(--primary-blue-light);
    padding: 4px 12px;
    border-radius: 30px;
}

.sambutan-content {
    position: relative;
}

.sambutan-content .quote-icon {
    font-size: 50px;
    color: #dbeafe;
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: 0;
    opacity: 0.6;
}

.sambutan-header {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.sambutan-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.sambutan-body {
    position: relative;
    z-index: 1;
}

.sambutan-body p {
    font-size: 15px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 18px;
    text-align: justify;
}

.sambutan-ppepp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.ppepp-pill {
    background: #f1f5f9;
    color: #1e293b;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.ppepp-pill i {
    color: var(--primary-blue);
}

.ppepp-pill:hover {
    background: var(--primary-blue);
    color: #ffffff;
}

.ppepp-pill:hover i {
    color: #ffffff;
}

/* 4. STRUKTUR ORGANISASI (HIERARCHY TREE DENGAN GLOW CONNECTOR) */
.org-chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}



.org-branch-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
}

.org-branch-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 17%;
    right: 17%;
    height: 3px;
    background: #cbd5e1;
    border-radius: 3px;
}

.org-branch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.org-branch-node::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    width: 3px;
    height: 25px;
    background: #cbd5e1;
    border-radius: 3px;
}

/* KARTU PEJABAT STRUKTURAL & STAF */
.member-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    text-align: center;
    transition: var(--transition);
    width: 100%;
    max-width: 255px;
    position: relative;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: #93c5fd;
}

.member-badge-level {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
    letter-spacing: 0.5px;
}

.member-img-wrap {
    width: 100%;
    height: 270px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}

.member-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.member-card:hover .member-img-wrap img {
    transform: scale(1.06);
}

.member-info {
    padding: 18px 16px;
    background: #ffffff;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid #f8fafc;
}

.member-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.35;
    margin-bottom: 5px;
}

.member-role {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1.3;
}

/* 5. GRID TIM STAF */
.staf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* 6. DOKUMEN HUB (MODERN GEOMETRIC CARDS) */
.dokumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.dokumen-card {
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    padding: 36px 30px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.dokumen-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
    opacity: 0;
    transition: var(--transition);
}

.dokumen-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: #bfdbfe;
}

.dokumen-card:hover::before {
    opacity: 1;
}

.dokumen-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--primary-blue-light);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    transition: var(--transition);
}

.dokumen-card:hover .dokumen-icon {
    background: var(--primary-blue);
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
}

.dokumen-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.dokumen-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

.dokumen-meta {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: var(--primary-blue-light);
    transition: var(--transition);
}

.dokumen-card:hover .dokumen-meta {
    background: var(--primary-blue);
    color: #ffffff;
    gap: 12px;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 992px) {
    .sambutan-grid {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    .kepala-visual-wrap {
        max-width: 320px;
        margin: 0 auto;
    }
    .staf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .org-branch-wrap::before {
        left: 10%;
        right: 10%;
    }
}

/* 1. HERO BANNER VIDEO LOOP LEBIH LEBAR KE BAWAH */
.profil-hero-video-container {
    position: relative;
    width: 100%;
    min-height: 650px;       /* Dinaikkan dari 480px ke 650px */
    height: 85vh;            /* Dinaikkan dari 65vh ke 85vh (85% tinggi layar) */
    max-height: 850px;       /* Batas maksimal dinaikkan agar leluasa */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a1c47;
}

@media (max-width: 640px) {
    .org-branch-wrap {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .org-branch-wrap::before,
    .org-branch-node::before {
        display: none;
    }
    .staf-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}
.profil-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 500px;        /* Ukuran box lebih ramping */
    padding: 28px 35px;
    margin-top: 60px;        /* Bisa digeser sedikit ke bawah bila perlu */
}
/* ===================================================
   EFEK KARTU DIPERKUAT (NEON GLOW & DEEP LIFT-UP)
   =================================================== */

/* Basis Style Seluruh Kartu */
.member-card,
.kepala-card,
.dokumen-card {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    will-change: transform, box-shadow;
}

/* EFEK HOVER DIPERKUAT SECARA INTENS */
.member-card:hover,
.kepala-card:hover,
.dokumen-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: #2563eb !important;
    /* Lapisan Shadow Pendaran Biru Neon Kuat */
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2),
                0 20px 40px -10px rgba(37, 99, 235, 0.35),
                0 10px 20px -5px rgba(37, 99, 235, 0.25) !important;
}

/* Zoom Gambar Lebih Hidup */
.member-img-wrap {
    width: 100%;
    height: 270px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}

.member-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-card:hover .member-img-wrap img {
    transform: scale(1.08);
}

/* Efek Teks Judul dan Ikon Ikut Bersinar */
.member-card:hover .member-name {
    color: #1d4ed8;
    transition: color 0.25s ease;
}

.dokumen-card:hover .dokumen-icon {
    background: #1d4ed8;
    color: #ffffff;
    transform: scale(1.15) rotate(-6deg);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
}

/* ===================================================
   STYLING HALAMAN KAMAR TUPOKSI & ANJAB (BPM)
   =================================================== */

:root {
    --primary-blue: #1d4ed8;
    --primary-blue-dark: #0a1c47;
    --primary-blue-hover: #1e40af;
    --primary-light: #eff6ff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
}

/* 1. HEADER KAMAR (SERASI DENGAN IDENTITAS NAVY) */
.page-header-tupoksi {
    background: linear-gradient(135deg, #0a1c47 0%, #0f2963 60%, #1e3a8a 100%);
    padding: 55px 20px 45px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(10, 28, 71, 0.15);
}

.page-header-content {
    max-width: 1180px;
    margin: 0 auto;
}

.breadcrumb-tupoksi {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #93c5fd;
    margin-bottom: 12px;
}

.breadcrumb-tupoksi a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-tupoksi a:hover {
    color: #ffffff;
}

.page-title-tupoksi {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.page-desc-tupoksi {
    font-size: 15px;
    color: #e2e8f0;
    margin: 0;
    max-width: 750px;
    line-height: 1.6;
}

/* 2. CONTAINER & OVERVIEW CARD */
.tupoksi-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
}

.overview-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid var(--border-color);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    margin-bottom: 25px;
}

.overview-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.overview-text {
    flex: 1;
}

.overview-text h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.overview-text p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.badge-legal {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 3. FORM UPLOAD ADMIN */
.admin-upload-card {
    background: #ffffff;
    border: 1.5px dashed #93c5fd;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 4px 15px rgba(29, 78, 216, 0.05);
}

.upload-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.upload-badge i {
    font-size: 26px;
    color: var(--primary-blue);
}

.upload-badge .sub-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-blue);
    display: block;
}

.upload-badge strong {
    font-size: 16px;
    color: var(--text-dark);
}

.upload-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr auto;
    gap: 12px;
    align-items: flex-end;
}

.input-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.input-field input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}

.input-field input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.btn-file-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: var(--text-dark);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-file-select:hover {
    background: #e2e8f0;
}

.btn-submit-upload {
    height: 42px;
    padding: 0 20px;
    background: var(--primary-blue);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-submit-upload:hover {
    background: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(29, 78, 216, 0.25);
}

/* 4. TOOLBAR & REPOSITORI */
.tupoksi-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 15px;
}

.toolbar-title h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box {
    position: relative;
    width: 320px;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

.search-box input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}

.search-box input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* 5. TABEL CUSTOM */
.table-responsive-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.table-tupoksi {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-tupoksi thead {
    background: #f8fafc;
    border-bottom: 2px solid var(--border-color);
}

.table-tupoksi th {
    padding: 16px 18px;
    font-size: 12.5px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-tupoksi td {
    padding: 16px 18px;
    font-size: 13.5px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.table-tupoksi tbody tr:hover {
    background-color: #f8fafc;
}

.badge-code {
    display: inline-block;
    background: #f1f5f9;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: monospace;
    border: 1px solid #e2e8f0;
}

.doc-title-text {
    color: var(--text-dark);
    font-size: 14px;
}

.sk-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #475569;
}

.sk-info-box i {
    color: #94a3b8;
}

/* BUTTON AKSI DOKUMEN */
.btn-action-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: var(--primary-light);
    color: var(--primary-blue);
    border: 1px solid #bfdbfe;
    transition: all 0.2s;
}

.btn-action-doc:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
}

.btn-doc-locked {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}

.btn-doc-locked:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* NOTIFIKASI */
.alert-custom {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-custom.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-custom.danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .upload-form-grid {
        grid-template-columns: 1fr;
    }
    .overview-card {
        flex-direction: column;
        text-align: center;
    }
    .tupoksi-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box {
        width: 100%;
    }
}

/* ===================================================
   STYLING LEBAR & ELEGAN - KAMAR TUPOKSI & ANJAB (BPM)
   =================================================== */

:root {
    --primary-blue: #1d4ed8;
    --primary-blue-dark: #0a1c47;
    --primary-blue-hover: #1e40af;
    --primary-light: #eff6ff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
}

/* 1. HEADER KAMAR LEBAR & JERNIH */
.page-header-tupoksi {
    background: linear-gradient(135deg, #0a1c47 0%, #0f2963 60%, #1e3a8a 100%);
    padding: 70px 24px 50px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(10, 28, 71, 0.15);
    width: 100%;
}

.page-header-content {
    max-width: 1400px;
    margin: 0 auto;
}

.breadcrumb-tupoksi {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #93c5fd;
    margin-bottom: 14px;
}

.breadcrumb-tupoksi a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-tupoksi a:hover {
    color: #ffffff;
}

.page-title-tupoksi {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.page-desc-tupoksi {
    font-size: 15.5px;
    color: #e2e8f0;
    margin: 0;
    max-width: 850px;
    line-height: 1.6;
}

/* 2. KONTAINER UTAMA LEBIH LEBAR */
.tupoksi-container {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding: 0 15px;
}

/* KARTU OVERVIEW */
.overview-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid var(--border-color);
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    margin-bottom: 25px;
}

.overview-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.overview-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.overview-text h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.overview-text p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.badge-legal {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* 3. FORM INPUT ADMIN (LUAS, RAPI, TIDAK TERPOTONG) */
.admin-upload-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.upload-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.upload-card-header i {
    font-size: 26px;
    color: var(--primary-blue);
}

.upload-card-header .sub-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-blue);
    display: block;
}

.upload-card-header strong {
    font-size: 17px;
    color: var(--text-dark);
}

/* Form input flex horizontal yang lega */
.upload-form-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    width: 100%;
}

.upload-form-flex .input-box {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

.upload-form-flex .input-box.grow-2 {
    flex: 2 1 280px;
}

.upload-form-flex input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.upload-form-flex input[type="text"]:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.btn-file-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    background: #f8fafc;
    border: 1.5px dashed #94a3b8;
    border-radius: 10px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-sizing: border-box;
}

.btn-file-select:hover {
    background: #eff6ff;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.btn-submit-upload {
    height: 44px;
    padding: 0 24px;
    background: var(--primary-blue);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
}

.btn-submit-upload:hover {
    background: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}

/* 4. TOOLBAR & REPOSITORI */
.tupoksi-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 20px;
}

.toolbar-title h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box {
    position: relative;
    width: 360px;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
}

.search-box input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    background: #ffffff;
    font-size: 13.5px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-box input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* 5. TABEL LEBAR & RAPI */
.table-responsive-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    width: 100%;
}

.table-tupoksi {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-tupoksi thead {
    background: #f8fafc;
    border-bottom: 2px solid var(--border-color);
}

.table-tupoksi th {
    padding: 18px 22px;
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-tupoksi td {
    padding: 18px 22px;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.table-tupoksi tbody tr:hover {
    background-color: #f8fafc;
}

.badge-code {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
}

.doc-title-text {
    color: var(--text-dark);
    font-size: 14.5px;
    font-weight: 700;
}

.sk-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #334155;
    font-weight: 600;
}

.sk-info-box i {
    color: #64748b;
}

/* TOMBOL AKSI BERKAS */
.btn-action-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: var(--primary-light);
    color: var(--primary-blue);
    border: 1px solid #bfdbfe;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-action-doc:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.btn-doc-locked {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}

.btn-doc-locked:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* NOTIFIKASI */
.alert-custom {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-custom.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-custom.danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@media (max-width: 992px) {
    .overview-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .tupoksi-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box {
        width: 100%;
    }
}
/* Kontainer khusus bagan agar lebih luas menampung 5 kartu */
.profil-container-wide {
    max-width: 1420px;
    width: 95%;
    margin: 0 auto;
}

/* Penyesuaian garis cabang horizontal untuk 5 nodes */
.org-branch-wrap.org-5-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
    gap: 16px;
}

/* Garis horizontal ditarik persis dari tengah kartu ke-1 sampai tengah kartu ke-5 */
.org-branch-wrap.org-5-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3%;
    right: 3%;
    height: 3px;
    background: #cbd5e1;
    border-radius: 3px;
}

/* Ukuran kartu bagan dibuat pas proporsional untuk 5 kolom */
.org-branch-wrap.org-5-nodes .member-card {
    max-width: 240px;
}

/* Responsif jika diakses pada tablet & layar lebih kecil */
@media (max-width: 1200px) {
    .org-branch-wrap.org-5-nodes {
        flex-wrap: wrap;
        gap: 24px;
    }
    .org-branch-wrap.org-5-nodes::before {
        display: none;
    }
    .org-branch-node::before {
        display: none;
    }
}

/* Garis vertikal penghubung dari baris Kabid ke Staf */
.org-line-down-staff {
    width: 3px;
    height: 38px;
    background: linear-gradient(180deg, #93c5fd, var(--primary-blue));
    border-radius: 3px;
    margin: 10px auto 0 auto;
}

/* Penataan 1 kartu staf tepat di tengah bagan */
.org-staff-single-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
}

.org-staff-single-wrap .member-card {
    max-width: 240px;
}

/* Badge khusus staf */
.member-badge-level.badge-staff {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #93c5fd;
}
/* Cabang untuk 3 kartu di atas */
.org-branch-wrap.org-3-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 950px;
    padding-top: 25px;
    gap: 30px;
}

.org-branch-wrap.org-3-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 3px;
    background: #cbd5e1;
    border-radius: 3px;
}

/* Cabang untuk 2 kartu di bawah */
.org-branch-wrap.org-2-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 650px;
    padding-top: 25px;
    gap: 30px;
}

.org-branch-wrap.org-2-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: #cbd5e1;
    border-radius: 3px;
}

/* Penataan 1 Staf */
.org-staff-single-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.member-badge-level.badge-staff {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #93c5fd;
}

/* Ukuran kartu konsisten */
.org-chart-wrap .member-card {
    max-width: 260px;
    width: 100%;
}
/* ===================================================
   BAGAN STRUKTUR ORGANISASI (LEGA, RAPI & PRESISI)
   =================================================== */

.org-chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

/* 1. GARIS VERTIKAL TURUN DENGAN JARAK LEGA */
.org-line-down {
    width: 2.5px;
    height: 55px; /* Jarak vertikal diperpanjang agar tidak mepet */
    background: #cbd5e1;
    position: relative;
    margin: 0 auto;
}

/* Titik simpul bulat kecil di tengah garis agar visual lebih dinamis */
.org-line-down::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #1d4ed8;
    border-radius: 50%;
}

/* 2. BARIS 3 KABID (TINGKAT ATAS) */
.org-branch-wrap.org-3-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding-top: 40px; /* Jarak dari garis horizontal ke kartu diperlebar */
    gap: 40px;         /* Jarak antar-kartu menyamping diperlebar */
    margin-bottom: 20px;
}

/* Garis horizontal bentang 3 kartu */
.org-branch-wrap.org-3-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 17%;
    right: 17%;
    height: 2.5px;
    background: #cbd5e1;
    border-radius: 2px;
}

/* 3. BARIS 2 KABID (TINGKAT BAWAH) */
.org-branch-wrap.org-2-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 680px;
    padding-top: 40px; /* Jarak dari garis horizontal ke kartu diperlebar */
    gap: 45px;         /* Jarak antar 2 kartu diperlebar */
    margin-bottom: 20px;
}

/* Garis horizontal bentang 2 kartu */
.org-branch-wrap.org-2-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 26%;
    right: 26%;
    height: 2.5px;
    background: #cbd5e1;
    border-radius: 2px;
}

/* 4. GARIS CABANG VERTIKAL DARI HORIZONTAL KE TIAP KARTU */
.org-branch-node {
    position: relative;
    display: flex;
    justify-content: center;
}

.org-branch-node::before {
    content: '';
    position: absolute;
    top: -40px; /* Sesuai dengan padding-top kontainer */
    left: 50%;
    transform: translateX(-50%);
    width: 2.5px;
    height: 40px;
    background: #cbd5e1;
}

/* 5. LEVEL 3: 1 STAF PELAKSANA DI BAWAH */
.org-staff-single-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
}

.org-staff-single-wrap .member-card {
    max-width: 250px;
}

/* Dimensi seragam & proporsional untuk kartu struktur */
.org-chart-wrap .member-card {
    max-width: 250px;
    width: 100%;
}
/* Atur garis tengah agar pas dan tidak putus */
.org-line-down {
    width: 2.5px;
    height: 48px;
    background: #94a3b8;
    margin: 0 auto;
    position: relative;
}

.org-line-down::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #1d4ed8;
    border-radius: 50%;
    z-index: 3;
}

/* Cabang 3 Kabid */
.org-branch-wrap.org-3-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 36px;
    padding-top: 36px;
    margin: 0 auto;
}

.org-branch-wrap.org-3-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 120px;
    right: 120px;
    height: 2.5px;
    background: #94a3b8;
    z-index: 1;
}

/* Cabang 2 Kabid */
.org-branch-wrap.org-2-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 36px;
    padding-top: 36px;
    margin: 0 auto;
}

.org-branch-wrap.org-2-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 120px;
    right: 120px;
    height: 2.5px;
    background: #94a3b8;
    z-index: 1;
}

/* Garis cabang vertikal ke tiap kartu */
.org-branch-node {
    position: relative;
}

.org-branch-node::before {
    content: '';
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5px;
    height: 36px;
    background: #94a3b8;
    z-index: 1;
}

/* Ukuran kartu seragam */
.org-chart-wrap .member-card {
    width: 240px;
    max-width: 240px;
}
/* ===================================================
   BAGAN STRUKTUR: EXECUTIVE TALL PORTRAIT (SANGAT BESAR)
   =================================================== */

/* Pastikan kontainer utama cukup luas untuk 3 kartu besar */
.profil-container {
    max-width: 1440px !important;
    width: 96% !important;
    margin: 0 auto;
}

.org-chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 35px;
}

/* 1. KARTU STRUKTUR BESAR & MEMANJANG KE BAWAH */
.org-chart-wrap .member-card {
    width: 320px !important;        /* Lebar diperbesar signifikan */
    max-width: 320px !important;
    background: #ffffff;
    border-radius: 22px;
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(10, 28, 71, 0.08);
    position: relative;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.org-chart-wrap .member-card:hover {
    transform: translateY(-8px);
    border-color: #93c5fd;
    box-shadow: 0 20px 45px rgba(29, 78, 216, 0.22);
}

/* 2. AREA FOTO TALL PORTRAIT EKSEKUTIF */
.member-img-wrap {
    width: 100% !important;
    height: 420px !important;       /* Sangat tinggi & memanjang ke bawah */
    overflow: hidden;
    position: relative;
    background: #0a1c47;
}

.member-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;    /* Fokus tepat pada wajah pimpinan */
    display: block;
    transition: transform 0.5s ease;
}

.member-card:hover .member-img-wrap img {
    transform: scale(1.04);
}

/* Gradien halus di bawah foto sebelum masuk ke teks nama */
.member-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.06));
    pointer-events: none;
}

/* 3. INFO NAMA & JABATAN ELEGAN */
.member-info {
    padding: 18px 16px 20px;
    text-align: center;
    background: #ffffff;
}

.member-name {
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.member-role {
    font-size: 12.5px;
    color: #1d4ed8;
    font-weight: 700;
}

/* Badge Tingkatan yang Mengambang Modern */
.member-badge-level {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(10, 28, 71, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
    z-index: 5;
}

.member-badge-level.badge-staff {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(147, 197, 253, 0.5);
    color: #93c5fd;
}

/* 4. GARIS HIERARKI BERSAMBUNG PRESISI DENGAN LEBAR 320px */

/* Garis Turun Vertikal */
.org-line-down {
    width: 2.5px;
    height: 52px;
    background-color: #94a3b8;
    margin: 0 auto;
    position: relative;
}

.org-line-down::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background-color: #1d4ed8;
    border-radius: 50%;
    z-index: 3;
}

/* Baris 3 Kabid: Celah 45px, Titik Tengah Kartu 1 = 160px (setengah dari 320px) */
.org-branch-wrap.org-3-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 45px;
    padding-top: 38px;
    margin: 0 auto;
}

.org-branch-wrap.org-3-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 132px;            /* Tepat di sumbu tengah kartu pertama */
    right: 132px;           /* Tepat di sumbu tengah kartu ketiga */
    height: 2.5px;
    background-color: #94a3b8;
    z-index: 1;
}

/* Baris 2 Kabid: Celah 45px, Titik Tengah Kartu = 160px */
.org-branch-wrap.org-2-nodes {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 45px;
    padding-top: 38px;
    margin: 0 auto;
}

.org-branch-wrap.org-2-nodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 155px;            /* Tepat di sumbu tengah kartu ke-4 */
    right: 155px;           /* Tepat di sumbu tengah kartu ke-5 */
    height: 2.5px;
    background-color: #94a3b8;
    z-index: 1;
}

/* Garis Cabang Vertikal Turun ke Kartu */
.org-branch-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-branch-node::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5px;
    height: 26px;
    background-color: #94a3b8;
    z-index: 1;
}

/* Penataan Staf di Dasar Bagan */
.org-staff-single-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* ===================================================
   STYLING ELEGAN & LEBAR - WARTA & INFORMASI (BPM)
   =================================================== */

:root {
    --primary-blue: #1d4ed8;
    --primary-blue-dark: #0a1c47;
    --primary-blue-hover: #1e40af;
    --primary-light: #eff6ff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
}

/* 1. HEADER SECTION */
.page-header-info {
    background: linear-gradient(135deg, #0a1c47 0%, #0f2963 60%, #1e3a8a 100%);
    padding: 70px 24px 50px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(10, 28, 71, 0.15);
    width: 100%;
}

.page-header-content {
    max-width: 1400px;
    margin: 0 auto;
}

.breadcrumb-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #93c5fd;
    margin-bottom: 14px;
}

.breadcrumb-info a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-info a:hover {
    color: #ffffff;
}

.page-title-info {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.page-desc-info {
    font-size: 15.5px;
    color: #e2e8f0;
    margin: 0;
    max-width: 850px;
    line-height: 1.6;
}

/* 2. CONTAINER */
.info-container {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding: 0 15px;
}

/* 3. FORM UPLOAD ADMIN */
.admin-upload-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.upload-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.upload-card-header i {
    font-size: 26px;
    color: var(--primary-blue);
}

.upload-card-header .sub-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-blue);
    display: block;
}

.upload-card-header strong {
    font-size: 17px;
    color: var(--text-dark);
}

.form-row-top {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.input-box label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.input-box input, 
.input-box select, 
.input-box textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 13.5px;
    color: var(--text-dark);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
    font-family: inherit;
}

.input-box input:focus, 
.input-box select:focus, 
.input-box textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.btn-file-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    width: 100%;
    background: #f8fafc;
    border: 1.5px dashed #94a3b8;
    border-radius: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s;
}

.btn-file-select:hover {
    background: #eff6ff;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.btn-submit-upload {
    height: 44px;
    padding: 0 24px;
    background: var(--primary-blue);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
}

.btn-submit-upload:hover {
    background: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}

/* 4. TOOLBAR & FILTER */
.info-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pill-btn {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.pill-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.pill-btn.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.search-box {
    position: relative;
    width: 320px;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

.search-box input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    background: #ffffff;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.search-box input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* 5. GRID KARTU INFORMASI */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.info-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: 0 14px 30px rgba(29, 78, 216, 0.12);
}

.info-thumb {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

.info-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.info-card:hover .info-thumb img {
    transform: scale(1.05);
}

.info-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(6px);
}

.badge-berita {
    background: rgba(29, 78, 216, 0.85);
    color: #ffffff;
}

.badge-pengumuman {
    background: rgba(217, 119, 6, 0.85);
    color: #ffffff;
}

.badge-agenda {
    background: rgba(5, 150, 105, 0.85);
    color: #ffffff;
}

.info-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.info-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.info-meta i {
    margin-right: 4px;
}

.info-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 10px;
}

.info-snippet {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 18px 0;
    flex: 1;
}

.info-footer-link {
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}

.read-more-btn {
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s ease;
}

.read-more-btn:hover {
    gap: 12px;
    color: var(--primary-blue-hover);
}

/* KOTAK STATUS KOSONG */
.empty-state-box {
    grid-column: 1 / -1;
    background: #ffffff;
    border-radius: 18px;
    border: 1px dashed var(--border-color);
    padding: 60px 20px;
    text-align: center;
}

.empty-state-box i {
    font-size: 45px;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.empty-state-box h3 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.empty-state-box p {
    font-size: 14px;
    color: var(--text-muted);
}

/* NOTIFIKASI */
.alert-custom {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-custom.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-custom.danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@media (max-width: 768px) {
    .form-row-top {
        flex-direction: column;
    }
    .info-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box {
        width: 100%;
    }
}
/* ===================================================
   PORTAL INFORMASI, WARTA & MADING DIGITAL BPM
   THEME: ROYAL DEEP NAVY & PROFESSIONAL CORPORATE
   =================================================== */

:root {
    --navy-dark: #081a42;
    --navy-surface: #0f2b6b;
    --royal-blue: #1d4ed8;
    --royal-blue-hover: #1e40af;
    --accent-blue: #3b82f6;
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --card-border: #e2e8f0;
    --bg-page: #f8fafc;
}

body {
    background-color: var(--bg-page);
}

/* ===================================================
   1. HERO BANNER
   =================================================== */
.info-hero {
    background: radial-gradient(circle at 80% 20%, #1e40af 0%, #0c2356 50%, #051026 100%);
    padding: 65px 24px 70px;
    color: #ffffff;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 25px rgba(8, 26, 66, 0.15);
}

.info-hero-inner {
    max-width: 950px;
    margin: 0 auto;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #93c5fd;
    margin-bottom: 16px;
}

.hero-heading {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.hero-subtext {
    font-size: 16px;
    color: #cbd5e1;
    margin: 0 auto;
    max-width: 750px;
    line-height: 1.6;
}

/* ===================================================
   2. CONTAINER UTAMA
   =================================================== */
.info-container {
    max-width: 1400px;
    width: 95%;
    margin: -35px auto 70px;
    position: relative;
    z-index: 10;
}

/* ===================================================
   3. BERITA UTAMA / FEATURED CARD
   =================================================== */
.featured-news-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1.5px solid var(--card-border);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    overflow: hidden;
    margin-bottom: 40px;
}

.featured-media {
    position: relative;
    min-height: 380px;
    background: #0b1a3d;
}

.featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-featured {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    letter-spacing: 0.5px;
}

.featured-info {
    padding: 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meta-tag-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.meta-date, .meta-author {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.meta-date i, .meta-author i {
    color: var(--royal-blue);
    margin-right: 5px;
}

.category-pill {
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-announcement { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.badge-news { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-agenda { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

.featured-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.35;
    margin: 0 0 14px 0;
}

.featured-desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.65;
    margin: 0 0 26px 0;
}

.featured-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-read-primary {
    background: var(--royal-blue);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.25);
    transition: all 0.25s ease;
}

.btn-read-primary:hover {
    background: var(--royal-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.35);
}

.btn-doc-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--text-body);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--card-border);
    transition: all 0.2s ease;
}

.btn-doc-download:hover {
    background: #ffffff;
    color: #dc2626;
    border-color: #fca5a5;
}

/* ===================================================
   4. FILTER STRIP (TABS & PENCARIAN)
   ================================================== */
.filter-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: 1.5px solid transparent;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--royal-blue);
    background: #eff6ff;
}

.tab-btn.active {
    background: var(--royal-blue);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.search-field {
    position: relative;
    width: 320px;
}

.search-field i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--royal-blue);
    font-size: 14px;
}

.search-field input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border-radius: 50px;
    border: 1.5px solid var(--card-border);
    outline: none;
    font-size: 13.5px;
    color: #0f172a !important; /* Huruf hitam pekat agar selalu terlihat */
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.2s;
}

.search-field input:focus {
    border-color: var(--royal-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* ===================================================
   5. DUA KOLOM: FEED MADING & SIDEBAR
   =================================================== */
.info-content-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 35px;
}

/* LIST KARTU MADING */
.mading-feed {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mading-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid var(--card-border);
    padding: 20px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
}

.mading-card:hover {
    transform: translateY(-4px);
    border-color: #93c5fd;
    box-shadow: 0 14px 30px rgba(29, 78, 216, 0.1);
}

.mading-img-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 190px;
    background: #0f172a;
}

.mading-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.mading-card:hover .mading-img-wrap img {
    transform: scale(1.05);
}

.mading-img-wrap .category-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.mading-details {
    display: flex;
    flex-direction: column;
}

.meta-tag-row.small {
    margin-bottom: 8px;
    gap: 12px;
}

.meta-tag-row.small span {
    font-size: 12px;
}

.mading-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.mading-snippet {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex: 1;
}

.mading-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.btn-read-modal {
    background: transparent;
    border: none;
    color: var(--royal-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.btn-read-modal:hover {
    gap: 10px;
    color: var(--royal-blue-hover);
}

.badge-attachment {
    font-size: 12px;
    color: #dc2626;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ===================================================
   6. SIDEBAR AGENDA & KONTAK
   =================================================== */
.info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.widget-box {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid var(--card-border);
    padding: 26px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.widget-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid #f1f5f9;
}

.widget-head i {
    font-size: 20px;
    color: var(--royal-blue);
}

.widget-head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-heading);
}

/* LIST AGENDA */
.agenda-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.agenda-list li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agenda-date {
    width: 52px;
    height: 52px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--card-border);
}

.agenda-date strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
}

.agenda-date span {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
}

.agenda-date.highlight {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.agenda-date.highlight strong {
    color: var(--royal-blue);
}

.agenda-date.highlight span {
    color: var(--royal-blue);
}

.agenda-text h5 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
}

.agenda-text p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* WIDGET BANTUAN */
.help-box {
    background: linear-gradient(135deg, #0a1c47 0%, #1e3a8a 100%);
    color: #ffffff;
    border: none;
}

.help-inner {
    text-align: center;
}

.help-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
    color: #93c5fd;
}

.help-inner h4 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.help-inner p {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.btn-help-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--navy-dark);
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn-help-link:hover {
    transform: translateY(-2px);
    background: #f8fafc;
}

/* ===================================================
   7. MODAL BACA LENGKAP POPUP
   =================================================== */
.info-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 48, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.info-modal-backdrop.show {
    display: flex;
}

.info-modal-content {
    background: #ffffff;
    border-radius: 24px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: zoomModal 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes zoomModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.btn-close-modal {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 10;
    transition: background 0.2s;
}

.btn-close-modal:hover {
    background: rgba(15, 23, 42, 0.9);
}

.modal-body-scroll {
    padding: 36px;
    overflow-y: auto;
}

.modal-cat-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: #eff6ff;
    color: var(--royal-blue);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.modal-title-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.modal-meta-row {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-banner-img {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

.modal-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-text-content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-body);
}

.modal-text-content .lead-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.modal-download-box {
    margin-top: 28px;
    padding: 18px 22px;
    background: #f8fafc;
    border: 1.5px dashed var(--card-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.download-flex {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pdf-ico {
    font-size: 32px;
    color: #dc2626;
}

.download-flex strong {
    display: block;
    font-size: 14px;
    color: var(--text-heading);
}

.download-flex span {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-download-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #dc2626;
    color: #ffffff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-download-action:hover {
    background: #b91c1c;
}

/* KOTAK KOSONG */
.empty-feed-box {
    background: #ffffff;
    border-radius: 20px;
    border: 1px dashed var(--card-border);
    padding: 60px 20px;
    text-align: center;
}

.empty-feed-box i {
    font-size: 45px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-feed-box h4 {
    font-size: 18px;
    color: var(--text-heading);
    margin: 0 0 6px 0;
}

.empty-feed-box p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
}

/* RESPONSIF */
@media (max-width: 1024px) {
    .featured-news-card {
        grid-template-columns: 1fr;
    }
    .featured-media {
        min-height: 260px;
    }
    .info-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mading-card {
        grid-template-columns: 1fr;
    }
    .mading-img-wrap {
        height: 200px;
    }
    .search-field {
        width: 100%;
    }
}
/* ===================================================
   PANEL KONTROL MANAJEMEN INFORMASI & AGENDA (BPM)
   THEME: DEEP NAVY & ROYAL BLUE
   =================================================== */

:root {
    --adm-navy: #081a42;
    --adm-navy-light: #0d2866;
    --adm-blue: #1d4ed8;
    --adm-blue-hover: #1e40af;
    --adm-text-dark: #0f172a;
    --adm-text-muted: #64748b;
    --adm-border: #e2e8f0;
    --adm-bg: #f8fafc;
}

body {
    background-color: var(--adm-bg);
}

/* 1. HEADER ADMIN */
.admin-page-header {
    background: radial-gradient(circle at 85% 15%, #1e40af 0%, #0c2356 50%, #051026 100%);
    padding: 60px 24px 65px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(8, 26, 66, 0.15);
}

.admin-header-inner {
    max-width: 1440px;
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 800;
    color: #93c5fd;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.admin-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.4px;
}

.admin-subtitle {
    font-size: 14.5px;
    color: #cbd5e1;
    margin: 0;
}

.admin-top-actions {
    display: flex;
    gap: 12px;
}

.btn-preview-portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.2s;
}

.btn-preview-portal:hover {
    background: #ffffff;
    color: var(--adm-navy);
}

.btn-create-post {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 12px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3);
    transition: all 0.25s;
}

.btn-create-post:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

/* 2. CONTAINER & STATS */
.admin-main {
    max-width: 1440px;
    width: 96%;
    margin: -35px auto 80px;
    position: relative;
    z-index: 10;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid var(--adm-border);
    border-radius: 18px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
}

.bg-navy  { background: linear-gradient(135deg, #1e3a8a, #0b1a3d); }
.bg-red   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.bg-blue  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.bg-green { background: linear-gradient(135deg, #10b981, #047857); }

.stat-card strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--adm-text-dark);
    display: block;
    line-height: 1.2;
}

.stat-card span {
    font-size: 13px;
    color: var(--adm-text-muted);
    font-weight: 600;
}

/* NOTIFIKASI */
.alert-box {
    padding: 14px 22px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}
.alert-box.success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.alert-box.danger  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* 3. TABEL MANAJEMEN */
.admin-card-table {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid var(--adm-border);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.table-card-head {
    padding: 20px 26px;
    border-bottom: 1.5px solid var(--adm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
}

.search-admin-box {
    position: relative;
    width: 350px;
}

.search-admin-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-blue);
    font-size: 14px;
}

.search-admin-box input {
    width: 100%;
    padding: 10px 16px 10px 44px;
    border-radius: 50px;
    border: 1.5px solid var(--adm-border);
    outline: none;
    font-size: 13.5px;
    color: #0f172a !important;
    background: #f8fafc;
    box-sizing: border-box;
    transition: all 0.2s;
}

.search-admin-box input:focus {
    background: #ffffff;
    border-color: var(--adm-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.table-legend {
    font-size: 13px;
    color: var(--adm-text-muted);
}

.table-executive {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-executive thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 16px 20px;
    border-bottom: 2px solid var(--adm-border);
}

.table-executive tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--adm-text-dark);
}

.table-executive tbody tr:hover {
    background: #f8fafc;
}

.table-thumb {
    width: 70px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
}

.table-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-red   { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.badge-blue  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

.pill-has-pdf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #dc2626;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fca5a5;
    margin-left: 4px;
}

.item-title {
    display: block;
    font-size: 14.5px;
    color: #0f2963;
    line-height: 1.35;
    margin-bottom: 3px;
}

.item-snippet {
    display: block;
    font-size: 12px;
    color: var(--adm-text-muted);
}

.item-date, .item-author {
    font-size: 13px;
    color: var(--adm-text-muted);
}

.action-buttons-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-tbl-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--adm-blue);
    border: 1px solid #bfdbfe;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-tbl-edit:hover {
    background: var(--adm-blue);
    color: #ffffff;
}

.btn-tbl-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-size: 12.5px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-tbl-delete:hover {
    background: #dc2626;
    color: #ffffff;
}

/* 4. MODAL FORM STYLING */
.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 48, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-modal-backdrop.show {
    display: flex;
}

.admin-modal-card {
    background: #ffffff;
    border-radius: 22px;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-modal-head {
    padding: 22px 28px;
    background: #ffffff;
    border-bottom: 1.5px solid var(--adm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-sub-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--adm-blue);
    display: block;
}

.admin-modal-head h3 {
    margin: 4px 0 0 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--adm-text-dark);
}

.btn-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.admin-form-body {
    padding: 24px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 16px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--adm-border);
    background: #ffffff;
    font-size: 13.5px;
    color: #0f172a !important;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border 0.2s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: var(--adm-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.file-hint {
    font-size: 11.5px;
    color: var(--adm-text-muted);
    margin-top: 5px;
}

.modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1.5px solid #f1f5f9;
}

.btn-cancel {
    padding: 10px 20px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid var(--adm-border);
    color: var(--adm-text-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn-save-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    background: var(--adm-blue);
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    transition: all 0.2s;
}

.btn-save-submit:hover {
    background: var(--adm-blue-hover);
}
/* ===================================================
   TAMBAHAN FORM INPUT & TOMBOL TAMBAH INFORMASI
   =================================================== */

/* Perbaikan agar teks judul panjang tidak merusak kartu */
.featured-title, .mading-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.featured-desc, .mading-snippet {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Bilah Alat Kanan (Search + Tombol Tambah) */
.filter-right-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-add-info-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    background: #1d4ed8;
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-info-trigger:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35);
}

/* Modal Form Input */
.form-modal-card {
    max-width: 820px !important;
}

.form-modal-header {
    border-bottom: 1.5px solid #f1f5f9;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.form-content-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 16px;
}

.form-grid-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group-item label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-group-item label small {
    font-weight: normal;
    color: #64748b;
}

.form-group-item input, 
.form-group-item select, 
.form-group-item textarea {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 13.5px;
    color: #0f172a !important;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.2s;
}

.form-group-item input:focus, 
.form-group-item select:focus, 
.form-group-item textarea:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.form-actions-submit {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1.5px solid #f1f5f9;
    margin-top: 8px;
}

.btn-cancel-modal {
    padding: 10px 20px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.btn-cancel-modal:hover {
    background: #e2e8f0;
}

.btn-submit-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    background: #1d4ed8;
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    transition: all 0.2s;
}

.btn-submit-save:hover {
    background: #1e40af;
    transform: translateY(-2px);
}

/* Responsif Mobile untuk Form */
@media (max-width: 768px) {
    .filter-right-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .form-grid-row, .form-grid-row-2 {
        grid-template-columns: 1fr;
    }
}
/* ===================================================
   HERO BANNER INFORMASI DENGAN LATAR BELAKANG GAMBAR
   (MATCH DENGAN TEMA MENU INTERNAL - EXECUTIVE DEEP NAVY)
   =================================================== */

.info-hero {
    position: relative;
    /* Ganti tautan gambar di bawah dengan foto gedung kampus / ruang rapat universitas Anda */
    background: 
        linear-gradient(135deg, rgba(8, 26, 66, 0.94) 0%, rgba(12, 35, 86, 0.88) 55%, rgba(5, 16, 38, 0.96) 100%),
        url('../images/bg-gedung.jpg') center/cover no-repeat;
    padding: 85px 24px 90px;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 26, 66, 0.2);
}

/* Pola grid halus di atas background gambar */
.info-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 1;
}

/* Aksen pendar cahaya biru royal di sudut kanan atas */
.info-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 1;
}

.info-hero-inner {
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Lencana Kategori Modern (Glassmorphism) */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 7px 20px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #93c5fd;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.hero-heading {
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 14px 0;
    letter-spacing: -0.6px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtext {
    font-size: 16.5px;
    color: #e2e8f0;
    margin: 0 auto;
    max-width: 740px;
    line-height: 1.65;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* ===================================================
   HERO BANNER INFORMASI DENGAN BACKGROUND TINGGI & LAPANG
   =================================================== */

.info-hero {
    position: relative;
    width: 100%;
    /* TINGGI MINIMAL YANG PANJANG KE BAWAH AGAR GAMBAR TIDAK TERPOTONG */
    min-height: 520px;
    padding: 100px 24px 140px; /* Padding bawah dibuat besar (140px) agar memberi ruang lega untuk gambar */
    
    /* TEMPAT MEMASUKKAN GAMBAR KAMU: Ganti '../images/nama-gambar-kamu.jpg' dengan file gambarmu */
    background-image: 
        linear-gradient(180deg, rgba(8, 26, 66, 0.82) 0%, rgba(12, 35, 86, 0.70) 50%, rgba(7, 21, 48, 0.95) 100%),
        url('../img/asep.jpg');
        
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Ubah ke 'fixed' jika ingin efek parallax */
    
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 35px rgba(8, 26, 66, 0.25);
    overflow: hidden;
}

.info-hero {
    position: relative;
    width: 100%;
    min-height: 380px;
    padding: 75px 24px 105px;
    
    /* Gradasi biru cerah & elegan, tidak gelap */
    background-image: 
        linear-gradient(180deg, rgba(14, 76, 146, 0.55) 0%, rgba(30, 85, 175, 0.45) 50%, rgba(10, 45, 110, 0.65) 100%),
        url('../img/coki.jpg');
        
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 35px rgba(8, 26, 66, 0.25);
    overflow: hidden;
}

/* Pastikan tidak ada overlay grid */
.info-hero::before {
    display: none !important;
}

/* Konten Teks di Dalam Banner */
.info-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 8px 22px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #bfdbfe;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hero-heading {
    font-size: 44px;
    font-weight: 800;
    margin: 0 0 16px 0;
    letter-spacing: -0.8px;
    color: #ffffff;
    line-height: 1.25;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.hero-subtext {
    font-size: 17px;
    color: #f1f5f9;
    margin: 0 auto;
    max-width: 760px;
    line-height: 1.7;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Penyesuaian Jarak Kontainer Kartu di Bawah Banner */
.info-container {
    max-width: 1400px;
    width: 95%;
    margin: -45px auto 80px; 
    position: relative;
    z-index: 10;
}
/* ===================================================
   EFEK TRANSISE & HOVER NYATA PADA KARTU MADING
   =================================================== */

.mading-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    padding: 22px;
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 26px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Transisi halus namun responsif dan tegas */
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Garis aksen biru di sisi kiri kartu yang muncul tegas saat hover */
.mading-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #1d4ed8;
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 20px 0 0 20px;
}

/* 1. STATE SAAT KARTU DI-HOVER (SANGAT KENTARA) */
.mading-card:hover {
    transform: translateY(-7px);
    border-color: #93c5fd;
    box-shadow: 0 20px 38px rgba(29, 78, 216, 0.12), 
                0 6px 12px rgba(15, 23, 42, 0.06);
}

.mading-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* 2. EFEK GAMBAR FOTO LIPUTAN */
.mading-img-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 195px;
    background: #0f172a;
}

.mading-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.97);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.35s ease;
}

/* Zoom halus dan warna gambar semakin cerah */
.mading-card:hover .mading-img-wrap img {
    transform: scale(1.08);
    filter: brightness(1.03) contrast(1.02);
}

/* Lencana Kategori di atas gambar ikut naik sedikit */
.mading-img-wrap .category-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.mading-card:hover .mading-img-wrap .category-pill {
    transform: translateY(-2px);
}

/* 3. EFEK TEKS JUDUL ARTIKEL */
.mading-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    margin: 0 0 10px 0;
    word-break: break-word;
    transition: color 0.25s ease;
}

/* Judul otomatis berubah ke biru sapphire saat kartu disorot */
.mading-card:hover .mading-title {
    color: #1d4ed8;
}

/* 4. EFEK TOMBOL & PANAH "SELENGKAPNYA" */
.btn-read-modal {
    background: transparent;
    border: none;
    color: #1d4ed8;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.btn-read-modal i {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Panah bergerak melompat ke kanan secara dinamis */
.mading-card:hover .btn-read-modal {
    color: #1e40af;
    gap: 10px;
}

.mading-card:hover .btn-read-modal i {
    transform: translateX(5px);
}

/* 5. EFEK BADGE LAMPIRAN PDF */
.badge-attachment {
    font-size: 12px;
    color: #dc2626;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    transition: all 0.25s ease;
}

.mading-card:hover .badge-attachment {
    background: #fee2e2;
    border-color: #fca5a5;
    transform: scale(1.03);
}
/* ===================================================
   COCKPIT STATS DECK - EXECUTIVE & HIGH-TECH GLASS
   =================================================== */

.lpm-stats-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1040px;
    width: 95%;
    margin: 40px auto 0;
    position: relative;
    z-index: 10;
}

/* Base Card Glassmorphism */
.cockpit-card {
    position: relative;
    background: rgba(10, 25, 60, 0.72); /* Kaca Biru Malam Gelap Elegan */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 35px rgba(3, 10, 28, 0.35);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Cahaya Pendar di Sudut Kartu (Glow) */
.cockpit-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0.6;
}

/* Garis Aksen Mengkilap di Bagian Atas Setiap Kartu */
.cockpit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    opacity: 0.5;
    transition: all 0.4s ease;
}

/* Hover States (Sangat Hidup & Menarik) */
.cockpit-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 45px rgba(5, 16, 45, 0.55),
                0 0 25px rgba(59, 130, 246, 0.25);
}

.cockpit-card:hover::before {
    left: 5%;
    right: 5%;
    opacity: 1;
    background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}

/* Area Ikon 3D Bulat */
.cockpit-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cockpit-card:hover .cockpit-icon {
    transform: scale(1.12) rotate(6deg);
}

/* Varian Tema Warna Masing-Masing Kartu */
/* 1. Emas (Akreditasi Unggul) */
.card-gold .cockpit-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
}
.tag-gold {
    background: rgba(245, 158, 11, 0.15);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* 2. Sapphire Blue (100% Terakreditasi) */
.card-blue .cockpit-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(29, 78, 216, 0.15));
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
}
.tag-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* 3. Emerald / Cyan (Siklus PPEPP) */
.card-cyan .cockpit-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #34d399;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

/* Animasi Putar Halus pada Ikon Siklus saat Di-hover */
.card-cyan:hover .cockpit-icon i {
    animation: spinRotate 1.8s linear infinite;
}
@keyframes spinRotate {
    100% { transform: rotate(360deg); }
}

/* Konten Teks */
.cockpit-body {
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    z-index: 2;
}

.cockpit-top-meta {
    margin-bottom: 5px;
}

.cockpit-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Indikator Pulse Hijau Berkedip (Siklus Aktif) */
.cockpit-live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2.5px 10px;
    border-radius: 50px;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #10b981;
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background-color: #10b981;
    animation: livePulsing 1.6s ease-out infinite;
}

@keyframes livePulsing {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* Tipografi Judul & Subteks */
.cockpit-title {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

.cockpit-desc {
    margin: 3px 0 0 0;
    font-size: 12.5px;
    color: #cbd5e1;
    font-weight: 500;
}

/* Responsif Mobile & Layar Tablet */
@media (max-width: 992px) {
    .lpm-stats-deck {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}
/* ===================================================
   STYLE TOMBOL BERKAS, SERTIFIKAT & STATUS TERKUNCI
   =================================================== */

/* Tombol Berkas Terkunci (Guest/Umum) */
.btn-doc-locked {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    cursor: pointer;
    text-decoration: none;
}

.btn-doc-locked:hover {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-2px);
}

.btn-unduh-sk-locked {
    background-color: #334155 !important;
    color: #f8fafc !important;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-unduh-sk-locked:hover {
    background-color: #1e293b !important;
    color: #fca5a5 !important;
}

/* Penataan Grup Tombol Berkas di Tabel */
.berkas-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

/* Tombol Unduh Sertifikat */
.btn-action-cert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #0284c7;
    color: #ffffff;
    transition: all 0.2s ease;
}

.btn-action-cert:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-2px);
}
/* ===================================================
   TOMBOL BERKAS SK & SERTIFIKAT BERDAMPINGAN
   =================================================== */

.berkas-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* Desain Tombol Sertifikat Aktif */
.btn-action-cert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #0284c7;
    color: #ffffff !important;
    border: 1px solid #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.btn-action-cert:hover {
    background: #0369a1;
    border-color: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
}

/* Tampilan Status Kosong (Belum Diunggah) */
.btn-doc-empty,
.btn-cert-empty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1;
    cursor: not-allowed;
    opacity: 0.85;
}
/* Samakan base style dengan btn-action-doc bawaan */
.btn-action-sertifikat {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-action-sertifikat:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}
/* ===================================================
   STYLING HALAMAN UNDUHAN RESMI BPM
   =================================================== */

/* HERO BANNER BERLATAR BELAKANG FOTO DENGAN OVERLAY GELAP */
.unduhan-hero {
    position: relative;
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 70px 20px;
    box-sizing: border-box;
}

.unduhan-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, (15, 23, 42, 0.100) 0%, rgba(30, 58, 138, 0.88) 100%);
    backdrop-filter: blur();
}

.unduhan-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #93c5fd;
    margin-bottom: 16px;
}

.hero-heading {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px 0;
    color: #ffffff;
}

.hero-subtext {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
    max-width: 780px;
    margin-inline: auto;
}

/* CONTAINER UTAMA */
.unduhan-container {
    max-width: 1200px;
    margin: -35px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

/* ALERT NOTIFIKASI */
.alert-custom {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.alert-custom.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-custom.danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* CONTROL BAR (TOTAL DATA & FILTER CARI) */
.unduhan-control-bar {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.stat-badge i {
    font-size: 18px;
    color: #2563eb;
}

.control-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* INPUT SEARCH */
.search-input-box {
    position: relative;
    width: 290px;
}

.search-input-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

.search-input-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-input-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* TOMBOL UNGGAH ADMIN */
.btn-add-unduhan {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.btn-add-unduhan:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    background: #1e40af;
}

/* KARTU TABEL */
.unduhan-table-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table-unduhan {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-unduhan thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 18px 20px;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
}

.table-unduhan tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.table-unduhan tbody tr:hover {
    background: #f8fbff;
}

.table-unduhan tbody td {
    padding: 18px 20px;
    vertical-align: middle;
}

/* NOMOR URUT */
.number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
}

/* JUDUL DOKUMEN */
.doc-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.file-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.doc-name {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.doc-submeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
}

.file-ext-tag {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

.file-size-tag,
.file-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* SUMBER BADGE */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #dbeafe;
}

/* TOMBOL AKSI UNDUH */
.btn-download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: #0284c7;
    color: #ffffff !important;
    border: 1px solid #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.btn-download-action:hover {
    background: #0369a1;
    border-color: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

/* EMPTY STATE */
.empty-table-state {
    padding: 60px 20px !important;
}

.empty-box-inner {
    text-align: center;
    color: #64748b;
}

.empty-box-inner i {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-box-inner h4 {
    margin: 0 0 6px 0;
    font-size: 17px;
    color: #1e293b;
}

.empty-box-inner p {
    margin: 0;
    font-size: 14px;
}

.no-search-result {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

.no-search-result i {
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 10px;
}

/* ===================================================
   MODAL POPUP UNGGAH UNDUHAN
   =================================================== */
.unduhan-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.unduhan-modal-backdrop.show {
    display: flex;
}

.unduhan-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.btn-close-modal {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10;
}

.btn-close-modal:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.modal-body-scroll {
    padding: 32px;
    overflow-y: auto;
}

.form-modal-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 8px 0 4px 0;
}

.form-modal-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.form-group-item {
    margin-bottom: 16px;
}

.form-group-item label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-group-item label .required {
    color: #ef4444;
}

.form-group-item input[type="text"],
.form-group-item select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border 0.2s ease;
}

.form-group-item input[type="text"]:focus,
.form-group-item select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.file-upload-box {
    border: 2px dashed #cbd5e1;
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.file-upload-box input[type="file"] {
    width: 100%;
    font-size: 13px;
}

.form-actions-submit {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.btn-cancel-modal {
    padding: 10px 18px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn-submit-save {
    padding: 10px 20px;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-submit-save:hover {
    background: #1d4ed8;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .form-grid-row {
        grid-template-columns: 1fr;
    }
    .unduhan-control-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .control-right-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .search-input-box {
        width: 100%;
    }
}
/* HERO BANNER TINGGI & PANJANG (SEPERTI HALAMAN PROFIL) */
.unduhan-hero {
    position: relative;
    width: 100%;
    min-height: 750px; /* Ditinggikan agar memanjang ke bawah */
    display: flex;
    align-items: flex-start; /* Posisi teks tetap rapi di atas */
    justify-content: center;
    background-image: url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Padding bawah diperbesar sampai 220px agar latar belakang biru tampak luas ke bawah */
    padding: 100px 20px 250px 20px;
    box-sizing: border-box;
}

.unduhan-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
    margin-top: 10px;
}

/* CONTAINER TABEL MENUMPUK DI ATAS BACKGROUND SECARA PROPORSIONAL */
.unduhan-container {
    max-width: 1200px;
    margin: -120px auto 60px auto; /* Bertumpuk rapi di bagian bawah banner */
    padding: 0 20px;
    position: relative;
    z-index: 3;
}
/* BANNER HERO MEMANJANG DAN ELEGAN */
.akreditasi-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-image: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 100px 20px 200px 20px;
    box-sizing: border-box;
}

.akreditasi-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 58, 138, 0.88) 100%);
    backdrop-filter: blur(2px);
}

.akreditasi-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
    margin-top: 10px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #93c5fd;
    margin-bottom: 16px;
}

.hero-heading {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px 0;
    color: #ffffff;
}

.hero-subtext {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
    max-width: 780px;
    margin-inline: auto;
}

/* CONTAINER UTAMA MENUMPUK DI ATAS HERO */
.akreditasi-container {
    max-width: 1200px;
    margin: -110px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

/* KARTU STATISTIK METRIK */
.stat-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
}

.stat-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-primary .stat-icon-wrap { background: #eff6ff; color: #2563eb; }
.stat-secondary .stat-icon-wrap { background: #ecfdf5; color: #059669; }
.stat-neutral .stat-icon-wrap { background: #f8fafc; color: #475569; }

.stat-text h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.stat-text p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* CONTROL BAR */
.akreditasi-control-bar {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.filter-tab-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tab-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-pill.active, .tab-pill:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.control-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-field {
    position: relative;
    width: 260px;
}

.search-field i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
}

.search-field input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.btn-add-modal-trigger {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* TABEL */
.akreditasi-table-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.table-responsive { width: 100%; overflow-x: auto; }
.table-custom { width: 100%; border-collapse: collapse; text-align: left; }

.table-custom thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 16px 20px;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
}

.table-custom tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.2s; }
.table-custom tbody tr:hover { background: #f8fbff; }
.table-custom tbody td { padding: 16px 20px; vertical-align: middle; }

.number-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
}

.prodi-title-wrap { display: flex; align-items: center; gap: 12px; }
.strata-pill {
    padding: 4px 8px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
}

.badge-unggul { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-baik-sekali { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-baik { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }

.sk-meta-wrap { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sk-number { font-weight: 700; color: #1e293b; }
.sk-agency { color: #64748b; font-size: 11px; }

.expiry-tag {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* TOMBOL DOKUMEN */
.doc-btn-group { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-sk { background: #fee2e2; color: #dc2626 !important; border: 1px solid #fecaca; }
.btn-sk:hover { background: #dc2626; color: #ffffff !important; }

.btn-cert { background: #e0e7ff; color: #4338ca !important; border: 1px solid #c7d2fe; }
.btn-cert:hover { background: #4338ca; color: #ffffff !important; }

.btn-doc.disabled { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; cursor: not-allowed; }

/* MODAL INPUT POPUP */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-backdrop.show { display: flex; }
.modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.btn-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

.modal-scroll-inner { padding: 32px; overflow-y: auto; }
.modal-head h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 8px 0 20px 0; }
.input-block { margin-bottom: 16px; }
.input-block label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.input-block input, .input-block select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    box-sizing: border-box;
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-cancel { padding: 10px 18px; border-radius: 8px; background: #f1f5f9; border: none; font-weight: 700; cursor: pointer; }
.btn-save { padding: 10px 20px; border-radius: 8px; background: #2563eb; color: #ffffff; border: none; font-weight: 700; cursor: pointer; }

/* NOTIFIKASI */
.alert-custom {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}
.alert-custom.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-custom.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* HERO BANNER SOLID DEEP NAVY */
.akreditasi-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #05084a; /* Warna dasar deep navy */
    background-image: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 100px 20px 200px 20px;
    box-sizing: border-box;
}

/* OVERLAY SESUAI WARNA GAMBAR */
.akreditasi-hero-overlay {
    position: absolute;
    inset: 0;
    /* Pilihan A: Jika ingin mempertahankan sedikit tekstur foto di belakangnya */
    background: rgba(5, 8, 74, 0.94);

    /* Pilihan B: Jika ingin warna solid pekat 100% persis gambar tanpa tembus foto, gunakan baris di bawah: */
    /* background: #05084a; */
}
/* TAMPILAN BADGE JENJANG TERPISAH */
.strata-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: #0f172a;
    color: #ffffff;
}

/* Variasi Warna Halus Tiap Strata */
.strata-pill.strata-s1 {
    background: #0f172a;
    color: #ffffff;
}

.strata-pill.strata-s2 {
    background: #1e3a8a;
    color: #ffffff;
}

.strata-pill.strata-d3 {
    background: #0369a1;
    color: #ffffff;
}

/* NAMA PROGRAM STUDI */
.prodi-nama-text {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}
/* HERO BANNER PANJANG KE BAWAH */
.akreditasi-hero {
    position: relative;
    width: 100%;
    min-height: 580px; /* Ditinggikan agar memanjang ke bawah */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Padding bawah diperlebar agar area foto terlihat luas dan panjang */
    padding: 160px 50px 500px 70px;
    box-sizing: border-box;
}

/* OVERLAY BIRU NAVY TRANSPARAN AGAR FOTO TETAP TERLIHAT */
.akreditasi-hero-overlay {
    position: absolute;
    inset: 0;
    /* Nilai 0.82 membuat warna navy #05084a tembus pandang sehingga foto di belakangnya muncul */
    background: rgba(5, 8, 74, 0.82);
    backdrop-filter: blur(1px);
}

.akreditasi-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
    margin-top: 15px;
}

/* CONTAINER TABEL MENUMPUK RAPI DI BAGIAN BAWAH */
.akreditasi-container {
    max-width: 1200px;
    margin: -130px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}
.akreditasi-hero-overlay {
    position: absolute;
    inset: 0;
    /* Nilai 0.75 memberikan warna navy khas tetapi tetap memperlihatkan foto di baliknya */
    background: rgba(31 33 93 / 50%);
    backdrop-filter: blur();
}
/* CONTAINER GRID KARTU METRIK */
.stat-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

/* KARTU STATISTIK DENGAN EFEK KEDALAMAN (ELEVATION & INTERAKTIF) */
.stat-card-interactive {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(5, 8, 74, 0.07);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background 0.3s;
}

/* Hover Efek Melayang */
.stat-card-interactive:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(5, 8, 74, 0.12);
}

/* Header Kartu (Ikon & Tag Persentase) */
.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.3s;
}

.stat-card-interactive:hover .stat-icon-wrap {
    transform: scale(1.1);
}

.stat-badge-pct {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* Tipografi Angka & Label */
.stat-number {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-unit {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

.stat-label {
    margin: 6px 0 14px 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

/* Petunjuk Interaksi */
.stat-action-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
    transition: all 0.2s;
}

.stat-card-interactive:hover .stat-action-hint {
    opacity: 1;
    gap: 10px;
}

/* SKEMA WARNA TIAP KARTU */

/* 1. Primary (Unggul) */
.stat-primary .stat-icon-wrap { background: #eff6ff; color: #2563eb; }
.stat-primary .stat-badge-pct { background: #dbeafe; color: #1e40af; }
.stat-primary .stat-action-hint { color: #2563eb; }
.stat-primary:hover, .stat-primary.active-filter-card {
    border-color: #3b82f6;
}
.stat-primary.active-filter-card::before { background: #2563eb; }

/* 2. Secondary (Baik Sekali) */
.stat-secondary .stat-icon-wrap { background: #ecfdf5; color: #059669; }
.stat-secondary .stat-badge-pct { background: #d1fae5; color: #065f46; }
.stat-secondary .stat-action-hint { color: #059669; }
.stat-secondary:hover, .stat-secondary.active-filter-card {
    border-color: #10b981;
}
.stat-secondary.active-filter-card::before { background: #059669; }

/* 3. Neutral (Total) */
.stat-neutral .stat-icon-wrap { background: #f8fafc; color: #334155; }
.stat-neutral .stat-badge-pct { background: #e2e8f0; color: #334155; }
.stat-neutral .stat-action-hint { color: #475569; }
.stat-neutral:hover, .stat-neutral.active-filter-card {
    border-color: #0f172a;
}
.stat-neutral.active-filter-card::before { background: #0f172a; }
/* CONTAINER GRID KARTU (LEBIH RINGKAS & JARAK LEBIH RAMPING) */
.stat-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px; /* Jarak antar kartu diperkecil */
    margin-bottom: 22px;
}

/* KARTU STATISTIK VERSI LEBIH KECIL */
.stat-card-interactive {
    background: #ffffff;
    border-radius: 14px; /* Sudut lebih proporsional */
    padding: 10px 10px;  /* Padding diperkecil (sebelumnya 22px 24px) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 20px rgba(5, 8, 74, 0.06);
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

/* BARIS ATAS (IKON & BADGE PERSENTASE) */
.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px; /* Jarak bawah diperkecil */
}

.stat-icon-wrap {
    width: 36px;  /* Ikon diperkecil (sebelumnya 48px) */
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Ukuran icon fa lebih pas */
}

.stat-badge-pct {
    font-size: 10px; /* Teks persentase lebih kecil */
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

/* ANGKA & LABEL */
.stat-number {
    margin: 0;
    font-size: 22px; /* Angka diperkecil (sebelumnya 30px) */
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-unit {
    font-size: 13px; /* Kata 'Program' lebih mungil */
    font-weight: 600;
    color: #64748b;
}

.stat-label {
    margin: 4px 0 8px 0; /* Jarak lebih rapat */
    font-size: 12px;     /* Label ukuran diperkecil */
    font-weight: 600;
    color: #475569;
}

/* TEKS TOMBOL LIHAT DAFTAR */
.stat-action-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px; /* Teks petunjuk lebih mini */
    font-weight: 700;
    opacity: 0.8;
}
/* DESAIN RENTANG TANGGAL MASA BERLAKU */
.date-range-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 10px;
    min-width: 135px;
}

.date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    font-size: 11px;
}

.date-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.date-start .date-label {
    background: #e2e8f0;
    color: #475569;
}

.date-end .date-label {
    background: #dbeafe;
    color: #1e40af;
}

.date-val {
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.date-val i {
    font-size: 11px;
    color: #64748b;
}

.date-end .date-val {
    color: #1e3a8a;
}

.date-separator {
    font-size: 9px;
    color: #94a3b8;
    line-height: 1;
}
/* ==========================================================
   PENGATUR TINGKAT KEBIRUAN (UBAH ANGKA DI SINI)
   ========================================================== */
:root {
    --hero-blue-start: 14, 76, 146;   /* Biru atas */
    --hero-blue-end:   5, 25, 74;     /* Biru bawah */

    /* Atur ketebalan biru: 
       - Lebih terang (foto lebih tampak): 0.40 - 0.55
       - Biru lebih tebal/pekat: 0.70 - 0.85 */
    --hero-opacity-start: 0.65;
    --hero-opacity-end:   0.60;
}

/* ==========================================================
   LAPISAN WARNA OVERLAY BIRU
   ========================================================== */
.unduhan-hero {
    position: relative;
}

.unduhan-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--hero-blue-start), var(--hero-opacity-start)) 0%,
        rgba(var(--hero-blue-end), var(--hero-opacity-end)) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Pastikan tulisan dan tombol berada di atas lapisan biru */
.unduhan-hero > * {
    position: relative;
    z-index: 2;
}
/* 1. PERLEBAR CONTAINER UTAMA AGAR MEMANFAATKAN LEBAR LAYAR */
.akreditasi-container {
    max-width: 96% !important; /* Gunakan hampir seluruh lebar layar */
    width: 96% !important;
    margin: 0 auto !important;
}

/* 2. PASTIKAN TABEL MUAT 100% TANPA SCROLL SAMPING */
.table-custom {
    width: 100% !important;
    table-layout: auto !important;
}

/* 3. RAPATKAN PADDING CELL TABEL SUPAYA SEMUA KOLOM MASUK RAPI */
.table-custom th,
.table-custom td {
    padding: 10px 8px !important; /* Mengurangi jarak kosong yang boros */
    white-space: nowrap !important;
}

/* 4. RAMPINGKAN TOMBOL DOKUMEN & HAPUS AGAR HEMAT TEMPAT */
.doc-btn-group {
    display: inline-flex !important;
    gap: 4px !important;
}

.btn-doc {
    padding: 5px 8px !important;
    font-size: 11px !important;
}

.btn-hapus-action {
    padding: 5px 8px !important;
    font-size: 11px !important;
}
/* Merapatkan kolom No */
.table-custom th:first-child,
.table-custom td:first-child {
    width: 45px !important;
    padding-right: 4px !important;
}

/* Membatasi lebar kolom Program Studi agar tidak membuang banyak ruang kosong */
.table-custom th:nth-child(2),
.table-custom td:nth-child(2) {
    width: 220px !important;
    max-width: 260px !important;
    padding-left: 6px !important;
    padding-right: 12px !important;
}

.prodi-info {
    margin: 0 !important;
    padding: 0 !important;
}
/* ===================================================
   TOMBOL AKSI HAPUS AKREDITASI
   =================================================== */
.btn-hapus-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    background-color: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-hapus-action:hover {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* ===================================================
   TEKS FAKULTAS
   =================================================== */
.fakultas-text {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}
/* Menjaga garis bawah biru tetap muncul pada menu aktif */
.nav-menu-center .nav-link.active {
    color: #0b3954;
    font-weight: 700;
    position: relative;
}

.nav-menu-center .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background-color: #0b3954;
    border-radius: 2px;
}
/* ===================================================
   METRIK KARTU RINGKASAN AKREDITASI
   =================================================== */
.akreditasi-container .stat-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.akreditasi-container .stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.akreditasi-container .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.akreditasi-container .stat-card.active-filter-card {
    border: 1.5px solid #2563eb !important;
    background: #f8fafc;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.akreditasi-container .stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.akreditasi-container .stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.akreditasi-container .stat-primary .stat-icon-wrap { background: #eff6ff; color: #2563eb; }
.akreditasi-container .stat-secondary .stat-icon-wrap { background: #ecfdf5; color: #059669; }
.akreditasi-container .stat-info .stat-icon-wrap { background: #fef3c7; color: #d97706; }
.akreditasi-container .stat-warning .stat-icon-wrap { background: #f3e8ff; color: #9333ea; }
.akreditasi-container .stat-neutral .stat-icon-wrap { background: #f1f5f9; color: #475569; }

.akreditasi-container .stat-badge-pct {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

.akreditasi-container .stat-primary .stat-badge-pct { background: #dbeafe; color: #1e40af; }
.akreditasi-container .stat-secondary .stat-badge-pct { background: #d1fae5; color: #065f46; }
.akreditasi-container .stat-info .stat-badge-pct { background: #fef3c7; color: #92400e; }
.akreditasi-container .stat-warning .stat-badge-pct { background: #f3e8ff; color: #6b21a8; }
.akreditasi-container .stat-neutral .stat-badge-pct { background: #e2e8f0; color: #334155; }

.akreditasi-container .stat-number {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.akreditasi-container .stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.akreditasi-container .stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 10px 0;
}

.akreditasi-container .stat-action-hint {
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Badge Khusus Terakreditasi Pertama */
.rank-pill.badge-pertama {
    background-color: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #d8b4fe;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.rank-pill.badge-pertama i {
    color: #9333ea;
    font-size: 13px;
}
/* Atur tinggi hero section sesuai kebutuhan */
.hero-section {
    min-height: 60vh !important;       /* Gunakan 75vh, 80vh, atau 85vh sesuai panjang yang diinginkan */
    padding-top: 100px !important;     /* Memberi ruang atas */
    padding-bottom: 120px !important;  /* Memberi ruang bawah agar background memanjang */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
}
/* ===================================================
   PERBAIKAN JARAK LOGO & KESEIMBANGAN KOLOM FOOTER
   =================================================== */

/* 1. SEIMBANGKAN TATA LETAK 3 KOLOM */
.custom-lpm-footer .footer-inner-container {
    max-width: 1440px !important;
    width: 92% !important;
    margin: 0 auto !important;
    display: grid !important;
    /* Ubah ke 1.2fr 1fr 1fr agar kolom tengah tidak terdorong terlalu ke kanan */
    grid-template-columns: 1.2fr 1fr 1fr !important;
    column-gap: 50px !important;
    row-gap: 30px !important;
    padding: 65px 0 45px 0 !important;
    align-items: start !important;
}

/* 2. ATUR JARAK LOGO DENGAN TEKS (TIDAK LAGI BERSENTUHAN) */
.custom-lpm-footer .footer-logo-header {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;           /* Memberi jarak aman antara logo dan teks */
    margin-bottom: 20px !important;
}

.custom-lpm-footer .logo-emblem {
    flex-shrink: 0 !important;     /* Mencegah logo gepeng/tertekan */
    display: flex !important;
    align-items: center !important;
}

.custom-lpm-footer .footer-logo-img {
    width: 80px !important;        /* Ukuran logo pas dan proporsional */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.custom-lpm-footer .brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.custom-lpm-footer .brand-text h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 5px 0 !important;
    color: #ffffff !important;
}

.custom-lpm-footer .brand-text span {
    font-size: 16px !important;
    color: #cbd5e1 !important;
    display: block !important;
    font-weight: 500 !important;
}

/* 3. TEKS DESKRIPSI & KONTAK KOLOM KIRI */
.custom-lpm-footer .footer-desc {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #e2e8f0 !important;
    margin: 0 0 24px 0 !important;
    max-width: 440px !important;    /* Batasi agar tidak meluber ke kolom tengah */
}

.custom-lpm-footer .footer-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.custom-lpm-footer .contact-pill-item {
    font-size: 15px !important;
    padding: 9px 16px !important;
    gap: 12px !important;
}

/* 4. KOLOM TENGAH (JAM OPERASIONAL) */
.custom-lpm-footer .col-hours {
    padding-left: 10px !important;  /* Beri posisi awal yang seimbang */
}

.custom-lpm-footer .card-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.custom-lpm-footer .footer-heading {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    margin: 0 !important;
}

.custom-lpm-footer .heading-icon {
    font-size: 20px !important;
}

.custom-lpm-footer .schedule-row {
    font-size: 15.5px !important;
    padding: 10px 0 !important;
}

.custom-lpm-footer .break-time-badge {
    padding: 12px 20px !important;
    font-size: 15px !important;
    margin-top: 18px !important;
    border-radius: 10px !important;
}

.custom-lpm-footer .badge-hours {
    font-weight: 700 !important;
}

/* 5. KOLOM KANAN (ALAMAT & SOSMED) */
.custom-lpm-footer .address-text-block strong {
    font-size: 17px !important;
    margin-bottom: 6px !important;
    display: block !important;
    color: #ffffff !important;
}

.custom-lpm-footer .address-text-block p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 0 5px 0 !important;
    color: #cbd5e1 !important;
}

.custom-lpm-footer .social-section {
    margin-top: 24px !important;
}

.custom-lpm-footer .btn-instagram-pill {
    font-size: 15px !important;
    padding: 9px 20px !important;
}

/* 6. COPYRIGHT BAR */
.custom-lpm-footer .footer-copyright-bar {
    font-size: 14.5px !important;
    padding: 24px 0 !important;
}
/* Geser Kolom Paling Kanan ke Ujung Kanan */
.custom-lpm-footer .col-address {
    justify-self: end !important; /* Mendorong seluruh blok kolom 3 ke sisi kanan */
    max-width: 360px !important;  /* Menjaga lebar konten tetap rapi */
    width: 100% !important;
}
/* ===================================================
   TOMBOL AKSI ADMIN (EDIT & HAPUS) & MODAL TAMBAHAN
   =================================================== */
.admin-action-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-action-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-action-edit:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.btn-action-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-action-delete:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}

.featured-admin-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.mading-card-footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mading-left-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.preview-file-text {
    display: block;
    color: #64748b;
    font-size: 11.5px;
    margin-top: 4px;
}
/* ===================================================
   TYPOGRAPHY HERO BANNER BERSIH (PUTIH & BIRU BERKILAU)
   =================================================== */

.profil-hero-clean-text {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Badge Lembaga Bersih */
.profil-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 6px;
}

.profil-badge-pill i {
    color: #38bdf8;
    font-size: 13px;
}

/* Judul Utama "PROFIL" Bersih & Terang (Tanpa Bayangan Hitam Kotor) */
.profil-heading-clean {
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: #ffffff;
    /* Glow lembut transparan tanpa noda hitam */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Kata "FIL" Biru Cerah Menyala */
.text-gradient-blue {
    color: #2563eb;
    background: linear-gradient(135deg, #38bdf8, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Sub-Judul Rapi & Bersih */
.profil-sub-clean {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.profil-sub-clean .highlight-blue {
    color: #38bdf8;
    font-weight: 800;
}

/* Responsif Layar Kecil */
@media (max-width: 768px) {
    .profil-heading-clean {
        font-size: 42px;
    }
    .profil-sub-clean {
        font-size: 17px;
    }
}
/* Lapisan overlay bernuansa biru elegan di atas foto */
.profil-hero-overlay {
    position: absolute;
    inset: 0;
    /* Gradien biru navy ke biru laut khas institusi */
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.72) 0%,
        rgba(30, 58, 138, 0.65) 50%,
        rgba(14, 116, 144, 0.55) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.profil-hero-video-container {
    position: relative;
    width: 100%;
    min-height: 480px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Styling teks judul & badge tanpa mengubah ukuran container background */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    margin-bottom: 8px;
}

.hero-chip i {
    color: #38bdf8;
    font-size: 13px;
}

/* Judul besar, tebal, dan tegas */
.hero-heading {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 6px 0;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Aksen biru langit terang menyala (bebas bayangan hitam kotor) */
.text-gradient-blue {
    color: #38bdf8;
    background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Sub-judul rapi */
.hero-subtext {
    font-size: 16px;
    color: #f1f5f9;
    max-width: 750px;
    margin: 4px auto 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hero-subtext .highlight-cyan {
    color: #38bdf8;
    font-weight: 700;
}
/* ===================================================
   TIPOGRAFI HERO UNDUHAN (KOMBINASI PUTIH & BIRU ELEGAN)
   =================================================== */

.unduhan-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Badge Pill Bersih & Rapi */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    margin-bottom: 6px;
}

.hero-chip i {
    color: #38bdf8;
    font-size: 13px;
}

/* Judul Utama Putih Tegas */
.hero-heading {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 4px 0;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Aksen Gradien Biru Cerah Menyala */
.text-gradient-cyan {
    color: #38bdf8;
    background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 60%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
}

/* Subteks Keterangan */
.hero-subtext {
    font-size: 16px;
    color: #f1f5f9;
    max-width: 780px;
    line-height: 1.6;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hero-subtext .highlight-cyan {
    color: #38bdf8;
    font-weight: 700;
}

/* Responsif Mobile & Tablet */
@media (max-width: 768px) {
    .hero-heading {
        font-size: 32px;
    }
    .hero-subtext {
        font-size: 14px;
    }
    .hero-chip {
        font-size: 10.5px;
        padding: 5px 14px;
    }
}
/* ===================================================
   TIPOGRAFI HERO AKREDITASI (PUTIH & BIRU ELEGAN)
   =================================================== */

.akreditasi-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Badge Pill */
.akreditasi-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    margin-bottom: 6px;
}

.akreditasi-hero-chip i {
    color: #38bdf8;
    font-size: 13px;
}

/* Judul Utama */
.akreditasi-hero-title {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 4px 0;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Aksen Warna Biru Cerah Menyala */
.text-gradient-cyan {
    color: #38bdf8;
    background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 60%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
}

/* Subteks Keterangan */
.akreditasi-hero-desc {
    font-size: 16px;
    color: #f1f5f9;
    max-width: 780px;
    line-height: 1.6;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.akreditasi-hero-desc .highlight-cyan {
    color: #38bdf8;
    font-weight: 700;
}

/* Responsif Mobile & Tablet */
@media (max-width: 768px) {
    .akreditasi-hero-title {
        font-size: 32px;
    }
    .akreditasi-hero-desc {
        font-size: 14px;
    }
    .akreditasi-hero-chip {
        font-size: 10.5px;
        padding: 5px 14px;
    }
}
/* ===================================================
   HERO BANNER OVERLAY & TIPOGRAFI AKREDITASI
   =================================================== */

/* Pastikan kontainer utama posisinya relatif */
.akreditasi-hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Lapisan gradien biru transparan di atas foto */
.akreditasi-hero-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.72) 0%,
        rgba(30, 58, 138, 0.65) 50%,
        rgba(14, 116, 144, 0.55) 100%
    ) !important;
    z-index: 1;
    pointer-events: none;
}

/* Teks tampil di atas lapisan biru */
.akreditasi-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Badge Pill Lembaga */
.akreditasi-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    margin-bottom: 6px;
}

.akreditasi-hero-chip i {
    color: #38bdf8;
    font-size: 13px;
}

/* Judul Utama */
.akreditasi-hero-title {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 4px 0;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Aksen Warna Biru Cerah Menyala */
.text-gradient-cyan {
    color: #38bdf8;
    background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 60%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
}

/* Subteks Keterangan */
.akreditasi-hero-desc {
    font-size: 16px;
    color: #f1f5f9;
    max-width: 780px;
    line-height: 1.6;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.akreditasi-hero-desc .highlight-cyan {
    color: #38bdf8;
    font-weight: 700;
}

/* Responsif Mobile & Tablet */
@media (max-width: 768px) {
    .akreditasi-hero-title {
        font-size: 32px;
    }
    .akreditasi-hero-desc {
        font-size: 14px;
    }
    .akreditasi-hero-chip {
        font-size: 10.5px;
        padding: 5px 14px;
    }
}
/* ==========================================================================
   UNIVERSAL KINETIC MOTION ENGINE (BPM UMPAR DYNAMIC SUITE)
   ========================================================================== */

/* 1. KUNCI KURVA GERAKAN FLUID & NATURAL */
:root {
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. ANIMASI HERO BANNER & GAMBAR LATAR */
.akreditasi-hero,
.profil-hero,
.info-hero,
.unduhan-hero,
header[class*="-hero"] {
    animation: heroBackgroundZoom 1.4s var(--motion-ease) forwards;
}

@keyframes heroBackgroundZoom {
    0% {
        background-size: cover;
        filter: saturate(0.85);
    }
    100% {
        background-size: cover;
        filter: saturate(1);
    }
}

/* 3. GERAKAN MASUK ELEMEN HERO SECARA BERURUTAN (STAGGERED) */
.akreditasi-hero-chip,
.hero-chip,
span[class*="-chip"] {
    opacity: 0;
    transform: translateY(-16px) scale(0.92);
    animation: motionPop 0.65s var(--motion-bounce) 0.15s forwards;
}

.akreditasi-hero-title,
.profil-hero-title,
.info-hero-title,
h1[class*="-title"] {
    opacity: 0;
    transform: translateY(22px);
    animation: motionSlideUp 0.8s var(--motion-ease) 0.25s forwards;
}

.akreditasi-hero-desc,
.profil-hero-desc,
p[class*="-desc"] {
    opacity: 0;
    transform: translateY(18px);
    animation: motionSlideUp 0.85s var(--motion-ease) 0.38s forwards;
}

/* 4. ANIMASI KARTU METRIK & STATISTIK */
.stat-grid-row > div,
.stat-card {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    animation: motionCardReveal 0.75s var(--motion-ease) forwards;
    transition: transform 0.35s var(--motion-ease), box-shadow 0.35s var(--motion-ease), border-color 0.35s ease;
}

/* Penundaan berurutan (cascade) tiap kartu */
.stat-grid-row > div:nth-child(1), .stat-card:nth-child(1) { animation-delay: 0.35s; }
.stat-grid-row > div:nth-child(2), .stat-card:nth-child(2) { animation-delay: 0.45s; }
.stat-grid-row > div:nth-child(3), .stat-card:nth-child(3) { animation-delay: 0.55s; }
.stat-grid-row > div:nth-child(4), .stat-card:nth-child(4) { animation-delay: 0.65s; }
.stat-grid-row > div:nth-child(5), .stat-card:nth-child(5) { animation-delay: 0.75s; }

/* Interaksi saat kursor menyentuh kartu */
.stat-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 18px 30px -8px rgba(14, 116, 144, 0.18), 0 8px 12px -4px rgba(0, 0, 0, 0.05);
}

.stat-card:hover .stat-icon-wrap i {
    transform: scale(1.18) rotate(6deg);
    transition: transform 0.35s var(--motion-bounce);
}

/* 5. ANIMASI BAR FILTER, PENCARIAN, & TAB PILL */
.akreditasi-control-bar,
.control-bar,
.filter-tab-pills {
    opacity: 0;
    transform: translateY(16px);
    animation: motionSlideUp 0.7s var(--motion-ease) 0.6s forwards;
}

.tab-pill {
    transition: all 0.25s var(--motion-ease);
}

.tab-pill:hover {
    transform: translateY(-2px);
}

.tab-pill.active {
    transform: scale(1.04);
}

/* 6. ANIMASI KONTEN TABEL & CONTAINER UTAMA */
.akreditasi-table-card,
.table-card,
main[class*="-container"] {
    opacity: 0;
    transform: translateY(30px);
    animation: motionSlideUp 0.85s var(--motion-ease) 0.7s forwards;
}

/* Baris tabel mengalir muncul berurutan */
tbody tr {
    opacity: 0;
    transform: translateX(-10px);
    animation: rowFlowIn 0.5s var(--motion-ease) forwards;
}

tbody tr:nth-child(1)  { animation-delay: 0.75s; }
tbody tr:nth-child(2)  { animation-delay: 0.80s; }
tbody tr:nth-child(3)  { animation-delay: 0.85s; }
tbody tr:nth-child(4)  { animation-delay: 0.90s; }
tbody tr:nth-child(5)  { animation-delay: 0.95s; }
tbody tr:nth-child(6)  { animation-delay: 1.00s; }
tbody tr:nth-child(7)  { animation-delay: 1.05s; }
tbody tr:nth-child(8)  { animation-delay: 1.10s; }
tbody tr:nth-child(n+9){ animation-delay: 1.15s; }

tbody tr:hover {
    transform: translateX(4px);
    transition: transform 0.2s var(--motion-ease), background-color 0.2s ease;
}

/* 7. INTERAKSI TOMBOL AKSI, BADGE & DOKUMEN */
.rank-pill,
.strata-pill,
.btn-doc,
.btn-edit-action,
.btn-hapus-action,
.btn-add-modal-trigger {
    transition: transform 0.22s var(--motion-bounce), box-shadow 0.22s ease;
}

.btn-doc:hover,
.btn-edit-action:hover,
.btn-add-modal-trigger:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

.btn-hapus-action:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25);
}

/* 8. FRAME ANIMASI INTI */
@keyframes motionSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motionPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes motionCardReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rowFlowIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ===================================================
   ANIMASI KARTU INTERNAL: MELUNCUR DARI KIRI KE KANAN
   =================================================== */

/* Menargetkan kartu kamar di halaman internal */
.internal-grid .card,
.spmi-grid .card,
.menu-grid .card,
.kamar-card,
div[class*="grid"] > div[class*="card"] {
    opacity: 0;
    transform: translateX(-60px);
    animation: slideInFromLeft 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Penundaan berurutan (muncul satu per satu dari kiri) */
.internal-grid .card:nth-child(1),
div[class*="grid"] > div[class*="card"]:nth-child(1) {
    animation-delay: 0.15s;
}

.internal-grid .card:nth-child(2),
div[class*="grid"] > div[class*="card"]:nth-child(2) {
    animation-delay: 0.28s;
}

.internal-grid .card:nth-child(3),
div[class*="grid"] > div[class*="card"]:nth-child(3) {
    animation-delay: 0.40s;
}

.internal-grid .card:nth-child(4),
div[class*="grid"] > div[class*="card"]:nth-child(4) {
    animation-delay: 0.52s;
}

.internal-grid .card:nth-child(5),
div[class*="grid"] > div[class*="card"]:nth-child(5) {
    animation-delay: 0.64s;
}

.internal-grid .card:nth-child(n+6),
div[class*="grid"] > div[class*="card"]:nth-child(n+6) {
    animation-delay: 0.76s;
}

/* Efek saat kursor diarahkan ke kartu */
.internal-grid .card:hover,
div[class*="grid"] > div[class*="card"]:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.18);
}

/* Animasi keyframe dari kiri ke posisi normal */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ===================================================
   ANIMASI KARTU INTERNAL (.feature-card) DARI KIRI KE KANAN
   =================================================== */

/* Keadaan awal kartu: tersembunyi dan bergeser ke kiri */
.cards-container .feature-card {
    opacity: 0;
    transform: translateX(-80px);
    animation: cardSlideFromLeft 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Muncul berurutan satu per satu dari kiri (Staggered Delay) */
.cards-container .feature-card:nth-child(1) { animation-delay: 0.15s; }
.cards-container .feature-card:nth-child(2) { animation-delay: 0.30s; }
.cards-container .feature-card:nth-child(3) { animation-delay: 0.45s; }
.cards-container .feature-card:nth-child(4) { animation-delay: 0.60s; }
.cards-container .feature-card:nth-child(5) { animation-delay: 0.75s; }
.cards-container .feature-card:nth-child(n+6) { animation-delay: 0.90s; }

/* Efek interaktif saat kursor menyentuh kartu */
.cards-container .feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 30px -10px rgba(14, 116, 144, 0.22);
}

.cards-container .feature-card:hover .card-icon i {
    transform: scale(1.2) rotate(6deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animasi meluncur dari kiri ke posisi aslinya */
@keyframes cardSlideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-80px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ===================================================
   ANIMASI MODUL PROFIL (.profil.php KINETIC REVEAL)
   =================================================== */

/* 1. HERO TITLE & TEXT PROFIL */
.profil-hero,
div[class*="hero-profil"],
header[class*="profil"] {
    animation: heroBackgroundZoom 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

div[class*="hero-profil"] .hero-chip,
.profil-hero-chip,
div[class*="profil"] .badge-chip {
    opacity: 0;
    transform: translateY(-15px);
    animation: motionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

h1[class*="profil"],
.profil-title,
div[class*="profil"] h1 {
    opacity: 0;
    transform: translateY(25px);
    animation: motionSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

/* 2. KARTU SAMBUTAN KETUA LPM (MELUNCUR DARI KIRI) */
.sambutan-card,
div[class*="sambutan"],
section[class*="sambutan"] > div {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sambutan-card:hover,
div[class*="sambutan"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
}

/* 3. BAGAN STRUKTUR ORGANISASI (STAGGERED POP-UP) */
div[class*="struktur"] .card,
div[class*="organisasi"] .card,
div[class*="struktur"] div[class*="node"],
div[class*="bagan"] > div {
    opacity: 0;
    transform: translateY(35px) scale(0.95);
    animation: motionCardReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Muncul bertingkat: Ketua dulu, lalu para Kadiv */
div[class*="struktur"] div:nth-child(1) { animation-delay: 0.45s; }
div[class*="struktur"] div:nth-child(2) { animation-delay: 0.60s; }
div[class*="struktur"] div:nth-child(3) { animation-delay: 0.70s; }
div[class*="struktur"] div:nth-child(4) { animation-delay: 0.80s; }

div[class*="struktur"] .card:hover,
div[class*="organisasi"] .card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 28px -6px rgba(37, 99, 235, 0.18);
}

/* 4. KARTU DOKUMEN TUPOKSI & ANJAB */
div[class*="tupoksi"],
div[class*="dokumen-bpm"] .card,
.tupoksi-card {
    opacity: 0;
    transform: translateY(30px);
    animation: motionSlideUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

div[class*="tupoksi"]:hover,
.tupoksi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px -6px rgba(37, 99, 235, 0.2);
}
/* ==========================================================================
   ANIMASI SEMUA KARTU DI HALAMAN PROFIL (BAGIAN BAWAH)
   ========================================================================== */

/* 1. KARTU SAMBUTAN KETUA LPM */
.sambutan-wrapper,
.sambutan-card,
div[class*="sambutan"] {
    opacity: 0;
    transform: translateY(40px);
    animation: profilCardEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.sambutan-card:hover,
div[class*="sambutan"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.15);
}

/* 2. SEMUA KARTU FOTO STRUKTUR ORGANISASI (KETUA & KADIV) */
.struktur-container div[class*="card"],
.struktur-tree div[class*="node"],
.org-card,
div[class*="struktur"] .card,
div[class*="struktur"] [class*="member"],
div[class*="struktur"] [class*="item"] {
    opacity: 0;
    transform: translateY(45px) scale(0.94);
    animation: profilCardPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Muncul berurutan satu per satu ke bawah */
div[class*="struktur"] [class*="card"]:nth-child(1),
div[class*="struktur"] [class*="node"]:nth-child(1) { animation-delay: 0.45s; }

div[class*="struktur"] [class*="card"]:nth-child(2),
div[class*="struktur"] [class*="node"]:nth-child(2) { animation-delay: 0.60s; }

div[class*="struktur"] [class*="card"]:nth-child(3),
div[class*="struktur"] [class*="node"]:nth-child(3) { animation-delay: 0.72s; }

div[class*="struktur"] [class*="card"]:nth-child(4),
div[class*="struktur"] [class*="node"]:nth-child(4) { animation-delay: 0.84s; }

div[class*="struktur"] [class*="card"]:nth-child(n+5),
div[class*="struktur"] [class*="node"]:nth-child(n+5) { animation-delay: 0.96s; }

/* Efek angkat saat mouse diarahkan ke foto struktur */
div[class*="struktur"] [class*="card"]:hover,
div[class*="struktur"] [class*="node"]:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 30px -8px rgba(37, 99, 235, 0.22);
}

/* 3. KARTU TUPOKSI & ANJAB (PALING BAWAH) */
.tupoksi-card,
div[class*="tupoksi"] .card,
div[class*="dokumen-bpm"],
div[class*="tupoksi-anjab"] {
    opacity: 0;
    transform: translateY(50px);
    animation: profilCardEntry 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.tupoksi-card:hover,
div[class*="dokumen-bpm"]:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 32px -8px rgba(37, 99, 235, 0.2);
}

/* 4. KEYFRAME ANIMASI */
@keyframes profilCardEntry {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes profilCardPop {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ==========================================================================
   DYNAMIC MOTION & SCROLL REVEAL MODUL PROFIL
   ========================================================================== */

/* 1. HERO TITLE & TEXT BANNER */
.profil-badge-pill {
    opacity: 0;
    transform: translateY(-16px);
    animation: profilPopUp 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.profil-heading-clean {
    opacity: 0;
    transform: translateY(24px);
    animation: profilSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.profil-sub-clean {
    opacity: 0;
    transform: translateY(20px);
    animation: profilSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.38s forwards;
}

/* 2. SAMBUTAN KETUA LPM */
.kepala-card {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.sambutan-content {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.kepala-card.reveal-active,
.sambutan-content.reveal-active {
    opacity: 1;
    transform: translateX(0);
}

.kepala-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.15);
}

/* 3. KARTU FOTO STRUKTUR ORGANISASI (.member-card) */
.member-card {
    opacity: 0;
    transform: translateY(45px) scale(0.94);
    transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.member-card.reveal-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.member-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 30px -8px rgba(37, 99, 235, 0.22);
}

/* 4. KARTU DOKUMEN TUPOKSI & ANJAB (.dokumen-card) */
.dokumen-card {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dokumen-card.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.dokumen-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 32px -8px rgba(37, 99, 235, 0.2);
}

/* KEYFRAMES */
@keyframes profilSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes profilPopUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   DYNAMIC KINETIC MOTION FOOTER (SLIDE-IN FROM LEFT TO RIGHT)
   ========================================================================== */

/* 1. Latar Belakang & Cahaya Halus Footer */
.custom-lpm-footer {
    overflow: hidden;
    position: relative;
}

.footer-bg-glow {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-lpm-footer.reveal-active .footer-bg-glow {
    opacity: 1;
    transform: translateX(0);
}

/* 2. Format Awal Kolom Footer (Tergeser ke Kiri & Transparan) */
.custom-lpm-footer .footer-card {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* 3. Gerakan Mengalir Berurutan dari Kiri ke Kanan (Staggered Cascade) */
/* Kolom 1: Profil Lembaga & Kontak (Masuk Paling Awal) */
.custom-lpm-footer.reveal-active .footer-card.col-brand {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

/* Kolom 2: Jam Operasional (Menyusul Berikutnya) */
.custom-lpm-footer.reveal-active .footer-card.col-hours {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.28s;
}

/* Kolom 3: Alamat Kantor & Media Sosial (Menyusul Terakhir) */
.custom-lpm-footer.reveal-active .footer-card.col-address {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.46s;
}

/* 4. Gerakan Komponen Internal (Pills, Badges & Social) */
.footer-contact-list .contact-pill-item,
.break-time-badge,
.btn-instagram-pill {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-lpm-footer.reveal-active .footer-contact-list .contact-pill-item:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;
}

.custom-lpm-footer.reveal-active .footer-contact-list .contact-pill-item:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.48s;
}

.custom-lpm-footer.reveal-active .break-time-badge {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.55s;
}

.custom-lpm-footer.reveal-active .btn-instagram-pill {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.65s;
}

/* 5. Baris Hak Cipta (Meluncur Naik Halus Terakhir) */
.footer-copyright-bar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}

.custom-lpm-footer.reveal-active .footer-copyright-bar {
    opacity: 1;
    transform: translateY(0);
}

/* 6. Interaksi Mikro Saat Kursor Mengarah (Hover Interactions) */
.footer-contact-list .contact-pill-item:hover,
.btn-instagram-pill:hover {
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.break-time-badge:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.15);
}
/* 1. Taruh garis vertikal di lapisan belakang */
.org-branch-wrap.org-5-nodes .org-branch-node::before {
    z-index: 1 !important;
}

/* 2. Kartu saat normal berada di atas garis */
.org-branch-wrap.org-5-nodes .member-card {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Saat kartu di-hover dan terangkat naik, pastikan kartu menutupi garis di belakangnya */
.org-branch-wrap.org-5-nodes .member-card:hover {
    z-index: 10 !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE OVERRIDES (ALL PAGES)
   ========================================================================== */

/* Cegah horizontal scroll berlebih akibat animasi/elemen melebar */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsif Layar Laptop Kecil / Tablet Landscape (<= 1200px) */
@media (max-width: 1200px) {
    html body .nav-container {
        padding: 0 20px !important;
        justify-content: center !important;
    }

    html body .nav-menu-center {
        gap: 24px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    html body .nav-menu-center .nav-link {
        font-size: 15.5px !important;
        white-space: nowrap !important;
    }

    html body .org-branch-wrap.org-5-nodes {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    html body .org-branch-wrap.org-5-nodes::before,
    html body .org-branch-wrap.org-5-nodes .org-branch-node::before {
        display: none !important;
    }
}

/* Responsif Tablet & Layar Menengah (<= 992px) */
@media (max-width: 992px) {
    /* 1. Navbar & Top Bar */
    html body .nav-container {
        padding: 0 12px !important;
        justify-content: center !important;
    }

    html body .nav-menu-center {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    html body .nav-menu-center .nav-link {
        font-size: 13.5px !important;
        white-space: nowrap !important;
    }

    /* 2. Hero Sections */
    html body .hero-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center !important;
    }

    html body .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    html body .hero-subtitle {
        max-width: 100% !important;
    }

    html body .hero-buttons {
        justify-content: center !important;
    }

    html body .hero-stats-wrapper {
        width: 100% !important;
    }

    html body .lpm-stats-deck {
        max-width: 560px !important;
        margin: 0 auto !important;
    }

    /* 3. Profil: Sambutan & Struktur Organisasi */
    html body .sambutan-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 28px 22px !important;
    }

    html body .kepala-visual-wrap {
        max-width: 300px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    html body .sambutan-header {
        text-align: center !important;
    }

    html body .sambutan-ppepp-badges {
        justify-content: center !important;
    }

    html body .org-branch-wrap,
    html body .org-branch-wrap.org-3-nodes,
    html body .org-branch-wrap.org-2-nodes,
    html body .org-branch-wrap.org-5-nodes {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        padding-top: 0 !important;
        margin-top: 20px !important;
    }

    html body .org-line-down,
    html body .org-branch-wrap::before,
    html body .org-branch-node::before {
        display: none !important;
    }

    html body .org-branch-node {
        flex: 0 1 280px !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    html body .org-chart-wrap .member-card,
    html body .org-branch-wrap.org-5-nodes .member-card {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    html body .org-chart-wrap .member-img-wrap,
    html body .org-branch-wrap.org-5-nodes .member-img-wrap {
        height: 340px !important;
    }

    /* 4. Admin Upload Bars (SPMI, Auditor, UPM-GPM, RTM-RTL, Tupoksi, Akreditasi, ISO) */
    html body .admin-upload-card,
    html body .admin-upload-card-wide,
    html body .upload-bar-inner,
    html body .spmi-compact-upload-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 18px !important;
    }

    html body .upload-badge,
    html body .upload-badge-left,
    html body .scub-info {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-right: 0 !important;
        padding-bottom: 12px !important;
        margin-bottom: 2px !important;
        width: 100% !important;
    }

    html body .upload-form-inline,
    html body .upload-form-grid-upm,
    html body .upload-form-flex,
    html body .form-baris,
    html body .scub-form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html body .upload-form-inline .input-field,
    html body .upload-form-grid-upm .input-item-upm,
    html body .upload-form-flex .input-box,
    html body .upload-form-flex .input-box.grow-2,
    html body .form-baris .field-input,
    html body .scub-input-group,
    html body .field-rentang-tanggal,
    html body .field-rentang-tanggal-akred,
    html body .field-rentang-tanggal-iso,
    html body .date-range-combo-upm,
    html body .date-picker-combo {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    html body .btn-file-select,
    html body .btn-submit-upload,
    html body .file-pick-btn-upm,
    html body .submit-btn-upm,
    html body .btn-pilih-berkas,
    html body .btn-simpan-data,
    html body .scub-file-wrap,
    html body .scub-file-label,
    html body .scub-btn-submit {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 5. Tabel & Wrapper Scrollable */
    html body .table-responsive,
    html body .table-responsive-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    /* 6. Footer 3 Kolom -> 1 Kolom Rapi */
    html body .custom-lpm-footer .footer-inner-container {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 40px 0 30px 0 !important;
        width: 90% !important;
    }

    html body .custom-lpm-footer .col-hours {
        padding-left: 0 !important;
    }

    html body .custom-lpm-footer .col-address {
        justify-self: start !important;
        max-width: 100% !important;
    }

    html body .custom-lpm-footer .footer-desc {
        max-width: 100% !important;
    }
}

/* Responsif Mobile / Smartphone (<= 768px) */
@media (max-width: 768px) {
    /* 1. Top Bar */
    html body .top-bar {
        padding: 8px 12px !important;
    }

    html body .top-bar-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    html body .top-info {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    html body .top-info span {
        word-break: break-word !important;
    }

    html body .top-actions {
        width: 100% !important;
        justify-content: center !important;
    }

    html body .top-bar .search-box {
        width: 100% !important;
    }

    html body .top-bar .search-box input,
    html body .top-bar .search-box input:focus {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Main Navbar (Satu Baris Penuh, Tanpa Pindah ke Bawah & Tanpa Geser) */
    html body .main-navbar {
        padding: 6px 6px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    html body .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        min-height: 44px !important;
        width: 100% !important;
    }

    html body .nav-brand {
        display: none !important;
    }

    html body .nav-menu-center {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body .nav-menu-center .nav-link {
        font-size: clamp(9.5px, 2.55vw, 13px) !important;
        padding: 5px 4px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-align: center !important;
        letter-spacing: -0.3px !important;
        flex-shrink: 1 !important;
    }

    html body .nav-menu-center .nav-link.active {
        background-color: #eff6ff !important;
        color: #1d4ed8 !important;
    }

    html body .nav-menu-center .nav-link.active::after {
        bottom: 0 !important;
        height: 2px !important;
    }

    html body .profile-dropdown-container {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    html body .btn-profile-icon,
    html body .profile-dropdown-container .btn-profile-icon {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    html body .profile-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 10px) !important;
        width: min(260px, calc(100vw - 24px)) !important;
        z-index: 9999 !important;
    }

    /* 3. Hero Sections Semua Halaman */
    html body .hero-section {
        min-height: auto !important;
        padding: 40px 16px 50px 16px !important;
    }

    html body .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    html body .hero-subtitle {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }

    html body .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    html body .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html body .cockpit-header-bar {
        padding: 16px !important;
    }

    html body .cockpit-title {
        font-size: 17px !important;
    }

    html body .stat-card-lpm {
        padding: 16px !important;
    }

    html body .stat-value {
        font-size: 24px !important;
    }

    /* Eksternal Hero & Metrics */
    html body .external-hero {
        min-height: auto !important;
        padding: 50px 16px 60px 16px !important;
    }

    html body .external-hero-title,
    html body .external-hero-title span,
    html body .external-hero-title .highlight-blue,
    html body .text-blue-glow {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    html body .external-hero-desc {
        font-size: 14px !important;
    }

    html body .external-metrics-bar {
        padding: 18px 16px !important;
    }

    html body .metrics-bar-container {
        flex-direction: column !important;
        gap: 14px !important;
    }

    html body .metric-divider {
        display: none !important;
    }

    html body .metric-number {
        font-size: 20px !important;
    }

    /* Profil Hero & Section */
    html body .profil-hero-video-container {
        min-height: 300px !important;
        height: auto !important;
        padding: 60px 16px !important;
    }

    html body .profil-heading-clean {
        font-size: 36px !important;
    }

    html body .profil-sub-clean {
        font-size: 15px !important;
    }

    html body .profil-section {
        padding: 24px 14px !important;
    }

    html body .section-title-wrap {
        margin-bottom: 32px !important;
    }

    html body .section-title {
        font-size: 22px !important;
    }

    html body .section-title::after {
        width: 120px !important;
    }

    html body .sambutan-grid {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }

    html body .kepala-img-wrap {
        height: 320px !important;
    }

    html body .sambutan-header h2 {
        font-size: 21px !important;
    }

    html body .sambutan-body p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    html body .dokumen-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body .dokumen-card {
        padding: 24px 18px !important;
    }

    /* Informasi & Admin Informasi Hero & Layout */
    html body .info-hero,
    html body .info-hero-banner {
        min-height: 260px !important;
        height: auto !important;
        padding: 45px 16px 65px 16px !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    html body .info-hero-inner {
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    html body .info-hero .hero-heading,
    html body .info-hero-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    html body .info-hero .hero-subtext,
    html body .info-hero-subtitle {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    html body .info-container,
    html body .info-main-container {
        margin: -30px auto 40px auto !important;
        width: 94% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body .info-filter-bar,
    html body .filter-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    html body .filter-strip .filter-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html body .filter-strip .tab-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    html body .filter-right-tools,
    html body .filter-right-tools .search-field {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .btn-add-info-trigger {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    html body .filter-pills-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        padding-bottom: 4px !important;
        gap: 8px !important;
    }

    html body .filter-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    html body .info-search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .featured-news-card {
        grid-template-columns: 1fr !important;
        border-radius: 16px !important;
        margin-bottom: 24px !important;
    }

    html body .featured-media,
    html body .featured-img-box {
        min-height: 200px !important;
        max-height: 240px !important;
    }

    html body .featured-info,
    html body .featured-text-box {
        padding: 20px 16px !important;
    }

    html body .featured-title {
        font-size: 20px !important;
    }

    html body .featured-actions,
    html body .featured-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    html body .featured-actions .btn-read-primary,
    html body .featured-actions .btn-doc-download,
    html body .featured-actions .btn-doc-locked-inline {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    html body .mading-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    html body .mading-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    html body .info-admin-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    /* Unduhan Hero & Container */
    html body .unduhan-hero {
        min-height: auto !important;
        padding: 50px 16px 90px 16px !important;
    }

    html body .unduhan-hero .hero-heading {
        font-size: 28px !important;
    }

    html body .unduhan-container {
        margin: -45px auto 40px auto !important;
        padding: 0 14px !important;
    }

    html body .unduhan-control-bar {
        padding: 14px 16px !important;
    }

    html body .btn-add-unduhan {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Akreditasi Hero & Container */
    html body .akreditasi-hero {
        min-height: auto !important;
        padding: 50px 16px 95px 16px !important;
    }

    html body .akreditasi-hero-title {
        font-size: 28px !important;
    }

    html body .akreditasi-hero-desc {
        font-size: 14px !important;
    }

    html body .akreditasi-container {
        margin: -50px auto 40px auto !important;
        padding: 0 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .akreditasi-container .stat-grid-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    html body .akreditasi-container .stat-card {
        padding: 14px !important;
    }

    html body .akreditasi-container .stat-number {
        font-size: 20px !important;
    }

    html body .akreditasi-control-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    html body .akreditasi-control-bar .filter-tab-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    html body .akreditasi-control-bar .filter-tab-pills::-webkit-scrollbar {
        display: none !important;
    }

    html body .akreditasi-control-bar .tab-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    html body .akreditasi-control-bar .control-right-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    html body .akreditasi-control-bar .search-field {
        width: 100% !important;
    }

    html body .akreditasi-control-bar .btn-add-modal-trigger {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Kamar SPMI, Auditor, UPM-GPM, RTM-RTL */
    html body .spmi-hero-section {
        padding: 36px 16px 65px 16px !important;
    }

    html body .spmi-hero-title {
        font-size: 24px !important;
    }

    html body .spmi-main-container {
        margin: -35px auto 40px auto !important;
        padding: 0 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 18px !important;
    }

    html body .table-card {
        padding: 16px 14px !important;
    }

    html body .table-header-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    html body .table-tools-right {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    html body .category-tabs {
        width: 100% !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    html body .category-tabs .tab-btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 7px 8px !important;
    }

    html body .table-search-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .support-banner-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 18px !important;
        gap: 16px !important;
    }

    html body .support-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    html body .support-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    html body .btn-support {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Kamar Tupoksi & Anjab */
    html body .page-header-tupoksi {
        padding: 40px 16px 35px 16px !important;
    }

    html body .page-title-tupoksi {
        font-size: 25px !important;
    }

    html body .tupoksi-container {
        width: 100% !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
    }

    html body .overview-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 18px 16px !important;
        gap: 14px !important;
    }

    html body .overview-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    html body .badge-legal {
        white-space: normal !important;
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Kamar Akreditasi Nasional, Internasional & Sertifikasi ISO */
    html body .akred-hero {
        padding: 40px 16px 65px 16px !important;
    }

    html body .akred-hero-title {
        font-size: 26px !important;
    }

    html body .akred-hero-desc {
        font-size: 14px !important;
    }

    html body .akred-container,
    html body .iso-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    html body .institusi-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 16px !important;
        gap: 16px !important;
        margin-top: -28px !important;
        margin-bottom: 24px !important;
    }

    html body .institusi-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    html body .institusi-text h3 {
        font-size: 18px !important;
    }

    html body .institusi-status-badge {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    html body .grade-pill,
    html body .btn-unduh-sk {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html body .akred-filter-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    html body .akred-filter-toolbar .filter-buttons {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    html body .akred-filter-toolbar .filter-buttons::-webkit-scrollbar {
        display: none !important;
    }

    html body .akred-filter-toolbar .filter-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    html body .search-prodi-box {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .iso-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body .iso-card-footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* 4. Feature Cards (Index & Eksternal) */
    html body .main-wrapper {
        padding: 24px 14px 36px 14px !important;
    }

    html body .cards-container {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body .cards-container .feature-card {
        padding: 20px 18px !important;
    }

    html body .feature-card:hover {
        transform: translateY(-4px) !important;
    }

    /* 5. Tabel Data: Pastikan Scroll Mulus & Tidak Terjepit */
    html body .custom-spmi-table,
    html body .table-tupoksi,
    html body .table-custom-akred,
    html body .table-custom,
    html body .info-admin-table {
        min-width: 680px !important;
    }

    html body .custom-spmi-table th,
    html body .custom-spmi-table td,
    html body .table-tupoksi th,
    html body .table-tupoksi td,
    html body .table-custom-akred th,
    html body .table-custom-akred td {
        padding: 12px 12px !important;
        font-size: 13px !important;
    }

    /* Tabel Unduhan: Muat 100% Tanpa Geser Horizontal di Mobile */
    html body .unduhan-table-card .table-responsive {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    html body .table-unduhan {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    html body .table-unduhan thead th,
    html body .table-unduhan tbody td {
        padding: 10px 6px !important;
        font-size: 11px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    html body .table-unduhan thead th:nth-child(1),
    html body .table-unduhan tbody td.row-number {
        width: 34px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    html body .table-unduhan thead th:nth-child(2) {
        width: auto !important;
    }

    html body .table-unduhan thead th:nth-child(3) {
        width: 78px !important;
    }

    html body .table-unduhan thead th:nth-child(4),
    html body .table-unduhan thead th:nth-child(5) {
        width: 68px !important;
    }

    html body .table-unduhan .number-badge {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    html body .table-unduhan .doc-title-wrapper {
        gap: 8px !important;
        align-items: flex-start !important;
    }

    html body .table-unduhan .file-icon-box {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    html body .table-unduhan .doc-name {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    html body .table-unduhan .doc-submeta {
        font-size: 10px !important;
        gap: 4px !important;
    }

    html body .table-unduhan .source-badge {
        font-size: 10px !important;
        padding: 4px 6px !important;
        border-radius: 8px !important;
        gap: 4px !important;
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    html body .table-unduhan .action-btn-group-unduhan {
        gap: 3px !important;
        padding: 2px !important;
    }

    html body .table-unduhan .btn-act-unduhan {
        width: 25px !important;
        height: 25px !important;
        font-size: 11px !important;
    }

    html body .table-unduhan .btn-download-action,
    html body .table-unduhan .btn-download-locked {
        padding: 5px 7px !important;
        font-size: 10.5px !important;
        gap: 4px !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .table-unduhan .empty-table-state {
        padding: 36px 14px !important;
        width: 100% !important;
    }

    html body .table-unduhan .empty-box-inner h4 {
        font-size: 15px !important;
    }

    html body .table-unduhan .empty-box-inner p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* 6. Semua Modal Popup */
    html body .modal-overlay-custom,
    html body .modal-overlay,
    html body .info-modal-backdrop,
    html body .unduhan-modal-backdrop,
    html body .modal-backdrop,
    html body .admin-modal-overlay,
    html body .upload-modal-overlay {
        padding: 12px !important;
    }

    html body .modal-box-custom,
    html body .modal-box,
    html body .info-modal-content,
    html body .unduhan-modal-content,
    html body .modal-card,
    html body .admin-modal-card,
    html body .upload-modal-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .unduhan-modal-content,
    html body .modal-card,
    html body .info-modal-content {
        padding: 0 !important;
    }

    html body .modal-body-scroll,
    html body .modal-scroll-inner,
    html body .modal-detail-scroll {
        padding: 22px 16px !important;
    }

    html body .form-grid-row,
    html body .form-grid-2,
    html body .admin-form-row,
    html body .modal-box div[style*="grid-template-columns"],
    html body .modal-box-custom div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    html body .modal-footer-btns,
    html body .modal-actions,
    html body .form-actions-submit,
    html body .modal-foot,
    html body .admin-modal-foot {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html body .modal-footer-btns button,
    html body .modal-actions button,
    html body .form-actions-submit button,
    html body .modal-foot button,
    html body .admin-modal-foot button {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* 7. Footer Mobile Typography */
    html body .custom-lpm-footer .brand-text h3 {
        font-size: 20px !important;
    }

    html body .custom-lpm-footer .brand-text span {
        font-size: 14px !important;
    }

    html body .custom-lpm-footer .footer-logo-img {
        width: 64px !important;
    }
}

/* Responsif Layar Smartphone Kecil (<= 480px) */
@media (max-width: 480px) {
    html body .hero-title,
    html body .external-hero-title,
    html body .external-hero-title span,
    html body .info-hero-title,
    html body .unduhan-hero .hero-heading,
    html body .akreditasi-hero-title {
        font-size: 24px !important;
    }

    html body .profil-heading-clean {
        font-size: 30px !important;
    }

    html body .akreditasi-container .stat-grid-row {
        grid-template-columns: 1fr !important;
    }

    /* Rentang Tanggal Form Admin agar tidak sempit di layar <= 480px */
    html body .field-rentang-tanggal,
    html body .field-rentang-tanggal-akred,
    html body .field-rentang-tanggal-iso,
    html body .date-range-combo-upm,
    html body .date-picker-combo {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    html body .modal-form-group div[style*="display: flex"],
    html body .form-group div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
}