/* =========================================
   1. GLOBAL & LAYOUT LOCK
   ========================================= */
   html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden !important; 
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
}

.body {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: 0 14px; /* Padding kiri-kanan body */
    background-color: #ffffff;
    z-index: 1; overflow-y: auto; /* PERBAIKAN: Gunakan auto agar konten bisa discroll jika panjang */
    overflow-x: hidden;
}

/* =========================================
   2. HEADER (JUDUL MASJID)
   ========================================= */
.header {
    flex-shrink: 0; 
    /* min-height: 40px; HAPUS atau Kecilkan jika terlalu tinggi */
    display: flex; flex-direction: column;
    align-items: center; 
    padding-top: 20px; /* Tambah padding atas agar tidak terlalu mepet status bar HP */
    margin-bottom: 15px; 
    position: relative; 
    z-index: 10;
    width: 100%; /* Pastikan lebar penuh */
}

.header h5 { font-weight: 700; font-size: 16px; color: #333; margin: 0; letter-spacing: 0.5px; }
.header h6 { font-weight: 400; font-size: 12px; color: #666; margin: 4px 0 0 0; }

/* =========================================
   3. JADWAL SHOLAT (FIXED HEADER CARD)
   ========================================= */
.body .box-schedule {
    flex-shrink: 0; 
    position: relative; 
    display: flex; 
    flex-direction: column; /* Susun Atas-Bawah */
    height: 196px; 
    border-radius: 20px;
    
    /* PERBAIKAN: Hapus padding parent agar full width */
    padding: 0 !important; 
    
    color: #fff; 
    margin-bottom: 15px; 
    z-index: 10;
    overflow: hidden; /* Pastikan sudut rounded memotong gambar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Tambah bayangan halus */
}

/* Warna Dasar (Akan menjadi warna footer Kas Masjid) */
.body .box-schedule.bg-darkblue { background-color: #012a8a; }
.body .box-schedule.bg-indianred { background-color: #dc575a; }
.body .box-schedule.bg-lightblue { background-color: #0083e6; }

/* BAGIAN ATAS: GAMBAR & WAKTU (Flex Item 1) */
.body .box-schedule .box-stacked { 
    position: relative !important; /* Ubah ke relative */
    width: 100%; 
    flex: 1; /* Ambil sisa ruang di atas footer */
    background-size: cover; 
    background-position: center;
    padding: 20px 20px 10px 20px; /* Padding dalam gambar */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

/* Background Variants */
.body .box-schedule .box-stacked.bg-night { background-image: url("/asset-webview/masjid/images/night.png"); }
.body .box-schedule .box-stacked.bg-afternoon { background-image: url("/asset-webview/masjid/images/afternoon.png"); }
.body .box-schedule .box-stacked.bg-evening { background-image: url("/asset-webview/masjid/images/evening.png"); }

/* BAGIAN BAWAH: FOOTER KAS MASJID (Flex Item 2) */
.body .box-schedule .information-container { 
    height: 46px; /* Tinggi fix untuk footer */
    width: 100%;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 13px; 
    padding: 0 20px; /* Padding kiri kanan teks footer */
    background-color: transparent; /* Transparan agar warna parent terlihat */
    z-index: 2;
}

/* Konten Dalam Header */
.body .box-schedule .information-container .btn-link { 
    background: none; border: none; cursor: pointer; text-decoration: none; 
    font-weight: 700; font-size: 14px; display: flex; align-items: center; 
    gap: 10px; color: #fff; 
}
.body .box-schedule .information-container .btn-link .circle-icon { 
    height: 20px; width: 20px; background-color: #fff; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    color: #0083e6; /* Warna icon panah */
}

/* Typography Jam & Tanggal */
.body .box-schedule .box-stacked .top-content { 
    display: flex; width: 100%; justify-content: space-between; align-items: flex-start; 
}
.body .box-schedule .box-stacked .top-content .left-content .clock-text { 
    font-weight: 700; font-size: 36px; line-height: 1; color: white; margin-bottom: 4px;
}
.body .box-schedule .box-stacked .top-content .left-content .sub-text {
    font-size: 12px; color: rgba(255,255,255,0.9);
}
.body .box-schedule .box-stacked .top-content .right-content {
    text-align: right;
}
.body .box-schedule .box-stacked .top-content .right-content .sub-text { 
    font-size: 11px; color: white; display: block; margin-bottom: 2px;
}

/* Prayer Time Row */
.body .box-schedule .box-stacked .prayer-container { 
    display: flex; justify-content: space-between; align-items: center; width: 100%; 
    margin-top: auto; /* Dorong ke bawah container gambar */
    padding-top: 10px;
}
.body .box-schedule .box-stacked .prayer-container .prayer-item { 
    display: flex; flex-direction: column; align-items: center; 
}
.body .box-schedule .box-stacked .prayer-container .prayer-item .prayer-time { 
    font-size: 12px; font-weight: 700; color: white; margin-bottom: 2px;
}
.body .box-schedule .box-stacked .prayer-container .prayer-item .prayer-name { 
    font-size: 10px; color: rgba(255,255,255,0.8); 
}

/* Highlight Sholat Aktif (Opsional - Kotak transparan) */
.body .box-schedule .box-stacked .prayer-container .prayer-item.active {
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 8px;
}

/* =========================================
   4. MENU LAYANAN (GRID 4 KOLOM FIX)
   ========================================= */
/* =========================================
   1. GLOBAL & LAYOUT LOCK
   ========================================= */
   html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden !important; 
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
}

.body {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: 0 14px; /* Padding kiri-kanan body */
    background-color: #ffffff;
    z-index: 1; overflow-y: auto; /* PERBAIKAN: Gunakan auto agar konten bisa discroll jika panjang */
    overflow-x: hidden;
}

/* =========================================
   2. HEADER (JUDUL MASJID)
   ========================================= */
.header {
    flex-shrink: 0; 
    /* min-height: 40px; HAPUS atau Kecilkan jika terlalu tinggi */
    display: flex; flex-direction: column;
    align-items: center; 
    padding-top: 20px; /* Tambah padding atas agar tidak terlalu mepet status bar HP */
    margin-bottom: 15px; 
    position: relative; 
    z-index: 10;
    width: 100%; /* Pastikan lebar penuh */
}
.title-content { display: none; } 

#menu_home {
    flex-shrink: 0;
    display: grid !important;
    /* 4 Kolom Rata */
    grid-template-columns: repeat(4, 1fr) !important; 
    
    /* PERBAIKAN 1: Beri jarak vertikal antar baris agar tidak menumpuk */
    row-gap: 20px !important; 
    column-gap: 0px !important;
    
    padding: 0 10px !important; 
    margin-bottom: 30px; /* Tambah margin bawah total */
    width: 100%;
    justify-items: center;
    align-items: start; /* Pastikan item rata atas */
}

.service-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    text-decoration: none; 
    /* Pastikan item mengambil ruang vertikal sesuai konten */
    height: auto; 
}

.service-frame { 
    display: flex; justify-content: center; align-items: center; 
    height: 50px; width: 50px; border-radius: 50%; margin-bottom: 8px; 
    flex-shrink: 0;
}
.service-frame:active { transform: scale(0.95); background-color: rgba(226, 185, 71, 0.1); }

.service-label { 
    /* PERBAIKAN 2: Kecilkan font sedikit agar muat */
    font-size: 10px !important; 
    color: #333; 
    text-align: center; 
    width: 100%; 
    line-height: 1.3; /* Jarak antar baris teks */
    
    /* PERBAIKAN 3: Izinkan teks turun ke bawah (Wrap) */
    white-space: normal !important; 
    
    /* PERBAIKAN 4: Batasi maksimal 2 baris agar tinggi seragam */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* Opsional: Beri tinggi minimum agar baris yang cuma 1 kata tetap sejajar dengan yang 2 kata */
    min-height: 26px; 
    padding: 0 2px;
}

.menu-hidden { display: none !important; }
.btn-toggle-menu { cursor: pointer; }

.menu-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 0 5px; /* Sedikit padding agar tidak mepet layar */
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

.label-section {
    font-size: 15px;
    font-weight: 700;
    color: #1F2937; /* Warna hitam soft */
}

/* Grid Layout 4 Kolom */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom presisi */
    row-gap: 24px; /* Jarak atas-bawah antar baris */
    column-gap: 8px;  /* Jarak antar kolom */
    width: 100%;
}

/* Item Wrapper */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    cursor: pointer;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Efek sentuh */
.menu-item:active .menu-icon-circle {
    transform: scale(0.95);
    background-color: #E5E7EB;
}

/* Lingkaran Icon (KUNCI TAMPILAN) */
.menu-icon-circle {
    width: 54px;  /* Ukuran lingkaran */
    height: 54px;
    border-radius: 50%; /* Membuat bulat sempurna */
    
    /* Warna Background Lingkaran (Pilih salah satu) */
    background-color: #F3F4F6; /* Abu sangat muda (Style Gojek/Tokped) */
    /* background-color: #FFF9E6; */ /* Cream Emas (Style Masjid) */
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px; /* Jarak antara bola dan teks */
    
    /* Shadow halus agar icon timbul (Opsional) */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.1s, background-color 0.1s;
}

/* Ukuran Gambar Icon di dalam Lingkaran */
.menu-icon-circle img {
    width: 28px;  /* Ukuran icon proporsional */
    height: 28px;
    object-fit: contain;
}

/* Teks Menu (Font Jelas) */
.menu-text {
    font-size: 11px;
    font-weight: 600; /* Semi-bold agar terbaca jelas */
    color: #374151;   /* Abu gelap (bukan hitam pekat agar elegan) */
    text-align: center;
    line-height: 1.25;
    width: 100%;
    
    /* Batasi maks 2 baris, selebihnya ... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 2px;
}

/* =========================================
   5. SLIDER (FIX ABSOLUTE POSITION)
   ========================================= */
.photo-gallery {
    position: relative;
    width: 100%;
    height: 240px !important; 
    min-height: 240px !important;
    max-height: 240px !important;
    border-radius: 16px;
    overflow: hidden !important;
    background-color: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    z-index: 1;
    display: block !important;
}

.swiper-container {
    width: 100% !important; height: 100% !important;
    position: absolute !important; top: 0; left: 0;
}

.swiper-wrapper, .swiper-slide {
    width: 100% !important; height: 100% !important;
}

.info-card {
    width: 100%; height: 100%;
    position: relative; overflow: hidden;
}

.card-img-full {
    position: absolute !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center;
    display: block; z-index: 1;
}

.card-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    padding: 24px 20px;
    display: flex; flex-direction: column; justify-content: flex-end;
    align-items: flex-start; z-index: 2;
}

.card-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.card-text { color: #e2e8f0; font-size: 13px; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.btn-baca {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5);
    color: white; padding: 6px 16px; font-size: 12px; border-radius: 50px;
    text-decoration: none; backdrop-filter: blur(4px); margin-top: 5px;
    display: inline-block; position: relative; z-index: 50;
    cursor: pointer; pointer-events: auto;
}

.swiper-pagination { bottom: 12px !important; z-index: 10; }
.swiper-pagination-bullet { background: #fff; opacity: 0.5; width: 6px; height: 6px; }
.swiper-pagination-bullet-active { background: #d3af37; opacity: 1; width: 24px; border-radius: 4px; transition: width 0.3s; }

/* =========================================
   6. BOTTOM IMAGE & RESPONSIVE
   ========================================= */
.bottom-image-container {
    flex: 1; min-height: 0; position: relative; width: 100%; margin-top: -10px;
    z-index: 1; overflow: hidden; display: flex; align-items: flex-end;
}
.bottom-image-container img {
    width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block;
}

@media screen and (max-height: 680px) {
    .header { margin-bottom: 5px; min-height: 30px; }
    .header h5 { font-size: 15px; }
    .body .box-schedule { height: 175px; margin-bottom: 10px; }
    .body .box-schedule .box-stacked { padding: 15px 15px 5px 15px; }
    .photo-gallery { height: 200px !important; min-height: 200px !important; max-height: 200px !important; }
}
.btn-toggle-menu { cursor: pointer; }

/* =========================================
   5. SLIDER (FIX ABSOLUTE POSITION)
   ========================================= */
.photo-gallery {
    position: relative;
    width: 100%;
    height: 240px !important; 
    min-height: 240px !important;
    max-height: 240px !important;
    border-radius: 16px;
    overflow: hidden !important;
    background-color: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    z-index: 1;
    display: block !important;
}

.swiper-container {
    width: 100% !important; height: 100% !important;
    position: absolute !important; top: 0; left: 0;
}

.swiper-wrapper, .swiper-slide {
    width: 100% !important; height: 100% !important;
}

.info-card {
    width: 100%; height: 100%;
    position: relative; overflow: hidden;
}

.card-img-full {
    position: absolute !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center;
    display: block; z-index: 1;
}

.card-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    padding: 24px 20px;
    display: flex; flex-direction: column; justify-content: flex-end;
    align-items: flex-start; z-index: 2;
}

.card-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.card-text { color: #e2e8f0; font-size: 13px; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.btn-baca {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5);
    color: white; padding: 6px 16px; font-size: 12px; border-radius: 50px;
    text-decoration: none; backdrop-filter: blur(4px); margin-top: 5px;
    display: inline-block; position: relative; z-index: 50;
    cursor: pointer; pointer-events: auto;
}

.swiper-pagination { bottom: 12px !important; z-index: 10; }
.swiper-pagination-bullet { background: #fff; opacity: 0.5; width: 6px; height: 6px; }
.swiper-pagination-bullet-active { background: #d3af37; opacity: 1; width: 24px; border-radius: 4px; transition: width 0.3s; }

/* =========================================
   6. BOTTOM IMAGE & RESPONSIVE
   ========================================= */
.bottom-image-container {
    flex: 1; min-height: 0; position: relative; width: 100%; margin-top: -10px;
    z-index: 1; overflow: hidden; display: flex; align-items: flex-end;
}
.bottom-image-container img {
    width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block;
}

@media screen and (max-height: 680px) {
    .header { margin-bottom: 5px; min-height: 30px; }
    .header h5 { font-size: 15px; }
    .body .box-schedule { height: 175px; margin-bottom: 10px; }
    .body .box-schedule .box-stacked { padding: 15px 15px 5px 15px; }
    .photo-gallery { height: 200px !important; min-height: 200px !important; max-height: 200px !important; }
}