/* ===== Body with 2 image layers (NOT fixed) ===== */
html, body { min-height: 100%; }

body{
  /* urutan pertama = paling atas (pepohonan merah) */
  background: url(../img/bg-top.png), url(../img/bg-bottom.png) no-repeat;
  overflow-x: hidden;
}

/* Penyesuaian mobile */
@media (max-width: 768px){
  body{  /* lebarin overlay biar pinggir aman */
    background-position: top, center 0%;
    background-color: #71140d;
  }
}
/* ===== BASE ===== */
html, body { height: 100%; scroll-behavior: smooth; }

/* ===== ABOUT ===== */
#about{ background: transparent; }
.about-badge{ width: auto ; height: auto; margin-bottom: 2.5rem; }
.about-img{ max-width: 980px; width: 90%; position: relative;  top: 50px; }


/* Copy CA button (satu-satunya teks) */
.btn-ca{ 
  font-weight: 700;
  height: 48px; 
  position: relative;
  top: 125px;
}
.btn-ca:hover{ background: var(--bg-h); color: var(--fg); }

/* ===== GALLERY ===== */
#gallery{ background: transparent; }
.gallery-title{ position: relative; height: auto; width: auto; top: 120px; }

/* ===== FOOTER ===== */
#footer{ background: #711410 ; color: #ffe9c4; position: relative; top: 750px; z-index: -2; }
/* Container socials: kasih jarak antar item */
.social-footer{
  display: flex;
  align-items: center;
  flex-wrap: wrap;   
  gap: 100px;     
}

/* Item di dalamnya tetap inline-flex buat center content */
.socials a,
.socials button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Ukuran ikon */
.social-img{
  height: 66px;
  width: auto;
  display: block;
  z-index: 2;
}
.footer-disclaimer-img{ width: 900px;  height: auto; opacity: .95; position: relative; top: 10px; }


/* ===== RESPONSIVE ===== */
@media (max-width: 992px){
  .hero-art{ max-height: 420px; }
}
@media (max-width: 576px){
  #hero{ padding-top: 1.25rem; }
  .hero-logo{ width: 160px; }
  .deco-1{ --x: 10%; --y: 58vh; --w: 120px; }
  .deco-2{ --x: 86%; --y: 72vh; --w: 140px; }
}

/* Hero video sizing */
.hero-video{
  width: auto;
  max-width: auto;     
  max-height: auto;    
  height: auto;
  display: inline-block;
  object-fit: contain;  
  border-radius: 16px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
}

/* mobile tweak */
@media (max-width: 576px){
  .hero-video{ max-width: 420px; max-height: 420px; }
}

.footer-chibi{
  width: auto;
  height: auto;
  position: relative;
  left: 50px;
  max-height: 440px;   /* samain dengan versi img sebelumnya */
  height: auto;
  display: inline-block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
@media (max-width: 576px){
  .footer-chibi{ max-height: 200px; }
}

/* Tombol CA */
.btn-ca{
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}

/* Teks yang ditampilkan = mask dari data-ca (5 depan + 4 belakang) */
.ca-label{
  display: inline-block;
  padding: 6px 10px;
  line-height: 1;
  border: 2px solid #2a1600;   /* border nempel teks, otomatis ngikut panjang */
  border-radius: 999px;
  font: 700 20px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
}

/* .ca-mask tidak dipakai lagi untuk tampilan */
.ca-mask{ display: none; }

.copy-icon{
  height: auto;
  width: auto;
  display: block;
  opacity: .9;
}

.btn-ca.copied{
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 3px;
}

/* Mobile tweak */
@media (max-width: 576px){
  .ca-mask{ font-size: 11px; }
}



/* ======= MARQUEE (1 baris, looping) ======= */
.marquee-wrap{
  position: relative;
  top: 250px;
  overflow: hidden;
}

.marquee-track{
  --marquee-gap: 16px;
  --marquee-duration: 35s; /* ubah speed di sini (lebih kecil = lebih cepat) */
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee-wrap:hover .marquee-track{
  animation-play-state: paused; /* pause saat hover */
}

@keyframes marquee-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* karena kita duplikat sequence */
}

/* Item & gambar */
.gallery-item{
  position: relative;
  display: block;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 3px solid rgba(0,0,0,.45);
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item img{
  display: block;
  height: 380px;     /* kontrol tinggi baris */
  width: auto;
  border-radius: 14px;
}
.gallery-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
}

/* Fade kiri/kanan (opsional) */
.marquee-fade{
  position: absolute; top: 0; bottom: 0; width: 100px; pointer-events: none;
  background: linear-gradient(to right, rgba(247,231,192,1), rgba(247,231,192,0));
  /* ganti warna sesuai background section lo */
}
.marquee-fade.right{
  right: 0; transform: scaleX(-1);
}
.marquee-fade.left{
  left: 0;
}

/* Ukuran dialog berdasarkan CSS variables */
#imgModal .modal-dialog{
  max-width: var(--modal-width, 1200px);
  width: auto; /* biar ngikut max-width */
}

/* Batasi tinggi area gambar */
#imgModal .modal-body{
  max-height: var(--modal-height, 80vh);
  overflow: auto; /* scroll kalau gambar lebih tinggi */
}

/* Ukuran gambar fleksibel (bisa fixed/manual via vars) */
#imgModal #modalImg{
  width: var(--img-width, 100%);
  height: var(--img-height, auto);
  max-width: 100%;
  max-height: var(--modal-height, 80vh);
  object-fit: contain; /* biar proporsi aman */
  display: inline-block;
}
/* Responsive: kecilkan tinggi gambar */
@media (max-width: 992px){
  .gallery-item img{ height: 160px; }
  .marquee-track{ --marquee-duration: 30s; }
}
@media (max-width: 576px){
  .gallery-item img{ height: 140px; }
  .marquee-track{ --marquee-duration: 25s; }
  .marquee-fade{ width: 60px; }
}

/* ===== LOADING OVERLAY (FULL BLACK, COVER ALL) ===== */
.loader{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left = 0 */
  width: 100vw;
  height: 100dvh;          /* full viewport height (mobile-safe) */
  background: #000 !important;  /* solid black */
  z-index: 2147483647;     /* on top of everything */
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;      /* create new stacking context */
  transition: opacity .4s ease, visibility 0s linear 0s;
}

/* hidden state tetap sama */
.loader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

/* kunci scroll saat loader tampil */
body.has-loader{ overflow: hidden; }

/* video tetap */
.loader-video{
  width: auto;
  height: auto;
  display: block;
  background: #000;        /* biar seamless dengan overlay */
}

/* tombol skip: aman di notch */
.loader-skip{
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.loader-skip:hover{ background: rgba(0,0,0,.7); transform: translateY(-1px); }
.loader-skip:active{ transform: translateY(0); }
.loader-skip:focus-visible{ outline: 3px solid #f1b53a; outline-offset: 2px; }

/* responsive tetap */
@media (max-width: 992px){
  .loader-video{ width: min(92vw, 620px); max-height: 78vh; border-radius: 14px; }
}
@media (max-width: 576px){
  .loader-video{ width: min(94vw, 460px); max-height: 70vh; border-radius: 12px; }
  .loader-skip{ padding: 9px 14px; font-size: 13px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .loader, .loader.hidden, .loader-skip{ transition: none; }
}