/* ========== CSS WEBSITE GEREJA ========== */
/* ===== GLOBAL RESET (WAJIB) ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* ← ini yang paling penting */
}

body{
  background:
    linear-gradient(180deg, #d4bb8c 0%, #91754c 100%);
  color:#222;
}


.search-box {
  text-align: center;
  margin: 25px 0;
}

.search-box input {
  width: 70%;
  max-width: 500px;
  padding: 12px 18px;
  font-size: 18px;
  border: 2px solid #aaa;
  outline: none;
  transition: 0.3s;
}

.search-box input:focus {
  border-color: #714901;
  box-shadow: 0 0 5px rgba(113, 73, 1, 0.5);
}


header {
  background: linear-gradient(rgba(99, 48, 0, 0.7), rgba(125, 56, 0, 0.7)),
  url('https://upload.wikimedia.org/wikipedia/commons/9/98/Tampak_Depan_Gereja_Kristus_Raja_Karawang_2024_%281%29.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

header p {
  font-size: 18px;
  opacity: 0.9;
}
.hero-header{
  position:relative;
  height:100vh;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgb(100, 32, 0), rgb(116, 43, 1)),
    url("lhps4.jpg");

  background-size:cover;
  background-position:center;

  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;

  overflow:hidden;
}
.hero-text h1{
  font-size:42px;
  font-weight:700;
  animation:fadeUp 1.4s ease forwards;
}

.hero-text p{
  animation:fadeUp 1.8s ease forwards;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.scroll-down{
  position:absolute;
  bottom:25px;
  font-size:30px;
  animation:bounce 1.6s infinite;
}

@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(10px); }
}



/* TEKS */
.hero-text h1 {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
}

.hero-text p {
  margin-top: 10px;
  font-size: 14px;
}

/* LOGO KIRI ATAS */
.logo-paroki {
  position: absolute;
  top: 15px;
  left: 15px;
}

.logo-paroki img {
  width: 50px;
  height: auto;
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .hero-text h1 {
    font-size: 36px;
  }

  .logo-paroki img {
    width: 60px;
  }
}


/* Tombol Gambar */
.tombol-section {
  text-align: center;
  margin: 100px 0;
}


  .tombol-section button {
  background-color: rgb(90, 33, 0);
  color: white;
  width: 350px;
  height: 90px;
  cursor: pointer;
  font-size: 24px;
  transition: 0.3s;
  display: block;          /* 👍 WAJIB supaya bisa tengah */
  margin: 0 auto;          /* 👍 Ini yang menengahkan */
  text-align: center;      /* pastikan teks tetap rapi */
  line-height: 90px;       /* opsional: membuat teks benar2 pas tengah */
}


.tombol-section button:hover {
  background-color: rgb(120, 62, 1);
}

/* Fullscreen Image */
#fullscreen-img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 9999;
  text-align: center;
  padding-top: 20px;
}

#fullscreen-img img {
  width: 90%;
  max-height: 85%;
  object-fit: contain;
}

#fullscreen-img button {
  padding: 10px 20px;
  font-size: 18px;
  background: rgb(51, 29, 1);
  color: white;
  cursor: pointer;
  margin-top: 10px;
}

/* Slideshow Pengumuman */
/* ==== SLIDESHOW MODERN ==== */


.slideshow-wrapper {
  max-width: 70%;
  position: relative;
  margin: 50px auto;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.slide {
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
}

/* Tombol Navigasi */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  color: white;
  font-size: 25px;
  font-weight: bold;
  transition: 0.3s;
  user-select: none;
}

.prev { left: 0; }
.next { right: 0; }

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.5);
}

/* Animasi fade lembut */
.fade {
  animation: fadeEffect 1s ease-in-out;
}

@keyframes fadeEffect {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* Titik indikator */
.dots-box {
  text-align: center;
  margin-top: 12px;
}

.dot {
  height: 6px;
  width: 6px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s;
}

.active-dot {
  background-color: #4b2e00;
}


/* Galeri Dokumentasi */




.kegiatan-section {
  padding: 40px 5%;
  background: #f7f3ee; /* beda dari artikel */
}

.kegiatan-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #6b3d00;
}

/* GRID */
.kegiatan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* CARD */
.kegiatan-card {
  position: relative;
  height: 260px;
  overflow: hidden;
  text-decoration: none;
}

/* GAMBAR */
.kegiatan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
.kegiatan-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  background: linear-gradient(transparent, rgba(107,61,0,0.85));
  color: white;
}

.kegiatan-overlay h3 {
  margin: 0;
  font-size: 18px;
}

.kegiatan-overlay span {
  font-size: 13px;
  opacity: 0.9;
}

/* HOVER */
.kegiatan-card:hover img {
  transform: scale(1.05);
  transition: 0.4s;
}

/* MODE HP */
@media (max-width: 768px) {
  .kegiatan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kegiatan-card {
    height: 180px;
  }

  .kegiatan-overlay h3 {
    font-size: 14px;
  }
}



/* Tombol Sekretariat */
.btn-box {
  text-align: center;
  margin: 50px 0;
}

.full-btn {
  background-color: #744c26;
  color: white;
  width: 350px;          /* samakan dengan tombol misa */
  height: 90px;          /* samakan */
  cursor: pointer;
  font-size: 24px;
  border: none;

  display: block;        /* wajib */
  margin: 0 auto;        /* ini yang membuat tombol ke tengah */
  text-align: center;
  line-height: 90px;     /* supaya teks tepat di tengah vertikal */
}



.full-btn:hover {
  background-color: #523400;
}

/* FULLSCREEN SEKRETARIAT */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.fullscreen img {
  width: 95%;
  max-width: 1500px;
  border-radius: 10px;
}

/* Tombol kembali */
.back-btn {
  background-color: white;
  border: none;
  padding: 10px 20px;
  font-size: 50px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* Lokasi */
.lokasi {
  text-align: center;
  padding: 40px 20px;
  background-color: #e8edff;
}

.lokasi iframe {
  width: 80%;
  height: 400px;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

footer {
  background-color: rgb(95, 0, 0);
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}




body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f6f7fb;
  padding: 20px;
}

.judul-halaman {
  text-align: center;
  margin-bottom: 25px;
  font-size: 26px;
  font-weight: bold;
  color: #222;
}

.tabel-wilayah {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.tabel-wilayah th, 
.tabel-wilayah td {
  border: 1px solid #999;
  padding: 10px;
}

.tabel-wilayah thead th {
  background: #ff8e4d;
  font-weight: bold;
  text-align: center;
}

/* Warna Wilayah */
.wilayah-green {
  background: #c9eac1;
  font-weight: bold;
  text-align: center;
}

.wilayah-blue {
  background: #d4e7f9;
  font-weight: bold;
  text-align: center;
}

.wilayah-yellow {
  background: #ffe7a2;
  font-weight: bold;
  text-align: center;
}

/* Mode HP */
@media (max-width: 600px) {
  .tabel-wilayah {
    font-size: 13px;
  }

  .tabel-wilayah th,
  .tabel-wilayah td {
    padding: 6px;
  }

  .judul-halaman {
    font-size: 20px;
  }
}

/* ===========================
   RESPONSIVE MODE HP
=========================== */
@media (max-width: 768px) {

  .tabel-container {
    padding: 9px;
  }

  table {
    font-size: 9px;
  }

  th {
    font-size: 14px;
    padding: 8px;
  }

  td {
    font-size: 9px;
    padding: 6px;
  }

  h1 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
  }

  .wilayah-title {
    font-size: 15px;
    padding: 8px;
  }

}


/* ============================
   DOKUMENTASI KEGIATAN (FINAL)
   ============================ */

/* Container keseluruhan */
.dokumentasi-wrapper {
  width: 80%;               /* ⬅ sesuai permintaan */
  margin: 40px auto;        /* tengah */
  text-align: center;
}

/* Judul */
.dokumentasi-wrapper h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #4b2e00;
}

/* Box scroll */

 .dok-scroll-box {
  max-height: 2220px;   /* ⬅ tampilkan 5 baris */
  overflow-y: auto;
  padding: 15px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  width: 80%;
  margin: 0 auto;
}




/* Grid dua kolom */
.dok-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Set gambar kotak + kecil */
.dok-item {
  width: 100%;
  aspect-ratio: 1 / 1;      /* ⬅ KOTAK SEMPURNA */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Gambar */
.dok-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption nyatu dengan gambar (transparan) */
.dok-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 18px 12px; 
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); /* efek transparan */
  color: white;
  font-size: 50px;         /* caption gede */
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


/* ==== Efek Card Melayang (Hover) ==== */

.dok-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dok-item:hover {
  transform: translateY(-8px);   /* naik sedikit */
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);  /* glow lebih tebal */
}






@media (max-width: 600px) {
  .dok-item {
    width: 100%;
  }

  .dok-item img {
    width: 100% !important;
    height: 200px !important;  
    object-fit: cover !important;
    border-radius: 10px;
  }

  .dok-caption {
    font-size: 16px;
    padding: 5px 10px;
  }
}

/* ===========================
   PENGUMUMAN (SLIDESHOW) 90%
   =========================== */
.slideshow-wrapper {
    width: 90%;
    max-width: 900px;
    margin: auto; 
    overflow: hidden;
}

/* agar gambar rapi */
.slideshow-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ====== VERSI HP ====== */
@media (max-width: 600px) {

    /* Pastikan wrapper tombol tetap center */
    .tombol-section,
    .btn-box {
        justify-content: center;
        width: 100%;
    }

    /* Tombol jadwal versi HP */
    .tombol-section button,
    .btn-box .full-btn {
        width: 50% !important;      /* Di HP 50% layar supaya tidak terlalu sempit/lebarnya pas */
        max-width: 300px; 
        height: 60px;          /* Batas maksimum */
        padding: 14px 18px !important;
        font-size: 15px !important; /* Sedikit lebih kecil supaya muat */

    }
}

@media (max-width: 600px) {
    .tombol-section button,
    .btn-box .full-btn {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* --------------- FIX TOMBOL VERSI HP --------------- */
@media (max-width: 600px) {

    .tombol-section button,
    .btn-box .full-btn {
        width: 60%;
        height: 70px;                   /* bebas kamu ubah */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        padding: 0 !important;          /* cegah teks turun */
        line-height: 1 !important;      /* biar teks tetap tengah */
        vertical-align: middle !important;
        text-align: center;
    }
}
/* agar link tidak merusak layout grid */
.dok-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* pastikan .dok-item tetap berukuran kotak normal */
.dok-item {
    width: 100%;
}

/* khusus versi HP tetap pakai 2 kolom */
@media (max-width: 600px) {
    .dok-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* ===== MODE HP (LAYAR KECIL < 600px) ===== */
@media only screen and (max-width: 600px) {

  /* Fullscreen Misa */
  #fullscreen-img {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #fullscreen-img img {
    width: 95%;
    max-height: 75vh;      /* biar tidak kepanjangan */
  }

  /* Fullscreen Sekretariat */
  .fullscreen {
    padding: 0;
    justify-content: center;
    align-items: center;
  }

  .fullscreen img {
    width: 95%;
    max-height: 75vh; 
    object-fit: contain;
  }

  /* Tombol kembali */
  .back-btn {
    font-size: 20px;
    padding: 8px 16px;
    margin-bottom: 15px;
  }
}
.back-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 28px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  padding: 8px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}

.back-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}



/* Gambar fullscreen */
.fullscreen img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* proporsi tetap */
}

/* Tombol kembali di kiri atas */
.fullscreen .back-btn {
  position: absolute;
  top: 20px;
  left: 0px;
  padding: 10px 18px;
  font-size: 18px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  z-index: 1010;
}


#fullscreen-img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  z-index: 1000;

  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  text-align: center;
}

#fullscreen-img img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* menjaga proporsi */
  border-radius: 5px;
}

#fullscreen-img .back-btn {
  position: absolute;
  top: 20px;
  left: 0px;
  padding: 10px 18px;
  font-size: 18px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  z-index: 1010;
}

/* RESPONSIVE UNTUK HP */
@media screen and (max-width: 768px) {
  .slideshow-wrapper .prev,
  .slideshow-wrapper .next {
    font-size: 18px;        /* tombol lebih kecil */
    padding: 8px;           /* padding lebih kecil */
    top: 48%;               /* sedikit di atas tengah */
    transform: translateY(-50%); /* tetap tepat di tengah */
    left: 20;              /* tombol kiri */
    right: 20px;             /* tombol kanan */
  }
}
@media screen and (max-width: 768px) {
  .slideshow-wrapper .prev,
  .slideshow-wrapper .next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    padding: 8px !important;
    position: absolute !important;
    z-index: 50 !important;
  }

  /* Tombol kiri */
  .slideshow-wrapper .prev {
    left: 5px !important;   /* BIKIN MENTOK KIRI */
    right: auto !important;
  }

  /* Tombol kanan */
  .slideshow-wrapper .next {
    right: 5px !important;  /* BIKIN MENTOK KANAN */
    left: auto !important;
  }
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.fullscreen img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.hidden {
  display: none;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 15px;
  font-size: 22px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* ===== DOKUMENTASI (MODE PC) ===== */
.dokumentasi-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 15px;
  padding: 10px;
}

/* ===== DOKUMENTASI (MODE HP) – SCROLL HORIZONTAL ===== */
@media (max-width: 768px) {
  .dokumentasi-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 10px;
  }

  .dokumentasi-item {
    min-width: 70%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .dokumentasi-container::-webkit-scrollbar {
    display: none; /* biar clean */
  }
}

/* ===== SECTION ARTIKEL ===== */

.artikel-section {
  padding: 20px;
}

.artikel-section h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* ===== MODE PC: 3 KOLOM ===== */
.artikel-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.artikel-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: 0.2s;
}

.artikel-card:hover {
  transform: translateY(-5px);
}

.artikel-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.artikel-info {
  padding: 15px;
}

.kategori {
  font-size: 13px;
  color: #555;
}

.artikel-card h3 {
  font-size: 18px;
  margin: 10px 0;
}

.tanggal {
  font-size: 12px;
  color: gray;
  margin-bottom: 10px;
}

.cuplikan {
  color: #444;
  font-size: 14px;
  line-height: 1.4;
}

/* ===== MODE HP: 1 KOLOM ===== */
@media (max-width: 768px) {
  .artikel-container {
    grid-template-columns: 1fr;
  }

  .artikel-card img {
    height: 180px;
    object-fit: cover;
  }
}

/* MODE HP – Perapian Artikel */
@media (max-width: 600px) {

  .artikel-card.no-img {
    padding: 12px;                /* kotak sedikit lebih kecil */
    border-radius: 6px;           /* lebih persegi panjang */
    margin-bottom: 12px;
  }

  .artikel-card.no-img h3 {
    font-size: 7px;              /* judul lebih kecil */
  }

  .artikel-card.no-img p {
    font-size: 9px;              /* teks deskripsi lebih kecil */
  }
}

@media (max-width: 600px) {

  /* Kotak artikel utama */
  .artikel-card,
  .artikel-card.no-img {
    padding: 10px !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
  }

  /* Judul artikel */
  .artikel-card h3,
  .artikel-card.no-img h3 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Deskripsi artikel */
  .artikel-card p,
  .artikel-card.no-img p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}
/* GAMBAR TAMPIL DI PC */
.artikel-img {
  width: 100%;
  border-radius: 10px;  /* sudut lancip */
  margin: 20px 0;
  display: block;
}

/* GAMBAR HILANG DI HP */
@media (max-width: 600px) {
  .artikel-img {
    display: none;
  }
}
/* Container artikel */
.artikel-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Card */
.artikel-card {
  background: #ffffff;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  gap: 15px;
  align-items: flex-start;
  transition: 0.2s;
}

.artikel-card:hover {
  transform: translateY(-3px);
}

/* GAMBAR — tampil hanya di PC */
.artikel-thumb {
  width: 130px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Info teks */
.artikel-info h3 {
  margin: 5px 0;
  font-size: 17px;
}

/* MODE HP — gambar hilang */
@media (max-width: 600px) {

  .artikel-card {
    flex-direction: column;
    padding: 15px;
  }

  .artikel-thumb {
    display: none;
  }

  .artikel-info h3 {
    font-size: 15px;
  }

  .artikel-ringkas {
    font-size: 13px;
  }
}

/* =====================
   TOMBOL BACK MODERN
   ===================== */
.btn-back {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

/* SVG icon */
.btn-back svg {
  width: 22px;
  height: 22px;
  stroke: white;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover ala portal berita */
.btn-back:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.08);
}

/* Versi HP */
@media (max-width: 600px) {
  .btn-back {
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
  }

  .btn-back svg {
    width: 20px;
    height: 20px;
  }
}

/* =========================
   BACK BUTTON MODERN
========================= */
.btn-back {
  position: fixed;
  top: 20px;
  left: 15px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-back:hover {
  background: rgba(0,0,0,0.75);
  transform: scale(1.05);
}

.btn-back svg {
  pointer-events: none;
}

.back-full {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
}

.back-full svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

.back-full:hover {
  background: rgba(0,0,0,0.8);
}

.btn-link {
  display: inline-block;
  padding: 14px 20px;
  background: #7a4b2c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-link:hover {
  background: #5f2424;
}

.hero-header {
  position: relative; /* WAJIB */
  background:
    linear-gradient(rgba(92, 50, 15, 0.6), rgba(92, 50, 15, 0.6)),
    url("backgroundgereja.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 80px 20px;
  border-radius: 0 0 30px 30px;
}
.hero-header {
  position: relative; /* WAJIB */
  background:
    linear-gradient(rgba(92, 50, 15, 0.6), rgba(92, 50, 15, 0.6)),
    url("jbackgroundgereja.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 80px 20px;
  border-radius: 0 0 30px 30px;
}
.hero-text {
  text-align: center;
}

.hero-text h1 {
  margin: 0;
  font-size: 40px;
  font-weight: bold;
}

.hero-text p {
  margin-top: 8px;
  font-size: 14px;
}

/* ================= HEADER UTAMA ================= */
.hero-header {
  position: relative;
  min-height: 80vh;          /* HEADER JADI TINGGI */
  padding: 80px 40px;        /* RUANG KIRI-KANAN */
  background: linear-gradient(
    rgba(99, 48, 0, 0.75)
    rgba(125, 56, 0, 0.75)
  ),
  url('https://upload.wikimedia.org/wikipedia/commons/9/98/Tampak_Depan_Gereja_Kristus_Raja_Karawang_2024_%281%29.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}
/* ===== LOGO DESKTOP (DIBESARKAN) ===== */
@media (min-width: 769px) {
  .logo-paroki img {
    width: 110px;     /* BESAR TAPI WAJAR */
    height: 110px;
    padding: 8px;
  }

  .logo-paroki {
    top: 30px;
    left: 40px;
  }
}
/* ===== LOGO HP (TETAP PAS) ===== */
@media (max-width: 768px) {
  .logo-paroki img {
    width: 50px;
    height: 50px;
    padding: 5px;
  }

  .logo-paroki {
    top: 18px;
    left: 18px;
  }
}
/* ===== HEADER VERSI HP (DIPERKECIL) ===== */
@media (max-width: 768px) {
  .hero-header {
    min-height: auto;      /* HILANGKAN 80vh */
    padding: 60px 20px;    /* LEBIH RINGKAS */
    border-radius: 0 0 20px 20px;
  }

  .hero-text h1 {
    font-size: 26px;
  }

  .hero-text p {
    font-size: 14px;
  }
}

/* ===============================
   LAYOUT 2 KOLOM UNTUK DESKTOP
   =============================== */

.layout{
  max-width: 1400px;
  margin: auto;
  display: flex;
  gap: 30px;
  padding: 20px;
}

.main-content{
  flex: 3;
}

.sidebar{
  flex: 1;
}

/* Sidebar stay di samping saat scroll */
@media (min-width: 900px){
  .sidebar{
    position: sticky;
    top: 20px;
    height: fit-content;
  }
}

/* MODE HP */
@media (max-width: 900px){
  .layout{
    flex-direction: column;
    padding: 10px;
  }
}
/* =========================
   GLOBAL ANIMATION
========================= */

html{
  scroll-behavior:smooth;
}

/* Fade dasar */
.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:all .9s ease;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}


/* =========================
   HERO ANIMATION
========================= */

.hero-text{
  animation:heroFade 1.6s ease forwards;
  opacity:0;
}

@keyframes heroFade{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================
   BUTTON EFFECT
========================= */

button,
.btn-link{
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

button:hover,
.btn-link:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}


/* =========================
   SECTION APPEAR
========================= */

section{
  opacity:0;
  transform:translateY(40px);
  transition:all 1s ease;
}

section.show{
  opacity:1;
  transform:translateY(0);
}


/* =========================
   SLIDESHOW FADE HALUS
========================= */

.slide{
  display:none;
  animation:fadeSlide 1s ease;
}

@keyframes fadeSlide{
  from{ opacity:.2 }
  to{ opacity:1 }
}


/* =========================
   KEGIATAN CARD PREMIUM
========================= */

.kegiatan-card{
  transition:all .4s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.kegiatan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 28px rgba(0,0,0,.25);
}


/* =========================
   SIDEBAR MASUK DARI KANAN
========================= */

.sidebar{
  animation:slideRight 1.2s ease;
}

@keyframes slideRight{
  from{
    opacity:0;
    transform:translateX(60px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}
/* =========================
   MOBILE: PENGUMUMAN LEBIH BESAR
========================= */
@media (max-width:768px){

  .layout{
    padding:10px; /* kurangi ruang kosong kiri kanan */
  }

  .lokasi{
    padding:0;
  }

  .slideshow-wrapper{
    max-width:100%;
    width:100%;
  }

  .slide img{
    width:100%;
    border-radius:14px;
  }

  /* dots lebih jelas */
  .dot{
    width:7px;
    height:7px;
  }

}
/* =========================
   HERO KHUSUS MOBILE
========================= */
@media (max-width:768px){

  .hero-header{
    height:60vh;   /* 🔥 lebih pendek */
    min-height:380px;
  }

  .hero-text h1{
    font-size:26px;
  }

  .hero-text p{
    font-size:14px;
  }

  .scroll-down{
    bottom:12px;
    font-size:26px;
  }

}
.hero-text h1{
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}

.hero-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.55));
}
.hero-text h1{
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}

.hero-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.55));
}
section{
  background:white;
  padding:25px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
@media (max-width:768px){
  section{
    padding:18px;
    border-radius:14px;
  }
}
/* ================= TOP BAR ================= */
.topbar{
  background:#6b3102;
  color:white;
  text-align:center;
  padding:6px;
  font-size:13px;
}


/* ================= NAVBAR ================= */
.navbar{
  position:sticky;
  top:0;
  background:white;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 20px;

  box-shadow:0 2px 10px rgba(0,0,0,.08);
  z-index:1000;
}


/* layout */
.nav-left,
.nav-right{
  width:60px;
  font-size:22px;
  cursor:pointer;
}

.nav-center{
  flex:1;
  text-align:center;
}


/* logo */
.nav-logo{
  height:45px;
}


/* hamburger */
.hamburger{
  user-select:none;
}


/* ================= SIDE MENU ================= */
.side-menu{
  position:fixed;
  top:0;
  left:-260px;

  width:260px;
  height:100vh;

  background:rgb(236, 234, 232);
  box-shadow:4px 0 15px rgba(0,0,0,.15);

  display:flex;
  flex-direction:column;
  padding-top:90px;

  transition:.3s;
  z-index:999;
}

.side-menu.active{
  left:0;
}

.side-menu a{
  padding:14px 24px;
  text-decoration:none;
  color:#333;
  font-weight:600;
  border-bottom:1px solid #fdb377;
}

.side-menu a:hover{
  background:#797573;
}


/* ================= SEARCH ================= */
.search-box{
  position:fixed;
  top:80px;
  right:20px;

  background:white;
  padding:8px 12px;
  border-radius:8px;

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

  display:none;
}

.search-box input{
  border:none;
  outline:none;
  width:200px;
}
/* ================= TOP BAR ================= */
.topbar{
  background:#817b78; /* coklat gereja */
  color:white;
  text-align:center;
  padding:6px;
  font-size:13px;
}



/* ================= NAVBAR ================= */
.navbar{
  position:sticky;
  top:0;

  background:white;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:10px 20px;

  box-shadow:0 2px 12px rgba(0,0,0,.08);

  border-bottom:3px solid #c9a24d; /* garis emas elegan */

  z-index:1000;
}



/* ================= LEFT ================= */
.nav-left{
  display:flex;
  align-items:center;
  gap:14px;
}


/* hamburger */
.hamburger{
  font-size:24px;
  cursor:pointer;
}



/* ================= BRAND ================= */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  height:40px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-text strong{
  font-size:15px;
}

.brand-text small{
  font-size:12px;
  color:#666;
}



/* ================= RIGHT ================= */
.nav-right{
  font-size:20px;
  cursor:pointer;
}



/* ================= SIDE MENU ================= */
.side-menu{
  position:fixed;
  top:0;
  left:-260px;

  width:260px;
  height:100vh;

  background:white;

  box-shadow:4px 0 15px rgba(0,0,0,.15);

  display:flex;
  flex-direction:column;

  padding-top:90px;

  transition:.3s;
}

.side-menu.active{
  left:0;
}

.side-menu a{
  padding:14px 24px;
  text-decoration:none;
  color:#333;
  font-weight:600;
  border-bottom:1px solid #eee;
}



/* ================= SEARCH ================= */
.search-box{
  position:fixed;
  top:80px;
  right:20px;

  background:white;
  padding:8px 12px;
  border-radius:8px;

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

  display:none;
}
/* =========================
   NAVBAR PROFESIONAL CLEAN
========================= */

.navbar{
  position:sticky;
  top:0;

  height:64px;
  width:100%;

  background:#ffffff;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 18px;

  box-shadow:0 2px 10px rgba(0,0,0,.08);
  border-bottom:3px solid #5c2504;

  z-index:999;
  .navbar {
  position: sticky;
  top: 0;
  z-index: 9999;

  background: #ffffff; /* pastikan putih */
}

}



/* kiri (hamburger + logo) */
.nav-left{
  display:flex;
  align-items:center;
  gap:12px;
}



/* hamburger */
.hamburger{
  font-size:22px;
  cursor:pointer;
}



/* logo + text */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  height:36px;
  width:auto;
}

.brand span{
  font-size:15px;
  font-weight:600;
}



/* kanan search */
.search-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}



/* mobile fix */
@media(max-width:768px){
  .brand span{
    font-size:13px;
  }
}
/* ===== RESET ===== */
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}


/* ===== TOPBAR ===== */
.topbar{
  width:100%;
  background:#502b01;
  color:white;
  text-align:center;
  padding:8px 12px;
  font-size:13px;
}


/* ===== NAVBAR FULL WIDTH ===== */
.navbar{
  position:sticky;
  top:0;

  width:100vw;        /* full layar */
  left:0;

  background:#fff;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 20px;

  box-shadow:0 2px 10px rgba(0,0,0,.08);
  z-index:999;
}


/* kiri */
.nav-left{
  display:flex;
  align-items:center;
  gap:14px;
}


/* hamburger */
.hamburger{
  font-size:22px;
  cursor:pointer;
}


/* brand */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.brand img{
  height:32px;
}


/* search */
.search-btn{
  background:#f3f4f6;
  border:none;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}


/* ===== LAYOUT (ISI KONTEN SAJA) ===== */
.layout{
  max-width:1200px;
  margin:auto;
  padding:20px;
}
/* ===== SIDE MENU ===== */
.side-menu{
  position:fixed;
  top:0;
  left:-260px;
  width:250px;
  height:100vh;

  background:#fff;
  box-shadow:2px 0 15px rgba(0,0,0,.15);

  padding-top:80px;

  transition:0.3s ease;
  z-index:998;
}

.side-menu.active{
  left:0;
}

.side-menu a{
  display:block;
  padding:14px 20px;
  text-decoration:none;
  color:#333;
  border-bottom:1px solid #eee;
}


/* ===== SEARCH BOX ===== */
.search-box{
  position:fixed;
  top:70px;
  right:20px;

  transform:scale(0);
  opacity:0;

  transition:0.25s;
  z-index:999;
}

.search-box.active{
  transform:scale(1);
  opacity:1;
}

.search-box input{
  width:220px;
  padding:10px 14px;
  border-radius:25px;
  border:1px solid #ddd;
  outline:none;
}
/* ===== HAMBURGER ===== */
.hamburger{
  font-size:26px;
  background:none;
  border:none;
  cursor:pointer;
}


/* ===== SIDE MENU ===== */
.side-menu{
  position:fixed;
  top:0;
  left:-260px;
  width:250px;
  height:100vh;
  background:#fff;

  padding-top:80px;
  box-shadow:2px 0 15px rgba(0,0,0,.2);

  transition:left .3s ease;
  z-index:999;
}

.side-menu.show{
  left:0;
}

.side-menu a{
  display:block;
  padding:14px 20px;
  text-decoration:none;
  color:#333;
}


/* ===== SEARCH ===== */
.search-box{
  position:fixed;
  top:70px;
  right:20px;

  transform:scale(0);
  opacity:0;

  transition:.25s;
  z-index:999;
}

.search-box.show{
  transform:scale(1);
  opacity:1;
}

.search-box input{
  width:220px;
  padding:10px 14px;
  border-radius:25px;
  border:1px solid #ddd;
}
.side-menu{
  transform: translateX(-100%);
  transition: 0.3s;
}

.side-menu.show{
  transform: translateX(0);
}

.search-box{
  display:none;
}

.search-box.show{
  display:block;
}
/* NAVBAR TRANSISI */
.navbar{
  transition: all .3s ease;
}

/* saat discroll */
.navbar.scrolled{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,.12);
}
.side-menu{
  position: fixed;
  top:0;
  left:0;
  height:100%;
  width:260px;
  background:white;

  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);

  box-shadow: 4px 0 20px rgba(0,0,0,.15);
  padding-top:80px;
  z-index:999;
}

.side-menu.show{
  transform: translateX(0);
}
.search-box{
  position:absolute;
  top:70px;
  right:20px;

  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;

  transition: all .25s ease;
}

.search-box.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
section{
  opacity:0;
  transform: translateY(40px);
  transition: all .7s ease;
}

section.show{
  opacity:1;
  transform: translateY(0);
}
section{
  opacity:0;
  transform: translateY(40px);
  transition: all .7s ease;
}

section.show{
  opacity:1;
  transform: translateY(0);
}
.side-menu a{
  position:relative;
  transition:.25s;
}

.side-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#777272;
  transition:.3s;
}

.side-menu a:hover::after{
  width:100%;
}
.hero-text{
  opacity:0;
  transform:translateY(30px);
  animation: heroFade 1.2s ease forwards;
  animation-delay:.3s;
}

@keyframes heroFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* =========================
   REMOVE BLUE CLICK EFFECT
========================= */

/* semua tombol & icon */
button,
.hamburger,
.search-btn,
a {
  -webkit-tap-highlight-color: transparent; /* Android */
  outline: none;
  border: none;
  background: none;
}

/* hilangkan focus biru */
button:focus,
button:active,
.hamburger:focus,
.search-btn:focus,
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* hilangkan warna abu/biru saat ditekan */
button:active,
.hamburger:active,
.search-btn:active {
  background: transparent !important;
}
/* =========================
   HAMBURGER ONLY COLOR
========================= */

.hamburger{
  font-size: 26px;
  cursor: pointer;
  color: #222;
  transition: .25s;
}

/* warna hanya icon */
.hamburger.active{
  color: #adb1b6; /* biru gereja */
}

/* jangan diwariskan */
.brand,
.brand span,
.brand img{
  color: inherit;
}
html{
  scroll-behavior:smooth;
}
.pengumuman-container{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
}

.pengumuman-container::-webkit-scrollbar{
  display:none;
}
.slide {
  display: none;
}

.slide img {
  width: 100%;
  border-radius: 12px;
}

.dot.active {
  background: #333;
}
.welcome-text {
  text-align: center;
  font-size: 13px;
  margin: 28px 18px;
  line-height: 1.6;
  font-weight: 500;

  color: #2c3e50;

  animation: glowFade 2.5s ease-in-out infinite alternate;
}

/* efek kelap-kelip lembut (bukan kedip keras) */
@keyframes glowFade {
  0% {
    opacity: 0.5;
    text-shadow: 0 0 0px rgba(0,0,0,0);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(100, 150, 255, 0.6);
    animation: glowFade 4s ease-in-out infinite alternate;
text-shadow: 0 0 18px rgba(100,150,255,0.9);
text-shadow: 0 0 12px rgba(255, 200, 80, 0.9);

  }
}
.visitor-box {
  text-align: center;
  padding: 18px 10px;
  font-size: 14px;
  color: #555;
  background: #fafafa;
  border-top: 1px solid #ddd;
}
/* ===============================
   VISITOR CARD
================================ */
.visitor-card {
  max-width: 420px;
  margin: 25px auto;
  padding: 18px 22px;

  display: flex;
  align-items: center;
  gap: 14px;

  background: #ffffff;
  border-radius: 16px;

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

  animation: fadeUp 0.8s ease;
}

.visitor-icon {
  font-size: 28px;
}

.visitor-title {
  font-size: 13px;
  color: #666;
}

.visitor-number {
  font-size: 24px;
  font-weight: bold;
  color: #7a4f2c;
  letter-spacing: 1px;
}

/* animasi muncul */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===============================
   LED VISITOR COUNTER
================================ */
.visitor-led {
  text-align: center;
  margin: 30px auto;
  padding: 22px 16px;
}

.visitor-led-title {
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
  color: #7a4f2c;
  font-weight: bold;
}

/* container angka */
.led-counter {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* satu digit */
.led-digit {
  width: 38px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  font-weight: bold;
  font-family: 'Courier New', monospace;

  color: #ffd966;
  background: #2b1a0f;

  border-radius: 8px;

  box-shadow:
    0 0 6px #ffcc66,
    0 0 12px #ffb347,
    inset 0 0 8px rgba(255,255,255,0.15);

  animation: glowBlink 1.6s infinite alternate;
}

/* koma */
.led-separator {
  font-size: 26px;
  color: #ffcc66;
  margin: 0 4px;
  animation: glowBlink 1.6s infinite alternate;
}

/* animasi nyala lampu */
@keyframes glowBlink {
  0% {
    box-shadow:
      0 0 4px #ffcc66,
      0 0 8px #ffb347;
    opacity: 0.85;
  }
  100% {
    box-shadow:
      0 0 10px #ffe39f,
      0 0 18px #ffcc66;
    opacity: 1;
  }
}

/* animasi naik */
@keyframes flipUp {
  from {
    transform: translateY(20px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
/* ===== LED COUNTER ===== */

.visitor-led{
  text-align:center;
  margin:50px 0 30px;
}

.visitor-led-title{
  font-weight:bold;
  margin-bottom:15px;
  letter-spacing:2px;
}

.led-counter{
  display:flex;
  justify-content:center;
  gap:8px;
}

.led-digit{
  width:42px;
  height:55px;
  background:#111;
  color:#00ff6a;
  font-size:32px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  box-shadow:
    0 0 6px #00ff6a,
    0 0 16px #00ff6a,
    inset 0 0 8px #003d1f;
  animation: glowBlink 1.5s infinite alternate;
}

@keyframes glowBlink{
  from{ box-shadow:0 0 4px #00ff6a; }
  to{ box-shadow:0 0 18px #00ff6a; }
}
.navbar.scrolled {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.topbar {
  background: #5b3a00;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
}
body {
  padding-top: 70px; /* sesuaikan tinggi navbar */
}
/* ===== FIX FINAL HEADER ===== */

/* TOP BAR */
.topbar {
  position: relative !important;
  background: #7a4b00 !important;
  color: white !important;
  text-align: center !important;
  padding: 8px 12px !important;
  z-index: 1 !important;
}

/* NAVBAR STICKY */
.navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* HAPUS EFEK FIXED LAMA */
body {
  padding-top: 0 !important;
}
/* ===== FIX FINAL PALING STABIL ===== */

/* TOPBAR tetap normal */
.topbar {
  position: relative;
  z-index: 1;
}

/* NAVBAR jadi fixed */
.navbar {
  position: fixed;
  top: 40px; /* sesuaikan dengan tinggi topbar */
  left: 0;
  width: 100%;
  background: white;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Supaya konten tidak ketiban */
body {
  padding-top: 110px; /* tinggi topbar + navbar */
}
/* HILANGKAN CELAH ANTARA NAVBAR & HEADER */
.hero-header,
header,
.layout,
.main-content {
  margin-top: 0 !important;
}

/* Pastikan navbar benar-benar nempel */
.navbar {
  margin-bottom: 0 !important;
}
/* ===== FINAL STABLE HEADER ===== */

/* Topbar tetap normal */
.topbar {
  position: relative;
  z-index: 1;
}

/* Navbar selalu nempel ke atas */
.navbar {
  position: fixed;
  top: 40px; /* tinggi topbar (sesuaikan jika beda) */
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
}

/* Supaya konten tidak ketiban */
body {
  padding-top: 110px; /* topbar + navbar */
}
/* ===== FIX NAVBAR FINAL ===== */

.topbar {
  position: relative;
  z-index: 1;
}

.navbar {
  position: fixed;
  top: 40px;   /* tinggi topbar */
  left: 0;
  width: 100%;
  background: white;
  z-index: 9999;
}

/* Supaya konten tidak ketiban */
body {
  padding-top: 110px; /* tinggi topbar + navbar */
}
/* =========================================
   FORCE NAVBAR STICKY ONLY
   Tempel paling bawah
========================================= */

/* Hanya navbar */
.navbar {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Pastikan tidak ada offset dari versi fixed lama */
body {
  padding-top: 0 !important;
}

/* ===== FIX STICKY NAVBAR REAL ===== */

/* Hapus penghalang sticky dari semua wrapper utama */
body,
html,
.wrapper,
.container,
.main,
header {
  overflow: visible !important;
  transform: none !important;
}

/* Navbar sticky */
.navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Pastikan tidak ada fixed lama menang */
.navbar.fixed,
.navbar.scrolled {
  position: sticky !important;
}
/* =========================
   HEADER STABIL FINAL
========================= */

/* Topbar normal */
.topbar{
  position: relative;
  z-index: 1;
}

/* Navbar benar-benar sticky */
.navbar{
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Jangan pakai padding-top body */
body{
  padding-top: 0;
}
/* =========================
   HEADER STABIL FINAL
========================= */

/* Topbar normal */
.topbar{
  position: relative;
  z-index: 1;
}

/* Navbar benar-benar sticky */
.navbar{
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Jangan pakai padding-top body */
body{
  padding-top: 0;
}
.navbar,
.topbar{
  transition: opacity .3s ease;
}
/* ============================= */
/* NAVBAR AUTO HIDE SAAT FULLSCREEN */
/* ============================= */

.navbar {
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
}

/* Saat fullscreen aktif (tidak hidden) */
.fullscreen:not(.hidden) ~ .navbar,
body:has(.fullscreen:not(.hidden)) .navbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Pastikan fullscreen benar-benar di atas */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
}

/* Hidden state */
.hidden {
  display: none;
}