/* =========================================================

   GLOBAL STYLES

========================================================= */

.text-justify p { text-align: justify; }

.btn-primary {

    background-color: var(--bs-primary) !important;

    border-color: var(--bs-primary) !important;

}



.btn-primary:hover,

.btn-check:focus + .btn-primary,

.btn-primary:focus,

.btn-primary:active,

.btn-outline-primary {

    border-color: var(--bs-link-hover-color) !important;

}



.btn-outline-primary:hover,

.btn-outline-primary:focus,

.btn-outline-primary:active,

.btn-primary:hover,

.btn-check:focus + .btn-primary,

.btn-primary:focus,

.btn-primary:active {

    color: #fff !important;

    background-color: var(--bs-link-hover-color) !important;

}







.text-primary,

.btn-outline-primary

{

    color: var(--bs-primary) !important;

}



.bg-primary {

    background-color: var(--bs-primary) !important;

}

.border-primary {

    border-color: var(--bs-primary) !important;

}



.fs-7 { font-size: 0.875rem !important; } /* 14px */

.fs-8 { font-size: 0.75rem !important; }  /* 12px */

.fs-9 { font-size: 0.625rem !important; } /* 10px */



.object-fit-cover { object-fit: cover; }





/* =========================================================

   NAVBAR & DROPDOWN

========================================================= */



/* Animasi fadeIn untuk dropdown */

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



.dropdown-menu.show {

  animation: fadeIn 0.3s alternate;

}



/* Struktur & ukuran dropdown mega */

.nav-item.dropdown.dropdown-mega { position: static; }

.nav-item.dropdown.dropdown-mega .dropdown-menu {

  width: 90%;

  top: auto;

  left: 5%;

}



/* Navbar container & link */

.navbar {

  transition: background-color 0.3s ease, box-shadow 0.3s ease;

}



.navbar-nav .nav-link {

  display: flex;

  align-items: center;

  font-weight: 700;

  color: var(--bs-body-color);

  padding: 1rem 0.75rem;

  transition: background-color 0.3s ease, color 0.3s ease;

}



.navbar .nav-link:hover,

.navbar .nav-link:focus {

  background-color: var(--bs-primary);

  color: #fff !important;

}



/* Dropdown style */

.navbar-nav .dropdown-menu {

  padding: 0.5rem 0;

  border: none;

  border-radius: 0;

  background-color: var(--bs-primary);

}



.dropdown-menu .dropdown-item {

  color: #fff !important;

  padding: 3px 1rem;

  border-bottom: 1px solid rgba(0, 0, 0, 0.8);

  transition: background-color 0.3s ease, color 0.3s ease;

}



.dropdown-menu .dropdown-item:hover,

.dropdown-menu .dropdown-item:focus,

.dropdown-menu .dropdown-item.active {

  background-color: var(--bs-primary);

  color: #fff !important;

}



.dropdown-menu .dropdown-item:last-child {

  border-bottom: none;

}



/* Dropdown arrow icons */

.nav-item.dropdown > a::after {

  content: "\f107";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  margin-left: 8px;

  font-size: 14px;

  vertical-align: middle !important;

}



.dropend .dropdown-toggle::after {

  content: "\f105";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  float: right;

  margin-left: 10px;

  font-size: 14px;

}



@media (max-width: 767.98px) {

  .nav-item.dropdown > a::after {

    float: right;

    margin-left: auto;

  }

}



@media (min-width: 1200px) {

  .dropdown-menu { width: 300px; }

}



@media (min-width: 1200px) {



  /* Hover open dropdown (parent) */

  .navbar .dropdown:hover > .dropdown-menu {

    display: block;

    margin-top: 0;

  }



  /* Hover open submenu (dropend) */

  .navbar .dropdown-menu > .dropend:hover > .dropdown-menu {

    display: block;

    top: -8px;

    left: 100%;

    margin: 0;

  }



  /* Disable transition flicker */

  .navbar .dropdown-menu {

    transition: none;

  }

}



@media (max-width: 1199.98px) {

  .dropdown-menu {

    position: static;

    float: none;

  }

}



/* =========================================================

   FIX: Scrollable navbar collapse (mobile & tablet)

========================================================= */



@media (max-width: 1199.98px) {



  .navbar-collapse {

    max-height: calc(100vh - 140px); /* sesuaikan tinggi header kamu */

    overflow-y: auto;

    overflow-x: hidden;

  }



  /* Biar scroll halus di iOS */

  .navbar-collapse {

    -webkit-overflow-scrolling: touch;

  }

}



/*

@media (min-width: 992px) {

  

  .navbar .dropdown:hover > .dropdown-menu {

    display: block;

    margin-top: 0;

  }



  

  .navbar .dropdown-menu > .dropend:hover > .dropdown-menu {

    display: block;

    top: -8px;

    left: 100%;

    margin: 0;

  }



  .navbar .dropdown-menu { transition: none; }

}

*/



/* Dropdown hover background parent */

.navbar .dropdown:hover {

  background-color: var(--bs-primary) !important;

}

.navbar .dropdown:hover .nav-link {

  color: #fff !important;

}



/* Active link border bawah */

.navbar-nav > .current-menu-item > a,

.navbar-nav > .current-menu-parent > a,

.navbar-nav > .current-menu-ancestor > a {

  border-bottom: 3px solid #efb15d;

  color: #efb15d !important;

}



/* Hilangkan border di submenu */

.navbar-nav .dropdown-menu .current-menu-item > a,

.navbar-nav .dropdown-menu .current-menu-parent > a,

.navbar-nav .dropdown-menu .current-menu-ancestor > a {

  border-bottom: none !important;

}





/* =========================================================

   HAMBURGER TOGGLER

========================================================= */

.navbar-toggler {

  border: none;

  outline: none;

  padding: 0.25rem;

  width: 32px;

  height: 24px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.toggler-icon {

  position: absolute;

  width: 24px;

  height: 2px;

  background-color: currentColor;

  border-radius: 1px;

  transition: transform 0.3s ease, opacity 0.2s ease;

  transform-origin: center;

}



.top-bar   { transform: translateY(-8px); }

.middle-bar{ transform: translateY(0); }

.bottom-bar{ transform: translateY(8px); }



.navbar-toggler[aria-expanded="true"] .top-bar {

  transform: rotate(45deg);

}

.navbar-toggler[aria-expanded="true"] .middle-bar {

  opacity: 0;

}

.navbar-toggler[aria-expanded="true"] .bottom-bar {

  transform: rotate(-45deg);

}



.navbar-toggler:focus { box-shadow: none; }





/* =========================================================

   NAVBAR SCROLLED STATE

========================================================= */

#navbar-utama.scrolled {

  background-color: var(--bs-body-bg);

}

#navbar-utama.scrolled .navbar {

  background-color: var(--bs-primary);

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

  backdrop-filter: blur(8px);

  border: none !important;

}



#navbar-utama.scrolled .navbar .navbar-container { border: none !important; }



#navbar-utama.scrolled .navbar .nav-link,

#navbar-utama.scrolled .navbar .btn i,

#navbar-utama.scrolled .navbar .navbar-toggler .toggler-icon {

  color: #f8f9fa !important;

}



#navbar-utama:has(#navbar-content.show) .navbar {

  background-color: var(--bs-primary);

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

  backdrop-filter: blur(8px);

  border: none !important;

}



#navbar-utama:has(#navbar-content.show) .nav-link,

#navbar-utama:has(#navbar-content.show) .btn i,

#navbar-utama:has(#navbar-content.show) .navbar-toggler .toggler-icon {

    color: #f8f9fa !important;

}



.navbar {

    --bs-navbar-nav-link-padding-x: 1rem;

}

    

.dropdown-menu .dropdown-item:active {

    background-color: inherit;

    color: inherit;

}



.navbar,

.navbar .navbar-toggler,

.navbar .btn i {

  transition: all 0.3s ease;

}





/* =========================================================

   BERITA TERKINI SECTION

========================================================= */

#berita-terkini .berita-item {

  position: relative;

  transition: all 0.4s ease;

}



#berita-terkini .berita-item:hover {

  transform: scale(1.02);

  box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}



#berita-terkini .overlay-gradient {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1) 60%);

  z-index: 1;

}







/* =========================================================

   SECTION TITLE

========================================================= */

.section-title {

  position: relative;

  font-size: 1rem;

  font-weight: 700;

  margin: 0;

  border-bottom: 3px solid var(--bs-primary);

}



.section-title span {

  background-color: var(--bs-primary);

  color: #fff;

  padding: 6px 20px;

  border-radius: 5px 5px 0px 0px;

  position: relative;

  z-index: 1;

  display: inline-block;

}





/* =========================================================

   INFO KOLOM (Overlay Gradient)

========================================================= */

#info-kolom .overlay-gradient {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1) 70%);

  z-index: 1;

}



#info-kolom a:hover { opacity: 0.9; }





/* =========================================================

   GALLERY SECTION

========================================================= */

#gallery-section .gallery-item {

  position: relative;

  aspect-ratio: 1/1;

}



#gallery-section .gallery-item img {

  transition: transform 0.4s ease;

}



#gallery-section .gallery-item:hover img {

  transform: scale(1.08);

}



#gallery-section .gallery-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  opacity: 0;

  transition: opacity 0.4s ease;

  text-align: center;

}



#gallery-section .gallery-item:hover .gallery-overlay {

  opacity: 1;

}





/* =========================================================

   BREADCRUMB

========================================================= */

.breadcrumb {

  font-size: 0.9rem;

}



.breadcrumb a {

  text-decoration: none;

  color: var(--bs-primary);

}



.breadcrumb a:hover {

  text-decoration: underline;

}



.breadcrumb-item.active {

  color: var(--bs-secondary);

}





/* =========================================================

   COMMENTS

========================================================= */

.comment-list .comment {

  margin-bottom: 1.5rem;

}



.comment-author .avatar {

  border-radius: 50%;

  margin-right: 0.5rem;

}



.comment-meta {

  font-size: 0.875rem;

  color: var(--bs-secondary);

}





/* =========================================================

   BOOTSTRAP DEMO UTILITIES (opsional)

========================================================= */

.bd-placeholder-img {

  font-size: 1.125rem;

  text-anchor: middle;

  user-select: none;

}



@media (min-width: 768px) {

  .bd-placeholder-img-lg { font-size: 3.5rem; }

}



.b-example-divider {

  width: 100%;

  height: 3rem;

  background-color: #0000001a;

  border: solid rgba(0,0,0,.15);

  border-width: 1px 0;

  box-shadow: inset 0 .5em 1.5em #0000001a, inset 0 .125em .5em #00000026;

}



.b-example-vr {

  flex-shrink: 0;

  width: 1.5rem;

  height: 100vh;

}



.bi { vertical-align: -.125em; fill: currentColor; }



.btn-bd-primary {

  --bs-btn-font-weight: 600;

  --bs-btn-color: var(--bs-white);

}



.bd-mode-toggle { z-index: 1500; }



.bd-mode-toggle .bi { width: 1em; height: 1em; }



.bd-mode-toggle .dropdown-menu .active .bi {

  display: block !important;

}



/* =========================================================

   FIX: Dropdown caret & color consistency

========================================================= */



/* 🔹 Hilangkan border default pada caret Bootstrap */

.navbar .dropdown-toggle::after {

  border: none !important;        /* hapus border segitiga default */

  content: "\f107";               /* caret down Font Awesome */

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  margin-left: 8px;

  font-size: 14px;

  line-height: 1;

  vertical-align: middle;

  color: inherit;                 /* ikut warna text */

  background: none !important;    /* pastikan tidak ada background/border */

}



/* 🔹 Untuk dropend (submenu kanan) */

.navbar .dropend .dropdown-toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.navbar .dropend .dropdown-toggle::after {

  border: none !important;

  content: "\f105"; /* fa-chevron-right */

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  font-size: 14px;

  line-height: 1;

  margin-left: 8px;

  color: inherit;

  float: none;                /* hapus float */

  position: relative;         /* biar ikut flex centering */

  top: 0;                     /* reset offset */

  transform: translateY(0);   /* reset jika ada posisi sebelumnya */

}



/* 🔹 Perbaiki warna link dropdown */

.navbar .dropdown-menu .dropdown-item {

  color: #fff !important;

  background: transparent !important;

  border: none;

  white-space: normal !important; /* biar tidak overflow */

}



.navbar .dropdown-menu .dropdown-item:hover,

.navbar .dropdown-menu .dropdown-item:focus {

  background-color: rgba(255, 255, 255, 0.15) !important;

  color: #fff !important;

}



/* 🔹 Saat navbar scrolled, pastikan caret juga jadi terang */

.navbar.scrolled .dropdown-toggle::after,

.navbar.scrolled .dropend .dropdown-toggle::after {

  color: #f8f9fa !important;

}



/* =========================================================

   PAGINATION STYLE (Bootstrap look)

========================================================= */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.25rem;

  margin-top: 2rem;

}



.pagination .page-numbers {

  display: inline-block;

  padding: 0.5rem 0.9rem;

  font-size: 0.9rem;

  font-weight: 500;

  color: var(--bs-primary);

  background-color: #fff;

  border: 1px solid var(--bs-border-color);

  border-radius: 0.375rem;

  text-decoration: none;

  transition: all 0.25s ease;

}



.pagination .page-numbers:hover {

  background-color: var(--bs-primary);

  color: #fff !important;

  border-color: var(--bs-primary);

  text-decoration: none;

}



/* Aktif (halaman saat ini) */

.pagination .page-numbers.current {

  background-color: var(--bs-primary);

  color: #fff !important;

  border-color: var(--bs-primary);

  font-weight: 600;

  cursor: default;

}



/* Tombol Previous & Next */

.pagination .prev,

.pagination .next {

  font-weight: 600;

  padding: 0.5rem 1rem;

}



/* Hilangkan outline biru saat di klik */

.pagination .page-numbers:focus {

  box-shadow: none;

  outline: none;

}



/* Responsif untuk layar kecil */

@media (max-width: 575.98px) {

  .pagination .page-numbers {

    padding: 0.4rem 0.7rem;

    font-size: 0.85rem;

  }

}



/* =========================================================

   FOOTER STYLING (adaptive, clean, no indent)

========================================================= */

footer.footer {

  background-color: var(--bs-primary);

  color: var(--bs-light);

  overflow-x: hidden;

}



footer.footer .widget,

footer.footer .widget_block,

footer.footer .widget_text {

  color: var(--bs-light);

  margin-bottom: 1.5rem;

}



/* Hilangkan indent list bawaan */

footer.footer ul,

footer.footer ol {

  list-style: none;

  padding-left: 0;

  margin: 0;

}



/* Rapi antar item list */

footer.footer ul li,

footer.footer ol li {

  margin-bottom: 0.5rem;

}



/* Link footer */

footer.footer a {

  color: rgba(255, 255, 255, 0.9);

  text-decoration: none;

  transition: color 0.25s ease, opacity 0.25s ease;

}



footer.footer a:hover {

  color: #fff;

  opacity: 1;

}



/* Heading widget footer */

footer.footer .widgettitle,

footer.footer .widget-title,

footer.footer h5,

footer.footer .footer-title {

  color: #fff;

  font-weight: 600;

  margin-bottom: 1rem;

}



/* Divider (opsional agar rapi di dark mode) */

footer.footer hr {

  border-color: rgba(255, 255, 255, 0.25) !important;

}







/* Pastikan list widget block (Gutenberg) rata kiri */

footer.footer .wp-block-list li {

  margin-bottom: 0.5rem;

}



footer.footer .section-title {

  border: none;

}



footer.footer .section-title.mb-3 {

  margin:0px;

  padding:0px;

}



footer.footer .section-title span {

  padding: 0px;

  margin: 0px;

  font-size: 1.25rem;

  font-weight: bold;

}









/* =========================================================

   FOOTER LOGO WIDGET

========================================================= */

.footer-logos {

  text-align: center;

}



.footer-logos .footer-logo {

  max-height: 70px;

  width: auto;

}





.content {

  overflow-x: hidden;

}



/* =========================================================

   HEADING SPACING DALAM ENTRY CONTENT

========================================================= */



.entry-content h1,

.entry-content h2,

.entry-content h3,

.entry-content h4,

.entry-content h5,

.entry-content h6 {

  margin-top: 2rem;       /* jarak atas heading */

  margin-bottom: 1rem;    /* jarak bawah heading */

  font-weight: 600;

  line-height: 1.3;

}



/* H1 di awal artikel (judul utama dalam konten) sedikit lebih lega */

.entry-content h1:first-child {

  margin-top: 0;

}



/* Jika heading langsung setelah heading lain, kurangi jarak agar tidak terlalu jauh */

.entry-content h1 + h2,

.entry-content h2 + h3,

.entry-content h3 + h4 {

  margin-top: 1rem;

}



/* Responsif: di layar besar, beri jarak lebih lebar */

@media (min-width: 992px) {

  .entry-content h1,

  .entry-content h2,

  .entry-content h3,

  .entry-content h4,

  .entry-content h5,

  .entry-content h6 {

    margin-top: 2.5rem;

    margin-bottom: 1.25rem;

  }

}



[data-bs-theme="dark"] .section-title-lg {

  --bs-primary: #f0f0f0;

}

[data-bs-theme="dark"] .btn-outline-primary {

  color: var(--bs-warning) !important;

}





/*

WORDPRESS

*/

/* Pastikan semua elemen dengan class Gutenberg align bekerja */

.has-text-align-center {

  text-align: center !important;

}



.bg-dark-50 {

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(2px);

}

.overlay-dark-50 {

    background-color: rgba(0,0,0,0.5);

    background-clip: content-box; 

}



table {

    max-width: 100%;

}



@media (max-width: 768px) {



    table {

        display: block;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        white-space: nowrap;

    }



}





/* Widget List LInk */



/* Item */

.external-item {

    padding: 16px 0;

    border-bottom: 1px dashed rgba(150, 150, 150, 0.9);

    align-items: flex-start !important; /* supaya rata atas */

}



.external-item:last-child {

    border-bottom: none;

}



/* Logo konsisten */

.external-logo {

    width: 55px;

    height: 55px;

    object-fit: contain;

    flex-shrink: 0;

    margin-top: 4px; /* sedikit turunkan agar sejajar teks */

}



/* Title */

.external-title {

    display: block;

    font-weight: 600;

    text-decoration: none;

    margin-bottom: 4px;

    line-height: 1.2;

}



.external-title:hover {

    text-decoration: underline;

}



/* Description */

.external-desc {

    font-size: 0.85rem;

    line-height: 1.3;

}



.external-item:hover {

    transform: translateX(4px);

    transition: 0.3s ease;

}

/* ===== GUTENBERG SEARCH BLOCK - ICON ONLY ===== */

.wp-block-search {
    position: relative;
}

.wp-block-search label {
    display: none; /* sembunyikan label default */
}

.wp-block-search__inside-wrapper {
    position: relative;
}

.wp-block-search__input {
    width: 100%;
    padding: 10px 42px 10px 14px; /* ruang untuk icon */
    border: 1px solid #ddd;
    border-radius: 6px;
    outline: none;
    transition: 0.3s ease;
    font-size: 14px;
}

.wp-block-search__input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* sembunyikan tombol */
.wp-block-search__button {
    display: none;
}

/* icon search */
.wp-block-search__inside-wrapper::after {
    content: "\f002"; /* magnifying-glass */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}