:root {
    --dark-top: #0d370d;
    --navbar-main: #1b6f1b;
    --white-color: rgb(244, 243, 243);
    --grey-color: rgb(220, 220, 220);
}

body {
    background-color: rgb(237, 237, 237);
}

/* Top Navbar */
.navbar-top {
    background-color: var(--dark-top);
    color: white;
    font-size: 12px;
    padding: 5px 0;
    z-index: 1001;
    /* Lebih tinggi dari Main Navbar */
}

.navbar-top .menu-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.navbar-top a {
    color: white;
    text-decoration: none;
}

.navbar-top a:hover {
    text-decoration: underline;
}

/* End Top Navbar */



/* Main Navbar */
.navbar-main .nav-link,
.navbar-main .navbar-brand,
.navbar-main .dropdown-item {
    color: white !important;
}

.navbar-main .dropdown-menu {
    background-color: var(--navbar-main);
}

.navbar-main .dropdown-item {
    color: white !important;
}

.navbar-main .dropdown-item:hover,
.navbar-main .dropdown-item:focus {
    background-color: var(--dark-top);
    color: white !important;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus,
.navbar-main .nav-link.active,
.navbar-main .dropdown-item:hover,
.navbar-main .dropdown-item:focus,
.navbar-main .dropdown-item.active {
    background-color: transparent;
    color: white !important;
    text-decoration: underline;
    text-decoration-color: #FFA500;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s ease-in-out, text-underline-offset 0.3s ease-in-out;
}

.navbar-main {
    background-color: var(--navbar-main);
    height: 70px;
    z-index: 1000;
}

.navbar-brand img {
    height: 35px;
}

/* END NAVBAR MAIN */



/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: var(--navbar-main);
    padding-top: 20px;
    transition: 0.3s;
    z-index: 1050;
    display: none;
    overflow-y: auto;
}

.sidebar.active {
    left: 0;
    display: block;
}

.sidebar a {
    color: white;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

.sidebar a:hover {
    background: var(--dark-top);
}

.sidebar-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
}

/* Sidebar Dropdown */
.sidebar .dropdown-toggle::after {
    float: right;
    margin-top: 8px;
}

.sidebar .collapse {
    padding-left: 15px;
}

/* Custom CSS untuk dropdown bertingkat */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: .1rem;
}

.dropdown-submenu .dropdown-menu.show {
    display: block;
}



/* HERO CAROUSEL */
#heroCarousel {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100vw; /* full lebar viewport */
}

/* Gambar akan menyesuaikan ukuran aslinya */
.hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* INDICATOR BULAT */
.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    border: none;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.carousel-indicators .active {
    background-color: var(--navbar-main) !important;
    opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-img {
        width: 100%;
        height: auto;
    }
}





/* SECTION ALUMNI */
.alumni-section {
    background: #f8f9fa;
    padding: 60px 0;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}

/* Container */
.slider-container {
    position: relative;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    padding: 15px;
}

/* Alumni Card - Sebelah menyebelah seimbang */
.alumni-card {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    align-items: center;
}

/* KIRI */
.alumni-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--navbar-main);
    padding: 40px 20px;
}

.alumni-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    background: #fff;
}

/* KANAN */
.alumni-right {
    flex: 1;
    padding: 40px 30px;
}

.alumni-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.alumni-prodi {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.alumni-testimoni {
    font-size: 15px;
    color: #444;
    font-style: italic;
    line-height: 1.6;
}

/* Navigasi */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--navbar-main);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.slider-prev:hover, .slider-next:hover {
    background-color: var(--dark-top);
}

.slider-prev { left: 10px; }
.slider-next { right: 10px; }

/* Responsif */
@media (max-width: 768px) {
    .alumni-card {
        flex-direction: column;
    }

    .alumni-left, .alumni-right {
        flex: 1 1 100%;
        padding: 30px 20px;
        text-align: center;
    }
}

/* End Alumni Section */



/* MAGANG */
/* SECTION MAGANG */
.magang-section {
    background: #f8f9fa;
    padding: 60px 0;
}

.magang-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    text-align: center;
}

.magang-card:hover {
    transform: translateY(-5px);
}

.magang-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.magang-content {
    padding: 20px;
}

.magang-title {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 10px;
}

.magang-desc {
    font-size: 14px;
    color: #666;
}
/* END MAGANG */



/* KONTAK */
.kontak-section {
    background: linear-gradient(135deg, #f9f9f9, #e3f2fd);
    padding: 60px 0;
}

.kontak-section .card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.kontak-section .card:hover {
    transform: scale(1.03);
}

.kontak-section .form-label {
    font-weight: 600;
}

.kontak-section .form-hover {
    transition: box-shadow 0.3s ease-in-out;
}

.kontak-section .form-hover:focus {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
    border-color: #007bff;
}

.kontak-section .btn-gradient {
    background: linear-gradient(45deg, #007bff, #00bcd4);
    border: none;
    color: white;
    font-weight: 600;
    transition: 0.3s ease-in-out;
}

.kontak-section .btn-gradient:hover {
    background: linear-gradient(45deg, #0056b3, #008c9e);
}

.kontak-section .animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.kontak-section .animate-slide-in {
    transform: translateY(20px);
    opacity: 0;
    animation: slideIn 1s ease-in-out forwards;
}

.kontak-section .animate-zoom-in {
    transform: scale(0.8);
    opacity: 0;
    animation: zoomIn 0.8s ease-in-out forwards;
}

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

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

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* END KONTAK */





/* MAIN CONTENT */
/* PENGUMUMAN */
.pengumuman-card {
    height: 100%;
    /* Pastikan tinggi card sama */
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Buat card transparan */
    border: none;
    /* Hilangkan border card */
}

.pengumuman-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Styling tombol */
.btn-detail {
    width: 150px;
    /* Tidak full width */
    background-color: var(--navbar-main);
    /* Warna var(--navbar-main) */
    border: none;
}

.btn-detail:hover {
    background-color: var(--dark-top);
}

/* Gambar dengan efek hover zoom */
.img-containers {
    overflow: hidden;
    border-radius: 8px;
}

.pengumuman-img {
    object-fit: cover;
    height: 400px;
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.pengumuman-img:hover {
    transform: scale(1.1);
    /* Zoom saat hover */
}

/* Responsive margin-top */
@media (max-width: 768px) {
    .pengumuman .col-sm-12 {
        display: flex;
        justify-content: center;
    }

    .pengumuman-card {
        width: 100%;
        max-width: 90%; /* Biar ada padding kiri-kanan */
    }

    .pengumuman-card .card-body {
        align-items: center;
        text-align: center;
    }

    .pengumuman-card .card-title,
    .pengumuman-card .card-date,
    .pengumuman-card .card-text {
        text-align: center;
    }

    .btn-pengumuman {
        align-self: center;
    }
}
/* END PENGUMUMAN */



/* BERITA UTAMA */
.berita-utama {
    padding: 60px 0;
    background: var(--grey-color);
    /* Background tetap transparan */
}

/* --- Heading Berita Utama --- */
.berita-utama h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.berita-utama h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    /* Panjang garis */
    height: 4px;
    /* Ketebalan garis */
    background-color: var(--navbar-main);
    /* Warna garis */
}

/* --- Kartu Berita --- */
.berita-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Pastikan semua kartu sama tinggi */
}

/* --- Kontainer Gambar --- */
.berita-img-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex-grow: 1;
    /* Menyesuaikan tinggi sesuai konten */
}

/* --- Gambar Berita (Tinggi Konsisten) --- */
.berita-img {
    width: 100%;
    height: 250px;
    /* Ukuran default */
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* --- Efek Hover Gambar (Zoom) --- */
.berita-img-container:hover .berita-img {
    transform: scale(1.1);
}

/* --- Overlay untuk Judul & Deskripsi --- */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px;
    text-align: center;
}

/* --- Gaya Judul & Deskripsi --- */
.overlay h5 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.overlay p {
    font-size: 0.9rem;
    margin: 0;
}

/* --- Gaya Link pada Judul & Deskripsi --- */
.berita-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.berita-link:hover {
    color: #ff6600;
    /* Warna var(--navbar-main) cerah saat hover */
    text-decoration: underline;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .berita-img {
        height: 220px;
        /* Sesuaikan ukuran gambar untuk layar medium */
    }
}

@media (max-width: 768px) {
    .berita-img {
        height: 200px;
        /* Ukuran lebih kecil untuk tablet */
    }

    .overlay h5 {
        font-size: 1rem;
    }

    .overlay p {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .col-sm-6 {
        width: 100%;
    }

    .berita-utama h1 {
        font-size: 1.8rem;
    }

    .berita-img {
        height: 180px;
        /* Ukuran gambar lebih kecil untuk mobile */
    }
}

/* END BERITA UTAMA */



/* BERITA TERBARU */
.berita-terbaru {
    padding: 60px 0;
    background: transparent;
}

.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: var(--navbar-main);
}

/* --- Kartu Berita --- */
.berita-card {
    background: rgba(255, 255, 255, 0.1);
    /* Transparan */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.berita-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- Gambar Berita --- */
.berita-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.berita-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* --- Hover Zoom pada Gambar --- */
.berita-img-container:hover .berita-img {
    transform: scale(1.1);
}

/* --- Konten dalam Card --- */
.card-body {
    padding: 15px;
}

.berita-terbaru-link {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    margin-top: 10px;
    transition: color 0.3s ease-in-out;
}

.berita-terbaru-link:hover {
    color: var(--dark-top);
    text-decoration: underline;
}

/* --- Badge Kategori --- */
.badge {
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 5px;
}

/* --- Tanggal Berita --- */
.berita-date {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* --- Tombol "Selanjutnya" --- */
.btn-outline-primary {

    background-color: var(--navbar-main);
    font-size: 1rem;
    padding: 8px 20px;
    border-radius: 5px;
    border: 2px solid --dark-top;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.btn-outline-primary:hover {
    background: var(--dark-top);
    color: white;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    .berita-img {
        height: 200px;
    }

    .col-sm-6 {
        width: 50%;
        /* Menjadi 2 kolom di layar kecil */
    }
}

@media (max-width: 576px) {
    .col-sm-6 {
        width: 100%;
        /* Menjadi 1 kolom di layar sangat kecil */
    }

    .section-title {
        font-size: 1.8rem;
    }
}

/* END ERITA TERBARU */



/* AGENDA SECTION */
.agenda {
    padding: 60px 0;
    /* background: var(--grey-color); */
}

.agenda .section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.agenda .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: var(--navbar-main);
}

/* CARD AGENDA */
.agenda-card {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 15px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.agenda-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* MEMASTIKAN UKURAN CARD SAMA */
.agenda-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* TANGGAL AGENDA */
.agenda-date {
    background: var(--dark-top);
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 6px;
    padding: 4px 8px;
    width: auto;
    /* Biar fleksibel */
    position: absolute;
    top: 10px;
    right: 10px;
    /* Geser ke kanan */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Ukuran teks lebih kecil supaya rapi */
.agenda-date .day {
    font-size: 1rem;
    font-weight: bold;
    display: block;
}

.agenda-date .month {
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* KONTEN AGENDA */
.agenda-link {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.agenda-link:hover {
    color: var(--navbar-main);
    text-decoration: underline;
}

.agenda-desc {
    font-size: 0.9rem;
    color: #555;
    flex-grow: 1;
}

.agenda-location {
    font-size: 0.9rem;
    color: #777;
    margin-top: 10px;
}

.agenda-location i {
    margin-right: 5px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .agenda-date {
        width: 50px;
        padding: 8px;
    }

    .agenda-date .day {
        font-size: 1.2rem;
    }

    .agenda-date .month {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .agenda .section-title {
        font-size: 1.8rem;
    }
}

/* END AGENDA SECTION*/



/* --- TENTANG KAMI --- */
.tentang-kami {
    background: white;
    padding: 60px 0;
}

.tentang-deskripsi {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
}

.tentang-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.list-group-item {
    display: flex;
    align-items: flex-start;
}

.list-group-item span {
    margin-right: 10px;
    font-size: 1.2rem;
}

.nav-pills .nav-link {
    position: relative;
    border-radius: 20px;
    padding: 10px 40px;
    font-weight: bold;
    background-color: var(--navbar-main);
    color: white;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent;
}

.nav-pills .nav-link.active {
    background-color: var(--navbar-main);
    border-color: white;
}

.nav-pills .nav-link:hover {
    background-color: var(--dark-top);
    color: white;
}


/* Menu Pills */
.nav-pills .nav-link {
    background-color: var(--navbar-main);
    color: var(--white-color);
    border-radius: 5px;
    margin-right: 5px;
    transition: all 0.3s ease-in-out;
}

.nav-pills .nav-link:hover {
    background-color: var(--dark-top);
}

.nav-pills .nav-link.active {
    background-color: var(--dark-top);
    color: white;
}

.tab-content {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tab-content .text-primary {
    color: var(--dark-top);
}

.list-group-item {
    border: none;
    font-size: 1rem;
    padding: 10px;
}

/* Responsiveness */
@media (max-width: 768px) {
    .tentang-kami {
        text-align: center;
    }

    .tentang-img {
        margin-top: 20px;
    }

    .nav-pills {
        justify-content: center;
    }
}

/* END TENTANG KAMI */




/* --- LINK TERKAIT --- */
/* --- LINK TERKAIT --- */
.link-terkait {
    background: #f8f9fa;
    padding: 50px 0;
}

.link-card {
    background: white;
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Semua card memiliki tinggi sama */
}

.link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.link-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.card-title {
    font-weight: bold;
    color: #343a40;
}

/* Menampilkan hanya 30 kata dalam card-text */
.card-text {
    font-size: 0.95rem;
    color: #6c757d;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* Responsiveness */
@media (max-width: 768px) {
    .link-card {
        margin-bottom: 20px;
    }
}
/* END LINK TERKAIT */



/* PENGUMUMAN */
.pengumuman {
    background: #f8f9fa;
    padding: 50px 0;
}

.pengumuman .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch; /* Menyamakan tinggi card */
}

.pengumuman-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Memastikan card memiliki tinggi yang sama */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pengumuman-card .btn-pengumuman {
    background-color: var(--navbar-main);
    color: var(--white-color);
}
.pengumuman-card .btn-pengumuman:hover {
    background-color: var(--dark-top);
    color: var(--white-color);
}

.pengumuman-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.pengumuman-card .card-body {
    flex-grow: 1; /* Memastikan semua card memiliki tinggi yang sama */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Menjaga tombol tetap di bawah */
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #343a40;
}

.card-date {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.card-text {
    font-size: 0.95rem;
}

/* Responsive untuk layar kecil */
@media (max-width: 768px) {
    .pengumuman .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pengumuman-card {
        width: 90%;
        margin-bottom: 15px;
    }
}
/* END PENGUMUMAN */



/* PIMPINAN */
.pimpinan-fakultas {
    background: #f8f9fa;
}

/* Desain Card */
.pimpinan-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.pimpinan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Mengatur Gambar */
.img-container {
    width: 100%;
    height: 300px; /* Tinggi gambar tetap, bisa disesuaikan */
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff; /* Tambahkan background putih biar rapi */
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Gambar menyesuaikan ukuran tanpa terpotong */
}

/* Judul dan Jabatan */
.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #343a40;
}

.card-text {
    font-size: 1rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .pimpinan-card {
        width: 90%;
        margin: 0 auto 15px;
    }
}
/* END PIMPINAN */



/* PIMPINAN DETAIL */
.pimpinan-detail {
    background: #f8f9fa;
    padding: 50px 0;
}

/* Foto Pimpinan */
.pimpinan-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Nama Pimpinan */
.pimpinan-nama {
    font-size: 1.8rem;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 15px;
    align-items: center;
}

/* Menu Pills */
.nav-pills .nav-link {
    background: #ddd;
    color: #333;
    margin-right: 5px;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.nav-pills .nav-link.active {
    background: var(--navbar-main);
    color: white;
}

/* Detail Informasi & Deskripsi */
.list-group-item {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.list-group-item .icon {
    font-size: 1.2rem;
    margin-right: 10px;
    color: #28a745;
}

.list-group-item strong {
    width: 120px;
    display: inline-block;
}

.separator {
    margin: 0 8px;
}

/* Deskripsi */
.pimpinan-deskripsi {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Supaya Menu Pills Tidak Bergeser */
.fixed-height {
    min-height: 300px; /* Sesuaikan dengan konten terpanjang */
    display: flex;
    align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .pimpinan-img {
        max-width: 250px;
        margin-bottom: 20px;
    }

    .pimpinan-nama {
        font-size: 1.5rem;
        text-align: center; /* Tambahkan baris ini */
    }

    .list-group-item strong {
        width: 100px;
    }
}
/* END PIMPINAN DETAIL */



/* SECTION FASILITAS */
.fasilitas {
    background: #f8f9fa;
    padding: 50px 0;
}

/* Judul Section */
.section-title {
    font-size: 2rem;
    font-weight: bold;
}

/* Grid Gambar */
.fasilitas-item {
    overflow: hidden;
    cursor: pointer;
}

.fasilitas-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.fasilitas-item:hover .fasilitas-img {
    transform: scale(1.05);
}

/* Judul Fasilitas */
.fasilitas-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

/* Modal */
.modal-body img {
    border-radius: 10px;
    max-width: 100%;
}

.modal-body h5 {
    font-weight: bold;
    color: #333;
}

.modal-body p {
    font-size: 1rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .fasilitas-img {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .fasilitas-img {
        height: 150px;
    }

    .fasilitas-title {
        font-size: 1rem;
    }
}
/* END SECTION FASILITAS */




/* Gaya Umum Kartu Artikel */
.pengumuman-card {
    transition: transform 0.3s ease;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.pengumuman-card:hover {
    transform: translateY(-5px);
}

/* Gambar Artikel */
.pengumuman-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    max-height: 300px;
}

/* Tombol Detail */
.btn-detail {
    align-self: flex-start;
    font-size: 0.9rem;
    padding: 6px 12px;
}

/* Judul & Konten */
.card-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.card-text {
    font-size: 0.95rem;
    color: #555;
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
    .artikel-populer-section .col-md-6 {
        display: flex;
        justify-content: center;
    }

    .pengumuman-card {
        width: 100%;
        max-width: 90%; /* Atur lebar maksimal supaya ada jarak kiri-kanan */
    }

    .card-body {
        align-items: center;
        text-align: center;
    }

    .card-title, .card-text {
        text-align: center;
    }

    .btn-detail {
        align-self: center;
    }
}







/* --- TENTANG KAMI --- */
.tentang-kami {
    background: white;
    padding: 60px 0;
}

.tentang-deskripsi {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
}

.tentang-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.list-group-item {
    display: flex;
    align-items: flex-start;
}

.list-group-item span {
    margin-right: 10px;
    font-size: 1.2rem;
}

.nav-pills .nav-link {
    position: relative;
    border-radius: 20px;
    padding: 10px 40px;
    font-weight: bold;
    background-color: var(--navbar-main);
    color: white;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent;
}

.nav-pills .nav-link.active {
    background-color: var(--navbar-main);
    border-color: white;
}

.nav-pills .nav-link:hover {
    background-color: var(--dark-top);
    color: white;
}


/* Menu Pills */
.nav-pills .nav-link {
    background-color: var(--navbar-main);
    color: var(--white-color);
    border-radius: 5px;
    margin-right: 5px;
    transition: all 0.3s ease-in-out;
}

.nav-pills .nav-link:hover {
    background-color: var(--dark-top);
}

.nav-pills .nav-link.active {
    background-color: var(--dark-top);
    color: white;
}

.tab-content {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tab-content .text-primary {
    color: var(--dark-top);
}

.list-group-item {
    border: none;
    font-size: 1rem;
    padding: 10px;
}

/* Responsiveness */
@media (max-width: 768px) {
    .tentang-kami {
        text-align: center;
    }

    .tentang-img {
        margin-top: 20px;
    }

    .nav-pills {
        justify-content: center;
    }
}
/* END TENTANG KAMI */



/* MITRA */
.mitraSwiper {
    height: 200px;
}
.mitra-logo {
    max-width: 120px;
    height: auto;
    transition: transform 0.3s ease;
}

.mitra-logo:hover {
    transform: scale(1.1);
}

.mitra-item {
    cursor: pointer;
    padding: 10px;
}

/* Styling Swiper */
.swiper {
    width: 100%;
    padding: 20px 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    color: #007bff;
}
/* END MITRA */



/* END MAIN CONTENT */


/* Responsif */
@media (max-width: 992px) {
    .navbar-top .container {
        flex-direction: column;
        text-align: center;
    }

    .navbar-top .container .menu-container {
        display: none;
    }

    .sidebar {
        display: block;
    }
}

@media (max-width: 768px) {
    .navbar-main .navbar-collapse {
        display: none !important;
    }

    .navbar-toggler {
        display: block !important;
    }
}
/* END MITRA */



/* SEJARAH */
.sejarah {
    background: #f8f9fa;
}

.sejarah-text {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
}

@media (max-width: 768px) {
    .sejarah .row {
        flex-direction: column-reverse;
        text-align: center;
    }

    .sejarah-text {
        text-align: center;
        margin-top: 20px;
    }
}
/* END SEJARAH */



/* AKREDITASI */
.akreditasi {
    background: #f8f9fa;
    padding: 50px 0;
}

/* Judul Section */
.section-title {
    font-size: 2rem;
    font-weight: bold;
}

/* Card Akreditasi */
.akreditasi-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.akreditasi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Logo Akreditasi */
.akreditasi-logo {
    width: 80px;
    height: auto;
}

/* Status Akreditasi */
.status-akreditasi {
    font-size: 1rem;
    font-weight: bold;
    color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {
    .akreditasi-card {
        padding: 20px;
    }
}
/* END AKREDITASI */






/* SECTION PROGRAM SERTIFIKAT */
.sertifikat {
    background: linear-gradient(135deg, --navbar-main, --dark-top);
    padding: 60px 0;
}

/* Card Sertifikat */
.sertifikat-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.sertifikat-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Gambar Sertifikat */
.sertifikat-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.sertifikat-card:hover .sertifikat-image img {
    transform: scale(1.1);
}

/* Detail Sertifikat */
.sertifikat-detail .card {
    border-radius: 15px;
    overflow: hidden;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .sertifikat-image img {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .sertifikat-image img {
        height: 150px;
    }
}
/* SECTION PROGRAM SERTIFIKAT */




/* SECTION PRODI */
.prodi {
    background: #f8f9fa;
    padding: 50px 0;
}

/* Pills Menu */
.nav-pills .nav-link {
    color: #6c757d;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 50px;
    margin: 5px;
    padding: 10px 20px;
    transition: all 0.3s ease-in-out;
}

.nav-pills .nav-link.active {
    background: var(--navbar-main);
    color: #ffffff;
}

/* Tab Content */
.tab-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

.dosen-card {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.dosen-card:hover {
    transform: scale(1.03);
}

.dosen-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Kotak */
    overflow: hidden;
    background-color: #f0f0f0;
}

.dosen-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* atau object-fit: contain jika ingin seluruh gambar terlihat */
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-pills .nav-link {
        padding: 8px 15px;
        font-size: 14px;
    }
}
/* END SECTION PRODI */



/* SECTION INFORMASI BEASISWA */
.beasiswa {
    padding: 60px 0;
}

/* Card Beasiswa */
.beasiswa-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.beasiswa-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.btn-beasiswa {
    background-color: var(--navbar-main);
    color: var(--white-color);
}
.btn-beasiswa:hover {
    background-color: var(--dark-top);
    color: var(--white-color);
}

/* Gambar Beasiswa */
.beasiswa-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.beasiswa-card:hover .beasiswa-image img {
    transform: scale(1.1);
}

/* Detail Beasiswa */
/* SECTION DETAIL BEASISWA */
.beasiswa-detail {
    background: #f8f9fa;
}

.beasiswa-detail-card {
    border-radius: 15px;
    overflow: hidden;
    background: white;
}

/* Gambar Beasiswa */
.beasiswa-img-container {
    text-align: center;
}

.beasiswa-img-container img {
    width: 100%;
    height: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Deskripsi */
.beasiswa-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Tombol */
.btn {
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.btn:hover {
    transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .beasiswa-img-container img {
        max-height: 250px;
    }
}

/* END SECTION INFORMASI BEASISWA */



/* SECTION KEMAHASISWAAN */
/* SECTION KEMAHASISWAAN */
.kemahasiswaan {
    background: #f8f9fa;
    padding: 50px 0;
}

.envelope-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

.envelope {
    position: relative;
    width: 260px;
    height: 180px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.envelope:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

/* Flap atas */
.flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgb(230, 230, 230);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform 0.5s ease-in-out;
    z-index: 3;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Efek surat */
.letter {
    position: absolute;
    width: 90%;
    height: 140px;
    background: white;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    top: 90px;
    transition: top 0.5s ease-in-out;
    z-index: 2;
}

.envelope:hover .letter {
    top: 10px;
}

/* Flap membuka saat hover */
.envelope:hover .flap {
    transform: rotateX(180deg);
}

/* Gambar organisasi */
.organisasi-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* Tombol Detail */
.detail-btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    opacity: 0; /* Tombol disembunyikan sebelum hover */
    transition: opacity 0.3s ease-in-out, transform 0.2s;
}

.envelope:hover .detail-btn {
    opacity: 1; /* Muncul setelah hover */
    transform: translateY(5px);
}

.detail-btn:hover {
    background-color: #0056b3;
}

/* END SECTION KEMAHASISWAAN */






.footer {
    background: var(--dark-top);
    color: #fff;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.list-unstyled li {
    margin-bottom: 10px;
}

.list-unstyled i {
    color: var(--white-color);
    margin-right: 8px;
}

.social-icons a {
    color: var(--white-color);
    font-size: 1.3rem;
    transition: 0.3s;
}

.social-icons a:hover {
    color: #fff;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .footer .row {
        text-align: center;
    }

    .map-container {
        margin-top: 15px;
    }
}