/* --- 1. GLOBAL CARD THEME (MASTER CLASS) --- */
/* Class Sakti: Kartu Hijau Gelap + Aksen Emas */
/* Digunakan di: Index (Prodi), Admission (Info/Biaya), Programs (Fakultas/Sistem) */
.card-dark {
    background: var(--primary); /* Latar Hijau */
    color: #fff;                /* Teks Putih */
    padding: 35px;              
    border-radius: var(--radius-md);
    border-top: 5px solid var(--gold); /* Aksen Emas */
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    height: 100%;               
    position: relative;
    display: block; /* Agar aman jika dipakai di tag <a> */
    border-left: none;
    border-right: none;
    border-bottom: none;
}
/* Hover: Hanya naik sedikit (Tanpa ganti warna, tanpa putar) */
.card-dark:hover {
    transform: translateY(-5px);
    background: var(--primary-dark); /* Sedikit lebih gelap saat hover */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
/* Pastikan elemen dalam kartu gelap berwarna PUTIH */
.card-dark h2, .card-dark h3, .card-dark h4, 
.card-dark p, .card-dark li, .card-dark span, .card-dark strong {
    color: #fff !important;
}
.card-dark h3 {font-size:1.5rem;margin-bottom: 13px;}
.card-dark p {text-align: center;font-weight: 400;}
/* Ikon di dalam Card Dark -> EMAS */
.card-dark i, .card-dark .sys-icon i, .card-dark .prog-icon i {
    color: var(--gold) !important;
}
/* Lingkaran Ikon (Container) */
.card-dark .sys-icon, .card-dark .prog-icon {
    background: rgba(255,255,255,0.1) !important; /* Transparan putih */
    border-radius: 50%;
    width: 80px; height: 80px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
/* --- 2. INDEX PAGE SPECIFICS --- */
.programs-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 35px; 
    margin-top: 60px; 
}
.dean-layout { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 70px; 
    align-items: center; 
    position: relative; 
    z-index: 2; 
}
.check-points li { 
    margin-bottom: 18px; 
    display: flex; 
    align-items: flex-start; 
    gap: 15px; 
    color: var(--text-heading); 
    font-weight: 700; 
    font-size: 1.15rem; 
}
.check-points i {
    color: #fff; 
    background: var(--gold); 
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; 
    font-size: 0.9rem; 
    margin-top: 4px; 
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.3);
}
/* --- 3. ABOUT PAGE (STATIC & CLEAN) --- */
#about { 
    position: relative; 
    background: radial-gradient(circle at center, #ffffff 0%, #f4f6f5 100%); 
}
.history-block { 
    display: grid; 
    grid-template-columns: 1.2fr 1.2fr; 
    gap: 50px; 
    align-items: center; 
    margin-bottom: 60px; 
}
/* Frame Foto Statis (Tanpa Animasi Zoom) */
.history-img-frame, .dean-img-frame {
    border-radius: var(--radius-md); 
    overflow: hidden; 
    box-shadow: var(--shadow-card);
    border: 5px solid #fff; 
    position: relative;
}
.history-img-frame { height: 350px; }
.dean-img-frame { height: auto; }
.history-img-frame img, .dean-img-frame img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
/* Vision & Mission */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

.v-p { color: #ffffff; margin-bottom: 0; }
/* Values (Statis, Tanpa Lompat) - Sinkron dengan base.css */

/* Container Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 70px; 
    text-align: center;
    margin-top: 90px;
}

/* Ikon */
.value-box i {
    font-size: 2.5rem;
    color: var(--primary); /* Mengambil dari base.css (#215d3e) */
    margin-bottom: 15px;
}

/* Judul Nilai */
.value-box h3 {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--primary-dark); /* Mengambil dari base.css (#0a2e27) */
    margin-bottom: 10px;
}

/* Deskripsi */
.value-box p {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000000; /* Hitam mutlak sesuai permintaan Anda */
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Org Structure (Statis) */
.org-structure { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.org-level { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; width: 100%; }
.org-card {
    background: #fff; 
    width: 260px; 
    padding: 25px; 
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle); 
    border: 1px solid rgba(0,0,0,0.05); /* Border halus permanen */
    text-align: center; 
    position: relative;
}
.org-img-wrapper {
    width: 110px; height: 110px; 
    margin: 0 auto 15px; 
    border-radius: 50%;
    overflow: hidden; 
    border: 3px solid var(--gold); 
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
}
.org-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.org-name { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 5px; line-height: 1.2; }
.org-role { font-size: 1rem; color: #1d1d1d; font-weight: 600; }
/* --- 4. FOUNDER / BIOGRAPHY STYLES (Moved from founder.html) --- */
.bio-box { 
    background: #fff; 
    padding: 50px; 
    border-radius: var(--radius-lg); 
    box-shadow: var(--shadow-card); 
    border: 1px solid #ccc;
}
.bio-header { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
    margin-bottom: 40px; 
    border-bottom: 2px dashed #eee; 
    padding-bottom: 30px; 
}
.bio-img { 
    width: 150px; height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid var(--gold); 
}
.bio-info h3 { font-size: 2.2rem; margin: 0; color: var(--text-heading); }
/* Judul Utama Bagian Bio */
.bio-section-title {
    color: var(--primary);
    font-weight: 700; font-size: 1.4rem;
    margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    text-align: inherit;
}
/* Judul Per Wilayah */
.bio-region-title {
    font-family: var(--f-body);
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 700;
    margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
    display: block; width: 100%;
}
/* Container Grid List */
.bio-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px 40px;
}
/* Item List */
.bio-list-item {
    background: transparent;
    border-bottom: 1px dashed #ccc;
    padding: 8px 0;
    font-size: 1.2rem; /* Ukuran font nyaman baca */
    font-family: var(--f-heading);
    color: #000;
    display: flex; align-items: baseline; gap: 12px;
    line-height: 1.8;
}
.bio-list-item i {
    color: var(--primary);
    font-size: 1.1rem;
    transform: translateY(3px);
    flex-shrink: 0;
}
/* Konten Paragraf Bio */
.bio-content p {
    font-family: var(--f-heading) !important;
    font-size: 1.4rem !important;
    color: #000 !important;
    line-height: 2 !important;
    margin-bottom: 15px;
}
/* --- 5. ADMISSION & FEES --- */
.req-box { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.steps-container, .exam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
/* Special Elements inside .card-dark */
.card-dark .fee-price, .card-dark .step-num { color: var(--primary) !important; }
.fee-price {font-size: 2.5rem; font-weight: 700;}
/* Bank Info Box */
.bank-info-box {
    background: rgba(0,0,0,0.2); 
    padding: 20px; 
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.3); 
    margin-top: 15px;
}
/* Step Number Circle */
.step-num {
    background: #fff; 
    color: var(--primary); 
    width: 50px; height: 50px; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    font-weight: 800; font-size: 1.5rem; 
    font-family: sans-serif; 
    flex-shrink: 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Checkmark List */
.card-dark .custom-list li::before { color: var(--gold); }
/* CTA Container */
.cta-container {
    text-align: center; max-width: 800px; margin: 0 auto; 
    background: #fff; padding: 60px 40px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.btn-google, .btn-wa { 
    display: inline-flex; align-items: center; gap: 10px; padding:14px;
    border-radius: 50px; font-weight: 700; transition: var(--transition); text-decoration: none; 
}
.btn-google { 
    background: #fff; color: #333; border: 2px solid #ddd; 
    padding: 15px 40px; font-size: 1.5rem; padding: 15px 50px;
}
.btn-google:hover { font-size: 1.8rem; border-color: var(--gold); }
.nama-wa {margin: 0; font-size: 1.2rem; color: #fff;}
.no-wa {font-family: monospace; font-size: 1.1rem; opacity: 0.9;direction: ltr; display: inline-block;}
.tombolwa {padding: 15px 30px; display: flex; align-items: center; gap: 20px; width: auto; min-width: 300px;}
.i-wa {font-size: 2.5rem;}
.wadahtombolwa {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.gariscardform {margin: 40px 0; border-top: 1px dashed #ddd;}
/* =========================================
   FEES PAGE REDESIGN (FINAL USER TWEAKS)
   ========================================= */

/* --- 1. Grid Utama --- */
.fees-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50:50 */
    gap: 40px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto 60px auto;
}

/* --- 2. Judul Section --- */
.dashboard-title {
    text-align: right;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    position: relative;
}
.dashboard-title h3 {
    margin: 0; font-size: 1.8rem; color: var(--primary);
    display: inline-block;
}
.dashboard-title span {
    display: block; font-size: 1.1rem; color: #777; margin-top: 5px; font-weight: 500;
}
.dashboard-title::after {
    content: ''; position: absolute; bottom: -2px; right: 0;
    width: 50px; height: 2px; background: var(--gold);
}

/* --- 3. Kartu Putih (Tabel) --- */
.card-fee-white {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: var(--shadow-subtle);
    border: 1px solid #eee;
    overflow: hidden;
}

/* --- 4. Tabel Compact (User Modified) --- */
.compact-table { width: 100%; border-collapse: collapse; }
.compact-table th {
    background: #f8f9fa; color: var(--primary); 
    padding: 15px 20px; text-align: right; font-size: 1.1rem; font-weight: 700;
    border-bottom: 2px solid #e0e0e0;
}
.compact-table td {
    padding: 10px 20px; border-bottom: 1px solid #d0cdcd;
    color: #000000; font-size: 1.1rem;
}
.compact-table tr:last-child td { border-bottom: none; }
.compact-table .price-col { text-align: left; font-family: sans-serif; font-weight: 700; color: var(--primary); }
.compact-table .total-row { background: var(--primary-dark); color: #fff; }
.compact-table .total-row td { color: #fff; font-size: 1.2rem; padding: 15px 20px; }
.compact-table .total-row .price-col { color: var(--gold); }

/* --- 5. Elemen Khusus (Harga, Bank, Fasilitas) --- */
.green-price-tag {
    font-family: sans-serif; font-size: 2.8rem; font-weight: 800; text-align: center;
    color: var(--gold); margin: 15px 0 25px; line-height: 1;
}

/* Grid Fasilitas */
.green-features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 25px; text-align: right;
}
.gf-item {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 12px; border-radius: 6px; font-size: 1.1rem; color: #fff;
    display: flex; align-items: center; gap: 8px;
}

/* Bank Info Box (Internal) */
.bank-box-internal {
    background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px;
    margin-top: 10px; border: 1px dashed rgba(255,255,255,0.3);
}
.nama-bank { font-weight: 800; text-align: center; margin-bottom: 5px; color: #fff; }
.nomorrekening {
    font-family: monospace; font-size: 1.4rem; 
    background: rgba(255,255,255,0.9); color: #000; 
    padding: 5px; border-radius: 4px; margin-bottom: 10px; text-align: center;
}

/* Helper Classes */
.center { text-align: center; }
.p-catatan { text-align: center; margin-top: 20px; color: #444; font-weight: 500; font-size: 1rem; }

/* --- 6. Notes --- */
.clean-notes-box { padding: 30px; }
.clean-notes-list li {
    position: relative; padding-right: 25px; margin-bottom: 15px;
    color: #444; line-height: 1.6; font-size: 1.1rem;
}
.clean-notes-list li::before {
    content: '\f05a'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 0; top: 4px; color: var(--primary);
}
.clean-notes-list strong { color: var(--primary-dark); display: block; margin-bottom: 2px; }

/* --- Responsive --- */
@media (max-width: 991px) {
    .fees-dashboard-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
}
/* --- 7. PROGRAMS & PRODI SPECIFICS --- */
.system-intro { text-align: center; max-width: 800px; margin: 0 auto 50px auto; font-size: 1.3rem; color: #000; }
.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.spec-item {
    background: #f8fcf9; padding: 25px; border-radius: var(--radius-sm); 
    box-shadow: var(--shadow-subtle); display: flex; align-items: flex-start; gap: 15px;
    transition: var(--transition); border: 1px solid rgba(33, 93, 62, 0.08);
}
.spec-item:hover { transform: translateX(-5px); border-inline-end: 4px solid var(--gold); background: #fff; }
html[dir="ltr"] .spec-item:hover { transform: translateX(5px); }
.spec-item i { color: var(--primary); font-size: 1.4rem; margin-top: 5px; }
.spec-item span { font-size: 1.2rem; font-weight: 600; color: #000; }
.holidays-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; text-align: center; }
.holiday-box {
    background: var(--primary); padding: 30px; border-radius: var(--radius-md); color: #fff;
    position: relative; overflow: hidden; transition: 0.3s; box-shadow: var(--shadow-card);
}
.holiday-box:hover { transform: translateY(-5px); background: var(--primary-dark); }
.holiday-box i { font-size: 3rem; color: rgba(255,255,255,0.15); position: absolute; bottom: -10px; left: -10px; }
.holiday-box h4 { color: #fff; font-size: 1.5rem; }
/* Grid untuk Career (Prodi) - Class ini jika masih ada elemen pakai .career-box */
.career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
/* --- 8. HELPER CLASSES --- */
.bg-dark-section { 
    background-color: var(--primary-dark); color: #fff; 
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); 
    background-size: 20px 20px; 
}
.text-center { text-align: center; }
.flex-align-center { display: flex; align-items: center; gap: 20px; }
/* Responsive */
@media (max-width: 768px) {
    .req-box, .features-grid { grid-template-columns: 1fr; }
    .flex-align-center { flex-direction: column; text-align: center; }
    .fee-price { font-size: 2.5rem; }
    .dean-layout, .two-cols, .system-grid, .specs-grid, .history-block { grid-template-columns: 1fr; }
    .history-img-frame { height: 250px; width: 100%; order: -1; }
    .bio-header { flex-direction: column; text-align: center; }
    .bio-info { margin-top: 20px; }
    .bio-grid-list { grid-template-columns: 1fr; }
}