/*
Theme Name: Sitesch.id
Theme URI: https://websekolah.co.id/
Author: Websekolah.co.id
Author URI: https://websekolah.co.id/
Description: Template Wordpress Untuk Website Sekolah.
Version: 2.7
Text Domain: sitesch
*/

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-size: 14px;
}

a,
a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Poppins", sans-serif;
    margin-bottom: 0;
    margin-top: 0;
}

.custom-container {
    background: #ffffff;
    max-width: 1180px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 1px 18px 0px rgba(186, 186, 186, 0.3);
    -moz-box-shadow: 0px 1px 18px 0px rgba(186, 186, 186, 0.3);
    box-shadow: 0px 1px 18px 0px rgba(186, 186, 186, 0.3);
}

.btn {
    border: none !important;
}

.btn-primary {
    color: #fff;
    background-color: #15639b;
    border-color: #15639b;
}

.btn-primary:hover {
    background-color: #1b70ac;
    border-color: #1b70ac;
}

.navbar {
    padding-top: 12px;
    padding-bottom: 12px;
    -webkit-box-shadow: 0px 4px 6px -1px rgba(186, 186, 186, 0.3);
    -moz-box-shadow: 0px 4px 6px -1px rgba(186, 186, 186, 0.3);
    box-shadow: 0px 4px 6px -1px rgba(186, 186, 186, 0.3);
}

.navbar-logo {
    width: auto;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-nav .nav-item:hover>.nav-link {
    color: #333333;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    color: #333333;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 25px;
    padding-left: 0px;
}

.dropdown-header-menu.show {
    display: block;
    border-radius: 4px;
    border: none;
    top: 45px;
    padding: 0;
    box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.12) !important;
}

.navbar-top {
    padding: 20px 16px;
    color: #ffffff;
    border-bottom: 1px solid;
}

.contact-top {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.navbar-top-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.item-contact {
    font-size: 14px;
}

.header-top-info {
    display: flex;
    align-items: center;
    color: #000000;
    column-gap: 20px;
}

.header-top-contact {
    display: flex;
    column-gap: 20px;
    align-items: center;
}

.header-top-contact p {
    font-size: 14px;
    font-weight: 600;
}

.header-top-contact h5 {
    font-size: 12px;
    font-weight: 300;
}

.header-top-contact .bi {
    font-size: 16px;
    height: 31px;
    width: 31px;
    border-radius: 100px;
    padding: 4px 8px;
    color: #ffffff;
}

.header-contact-item {
    display: flex;
    align-items: center;
    column-gap: 6px;
}

.dropdown-header-menu:before {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 35px;
    top: -23px;
    font-size: 26px;
    content: "\F235";
    color: #fff;
    font-family: bootstrap-icons;
    z-index: -1;
}

.dropdown-header-menu .menu-item-has-children.dropdown .dropdown-header-menu:before {
    position: absolute;
    width: 50px;
    height: 50px;
    left: -15px;
    top: 0px;
    font-size: 26px;
    content: "\F22D";
    color: #fff;
    font-family: bootstrap-icons;
    z-index: -1;
}

.dropdown-filter-archive:before {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 35px;
    top: -23px;
    font-size: 26px;
    content: "\F235";
    color: #fff;
    font-family: bootstrap-icons;
    z-index: -1;
}

.dropdown-header-menu .dropdown-item {
    padding: 10px 15px;
}

.dropdown-filter-archive .dropdown-item {
    padding: 10px 15px;
}

.dropdown-header-menu li {
    border-bottom: 1px solid #eeeeee;
}

.dropdown-header-menu li:last-child {
    border-bottom: 0;
}

.dropdown-item {
    padding: 0;
    font-size: 14px !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background: 0;
    color: #15639b;
}

.menu-item-has-children .dropdown-toggle::after {
    display: inline-block;
    content: "\F282";
    width: 12px;
    height: 12px;
    vertical-align: -3px;
    margin-left: 12px;
    border: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'bootstrap-icons';
}

.dropdown-header-menu .menu-item-has-children .dropdown-toggle::after {
    display: inline-block;
    content: "\F282";
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    margin-left: 12px;
    border: 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    right: 0px;
    top: 1px;
    font-family: 'bootstrap-icons';
    font-weight: 600;
}

.header-contact {
    border-left: 1px solid #dddddd;
    padding-left: 20px;
    flex-direction: row;
    column-gap: 12px;
}

.header-contact .bi {
    font-size: 20px;
}

.header-contact .bi-whatsapp {
    color: #25D366;
}

.header-contact .bi-facebook {
    color: #1877F2;
}

.header-contact .bi-instagram {
    color: #cd486b;
}

.header-contact .bi-youtube {
    color: #FF0000;
}

.header-contact .bi-tiktok {
    color: #FE2C55;
}

.header-contact .bi-twitter {
    color: #1DA1F2;
}

.container {
    max-width: 1140px;
}

.navbar-light .navbar-toggler {
    border: none;
}

.home-slider {
    position: relative;
    z-index: 0;
}

.home-slider .item-slide {
    min-height: 85vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-bottom: 100px;
}

.home-slider .item-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.home-slider .item-slide h3,
.home-slider .item-slide p,
.home-slider .item-slide .btn {
    color: #ffffff;
    z-index: 2;
    position: relative;
    max-width: 650px;
}

.home-slider .item-slide h3 {
    font-size: 38px;
    line-height: 50px;
    font-weight: 800;
    letter-spacing: 1px;
}

.home-slider .item-slide p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
}

/* Batas panjang deskripsi slideshow: 3 baris, sisanya dipangkas dengan elipsis.

   Deskripsi diisi bebas lewat metabox (textarea tanpa batas panjang), sehingga
   teks yang kepanjangan mendorong tinggi slide tak terkendali dan mendesak
   judul serta tombolnya. Efeknya paling terasa di layar kecil, tempat tinggi
   slide kini mengikuti tinggi gambar, bukan tinggi layar.

   Dipangkas hanya saat TAMPIL — isi aslinya tetap utuh di database, jadi
   batas ini aman diubah atau dicabut kapan saja. Untuk mengubah jumlah baris,
   ganti kedua nilai `line-clamp` di bawah. */
.home-slider .item-slide p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.home-slider .slick-dots {
    bottom: 110px;
    max-width: 1100px;
    position: relative;
    margin: 0 auto;
    text-align: left;
    padding: 0 15px;
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

.home-slider .slick-dots li {
    margin: 0;
}

.home-slider .slick-dots li button:before {
    color: #ffffff;
    content: " ";
    width: 13px;
    height: 13px;
    display: block;
    background: #ffffff;
    border-radius: 100%;
    opacity: 1;
}

.home-slider .slick-dots li.slick-active {
    margin-right: 10px;
}

.home-slider .slick-dots li.slick-active button:before {
    width: 20px;
    border-radius: 50px;
}

.home-slider .btn {
    border-radius: 8px;
    padding: 12px 25px;
}

.home-slider-nav {
    color: #ffffff;
    font-size: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    margin: 20px 0;
    cursor: pointer;
}

.section-slider-nav {
    color: #15639b;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    margin: 0;
    cursor: pointer;
}

.fasilitas-list {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.archive-program-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.program-list {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.fasilitas-list-nav {
    color: #15639b;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    cursor: pointer;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: 15px;
}

.program-list-nav {
    color: #15639b;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    cursor: pointer;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: 15px;
}

.fasilitas-list .slick-track {
    margin: 0;
}

.fasilitas-list .slick-list {
    margin-left: -25px;
}

.fasilitas-list .slick-slide {
    margin-left: 25px;
}

.program-list .slick-track {
    margin: 0;
}

.program-list .slick-list {
    margin-left: -25px;
}

.program-list .slick-slide {
    margin-left: 25px;
}

.home-slider-next:hover,
.home-slider-prev:hover {
    color: #ffffff;
}

.slider-section-nav {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.home-intro {
    position: relative;
}

.home-intro .wrapper {
    margin-top: -200px;
}

.home-intro .intro-content {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #f5f5f5;
    padding: 40px;
}

.body-sambutan {
    display: flex;
    align-items: center;
    column-gap: 24px;
}

.foto-sambutan {
    display: block;
    width: 150px;
    height: 150px;
    background-position: center;
    background-size: cover;
    border-radius: 100px;
}

.content-sambutan {
    width: 70%;
}

.home-intro h3 {
    font-size: 20px;
    font-weight: 800;
}

.home-intro h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}

.home-intro p {
    color: #333333;
    margin-bottom: 10px;
}

.statistik {
    display: flex;
    justify-content: space-around;
    column-gap: 20px;
    align-items: flex-start;
    margin-top: 30px;
    text-align: center;
}

.item-statistik {
    width: 33%;
    border-left: 1px solid #dddddd;
    padding: 0 20px;
    border-right: 1px solid #dddddd;
}

.statistik .item-statistik:first-child {
    padding: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.statistik .item-statistik:last-child {
    padding: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.statistik .total {
    font-size: 24px;
    font-weight: 700;
}

.statistik .title {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.home-guru {
    background: #ffffff;
    padding: 35px 0;
}

.header-left-side {
    width: 80%;
}

.post-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    margin-left: -25px;
}

.post-item {
    width: 33.33%;
    padding-left: 25px;
    box-sizing: border-box;
}

.post-item .wrapper {
    background: #ffffff;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

.post-item .wp-post-image {
    width: 100%;
    height: auto;
}

.post-item-content a {
    color: #000000;
    font-weight: 600;
}

.post-item-content a:hover {
    color: #15639b;
}

.post-item-content h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.post-item-content p {
    font-size: 14px;
    line-height: 20px;
    color: #7e7e7e;
}

.post-item-info {
    color: #7e7e7e;
}

/* ============================================================
   Daftar berita/artikel (halaman Informasi & arsip kategori) — modern.
   SENGAJA di-scope ke .archive-page: class .post-list/.post-item juga
   dipakai slider berita beranda (.home-post) yang TIDAK boleh berubah.
   Catatan: background kartu, warna tanggal, dan warna judul dikunci
   opsi Redux (`!important`) -> jangan diset di sini.
   ============================================================ */
.archive-page .post-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-left: 0;
    row-gap: 26px;
}

.archive-page .post-item {
    width: auto;
    padding-left: 0;
    display: flex;
}

.archive-page .post-item .wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.archive-page .post-item .wrapper:hover {
    transform: translateY(-4px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
}

/* Gambar: rasio seragam + zoom halus saat hover */
.archive-page .post-item .wrapper>a:first-child {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #eef1f4;
    flex: 0 0 auto;
}

.archive-page .post-item .wrapper>a:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.archive-page .post-item .wrapper:hover>a:first-child img {
    transform: scale(1.06);
}

/* Baris meta kartu: tanggal + jumlah dibaca */
.archive-page .post-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.archive-page .post-item-info small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Jumlah dibaca (tidak diberi warna: mengikuti .post-item-info) */
.post-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.post-views i {
    font-size: 13px;
    opacity: .75;
}

.archive-page .post-item-info small::before {
    content: "\f1e8";
    /* bi-calendar-event */
    font-family: "bootstrap-icons";
    font-size: 12px;
    font-weight: normal;
}

/* Judul: rapat, maksimal 3 baris agar tinggi kartu seragam */
.archive-page .post-item-content {
    flex: 1 1 auto;
}

.archive-page .post-item-content h4 {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.archive-page .post-item-content h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .archive-page .post-list {
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .archive-page .post-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .archive-page .post-item .wrapper,
    .archive-page .post-item .wrapper>a:first-child img {
        transition: none;
    }

    .archive-page .post-item .wrapper:hover {
        transform: none;
    }

    .archive-page .post-item .wrapper:hover>a:first-child img {
        transform: none;
    }
}

.agenda-header,
.tendik-header,
.ekskul-header,
.post-header,
.guru-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.agenda-header h3,
.post-header h3,
.tendik-header h3,
.ekskul-header h3,
.home-fasilitas h3,
.home-program h3,
.post-header h3,
.guru-header h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

.agenda-header p,
.post-header p,
.tendik-header p,
.ekskul-header p,
.home-fasilitas p,
.home-program p,
.post-header p,
.guru-header p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
}

.ekskul-header .header-left-side {
    width: 70%;
}

.tendik-item h5,
.guru-item h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0 5px;
    color: #333333;
    text-align: center;
}

.tendik-item p,
.guru-item p {
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.tendik-item a,
.guru-item a {
    color: #333333;
}

.tendik-item a:hover,
.guru-item a:hover {
    color: #15639b;
}

.archive-guru-list,
.archive-tendik-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.archive-galery-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.archive-galeri-image {
    min-height: 200px;
    background-size: cover;
    margin-bottom: 19px;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
    border: 1px solid #dddddd;
    border-radius: 10px;
    position: relative;
    transition: transform 0.5s ease;
}

.archive-galeri-image .bi-images {
    font-size: 30px;
    color: #ffffff;
    position: absolute;
    right: 15px;
    bottom: 10px;
}

.archive-galeri-image:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 10px;
    opacity: 0.4;
}

.archive-galeri-item a:hover .archive-galeri-image:before {
    opacity: 0.5;
}

.archive-galeri-content h5 {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    text-align: center;
}

.archive-guru-item-photo,
.archive-tendik-item-photo {
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
    border-radius: 15px;
    border: 1px solid #f5f5f5;
}

.archive-guru-item h5,
.archive-tendik-item h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0 5px;
    color: #333333;
    text-align: center;
}

.archive-guru-item p,
.archive-tendik-item p {
    font-size: 13px;
    font-weight: 400;
    color: #6C757D;
    text-align: center;
}

/* ============================================================
   Prestasi Siswa & Sekolah — kartu (dipakai halaman & beranda).
   Aksen memakai warna utama situs: #15639b.
   ============================================================ */
.archive-prestasi-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.prestasi-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.prestasi-card:hover {
    transform: translateY(-4px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
    text-decoration: none;
}

.prestasi-foto {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eef1f4;
}

.prestasi-juara {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #15639b;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(21, 99, 155, .35);
}

.prestasi-juara i {
    font-size: 12px;
}

.prestasi-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
}

.prestasi-tingkat {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #15639b;
    background: rgba(21, 99, 155, .09);
    border-radius: 100px;
    padding: 4px 10px;
}

.prestasi-card h5 {
    font-size: 15.5px;
    font-weight: 600;
    color: #333333;
    line-height: 1.45;
    margin: 0;
}

.prestasi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 6px;
}

.prestasi-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6C757D;
}

.prestasi-meta i {
    color: #15639b;
    font-size: 13px;
}

/* Section beranda */
.home-prestasi .prestasi-header {
    margin-bottom: 26px;
}

.home-prestasi .prestasi-header h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.home-prestasi .prestasi-header p {
    font-size: 15px;
    color: #6C757D;
    margin: 0;
}

@media (max-width: 991px) {
    .archive-prestasi-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .archive-prestasi-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prestasi-card {
        transition: none;
    }

    .prestasi-card:hover {
        transform: none;
    }
}

.dropdown-filter-archive.show {
    display: block;
    border-radius: 4px;
    border: none;
    top: 50px;
    padding: 0;
    box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.12) !important;
}

.guru-list .slick-track {
    margin: 0;
}

.guru-list .slick-slide {
    margin-left: 27px !important;
}

.ekskul-list .slick-track {
    margin: 0;
}

.ekskul-list .slick-slide {
    margin-left: 27px !important;
}

.testimoni-list .slick-slide {
    margin-left: 27px !important;
}

.tendik-list .slick-track {
    margin: 0;
}

.tendik-list .slick-slide {
    margin-left: 27px !important;
}

.guru-list .slick-list {
    margin-left: -30px !important;
}

.ekskul-list .slick-list {
    margin-left: -30px !important;
}

.testimoni-list .slick-list {
    margin-left: -30px !important;
}

.tendik-list .slick-list {
    margin-left: -30px !important;
}

.tendik-item-photo,
.guru-item-photo {
    width: 100%;
    height: 250px;
    background-position: center;
    background-size: cover;
    border-radius: 15px;
    border: 1px solid #e7e7e7;
}

.home-agenda .slick-slide {
    margin-left: 27px !important;
}

.home-agenda .slick-list {
    margin-left: -28px !important;
}

.agenda-item .bi:before {
    vertical-align: 0;
    font-size: 50px;
}

.archive-agenda-item .bi:before {
    vertical-align: 0;
    font-size: 50px;
}

.agenda-item .bi,
.archive-agenda-item .bi {
    line-height: 0;
}

.agenda-item {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
}

.tanggal-agenda {
    font-size: 15px;
    font-weight: 500;
}

.agenda-item .wrapper {
    display: flex;
    column-gap: 15px;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    padding-bottom: 15px;
}

.agenda-item h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
}

.archive-agenda-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.archive-agenda-item .bi {
    font-size: 48px;
}

.archive-agenda-item {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
}

.archive-agenda-item .wrapper {
    display: flex;
    column-gap: 15px;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    padding-bottom: 15px;
}

.archive-agenda-item h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.archive-agenda-item,
.agenda-item {
    border: 1px solid #f5f5f5;
    position: relative;
}

/* ============================================================
   Halaman & arsip Agenda — tampilan modern.
   SENGAJA hanya .archive-agenda-item: slider beranda memakai .agenda-item
   (+ .tanggal-agenda/.wrapper yang sama) dan section beranda Style 2 memakai
   .s2-agenda-* -> keduanya tidak boleh ikut berubah.
   Background box, warna teks, warna ikon, dan warna garis dikunci opsi
   Redux (`!important`) -> JANGAN diset di sini.
   ============================================================ */
.archive-agenda-list {
    gap: 24px;
}

.archive-agenda-item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 14px;
    border-color: #edf0f3;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.archive-agenda-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
}

.archive-agenda-item .wrapper {
    align-items: flex-start;
    column-gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 14px;
}

/* Ikon 50px terlalu dominan untuk kartu daftar */
.archive-agenda-item .bi:before {
    font-size: 34px;
}

.archive-agenda-item h5 {
    line-height: 1.5;
    margin: 0;
}

/* Tanggal: teks bebas (mis. "10 – 21 Juli 2023"), jadi tetap teks + ikon */
.archive-agenda-item .tanggal-agenda {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: auto 0 0;
    opacity: .9;
}

.archive-agenda-item .tanggal-agenda::before {
    content: "\f1e8";
    /* bi-calendar-event */
    font-family: "bootstrap-icons";
    font-weight: normal;
    font-size: 14px;
    opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
    .archive-agenda-item {
        transition: none;
    }

    .archive-agenda-item:hover {
        transform: none;
    }
}

.agenda-list .slick-track {
    display: flex !important;
    margin: 0;
}

.agenda-list .slick-slide {
    height: inherit !important;
}

.ekskul-item {
    border: 1px solid #eeeeee;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    position: relative;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 6px solid #15639b;
}

.ekskul-item:hover {
    border-top: 1px solid #15639b;
    border-left: 1px solid #15639b;
    border-right: 1px solid #15639b;
}

.ekskul-item h5 {
    color: #15639b;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ekskul-item p {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.ekskul-item .bi {
    position: absolute;
    font-size: 28px;
    opacity: 0.2;
    top: 5px;
    right: 10px;
    color: #15639b;
}

.ekskul-item:hover .bi {
    opacity: 1;
}

.archive-ekskul-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.archive-ekskul-item {
    background: #ffffff;
    padding: 0px;
    border-radius: 8px;
    position: relative;
    border: 1px solid #ebebeb;
}

.archive-ekskul-item .wrapper {
    padding: 25px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.archive-ekskul-image {
    min-height: 200px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.archive-ekskul-item h5 {
    color: #15639b;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    text-align: center;
}

.archive-ekskul-item p {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.fasilitas-item .wrapper {
    height: 260px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.program-item .wrapper {
    height: 260px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.fasilitas-content {
    padding: 30px;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    flex-direction: column;
    position: relative;
}

.program-content {
    padding: 30px;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    flex-direction: column;
    position: relative;
}

.fasilitas-content h5 {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 5px;
    font-weight: 600;
}

.program-content h5 {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 0px;
    font-weight: 600;
}

.fasilitas-content p {
    font-size: 14px;
    line-height: 22px;
}

.program-content p {
    font-size: 14px;
    line-height: 22px;
}

.fasilitas-image {
    height: 100%;
    width: 50%;
    display: block;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
}

.program-image {
    height: 100%;
    width: 50%;
    display: block;
    background-size: cover;
    background-position: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}

.galeri-fasilitas {
    padding: 50px 0 40px;
    background: #f8f8f8;
}

.galeri-fasilitas h5 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
}

.galeri-fasilitas img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e7e7e7;
}

.home-fasilitas .container {
    position: relative;
}

.home-program .container {
    position: relative;
}

.home-testimoni h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: #333333;
}

.home-testimoni p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
}

.testimoni-list {
    margin-top: 40px;
}

.testimoni-list .testimoni-content {
    padding: 40px 30px 30px;
    border-radius: 10px;
    position: relative;
    background: #ffffff;
    height: 100%;
    border: 1px solid #ebebeb;
}

.testimoni-list .wrapper .bi {
    position: absolute;
    font-size: 30px;
    top: 0px;
    right: 10px;
    color: #9bd6ff;
}

.testimoni-list .wrapper p {
    font-size: 14px;
    line-height: 22px;
}

.testimoni-info {
    border-top: 1px solid #eeeeee;
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.testimoni-info h5 {
    font-size: 16px;
    font-weight: 600;
    padding: 3px 0;
}

.testimoni-info p {
    color: #545454;
    font-size: 12px !important;
}

.testimoni-user-photo {
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 100px;
}

.widget_custom_html,
.widget_media_image,
.widget_nav_menu,
.widget_recent_entries,
.widget_media_gallery,
.widget_pages,
.widget_search,
.widget_recent_comments,
.widget_text,
.widget_categories {
    list-style: none;
    margin-bottom: 20px;
}

.footer-top {
    padding-top: 40px;
    padding-bottom: 40px;
}

.footer-top p,
.footer-top .textwidget {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.footer-top a {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.footer-top ul {
    color: #ffffff;
    list-style: none !important;
    padding-left: 0px;
}

.footer-top li.widget {
    list-style: none !important;
    margin-bottom: 20px;
}

.footer-top li.widget:last-child {
    margin-bottom: 0 !important;
}

/* Skat garis dashed tipis antar item menu footer (widget Menu) — compact. */
.footer-top .widget_nav_menu ul.menu>li {
    border-bottom: 1px dashed rgba(255, 255, 255, .15);
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.footer-top .widget_nav_menu ul.menu>li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.footer-top .widgettitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-logo {
    width: auto;
    margin-bottom: 10px;
}

.footer-bottom {
    padding: 15px;
    text-align: center;
    color: #333333;
    font-size: 13px;
    line-height: 22px;
}

.footer-bottom a {
    color: #15639b;
    font-weight: 500;
}

.footer-social-media {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}

.footer-social-media .bi {
    font-size: 20px;
}

.footer-social-media .bi-whatsapp {
    color: #25D366;
}

.footer-social-media .bi-facebook {
    color: #1877F2;
}

.footer-social-media .bi-instagram {
    color: #cd486b;
}

.footer-social-media .bi-youtube {
    color: #FF0000;
}

.footer-social-media .bi-tiktok {
    color: #FE2C55;
}

.footer-social-media .bi-twitter {
    color: #1DA1F2;
}

.post-page h1 {
    font-size: 32px;
    line-height: 46px;
    font-weight: 700;
    margin-bottom: 20px;
}

.post-page {
    padding: 40px 0;
}

.post-page p {
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
}

.post-meta p {
    margin-bottom: 0;
    font-size: 14px;
}

.post-meta a {
    color: #15639b;
}

.post-meta {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    column-gap: 30px;
    border-top: 1px dashed #dddddd;
    border-bottom: 1px dashed #dddddd;
    padding: 10px 0;
    justify-content: space-between;
}

.wp-caption {
    max-width: 100%;
}

.post-content img,
.page-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.caption-image,
.wp-caption-text {
    font-size: 12px !important;
    color: #9b9b9b;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    display: block;
    text-align: center;
    line-height: 20px !important;
}

.related-post {
    border-top: 1px dashed #dddddd;
    margin-top: 28px;
}

.related-post h4 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 20px;
}

.related-post ul {
    display: flex;
    list-style: none;
    padding-left: 0px;
    flex-direction: column;
    row-gap: 20px;
}

.related-post li {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.related-post a {
    font-size: 16px;
    line-height: 26px;
    color: #15639b;
    font-weight: 600;
}

.related-post img {
    border-radius: 8px;
}

.related-post-content {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.sidebar .widget ul {
    list-style: none;
    padding-left: 0;
}


.sidebar .widgettitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.sidebar .widget {
    list-style: none;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid #eeeeee;
}

.sidebar .widget:last-child {
    margin-bottom: 0;
}

.sidebar .widget a {
    color: #15639b !important;
    font-weight: 500;
}

.sidebar .widget li {
    padding: 10px 0;
    border-bottom: 1px dashed #dddddd;
}

.sidebar .widget li:last-child {
    border-bottom: none;
    padding: 10px 0 0;
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 12px;
}

.widget_media_image img {
    border-radius: 6px;
}

.comment-body {
    background: #f5f5f5;
    padding: 25px;
    border-radius: 7px;
}

.comment-author img {
    border-radius: 100px;
    margin-right: 8px;
}

.post-comment a {
    color: #15639b;
}

.post-comment h3 {
    font-size: 18px;
    font-weight: 600;
}

.post-comment .comment-form-comment textarea {
    width: 100%;
    border-radius: 4px;
    height: 100px;
    border: 1px solid #dddddd;
    padding: 5px 10px;
    resize: none;
}

.post-comment .comment-form-comment,
.post-comment .comment-form-author,
.post-comment .comment-form-email,
.post-comment .comment-form-url,
.post-comment .comment-form-author,
.post-comment .comment-notes {
    margin-bottom: 5px;
}

.post-comment .comment-form-author input,
.post-comment .comment-form-email input,
.post-comment .comment-form-url input,
.post-comment .comment-form-author input {
    height: 42px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dddddd;
    padding: 5px 10px;
}

.post-comment input:focus,
.post-comment textarea:focus {
    outline: none;
    border: 1px solid #2b86c8;
}

.post-comment .form-submit .submit {
    border: 1px solid #15639b;
    padding: 6px 15px;
    border-radius: 8px;
    color: #ffffff;
    background: #15639b;
}

.post-comment .form-submit .submit:hover {
    background: #2b86c8;
    border: 1px solid #2b86c8;
}

.post-comment .comment {
    list-style: none;
    padding: 15px 0 0px;
}

.comments-title {
    font-size: 24px;
}

.comment-form {
    border: 1px solid #eeeeee;
    border-radius: 6px;
    padding: 20px;
    margin-top: 15px;
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700;
}

.comment-meta a {
    font-size: 13px;
    margin: 5px 0 !important;
    display: block;
}

.comment-list {
    padding-left: 0 !important;
}

.post-comment {
    margin-top: 50px;
    border-top: 1px dashed #dddddd;
    padding-top: 20px;
}

.archive-page {
    padding: 60px 0 50px;
}

.archive-header,
.allpost-header {
    padding: 50px 0;
}

.archive-header h1,
.allpost-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
}

/* .archive-page dilepas: layout-nya kini grid (lihat blok "Daftar berita/artikel").
   Aturan ini dulu menimpa grid karena spesifisitasnya sama tapi posisinya lebih bawah. */
.home-page .post-item {
    width: 50%;
}

.pagination {
    margin: 30px auto 0;
    display: block;
}

.pagination .page-numbers {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 30px;
}

.pagination a.page-numbers {
    padding: 5px 13px;
    border: 1px solid;
    border-radius: 6px;
    color: #15639b;
}

.pagination a.page-numbers:hover {
    color: #ffffff;
    background: #15639b;
}

.page-numbers.current {
    padding: 5px 13px;
    border: 1px solid #15639b;
    border-radius: 6px;
    color: #ffffff;
    background: #15639b;
}

#breadcrumbs {
    padding: 0 0 15px;
}

#breadcrumbs a {
    color: #15639b;
    font-weight: 500;
}

.allpost-header #breadcrumbs a,
.allpost-header #breadcrumbs,
.archive-header #breadcrumbs a,
.archive-header #breadcrumbs {
    color: #ffffff;
}

.archive-header #breadcrumbs,
.allpost-header #breadcrumbs {
    padding: 10px 0 0;
}

.dashed {
    border: 1px dashed #dddddd;
}

.page-404 {
    padding: 70px 0;
    text-align: center;
    min-height: 55vh;
}

.page-404 .bi-emoji-frown {
    font-size: 50px;
    color: #15639b;
    margin-bottom: 30px;
}

.page-404 h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-default {
    padding: 50px 0;
    min-height: 50vh;
}

.page-fullwidth {
    padding: 50px 0;
    min-height: 55vh;
}

.page-default h1,
.page-fullwidth h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 15px;
    padding-bottom: 0px;
}

.page-default p,
.page-fullwidth p {
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
}

.page-default ul,
.page-fullwidth ul {
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
    padding-left: 20px;
}

.page-default ol,
.page-fullwidth ol {
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
    padding-left: 30px;
}

.contact-images {
    min-height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.contact-images:before {
    content: "";
    background: rgb(0 0 0 / 40%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
}

.page-contact {
    background: #ffffff;
}

.contact-content {
    margin: 0 auto;
    padding: 50px 0 70px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.contact-content h1 {
    font-size: 28px;
    font-weight: 700;
    padding-bottom: 20px;
    border-bottom: 1px dashed #dddddd;
}

.contact-content h5 {
    font-size: 18px;
    font-weight: 700;
}

.contact-info {
    list-style: none;
    margin: 0;
    padding: 20px;
    background: #fbfbfb;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    padding-left: 38px;
}

.contact-info li {
    text-indent: -11px;
    padding: 12px 0;
    border-bottom: 1px solid #dddddd;
}

.contact-info li:first-child {
    padding: 0 0 12px;
}

.contact-info li:last-child {
    padding: 12px 0 0;
    border-bottom: 0;
}

.contact-map iframe {
    margin-bottom: -5px;
    width: 100% !important;
    height: 300px !important;
}

.contact-map {
    border-top: 1px solid #dddddd;
}

.logo-sekolah {
    width: 150px;
    height: 150px;
    border: 7px solid #ffffff;
    border-radius: 100%;
    margin: -75px auto 0;
    display: block;
    position: relative;
    background: #ffffff;
}

.galeri-content {
    padding: 60px 0;
    margin: 0 auto;
}

.galeri-content h1 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}

.galeri-content p {
    font-size: 16px;
    line-height: 26px;
}

.galeri-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.galeri-video {
    padding: 50px 0 75px;
    background: #f8f8f8;
}

.galeri-video-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.galeri-video h5 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
}

.galeri-video-list .slick-list {
    margin-left: -24px;
}

.galeri-video-list .slick-dots li button:before {
    font-size: 15px;
}

.galeri-video-list .slick-dots {
    position: relative;
}

.small-single-slider-gallery {
    margin-top: 20px;
}

.small-single-slider-gallery img {
    border-radius: 8px;
    cursor: pointer;
}

.small-single-slider-gallery .slick-slide {
    margin-left: 12px !important;
}

.small-single-slider-gallery .slick-current {
    outline: 2px solid #ffc107;
    outline-offset: -10px;
}

.small-single-slider-gallery .slick-track {
    margin-left: 0;
    margin-right: 0;
}

.post-share {
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: flex-start;
}

/* Blok bagikan di akhir artikel. Sebelumnya menumpang di dalam `.post-meta`
   yang sudah membawa garis putus-putus atas dan bawah. Sebagai blok berdiri
   sendiri ia butuh pemisah dan jaraknya sendiri, supaya tidak menempel pada
   paragraf terakhir. */
.post-share-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed #dddddd;
}

.post-share .bi {
    font-size: 20px;
}

.post-share .bi-facebook {
    color: #1877F2;
}

.post-share .bi-whatsapp {
    color: #25D366;
}

.post-share .bi-twitter {
    color: #1DA1F2;
}

.post-share .bi-telagram {
    color: #0088cc;
}

.page-sambutan {
    padding: 50px 0;
}

.sambutan-images {
    min-height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-radius: 10px;
    margin-bottom: 30px;
}

.sambutan-images:before {
    content: "";
    background: rgb(0 0 0 / 40%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    border-radius: 10px;
}

.page-content-sambutan {
    padding: 0 25px;
}

.page-content-sambutan p,
.page-content-sambutan li {
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
}

.page-content-sambutan-top .foto-kepsek {
    width: 160px;
    height: 160px;
    border-radius: 100px;
    border: 4px solid #ffffff;
    position: relative;
    margin-top: -140px;
    margin-left: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.page-content-sambutan h1 {
    font-size: 24px;
    font-weight: 36;
    font-weight: 700;
    margin-bottom: 20px;
}

.page-content-sambutan h5 {
    font-size: 18px;
    font-weight: 26;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #dddddd;
}

.page-content-sambutan-top {
    margin-bottom: 30px;
}

.page-nocontent {
    padding: 0 20px;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    min-width: auto;
}

.dropdown-submenu {
    position: relative;
}

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

.menu-item-has-children .dropdown-submenu .dropdown-menu {
    top: 1.5px;
    left: 99%;
    margin-top: -1px;
}

.page-wakasek-walikelas {
    padding: 50px 0 70px;
}

.page-wakasek-walikelas h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.page-wakasek-walikelas p {
    font-size: 16px;
    line-height: 28px;
}

.personal-info {
    margin-top: 30px;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    column-gap: 25px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    align-items: flex-start;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(186, 186, 186, 0.3);
    -moz-box-shadow: 0px 0px 15px 1px rgba(186, 186, 186, 0.3);
    box-shadow: 0px 0px 15px 1px rgba(186, 186, 186, 0.3);
}

.personal-info h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.personal-info h6 {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.personal-foto {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    border: 1px solid #e7e7e7;
    background-size: cover;
    background-position: center;
}

.personal-detail {
    width: 70%;
}

.personal-detail p {
    font-size: 14px;
    line-height: 24px;
}

/* ============================================================
   Halaman Unit Kerja (Wakasek / Bimbingan Konseling) — modern.
   SENGAJA di-scope ke .page-wakasek-walikelas karena class
   .personal-* juga dipakai single-ekskul.php yang tidak ikut diubah.
   Aksen memakai warna utama situs: #15639b.
   ============================================================ */
.page-wakasek-walikelas .page-content>p {
    color: #5a6570;
    max-width: 820px;
}

.page-wakasek-walikelas .row {
    margin-top: 22px;
}

/* Kolom jadi flex supaya kartu sebaris punya tinggi sama */
.page-wakasek-walikelas .row>[class*="col-"] {
    display: flex;
    margin-bottom: 26px;
}

.page-wakasek-walikelas .personal-info {
    width: 100%;
    margin-top: 0;
    padding: 26px;
    column-gap: 22px;
    align-items: center;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.page-wakasek-walikelas .personal-info:hover {
    transform: translateY(-3px);
    border-color: #dbe6ef;
    box-shadow: 0 4px 10px rgba(16, 40, 64, .06), 0 18px 40px rgba(16, 40, 64, .10);
}

.page-wakasek-walikelas .personal-foto {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border: 0;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(21, 99, 155, .18);
}

.page-wakasek-walikelas .personal-detail {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.page-wakasek-walikelas .personal-detail h4 {
    font-size: 18px;
    font-weight: 700;
    color: #222b33;
    line-height: 1.35;
    margin: 0 0 8px;
}

/* Jabatan: dari teks uppercase polos -> pill beraksen */
.page-wakasek-walikelas .personal-detail h6 {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #15639b;
    background: rgba(21, 99, 155, .09);
    border-radius: 100px;
    padding: 5px 12px;
    line-height: 1.4;
    margin: 0 0 12px;
}

.page-wakasek-walikelas .personal-detail p {
    font-size: 14px;
    line-height: 1.75;
    color: #6C757D;
    margin: 0;
}

@media (max-width: 767px) {
    .page-wakasek-walikelas .personal-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        row-gap: 14px;
    }

    .page-wakasek-walikelas .personal-foto {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
    }

    .page-wakasek-walikelas .personal-detail {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-wakasek-walikelas .personal-info {
        transition: none;
    }

    .page-wakasek-walikelas .personal-info:hover {
        transform: none;
    }
}

/* ============================================================
   Ekskul, Galeri, Testimoni, Kontak — tampilan modern.

   Semua di-scope: .archive-ekskul-* juga dipakai slider beranda
   (slider/ekskul.php) -> pakai .archive-page. Single ekskul/galeri &
   halaman testimoni/kontak diberi class scope sendiri agar tidak bocor
   ke artikel blog / halaman wakasek yang berbagi .post-page & .personal-info.
   Background box ekskul (.archive-ekskul-item .wrapper) & warna judulnya
   dikunci opsi Redux -> JANGAN diset di sini.
   ============================================================ */

/* ---- Daftar Ekstrakurikuler ---- */
.archive-page .archive-ekskul-list {
    gap: 24px;
}

.archive-page .archive-ekskul-item {
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #edf0f3;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.archive-page .archive-ekskul-item:hover {
    transform: translateY(-4px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
}

.archive-page .archive-ekskul-image {
    transition: transform .45s ease;
}

.archive-page .archive-ekskul-item:hover .archive-ekskul-image {
    transform: scale(1.05);
}

.archive-page .archive-ekskul-content h5 {
    line-height: 1.45;
}

/* ---- Daftar Galeri ---- */
.archive-page .archive-galery-list {
    gap: 24px;
}

.archive-page .archive-galeri-item .wrapper {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #edf0f3;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.archive-page .archive-galeri-item:hover .wrapper {
    transform: translateY(-4px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
}

.archive-page .archive-galeri-image {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
    min-height: 0;
    transition: transform .45s ease;
}

.archive-page .archive-galeri-item:hover .archive-galeri-image {
    transform: scale(1.05);
}

.archive-page .archive-galeri-image:before {
    border-radius: 0;
    opacity: .32;
    transition: opacity .2s ease;
}

.archive-page .archive-galeri-item:hover .archive-galeri-image:before {
    opacity: .18;
}

.archive-page .archive-galeri-content {
    padding: 16px 18px 18px;
}

.archive-page .archive-galeri-content h5 {
    font-size: 15.5px;
    line-height: 1.45;
    margin: 0;
}

/* ---- Halaman detail Ekskul & Galeri ---- */
.ekskul-single .post-feature-image img,
.galeri-single .rounded-lg,
.galeri-single .single-slider-gallery img {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 40, 64, .12);
}

.ekskul-single .personal-info {
    border: 1px solid #edf0f3;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 8px 22px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ekskul-single .personal-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(16, 40, 64, .06), 0 16px 34px rgba(16, 40, 64, .09);
}

.ekskul-single .personal-foto {
    border: 0;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(21, 99, 155, .18);
}

.galeri-single .galeri-video-item {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(16, 40, 64, .10);
}

/* ---- Formulir Testimoni ---- */
.testimoni-page .form-testimoni {
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 12px 32px rgba(16, 40, 64, .06);
}

.testimoni-page .form-testimoni label,
.testimoni-page .form-group>.mb-1 {
    font-weight: 600;
    font-size: 13.5px;
    color: #1d2327;
}

.testimoni-page .form-control {
    border: 1px solid #dcdfe3;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.testimoni-page .form-control:focus {
    border-color: #15639b;
    box-shadow: 0 0 0 3px rgba(21, 99, 155, .14);
}

.testimoni-page .form-group {
    margin-bottom: 18px;
}

.testimoni-page .btn-primary {
    padding: 11px 26px;
    font-weight: 600;
    transition: filter .18s ease;
}

.testimoni-page .btn-primary:hover {
    filter: brightness(1.15);
}

.testimoni-page .alert-success {
    border: 0;
    border-radius: 12px;
    background: #eef7f0;
    color: #14672c;
}

/* ---- Halaman Kontak ---- */
.kontak-page .contact-info {
    border: 1px solid #edf0f3;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 12px 32px rgba(16, 40, 64, .06) !important;
}

.kontak-page .contact-info .bi {
    color: #15639b;
}

.kontak-page .contact-images img,
.kontak-page iframe {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 40, 64, .12);
}

@media (prefers-reduced-motion: reduce) {

    .archive-page .archive-ekskul-item,
    .archive-page .archive-ekskul-image,
    .archive-page .archive-galeri-item .wrapper,
    .archive-page .archive-galeri-image,
    .ekskul-single .personal-info {
        transition: none;
    }

    .archive-page .archive-ekskul-item:hover,
    .archive-page .archive-galeri-item:hover .wrapper,
    .ekskul-single .personal-info:hover {
        transform: none;
    }

    .archive-page .archive-ekskul-item:hover .archive-ekskul-image,
    .archive-page .archive-galeri-item:hover .archive-galeri-image {
        transform: none;
    }
}

/* ============================================================
   Header sticky saat scroll.
   .navbar-top (topbar telepon/email) SENGAJA tidak ikut menempel —
   hanya baris menu yang mengikuti, agar ruang layar tidak termakan.
   ============================================================ */
/* header.php membungkus topbar+header dalam satu <div> yang ditutup tepat setelah
   </header>, jadi tingginya cuma setinggi header (~152px). Div itu membatasi
   containing block sticky sehingga header lepas begitu digulir (terukur: header
   melorot ke -1409px pada scrollY 1500). `display:contents` melenyapkan kotaknya
   -> induk sticky jadi <body>. Menyasar pembungkus apa pun kelasnya: kosong di
   layout Full, .custom-container di layout Box.
   Style 2 tidak terpengaruh: header-nya <header class="s2-header">. */
body>div:has(> header.navbar) {
    display: contents;
}

/* Layout Box: pembungkus .custom-container di atas sudah dilenyapkan, jadi bentuk
   kotaknya (lebar 1180px + glow) dipindah ke kedua anaknya supaya tampilan tetap
   sama seperti sebelumnya — bedanya header kini bisa menempel sambil tetap berkotak.
   Latar putih tidak perlu diikutkan: .navbar-top & .navbar sudah punya sendiri dari
   Redux. Kelas .custom-container dipakai sebagai penanda layout Box; di layout Full
   pembungkusnya tak berkelas sehingga aturan ini tidak kena. */
body>div.custom-container:has(> header.navbar)>.navbar-top,
body>div.custom-container:has(> header.navbar)>header.navbar {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* Glow kotak. Dipecah per sisi, bukan `0 1px 18px` seperti .custom-container:
   header.navbar ber-z-index 1020 sehingga glow atasnya akan tercetak DI ATAS topbar
   dan memunculkan garis bayangan di sambungan. Spread -9px menahan tiap glow agar
   hanya keluar ke sisi yang dituju. */
body>div.custom-container:has(> header.navbar)>.navbar-top {
    box-shadow: -9px 0 18px -9px rgba(186, 186, 186, .3),
        9px 0 18px -9px rgba(186, 186, 186, .3),
        0 -9px 18px -9px rgba(186, 186, 186, .3);
}

body>div.custom-container:has(> header.navbar)>header.navbar {
    box-shadow: -9px 0 18px -9px rgba(186, 186, 186, .3),
        9px 0 18px -9px rgba(186, 186, 186, .3),
        0 9px 18px -9px rgba(186, 186, 186, .3);
}

header.navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #ffffff;
    transition: box-shadow .25s ease;
}

/* Bayangan hanya muncul setelah halaman digulir (class ditambah via JS).
   `body.sitesch-style-1` bukan hiasan: css/style-1-modern.css:53 memasang
   `.sitesch-style-1 header.navbar` (0,2,2) yang mengalahkan `header.navbar.is-stuck`
   (0,2,1), sehingga bayangan menempel dulu tidak pernah tampil di layout Full.
   Selektor ini (0,3,2) menang atasnya. Jangan diturunkan lagi. */
body.sitesch-style-1 header.navbar.is-stuck {
    box-shadow: 0 2px 6px rgba(16, 40, 64, .06), 0 8px 24px rgba(16, 40, 64, .08);
}

/* Layout Box saat menempel. Aturan ini WAJIB ada: selektor glow kotak di atas
   (0,3,4) mengalahkan aturan .is-stuck mana pun yang lebih longgar, jadi tanpa ini
   bayangan elevasi tidak akan pernah muncul di layout Box. Glow samping
   dipertahankan agar sisi kotak tidak putus, glow bawah diganti bayangan elevasi. */
body>div.custom-container:has(> header.navbar)>header.navbar.is-stuck {
    box-shadow: -9px 0 18px -9px rgba(186, 186, 186, .3),
        9px 0 18px -9px rgba(186, 186, 186, .3),
        0 2px 6px rgba(16, 40, 64, .06),
        0 8px 24px rgba(16, 40, 64, .08);
}

/* Jangan tertutup admin bar WordPress saat login. */
body.admin-bar header.navbar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar header.navbar {
        top: 46px;
    }
}

/* Dropdown menu harus di atas konten yang tergulir. */
header.navbar .dropdown-menu {
    z-index: 1030;
}

@media (prefers-reduced-motion: reduce) {
    header.navbar {
        transition: none;
    }
}

/* ============================================================
   Fasilitas — daftar (halaman & arsip) + halaman detail.

   SENGAJA di-scope ke .archive-page: `.fasilitas-list` juga dipakai
   slick slider di beranda (.home-fasilitas) yang TIDAK boleh berubah.
   Halaman Program Keahlian memakai markup yang sama, jadi ikut rapi.
   Catatan: background `.fasilitas-content` dan warna `h5` dikunci opsi
   Redux (`!important`) -> JANGAN diset di sini.
   ============================================================ */
.archive-page .fasilitas-list {
    row-gap: 24px;
}

.archive-page .fasilitas-item {
    text-decoration: none;
}

.archive-page .fasilitas-item .wrapper {
    border: 1px solid #edf0f3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.archive-page .fasilitas-item:hover .wrapper {
    transform: translateY(-4px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 22px 46px rgba(16, 40, 64, .12);
}

/* Foto: zoom halus saat hover (radius diambil alih .wrapper) */
.archive-page .fasilitas-image {
    border-radius: 0;
    transition: transform .45s ease;
}

.archive-page .fasilitas-item:hover .fasilitas-image {
    transform: scale(1.06);
}

.archive-page .fasilitas-content {
    border-radius: 0;
    padding: 26px 28px;
    gap: 4px;
}

.archive-page .fasilitas-content h5 {
    font-size: 19px;
    line-height: 1.4;
    margin: 0;
}

/* Warna TIDAK diset di sini: background box dipilih admin (Redux !important),
   jadi warna teks mengikuti opsi "Judul Fasilitas" dan hierarki dibuat lewat
   opacity supaya kontras tetap benar di latar terang MAUPUN gelap. */
.archive-page .fasilitas-content p {
    font-size: 13.5px;
    line-height: 1.65;
    margin: 8px 0 0;
    opacity: .82;
}

.fasilitas-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .95;
    transition: gap .2s ease;
}

.archive-page .fasilitas-item:hover .fasilitas-more {
    gap: 12px;
}

/* ---- Halaman detail fasilitas ---- */
.fasilitas-single .post-feature-image img {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 40, 64, .12);
}

.fasilitas-single .post-info h1 {
    letter-spacing: -.01em;
}

.fasilitas-single .post-content>p.my-4 {
    font-size: 15.5px;
    line-height: 1.8;
    color: #5a6570;
    max-width: 860px;
}

.fasilitas-single .galeri-fasilitas {
    background: #f7f9fa;
    border-top: 1px solid #eef1f4;
    padding: 46px 0 34px;
}

.fasilitas-single .galeri-fasilitas h5 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #15639b;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(21, 99, 155, .14);
}

.fasilitas-single .galeri-fasilitas figure {
    margin: 0;
}

.fasilitas-single .galeri-fasilitas figure>img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .05), 0 8px 22px rgba(16, 40, 64, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fasilitas-single .galeri-fasilitas figure:hover>img {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(16, 40, 64, .10), 0 20px 42px rgba(16, 40, 64, .14);
}

.fasilitas-single .galeri-fasilitas figure small {
    font-size: 12.5px;
    color: #6C757D;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .archive-page .fasilitas-content {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .archive-page .fasilitas-item .wrapper,
    .archive-page .fasilitas-image,
    .fasilitas-single .galeri-fasilitas figure>img {
        transition: none;
    }

    .archive-page .fasilitas-item:hover .wrapper,
    .archive-page .fasilitas-item:hover .fasilitas-image,
    .fasilitas-single .galeri-fasilitas figure:hover>img {
        transform: none;
    }
}

/* ============================================================
   Pusat Dokumen — daftar unduhan.
   Class dok-* baru, tidak dipakai template lain.
   ============================================================ */
.dok-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dok-item {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 8px 22px rgba(16, 40, 64, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dok-item:hover {
    transform: translateY(-3px);
    border-color: #dbe6ef;
    box-shadow: 0 6px 14px rgba(16, 40, 64, .07), 0 18px 40px rgba(16, 40, 64, .10);
}

.dok-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(21, 99, 155, .09);
}

.dok-ikon i {
    font-size: 26px;
    color: #15639b;
}

.dok-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dok-kat {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #15639b;
    background: rgba(21, 99, 155, .09);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 7px;
}

.dok-item h5 {
    font-size: 15.5px;
    font-weight: 600;
    color: #333333;
    line-height: 1.45;
    margin: 0;
}

.dok-ket {
    font-size: 13px;
    color: #6C757D;
    line-height: 1.55;
    margin: 5px 0 0;
}

.dok-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 9px;
}

.dok-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8a929a;
}

.dok-meta i {
    font-size: 12px;
}

.dok-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 100px;
    background: #15639b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .18s ease;
}

.dok-btn:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.18);
}

.dok-btn.is-off {
    background: #eef1f4;
    color: #a7aaad;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .dok-item {
        flex-wrap: wrap;
        gap: 14px;
    }

    .dok-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dok-item {
        transition: none;
    }

    .dok-item:hover {
        transform: none;
    }
}

/* ============================================================
   Kalender Akademik — daftar terstruktur per bulan.
   Class kal-* baru, tidak dipakai template lain.
   ============================================================ */
.kal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.kal-spacer {
    flex: 1 1 auto;
}

/* Toggle Daftar / Kalender */
.kal-viewbar {
    display: inline-flex;
    background: #eef1f4;
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}

.kal-viewbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6269;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.kal-viewbtn:hover {
    color: #15639b;
    text-decoration: none;
}

.kal-viewbtn.is-on {
    background: #ffffff;
    color: #15639b;
    box-shadow: 0 1px 3px rgba(16, 40, 64, .12);
}

.kal-printbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 100px;
    border: 1px solid #dcdfe3;
    background: #fff;
    color: #5b6269;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.kal-printbtn:hover {
    border-color: #15639b;
    color: #15639b;
}

/* ---- Grid bulanan ---- */
.kal-grid {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 10px 28px rgba(16, 40, 64, .05);
    margin-bottom: 26px;
}

.kal-grid-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
}

.kal-grid-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: #222b33;
    margin: 0;
    min-width: 190px;
    text-align: center;
}

.kal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 100px;
    border: 1px solid #e3e7eb;
    color: #15639b;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.kal-nav:hover {
    border-color: #15639b;
    background: rgba(21, 99, 155, .06);
    text-decoration: none;
}

.kal-nav.is-off {
    color: #c9ced3;
    border-color: #eef1f4;
    cursor: default;
}

.kal-grid-week,
.kal-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.kal-grid-week {
    margin-bottom: 6px;
}

.kal-grid-week span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a929a;
    padding: 4px 0;
}

/* Sengaja TIDAK memakai aspect-ratio 1/1: pada kontainer selebar ~1140px,
   sel akan jadi ~150x150px dan gridnya terlalu tinggi. Tinggi tetap saja. */
.kal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #5b6269;
    background: #f7f9fa;
}

.kal-day.is-kosong {
    background: transparent;
}

.kal-day.has-ev {
    color: #15639b;
    background: rgba(21, 99, 155, .12);
    box-shadow: inset 0 0 0 1px rgba(21, 99, 155, .22);
    cursor: help;
}

.kal-day.has-ev.is-libur {
    color: #b32d2e;
    background: rgba(214, 54, 56, .12);
    box-shadow: inset 0 0 0 1px rgba(214, 54, 56, .24);
}

.kal-day.has-ev.is-ujian {
    color: #8a5200;
    background: rgba(178, 106, 0, .14);
    box-shadow: inset 0 0 0 1px rgba(178, 106, 0, .26);
}

.kal-day.has-ev.is-semester {
    color: #14672c;
    background: rgba(26, 127, 55, .12);
    box-shadow: inset 0 0 0 1px rgba(26, 127, 55, .24);
}

/* Penanda bila satu hari punya lebih dari satu kegiatan */
.kal-day-n {
    position: absolute;
    top: 3px;
    right: 4px;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    opacity: .7;
}

.kal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f2f4;
}

.kal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #6C757D;
}

.kal-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: rgba(21, 99, 155, .5);
}

.kal-dot.is-libur {
    background: rgba(214, 54, 56, .55);
}

.kal-dot.is-ujian {
    background: rgba(178, 106, 0, .6);
}

.kal-dot.is-semester {
    background: rgba(26, 127, 55, .55);
}

/* ---- Versi cetak ---- */
.kal-print-title {
    display: none;
}

@media print {

    /* Sembunyikan chrome situs.
       Topbar telepon/email (.navbar-top) ada DI LUAR <header> -> harus disebut terpisah. */
    header,
    .navbar-top,
    footer,
    .sitesch-wa-btn,
    .archive-header,
    .kal-toolbar,
    .kal-grid-head .kal-nav,
    .kal-legend {
        display: none !important;
    }

    .kal-print-title {
        display: block;
        margin: 0 0 18px;
    }

    .kal-print-title h2 {
        font-size: 18pt;
        font-weight: 700;
        margin: 0 0 4px;
    }

    .kal-print-title p {
        font-size: 10pt;
        color: #555;
        margin: 0;
    }

    .kal-page,
    .archive-page {
        padding: 0 !important;
    }

    .kal-bulan-judul {
        font-size: 11pt;
        color: #000;
        border-bottom: 1px solid #999;
        page-break-after: avoid;
    }

    .kal-item,
    .kal-grid {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }

    .kal-item {
        padding: 8px 10px;
        border-radius: 0 !important;
        border-left-width: 3px !important;
    }

    .kal-list {
        gap: 6px;
    }

    .kal-tgl {
        background: none !important;
        min-height: 0;
    }

    .kal-jenis {
        background: none !important;
        border: 1px solid #999;
        padding: 2px 8px;
    }

    a[href]:after {
        content: none !important;
    }
}

@media (max-width: 575px) {

    .kal-viewbar,
    .kal-printbtn {
        flex: 0 0 auto;
    }

    .kal-grid {
        padding: 14px;
    }

    .kal-grid-days,
    .kal-grid-week {
        gap: 4px;
    }

    .kal-day {
        font-size: 12px;
        border-radius: 7px;
    }
}

.kal-bulan {
    margin-bottom: 34px;
}

.kal-bulan-judul {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #15639b;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(21, 99, 155, .14);
}

.kal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Agenda BERANDA: 2 kolom (Style 1 .home-agenda & Style 2 .s2-agenda).
   Halaman agenda penuh memakai .kal-list polos -> tetap 1 kolom. style.css
   dimuat di kedua style, jadi cukup satu aturan di sini. */
.home-agenda .kal-list,
.s2-agenda .kal-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 767px) {

    .home-agenda .kal-list,
    .s2-agenda .kal-list {
        grid-template-columns: 1fr;
    }
}

.kal-item {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-left: 4px solid #15639b;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(16, 40, 64, .04), 0 8px 22px rgba(16, 40, 64, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}

.kal-item:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 10px rgba(16, 40, 64, .06), 0 16px 34px rgba(16, 40, 64, .09);
}

/* Badge tanggal */
.kal-tgl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 62px;
    min-height: 54px;
    border-radius: 10px;
    background: rgba(21, 99, 155, .08);
    line-height: 1.15;
}

.kal-tgl b {
    font-size: 17px;
    font-weight: 700;
    color: #15639b;
}

.kal-tgl i {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6C757D;
}

/* Rentang lintas bulan butuh ruang lebih */
.kal-tgl.is-lintas {
    flex-basis: 108px;
}

.kal-tgl.is-lintas b {
    font-size: 13px;
}

.kal-tgl.is-lintas i {
    font-size: 11px;
}

.kal-body {
    flex: 1 1 auto;
    min-width: 0;
}

.kal-body h5 {
    font-size: 15.5px;
    font-weight: 600;
    color: #333333;
    line-height: 1.45;
    margin: 0;
}

.kal-ket {
    font-size: 13px;
    color: #6C757D;
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Pill jenis */
.kal-jenis {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 5px 12px;
    color: #15639b;
    background: rgba(21, 99, 155, .09);
}

/* Warna per jenis bawaan. Jenis tambahan admin memakai aksen default di atas. */
.kal-item.is-libur {
    border-left-color: #d63638;
}

.kal-item.is-libur .kal-tgl {
    background: rgba(214, 54, 56, .09);
}

.kal-item.is-libur .kal-tgl b {
    color: #b32d2e;
}

.kal-jenis.is-libur {
    color: #b32d2e;
    background: rgba(214, 54, 56, .10);
}

.kal-item.is-ujian {
    border-left-color: #b26a00;
}

.kal-item.is-ujian .kal-tgl {
    background: rgba(178, 106, 0, .10);
}

.kal-item.is-ujian .kal-tgl b {
    color: #8a5200;
}

.kal-jenis.is-ujian {
    color: #8a5200;
    background: rgba(178, 106, 0, .12);
}

.kal-item.is-semester {
    border-left-color: #1a7f37;
}

.kal-item.is-semester .kal-tgl {
    background: rgba(26, 127, 55, .10);
}

.kal-item.is-semester .kal-tgl b {
    color: #14672c;
}

.kal-jenis.is-semester {
    color: #14672c;
    background: rgba(26, 127, 55, .12);
}

/* Mobile: pakai Grid, bukan flex-wrap.
   Dengan flex-wrap, `.kal-body{flex:1 1 auto}` memakai basis max-content (judul
   panjang bisa 400px+) sehingga ia turun baris SEKALIGUS memaksa kartu meluber
   melebihi lebar layar; pill jenis lalu tak sejajar dgn apa pun.
   Grid + minmax(0,1fr) menahan lebar, dan area "jenis" otomatis sejajar di bawah
   judul berapa pun lebar badge tanggal (termasuk rentang lintas bulan). */
@media (max-width: 575px) {
    .kal-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "tgl  body"
            ".    jenis";
        gap: 10px 14px;
        align-items: start;
    }

    /* flex-basis DIABAIKAN pada grid item -> badge harus dijaga dgn min-width,
       kalau tidak ia mengkerut sampai selebar isinya saja. */
    .kal-tgl {
        grid-area: tgl;
        min-width: 62px;
    }

    .kal-tgl.is-lintas {
        min-width: 108px;
    }

    .kal-body {
        grid-area: body;
    }

    .kal-jenis {
        grid-area: jenis;
        justify-self: start;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kal-item {
        transition: none;
    }

    .kal-item:hover {
        transform: none;
    }
}

.info-tutup {
    background: #fcf5e6;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #e7e7e7;
    text-align: center;
    max-width: 575px;
    margin: 30px auto 30px;
}

.info-tutup p:last-child {
    margin-bottom: 0;
}

.wrapper-guru {
    padding: 40px 0;
}

.cover-guru,
.cover-tendik,
.cover-guru-image {
    width: 100%;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 40, 64, .10);
}

/* Cover bergambar perlu ruang; cover polos (blok warna) tidak. */
.cover-guru-image {
    height: 240px;
}

.cover-guru,
.cover-tendik {
    height: 180px;
    /* Fallback warna bila CSS hasil Redux belum termuat. Opsi "Cover Profil
       Guru/Tendik" tetap menang karena Redux memakai !important. */
    background-color: #15639b;
}

/* Lapisan kedalaman pada cover.
   Warna cover diatur dari Pengaturan Web (Redux meng-output `background ... !important`
   ke .cover-guru/.cover-tendik), jadi overlay HARUS di pseudo-element agar tidak tertimpa. */
.cover-guru::after,
.cover-tendik::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .22));
    pointer-events: none;
}

.cover-guru-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35));
    pointer-events: none;
}

.single-foto-guru {
    height: 150px;
    width: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100px;
    border: 5px solid #ffffff;
    box-shadow: 0 10px 26px rgba(16, 40, 64, .18);
    position: relative;
}

.main-single-guru {
    margin: -80px 25px 0;
    position: relative;
}

.main-single-guru h1 {
    font-size: 26px;
    font-weight: 700;
    color: #222b33;
    letter-spacing: -.01em;
    margin: 22px 0 12px;
}

/* Mata pelajaran / tugas-fungsi: dari teks polos jadi pill beraksen */
.guru-mapel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.guru-mapel-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #15639b;
    background: rgba(21, 99, 155, .09);
    border-radius: 100px;
    padding: 6px 14px;
    line-height: 1.4;
}

.guru-mapel-item i {
    font-size: 13px;
}

.main-single-guru p,
.main-single-guru li {
    font-size: 15px;
    line-height: 26px;
    color: #333333;
    margin-bottom: 10px;
}

.main-single-guru h3,
.main-single-guru h4,
.main-single-guru h5,
.main-single-guru h6 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.main-single-guru ul,
.main-single-guru ol {
    padding-left: 30px;
}

.sosial-media-guru {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.sosial-media-guru span {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-right: 10px;
}

.sosial-media-guru .bi {
    font-size: 18px;
}

.sosial-media-guru .bi-whatsapp {
    color: #25D366;
}

.sosial-media-guru .bi-instagram {
    color: #C13584;
}

.sosial-media-guru .bi-facebook {
    color: #1877F2;
}

.sosial-media-guru .bi-tiktok {
    color: #ff0050;
}

.sosial-media-guru .bi-youtube {
    color: #FF0000;
}

.sosial-media-guru .bi-linkedin {
    color: #0077B5;
}

.sosial-media-guru .bi-twitter {
    color: #1DA1F2;
}

/* Baris sosial media: dari garis putus-putus jadi tombol bulat.
   Warna ikon per-jaringan (.bi-whatsapp dst di atas) tetap menang
   karena spesifisitasnya lebih tinggi dari `.sosial-media-guru a`. */
.sosial-media-guru {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    border: 0;
    padding: 0;
    margin-bottom: 26px;
}

.sosial-media-guru span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a929a;
    margin-right: 4px;
}

.sosial-media-guru a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 1px solid #e3e7eb;
    background: #ffffff;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sosial-media-guru a:hover {
    transform: translateY(-2px);
    border-color: #d3dae1;
    box-shadow: 0 6px 16px rgba(16, 40, 64, .12);
}

.sosial-media-guru .bi {
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .sosial-media-guru a {
        transition: none;
    }

    .sosial-media-guru a:hover {
        transform: none;
    }
}

.page-content iframe,
.post-content iframe {
    width: 100%;
    height: 500px;
}

.post-feature-image {
    margin-bottom: 30px;
}

.comment-form-cookies-consent {
    font-size: 14px !important;
}

.instagram-media {
    margin: 0 auto 12px !important;
}

.widget-statistik-website {
    border: 1px dashed;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

.widget-statistik-website p {
    border-bottom: 1px dashed;
    padding: 5px 0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
}

.widget-statistik-website p:last-child {
    border-bottom: none !important;
}

.widget-statistik-website p span {
    float: right !important;
}

.widget-statistik-website p .bi {
    margin-right: 7px;
    opacity: .8;
}

.info-kelulusan {
    max-width: 575px;
    margin: 30px auto 10px;
    padding: 40px 30px;
    border: 2px solid #e7e7e7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.info-kelulusan input::-webkit-outer-spin-button,
.info-kelulusan input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
}

.info-kelulusan input[type=number] {
    -moz-appearance: textfield;
    text-align: center;
    padding: 6px 10px;
    height: 45px;
    max-width: 400px;
    margin: 0 auto;
}

.form-testimoni {
    max-width: 767px;
    margin: 10px auto 10px;
    padding: 40px 30px 30px;
    border: 2px solid #e7e7e7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

#ytplayer {
    border: none;
}

.filter-kelulusan {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #f5f5f5;
    padding: 40px;
    max-width: 575px;
    margin: 40px auto 20px;
    text-align: center;
}

.filter-kelulusan h1 {
    font-size: 22px;
    line-height: 32px;
}

.filter-kelulusan label {
    font-size: 16px;
}

@media(max-width:767px) {
    .filter-kelulusan {
        padding: 40px 25px;
        margin: 20px auto 20px;
    }

    .filter-kelulusan h1 {
        font-size: 18px !important;
        line-height: 28px !important;
    }
}


.filter-kelulusan input::-webkit-outer-spin-button,
.filter-kelulusan input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-kelulusan input[type=number] {
    -moz-appearance: textfield;
    text-align: center;
    font-size: 18px;
}

.filter-kelulusan #countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.filter-kelulusan #countdown .item-count {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    border: 1px solid #333333;
    padding: 15px;
    border-radius: 6px;
}

.filter-kelulusan #countdown .item-count span {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1;
}

@media(max-width:1365px) {
    .home-slider .item-slide {
        min-height: 90vh;
    }
}

@media(max-width:991px) {

    .navbar-light .navbar-toggler-icon {
        background-image: url('img/toggle-bars.svg');
        height: 21px;
        vertical-align: 0px;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url('img/toggle-close.svg');
        height: 21px;
        vertical-align: 0px;
    }

    .menu-item-has-children .dropdown-toggle[aria-expanded="true"]::after {
        content: '\F286';
    }

    .dropdown-toggle.submenu-level3::after {
        content: '\F286' !important;
    }

    .dropdown-header-menu .menu-item-has-children .dropdown-toggle[aria-expanded="true"]::after {
        content: '\F286';
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0px;
    }

    .header-contact {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-right: 1px solid #eeeeee;
        padding-right: 15px;
        position: absolute;
        right: 60px;
        top: 22px;
    }

    .navbar {
        padding: 0;
        background: #ffffff !important;
    }

    .navbar-nav {
        background: #f5f7fa;
        padding: 10px 20px;
    }

    .navbar-ppdb {
        width: 100%;
    }

    .navbar-light .navbar-brand {
        padding: 18px 0px 18px 20px;
        max-width: 78%;
    }

    .navbar-light .navbar-toggler {
        border: none;
        padding-right: 20px;
    }

    .menu-item-has-children .dropdown-toggle::after {
        position: absolute;
        right: 7px;
    }

    .dropdown-header-menu .menu-item-has-children .dropdown-toggle::after {
        position: absolute;
        right: 7px;
        top: 10px;
        font-weight: 600;
    }


    .dropdown-header-menu:before {
        display: none;
    }

    .dropdown-header-menu.show {
        box-shadow: none !important;
        border-bottom: none;
        background: transparent;
        list-style: disc;
        padding-left: 20px;
    }

    .dropdown-header-menu .dropdown-item {
        padding: 10px 0;
    }

    .dropdown-menu {
        padding: .5rem 0;
        margin: .125rem 0 0;
    }

    li>ul>li>ul>li>.dropdown-item {
        padding: .25rem 3rem;
    }

    .single-foto-guru {
        margin-left: 20px;
    }

    .archive-program-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
}

@media(max-width:767px) {
    .navbar-logo {
        width: 95%;
        height: auto !important;
    }

    .home-slider .item-slide h3 {
        font-size: 29px;
        line-height: 40px;
    }

    .home-slider .item-slide p {
        font-size: 14px;
        line-height: 24px;
    }

    /* Slideshow beranda Style 1 di layar kecil: tampilkan gambar UTUH.

       Sebelumnya gambar terpotong parah karena `background-size: cover` pada wadah
       setinggi 85-90vh. Di layar sempit wadahnya berbentuk potret sedangkan gambar
       slideshow berbentuk lanskap, sehingga yang tersisa hanya pita tengahnya saja.

       Tinggi area gambar kini ditentukan penyangga ::before ber-aspect-ratio
       1200/845 (ukuran `imgsize_slider` di includes/theme-setup.php), lalu judul
       dan tombolnya mengalir DI BAWAH gambar. Dengan begitu tidak ada bagian gambar
       yang terpotong, sekaligus teks tidak berdesakan di atas gambar yang pada
       lebar 414px hanya setinggi sekitar 290px.

       Sengaja TIDAK memakai `padding-top` berpersentase: pada slick, `.item-slide`
       adalah juga `.slick-slide`, sehingga blok penampungnya adalah `.slick-track`
       yang selebar SEMUA slide (mis. 2898px untuk 7 slide). Persentase padding
       mengacu ke lebar penampung itu, jadi hasilnya ribuan piksel, bukan ~291px.
       `aspect-ratio` pada anak selebar 100% aman dari jebakan tersebut.

       `contain` dipasang sebagai jaring pengaman: bila berkas sumber lebih kecil
       dari 1200x845, WordPress tidak memotongnya sehingga rasionya bisa berbeda —
       gambar tetap muat utuh, hanya menyisakan sedikit ruang kosong. */
    .sitesch-style-1 .home-slider .item-slide {
        min-height: 0;
        padding-bottom: 28px;
        justify-content: flex-start;
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
        background-color: #05385d;
    }

    .sitesch-style-1 .home-slider .item-slide::before {
        content: "";
        display: block;
        width: 100%;
        flex: none;
        aspect-ratio: 1200 / 845;
    }

    /* Lapisan gelap ini gunanya mengontraskan teks yang menumpuk di atas gambar.
       Teks sekarang berada di bawah gambar, jadi lapisan itu hanya akan
       meredupkan gambarnya tanpa manfaat. */
    .sitesch-style-1 .home-slider .item-slide:after {
        display: none;
    }

    /* Jarak napas antara tepi bawah gambar dan teksnya. */
    .sitesch-style-1 .home-slider .item-slide>.container {
        padding-top: 20px;
    }

    /* Teks slideshow tidak ikut dianimasikan AOS di layar kecil — ia bergeser
       menyatu dengan gambarnya (lihat penjelasan di js/custom.js). Aturan ini
       jaring pengamannya: bila AOS terlanjur menandai elemen sebagai belum
       tampil, teksnya tetap terlihat dan tidak pernah menghilang di tengah
       pergantian slide. */
    .sitesch-style-1 .home-slider .item-slide [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Blok sambutan + statistik ditarik naik 200px (lihat `.home-intro .wrapper`)
       supaya menumpuk di atas slideshow yang setinggi layar. Begitu slideshow
       hanya setinggi gambarnya, tarikan itu justru menutupi judul dan deskripsi
       slide. Di layar kecil tumpukan itu ditiadakan dan blok sambutan mengalir
       normal di bawah slideshow. */
    .sitesch-style-1 .home-intro .wrapper {
        margin-top: 20px;
    }

    /* Panah navigasi semula bertumpuk di atas gambar yang tinggi, karena itu
       warnanya putih. Sekarang ia duduk di bawah slideshow dengan latar putih,
       sehingga harus diwarnai ulang agar tidak lenyap. Memakai warna aksen tema
       bila tersedia, jadi ikut berubah saat sekolah mengganti warna tombol. */
    .sitesch-style-1 .home-slider-nav {
        margin: 4px 0 12px;
        color: var(--s1-primary, #15639b);
    }

    .sitesch-style-1 .home-slider-next:hover,
    .sitesch-style-1 .home-slider-prev:hover {
        color: var(--s1-primary, #15639b);
    }

    /* Galeri: 2 kolom di layar kecil.

       Aturan dasarnya `repeat(3, 1fr)` tanpa penyesuaian responsif, sehingga pada
       lebar 414px tiap kolom hanya sekitar 110px — foto jadi terlalu kecil untuk
       dikenali. Dua kolom memberi sekitar 180px per foto.

       Jarak antar-kartu ikut dirapatkan dari 24px ke 14px supaya lebar fotonya
       bertambah. Selektor ditulis dua-duanya: yang ber-`.archive-page` diperlukan
       untuk mengalahkan aturan `gap` di blok `.archive-page .archive-galery-list`,
       dan yang polos menjaga grid ini tetap 2 kolom bila kelak dipakai di luar
       pembungkus itu. Berlaku untuk halaman Galeri maupun arsip galeri. */
    .archive-page .archive-galery-list,
    .archive-galery-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .home-testimoni h3 {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
    }

    .home-testimoni p {
        font-size: 14px;
        line-height: 22px;
    }

    .home-intro .intro-content {
        padding: 20px;
    }

    .body-sambutan {
        align-items: center;
        column-gap: 24px;
        flex-direction: column;
        justify-content: center;
        row-gap: 30px;
    }

    .content-sambutan {
        text-align: center;
        width: 100%;
    }

    .statistik {
        column-gap: 10px !important;
    }

    .statistik .total {
        font-size: 20px;
    }

    .statistik .title {
        font-size: 12px;
        letter-spacing: 1.3px;
    }

    .post-item {
        width: 50%;
    }

    .agenda-header h3,
    .post-header h3,
    .tendik-header h3,
    .ekskul-header h3,
    .home-fasilitas h3,
    .home-program h3,
    .guru-header h3 {
        font-size: 20px;
        line-height: 32px;
        font-weight: 700;
    }

    .agenda-header p,
    .post-header p,
    .tendik-header p,
    .ekskul-header p,
    .home-fasilitas p,
    .home-program p,
    .guru-header p {
        font-size: 14px;
        line-height: 22px;
    }

    .home-guru,
    .home-guru,
    .home-post,
    .home-tendik,
    .home-ekskul,
    .home-testimoni {
        padding: 40px 0;
    }

    .home-agenda {
        padding: 40px 0 0;
    }

    .fasilitas-content h5 {
        font-size: 22px;
        line-height: 32px;
    }

    .post-page h1 {
        font-size: 24px;
        line-height: 34px;
    }

    .page-default {
        padding: 40px 0;
    }

    .page-fullwidth {
        padding: 40px 0;
    }

    .page-default h1,
    .page-fullwidth h1 {
        font-size: 24px;
        line-height: 34px;
    }

    .archive-guru-list,
    .archive-tendik-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-images {
        min-height: 250px;
    }

    .small-single-slider-gallery .slick-list {
        margin-left: 0 !important;
    }

    .galeri-content {
        padding: 40px 0;
    }

    .galeri-video-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .page-content-sambutan {
        padding: 0;
    }

    .page-content-sambutan-top .foto-kepsek {
        margin-left: 25px;
    }

    .main-single-guru {
        margin: -65px auto 0;
    }

    .single-foto-guru {
        width: 120px;
        height: 120px;
    }
}

@media(max-width:575px) {
    .post-item {
        width: 50%;
        padding-left: 18px;
    }

    .post-item-content p {
        display: none;
    }

    .post-item-content h4 {
        font-size: 14px;
        line-height: 22px;
    }

    .post-item-content a {
        font-weight: 500;
    }

    .post-list {
        row-gap: 20px;
        margin-left: -16px;
        margin-right: 5px;
    }

    .home-fasilitas {
        padding: 0 0 40px;
    }

    .fasilitas-item .wrapper {
        flex-direction: column;
        height: 100%;
    }

    .fasilitas-image,
    .fasilitas-content {
        width: 100%;
    }

    .fasilitas-image {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        min-height: 250px;
    }

    .fasilitas-content {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 30px;
    }

    .program-content {
        border-top-left-radius: 10px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 0px;
        padding: 30px;
    }

    .fasilitas-list-nav {
        top: -5px;
    }

    .program-list-nav {
        top: -5px;
    }

    .post-meta {
        flex-direction: column;
    }

    /* .archive-page dilepas: di HP kartu berita kini 1 kolom penuh (via grid),
       sebelumnya dipaksa 50% sehingga sangat sempit. */
    .home-page .post-item {
        width: 50%;
    }

    .archive-page {
        padding: 30px 0 20px;
    }

    .archive-guru-list,
    .archive-tendik-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .archive-agenda-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }

    .archive-ekskul-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .page-sambutan {
        padding: 30px 0 40px;
    }

    .personal-foto {
        width: 80px;
        height: 80px;
    }

    .personal-detail {
        width: 70%;
    }

    .personal-info {
        padding: 20px;
    }

    .form-testimoni,
    .info-kelulusan {
        padding: 30px 20px;
    }
}

@media(min-width:992px) {
    .ppdb-menu-mobile {
        display: none !important;
    }

    .ppdb_menu_desktop {
        display: flex !important;
    }
}

@media(max-width:991px) {
    .ppdb-menu-mobile {
        display: list-item !important;
    }

    .ppdb_menu_desktop {
        display: none !important;
    }

    .ppdb-menu-mobile .nav-ppdb-link {
        background: #15639b;
        text-align: center;
        border-radius: 4px;
        margin-top: 15px;
        display: block;
        padding: 8px;
    }

    .ppdb-menu-mobile .nav-ppdb-link {
        color: #ffffff !important;
    }
}