/*
 * Tampilan beranda SMAN 1 Katapang.
 *
 * SELURUH aturan di berkas ini dikurung di bawah `body.beranda`. Situs publik
 * memakai satu style.css bersama untuk semua halaman, jadi tanpa pengurungan
 * itu perubahan di sini akan ikut mengubah halaman berita, galeri, dan kontak.
 *
 * Tidak lewat Laravel Mix — tampilan publik memuat CSS statis langsung dari
 * /public/css, jadi ubah berkas ini secara langsung.
 */

body.beranda {
    --bd-biru:      #037abc;
    --bd-biru-tua:  #024f79;
    --bd-biru-muda: #e8f4fb;
    --bd-merah:     #be1233;
    --bd-tinta:     #0f1a24;
    --bd-redup:     #5b6b7a;
    --bd-garis:     #e4eaf0;
    --bd-latar:     #f6f9fc;

    --bd-lengkung:  16px;
    --bd-bayang:    0 1px 2px rgba(15, 26, 36, .05), 0 12px 28px rgba(15, 26, 36, .07);
    --bd-bayang-kuat: 0 2px 4px rgba(15, 26, 36, .06), 0 22px 48px rgba(15, 26, 36, .13);

    background: #fff;
    color: var(--bd-tinta);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap 3 lama memaksa ukuran huruf kecil; beranda memakai skalanya sendiri. */
body.beranda .bd h2,
body.beranda .bd h3,
body.beranda .bd p {
    margin: 0;
}

body.beranda .bd {
    font-size: 16px;
    line-height: 1.7;
}

body.beranda .bd-wadah {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------------- hero */

body.beranda .bd-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #06263a;
}

body.beranda .bd-hero .carousel,
body.beranda .bd-hero .carousel-inner,
body.beranda .bd-hero .item {
    position: absolute;
    inset: 0;
    height: 100%;
}

/*
 * Bootstrap menyembunyikan slide tak aktif lewat `display: none`. Kalau di
 * sini dipasang `display: flex` tanpa syarat, aturan itu tertimpa dan keenam
 * slide tampil bertumpuk — yang terlihat hanya slide terakhir, dan tombol
 * geser seolah tidak berfungsi.
 *
 * Jadi semua slide dibiarkan tampil, lalu dibedakan lewat opacity. Selain
 * aman, hasilnya silih-pudar yang lebih halus daripada geseran bawaan.
 */
body.beranda .bd-hero .item {
    background-size: cover;
    background-position: center;
    display: flex !important;
    align-items: center;
    opacity: 0;
    z-index: 1;
    transition: opacity .8s ease;
    /* Matikan geseran mendatar bawaan Bootstrap. */
    left: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
}

body.beranda .bd-hero .item.active {
    opacity: 1;
    z-index: 2;
}

/* Slide yang sedang ditinggalkan memudar, yang datang menguat. */
body.beranda .bd-hero .item.active.left,
body.beranda .bd-hero .item.active.right {
    opacity: 0;
    z-index: 1;
}

body.beranda .bd-hero .item.next.left,
body.beranda .bd-hero .item.prev.right {
    opacity: 1;
    z-index: 2;
}

/*
 * Peredup gelap di bawah teks. Foto kegiatan sekolah terangnya berbeda-beda,
 * dan tanpa ini judul putih bisa hilang di atas foto yang terang.
 */
body.beranda .bd-hero .item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(4, 20, 32, .72) 0%,
        rgba(4, 20, 32, .48) 42%,
        rgba(4, 20, 32, .82) 100%);
}

/* Isi berada DI DALAM tiap slide supaya judul, deskripsi, dan tautan yang
   diisi admin ikut berganti bersama gambarnya. */
body.beranda .bd-hero__isi {
    position: relative;
    z-index: 10;   /* di atas peredup ::after milik slide */
    width: 100%;
    padding: 140px 0 110px;
    color: #fff;
}

body.beranda .bd-hero__isi--polos {
    padding-bottom: 96px;
}

body.beranda .bd-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

body.beranda .bd-hero h1 {
    font-size: clamp(34px, 5.6vw, 62px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 18px;
    max-width: 18ch;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

body.beranda .bd-hero p {
    font-size: clamp(15px, 1.7vw, 18.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .9);
    max-width: 56ch;
    margin: 0 0 30px;
}

body.beranda .bd-hero__aksi {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------- indikator & panah hero */

body.beranda .bd-hero__titik {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 118px;
    z-index: 20;
    margin: 0;
    padding: 0;
    text-align: center;
    width: auto;
}

body.beranda .bd-hero__titik li {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    border: 0;
    text-indent: -9999px;
    cursor: pointer;
    transition: width .25s, background .25s;
}

body.beranda .bd-hero__titik li.active {
    width: 30px;
    height: 9px;
    margin: 0 5px;
    background: #fff;
}

body.beranda .bd-hero__panah {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

body.beranda .bd-hero__panah:hover,
body.beranda .bd-hero__panah:focus {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
    text-decoration: none;
}

body.beranda .bd-hero__panah--kiri  { left: 18px; }
body.beranda .bd-hero__panah--kanan { right: 18px; }

/* Layar kecil: panah memakan ruang teks, cukup andalkan titik dan geser. */
@media (max-width: 767px) {
    body.beranda .bd-hero__panah { display: none; }
    body.beranda .bd-hero__titik { bottom: 84px; }
}

/* ------------------------------------------------------------------ tombol */

body.beranda .bd-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}

body.beranda .bd-btn:hover,
body.beranda .bd-btn:focus {
    text-decoration: none;
    transform: translateY(-2px);
}

body.beranda .bd-btn--utama {
    background: var(--bd-biru);
    color: #fff;
    box-shadow: 0 8px 24px rgba(3, 122, 188, .38);
}

body.beranda .bd-btn--utama:hover,
body.beranda .bd-btn--utama:focus {
    background: #0289d1;
    color: #fff;
}

body.beranda .bd-btn--kaca {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    backdrop-filter: blur(6px);
}

body.beranda .bd-btn--kaca:hover,
body.beranda .bd-btn--kaca:focus {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

body.beranda .bd-btn--garis {
    background: #fff;
    border-color: var(--bd-garis);
    color: var(--bd-biru);
    box-shadow: var(--bd-bayang);
}

body.beranda .bd-btn--garis:hover,
body.beranda .bd-btn--garis:focus {
    border-color: var(--bd-biru);
    color: var(--bd-biru-tua);
}

/* ----------------------------------------------------------------- section */

body.beranda .bd-bag {
    padding: 88px 0;
}

body.beranda .bd-bag--abu {
    background: var(--bd-latar);
}

body.beranda .bd-kepala {
    max-width: 720px;
    margin: 0 auto 52px;
    text-align: center;
}

body.beranda .bd-kepala--kiri {
    margin-left: 0;
    text-align: left;
}

body.beranda .bd-mata {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bd-biru);
    margin-bottom: 12px;
}

body.beranda .bd-kepala h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bd-tinta);
    margin-bottom: 14px;
}

body.beranda .bd-kepala p {
    font-size: 16px;
    color: var(--bd-redup);
    line-height: 1.75;
}

/* ------------------------------------------------------------ tautan cepat */

body.beranda .bd-pintas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: -74px;
    position: relative;
    z-index: 20;
}

/*
 * Tiap kartu punya warnanya sendiri supaya mudah dikenali sekilas. Nilainya
 * ditaruh pada dua peubah, jadi menambah kartu baru cukup satu blok kecil —
 * tidak perlu menyalin seluruh aturan.
 */
body.beranda .bd-pintas__kartu--biru   { --kartu: #037abc; --kartu-muda: #e8f4fb; }
body.beranda .bd-pintas__kartu--hijau  { --kartu: #0e9f6e; --kartu-muda: #e6f7f0; }
body.beranda .bd-pintas__kartu--jingga { --kartu: #d97706; --kartu-muda: #fdf3e3; }
body.beranda .bd-pintas__kartu--merah  { --kartu: #be1233; --kartu-muda: #fdeef1; }

body.beranda .bd-pintas__kartu {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    padding: 26px 24px 24px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: var(--bd-bayang);
    transition: transform .18s, box-shadow .22s, border-color .18s;
}

/* Garis aksen berwarna yang melintas di tepi atas saat disorot. */
body.beranda .bd-pintas__kartu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kartu);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

body.beranda .bd-pintas__kartu:hover {
    transform: translateY(-5px);
    border-color: var(--kartu);
    /* Bayangnya ikut berwarna, jadi sorotannya terasa menyatu dengan kartunya. */
    box-shadow: 0 2px 4px rgba(15, 26, 36, .06),
                0 18px 38px color-mix(in srgb, var(--kartu) 26%, transparent);
    text-decoration: none;
    color: inherit;
}

body.beranda .bd-pintas__kartu:hover::before {
    transform: scaleX(1);
}

body.beranda .bd-pintas__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--kartu-muda);
    color: var(--kartu);
    font-size: 21px;
    margin-bottom: 18px;
    transition: background .22s, color .22s, box-shadow .22s, transform .22s;
}

body.beranda .bd-pintas__kartu:hover .bd-pintas__ikon {
    background: var(--kartu);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--kartu) 40%, transparent);
}

body.beranda .bd-pintas__kartu h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 7px;
    transition: color .22s;
}

body.beranda .bd-pintas__kartu:hover h3 {
    color: var(--kartu);
}

body.beranda .bd-pintas__kartu p {
    font-size: 14px;
    color: var(--bd-redup);
    line-height: 1.6;
    margin: 0;
}

/* Panah tanpa tulisan di pojok kanan atas — penanda bahwa kartunya bisa diklik. */
body.beranda .bd-pintas__panah {
    position: absolute;
    top: 28px;
    right: 24px;
    font-size: 15px;
    color: var(--bd-garis);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease, color .22s ease;
}

body.beranda .bd-pintas__kartu:hover .bd-pintas__panah {
    opacity: 1;
    transform: none;
    color: var(--kartu);
}

/*
 * color-mix() belum dikenal peramban lama. Di sana bayangan dan cahaya
 * ikonnya jatuh ke warna netral — kartunya tetap berfungsi, hanya sorotannya
 * kurang berwarna.
 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    body.beranda .bd-pintas__kartu:hover {
        box-shadow: var(--bd-bayang-kuat);
    }

    body.beranda .bd-pintas__kartu:hover .bd-pintas__ikon {
        box-shadow: 0 8px 20px rgba(15, 26, 36, .22);
    }
}

/* -------------------------------------------------------------- keunggulan */

body.beranda .bd-unggul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

body.beranda .bd-unggul__item {
    background: #fff;
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    padding: 30px 26px;
    transition: transform .18s, box-shadow .22s;
}

body.beranda .bd-unggul__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--bd-bayang);
}

body.beranda .bd-unggul__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--bd-biru) 0%, var(--bd-biru-tua) 100%);
    color: #fff;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(3, 122, 188, .28);
}

body.beranda .bd-unggul__item h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

body.beranda .bd-unggul__item p {
    font-size: 14.5px;
    color: var(--bd-redup);
    line-height: 1.7;
}

/* ---------------------------------------------------------------- sambutan */

body.beranda .bd-sambutan {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 56px;
    /* Rata atas, bukan tengah. Kolom teksnya jauh lebih tinggi daripada foto;
       kalau ditengahkan, ruang kosongnya terbelah dua di atas dan di bawah
       foto sehingga bagian ini terlihat menggantung. */
    align-items: start;
}

/* Kartu identitas: foto dan namanya menyatu, tidak lagi terpisah jauh. */
body.beranda .bd-sambutan__kartu {
    background: #fff;
    border: 1px solid var(--bd-garis);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--bd-bayang);
    position: sticky;
    top: 24px;
}

/*
 * Foto kepala sekolah berlatar putih hasil potong. Di atas kartu putih ia
 * tampak melayang tanpa pijakan, jadi diberi gradasi biru muda sebagai alas.
 */
body.beranda .bd-sambutan__potret {
    background: linear-gradient(170deg, #dceefa 0%, #eef7fd 55%, #fff 100%);
    padding: 18px 18px 0;
}

body.beranda .bd-sambutan__potret img {
    display: block;
    width: 100%;
    height: auto;
}

body.beranda .bd-sambutan__nama {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--bd-garis);
    text-align: center;
}

body.beranda .bd-sambutan__nama strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-tinta);
}

body.beranda .bd-sambutan__nama span {
    font-size: 13.5px;
    color: var(--bd-redup);
}

body.beranda .bd-sambutan__teks p {
    color: var(--bd-redup);
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 18px;
    /* Baris yang terlalu panjang melelahkan dibaca; dibatasi lebar nyamannya. */
    max-width: 68ch;
}

body.beranda .bd-sambutan__teks .bd-salam {
    font-style: italic;
    color: var(--bd-tinta);
    margin-bottom: 0;
}

body.beranda .bd-kutip {
    border-left: 3px solid var(--bd-biru);
    padding: 2px 0 2px 20px;
    margin: 0 0 26px;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--bd-tinta);
}

/* ------------------------------------------------------------------ kartu */

body.beranda .bd-kisi {
    display: grid;
    gap: 22px;
}

body.beranda .bd-kisi--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
body.beranda .bd-kisi--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

body.beranda .bd-kartu {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .22s;
}

body.beranda .bd-kartu:hover {
    transform: translateY(-5px);
    box-shadow: var(--bd-bayang-kuat);
    text-decoration: none;
    color: inherit;
}

body.beranda .bd-kartu__gambar {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bd-biru-muda);
}

body.beranda .bd-kartu__gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

body.beranda .bd-kartu:hover .bd-kartu__gambar img {
    transform: scale(1.06);
}

body.beranda .bd-kartu__isi {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.beranda .bd-kartu__isi h3 {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 8px;
}

body.beranda .bd-kartu__isi p {
    font-size: 14px;
    color: var(--bd-redup);
    line-height: 1.65;
}

body.beranda .bd-tanggal {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bd-biru);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------- guru */

body.beranda .bd-guru {
    text-align: center;
    background: #fff;
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    padding: 28px 20px;
    transition: transform .18s, box-shadow .22s;
}

body.beranda .bd-guru:hover {
    transform: translateY(-4px);
    box-shadow: var(--bd-bayang);
}

body.beranda .bd-guru img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    margin: 0 auto 16px;
    display: block;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(15, 26, 36, .16);
}

body.beranda .bd-guru h3 {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

body.beranda .bd-guru span {
    font-size: 13.5px;
    color: var(--bd-redup);
}

/* ---------------------------------------------------------------- galeri */

body.beranda .bd-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

body.beranda .bd-galeri__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--bd-lengkung);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--bd-bayang);
}

body.beranda .bd-galeri__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

body.beranda .bd-galeri__item:hover img {
    transform: scale(1.08);
}

body.beranda .bd-galeri__judul {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 18px 16px;
    background: linear-gradient(180deg, transparent, rgba(4, 20, 32, .88));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
}

/* --------------------------------------------------------------- ajakan */

body.beranda .bd-ajakan {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    padding: 64px 48px;
    background: linear-gradient(135deg, var(--bd-biru) 0%, var(--bd-biru-tua) 100%);
    color: #fff;
    text-align: center;
}

body.beranda .bd-ajakan::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

body.beranda .bd-ajakan > * {
    position: relative;
    z-index: 2;
}

body.beranda .bd-ajakan h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -.015em;
}

body.beranda .bd-ajakan p {
    font-size: 16px;
    color: rgba(255, 255, 255, .88);
    max-width: 58ch;
    margin: 0 auto 28px;
}

body.beranda .bd-ajakan .bd-btn--utama {
    background: #fff;
    color: var(--bd-biru-tua);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

body.beranda .bd-ajakan .bd-btn--utama:hover {
    background: #f2f8fc;
    color: var(--bd-biru-tua);
}

/* --------------------------------------------------------- muncul saat gulir */

body.beranda .bd-muncul {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

body.beranda .bd-muncul.tampil {
    opacity: 1;
    transform: none;
}

/* Sebagian orang pusing oleh gerakan; hormati setelan sistemnya. */
@media (prefers-reduced-motion: reduce) {
    body.beranda * {
        animation: none !important;
        transition: none !important;
    }

    body.beranda .bd-muncul {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- responsif */

@media (max-width: 900px) {
    body.beranda .bd-sambutan {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    body.beranda .bd-sambutan__kartu {
        max-width: 340px;
        margin: 0 auto;
        position: static;   /* sticky tidak berguna saat sudah satu kolom */
    }
}

@media (max-width: 767px) {
    body.beranda .bd-hero {
        min-height: 540px;
    }

    body.beranda .bd-hero__isi {
        padding: 118px 0 72px;
    }

    body.beranda .bd-bag {
        padding: 58px 0;
    }

    body.beranda .bd-pintas {
        margin-top: -40px;
    }

    body.beranda .bd-ajakan {
        padding: 44px 24px;
    }
}