/* ==========================================================
   PP DARUL MA'ARIF AL FALAH — style.css
   Identitas: hijau lumut (pine) + emas (gold) + krem
   ========================================================== */

:root{
  --ease-expo: cubic-bezier(.16,1,.3,1);
}

.container-x{ max-width:80rem; margin-inline:auto; padding-inline:1rem; }
@media(min-width:640px){ .container-x{ padding-inline:1.5rem; } }
@media(min-width:1024px){ .container-x{ padding-inline:2rem; } }

::selection{ background:#c9a227; color:#05231d; }

html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:6rem; }

/* ---------- Preloader ---------- */
.preloader-bar{ transform-origin:left; animation:preloader 1.6s var(--ease-expo) infinite; }
@keyframes preloader{ 0%{transform:scaleX(0)} 55%{transform:scaleX(1)} 100%{transform:scaleX(1); opacity:0} }
.preloader-glow{ animation:glow 1.8s ease-in-out infinite; }
@keyframes glow{ 0%,100%{box-shadow:0 0 0 rgba(201,162,39,0)} 50%{box-shadow:0 0 34px rgba(201,162,39,.55)} }
#preloader.is-hidden{ opacity:0; pointer-events:none; }

/* ---------- Noise & Pattern ---------- */
.noise-overlay{
  position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pattern-light{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230b4d3e' stroke-opacity='.10'%3E%3Cpath d='M36 6 66 36 36 66 6 36Z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M36 0v10M36 62v10M0 36h10M62 36h10'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='.10'%3E%3Cpath d='M36 6 66 36 36 66 6 36Z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M36 0v10M36 62v10M0 36h10M62 36h10'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Arch (kubah/pintu masjid) ---------- */
.arch{ border-radius: 10rem 10rem 1.25rem 1.25rem; }
.arch-frame::before{
  content:''; position:absolute; inset:-14px; border:1.5px solid rgba(201,162,39,.55);
  border-radius: 11rem 11rem 1.5rem 1.5rem; z-index:0;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-expo), transform .9s var(--ease-expo); transition-delay:var(--d,0ms); will-change:opacity,transform; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="zoom"]{ transform:scale(.92); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- Line mask (judul besar) ---------- */
.mask-line{ display:block; overflow:hidden; }
.mask-line > span{ display:inline-block; transform:translateY(120%); transition:transform 1s var(--ease-expo); }
.mask-wrap.is-in .mask-line:nth-child(1) > span{ transition-delay:.05s }
.mask-wrap.is-in .mask-line:nth-child(2) > span{ transition-delay:.16s }
.mask-wrap.is-in .mask-line:nth-child(3) > span{ transition-delay:.27s }
.mask-wrap.is-in .mask-line > span{ transform:translateY(0); }

/* ---------- Header ---------- */
#site-header{ background:transparent; }
#site-header.is-scrolled{
  background:rgba(251,248,240,.92); backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -18px rgba(5,35,29,.35); border-bottom:1px solid rgba(201,162,39,.25);
}
.nav-link{ position:relative; padding-block:.25rem; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:#c9a227; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-expo); }
.nav-link:hover::after, .nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Mobile menu ---------- */
.mobile-menu.is-open{ pointer-events:auto; }
.mobile-menu.is-open .mobile-menu-backdrop{ opacity:1; }
.mobile-menu.is-open .mobile-menu-panel{ transform:translateX(0); }
.mobile-menu.is-open .mobile-nav-item{ animation:navIn .6s var(--ease-expo) both; animation-delay:var(--d,0ms); }
@keyframes navIn{ from{opacity:0; transform:translateX(30px)} to{opacity:1; transform:none} }

/* ---------- Marquee ---------- */
.marquee{ display:flex; overflow:hidden; }
.marquee-track{ display:flex; gap:3rem; min-width:100%; flex-shrink:0; animation:marquee 26s linear infinite; }
@keyframes marquee{ to{ transform:translateX(-100%); } }

/* ---------- Float & spin dekorasi ---------- */
.float-slow{ animation:floaty 6s ease-in-out infinite; }
.float-slower{ animation:floaty 8s ease-in-out 1s infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.spin-slow{ animation:spin 16s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Tab program ---------- */
.tab-btn{ position:relative; transition:all .35s var(--ease-expo); }
.tab-btn.is-active{ background:#0b4d3e; color:#fbf8f0; box-shadow:0 16px 34px -18px rgba(5,35,29,.6); transform:translateY(-2px); }
.tab-btn.is-active .tab-icon{ color:#e3c266; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:grid; animation:panelIn .65s var(--ease-expo); }
@keyframes panelIn{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

/* ---------- Timeline harian ---------- */
.tl-item .tl-dot{ transition:all .4s var(--ease-expo); }
.tl-item:hover .tl-dot{ scale:1.12; box-shadow:0 0 0 6px rgba(201,162,39,.15); }
.tl-item.is-now{ border-color:rgba(201,162,39,.6) !important; background:linear-gradient(90deg, rgba(201,162,39,.08), transparent); }
.tl-item .badge-now{ display:none; }
.tl-item.is-now .badge-now{ display:inline-flex; animation:panelIn .5s var(--ease-expo); }

/* ---------- Galeri ---------- */
.gallery-item img{ transition:transform 1.2s var(--ease-expo); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item figcaption{ transform:translateY(100%); transition:transform .5s var(--ease-expo); }
.gallery-item:hover figcaption{ transform:none; }

/* ---------- Berita ---------- */
.news-card .news-img img{ transition:transform 1.1s var(--ease-expo); }
.news-card:hover .news-img img{ transform:scale(1.06); }

/* ---------- Footer ---------- */
.footer-heading{ font-family:"Fira Sans Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:#fbf8f0; position:relative; padding-bottom:.6rem; }
.footer-heading::after{ content:''; position:absolute; left:0; bottom:0; width:2rem; height:2px; background:#c9a227; }
.footer-link{ display:inline-block; transition:all .3s; }
.footer-link:hover{ color:#e3c266; transform:translateX(4px); }
[data-prayer].is-next{ background:#c9a227; color:#05231d; border-color:#c9a227; }
[data-prayer].is-next span:last-child{ color:#05231d; }

/* ---------- Tombol ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; border-radius:9999px; padding:.85rem 1.75rem; font-size:.9rem; transition:all .4s var(--ease-expo); }
.btn-gold{ background:#c9a227; color:#05231d; box-shadow:0 16px 34px -14px rgba(201,162,39,.6); }
.btn-gold:hover{ background:#e3c266; transform:translateY(-3px); }
.btn-outline{ border:1.5px solid rgba(11,77,62,.35); color:#0b4d3e; }
.btn-outline:hover{ border-color:#0b4d3e; background:#0b4d3e; color:#fbf8f0; transform:translateY(-3px); }
.btn-dark{ background:#0b4d3e; color:#fbf8f0; }
.btn-dark:hover{ background:#0f6150; transform:translateY(-3px); }

/* ---------- Slider ---------- */
.slider-dot{ transition:all .4s var(--ease-expo); }
.slider-dot.is-active{ width:2rem; background:#c9a227; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#f6f0e1; }
::-webkit-scrollbar-thumb{ background:#0b4d3e; border-radius:8px; border:2px solid #f6f0e1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal], .mask-line > span{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; }
}
/* ---------- Prose (konten artikel & halaman) ---------- */
.prose-custom p{ margin-bottom:1.5rem; }
.prose-custom h2, .prose-custom h3{ font-family:"Fira Sans Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-top:2.5rem; margin-bottom:1rem; color:#05231d; }
.prose-custom h2{ font-size:1.75rem; }
.prose-custom h3{ font-size:1.25rem; }
.prose-custom a{ color:#c9a227; text-decoration:underline; text-decoration-color:rgba(201,162,39,.3); text-underline-offset:2px; transition:all .3s; }
.prose-custom a:hover{ color:#a6851d; text-decoration-color:#a6851d; }
.prose-custom strong{ font-weight:700; color:#0b4d3e; }
.prose-custom ul, .prose-custom ol{ margin-bottom:1.5rem; padding-left:1.5rem; }
.prose-custom li{ margin-bottom:.5rem; }
.prose-custom blockquote{ border-left:4px solid #c9a227; padding-left:1.5rem; font-style:italic; color:#0b4d3e; margin:2rem 0; }
.prose-custom code{ background:#f6f0e1; padding:.15em .4em; border-radius:.25rem; font-size:.9em; color:#a6851d; }
.prose-custom pre{ background:#05231d; color:#e3c266; padding:1.5rem; border-radius:.75rem; overflow-x:auto; margin-bottom:1.5rem; }
.prose-custom img{ max-width:100%; height:auto; border-radius:.75rem; margin:2rem 0; }