/* Atur skala tampilan global */
    html {
      font-size: 80%;   /* semua elemen berbasis rem mengecil */
    }
    
    body {
      zoom: 0.8;        /* Chrome, Edge, Safari mendukung */
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-family: 'Bookman Old Style', Georgia, serif;
    }
/* Lebarkan popover konten */
.popover {
  max-width: 500px;   /* default 276px, kita lebarkan */
}
.popover pre {
  margin: 0;
  font-family: Corbel, sans-serif;
  white-space: pre-wrap; /* biar teks rapi */
}
.modal-backdrop.show {
      opacity: 0.95;          /* tingkat gelap */
      background-color: #000; /* warna hitam */
      position: fixed;        /* pastikan menempel ke layar */
      top: 0;
      left: 0;
      width: 1500vw;
      height: 1500vh;
      z-index: 1040;          /* di bawah modal tapi di atas konten */
    }
    .responsive-box {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      padding: 25px;
      text-align: center;
      line-height: 1.4;
      width: 25%;              /* default desktop */
      max-width: 700px;
    }
    .responsive-box h4 {
      font-size: 1.6rem;        /* default desktop */
    }
    .responsive-box p {
      font-size: 1rem;          /* default desktop */
    }
    
    /* Tablet */
    @media (max-width: 768px) {
      .responsive-box {
        width: 80%;
      }
      .responsive-box h4 {
        font-size: 1.4rem;
      }
      .responsive-box p {
        font-size: 0.9rem;
      }
    }
    
    /* HP kecil */
    @media (max-width: 480px) {
      .responsive-box {
        width: 95%;
        padding: 15px;          /* padding lebih kecil biar pas */
  }
  .responsive-box h4 {
    font-size: 1.2rem;
  }
  .responsive-box p {
    font-size: 0.85rem;
  }
}

/* Tombol toggle */
.toggle-button h5 {
  margin: 0 0 15px 20px;    /* rapikan margin */
  font-size: 1rem;
}

/* Tombol Brankas */
.button-container a.btn-info {
  margin-right: 10px;
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* Tablet */
@media (max-width: 768px) {
  .toggle-button h5 {
    margin: -5px 0 10px 10px;
    font-size: 0.9rem;
  }
  .button-container a.btn-info {
    margin-right: 5px;
    padding: 4px 8px;
    font-size: 0.85rem;
  }
}

/* HP kecil */
@media (max-width: 480px) {
  .toggle-button h5 {
    margin: -10px 0 8px 5px;
    font-size: 0.8rem;
  }
  .button-container a.btn-info {
    margin-right: 3px;
    margin-top: -5px;
    padding: 3px 6px;
    font-size: 0.75rem;
  }
}
#narration {
  display: none;
  transition: all 0.5s ease; /* transisi halus */
}

#narration.open {
  display: block;
}

#icon {
  display: inline-block;
  transition: transform 0.4s ease; /* animasi rotasi halus */
}
#icon.rotate {
  transform: rotate(180deg);
}
                    .img-mask-wrapper::after {
                      content: "";
                      position: absolute;
                      top: 0; left: 0;
                      width: 100%; height: 5%;
                      border-radius: 5px 5px 0 0;
                      background: linear-gradient(
                        to bottom, 
                        rgba(248,249,250,0.01),   /* light penuh di atas */
                        rgba(248,249,250,0) /* hampir transparan di bawah */
                      );
                    }
                    .judul-gradientx {
                      font-size: clamp(1rem, 2.5vw, 1.8rem);
                      font-weight: bold;
                      font-family: 'Roboto', sans-serif; /* ganti font agar konsisten */
                      line-height: 1.1;   /* lebih rapat */
                      margin-top: 0px;   /* kurangi jarak atas */
                      margin-bottom: 3px; /* rapatkan jarak bawah */
                    }
                    
                    .judul-gradient {
                      font-size: clamp(0.9rem, 2vw, 1.2rem);
                      line-height: 1.2;   /* lebih rapat */
                      margin-top: -5px;
                    }
                    .judul-gradientx {
                      font-family: 'Bookman Old Style', Georgia, serif;
                      letter-spacing: 0.6px;       /* jarak antar huruf */
                      text-shadow: 1px 1px 2px #ccc; /* bayangan tipis */
                    }
                    
/* Hilangkan ruang kosong jika iklan tidak tampil */
.ad-space:empty,
.ad-space ins:empty {
  display: none !important;
}
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.card video {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
}
.card-title {
  font-size: 14px;
  line-height: 1.8;
}
.video-link {
  text-decoration: none;
}
  #videoGallery {
    scroll-behavior: smooth;
    width: 100%;
  }
  .cardy {
    border-radius: 10px;
  }
  .cardy video {
    border-radius: 10px 10px 0 0;
  }
  .cardy {
  width: 100%;
  min-height: 200px;        /* tinggi minimum card seragam */
  display: flex;
  flex-direction: column;   /* isi tersusun vertikal */
  justify-content: space-between;
  border-radius: 10px;
}

.cardy video {
  width: 100%;
  height: 150px;            /* tinggi video seragam */
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.cardy .card-body {
  flex-grow: 1;             /* isi judul menyesuaikan ruang */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.cardy .card-title {
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  text-align: center;
  word-break: break-word;   /* pecah kata panjang */
}

/* Efek hover untuk card */
.kartu-berita {
  transition: all 0.3s ease;
  background-color: #fff; /* default putih */
}

.kartu-berita:hover {
  background-color: #ccc; /* abu-abu saat hover */
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Judul gradasi default */
.judul-gradient {
  background: linear-gradient(90deg, blue, green, purple, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  background-size: 200% auto;
  animation: shine 4s linear infinite;
  transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
}
/* Saat hover: teks putih */
.kartu-berita:hover .judul-gradient {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fa05e6;
  color: #fff;
}
@keyframes shine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.judul-gradientx {
  background: linear-gradient(270deg, blue, green, yellow, red, black);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  background-size: 200% auto;
  animation: shine 5s linear infinite;
  transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
}

/* Animasi gradasi bergerak dari kiri ke kanan */
@keyframes shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Saat hover: teks putih */
.kartu-berita:hover .judul-gradientx {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fa05e6;
  color: #fff;
}

@keyframes shine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
    /* Navbar fix */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
    }
    .heading-wrapper {
      display: flex;
      align-items: baseline;      /* sejajarkan elemen dengan baseline teks */
      margin-left: 0%;            /* teks mepet ke kiri */
      margin-top: -25px;           /* geser sedikit ke atas */
      margin-bottom: 10px;
    }
    
    .heading-wrapper::before {
      content: "";
      width: 40px;                /* garis kiri pendek */
      height: 3px;
      background-color: #b9b8b874;
      margin-right: 1px;          /* jarak rapat ke teks */
      align-self: baseline;       /* sejajar dengan batas bawah teks */
    }
    
    .heading-wrapper::after {
      content: "";
      flex: 1;                    /* garis kanan fleksibel */
      height: 3px;
      background-color: #b9b8b874;
      margin-left: 6px;           /* jarak rapat ke teks */
      align-self: baseline;       /* sejajar dengan batas bawah teks */
    }
    
    
    h4 {
      position: relative;
      top: 10px;
      left: 0px;
      margin: 1;
      color: rgba(6, 20, 174, 0.82);
      font-size: 35px;
      z-index:0;
    }
    
    h5 {
      position: relative;
      top: 0;
      left: -4px;
      margin: 0;
      color: rgba(240, 13, 217, 0.7);
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    input {
      background-color: rgba(194, 187, 238, 0.62);
      border-radius: 10px;
      width: 100px;
      height: 20px;
    }
    
    .toggle-btn {
      background-color: #e0e0e0;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .toggle-btn.active {
      background-color: #007bff;
      color: white;
      font-weight: bold;
    }
    
    .button-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      margin: 10px 5px;
    }
    
    .button-container button {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border: none;
      background-color: transparent;
    }
    
    .judul-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 35px 10px 35px;
    }
    
    .judul-bar h4 {
      margin: 0;
      color: rgba(13, 72, 232, 0.7);
      font-size: 25px;
    }
    
    /* Menu toggle fix */
    .menu-toggle {
      display: none;
      visibility: hidden;
      opacity: 0;
      z-index: -1;
      position: absolute;
    }
    .jadwal-horizontal {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 5px;
      padding: 5px;
      border-radius: 0px;
      justify-content: center;   /* posisi flex ke tengah */
      margin-top: -10px;
      position: relative;
      width: 100%;
      min-height: 120px;
    }
    
    .jadwal-item {
      white-space: nowrap;
      font-size: 0.9rem;
      color: #333;
      text-align: center;        /* teks rata tengah */
      margin-top: 0px;
      display: none; /* semua item disembunyikan */
      animation: fadeIn 1s ease-in-out;
    }
    .jadwal-item {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      transition: opacity 0.5s ease-in-out;
    }
    
    /* efek penghapus masuk */
    .jadwal-item.active {
      opacity: 1;
      animation: wipeIn 1s forwards;
    }
    
    /* efek penghapus keluar */
    .jadwal-item.exit {
      opacity: 0;
      animation: wipeOut 1s forwards;
    }
    
    @keyframes wipeIn {
      0% { clip-path: inset(0 100% 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }
    
    @keyframes wipeOut {
      0% { clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 0 0 100%); }
    }
    
    .blink {
      animation: blink-animation 1s steps(2, start) infinite;
    }
    
    @keyframes blink-animation {
      to {
        visibility: hidden;
      }
    }
    .jadwal-item.active {
      display: block; /* hanya item aktif yang tampil */
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    
    
    /* Animasi pulse */
    @keyframes pulse {
      0%   { transform: scale(1); opacity: 1; }
      50%  { transform: scale(1.2); opacity: 0.7; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    
    @keyframes wipeOut {
      0% { clip-path: inset(0 0 0 0); opacity: 1; }
      100% { clip-path: inset(0 0 0 100%); opacity: 0; }
    }
    
    /* Samakan gaya link aktif di semua halaman */
    .ga-nav.active,
    .dropdown-toggle.active {
      color: var(--accent-color);   /* atau warna highlight */
      background: none;
      line-height: 34px;            /* samakan tinggi baris */
      padding: 8px 12px;            /* konsisten dengan link lain */
      border-radius: 4px;
    }
    
    /* Pastikan container sejajar vertikal */
    .nav-right,
    #subtopnav {
      display: flex;
      align-items: center; /* ini yang menjaga semua item rata tengah */
      gap: 8px;
    }
    .heading-selamat {
          font-family: 'Great Vibes', cursive;
          line-height: 1.2;
          letter-spacing: 0.5px;      /* sedikit spasi untuk keterbacaan */
          color: #2c3e50;             /* warna elegan */
          z-index:9999;
          
          }
        .color-cycle {
      animation: colorChange 5s infinite;
        }
    
        @keyframes colorChange {
          0%   { color: var(--bs-primary); }
          20%  { color: var(--bs-success); }
          30%  { color: var(--bs-dark); }
          40%  { color: var(--bs-info); }
          50%  { color: var(--bs-secondary); }
          60%  { color: var(--bs-dark); }
          75%  { color: var(--bs-yellow); }
          80%  { color: var(--bs-dark); }
          90% { color: var(--bs-danger); }
          100% { color: var(--bs-secondary); }
        }
        
        .animasi-kiri-kanan {
          animation: gerakKiriKanan 10s infinite ease-in-out;
          display: inline-block;
          transition: font-family 0.5s ease, font-size 0.5s ease, color 0.5s ease;
        }
        
        @keyframes gerakKiriKanan {
          0%   { transform: translateX(0); color: white; }
          40%  { transform: translateX(300px); color: white; }
          50%  { transform: translateX(700px); color: green; } /* posisi kanan → hijau */
          60%  { transform: translateX(300px); color: white; }
          100% { transform: translateX(0); color: white; }
        }
        
       
        /* Default untuk desktop */
        .jadwal-item h4 {
          font-size: 1.2rem;
        }
        
        .jadwal-item {
          font-size: 1rem;
        }
        
        /* Tablet */
        @media (max-width: 768px) {
          .jadwal-item h4 {
            font-size: 1.05rem;
          }
          .jadwal-item {
            font-size: 0.95rem;
          }
        }
        
        /* HP */
        @media (max-width: 576px) {
          .jadwal-item h4 {
            font-size: 0.95rem;   /* judul lebih kecil */
          }
          .jadwal-item {
            font-size: 0.70rem;   /* isi teks lebih kecil */
            line-height: 1.3;     /* jarak antar baris lebih rapat */
        }
          .countdown {
            font-size: 0.8rem;    /* countdown lebih kecil */
          }
        }
        .animasi-getar {
              animation: gerakGetar 1.2s infinite ease-in-out;
              display: inline-block;
            }
            @keyframes gerakGetar {
              0%, 10% { transform: translate(0); }              /* diam */
              15% { transform: translate(-2px, 2px); }          /* mulai getar */
              16% { transform: translate(-3px, -3px); }
              17% { transform: translate(3px, 3px); }
              18% { transform: translate(-3px, 3px); }
              19% { transform: translate(3px, 3px); }
              20% { transform: translate(-5px, 5px); }
              21% { transform: translate(3px, 3px); }
              22% { transform: translate(3px, -3px); }
              25% { transform: translate(2px, -2px); }
              26% { transform: translate(-5px, -5px); }
              27% { transform: translate(2px, 2px); }
              28% { transform: translate(-3px, -3px); }
              29% { transform: translate(2px, -2px); }
              30% { transform: translate(2px, -2px); }
              35% { transform: translate(0); }                  /* kembali diam */
              100% { transform: translate(0); }                 /* tetap diam sampai siklus ulang */
            }
            
            .caret {
          display: inline-block;
          transition: transform 0.4s ease; /* durasi & keluwesan */
        }
        
        /* Saat narration terbuka */
        .narration.open ~ .button-container .caret {
          transform: rotate(180deg); /* putar ke atas */
        }