/* Responsive Design */
@media (max-width: 768px) {
    .header-top {
        justify-content: space-between; /* kiri & kanan */
        align-items: center; /* rata tengah vertikal */
    }

    .logo-section {
        font-size: 1.25rem;
    }

    .logo-section img {
        height: 75px;
    }

    .social-section {
        display: inline-block;
    }

    .social-section a {
        font-size: 1.5rem;
        color: var(--text-light);
        margin-left: 1rem;
    }

    .navbar-toggler {
        padding:0rem 0.5rem;
    }

    .search-section {
        display: none;
    }

    .navbar-search-mobile {
        flex: 1;
        padding:0.5rem 0;
        margin: 0 1rem 0 0;
    }

    .news-container .main-news .overlay {
        bottom: 0px;   
    }

    .hero-container {
        height: 450px !important;
        overflow: hidden !important;       /* cegah gambar keluar batas */
        perspective: 1000px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .overlay-2 {
        position: absolute;
        bottom: 0px !important;                  /* mulai dari bawah */
        left: 0;
        right: 0;
        padding: 1rem 1.5rem;
        color: #fff;
        background: linear-gradient(
            to bottom,               /* arah vertikal */
            rgba(0, 0, 0, 0),        /* atas transparan */
            rgba(0, 0, 0, 0.5) 50%,  /* tengah gelap */
            rgba(0, 0, 0, 0)         /* bawah transparan */
        );

        backdrop-filter: blur(1px);
    }

    .hero-left {
        height:450px !important;
    }

    .hero-right {
        height:216px !important;
    }
    

    .hero-title h2 {
        margin-bottom: 10px !important;
        font-size: 1rem !important;
    }

    .hero-title {
        margin-bottom:10px;
        text-shadow: 0 1px 2px rgba(0,0,0,.8) !important;
        font-weight: 600;
        font-size: 0.9rem !important;
         display: -webkit-box;        /* wajib untuk line-clamp */
        -webkit-box-orient: vertical; /* arah box vertikal */
        -webkit-line-clamp: 3;       /* maksimal 3 baris */
        overflow: hidden;            /* sembunyikan sisa teks */
        text-overflow: ellipsis;     /* tampilkan ... */
        }

    
    .break-title {
          display: -webkit-box;        /* wajib untuk line-clamp */
        -webkit-box-orient: vertical; /* arah box vertikal */
        -webkit-line-clamp: 3;       /* maksimal 3 baris */
        overflow: hidden;            /* sembunyikan sisa teks */
        text-overflow: ellipsis;     /* tampilkan ... */
    }

    .break-title-2 {
          display: -webkit-box;        /* wajib untuk line-clamp */
        -webkit-box-orient: vertical; /* arah box vertikal */
        -webkit-line-clamp: 2;       /* maksimal 2 baris */
        overflow: hidden;            /* sembunyikan sisa teks */
        text-overflow: ellipsis;     /* tampilkan ... */
    }
    


    .news-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 1rem;
    }
    .news-container .main-news {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
         max-height:330px;
    }

    .news-container .news-index {
        min-height: 240px;
        max-height:380px;
        overflow: hidden;
    }

    .news-container .side-news {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: 0.5rem;
        margin-top:-10px;
        margin-bottom:8px;
    }
    
   
    .news-container .side-news .item {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
    }

   

    .news-container .side-news .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }

    .news-container .side-news .item p {
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0.7rem 0.75rem;
        color: #fff;
        z-index: 2;
        text-shadow: 0 1px 2px rgba(0,0,0,.8);
    }

    .breaking-news {
        margin-left: 10px;     
        padding:0.25rem 0.5rem;
        border-radius: 0;
        font-weight: normal;
    }

    .latest {
        padding-left:0.75rem;
    }

    .featured-title {
        font-size: 1.2rem;
        font-weight: normal;
        margin-bottom: 0.5rem;
    }


    .jadwalsholat button.nav-link {
        padding: 0.5rem 0.5rem;
        font-size: 0.85rem;
    }

    .jadwal-table {
        font-size:1rem;
    }

    .daerah-title {
        padding-left: 2.5rem;
    }

    .daerah {
        padding: 0rem 2rem 2rem 2.5rem;
    }

    .footer-container {
        width: 100%;
         grid-template-columns: 1fr;
        text-align: left;
    }

     .mobile-break {
        display: inline;
    }

    .img-fixed {
        width: 100%;       /* lebar div container */
        height: 86px;     /* tinggi tetap */
        object-fit: cover; /* crop agar tetap proporsional */
    }

    .img-fixed-2 {
        width: 100%;       /* lebar div container */
        height: 86px;     /* tinggi tetap */
        object-fit: cover; /* crop agar tetap proporsional */
    }
    
    .sticky-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        background-color:#FFF; /* semi-transparent */
        box-shadow: 0 -2px 6px rgba(0,0,0,0.2); /* shadow lebih halus */
        z-index: 1000;
    }

    .sticky-menu div {
        font-size: 0.8rem; /* lebih kecil dari small default (~0.875rem) */
        margin-bottom:5px;
    }

    a.sticky.active,
    a.sticky.active i {
        color: red !important;
    }
    a.sticky {
        color: #333;
        transition: color 0.2s, transform 0.2s;
    }
    a.sticky:hover {
        transform: translateY(-4px);
        color: red;
    }

    .news-detail-title {
         font-size: 1.5rem;
        font-weight: 700px;
    }

      /* Judul max 2 baris */
    .search-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Konten max 3 baris */
    .search-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}