body,nav.nav-links {transition:.3s ease-in-out}
.slide,.slides {height:100%}
footer,header {padding:1rem;background-color:var(--brown-light);text-align:center}
.gallery img,.slide img {object-fit:cover;width:100%}
.footer,footer,header {text-align:center}
.burger,.gallery-container.hidden {display:none}
.kategori-toggle:hover,.kontainer a,.kontainer-blok a,.kontainer-blok a:hover {text-decoration:underline}
:root {--gold:#d4af37;--cream:#f5f0e6;--brown-light:#4e342e;--brown-dark:#a67c52}
* {margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body {background-color:var(--brown-dark);color:#fff}
header h1 {color:var(--gold);font-size:2.5rem}
.teks-putih-besar,header p {font-size:1.2rem;color:#fff}
nav.nav-links {background:rgb(78 52 46 / .95);backdrop-filter:blur(8px);display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;padding:1rem;border-radius:0;box-shadow:0 4px 12px rgb(0 0 0 / .4)}
nav.nav-links a {color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:.5rem;background-color:rgb(255 255 255 / .05);font-weight:500}
nav.nav-links a:hover {background-color:var(--gold);color:#000;box-shadow:0 0 10px var(--gold)}
.burger {flex-direction:column;cursor:pointer;padding:10px;position:fixed;top:1rem;right:1rem;z-index:1000;background-color:#4e342e;border-radius:.5rem;box-shadow:0 0 10px rgb(0 0 0 / .3)}
.slider,.slides {position:relative}
.burger div {width:25px;height:3px;background-color:#d4af37;margin:4px 0;transition:.4s}
@keyframes fadeIn {from{opacity:0;transform:translateY(-10px)}
to {opacity:1;transform:translateY(0)}
}.slider {display:flex;align-items:center;justify-content:center;min-height:300px;max-width:100%;margin:1rem;overflow:hidden;border-radius:1rem;aspect-ratio:16/9;padding:0 1rem;background-color:#000}
.slide {position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:flex;justify-content:center;align-items:center;z-index:0}
.slide.active {opacity:1;visibility:visible;z-index:1}
.slide img {height:auto;max-height:none;transform:scale(1.2);transition:transform 2s ease-in-out}
.gallery img,.load-more,a,button,nav.nav-links a {transition:.3s ease-in-out}
footer {color:#fff}
.link-emas,footer a {color:var(--gold);text-decoration:none}
.gallery {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.gallery img {height:200px;border-radius:12px;box-shadow:0 4px 10px rgb(0 0 0 / .3)}
.fullsize,.map-container iframe {height:100%;width:100%}
.gallery img:hover {box-shadow:0 6px 14px rgb(0 0 0 / .5)}
.kontainer-tabel {overflow-x:auto}
.tabel-laporan {width:100%;border-collapse:collapse;margin-top:1rem;min-width:600px;background-color:#f9f9f91a;box-shadow:0 4px 8px rgb(0 0 0 / .3);border-radius:.5rem;overflow:hidden}
.tabel-laporan thead {background-color:#3b2f28;color:#fff}
.tabel-laporan td,.tabel-laporan th {padding:.75rem 1rem;text-align:center;border-bottom:1px solid rgb(255 255 255 / .1)}
.tabel-laporan tbody tr:nth-child(2n) {background-color:rgb(255 255 255 / .05)}
.tabel-laporan tbody tr:hover {background-color:rgb(255 255 255 / .1)}
.tabel-laporan td:nth-child(2) {color:#90ee90;font-weight:500}
.tabel-laporan td:nth-child(3) {color:salmon;font-weight:500}
.load-more,.tabel-laporan td:nth-child(4) {font-weight:700}
.tabel-laporan th:first-child {width:18%}
.tabel-laporan th:nth-child(2),.tabel-laporan th:nth-child(3),.tabel-laporan th:nth-child(4) {width:25%}
.tabel-laporan th:nth-child(5) {width:7%}
.kontainer {padding:2rem;margin:1rem auto;max-width:1024px;background-color:rgb(59 47 40 / .95);color:#f5f0e6;border-radius:1rem;font-size:16px;line-height:1.6}
.footer,.kontainer-blok,.kontainer-blok h3,.link-putih {color:#fff}
.thead-laporan {background-color:#1e1e1e;color:#fff}
.slider-z {z-index:1}
.footer {padding:1rem;background-color:var(--brown-light);position:relative;z-index:1;clear:both;margin-top:2rem}
.kontainer-blok h3 {margin-top:0;font-size:1.2rem}
.map-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:1rem}
.map-container iframe {position:absolute;top:0;left:0;border:0}
.kontainer-blok {box-shadow:0 2px 5px rgb(0 0 0 / .1);background:#fffd;padding:1rem;border-left:4px solid #ccc;border-radius:.5rem;box-shadow:0 1px 3px rgb(0 0 0 / .05);margin-bottom:1.5rem;background:rgb(255 255 255 / .08);border-left:none}
.kontainer-blok a {color:#9cf}
.kontainer-blok a:hover {opacity:.8}
.kontainer-blok a {color:inherit}
.kontainer a {color:#fff}
.kategori-toggle {cursor:pointer;color:inherit;margin-top:1em}
.load-more:hover {background:#fff;color:#000;transform:scale(1.05);box-shadow:0 0 10px var(--gold)}
.hidden {display:none!important}
.load-more {background:#0d47a1;font-size:14px;box-shadow:0 2px 6px rgb(0 0 0 / .15);display:inline-block;margin:1rem auto;padding:.5rem 1.5rem;background-color:var(--gold);color:#000;border:none;border-radius:.5rem;cursor:pointer}
@media screen and (max-width:720px) {.burger{display:flex}
nav.nav-links {display:none;flex-direction:column;align-items:flex-start;justify-content:center;background-color:#4e342e;width:fit-content;max-width:90vw;position:fixed;top:1rem;right:calc(1rem + 50px);padding:1rem;border-radius:.75rem;z-index:999}
nav.nav-links.active {display:flex;animation:.5s ease-in-out fadeIn}
.slider {aspect-ratio:9/13;margin:1rem}
.slide img {height:100%;width:auto;transform:scale(1.2)}
body {font-size:.95rem}
header h1 {font-size:2rem}
header p {font-size:1rem}
}@media screen and (max-width:1024px) {.kontainer,.tabel-laporan{font-size:.95rem}
.kontainer {padding:1rem}
}@media screen and (max-width:480px) {header h1{font-size:1.8rem}
.gallery {grid-template-columns:1fr}
.tabel-laporan {font-size:.9rem;min-width:100%}
}@keyframes fadeInSoft {from{opacity:0;transform:translateY(10px)}
to {opacity:1;transform:translateY(0)}
}.gallery img,.kontainer,.tabel-laporan,body,footer,header {animation:.6s ease-in-out fadeInSoft}
.gallery img:hover,nav.nav-links a:hover {transform:scale(1.05);box-shadow:0 4px 10px rgb(255 255 255 / .2)}
.jadwal-sholat-overlay {position:absolute;bottom:.5rem;left:.5rem;background-color:rgb(0 0 0 / .3);backdrop-filter:blur(5px);padding:.5rem;border:2px;border-radius:1rem;color:#fff;font-size:.9rem;font-weight:750;max-width:250px;z-index:5}
.jadwal-sholat-overlay h3 {margin-top:0;font-size:1.1rem;color:gold}
.jadwal-sholat-overlay table {width:100%;border-collapse:collapse}
.jadwal-sholat-overlay td {padding:2px 6px;text-align: center}
.kontainer-tabel {overflow-x:auto;width:100%}
.foto-popup-overlay {position:absolute;background-color:rgb(0 0 0 / .6);backdrop-filter:blur(8px);padding:.5rem;border-radius:1rem;z-index:99;width:min(60vw, 90%);height:auto;aspect-ratio:4 / 3;max-height:80vh;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgb(0 0 0 / .4)}
.foto-popup-overlay img {width:100%;height:100%;object-fit:cover;border-radius:.5rem}
.foto-popup-overlay.hidden {display:none!important}
main.kontainer .foto-popup-overlay img {all:initial;display:block;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0.5rem!important;max-width:100%!important;max-height:100%!important}
.laporan .tabel-lap td:nth-child(2) {color: #90ee90; /* hijau muda */
  font-weight: 500;}
.laporan .tabel-lap td:nth-child(3) {color: salmon; /* merah muda */
  font-weight: 500;}
.tabel {width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  min-width: 600px;
  background-color: #f9f9f91a;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.3);
  border-radius: 0.5rem;
  overflow: hidden;}
.tabel thead {background-color: #3b2f28;
  color: #fff;}
.tabel td, .tabel th {padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);}
.tabel tbody tr:nth-child(2n) {background-color: rgb(255 255 255 / 0.05);}
.tabel tbody tr:hover {background-color: rgb(255 255 255 / 0.1);}
.kontainer-tabel table thead {background: #d4af37;
  color: #3b2f28;}