/* SLIDESHOW */
.slide-img {
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .slide-img {
    height: 220px; /* lebih kecil di HP */
  }
  .caption-title {
    font-size: 14px;
  }
}

/* BERITA */
.berita-img {
  height: 180px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .berita-img {
    height: 140px;
  }
}

/* MARQUEE */
marquee {
  font-weight: bold;
  font-size: 16px;
}
@media (max-width: 576px) {
  marquee {
    font-size: 13px;
  }
}

/* SIDEBAR */
.card-header {
  font-weight: bold;
  font-size: 15px;
}
@media (max-width: 768px) {
  aside {
    margin-top: 20px;
  }
}

/* FOOTER */
footer {
  font-size: 14px;
}
/* LOGO HEADER */
.logo-header {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-right: 15px; /* kasih jarak antara logo & tulisan */
}
@media (max-width: 768px) {
  .logo-header {
    width: 50px;
    height: 50px;
    margin-right: 10px; /* jarak lebih kecil di HP */
  }
  header h1 {
    font-size: 20px;
  }
  header p {
    font-size: 14px;
  }
}
/* SLIDESHOW */
.slide-img {
  height: 420px;
  object-fit: cover;
  border-radius: 8px;
}
.carousel-caption {
  bottom: 30px;
}
.carousel-caption h5 {
  font-size: 22px;
}
.carousel-caption p {
  font-size: 15px;
}
@media (max-width: 768px) {
  .slide-img {
    height: 220px;
  }
  .carousel-caption {
    bottom: 15px;
    padding: 8px;
  }
  .carousel-caption h5 {
    font-size: 16px;
  }
  .carousel-caption p {
    font-size: 13px;
  }
}
/* Smooth fade effect for carousel */
.carousel.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* 1s = durasi transisi */
}

.carousel.carousel-fade .carousel-item.active,
.carousel.carousel-fade .carousel-item-next.carousel-item-start,
.carousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

.carousel.carousel-fade .active.carousel-item-start,
.carousel.carousel-fade .active.carousel-item-end {
  opacity: 0;
}
/* Sambutan */
.card-body p {
  font-size: 14px;
}
@media (max-width: 768px) {
  .card-body p {
    font-size: 13px;
  }
}
/* Sambutan Kepala Sekolah */
.card-body p.small {
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .card-body p.small {
    font-size: 13px;
  }
}
/* Header sekolah */
.school-header {
  background: url('../img/header-bg.svg') no-repeat center center;
  background-size: cover;
  padding: 20px 0;
  color: #222;
}

/* fallback jika browser tidak support SVG */
.no-svg .school-header {
  background: url('../img/000.jpg') no-repeat center center;
  background-size: cover;
}
.school-header img.logo {
  max-height: 80px;   /* atur tinggi maksimal */
  width: auto;        /* biar proporsional */
  margin-right: 15px; /* beri jarak dengan teks */
}

.school-header .school-info h1 {
  font-size: 28px; 
  font-weight: bold;
  margin: 0;
  color: #1b5e20;
}

.school-header .school-info p {
  margin: 2px 0;
  font-size: 14px;
  color: #333;
}
.pengumuman {
  background: #f8f9fa; /* abu-abu terang */
  border-top: 3px solid #007bff; /* garis biru di atas */
}

.pengumuman h3 {
  font-weight: bold;
}

.pengumuman .list-group-item {
  font-size: 15px;
}
/* Pastikan slideshow dan sambutan sama tinggi */
.row.align-items-stretch {
  display: flex;
  flex-wrap: wrap;
}

.row.align-items-stretch > [class*='col-'] {
  display: flex;
}

.card.flex-fill {
  flex: 1;
}

/* Slideshow responsif */
.carousel-item img {
  width: 100%;
  height: 60vh;           /* default tinggi 60% layar */
  object-fit: cover;      /* biar proporsional */
  object-position: center;
  border-radius: 5px;
}

/* Untuk HP */
@media (max-width: 768px) {
  .carousel-item img {
    height: 45vh;         /* lebih pendek di layar kecil */
  }
}
.carousel-inner img {
  height: 400px;
  object-fit: cover;
}

.card-body img {
  border: 3px solid #ddd;
  padding: 3px;
}

.card-body p.small {
  font-size: 0.9rem;
  line-height: 1.4;
}
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

.carousel-inner img {
  height: 100%;
  min-height: 450px;
  object-fit: cover;
  border-radius: 5px;
}

.card {
  min-height: 450px;
}

@media (max-width: 768px) {
  .carousel-inner img,
  .card {
    min-height: 300px;
  }
}
.card, 
.carousel-inner img {
  min-height: 400px; /* tinggi sejajar */
}

@media (max-width: 768px) {
  .card, .carousel-inner img {
    min-height: 250px;
  }
}
/* Atur tinggi slide */
.slide-img {
  height: 420px;       /* bisa diubah 400–450px sesuai kebutuhan */
  object-fit: cover;   /* biar gambar penuh tanpa ketarik */
}

/* Hilangkan jarak kanan kiri slide */
#carouselExample {
  margin: 0 !important;
  padding: 0 !important;
}

/* Atur gambar supaya penuh */
#carouselExample .carousel-inner img {
  width: 100%;
  height: 420px;      /* sesuaikan tinggi */
  object-fit: cover;  /* biar tidak gepeng */
  border-radius: 5px; /* biar tetap rapi */
}
/* Biar gambar ikut tinggi card */
#carouselExample .carousel-inner img {
  object-fit: cover;
  border-radius: 5px;
}
#carouselExample .carousel-inner img {
  object-fit: cover;
  border-radius: 5px;
}
/* Agar gambar slide tidak terlalu tinggi di HP */
@media (max-width: 768px) {
  #carouselExample .carousel-inner img {
    max-height: 250px;
  }
}
#carouselExample .carousel-inner img {
  width: 100%;
  height: 400px; /* tinggi seragam */
  object-fit: cover; /* isi penuh tanpa distorsi */
}
/* Hilangkan jarak default container untuk sambutan & slide */
.row.mx-0 > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}