/* Override warna utama template Eduka -> CSS variable dari CMS */
.theme-btn,
.hero-btn .theme-btn,
.cta-area,
.counter-area.penabur-counter,
.section-title h2::after,
.preloader .loader span {
    background-color: var(--penabur-primary) !important;
}
.theme-btn { color: var(--penabur-btn-text) !important; }
a:hover,
.top-link:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.footer-widget ul li a:hover,
.section-title h6,
.counter-content h6,
.about-item-icon i {
    color: var(--penabur-primary) !important;
}

/* Tagline hero.
   Sebelumnya .hero-sub-title ikut grup di atas sehingga teksnya dipaksa merah,
   sementara garis bawah bawaan template tetap kuning — dua warna yang
   bertabrakan, dan merah di atas latar biru gelap kontrasnya rendah.
   Teks dijadikan putih dengan kuning sebagai satu-satunya aksen. */
.hero-single .hero-content .hero-sub-title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.5;
    padding-bottom: 10px;
    border-bottom: none;
}
/* Garis bawah dipindah ke ::after dan dipendekkan 3px di kanan, karena
   letter-spacing selalu menyisakan jarak setelah karakter terakhir sehingga
   border biasa tampak menjulur melewati teks. */
.hero-single .hero-content .hero-sub-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 3px;
    bottom: 0;
    height: 3px;
    background: var(--penabur-yellow);
}
@media (max-width: 767px) {
    .hero-single .hero-content .hero-sub-title {
        font-size: 14px;
        letter-spacing: 2px;
        padding-bottom: 8px;
    }
    .hero-single .hero-content .hero-sub-title::after {
        right: 2px;
        height: 2px;
    }
}
.theme-btn.btn-2,
.secondary-bg { background-color: var(--penabur-secondary) !important; }

/* Filter kategori galeri */
.gallery-filter-wrap { margin-bottom: 2rem; }
.filter-btn {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.filter-btn li {
    cursor: pointer;
    padding: 8px 22px;
    border-radius: 30px;
    border: 1px solid var(--penabur-primary);
    color: var(--penabur-primary);
    font-weight: 500;
    transition: all .3s ease;
}
.filter-btn li:hover,
.filter-btn li.active {
    background-color: var(--penabur-primary);
    color: var(--penabur-btn-text);
}

/* Normalisasi sudut membulat.
   Template Eduka memakai border-radius asimetris (mis. 50px 50px 50px 0) yang
   menyisakan satu sudut siku pada kartu, gambar, dan kotak ikon. Semua
   diseragamkan jadi sudut membulat biasa. Tombol (.theme-btn dan tombol unduh)
   sengaja tidak diubah sesuai permintaan. */
.footer-social li a i,
.footer-contact li i {
    border-radius: 10px;
}

.about-img .img-1,
.about-img .img-3,
.counter-box .icon,
.counter-box .icon::before,
.about-experience,
.course-item,
.course-tag,
.course-img img,
.course-img::before,
.course-price,
.feature-item,
.portfolio-img img,
.portfolio-info,
.gallery-img img,
.gallery-content::before,
.choose-item,
.choose-item-icon,
.testimonial-item,
.testimonial-quote-icon,
.cta-content::before,
.cta-content::after,
.event-item,
.event-img,
.event-img img,
.enroll-form,
.enroll-form-header,
.department-item,
.blog-item,
.blog-item-img,
.blog-item-img img,
.blog-date,
.blockqoute,
.blog-author,
.blog-author-img img,
.contact-info,
.team-item,
.team-img img,
.team-social a,
.team-area2 .team-img img,
.team-single-img img,
.team-details,
.video-content,
.video-content::before,
.pricing-item,
.login-form,
.countdown-single,
.how-apply .content-img::before,
.how-apply .content-img img,
.campus-tour .content-img::before,
.campus-tour .content-img img,
.campus-life .content-img::before,
.campus-life .content-img img,
.notice-item,
.activity .content-img::before,
.activity .content-img img,
.facility-item,
.facility-img img,
.research-item,
.research-img img,
.club-item,
.club-img img,
.alumni .content-img::before,
.alumni .content-img img,
.home-3 .counter-box .icon,
.home-3 .counter-box .icon::before {
    border-radius: 20px;
}

/* Caption galeri menempel di dasar gambar, jadi sudutnya mengikuti sudut bawah
   gambar (bukan membulat di keempat sisi). */
.gallery-caption {
    border-radius: 0 0 20px 20px;
}

/* Section CTA "Join the ... Family".

   Sebelumnya panelnya kuning pekat penuh dengan bingkai double putih 8px dan
   tombol merah — kombinasi yang terbaca seperti spanduk promo, bukan lembaga
   pendidikan. Kuning jenuh seluas itu juga melelahkan mata dan menekan
   keterbacaan teks putih di atasnya.

   Arah baru: panel biru institusional (warna identitas utama), kuning dipakai
   sebagai aksen tunggal pada tombol dan garis judul, plus bingkai tipis di
   dalam panel yang memberi kesan formal seperti piagam. */
.cta-area {
    padding: 90px 0;
}
.cta-area::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 26, 51, .55) 0%, rgba(11, 26, 51, .15) 60%, rgba(11, 26, 51, 0) 100%);
    z-index: 0;
}
.cta-area .container {
    position: relative;
    z-index: 1;
}

/* margin-top negatif membuat panel menjulur ke atas section, sehingga muncul
   pias putih di sisi kirinya. */
.cta-content {
    margin-top: 0;
    padding: 54px 48px;
}
.cta-content::before {
    background: linear-gradient(135deg, var(--penabur-blue) 0%, var(--penabur-blue-dark) 100%);
    box-shadow: 0 24px 50px rgba(11, 26, 51, .3);
}
/* Bingkai double 8px diganti garis rambut tunggal yang jauh lebih tenang. */
.cta-content::after {
    left: 14px;
    top: 14px;
    right: 14px;
    bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 12px;
}
.cta-content h1 {
    font-size: 36px;
    line-height: 1.25;
}
/* Garis aksen kuning di atas judul, mengikuti bahasa visual section lain. */
.cta-content h1::before {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    border-radius: 4px;
    background: var(--penabur-yellow);
    margin-bottom: 20px;
}
.cta-content p {
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    line-height: 1.8;
    max-width: 52ch;
}

/* Tombol merah di atas kuning saling bergetar. Kuning dengan teks gelap
   kontrasnya jauh lebih baik di atas panel biru. */
.cta-btn .theme-btn {
    background-color: var(--penabur-yellow) !important;
    color: var(--color-dark) !important;
}
.cta-btn .theme-btn::before,
.cta-btn .theme-btn::after {
    background: #fff;
}

@media (max-width: 991px) {
    .cta-area { padding: 60px 0; }
    .cta-content { padding: 40px 28px; }
    .cta-content h1 { font-size: 28px; }
    .cta-content::after { left: 10px; top: 10px; right: 10px; bottom: 10px; }
}

/* Tombol mengambang: WhatsApp dan scroll-up.

   Ukurannya berbeda (58px vs 50px) dengan ikon 28px vs 20px, sehingga sebagai
   satu tumpukan terlihat timpang. Selain itu pada 768-1199px template menaikkan
   #scroll-top ke bottom:100px, yang justru bertumpuk dengan .wa-float (84-142px).

   Keduanya diseragamkan lewat variabel, lalu ditumpuk dengan jarak tetap:
   WhatsApp permanen di bawah, scroll-up muncul di atasnya saat menggulir. */
:root {
    --float-btn-size: 54px;
    --float-btn-right: 26px;
    --float-btn-gap: 14px;
}
.wa-float,
#scroll-top {
    width: var(--float-btn-size);
    height: var(--float-btn-size);
    right: var(--float-btn-right);
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
    z-index: 999;
}
.wa-float {
    bottom: 20px;
    font-size: 26px;
}
#scroll-top {
    font-size: 21px;
    /* Posisi tersembunyi sedikit di bawah posisi aktif agar tetap ada efek naik. */
    bottom: calc(20px + var(--float-btn-size) + var(--float-btn-gap) - 28px);
    box-shadow: 0 8px 24px rgba(245, 184, 0, .4);
}
#scroll-top.active {
    bottom: calc(20px + var(--float-btn-size) + var(--float-btn-gap));
}
/* Menimpa aturan bawaan template (bottom:100px) yang membuat kedua tombol
   bertumpuk pada lebar tablet. */
@media (min-width: 768px) and (max-width: 1199px) {
    #scroll-top.active {
        bottom: calc(20px + var(--float-btn-size) + var(--float-btn-gap));
    }
}

/* Menu mobile.
   Template membatasi .navbar-collapse pada max-height 220px, sehingga seluruh
   menu (6 item plus submenu) dijejalkan ke kotak gulir sempit dan hanya
   sekitar tiga item terlihat sekaligus. Selain itu .nav-right disembunyikan,
   jadi tombol pendaftaran hilang sama sekali di ponsel. */
@media (max-width: 991px) {
    .navbar-collapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 20px 18px;
        border-top: 1px solid #e9edf3;
        box-shadow: 0 16px 26px rgba(11, 26, 51, .12);
    }

    /* Tiap item diberi pemisah dan tinggi sentuh minimal 50px. */
    .navbar .navbar-nav .nav-item {
        border-bottom: 1px solid #eef1f6;
    }
    .navbar .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    .navbar .nav-item .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        padding: 13px 2px;
        font-size: 16px;
    }
    .navbar .nav-item .nav-link.active {
        color: var(--penabur-primary) !important;
    }
    /* float:right membuat panah keluar dari baris flex; margin auto lebih tepat. */
    .navbar .dropdown-toggle::after {
        float: none;
        margin-left: auto;
    }

    /* Submenu jadi daftar bertakuk yang mendorong item lain ke bawah, bukan
       kartu mengambang bergaris dan berbayang seperti tampilan desktop. */
    .navbar .nav-item .dropdown-menu {
        position: static;
        border: none;
        border-left: 2px solid var(--penabur-yellow);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin: 0 0 10px;
        padding: 0 0 0 14px;
    }
    .navbar .nav-item .dropdown-menu .dropdown-item {
        padding: 11px 2px;
        font-size: 15px;
        background: transparent;
        white-space: normal;
    }
    .navbar .nav-item .dropdown-menu .dropdown-item:hover,
    .navbar .nav-item .dropdown-menu .dropdown-item:focus {
        background: transparent;
        color: var(--penabur-primary);
    }

    /* Tombol pendaftaran dimunculkan kembali di dalam menu. Ikon cari di dalam
       .nav-right disembunyikan karena sudah ada di baris header. */
    .nav-right {
        display: block;
        margin: 16px 0 4px;
    }
    .nav-right .search-btn {
        display: none;
    }
    .nav-right .nav-right-btn {
        margin-top: 0 !important;
    }
    .nav-right .nav-right-btn .theme-btn {
        display: block;
        text-align: center;
    }
}

/* Jarak banner judul halaman dan section di bawahnya.

   Pada lebar <= 991px template mengubah .navbar jadi position:fixed, sehingga
   navbar keluar dari alur dokumen dan menimpa bagian atas .page-banner. Padding
   atas banner (80px di mobile) hampir seluruhnya tertutup navbar (~70px),
   membuat judul menempel ke atas. Komponen .site-breadcrumb bawaan template
   sudah mengompensasi hal ini (170px -> 230px), tapi .page-banner belum.

   Sekaligus .py-120 diturunkan di layar kecil; padding 120px atas-bawah membuat
   jarak dari banner ke konten terasa terlalu jauh di mobile. */
@media (max-width: 991px) {
    .page-banner { padding: 150px 0 70px; }
    .py-120 { padding: 70px 0; }
    .pt-120 { padding-top: 70px; }
}
@media (max-width: 767px) {
    .page-banner { padding: 135px 0 60px; }
    .py-120 { padding: 60px 0; }
    .pt-120 { padding-top: 60px; }
}
@media (max-width: 575px) {
    .page-banner { padding: 125px 0 55px; }
    .py-120 { padding: 50px 0; }
    .pt-120 { padding-top: 50px; }
}

/* Popup pencarian: sebelumnya hanya sebuah kolom isian tanpa keterangan, jadi
   pengunjung tidak tahu apa yang bisa dicari. Sekarang diberi judul, penjelasan
   cakupan, dan contoh kata kunci. */
/* Template menaruh form-nya position:absolute di tengah layar, sehingga judul
   dan keterangan akan terlempar ke atas. Popup dijadikan flex container dan
   form dikembalikan ke aliran normal supaya seluruh blok ikut terpusat. */
.search-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    background-color: rgba(11, 26, 51, .94);
    transition: transform 350ms ease;
}
.search-popup form,
.search-active .search-popup form {
    position: static;
    max-width: 100%;
    margin: 0;
    transform: none;
    transition: none;
}

/* Animasi bawaan sangat lambat (1500ms dengan jeda 1200ms) sehingga terasa
   macet saat ikon dsiklik. Diganti fade singkat. */
.search-popup-inner {
    width: min(640px, calc(100% - 40px));
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 260ms ease 100ms, transform 260ms ease 100ms;
}
.search-active .search-popup-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Tombol tutup dipindah ke pojok kanan atas; posisi bawaannya (tengah layar,
   margin-top -200px) akan bertabrakan dengan judul dan keterangan. */
.search-popup .close-search,
.search-active .search-popup .close-search {
    top: 28px;
    left: auto;
    right: 28px;
    margin: 0;
    border-radius: 12px;
    transition-delay: 100ms;
}
.search-popup-title {
    color: #fff;
    font-size: 30px;
    margin-bottom: 12px;
}
.search-popup-desc {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 26px;
    line-height: 1.7;
}
.search-popup-hint {
    margin-top: 18px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}
.search-popup-hint a {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 30px;
    padding: 4px 14px;
    margin: 4px 3px 0;
    font-size: 13px;
    transition: var(--transition);
}
.search-popup-hint a:hover {
    background: var(--penabur-yellow);
    border-color: var(--penabur-yellow);
    color: var(--color-dark) !important;
}

/* Halaman hasil pencarian */
.search-page-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.search-page-form .form-control {
    flex: 1 1 260px;
    height: auto;
    padding: 13px 18px;
    border-radius: 12px;
}
.search-scope {
    background: var(--theme-bg-light);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 34px;
}
.search-scope i {
    color: var(--penabur-primary);
    margin-right: 6px;
}
.search-summary {
    margin-bottom: 26px;
}
.search-group {
    margin-bottom: 38px;
}
.search-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--theme-bg-light);
}
.search-group-title i {
    color: var(--penabur-primary);
}
.search-group-count {
    background: var(--theme-bg-light);
    border-radius: 30px;
    padding: 1px 11px;
    font-size: 13px;
    font-weight: 600;
}
.search-result {
    padding: 16px 0;
    border-bottom: 1px solid #eef1f6;
}
.search-result:last-child {
    border-bottom: none;
}
.search-result-title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-dark);
}
.search-result-title:hover {
    color: var(--penabur-primary) !important;
}
.search-result-meta {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--penabur-primary);
}
.search-result-snippet {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.7;
}
.search-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--theme-bg-light);
    border-radius: 20px;
}
.search-empty i {
    font-size: 40px;
    color: var(--penabur-primary);
    margin-bottom: 14px;
    display: block;
}
.search-empty p {
    margin: 0;
}

/* Aksi form kontak: tombol kirim (utama) dan WhatsApp (alternatif) sejajar.
   Keduanya berada di dalam <form> yang punya padding 30px, supaya sejajar
   dengan kolom isian di atasnya. */
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* WhatsApp dibuat bergaris tepi agar tidak menyaingi tombol kirim, tapi ukuran,
   tipografi, dan bentuk sudutnya disamakan supaya sejajar rapi.
   Padding 12px + border 2px = tinggi yang sama dengan .theme-btn (padding 14px). */
.contact-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 2px solid #25D366;
    border-radius: 50px 50px 50px 0;
    color: #128C4A;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}
.contact-wa-link i {
    font-size: 17px;
}
.contact-wa-link:hover {
    background: #25D366;
    color: #fff !important;
}

/* Email footer dijaga tetap satu baris; kolom Contact sudah dilebarkan jadi
   col-lg-4 supaya muat tanpa perlu mengecilkan ukuran hurufnya. */
.footer-contact li a[href^="mailto:"] {
    white-space: nowrap;
}

/* Kerapatan judul section.
   Tema memberi h1-h6 line-height: 1, jadi judul 55px yang turun sampai 3 baris
   nyaris tanpa jarak antarbaris dan terasa menumpuk. Ukurannya diturunkan
   sedikit dan diberi leading supaya lebih lapang dan lebih jarang pecah baris. */
.site-title {
    font-size: 44px;
    line-height: 1.2;
    margin-top: 18px;
}
.site-heading p {
    margin-top: 20px;
}

/* Tagline: border-bottom pada elemen inline membuat garisnya patah mengikuti
   tiap potongan baris. inline-block membuat garis mengikuti satu blok utuh,
   dan letter-spacing yang lebih rapat menekan kemungkinan pecah baris. */
.site-title-tagline {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2.5px;
    line-height: 1.6;
    padding-bottom: 8px;
}

/* Ditulis ulang di sini karena theme.css dimuat setelah style.css, sehingga
   aturan non-media di atas akan menimpa media query bawaan template. */
@media (max-width: 991px) {
    .site-title { font-size: 36px; }
}
@media (max-width: 767px) {
    .site-title { font-size: 30px; }
    .site-title-tagline { font-size: 14px; letter-spacing: 2px; }
}
@media (max-width: 575px) {
    .site-title { font-size: 26px; }
    .site-title-tagline { font-size: 13px; }
}

/* Grid kartu berita (beranda dan halaman /news).
   Kartu diregangkan setinggi kolom supaya semua kartu dalam satu baris sama
   tinggi, lalu tombol "Read More" didorong ke dasar kartu dengan margin-top
   auto agar tetap sejajar meski judul dan ringkasannya beda panjang. */
.news-grid > [class*="col-"] {
    display: flex;
}
.news-grid .blog-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* Rasio gambar dikunci; tanpa ini tinggi gambar ikut rasio asli tiap file. */
.news-grid .blog-item-img img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
}
.news-grid .blog-item-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Judul dan ringkasan sama-sama dibatasi dua baris, sisanya jadi elipsis.
   Pemotongan sengaja di CSS (bukan Str::limit) supaya selalu pas dua baris
   berapa pun lebar kolomnya. */
.news-grid .blog-title a,
.news-grid .blog-item-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-grid .blog-item-info .theme-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Widget "Recent News" di sidebar halaman detail berita.
   Template aslinya memberi thumbnail lebar 120px tanpa flex-shrink, sehingga
   judul yang panjang justru memampatkan gambarnya. */
.widget .recent-post-single {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
.widget .recent-post-single:last-child { margin-bottom: 0; }
.widget .recent-post-img {
    flex: 0 0 100px;
    margin-right: 0;
}
.widget .recent-post-img img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
/* min-width:0 supaya judul panjang benar-benar terpotong, bukan melebarkan kolom. */
.widget .recent-post-bio {
    flex: 1 1 auto;
    min-width: 0;
}
.widget .recent-post-bio h6 {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 6px;
}
/* Judul dibatasi dua baris supaya tinggi tiap item seragam. */
.widget .recent-post-bio h6 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.widget .recent-post-bio span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--body-text-color);
}
.widget .recent-post-bio span i { color: var(--penabur-primary); }

/* Widget "More News" di sidebar halaman detail berita */
.news-list-item {
    padding: 14px 0;
    border-bottom: 1px solid #ced4da;
}
.news-list-item:first-child { padding-top: 0; }
.news-list-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.news-list-title {
    display: block;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-dark);
}
.news-list-title:hover { color: var(--penabur-primary) !important; }
.news-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--body-text-color);
}
.news-list-meta i {
    margin-right: 4px;
    color: var(--penabur-primary);
}
.news-list-excerpt {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
}
.news-list-more {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    color: var(--penabur-primary);
}

/* Blok konten di dalam kolom prosa halaman Profil.

   Isi halaman Profil membawa markup tata letaknya sendiri (grid Bootstrap dan
   kartu .about-item), tapi markup itu ditulis seolah-olah menempati lebar penuh
   halaman. Kenyataannya ia dirender di dalam .about-right — kolom setengah
   lebar di sebelah kanan foto. Dua .col-md-6 bersebelahan di sana hanya
   menyisakan ~220px per kartu, dan setelah dikurangi ikon 70px teksnya tinggal
   ~138px sehingga tiap kata pecah baris.

   Di dalam kolom prosa ini kolom apa pun selalu ditumpuk; kartunya memakai
   lebar penuh dan tetap terbaca. */
.about-right .about-text .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Ikon .about-item punya lebar tetap 70px tapi tanpa flex-shrink, sehingga
   flexbox tetap memampatkannya saat ruang menyempit — lingkaran ikonnya jadi
   lonjong. Berlaku juga untuk section Tentang di beranda. */
.about-item-icon {
    flex-shrink: 0;
}

/* Sematan video yang datang dari isi halaman diberi jarak dari paragraf di
   atasnya; tanpa ini iframe menempel langsung ke teks. */
.about-text .ratio-embed {
    margin-top: 24px;
}

/* Section "Tentang Kami" di beranda — satu gambar, setinggi kolom teksnya.

   Template aslinya menyusun tiga gambar (satu besar, satu bundar, satu kecil),
   tapi CMS hanya menyediakan satu field gambar untuk section ini. Dua sisanya
   foto stok bawaan template — orang yang tidak ada hubungannya dengan sekolah.
   Jadi yang ditampilkan cukup gambar dari CMS saja.

   Tingginya sepenuhnya ditentukan kolom teks di sebelah kanan. Baris memakai
   align-items-stretch, dan kolom kiri tidak punya isi yang tingginya alami:
   gambar memakai height 100%, dan kartu pengalaman ditumpangkan sebagai elemen
   absolut. Jadi tidak ada apa pun di kolom kiri yang bisa mendorong baris jadi
   lebih tinggi daripada teks — dasar gambar selalu rata dengan tombol
   "Selengkapnya" dan blok "Hubungi Kami" di kanan. */
.about-left-single {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Menimpa margin-right bawaan .about-left; jarak antarkolom sudah diurus
       gutter row (g-lg-5), dan margin itu membuat gambar tidak rata dengan
       tepi container di layar sempit. */
    margin-right: 0;
}

.about-left-single .about-single-img {
    position: relative;
    flex: 1 1 auto;
    /* Lantai, bukan tinggi kerja. Sengaja dibuat rendah supaya praktis tidak
       pernah ikut menentukan tinggi baris — perannya hanya menjaga gambar tetap
       terbaca seandainya teks di kanan sangat singkat. */
    min-height: 240px;
    overflow: hidden;
    border-radius: 20px;
    line-height: 0;
    box-shadow: 0 18px 40px rgba(11, 26, 51, .12);
}

/* Gambar dilepas dari alur (absolut) supaya tidak menyumbang tinggi sama sekali
   saat browser menghitung tinggi baris. Dengan height:100% saja tidak cukup:
   pada tahap pengukuran itu tinggi kolom belum pasti, jadi 100% jatuh kembali ke
   tinggi alami berkas — foto potret akan mendorong kolom kiri melewati tombol
   "Selengkapnya" di kanan, persis yang ingin dihindari.

   object-fit cover dipakai karena rasio foto dari CMS bebas; tanpa itu gambar
   gepeng mengikuti tinggi kolom. */
.about-left-single .about-single-img > img.about-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Kartu pengalaman menempel di pojok kiri bawah gambar. Lebarnya dibatasi
   supaya tidak menutupi foto terlalu banyak di kolom yang lebar. */
.about-left-single .about-experience {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    max-width: calc(100% - 44px);
    margin: 0;
    padding: 12px 20px 12px 12px;
    gap: 12px;
    line-height: 1.4;
}

/* Ukuran ikon bawaan (90px) dirancang untuk kartu yang berdiri sendiri di bawah
   gambar; sebagai overlay ia terlalu mendominasi.

   Penengahan memakai grid, bukan line-height: ikonnya SVG tanpa ukuran
   intrinsik yang bisa diandalkan, jadi menaruhnya sebagai kotak inline membuat
   gambarnya meluber keluar lingkaran putih. margin:0 membatalkan `margin:auto`
   bawaan yang dimaksudkan untuk tata letak lama. */
.about-left-single .about-experience-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}

/* Tinggi ikut dikunci (bukan auto) dan object-fit contain, supaya grafiknya
   selalu muat utuh di dalam lingkaran berapa pun rasio berkasnya. */
.about-left-single .about-experience-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.about-left-single .about-experience b {
    font-size: 15px;
}

/* Di bawah lebar lg kedua kolom sudah bertumpuk, jadi tidak ada lagi tinggi
   yang perlu disamakan; gambar dikembalikan ke rasio tetap supaya tidak
   memanjang memenuhi layar. */
@media (max-width: 991px) {
    .about-left-single .about-single-img {
        min-height: 0;
    }
    /* Dikembalikan ke alur: di sini justru gambar yang menentukan tinggi
       pembungkusnya, karena tidak ada kolom teks di sampingnya untuk diikuti. */
    .about-left-single .about-single-img > img.about-photo {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575px) {
    .about-left-single .about-experience {
        left: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
        padding: 10px 16px 10px 10px;
    }
    .about-left-single .about-experience-icon {
        width: 52px;
        height: 52px;
    }
    .about-left-single .about-experience-icon img { width: 32px; height: 32px; }
    .about-left-single .about-experience b { font-size: 14px; }
}

/* Tombol "lihat semua" tingkat section.

   Di section Berita ada empat tombol berdampingan: tiga "Baca Selengkapnya"
   milik masing-masing kartu, lalu satu "Lihat Semua Berita" di bawahnya.
   Keempatnya sebelumnya identik — pil padat warna utama — padahal maksudnya
   berbeda: yang di kartu membuka satu artikel, yang di bawah pindah ke daftar
   lengkap. Mata tidak punya petunjuk mana yang mana.

   Dibedakan lewat dua hal sekaligus, bukan warna saja: bentuknya bergaris tepi
   (bukan padat) sehingga terbaca sebagai aksi navigasi, dan warnanya biru
   PENABUR. Biru diambil dari logo — warna paling dominan di sana (#304878),
   yang di proyek ini diwakili --penabur-blue. Warna utama dari CMS sengaja
   tidak dipakai supaya tetap kontras terhadap tombol kartu, apa pun warna yang
   dipilih sekolah. */
.theme-btn.btn-lihat-semua {
    background: transparent !important;
    color: var(--penabur-blue) !important;
    border: 2px solid var(--penabur-blue);
    /* padding dikurangi 2px agar tinggi luarnya tetap sama dengan tombol padat
       setelah ditambah tebal garis tepi. */
    padding: 12px 30px;
    box-shadow: none;
}

/* Riak kuning bawaan .theme-btn dimatikan: di atas latar transparan ia terlihat
   seperti tombol yang setengah termuat. */
.theme-btn.btn-lihat-semua::before,
.theme-btn.btn-lihat-semua::after {
    display: none;
}

.theme-btn.btn-lihat-semua:hover,
.theme-btn.btn-lihat-semua:focus-visible {
    background: var(--penabur-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(31, 78, 145, .25);
}