/* --- Base Styling --- */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; /* Menggunakan font yang lebih modern */
  background-color: #f4f7f9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #2d3748;
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px; /* Padding atas dikurangi dari 60px ke 40px */
}

/* --- Logo & Judul --- */
.logo-small {
  width: 240px; /* Ukuran diperkecil agar proporsional */
  height: auto;
  margin-bottom: 24px;
}

.main-title {
  font-size: 2.5rem; /* Ukuran sedikit diperkecil agar lebih elegan */
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.text-highlight {
  color: #2b6cb0;
  position: relative;
  display: inline-block;
}

/* Garis bawah tipis opsional untuk kesan profesional */
.text-highlight::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: rgba(43, 108, 176, 0.1);
}

.subtitle {
    font-size: 1rem;
    color: #718096;
    margin-top: 12px;
    margin-bottom: 20px; /* Diubah dari 50px ke 20px agar lebih dekat ke highlight */
}

/* --- Card Grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1140px;
}

.card {
  height: 100%; /* Memastikan kartu mengisi tinggi grid */
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-body {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Tambahkan ini */
  height: 100%; 
  box-sizing: border-box;
}

.card-icon {
  width: auto;
  height: 60px; /* Ukuran icon disesuaikan agar tidak terlalu mendominasi */
  margin-bottom: 16px; /* Jarak icon ke judul dipersempit */
  object-fit: contain;
}

/* Judul CardBody */
.card-body h3 {
  margin: 0 0 8px 0; /* Jarak judul ke paragraf dipersempit */
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Paragraf CardBody */
.card-body p {
  color: #718096;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 24px;
  
  /* Kunci utama agar tombol sejajar: */
  flex-grow: 1; 
  display: flex;
  align-items: center; /* Opsional: membuat teks berada di tengah secara vertikal */
  max-width: 260px;
}

/* --- Tombol Spesifik --- */
.btn {
  width: 100%;
  padding: 12px;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: 0.2s ease;
  box-sizing: border-box;
}

/* Warna Identitas */
.card-sipintas h3 { color: #2b6cb0; }
.card-sipintas .btn { background-color: #2b6cb0; }
.card-sipintas .btn:hover { background-color: #2c5282; }

.card-siporto h3 { color: #0b7536; }
.card-siporto .btn { background-color: #0b7536; }
.card-siporto .btn:hover { background-color: #085a2a; }

.card-ruang h3 { color: #c53030; }
.card-ruang .btn { background-color: #c53030; }
.card-ruang .btn:hover { background-color: #9b2c2c; }

.card-asisten h3 { color: #805ad5; }
.card-asisten .btn {background-color: #805ad5;border: none;}
.card-asisten .btn:hover {background-color: #6b46c1;}

.card-sigma h3 { color: #EB7001; }
.card-sigma .btn {background-color: #EB7001;border: none;}
.card-sigma .btn:hover {background-color: #EB7001;}

.card-sicapai h3 { color: #004e9c; }
.card-sicapai .btn {background-color: #004e9c;border: none;}
.card-sicapai .btn:hover {background-color: #004e9c;}

.card-laporgeodesi h3 { color: #dd6b20; }
.card-laporgeodesi .btn { background-color: #dd6b20; }
.card-laporgeodesi .btn:hover { background-color: #c05621; }

.card-dokumengeodesi h3 { color: #2f855a; }
.card-dokumengeodesi .btn { background-color: #2f855a; }
.card-dokumengeodesi .btn:hover { background-color: #276749; }

.card-sirisma h3 { color: #2c7a7b; }
.card-sirisma .btn { background-color: #2c7a7b; }
.card-sirisma .btn:hover { background-color: #285e61; }

/* --- Footer --- */
footer {
  padding: 24px;
  text-align: center;
  font-size: 0.8rem;
  color: #a0aec0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

/* --- Banner SIINTEL --- */
.siintel-banner {
  background-color: #27ae60; /* Warna hijau yang modern dan tegas */
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10; /* Memastikan berada di atas background slideshow */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Memberi sedikit bayangan pemisah */
}

.siintel-banner .megaphone-icon {
  font-size: 1.25rem;
}

.siintel-banner a.siintel-link {
  color: #ffffff; /* Warna kuning terang agar tautan menonjol */
  text-decoration: none;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.siintel-banner a.siintel-link:hover {
  text-decoration: underline;
  background-color: rgba(241, 196, 15, 0.1); /* Efek hover yang halus */
  color: #d0d0d0;
}

/* Container Utama Slideshow */
.background-slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Di belakang konten */
  overflow: hidden;
}

/* Setiap Slide */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Animasi: durasi total 25 detik (5 detik x 5 gambar), berulang terus */
  animation: kenBurnsFade 25s infinite;
}

/* Pengaturan Delay agar bergantian (5 detik per gambar) */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }
.slide:nth-child(5) { animation-delay: 20s; }

/* Animasi Zoom In & Fade In/Out */
@keyframes kenBurnsFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  5% {
    opacity: 0.4; /* Opacity rendah agar konten depan tetap terbaca */
  }
  20% {
    opacity: 0.4;
  }
  25% {
    opacity: 0;
    transform: scale(1.1); /* Efek zoom perlahan */
  }
  100% {
    opacity: 0;
  }
}

/* Overlay Gelap agar konten lebih menonjol */
.background-slideshow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(244, 247, 249, 0.8); /* Warna background body Anda dengan transparansi */
}

/* Pastikan main-container transparan agar background terlihat */
body {
  background-color: transparent;
}

/* Pengaturan Grid Utama */
@media (min-width: 992px) {
    .card-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr); 
        gap: 30px;
        justify-content: center;
        max-width: 1140px;
        width: 100%;
    }

    /* Memposisikan kartu ke-4 (Sistem Asisten) agar di baris 2, kolom 2 */
    .card-sipintas, .card-siporto, .card-ruang {
        grid-column: span 2;
    }

    /* Kartu baris kedua: Sistem Asisten (Kartu ke-4) */
    .card-asisten, .card-sigma, .card-sicapai {
        grid-column: span 2;
    }

    .card-laporgeodesi, .card-dokumengeodesi, .card-sirisma {
        grid-column: span 2;
    }
}

/* --- Announcement Highlight --- */
.announcement-highlight {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    border: 1px dashed #2b6cb0;
    padding: 8px 20px; /* Padding dikecilkan sedikit */
    border-radius: 50px;
    margin-top: 0; 
    margin-bottom: 25px; /* Diubah dari 40px ke 25px agar lebih dekat ke Card Grid */
    display: inline-flex; /* Menggunakan inline-flex agar lebar box mengikuti panjang teks */
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.badge-new {
    background-color: #e53e3e; /* Merah untuk menarik perhatian */
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    animation: flash 2s infinite;
}

.announcement-text {
    color: #4a5568;
    font-weight: 500;
}

.highlight-link {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid rgba(43, 108, 176, 0.2);
    transition: all 0.2s ease;
}

.highlight-link:hover {
    border-bottom: 2px solid #2b6cb0;
    color: #1a365d;
}

/* Animasi halus untuk badge NEW! */
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Penyesuaian responsif agar tidak terlalu lebar di HP */
@media (max-width: 600px) {
    .announcement-highlight {
        flex-direction: column;
        text-align: center;
        border-radius: 15px;
        padding: 15px;
    }
}