/* ==================================== */

/* 1. GAYA DASAR DAN BACKGROUND */

/* ==================================== */



body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    color: #333;

    line-height: 1.6;



    /* PENGATURAN BACKGROUND FOTO SEMI-TRANSPARAN */

    background-image: url('background-pens.jpg'); /* Pastikan nama file ini BENAR */

    background-size: cover;

    background-attachment: fixed;

    background-position: center center;

}



a {

    text-decoration: none;

    color: #007bff; /* Warna biru default untuk tautan */

}



ul {

    list-style: none;

    padding: 0;

}



/* ==================================== */

/* 2. NAVIGASI UTAMA (HEADER BIRU GELAP) */

/* ==================================== */



.main-nav {

    background-color: #003366; /* Biru gelap PENS */

    color: white;

    padding: 10px 5%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.nav-links a {

    color: white;

    margin-right: 20px;

    padding: 5px 10px;

    transition: background-color 0.3s;

}



.nav-links a:hover {

    background-color: #00509e;

}



.nav-search {

    display: flex;

    align-items: center;

}



.nav-search input {

    padding: 8px;

    border: none;

    border-radius: 3px 0 0 3px;

    width: 200px;

}



.nav-search button {

    background-color: #ffc107; /* Kuning/Emas */

    color: #003366;

    border: none;

    padding: 8px 15px;

    cursor: pointer;

}



.login-btn {

    background-color: #007bff; /* Biru Muda */

    color: white;

    border-radius: 0 3px 3px 0;

    margin-left: 1px;

}



/* ==================================== */

/* 3. KONTEN UTAMA & BANNER */

/* ==================================== */



.container {

    max-width: 1400px;

    margin: 20px auto;

    padding: 0 15px;

}



/* Header Banner EIS - DIBUAT SEMI-TRANSPARAN */

.main-header-banner {

    background-color: rgba(255, 255, 255, 0.85); /* Putih dengan transparansi 85% */

    padding: 20px;

    margin-bottom: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* GAYA KHUSUS UNTUK GAMBAR LOGO PENS (Kiri) */

.eis-info .logo-img {

    height: 60px; /* Ukuran Logo */

    width: auto;

    float: left;

    margin-right: 15px;

}



.eis-info h1 {

    color: #003366;

    margin: 0 0 5px 0;

    font-size: 24px;

}



/* GAYA KHUSUS UNTUK CONTAINER PARTNER (Kanan) */

.pens-partners {

    /* Memastikan container partner tidak terlalu besar */

    max-width: 45%;

    display: flex;

    align-items: center;

}



/* GAYA KHUSUS UNTUK GAMBAR PARTNER */

.partners-image-container {

    max-height: 200px; /* Batasi tinggi gambar partner */

    width: auto;

    max-width: 100%; /* Memastikan gambar partner skalanya sesuai dengan containernya */

}



/* ==================================== */

/* 4. LAYOUT TIGA KOLOM (CONTENT WRAPPER) */

/* ==================================== */



.content-wrapper {

    display: flex;

    gap: 20px;

}



.left-column { flex: 3; }

.center-column { flex: 4; } /* Kolom Tengah lebih lebar */

.right-column { flex: 3; }



/* Gaya Box Umum - DIBUAT SEMI-TRANSPARAN */

.info-box {

    background-color: rgba(255, 255, 255, 0.7); /* Putih dengan transparansi 70% */

    padding: 20px;

    margin-bottom: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}



.box-title {

    margin-top: 0;

    padding: 10px;

    margin-bottom: 10px;

    border-radius: 4px;

    font-size: 18px;

    font-weight: bold;

    color: white;

}



.info-box ul a {

    display: block;

    padding: 8px 0;

    color: #333;

    border-bottom: 1px dashed #eee;

    transition: color 0.2s;

}



.info-box ul a:hover {

    color: #007bff;

}





/* ==================================== */

/* 5. WARNA JUDUL BOX KHUSUS (SESUAI GAMBAR) */

/* ==================================== */



.baak .box-title { background-color: #007bff; } /* Biru Tua */

.pegawai .box-title { background-color: #28a745; } /* Hijau */

.jurusan .box-title { background-color: #17a2b8; } /* Biru Muda/Cyan */

.mahasiswa .box-title { background-color: #ffc107; } /* Kuning/Emas */

.other-links .box-title { background-color: #6c757d; } /* Abu-abu */



/* Lain-lain Box (Grid 2 Kolom) */

.link-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    font-size: 14px;

}



.link-grid a {

    background-color: rgba(247, 247, 247, 0.5);

    border: 1px solid #ddd;

    padding: 10px;

    border-radius: 5px;

    text-align: center;

    color: #333;

}


.image-text {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.6);

    color: white;

    padding: 5px;

    font-size: 12px;

}



.akses-internal-box {

    background-color: #003366;

    color: white;

    padding: 15px;

    border-radius: 8px;

}



.internal-title {

    font-size: 18px;

    border-bottom: 1px solid #00509e;

    padding-bottom: 10px;

    margin-top: 0;

}



.akses-internal-box ul a {

    color: #f0f4f7;

    padding: 8px 0;

    border-bottom: 1px dashed #00509e;

    font-size: 14px;

}



.akses-internal-box ul a:hover {

    color: #ffc107;

}



/* ==================================== */

/* 7. FOOTER */

/* ==================================== */



footer {

    background-color: #003366;

    color: white;

    text-align: center;

    padding: 10px 0;

    margin-top: 20px;

    font-size: 12px;

}



/* ==================================== */

/* 8. RESPONSIVENESS */

/* ==================================== */



@media (max-width: 992px) {

    .content-wrapper {

        flex-direction: column; /* Ubah tata letak ke satu kolom di layar kecil */

    }

}