/*==========================================================*/
/* CSS CLEANUP V1.2 (Final Merged)           */
/* SMP NEGERI 1 KAYAN SELATAN STYLE          */
/*==========================================================*/

/*----------------------------------
  1. RESET & BASE STYLES
----------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f5f5;
    color: #333333;
}

/* Base link and button style */
a {
    text-decoration: none;
}

button, .download-button, .award-link { /* Konsolidasi gaya tombol */
    background: #ff8c00;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s;
    text-decoration: none; /* Penting untuk link yang distyle seperti button */
    display: inline-block; /* Agar padding bekerja pada link */
}

button:hover, .download-button:hover, .award-link:hover {
    background: #e67e00;
}

.download-button {
    background-color: #0b0e39; /* Warna khusus untuk tombol download */
    margin-top: 10px;
}
.download-button:hover {
    background-color: #ff8c00;
}
.award-link {
    background-color: #ff8c00;
}
.award-link:hover {
    background-color: #0b0e39;
}


/* Reusable Section Title */
.section-title {
    text-align: center;
    color: #0b0e39;
    margin-bottom: 30px;
    font-size: 2rem;
}

.subsection-title {
    font-size: 1.8rem;
    color: #0b0e39;
    margin-top: 50px;
    margin-bottom: 30px;
    border-bottom: 3px solid #ff8c00;
    display: inline-block;
    padding-bottom: 5px;
}

.intro-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
    text-align: center;
}

/* Padding untuk semua halaman detail agar tidak tertutup header */
.page-content {
    padding-top: 100px;
    padding-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/*----------------------------------
  2. HEADER & NAVIGATION
----------------------------------*/
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: rgba(11, 14, 57, 0); /* Transparan */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.scrolled {
    background-color: #0b0e39; /* Warna Biru Tua Solid */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 50px;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
    background: #ff8c00; 
    color: #fff;
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 240px;
    z-index: 1001;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-top: 3px solid #ff8c00;
    list-style: none;
}

.dropdown-content li a {
    color: #333;
    padding: 12px 15px;
    display: block;
    font-weight: normal;
    text-shadow: none;
}

.dropdown-content li a:hover {
    background: #ff8c00;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*----------------------------------
  3. HERO SECTION (SLIDER & TEKS)
----------------------------------*/
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Hero Image Slider */
.hero-image-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-image-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-image-slider img.active-slide {
    opacity: 1;
}

/* Panah Navigasi */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    z-index: 5;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Kontainer Bulatan Kecil */
.slider-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

/* Style Bulatan Kecil */
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: #ff8c00;
}

/* Hero Content (teks sambutan) */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    color: white;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
    text-align: center;
    padding: 20px 30px; 
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 10px;
}

.hero-content h2 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: #ff8c00;
}

/*----------------------------------
  4. MAIN CONTENT (index.html)
----------------------------------*/
main {
    padding: 80px 40px; 
    background: #ffffff;
    min-height: 50vh;
}

.content h2 {
    /* Menggunakan .section-title */
    margin-bottom: 30px; 
}

/* Sambutan Kepala Sekolah (Halaman Utama) - Foto di atas teks */
.sambutan {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fcfcfc;
    flex-direction: column; 
    text-align: center;
}

.sambutan img {
    order: -1; /* Pindah gambar ke atas */
    width: 180px;
    height: 240px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.sambutan p {
    order: 0;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 15px;
    flex-grow: 1;
}

.sambutan a {
    order: 1;
}

.join {
    text-align: center;
    margin: 60px 0;
    padding: 40px;
    background: #e6f0ff;
    border-radius: 10px;
}

.join h2 {
    /* Menggunakan .section-title */
    margin-bottom: 15px;
}

.join p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/*----------------------------------
  5. DETAIL PAGE STYLES
----------------------------------*/

/* Sambutan Detail */
.sambutan-detail h2 {
    /* Menggunakan .section-title */
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.kepala-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    border-bottom: 2px solid #ddd;
}

.kepala-info img {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kepala-info .nama-jabatan {
    text-align: center;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
}

.teks-sambutan {
    line-height: 1.8;
    text-align: justify;
    padding: 0 20px;
    font-size: 1.05rem;
}

.teks-sambutan p {
    margin-bottom: 20px;
}

.teks-sambutan .penutup {
    margin-top: 40px;
    text-align: right;
    font-style: italic;
    font-weight: bold;
    color: #0b0e39;
}

/* Sejarah Detail - Milestone dibuat mirip Fasilitas */
.history-detail {
    padding: 20px;
}

.sejarah-content p {
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 25px;
    padding: 0 10px;
}

.sejarah-content strong {
    font-size: 1.2rem;
    color: #0b0e39;
    display: block;
    margin-bottom: 5px;
}

.milestone {
    display: flex;
    align-items: center; 
    gap: 30px;
    margin: 40px 0;
    padding: 20px;
    background: #f0f4f7;
    border-left: 5px solid #ff8c00;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.milestone img {
    width: 35%; /* Diperkecil */
    max-width: 300px;
    height: 200px; 
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.milestone p {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    line-height: 1.6;
}

.milestone.reverse {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 5px solid #ff8c00;
}


.sejarah-footnote {
    margin-top: 50px;
    padding: 10px;
    border-top: 1px dashed #ccc;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

/* Visi Misi Detail */
.visi-misi-detail {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.card-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-box h3 {
    font-size: 1.8rem;
    color: #ff8c00; 
    border-bottom: 3px solid #0b0e39; 
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

.visi-card p {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #0b0e39;
    line-height: 1.4;
    margin-bottom: 10px;
}

.visi-card .tagline {
    font-size: 1.1rem;
    font-style: italic;
    font-weight: normal;
    color: #666;
    margin-top: 15px;
    border-top: 1px dotted #ccc;
    padding-top: 15px;
}

.misi-list ol {
    list-style-type: decimal;
    padding-left: 20px;
}

.misi-list li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.tujuan-sekolah p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Fasilitas Detail */
.facility-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.facility-item {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #0b0e39;
}

.facility-item img {
    width: 45%;
    max-width: 450px;
    height: 300px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.facility-text {
    width: 55%;
    padding-right: 20px;
}

.facility-text h3 {
    font-size: 1.8rem;
    color: #ff8c00;
    margin-bottom: 10px;
    border-bottom: 2px solid #ff8c00;
    display: inline-block;
    padding-bottom: 5px;
}

.facility-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

.facility-item.reverse {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 5px solid #0b0e39;
}

.facility-item.reverse .facility-text {
    padding-left: 20px;
    padding-right: 0;
    text-align: right;
}

.facility-item.reverse .facility-text h3 {
    border-right: 2px solid #ff8c00;
    border-bottom: 2px solid #ff8c00;
    border-left: none;
    padding-right: 0;
    padding-left: 5px;
}

/* Tenaga Pendidik & Kependidikan Detail (Menggunakan grid yang sama) */
.teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    padding: 20px 0;
}

.teacher-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 5px solid #ff8c00; 
}

.teacher-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.teacher-card.headmaster {
    border-top: 5px solid #0b0e39; 
}

.teacher-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.card-info {
    padding: 20px 15px;
}

.card-info h3 {
    font-size: 1.4rem;
    color: #0b0e39;
    margin-bottom: 5px;
}

.card-info .jabatan {
    font-size: 1rem;
    font-weight: bold;
    color: #ff8c00;
    margin-bottom: 8px;
}

.card-info .mapel {
    font-size: 0.95rem;
    color: #666;
}

/* Struktur Organisasi Detail */
.structure-detail {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.organogram-container {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 30px auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.organogram-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    border: 1px solid #ccc;
}

.organogram-caption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 15px;
}

.keterangan-organisasi {
    text-align: left;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border-top: 2px dashed #ccc;
}

.keterangan-organisasi h3 {
    color: #0b0e39;
    margin-bottom: 15px;
}

.keterangan-organisasi ul {
    list-style: none;
    padding: 0;
    line-height: 1.8;
}

.keterangan-organisasi li {
    font-size: 1rem;
    color: #333;
}

.keterangan-organisasi .note {
    font-size: 0.9rem;
    color: #777;
    margin-top: 20px;
    text-align: center;
}

/* BOSP & BOSDA Detail */
.bos-detail {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.summary-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    justify-content: center;
}

.bos-card {
    flex: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #e6f7ff;
    border-top: 5px solid #0b0e39;
}

.bos-card.bosda {
    background: #fff8e6;
    border-top: 5px solid #ff8c00;
}

.bos-card h3 {
    font-size: 1.5rem;
    color: #0b0e39;
    margin-bottom: 15px;
}

.bos-card .amount-label {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.bos-card .amount-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0b0e39;
    display: block;
    margin-bottom: 20px;
}

.bos-card.bosda .amount-value {
    color: #ff8c00;
}

.bos-card .description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

/* Documentation Section (Reused for Program Kerja & Dokumen BOS) */
.documentation-section {
    text-align: left;
    padding: 30px;
    background: #f4f7f9;
    border-radius: 10px;
    border: 1px solid #eee;
}

.documentation-section h3 {
    color: #0b0e39;
    border-bottom: 2px solid #ff8c00;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-size: 1.6rem;
}

.document-list {
    margin-top: 20px;
}

.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #ccc;
}

.doc-item:last-child {
    border-bottom: none;
}

.doc-item .doc-title {
    font-size: 1.05rem;
    color: #333;
    font-weight: 500;
}

.doc-item .download-link {
    background-color: #ff8c00;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 0.9rem;
}

.doc-item .download-link:hover {
    background-color: #0b0e39;
}

/* Program Kerja Detail */
.program-detail {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    margin-bottom: 50px;
}

.program-area {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.3s;
}

.program-area:hover {
    transform: translateY(-5px);
}

.program-area h3 {
    font-size: 1.5rem;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 3px solid;
}

.program-area.kurikulum h3 {
    color: #0b0e39;
    border-color: #ff8c00;
}
.program-area.kesiswaan h3 {
    color: #ff8c00;
    border-color: #0b0e39;
}
.program-area.sarpras h3 {
    color: #5cb85c;
    border-color: #0b0e39;
}

.program-area ul {
    list-style: none;
    padding: 0;
}

.program-area li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #444;
}

.program-area li i {
    margin-right: 10px;
    color: #ff8c00;
}

/* Mutasi Siswa Detail */
.mutasi-siswa-detail {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.mutasi-container {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.mutasi-card {
    flex: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    border-left: 5px solid;
}

.mutasi-card.masuk {
    background: #e9f7e9;
    border-color: #5cb85c;
}

.mutasi-card.keluar {
    background: #fff8e6;
    border-color: #ff8c00;
}

.mutasi-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    color: #0b0e39;
}

.mutasi-card i {
    margin-right: 10px;
    font-size: 1.2em;
    color: #ff8c00;
}

.prosedur-info h4 {
    color: #0b0e39;
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 10px;
}

.prosedur-info ol {
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.prosedur-info p {
    font-size: 0.95rem;
    line-height: 1.5;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.catatan-penting {
    background: #fbecec;
    border: 1px solid #e7a1a1;
    padding: 20px;
    border-radius: 8px;
    text-align: left;
}

.catatan-penting h3 {
    color: #d9534f;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.catatan-penting p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 10px;
}

.catatan-penting i {
    color: #d9534f;
    margin-right: 8px;
}

/* Layanan Mutasi Detail */
.layanan-mutasi-detail {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.layanan-container {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.contact-card, .time-card {
    flex: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-top: 5px solid #0b0e39;
}

.contact-card h3, .time-card h3 {
    font-size: 1.4rem;
    color: #0b0e39;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff8c00;
}

.contact-info p {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 15px;
    color: #333;
}

.contact-info i {
    color: #ff8c00;
    margin-right: 10px;
    min-width: 20px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.schedule-table th, .schedule-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

.schedule-table th {
    background-color: #f0f0f0;
    color: #0b0e39;
}

.time-card .note {
    font-size: 0.9rem;
    color: #777;
    margin-top: 10px;
    text-align: center;
}

.pejabat-info {
    text-align: center;
}

.pejabat-info h3 {
    font-size: 1.6rem;
    color: #0b0e39;
    margin-bottom: 30px;
}

.pejabat-card {
    display: inline-block;
    width: 45%;
    max-width: 400px;
    margin: 0 10px;
    padding: 20px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    background: #f9f9f9;
}

.pejabat-card .jabatan-pj {
    font-size: 0.9rem;
    color: #ff8c00;
    font-weight: bold;
    margin-bottom: 5px;
}

.pejabat-card .nama-pj {
    font-size: 1.3rem;
    color: #0b0e39;
    margin-bottom: 10px;
}

.pejabat-card .desc-pj {
    font-size: 0.95rem;
    color: #555;
}

.pejabat-card i {
    color: #0b0e39;
    margin-right: 5px;
}

/* Prestasi Siswa Detail */
.achievement-detail {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.medal-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.medal-box {
    width: 200px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.medal-box i {
    font-size: 3rem;
    margin-bottom: 10px;
}

.medal-box h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #333;
}

.medal-box .count {
    font-size: 2.5rem;
    font-weight: 900;
    display: block;
}

.medal-box.gold {
    background: #fffbe6;
    border: 2px solid #ffcc00;
}
.medal-box.gold i, .medal-box.gold .count {
    color: #ffcc00;
}

.medal-box.silver {
    background: #f7f7f7;
    border: 2px solid #c0c0c0;
}
.medal-box.silver i, .medal-box.silver .count {
    color: #c0c0c0;
}

.medal-box.bronze {
    background: #fff0e6;
    border: 2px solid #cd7f32;
}
.medal-box.bronze i, .medal-box.bronze .count {
    color: #cd7f32;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.achievement-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
    border-bottom: 5px solid #0b0e39;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.achievement-card.gold-card { border-bottom-color: #ffcc00; }
.achievement-card.silver-card { border-bottom-color: #c0c0c0; }
.achievement-card.bronze-card { border-bottom-color: #cd7f32; }


.achievement-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.card-body {
    padding: 15px;
}

.card-body h4 {
    font-size: 1.3rem;
    color: #0b0e39;
    margin-bottom: 5px;
}

.card-body .rank {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #ff8c00;
}

.card-body .rank.gold-text { background-color: #ffcc00; color: #333; }
.card-body .rank.silver-text { background-color: #c0c0c0; color: #333; }
.card-body .rank.bronze-text { background-color: #cd7f32; color: white; }
.card-body .rank i { margin-right: 5px; }


.card-body .event {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.card-body .date {
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
}

/* Prestasi Sekolah Detail */
.school-achievement-detail {
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.award-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.award-box {
    width: 300px;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #f8f8f8;
    border: 1px solid #ddd;
}

.award-box i {
    font-size: 2.5rem;
    color: #ff8c00;
    margin-bottom: 10px;
}

.award-box h4 {
    font-size: 1.3rem;
    color: #0b0e39;
    margin-bottom: 5px;
}

.award-box p {
    font-size: 1rem;
    color: #555;
    font-weight: bold;
}

.award-list-container {
    margin-top: 30px;
    text-align: left;
}

.award-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    border-left: 5px solid #0b0e39;
    transition: box-shadow 0.3s;
}

.award-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.award-item.adiwiyata { border-left-color: #5cb85c; }
.award-item.p5 { border-left-color: #ff8c00; }
.award-item.bos { border-left-color: #0b0e39; }

.award-icon {
    font-size: 2.5rem;
    color: #ff8c00;
    margin-right: 25px;
    min-width: 50px;
    text-align: center;
}

.award-item.adiwiyata .award-icon { color: #5cb85c; } 
.award-item.p5 .award-icon { color: #0b0e39; } 

.award-info {
    flex-grow: 1;
}

.award-info h4 {
    font-size: 1.2rem;
    color: #0b0e39;
    margin-bottom: 5px;
}

.award-info .desc {
    font-size: 0.95rem;
    color: #555;
}

.award-info .year {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
    font-style: italic;
}

/* Artikel List Detail (Blog) */
.article-list-detail {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.article-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.article-image-container {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.article-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.article-card:hover .article-thumbnail {
    transform: scale(1.05);
}

.category {
    position: absolute;
    top: 15px;
    left: 15px;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
}

.category.kegiatan {
    background-color: #ff8c00;
}
.category.umum {
    background-color: #0b0e39;
}

.article-body {
    padding: 20px;
}

.article-title {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

.article-title a {
    color: #0b0e39;
    text-decoration: none;
    transition: color 0.3s;
}

.article-title a:hover {
    color: #ff8c00;
}

.article-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
}

.article-meta span {
    margin-right: 15px;
}

/*----------------------------------
  6. FOOTER
----------------------------------*/
footer {
    text-align: center;
    padding: 20px;
    background: #0b0e39;
    color: white;
    font-size: 0.9rem;
}

/*----------------------------------
  7. RESPONSIVENESS (MOBILE-FIRST ADJUSTMENTS)
----------------------------------*/
@media (max-width: 992px) {
    /* Header */
    header {
        padding: 10px 20px;
    }
    
    /* Hero */
    .hero-content h1 {
        font-size: 3rem;
    }

    /* Main Content */
    main {
        padding: 60px 20px;
    }
    
    /* Fasilitas - Stack Vertikal */
    .facility-item,
    .facility-item.reverse {
        flex-direction: column;
        border-left: 5px solid #0b0e39;
        border-right: none;
    }

    .facility-item img,
    .facility-item .facility-text {
        width: 100%;
        padding: 0;
    }

    .facility-item.reverse .facility-text {
        padding: 0;
        text-align: left;
    }

    .facility-item.reverse .facility-text h3 {
        border-right: none;
        border-bottom: 2px solid #ff8c00;
        padding-left: 0;
    }
    
    /* Sejarah Milestone - Stack Vertikal */
    .milestone,
    .milestone.reverse {
        flex-direction: column;
        align-items: center;
        border-left: 5px solid #ff8c00;
        border-right: none;
    }
    
    .milestone img {
        width: 100%;
        max-width: 300px;
    }
    
    .milestone p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* General */
    .section-title {
        font-size: 1.7rem;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content h2 {
        font-size: 1.4rem;
    }

    /* BOSP/Mutasi Summary */
    .summary-grid,
    .mutasi-container,
    .layanan-container,
    .award-summary {
        flex-direction: column;
        gap: 20px;
    }
    
    .bos-card, .mutasi-card, .contact-card, .time-card, .award-box {
        width: 100%;
    }

    /* Detail Page Info */
    .pejabat-card {
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    /* Award Item */
    .award-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .award-icon {
        margin-bottom: 10px;
    }
    .award-link {
        margin-top: 15px;
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    /* Footer */
    footer {
        padding: 15px 10px;
        font-size: 0.8rem;
    }
}
/*----------------------------------
  5. DETAIL PAGE STYLES (Tambahan untuk Kurikulum)
----------------------------------*/

/* Layout Landasan Grid (3 kolom) */
.landasan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
    text-align: center;
}

.landasan-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #ff8c00;
    transition: transform 0.3s;
}

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

.landasan-card h3 {
    font-size: 1.3rem;
    color: #0b0e39;
    margin-bottom: 15px;
}

.landasan-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Struktur Container (Intrakurikuler & P5) */
.struktur-container {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.struktur-card {
    flex: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.struktur-card h4 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid;
    color: #0b0e39;
}

.struktur-card.core {
    background: #e6f0ff; /* Biru muda untuk Intrakurikuler */
    border-left: 5px solid #0b0e39;
}

.struktur-card.core h4 {
    border-color: #ff8c00;
}

.struktur-card.project {
    background: #fff8e6; /* Kuning muda untuk P5 */
    border-left: 5px solid #ff8c00;
}

.struktur-card.project h4 {
    border-color: #0b0e39;
}

.subject-list, .project-tema {
    list-style: none;
    padding: 0;
}

.subject-list li, .project-tema li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 2px solid #ccc;
    color: #333;
}

.subject-list li i, .project-tema li i {
    margin-right: 10px;
    color: #ff8c00;
    min-width: 20px;
}

/* Responsiveness untuk Struktur Kurikulum */
@media (max-width: 992px) {
    .struktur-container {
        flex-direction: column;
        gap: 30px;
    }
}