body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0; background-color: #fcfdfd; color: #333; line-height: 1.6;
}
header {
    background-color: #1B4D3E; color: white; padding: 20px 0; text-align: center;
}
header h1 { margin: 0; font-size: 24px; }
nav {
    background-color: #2c6e56; text-align: center; padding: 10px 0;
}
nav a {
    color: white; text-decoration: none; margin: 0 12px; font-weight: bold; font-size: 14px;
}
nav a:hover { text-decoration: underline; }
.container {
    max-width: 1000px; margin: 30px auto; padding: 20px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-radius: 8px;
}
h2 { color: #1B4D3E; border-bottom: 2px solid #E2EFDA; padding-bottom: 8px; }
table {
    width: 100%; border-collapse: collapse; margin-top: 15px; margin-bottom: 25px;
}
table, th, td { border: 1px solid #ddd; }
th { background-color: #1B4D3E; color: white; padding: 10px; text-align: left; }
td { padding: 10px; }
tr:nth-child(even) { background-color: #f4f9f6; }
.badge {
    padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block;
}
.badge-hadir, .badge-diterima { background-color: #e2efda; color: #375623; }
.badge-sakit, .badge-izin, .badge-diproses { background-color: #fff2cc; color: #7f6000; }
.badge-alpa, .badge-ditolak { background-color: #fce4d6; color: #c65911; }
.gallery-grid {
    display: flex; flex-wrap: wrap; gap: 20px;
}
.gallery-item {
    flex: 1 1 calc(33.333% - 20px); border: 1px solid #ddd; padding: 10px; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.gallery-item img { width: 100%; height: auto; border-radius: 4px; background: #eee; text-align: center; display: block; min-height: 120px; line-height: 120px; color: #777; }
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: bold; margin-bottom: 5px; }
input[type="text"], input[type="date"], select, textarea {
    width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
button {
    background-color: #1B4D3E; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;
}
button:hover { background-color: #2c6e56; }
footer {
    text-align: center; padding: 20px; background: #1B4D3E; color: white; margin-top: 5px; font-size: 13px;
}
.slider-container {
    width: 100%;
    max-width: 900px; /* Ukuran maksimal di PC */
    margin: 20px auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.slide { display: none; animation: fade 1.5s; }
.slide img {
    width: 100%;
    height: 350px; /* Tinggi slider */
    object-fit: cover; /* Agar foto tidak gepeng */
}

@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* Khusus HP agar slider tidak terlalu tinggi */
@media (max-width: 768px) {
    .slide img { height: 200px; }
}
.slide img {
    width: 100%;
    height: 500px; /* Sesuaikan tinggi */
    object-fit: cover; /* Ini perintah ajaib agar foto otomatis terpotong proporsional */
    object-position: center; /* Fokuskan foto ke tengah */
}
@keyframes fade {
  from { opacity: .7; } 
  to { opacity: 1; }
}

.slide {
  display: none;
  animation: fade 1.5s ease-in-out; /* Efek transisi halus */
}
/* Tampilan Default (PC) */
.navbar { display: flex; justify-content: center; background: #60C7C7; padding: 15px; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links li a { color: white; padding: 10px 20px; text-decoration: none; font-weight: bold; }
.menu-toggle { display: none; cursor: pointer; }

/* Tampilan HP (Mobile) */
@media (max-width: 768px) {
    .menu-toggle { display: block; padding: 10px; }
    .menu-toggle span { display: block; width: 25px; height: 3px; background: white; margin: 5px 0; }
    
    .nav-links {
        display: none; /* Sembunyikan menu */
        flex-direction: column;
        width: 100%;
        background: #FF8BA7;
        position: absolute;
        top: 60px;
        left: 0;
        text-align: center;
    }
    .nav-links.active { display: flex; } /* Tampilkan saat diklik */
    .nav-links li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
}
/* Styling Menu Utama */
.nav-links { display: flex; list-style: none; gap: 2px; justify-content: center; padding: 20px; }

.btn-menu {
    display: block;
    padding: 12px 25px;
    border-radius: 8px; /* Sudut persegi panjang */
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: transform 0.3s, filter 0.3s;
}

.btn-menu:hover { transform: scale(1.1); filter: brightness(1.1); }

/* Warna-warni yang berbeda */
.color1 { background-color: #30e51b; } /* Teracota*/
.color2 { background-color: #0033CC; } /* Cokelat Kayu*/
.color3 { background-color: #D4302B; } /* Krem Hangat*/
.color4 { background-color: #6B7280; } /* Kuning Mustard*/
.color5 { background-color: #006633; } /* Sage Green*/
.color6 { background-color: #FF8BA7; } /* Hijau Zaitun*/
.color7 { background-color: #A78BFA; } /* Ungu*/
.color8 { background-color: #CC3300; } /* Oranye*/
.color9 { background-color: #A020F0; } /* Kuning*/
/* Responsif Mobile (Menu Hamburger) */
@media (max-width: 768px) {
    .menu-toggle { display: block; text-align: right; padding: 20px; cursor: pointer; }
    .nav-links { display: none; flex-direction: column; width: 10%; margin: 5px auto; }
    .nav-links.active { display: flex; }
    .btn-menu { width: 100%; margin-bottom: 5px; }
}
.btn-menu {
    box-shadow: 0 4px 0 rgba(0,0,0,0.15); /* Efek tombol timbul */
}
.btn-menu:active {
    transform: translateY(4px); /* Efek tertekan saat diklik */
    box-shadow: none;
}
.ppdb-banner {
    background: linear-gradient(135deg, #FF8BA7, #FFD93D);
    padding: 40px;
    margin: 30px auto;
    border-radius: 30px;
    text-align: center;
    color: white;
    box-shadow: 0 10px 25px rgba(255, 139, 167, 0.4);
}

.ppdb-content h2 { margin-bottom: 10px; font-size: 2em; }

.btn-daftar {
    display: inline-block;
    background: #ffffff;
    color: #FF8BA7;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
    transition: 0.3s;
    animation: pulse 2s infinite; /* Animasi berdenyut */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.btn-daftar:hover { background: #60C7C7; color: white; }

/* Tombol WhatsApp Melayang */
.wa-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    transition: transform 0.3s;
}

.wa-float:hover {
    transform: scale(1.1);
}

.wa-icon {
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Warna khas WhatsApp */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-decoration: none;
}
@media (max-width: 400px) {
    .table-responsive {
        overflow-x: auto;
        display: block;
        width: 50%;
    }
}
/* Contoh untuk kotak notifikasi sukses */
.alert-box {
    padding: 5px;
    background-color: #d4edda;
    color: #155724;
    border-radius: 5px;
    font-size: 10px; /* Teks sedang */
    margin: 10px 0;
}
/* Tampilan Navbar */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: #60C7C7; }

/* Tombol PPDB tetap terlihat di HP */
.btn-ppdb-top { background: #FFBF23; color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; }

/* Menu Hamburger (Garis Tiga) */
.menu-toggle { display: none; cursor: pointer; }
.bar { display: block; width: 5px; height: 3px; margin: 5px auto; background: white; transition: 0.3s; }

/* Efek Silang (X) */
.menu-toggle.active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Tampilan HP */
@media (max-width: 400px) {
    .menu-toggle { display: block; } /* Munculkan hamburger di HP */
    
    .nav-links {
        display: none; /* Sembunyikan semua menu */
        position: absolute; top: 20px; left: 0; width: 20%;
        background: #60C7C7; flex-direction: column; padding: 2px 0;
    }
    
    .nav-links.active { display: flex; } /* Tampilkan saat diklik */
    .nav-links li { padding: 2px; text-align: center; }
}