/* =========================================================
   TEMA SMKN 1 SIGI — gaya halaman "BIMTEK SPMI"
   Dipakai bersama Bootstrap 5. Warna cukup diganti di :root.
   ========================================================= */
:root {
   --primary: #0d3b66;        /* biru navy */
   --primary-dark: #08243f;
   --secondary: #f4a825;      /* kuning emas */
   --secondary-dark: #d68f10;
   --accent: #2a9d8f;         /* hijau toska */
   --accent-dark: #1d7268;
   --light: #f8f9fa;
   --white: #fff;
   --text: #2b2d42;
   --muted: #6c757d;
   --line: #e6eaef;
   --shadow: 0 10px 30px rgba(13, 59, 102, .12);
   --shadow-hover: 0 20px 45px rgba(13, 59, 102, .22);
   --radius: 16px;
   --radius-sm: 10px;
   --nav-h: 4rem;

   /* FOTO LATAR HERO — ganti alamatnya dengan foto sekolah di server Anda, contoh:
      url('https://smkn1sigi.sch.id/media_library/images/foto-sekolah.jpg') */
   --hero-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipwwq-UInys-8YID45ZwQ3nAaruiDbWdclVoBkI6cCkJc3xivgbb11KgSKHqzN8spwqQfTzTABPc5GzhBppHZDDdTbDdR7Zv4QVDOvdahRfVjJWY5WVoxevXK9AxBtXmTxvQCsG27lKZpiIKGGyrNUB1iwYNCJuxsufHFIDYx-eHsjAf03HGjFelHVj8/s1600/FOTO%20SMKN%201%20SIGI%20BG.png');

   --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
   --bs-body-color: var(--text);
   --bs-body-bg: var(--light);
   --bs-link-color-rgb: 13, 59, 102;
   --bs-link-hover-color-rgb: 42, 157, 143;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
   font-family: var(--bs-body-font-family);
   color: var(--text);
   background: var(--light);
   line-height: 1.7;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}
a {
   color: var(--primary);
   text-decoration: none;
   transition: color .2s ease, background-color .2s ease;
}
a:hover { color: var(--accent); }
:focus-visible {
   outline: 3px solid var(--secondary);
   outline-offset: 2px;
}

/* =========================================================
   NAVIGASI
   ========================================================= */
.site-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1030;
   padding: .6rem 0;
   background: rgba(13, 59, 102, .92);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   transition: box-shadow .3s ease, background-color .3s ease;
}
.site-nav.scrolled {
   background: rgba(8, 36, 63, .95);
   box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.site-nav .nav-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .5rem 1rem;
}
.nav-brand {
   display: flex;
   align-items: center;
   gap: .75rem;
   min-width: 0;
   margin-right: auto;
   color: #fff;
   font-weight: 700;
   font-size: 1.02rem;
   letter-spacing: .02em;
}
.nav-brand:hover { color: #fff; }
.nav-brand img {
   width: 2.75rem;
   height: 2.75rem;
   flex-shrink: 0;
   border-radius: 50%;
   background: #fff;
   padding: 2px;
   object-fit: contain;
}
.nav-brand-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.nav-tools {
   display: flex;
   align-items: center;
   gap: .4rem;
}
.nav-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   color: #fff;
   background: rgba(255, 255, 255, .1);
}
.nav-icon:hover {
   color: var(--primary-dark);
   background: var(--secondary);
}
.nav-burger {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 40px;
   padding: 0 10px;
   border: 0;
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, .1);
}
.nav-burger:focus { box-shadow: 0 0 0 3px rgba(244, 168, 37, .6); }
.nav-burger span {
   display: block;
   height: 3px;
   border-radius: 3px;
   background: #fff;
   transition: transform .3s ease, opacity .3s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav .navbar-collapse {
   order: 3;
   flex-basis: 100%;
}

/* ---- Menu (SmartMenus) — tampilan ponsel & tablet ---- */
#main-menu {
   width: 100%;
   padding: .5rem 0 1rem;
}
#main-menu a {
   display: block;
   position: relative;
   padding: .7rem 3rem .7rem 1rem;
   border-radius: var(--radius-sm);
   color: rgba(255, 255, 255, .9);
   font-size: .85rem;
   font-weight: 600;
   letter-spacing: .03em;
   line-height: 1.4;
}
#main-menu a:hover,
#main-menu a:focus,
#main-menu a.highlighted {
   color: #fff;
   background: rgba(255, 255, 255, .08);
}
#main-menu ul {
   margin: .25rem 0 .5rem .75rem;
   padding: .25rem 0;
   border-left: 2px solid rgba(244, 168, 37, .5);
   background: transparent;
}
#main-menu ul a {
   font-weight: 500;
   font-size: .82rem;
   color: rgba(255, 255, 255, .8);
}
#main-menu a .sub-arrow {
   position: absolute;
   top: 50%;
   right: .5rem;
   width: 30px;
   height: 30px;
   margin-top: -15px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   color: #fff;
   font: 700 16px/30px sans-serif;
   text-align: center;
}
#main-menu a .sub-arrow::before { content: '+'; }
#main-menu a.highlighted .sub-arrow::before { content: '\2212'; }

@media (max-width: 1199.98px) {
   .site-nav .navbar-collapse {
      max-height: calc(100vh - var(--nav-h));
      overflow-y: auto;
   }
}

/* ---- Menu — tampilan desktop (≥ 1200px) ---- */
@media (min-width: 1200px) {
   .nav-brand { margin-right: 0; }
   .site-nav .navbar-collapse {
      order: 2;
      flex-basis: auto;
      flex-grow: 1;
      justify-content: flex-end;
   }
   .nav-tools { order: 3; }

   #main-menu {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 2px;
      width: auto;
      padding: 0;
   }
   #main-menu > li > a {
      padding: .45rem .8rem;
      border-radius: 20px;
      font-size: .76rem;
      font-weight: 500;
      white-space: nowrap;
      color: rgba(255, 255, 255, .88);
   }
   #main-menu > li > a:hover,
   #main-menu > li > a:focus,
   #main-menu > li > a.highlighted {
      color: var(--primary-dark);
      background: var(--secondary);
   }
   #main-menu > li > a.has-submenu { padding-right: 1.6rem; }
   #main-menu > li > a .sub-arrow {
      right: .65rem;
      width: 0;
      height: 0;
      margin-top: -2px;
      border-radius: 0;
      background: transparent;
      border: 4px solid transparent;
      border-top-color: currentColor;
      border-bottom-width: 0;
   }
   #main-menu a .sub-arrow::before,
   #main-menu a.highlighted .sub-arrow::before { content: none; }

   /* Dropdown */
   #main-menu ul {
      position: absolute;
      width: 17em;
      min-width: 15em !important;
      margin: 0;
      padding: .5rem;
      border: 0;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(8, 36, 63, .25);
   }
   #main-menu ul a {
      padding: .55rem .8rem;
      border-radius: 8px;
      color: var(--text);
      font-size: .8rem;
      font-weight: 500;
      white-space: normal;
   }
   #main-menu ul a:hover,
   #main-menu ul a:focus,
   #main-menu ul a.highlighted {
      color: var(--primary);
      background: rgba(244, 168, 37, .15);
   }
   #main-menu ul a.has-submenu { padding-right: 1.6rem; }
   #main-menu ul a .sub-arrow {
      right: .6rem;
      width: 0;
      height: 0;
      margin-top: -4px;
      border-radius: 0;
      background: transparent;
      border: 4px solid transparent;
      border-left-color: currentColor;
      border-right-width: 0;
   }
}

/* =========================================================
   HERO (beranda)
   ========================================================= */
.hero {
   position: relative;
   min-height: 100vh;
   min-height: 100svh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: calc(var(--nav-h) + 40px) 20px 90px;
   color: #fff;
   background-color: var(--primary-dark);
   background-image: linear-gradient(135deg, rgba(8, 36, 63, .88), rgba(13, 59, 102, .78)), var(--hero-image);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   overflow: hidden;
}
@media (min-width: 992px) and (hover: hover) {
   .hero { background-attachment: fixed; }
}
.hero-inner { max-width: 900px; }
.hero-logo {
   display: block;
   width: 110px;
   height: 110px;
   margin: 0 auto 24px;
   border-radius: 50%;
   background: #fff;
   padding: 5px;
   object-fit: contain;
   box-shadow: 0 0 0 8px rgba(244, 168, 37, .35), var(--shadow);
   animation: popIn 1s ease both;
}
.hero-badge {
   display: inline-block;
   margin-bottom: 20px;
   padding: 8px 24px;
   border-radius: 30px;
   background: var(--secondary);
   color: var(--primary-dark);
   font-weight: 700;
   font-size: .8rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   animation: fadeUp .8s ease .2s both;
}
.hero h1 {
   margin: 0;
   color: #fff;
   font-size: clamp(2.1rem, 6vw, 4.4rem);
   font-weight: 800;
   line-height: 1.15;
   animation: fadeUp .8s ease .4s both;
}
.hero-tagline {
   max-width: 40ch;
   margin: 12px auto 0;
   color: rgba(255, 255, 255, .9);
   font-size: clamp(1rem, 2.2vw, 1.45rem);
   animation: fadeUp .8s ease .6s both;
}
.hero-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   margin-top: 36px;
   animation: fadeUp .8s ease .8s both;
}
.btn-start,
.btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   border-radius: 50px;
   font-weight: 700;
   transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.btn-start {
   padding: 15px 38px;
   background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
   color: var(--primary-dark);
   font-size: 1.05rem;
   box-shadow: 0 10px 30px rgba(244, 168, 37, .45);
}
.btn-start:hover {
   color: var(--primary-dark);
   transform: translateY(-4px) scale(1.03);
   box-shadow: 0 14px 38px rgba(244, 168, 37, .6);
}
.btn-ghost {
   padding: 13px 32px;
   border: 2px solid rgba(255, 255, 255, .75);
   color: #fff;
}
.btn-ghost:hover {
   color: var(--primary);
   background: #fff;
}
.scroll-hint {
   position: absolute;
   bottom: 26px;
   left: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: rgba(255, 255, 255, .75);
   font-size: .72rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   transform: translateX(-50%);
   animation: bounce 1.6s infinite;
}
.scroll-hint:hover { color: #fff; }
.scroll-hint .fa { font-size: 1.2rem; }

@keyframes popIn {
   0% { transform: scale(0); opacity: 0; }
   70% { transform: scale(1.1); }
   100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeUp {
   from { opacity: 0; transform: translateY(30px); }
   to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
   0%, 100% { transform: translate(-50%, 0); }
   50% { transform: translate(-50%, 8px); }
}

/* =========================================================
   JUDUL BAGIAN
   ========================================================= */
.section { padding: clamp(56px, 8vw, 90px) 0; }
.section-header {
   max-width: 750px;
   margin: 0 auto clamp(28px, 4vw, 48px);
   text-align: center;
}
.section-tag {
   display: inline-block;
   margin-bottom: 12px;
   padding: 6px 18px;
   border-radius: 20px;
   background: rgba(42, 157, 143, .12);
   color: var(--accent);
   font-weight: 700;
   font-size: .75rem;
   letter-spacing: 2px;
   text-transform: uppercase;
}
.section-header h2 {
   margin: 0;
   color: var(--primary);
   font-size: clamp(1.5rem, 3.2vw, 2.3rem);
   font-weight: 800;
   line-height: 1.25;
}
.section-header p {
   margin: 10px 0 0;
   color: var(--muted);
}
.divider {
   width: 70px;
   height: 4px;
   margin: 16px auto 0;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--secondary), var(--accent));
}
.section-header-left {
   max-width: none;
   margin: 0 0 24px;
   text-align: left;
}
.section-header-left .divider { margin-left: 0; }

/* Judul widget lama (sidebar & halaman lain) */
.page-title {
   position: relative;
   margin: 0 0 1.1rem;
   padding: 0 0 .7rem;
   border: 0;
   color: var(--primary);
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.35;
}
.page-title::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 56px;
   height: 4px;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--secondary), var(--accent));
}

/* =========================================================
   PENGUMUMAN (slider) & KUTIPAN
   ========================================================= */
.section-announce { background: #fff; }
.announce-slider {
   max-width: 1000px;
   margin: 0 auto;
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--primary-dark);
   box-shadow: var(--shadow);
}
.announce-frame {
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}
.announce-frame::before {
   content: '';
   position: absolute;
   inset: -40px;
   background: var(--poster) center / cover no-repeat;
   filter: blur(28px) brightness(.55);
   transform: scale(1.1);
}
.announce-frame img {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.announce-caption {
   position: absolute;
   top: 1rem;
   left: 1rem;
   z-index: 2;
   max-width: calc(100% - 2rem);
   margin: 0;
   padding: 6px 16px;
   border-radius: 30px;
   background: var(--secondary);
   color: var(--primary-dark);
   font-size: .8rem;
   font-weight: 700;
   box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.announce-caption:empty { display: none; }
@media (max-width: 575.98px) {
   .announce-frame { aspect-ratio: 4 / 5; }
}
.announce-slider .carousel-indicators { margin-bottom: .9rem; }
.announce-slider .carousel-indicators [data-bs-target] {
   width: 10px;
   height: 10px;
   margin: 0 5px;
   border: 0;
   border-radius: 10px;
   background: #fff;
   opacity: .5;
   transition: width .3s ease, opacity .3s ease;
}
.announce-slider .carousel-indicators .active {
   width: 28px;
   opacity: 1;
   background: var(--secondary);
}
.announce-slider .carousel-control-prev,
.announce-slider .carousel-control-next {
   width: 64px;
   opacity: 1;
}
.announce-slider .carousel-control-prev-icon,
.announce-slider .carousel-control-next-icon {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-color: rgba(8, 36, 63, .6);
   background-size: 45%;
   transition: background-color .2s ease;
}
.announce-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.announce-slider .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--secondary); }

/* Kutipan berjalan — struktur dipakai oleh skrip ticker, jangan diubah */
.quote-wrap {
   background: #fff;
   padding: 0 0 clamp(40px, 6vw, 64px);
}
.is-home .section-announce + .quote-wrap { margin-top: calc(-1 * clamp(24px, 4vw, 40px)); }
div.quote {
   display: flex;
   align-items: stretch;
   max-width: 1000px;
   margin: 0 auto;
   overflow: hidden;
   border-radius: 50px;
   background: var(--primary);
   box-shadow: var(--shadow);
}
.quote-title {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   height: 50px;
   padding: 0 22px;
   border-radius: 50px;
   background: var(--secondary);
   color: var(--primary-dark);
   font-size: .8rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}
ul.quote {
   position: relative;
   flex: 1;
   min-width: 0;
   height: 50px;
   margin: 0;
   padding: 0;
   overflow: hidden;
   list-style: none;
   line-height: 1;
   background: transparent;
}
ul.quote li {
   position: absolute;
   top: -950em;
   left: 0;
   display: block;
   padding: 17px 15px 15px 20px;
   color: #fff;
   white-space: nowrap;
   font-size: .88rem;
}
ul.quote li span { color: var(--secondary); }
@media (max-width: 575.98px) {
   .quote-label { display: none; }
   .quote-title { padding: 0 18px; }
}

/* =========================================================
   KONTEN
   ========================================================= */
.content { padding: clamp(48px, 7vw, 80px) 0; }
.is-inner .content { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 48px)); }
.content [class*="col-"] { min-width: 0; overflow-wrap: break-word; }

/* Isi tulisan dari editor (gambar, tabel, video) agar tidak keluar kotak */
:where(.content) img { max-width: 100%; height: auto; }
:where(.content) iframe,
:where(.content) video { max-width: 100%; }

.main-content { container: main / inline-size; }
.home-section + .home-section { margin-top: clamp(48px, 6vw, 72px); }

/* ---- Tulisan terbaru ---- */
.post-grid {
   display: grid;
   gap: 22px;
}
.post-card {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
   transition: transform .3s ease, box-shadow .3s ease;
}
.post-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   height: 5px;
   background: linear-gradient(90deg, var(--secondary), var(--accent));
}
.post-thumb {
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: #e9eef3;
}
.post-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}
.post-body {
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 20px 22px 22px;
}
.post-date {
   margin-bottom: 6px;
   color: var(--accent);
   font-size: .78rem;
   font-weight: 600;
}
.post-date .fa { margin-right: 4px; }
.post-title {
   margin: 0 0 8px;
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.4;
}
.post-title a { color: var(--primary); }
.post-title a:hover { color: var(--accent); }
.post-excerpt {
   margin: 0 0 16px;
   color: #495057;
   font-size: .9rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.post-foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: auto;
}
.post-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 2px 14px;
   color: var(--muted);
   font-size: .76rem;
}
.post-meta .fa {
   margin-right: 4px;
   color: var(--secondary-dark);
}
.btn-read {
   display: inline-flex;
   align-items: center;
   padding: 8px 16px;
   border-radius: var(--radius-sm);
   background: var(--primary);
   color: #fff;
   font-size: .8rem;
   font-weight: 600;
}
.btn-read:hover {
   color: #fff;
   background: var(--primary-dark);
}

/* Tulisan pertama = berita utama (panel navy) */
.post-card:first-child { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.post-card:first-child::before { background: linear-gradient(90deg, var(--accent), var(--secondary)); }
.post-card:first-child .post-date { color: var(--secondary); }
.post-card:first-child .post-title {
   font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
   font-weight: 800;
}
.post-card:first-child .post-title a { color: #fff; }
.post-card:first-child .post-title a:hover { color: var(--secondary); }
.post-card:first-child .post-excerpt { color: rgba(255, 255, 255, .85); }
.post-card:first-child .post-meta { color: rgba(255, 255, 255, .75); }
.post-card:first-child .post-meta .fa { color: var(--secondary); }
.post-card:first-child .btn-read {
   background: var(--secondary);
   color: var(--primary-dark);
}
.post-card:first-child .btn-read:hover { background: #fff; }

/* ---- Foto terbaru ---- */
.album-grid {
   display: grid;
   gap: 22px;
}
.album-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
   transition: transform .3s ease, box-shadow .3s ease;
}
.album-cover {
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background: #e9eef3;
}
.album-cover img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}
.album-body {
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 18px 20px 20px;
}
.album-body h3 {
   margin: 0 0 6px;
   color: var(--primary);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.4;
}
.album-body p {
   margin: 0 0 14px;
   color: var(--muted);
   font-size: .85rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.btn-album {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: auto;
   padding: 10px 16px;
   border: 1.5px solid var(--accent);
   border-radius: var(--radius-sm);
   background: rgba(42, 157, 143, .12);
   color: var(--accent);
   font-size: .85rem;
   font-weight: 600;
   transition: background-color .25s ease, color .25s ease;
}
.btn-album:hover {
   color: #fff;
   background: var(--accent);
}

/* ---- Video terbaru ---- */
.video-grid {
   display: grid;
   gap: 22px;
}
.video-card {
   overflow: hidden;
   border-radius: var(--radius);
   background: #000;
   box-shadow: var(--shadow);
}
.video-card iframe { border: 0; }

@media (hover: hover) {
   .post-card:hover,
   .album-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
   }
   .post-card:hover .post-thumb img,
   .album-card:hover .album-cover img { transform: scale(1.05); }
}

/* Tata letak kolom mengikuti LEBAR KOLOM KONTEN (bukan lebar layar) */
@container main (min-width: 480px) {
   .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (min-width: 560px) {
   .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (min-width: 640px) {
   .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .post-card:first-child {
      grid-column: 1 / -1;
      flex-direction: row;
   }
   .post-card:first-child .post-thumb {
      position: relative;
      flex: 0 0 55%;
      aspect-ratio: auto;
      min-height: 320px;
   }
   .post-card:first-child .post-thumb img {
      position: absolute;
      inset: 0;
   }
   .post-card:first-child .post-body {
      justify-content: center;
      padding: 32px 30px 28px;
   }
   .post-card:first-child .post-excerpt { -webkit-line-clamp: 4; }
}
@container main (min-width: 1000px) {
   .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Cadangan untuk browser lama (mis. smart TV) yang belum mendukung container query */
@supports not (container-type: inline-size) {
   @media (min-width: 992px) {
      .post-grid,
      .album-grid,
      .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .post-card:first-child { grid-column: 1 / -1; }
   }
}

/* =========================================================
   HALAMAN DALAM
   ========================================================= */
/* Judul halaman (h5.page-title pertama di kolom konten) dibuat lebih besar */
.is-inner [class*="col-"]:not(.sidebar) > .page-title:first-child {
   margin-bottom: 1.5rem;
   padding-bottom: .9rem;
   font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem);
   font-weight: 800;
}
.article-section { margin-top: clamp(32px, 4vw, 48px); }

/* Kotak Bootstrap 4 lama (formulir PPDB, kontak, direktori, dll.) → kartu modern */
.content .card { border-radius: var(--radius); }
.content .card.border { border: 0 !important; }
.content .card.rounded-0 {
   overflow: hidden;
   border-radius: var(--radius) !important;
}
.content .card.border,
.content .card.shadow { box-shadow: var(--shadow) !important; }
.content .card-footer {
   background: #f8fafc;
   border-top: 1px solid var(--line);
}
.content .card-img.rounded-0,
.content .card-img-top.rounded-0 { border-radius: 0 !important; }
.content .btn.rounded-0 { border-radius: var(--radius-sm) !important; }
.content .list-group-item.rounded-0 { border-radius: 0 !important; }

/* Formulir */
.content .control-label {
   padding-top: .35rem;
   color: var(--primary);
   font-size: .88rem;
   font-weight: 600;
}
.content .form-control,
.content .custom-select {
   border: 1px solid #d5dbe1 !important;
   border-radius: var(--radius-sm) !important;
}
.content .form-control:focus,
.content .custom-select:focus {
   border-color: var(--accent) !important;
   outline: 0;
   box-shadow: 0 0 0 .2rem rgba(42, 157, 143, .2);
}
.content .form-text { font-size: .78rem; }
.content .input-group > .form-control:not(:last-child) {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
}
.content .input-group > .btn:last-child,
.content .input-group-append .btn {
   margin-left: -1px;
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.form-check-input:checked {
   background-color: var(--accent);
   border-color: var(--accent);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(42, 157, 143, .2); }

/* ---- Halaman baca tulisan ---- */
.article-card {
   position: relative;
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
}
.article-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   height: 5px;
   background: linear-gradient(90deg, var(--secondary), var(--accent));
}
.article-cover { background: #e9eef3; }
.article-cover img {
   display: block;
   width: 100%;
   max-height: 520px;
   object-fit: cover;
}
.article-body { padding: clamp(22px, 4vw, 40px); }
.article-title {
   margin: 0 0 12px;
   color: var(--primary);
   font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
   font-weight: 800;
   line-height: 1.3;
}
.article-meta {
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--line);
   font-size: .8rem;
}

/* Isi tulisan dari editor */
.post-content {
   color: #343a40;
   font-size: 1rem;
   line-height: 1.85;
   overflow-wrap: break-word;
}
.post-content > :first-child { margin-top: 0; }
.post-content > :last-child { margin-bottom: 0; }
.post-content > * { max-width: 100%; }
.post-content p { margin: 0 0 1.1em; }
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
   margin: 1.6em 0 .6em;
   color: var(--primary);
   font-weight: 700;
   line-height: 1.35;
}
.post-content h1 { font-size: 1.6rem; }
.post-content h2 { font-size: 1.4rem; }
.post-content h3 { font-size: 1.2rem; }
.post-content h4,
.post-content h5 { font-size: 1.05rem; }
.post-content img {
   max-width: 100% !important;
   height: auto !important;
   margin: .5em 0;
   border-radius: 12px;
}
.post-content a {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 2px;
}
.post-content ul,
.post-content ol {
   margin-bottom: 1.1em;
   padding-left: 1.4rem;
}
.post-content li { margin-bottom: .3em; }
.post-content blockquote {
   margin: 1.2em 0;
   padding: .8rem 1.1rem;
   border-left: 4px solid var(--secondary);
   border-radius: 0 10px 10px 0;
   background: #fff8e6;
}
.post-content pre { overflow-x: auto; }
.post-content iframe,
.post-content video { max-width: 100%; }
.post-content iframe[src*="youtube"] {
   width: 100% !important;
   height: auto !important;
   aspect-ratio: 16 / 9;
   border: 0;
   border-radius: 12px;
}
.table-scroll {
   margin: 1em 0;
   overflow-x: auto;
   border-radius: 12px;
   border: 1px solid var(--line);
}
.post-content table {
   width: 100% !important;
   min-width: 520px;
   margin: 0;
   border-collapse: collapse;
   font-size: .9rem;
   line-height: 1.5;
}
.post-content td,
.post-content th {
   padding: .55rem .75rem;
   border: 1px solid var(--line);
   vertical-align: top;
}
.post-content th,
.post-content thead td {
   background: rgba(13, 59, 102, .06);
   color: var(--primary);
   font-weight: 600;
}

/* Kepala sambutan kepala sekolah */
.speech-head {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: clamp(22px, 3vw, 30px) clamp(22px, 4vw, 40px);
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: #fff;
}
.speech-head img {
   flex-shrink: 0;
   width: 88px;
   height: 88px;
   border: 4px solid rgba(255, 255, 255, .9);
   border-radius: 50%;
   background: #fff;
   object-fit: cover;
   object-position: top;
}
.speech-head .article-title {
   margin: 0;
   color: #fff;
   font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
}
.speech-head .headmaster-role {
   margin: 2px 0 0;
   color: var(--secondary);
}

/* Komentar */
.comment-card {
   margin-bottom: 14px;
   padding: 18px 20px;
   border-radius: 14px;
   background: #fff;
   box-shadow: var(--shadow);
}
.comment-reply {
   margin-left: clamp(20px, 6vw, 56px);
   border-left: 4px solid var(--accent);
}
.comment-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 10px;
}
.comment-head strong {
   display: block;
   color: var(--primary);
   font-size: .92rem;
}
.comment-head small {
   color: var(--muted);
   font-size: .76rem;
}
.comment-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(42, 157, 143, .12);
   color: var(--accent);
}
.comment-reply .comment-avatar {
   background: var(--accent);
   color: #fff;
}
.comment-text {
   margin: 0;
   color: #495057;
   font-size: .92rem;
}

/* ---- Daftar tulisan (kategori, tag, arsip) ---- */
.list-stack {
   display: grid;
   gap: 20px;
}
.list-card {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
   transition: transform .3s ease, box-shadow .3s ease;
}
.list-card-thumb {
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: #e9eef3;
}
.list-card-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}
.list-card-body {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
   padding: 20px 22px 22px;
}
@container main (min-width: 560px) {
   .list-card { flex-direction: row; }
   .list-card-thumb {
      position: relative;
      flex: 0 0 38%;
      aspect-ratio: auto;
      min-height: 210px;
   }
   /* foto tegak/mendatar selalu mengikuti tinggi kartu */
   .list-card-thumb img {
      position: absolute;
      inset: 0;
   }
}
@supports not (container-type: inline-size) {
   @media (min-width: 768px) {
      .list-card { flex-direction: row; }
      .list-card-thumb { position: relative; flex: 0 0 38%; aspect-ratio: auto; min-height: 210px; }
      .list-card-thumb img { position: absolute; inset: 0; }
   }
}

/* Daftar teks tanpa gambar (pencarian, baca juga, tulisan lainnya) */
.text-list {
   display: grid;
   gap: 16px;
}
.text-card {
   padding: 20px 22px;
   border-left: 4px solid var(--secondary);
   border-radius: 14px;
   background: #fff;
   box-shadow: var(--shadow);
   transition: transform .3s ease, box-shadow .3s ease;
}
.text-card .post-title { margin-bottom: 6px; }
.text-card .post-excerpt { -webkit-line-clamp: 2; }

@media (hover: hover) {
   .list-card:hover,
   .text-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
   }
   .list-card:hover .list-card-thumb img { transform: scale(1.05); }
}

/* Tombol "Tampilkan lebih banyak" */
.load-more {
   display: flex;
   justify-content: center;
   clear: both;
   float: none !important;
   width: 100%;
   margin: 28px 0 8px;
}
.load-more .btn {
   float: none !important;
   padding: .65rem 1.8rem;
   border-radius: 50px !important;
   font-weight: 600;
}

/* ---- Unduhan ---- */
.file-card {
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
}
.file-table {
   --bs-table-bg: transparent;
   --bs-table-hover-bg: rgba(244, 168, 37, .08);
   font-size: .9rem;
}
.file-table thead th {
   padding: 14px 16px;
   border: 0;
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: #fff;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .5px;
   white-space: nowrap;
}
.file-table td {
   padding: 12px 16px;
   border-color: var(--line);
}
.file-download {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
}
.file-download:hover {
   color: #fff;
   background: var(--accent-dark);
}

/* ---- Direktori guru, alumni, peserta didik ---- */
.profile-alumni .card-img,
.student-directory .card-img {
   aspect-ratio: 3 / 4;
   border-radius: 14px !important;
   background: #e9eef3;
   object-fit: cover;
}
.profile-alumni dl,
.student-directory dl {
   margin: 0;
   font-size: .85rem;
}
.profile-alumni dt,
.student-directory dt {
   color: var(--primary);
   font-weight: 600;
}
.profile-alumni dd,
.student-directory dd { color: #495057; }

/* ---- Hubungi kami & jajak pendapat ---- */
.mapouter {
   overflow: hidden;
   border: 0 !important;
   border-radius: var(--radius);
   background: #e9eef3;
   box-shadow: var(--shadow);
}
.gmap_canvas iframe {
   display: block;
   width: 100% !important;
   height: clamp(260px, 40vw, 420px) !important;
   border: 0;
}
#canvas {
   padding: 16px;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar { min-width: 0; }
.sidebar .widget + .widget { margin-top: 30px; }
.sidebar .widget > .page-title { margin-top: 0 !important; }
.sidebar img { max-width: 100%; height: auto; }
.sidebar .list-group {
   overflow: hidden;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}
.sidebar .list-group-item {
   padding: .8rem 1rem;
   border: 0;
   border-bottom: 1px solid var(--line);
   font-size: .88rem;
}
.sidebar .list-group-item:last-child { border-bottom: 0; }
.sidebar .list-group-item-action:hover { background: rgba(244, 168, 37, .08); }
.sidebar .list-group-item .fa {
   width: 1.1rem;
   margin-right: 4px;
   color: var(--accent);
}
.headmaster-card {
   overflow: hidden;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
   text-align: center;
}
.headmaster-band {
   height: 84px;
   background: linear-gradient(135deg, var(--primary), var(--accent));
}
.sidebar .headmaster-photo {
   position: relative;
   display: block;
   width: 128px;
   height: 128px;
   margin: -64px auto 0;
   border: 5px solid #fff;
   border-radius: 50%;
   background: #e9eef3;
   object-fit: cover;
   object-position: top;
   box-shadow: 0 8px 20px rgba(13, 59, 102, .2);
}
.headmaster-body { padding: 14px 22px 24px; }
.headmaster-name {
   margin: 0;
   color: var(--primary);
   font-size: 1.05rem;
   font-weight: 700;
}
.headmaster-role {
   margin: 2px 0 12px;
   color: var(--accent);
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .5px;
}
.headmaster-text {
   margin: 0 0 16px;
   color: #495057;
   font-size: .88rem;
}
.count-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 28px;
   height: 24px;
   padding: 0 8px;
   border-radius: 12px;
   background: var(--secondary);
   color: var(--primary-dark);
   font-size: .75rem;
   font-weight: 700;
}
.popular-title {
   margin: 0 0 4px;
   color: var(--primary);
   font-size: .88rem;
   font-weight: 600;
   line-height: 1.45;
}
.popular-meta {
   color: var(--muted);
   font-size: .72rem;
}
.widget-box {
   padding: 18px 20px;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
}
.poll-question {
   margin-bottom: 10px;
   color: var(--primary);
   font-weight: 600;
}
.poll-actions {
   display: flex;
   gap: 8px;
   margin-top: 14px;
}
.subscribe-note {
   margin-bottom: 10px;
   color: var(--muted);
   font-size: .85rem;
}
.sidebar .subscribe-box .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.sidebar .subscribe-box .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.banner-link {
   display: block;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: var(--shadow);
}
.banner-link + .banner-link { margin-top: 12px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-cta {
   padding: 0 0 clamp(48px, 6vw, 72px);
   background: var(--light);
}
.cta-card {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   height: 100%;
   padding: 28px 26px;
   border-radius: var(--radius);
   color: #fff;
   box-shadow: var(--shadow);
}
.cta-school { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.cta-address { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.cta-ppdb {
   background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
   color: var(--primary-dark);
}
.cta-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .15);
   font-size: 1.5rem;
}
.cta-ppdb .cta-icon { background: rgba(8, 36, 63, .12); }
.cta-card h4 {
   margin: 2px 0 6px;
   color: inherit;
   font-size: 1.05rem;
   font-weight: 700;
}
.cta-text {
   font-size: .88rem;
   line-height: 1.6;
   opacity: .92;
}
.btn-cta {
   display: inline-flex;
   margin-top: 12px;
   padding: 10px 22px;
   border-radius: 30px;
   background: var(--primary-dark);
   color: #fff;
   font-size: .82rem;
   font-weight: 700;
   letter-spacing: .5px;
}
.btn-cta:hover {
   color: #fff;
   background: var(--primary);
}

.footer-main {
   padding: clamp(48px, 6vw, 70px) 0 clamp(32px, 4vw, 48px);
   background: var(--primary-dark);
   color: rgba(255, 255, 255, .75);
   font-size: .9rem;
}
.footer-main a { color: rgba(255, 255, 255, .88); }
.footer-main a:hover { color: var(--secondary); }
.footer-title {
   position: relative;
   margin-bottom: 18px;
   padding-bottom: 12px;
   color: #fff;
   font-size: .9rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}
.footer-title::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 40px;
   height: 3px;
   border-radius: 3px;
   background: var(--secondary);
}
.contact-list dt {
   color: #fff;
   font-weight: 600;
}
.contact-list dt .fa {
   width: 1.1rem;
   color: var(--secondary);
}
.contact-list dd {
   margin-bottom: 8px;
   overflow-wrap: anywhere;
}
.tag-content-block { display: block; }
.tag a {
   display: inline-block;
   margin: 0 4px 8px 0;
   padding: 6px 14px;
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 20px;
   color: rgba(255, 255, 255, .88);
   font-size: .78rem;
   line-height: 1.3;
}
.tag a:hover {
   border-color: var(--secondary);
   background: var(--secondary);
   color: var(--primary-dark);
}
.social-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0;
}
.social-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-color: var(--primary);
   color: #fff;
   font-size: 16px;
   transition: transform .2s ease;
}
.social-list a:hover .social-icon { transform: translateY(-3px); }
.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.instagram { background-color: #d6249f; }
.youtube { background-color: #ff0000; }
.rss { background-color: #f26522; }
.linked-in { background-color: #007bb6; }

.footer-bottom {
   padding: 16px 0;
   background: #061b30;
   color: rgba(255, 255, 255, .6);
   font-size: .78rem;
}
.footer-bottom a { color: var(--secondary); }
.footer-bottom a:hover { color: #fff; }

/* =========================================================
   PENCARIAN LAYAR PENUH
   ========================================================= */
#search_form {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999;
   width: 100%;
   height: 100%;
   background: rgba(8, 36, 63, .96);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   opacity: 0;
   transform: translate(0, -100%) scale(0, 0);
   transition: all .5s ease-in-out;
}
#search_form.open {
   opacity: 1;
   transform: translate(0, 0) scale(1, 1);
}
#search_form input[type="search_form"] {
   position: absolute;
   top: 50%;
   left: 50%;
   width: min(900px, 90%);
   margin-top: -51px;
   padding: 10px 20px;
   transform: translateX(-50%);
   border: 0;
   border-bottom: 2px solid rgba(255, 255, 255, .35);
   outline: none;
   background: transparent;
   color: #fff;
   font-family: inherit;
   font-size: clamp(1.5rem, 1rem + 3vw, 3.2rem);
   font-weight: 300;
   text-align: center;
}
#search_form input[type="search_form"]:focus { border-bottom-color: var(--secondary); }
#search_form input::placeholder { color: rgba(255, 255, 255, .5); }
#search_form .btn-search {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: 61px;
   padding: 12px 36px;
   transform: translateX(-50%);
   border: 0;
   border-radius: 50px;
   background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
   color: var(--primary-dark);
   font-weight: 700;
}
#search_form .search-close {
   position: absolute;
   top: 1rem;
   right: 1.25rem;
   width: 48px;
   height: 48px;
   border: 1px solid rgba(255, 255, 255, .5);
   border-radius: 50%;
   background: transparent;
   color: #fff;
   font-size: 1.75rem;
   line-height: 1;
}
#search_form .search-close:hover { background: rgba(255, 255, 255, .12); }

/* =========================================================
   LAIN-LAIN
   ========================================================= */
#return-to-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 1020;
   display: none;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
   box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
   text-align: center;
   transition: transform .3s ease;
}
#return-to-top i {
   color: var(--primary-dark);
   font-size: 22px;
   line-height: 50px;
}
#return-to-top:hover { transform: translateY(-3px); }

.btn-success {
   --bs-btn-color: var(--primary-dark);
   --bs-btn-bg: var(--secondary);
   --bs-btn-border-color: var(--secondary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--accent);
   --bs-btn-hover-border-color: var(--accent);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--accent-dark);
   --bs-btn-active-border-color: var(--accent-dark);
   --bs-btn-focus-shadow-rgb: 244, 168, 37;
}
.form-group { transition: background-color .2s ease; }

/* Toastr */
.toast { background-color: #030303; }
.toast-success { background-color: #00cb18; }
.toast-error { background-color: #ef5137; }
.toast-info { background-color: #4b8df8; }
.toast-warning { background-color: #ffb848; }
.toast-title,
.toast-message { text-align: left; }

/* Animasi muncul saat di-scroll */
.js-reveal .reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .7s ease, transform .7s ease;
}
.js-reveal .reveal.visible {
   opacity: 1;
   transform: none;
}

/* =========================================================
   UKURAN LAYAR
   ========================================================= */
@media (max-width: 575.98px) {
   .hero-logo { width: 90px; height: 90px; }
   .btn-start { padding: 14px 30px; font-size: 1rem; }
   .btn-ghost { padding: 12px 26px; }
   .post-body { padding: 18px 18px 20px; }
   .cta-card { padding: 22px 20px; }
   #return-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
   #return-to-top i { line-height: 46px; }
}
@media (max-width: 380px) {
   .nav-brand-text { font-size: .9rem; }
}
/* Monitor lebar, smart TV, layar interaktif */
@media (min-width: 1600px) {
   :root { font-size: 17px; }
   .container { max-width: 1520px; }
}
@media (min-width: 1920px) {
   :root { font-size: 18px; }
   .container { max-width: 1720px; }
}
@media (min-width: 2560px) {
   :root { font-size: 22px; }
   .container { max-width: 2280px; }
}
@media (pointer: coarse) {
   .btn,
   .btn-read,
   .btn-album { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
   .js-reveal .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   KOMPATIBILITAS BOOTSTRAP 4 → 5
   Untuk halaman lain (baca, galeri, formulir, sidebar) yang
   masih memakai kelas Bootstrap 4.
   ========================================================= */
.float-left  { float: left !important; }
.float-right { float: right !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-0 { margin-left: 0 !important; }       .mr-0 { margin-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; }  .mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }   .mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }    .mr-3 { margin-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }  .mr-4 { margin-right: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }    .mr-5 { margin-right: 3rem !important; }
.pl-0 { padding-left: 0 !important; }      .pr-0 { padding-right: 0 !important; }
.pl-1 { padding-left: .25rem !important; } .pr-1 { padding-right: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }  .pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }   .pr-3 { padding-right: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; } .pr-4 { padding-right: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }   .pr-5 { padding-right: 3rem !important; }
@media (min-width: 768px) {
   .float-md-left  { float: left !important; }
   .float-md-right { float: right !important; }
   .text-md-left   { text-align: left !important; }
   .text-md-right  { text-align: right !important; }
   .ml-md-auto { margin-left: auto !important; }
}
@media (min-width: 992px) {
   .text-lg-left  { text-align: left !important; }
   .text-lg-right { text-align: right !important; }
   .ml-lg-auto { margin-left: auto !important; }
}
.no-gutters { margin-right: 0; margin-left: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.no-gutters > [class*="col"] { padding-right: 0; padding-left: 0; }
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light  { font-weight: 300 !important; }
.font-italic { font-style: italic !important; }
.btn-block { display: block; width: 100%; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > [class*="col"] { padding-right: 5px; padding-left: 5px; }
.sr-only {
   position: absolute !important; width: 1px !important; height: 1px !important;
   padding: 0 !important; margin: -1px !important; overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { content: ""; display: block; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before  { padding-top: 75%; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
   position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.badge-primary   { background-color: var(--primary); color: #fff; }
.badge-secondary { background-color: var(--bs-secondary); color: #fff; }
.badge-success   { background-color: var(--accent); color: #fff; }
.badge-danger    { background-color: var(--bs-danger); color: #fff; }
.badge-warning   { background-color: var(--secondary); color: #000; }
.badge-info      { background-color: var(--bs-info); color: #000; }
.badge-light     { background-color: var(--bs-light); color: #000; }
.badge-dark      { background-color: var(--bs-dark); color: #fff; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; min-width: 0; }
.card-deck { display: flex; flex-wrap: wrap; gap: 1rem; }
.card-deck > .card { flex: 1 0 0%; }
.input-group-append,
.input-group-prepend { display: flex; }
/* Kelas formulir Bootstrap 4 yang dipakai di dalam kode PHP (formulir PPDB, direktori) */
.custom-select {
   display: block;
   width: 100%;
   padding: .375rem 2.25rem .375rem .75rem;
   color: var(--text);
   font-size: 1rem;
   line-height: 1.5;
   background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px;
   border: 1px solid #dee2e6;
   border-radius: .375rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
.custom-select-sm {
   padding-top: .25rem;
   padding-bottom: .25rem;
   padding-left: .5rem;
   font-size: .875rem;
}
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
   padding-right: .75rem;
   background-image: none;
}
.text-justify { text-align: justify !important; }
@media (min-width: 576px) {
   .mr-sm-2 { margin-right: .5rem !important; }
}