/* Extracted homepage CSS; rules preserved */
#myButton:focus{
        outline:0;
      }
    @media(max-width: 505px) {
      .btn-cbt1 {
        margin-bottom: 2rem;
      }
      .btn-cbt1,
      .btn-cbt2 {
        display: block;
      }
    }
    @media(min-width: 506px) {
      .btn-cbt1 {
        margin-right: 2rem;
      }
    }

	* {box-sizing: border-box}
	.mySlides {display: none}
	img {vertical-align: middle;}

	/* Slideshow container */
	.slideshow-container {
	  max-width: 1200px;
	  max-height: 500px;
	  margin: auto;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  padding: 16px;
	  margin-top: -22px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.3s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color: rgba(0,0,0,0.8);
	}

	/* Caption text */
	.text {
	  color: #f2f2f2;
	  font-size: 15px;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #717171;
	}

	/* Fading animation */
	.fade {
	  animation-name: fade;
	  animation-duration: 7s;
	}
    
        /* =========================================================
       BERITA HOMEPAGE - URUT KIRI KE KANAN
       ========================================================= */
    
    .card-columns.listrecent {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    
        column-count: unset !important;
        column-gap: 0 !important;
    }
    
    .card-columns.listrecent .card {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        break-inside: auto !important;
    }
    
    
    /* Tablet */
    @media screen and (max-width: 991px) {
    
        .card-columns.listrecent {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    
    }
    
    
    /* HP */
    @media screen and (max-width: 600px) {
    
        .card-columns.listrecent {
            grid-template-columns: 1fr !important;
        }
    
        /* Kurangi jarak kosong sebelum berita */
        .section-berita-home {
            margin-top: 10px !important;
        }
        
        /* Hilangkan ruang kosong template lama */
        .section-berita-home .mainheading {
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }
        
        /* =========================================================
       RAPINKAN CARD BERITA HOMEPAGE
       ========================================================= */
    
    /* Card dibuat konsisten */
    .card-columns.listrecent .card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }
    
    
    /* Semua gambar memiliki tinggi sama */
    .card-columns.listrecent .card > a {
        display: block;
        width: 100%;
    }
    
    .card-columns.listrecent .card > a img,
    .card-columns.listrecent .card .img-fluid {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    
    /* Isi card fleksibel */
    .card-columns.listrecent .card-block {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }
    
    
    /* Metadata selalu ke bawah */
    .card-columns.listrecent .metafooter {
        margin-top: auto !important;
        padding-top: 15px !important;
    }
    
    
	@keyframes fade {
	  from {opacity: .9} 
	  to {opacity: 1}
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
	  .prev, .next,.text {font-size: 11px}
	}
	
    	/* =========================================
       BERANDA - JARAK SLIDESHOW DARI NAVBAR
    ========================================= */
    
    @media (max-width: 991px) {
        .slideshow-container {
            margin-top: 0px !important;
        }
    }
    
    .homepage-popup-trigger {
    display: none !important;
    }
    
    .homepage-popup-image {
        display: block;
        width: 100%;
        height: auto;
        cursor: pointer;
    }

    .homepage-popup-trigger {
        display: none !important;
    }
    
    .homepage-popup-image {
        display: block;
        width: 100%;
        height: auto;
        cursor: pointer;
    }
    
    /* =========================================================
       POPUP LAYANAN DI ATAS NAVBAR
    ========================================================= */
    
    #homepagePopup {
        z-index: 11000 !important;
    }
    
    #homepagePopup + .modal-backdrop,
    .modal-backdrop {
        z-index: 10990 !important;
    }
    
    @media (max-width: 991px) {
        .main-navbar {
            z-index: 1000 !important;
        }
    
        .navbar-menu {
            z-index: 1001 !important;
        }
    
        .navbar-toggle {
            z-index: 1002 !important;
        }
    }