/* =========================================================
   DESIGN SYSTEM - CMS Kemenag Kabupaten Bone
   ========================================================= */
:root{
  --kemenag-green:#0b6e4f;
  --kemenag-green-dark:#08533c;
  --kemenag-green-light:#e8f5f0;
  --kemenag-gold:#c9a227;
  --kemenag-gold-light:#f4e9c8;
  --kemenag-cream:#f7f5ef;
  --ink:#1c2b25;
  --ink-soft:#5b6b64;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 10px 30px rgba(8,83,60,.08);
  --shadow-hover:0 18px 40px rgba(8,83,60,.16);
  --ease:cubic-bezier(.25,.8,.25,1);
}

*{ scroll-behavior:smooth; }
body{
  font-family:"Poppins",sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-heading{ font-family:"Merriweather",serif; }
a{ transition:color .2s var(--ease); }
img{ max-width:100%; }

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(90deg,var(--kemenag-green-dark),var(--kemenag-green));
  color:#fff;
  font-size:.82rem;
  letter-spacing:.2px;
}
.topbar a{ opacity:.9; transition:opacity .2s var(--ease), transform .2s var(--ease); display:inline-block; }
.topbar a:hover{ opacity:1; transform:translateY(-2px); color:var(--kemenag-gold-light) !important; }

/* ---------- Navbar ---------- */
.navbar{
  transition:box-shadow .25s var(--ease), padding .25s var(--ease);
}
.navbar.is-scrolled{
  box-shadow:0 6px 24px rgba(8,83,60,.12) !important;
  padding-top:.4rem !important;
  padding-bottom:.4rem !important;
}
.navbar-brand span.text-success{ color:var(--kemenag-green) !important; }
.navbar-brand img{ transition:transform .3s var(--ease); }
.navbar-brand:hover img{ transform:rotate(-4deg) scale(1.05); }

.navbar-nav .nav-item{ position:relative; margin:0 2px; }
.navbar-nav .nav-link{
  font-weight:500;
  color:var(--ink) !important;
  padding:.55rem .9rem !important;
  border-radius:8px;
  position:relative;
}
.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:.9rem; right:.9rem; bottom:.28rem;
  height:2px;
  background:var(--kemenag-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color:var(--kemenag-green) !important; }
.navbar-nav .nav-link:hover::after{ transform:scaleX(1); }
.navbar-nav .dropdown-toggle::after{ vertical-align:1px; transition:transform .25s var(--ease); }
.navbar-nav .dropdown:hover .dropdown-toggle::after{ transform:rotate(180deg); }

.dropdown-menu{
  border:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover);
  padding:.5rem;
  margin-top:.4rem !important;
  transform-origin:top center;
  animation:dropdownOpen .28s var(--ease);
}
@keyframes dropdownOpen{
  from{ opacity:0; transform:translateY(-10px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.dropdown-menu .dropdown-item{
  opacity:0;
  animation:itemFadeIn .3s var(--ease) forwards;
}
.dropdown-menu .dropdown-item:nth-child(1){ animation-delay:.04s; }
.dropdown-menu .dropdown-item:nth-child(2){ animation-delay:.08s; }
.dropdown-menu .dropdown-item:nth-child(3){ animation-delay:.12s; }
.dropdown-menu .dropdown-item:nth-child(4){ animation-delay:.16s; }
.dropdown-menu .dropdown-item:nth-child(5){ animation-delay:.2s; }
.dropdown-menu .dropdown-item:nth-child(n+6){ animation-delay:.22s; }
@keyframes itemFadeIn{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}
.dropdown-item{
  border-radius:8px;
  padding:.55rem .9rem;
  font-size:.92rem;
  transition:background .18s var(--ease), padding-left .18s var(--ease);
}
.dropdown-item:hover, .dropdown-item:focus{
  background:var(--kemenag-green-light);
  color:var(--kemenag-green-dark);
  padding-left:1.15rem;
}
@media (min-width:992px){
  .navbar-nav .dropdown-menu{ display:block; opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
  .navbar-nav .dropdown:hover .dropdown-menu,
  .navbar-nav .dropdown-menu.show{ opacity:1; visibility:visible; transform:translateY(0); }
}
.navbar form input[type="search"]{
  border-radius:30px; border:1px solid #dde5e1; padding:.4rem 1rem;
}
.navbar form input[type="search"]:focus{ box-shadow:0 0 0 3px var(--kemenag-green-light); border-color:var(--kemenag-green); }

/* ---------- Buttons ---------- */
.btn-kemenag{
  background:linear-gradient(135deg,var(--kemenag-green),var(--kemenag-green-dark));
  border:none; color:#fff; font-weight:600; letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(11,110,79,.25);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn-kemenag:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,110,79,.35); filter:brightness(1.05); }
.btn-gold{
  background:linear-gradient(135deg,var(--kemenag-gold),#a9821c);
  border:none; color:#fff; font-weight:600;
  box-shadow:0 8px 20px rgba(201,162,39,.3);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-gold:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,162,39,.4); }

/* ---------- Hero Slider ---------- */
.hero-slide{
  position:relative; height:560px; background-size:cover; background-position:center;
}
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,53,38,.45) 0%, rgba(8,53,38,.78) 100%);
}
.hero-caption{ position:relative; z-index:2; color:#fff; }
.hero-caption .badge-eyebrow{
  display:inline-block; background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.35); color:#fff; font-size:.78rem; letter-spacing:1px;
  padding:.35rem .9rem; border-radius:30px; text-transform:uppercase; margin-bottom:1rem;
}
.hero-caption h1{
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.2; text-shadow:0 4px 18px rgba(0,0,0,.3);
}
.carousel-item .hero-caption > div{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.carousel-item.active .hero-caption > div{ opacity:1; transform:translateY(0); transition-delay:.25s; }
.carousel-control-prev, .carousel-control-next{ width:6%; opacity:0; transition:opacity .3s; }
#heroSlider:hover .carousel-control-prev, #heroSlider:hover .carousel-control-next{ opacity:.85; }
.carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; margin:0 4px; transition:.25s; }
.carousel-indicators .active{ opacity:1; width:26px; border-radius:5px; background:var(--kemenag-gold); }

/* ---------- Sections ---------- */
.section-title{ position:relative; padding-bottom:14px; margin-bottom:2rem; }
.section-title::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:3px;
  background:linear-gradient(90deg,var(--kemenag-green),var(--kemenag-gold)); border-radius:3px;
}
.section-title .eyebrow{ display:block; color:var(--kemenag-gold); font-weight:700; letter-spacing:1.5px; font-size:.78rem; text-transform:uppercase; margin-bottom:.35rem; font-family:"Poppins",sans-serif; }

/* ---------- Layanan Cepat cards ---------- */
.card-service{
  border:none; border-radius:var(--radius-lg); text-align:center; padding:2rem 1.1rem;
  background:#fff; box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  position:relative; overflow:hidden;
}
.card-service::before{
  content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--kemenag-green-light),transparent 60%);
  opacity:0; transition:opacity .3s var(--ease);
}
.card-service:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.card-service:hover::before{ opacity:1; }
.card-service i{ font-size:2.3rem; color:var(--kemenag-green); position:relative; z-index:1; transition:transform .3s var(--ease); }
.card-service:hover i{ transform:scale(1.15) rotate(-6deg); }
.card-service p{ position:relative; z-index:1; }

/* ---------- News cards ---------- */
.news-card{
  border:none; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.news-card .img-wrap{ overflow:hidden; height:190px; }
.news-card img{ height:190px; width:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover img{ transform:scale(1.08); }
.news-card .card-body h6 a{ color:var(--ink); text-decoration:none; transition:color .2s; }
.news-card .card-body h6 a:hover{ color:var(--kemenag-green); }

/* ---------- Widgets ---------- */
.widget-box{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  padding:1.6rem; transition:box-shadow .3s var(--ease);
}
.widget-box:hover{ box-shadow:var(--shadow-hover); }
.widget-prayer table td{ padding:.5rem 0; border-bottom:1px dashed #e7ede9; }
.widget-prayer table tr:last-child td{ border-bottom:none; }

/* ---------- Footer ---------- */
.footer-kemenag{
  background:linear-gradient(180deg,var(--kemenag-green-dark) 0%, #063d2c 100%);
  position:relative;
}
.footer-kemenag h5, .footer-kemenag h6{ position:relative; padding-bottom:.6rem; }
.footer-kemenag h5::after, .footer-kemenag h6::after{
  content:""; position:absolute; left:0; bottom:0; width:40px; height:2px; background:var(--kemenag-gold);
}
.footer-kemenag a.text-white-50{ transition:color .2s var(--ease), padding-left .2s var(--ease); display:inline-block; }
.footer-kemenag a.text-white-50:hover{ color:#fff !important; padding-left:5px; }
.footer-kemenag .social-icon{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.footer-kemenag .social-icon:hover{ background:var(--kemenag-gold); transform:translateY(-4px) scale(1.05); }

.visitor-stats-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem 1rem; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:30px; padding:.6rem 1.25rem; font-size:.82rem; color:rgba(255,255,255,.85);
}
.visitor-stats-bar strong{ color:var(--kemenag-gold); font-weight:700; }
.visitor-stats-sep{ opacity:.4; }
@media (max-width:576px){ .visitor-stats-bar{ font-size:.76rem; padding:.6rem .9rem; } }

/* ---------- Misc ---------- */
.badge-kemenag{ background:linear-gradient(135deg,var(--kemenag-gold),#a9821c); color:#fff; font-weight:600; letter-spacing:.3px; }
.sambutan-photo{ border-radius:var(--radius-lg); border:6px solid var(--kemenag-cream); box-shadow:var(--shadow-soft); transition:transform .3s var(--ease); }
.sambutan-photo:hover{ transform:scale(1.02) rotate(-1deg); }

/* Back to top button */
#backToTop{
  position:fixed; right:22px; bottom:92px; width:46px; height:46px; border-radius:50%;
  background:var(--kemenag-green); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(8,83,60,.35); border:none; z-index:1000;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ background:var(--kemenag-green-dark); }
@media (max-width:576px){ #backToTop{ right:16px; bottom:84px; } }

/* Scroll-reveal animation (fallback, works with .reveal + JS IntersectionObserver) */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }

/* ---------- Live Chat SITABE ---------- */
.sitabe-bubble{
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--kemenag-green),var(--kemenag-green-dark));
  color:#fff; border:none; font-size:1.5rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(8,83,60,.4); z-index:1040;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sitabe-bubble:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 14px 30px rgba(8,83,60,.5); }
.sitabe-bubble::after{
  content:""; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:#22c55e; border:2px solid #fff;
}

.sitabe-panel{
  position:fixed; right:22px; bottom:92px; width:340px; max-width:90vw; height:460px; max-height:70vh;
  background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25);
  z-index:1040; display:flex; flex-direction:column; overflow:hidden;
  animation:sitabeOpen .25s var(--ease);
}
@keyframes sitabeOpen{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

.sitabe-header{
  background:linear-gradient(135deg,var(--kemenag-green),var(--kemenag-green-dark)); color:#fff;
  padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.sitabe-avatar{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.sitabe-status{ opacity:.9; }

.sitabe-body{ flex:1; overflow-y:auto; padding:1rem; background:#f7faf8; }
.sitabe-intro{ background:#fff; border-radius:10px; padding:.75rem .9rem; box-shadow:0 2px 8px rgba(0,0,0,.05); margin-bottom:.75rem; }
.sitabe-messages{ display:flex; flex-direction:column; gap:.5rem; }

.sitabe-msg{ max-width:80%; display:flex; flex-direction:column; }
.sitabe-msg-guest{ align-self:flex-end; align-items:flex-end; }
.sitabe-msg-admin{ align-self:flex-start; align-items:flex-start; }
.sitabe-bubble-msg{
  padding:.5rem .8rem; border-radius:14px; font-size:.85rem; word-break:break-word; white-space:pre-wrap;
}
.sitabe-msg-guest .sitabe-bubble-msg{ background:var(--kemenag-green); color:#fff; border-bottom-right-radius:4px; }
.sitabe-msg-admin .sitabe-bubble-msg{ background:#fff; color:var(--ink); border:1px solid #e5eae7; border-bottom-left-radius:4px; }
.sitabe-msg-time{ font-size:.65rem; color:#9aa89f; margin-top:2px; }

.sitabe-input-area{ padding:.75rem; border-top:1px solid #eef1ef; flex-shrink:0; }
.sitabe-offline-note{
  padding:.75rem 1rem; font-size:.78rem; color:#8a6d1a; background:#fdf6e3;
  border-top:1px solid #f1e2b3; flex-shrink:0;
}
.sitabe-error-note{ color:#b23b3b; background:#fdecea; border-top-color:#f5c2c0; }

@media (max-width:576px){
  .sitabe-panel{ right:12px; left:12px; width:auto; bottom:84px; }
  .sitabe-bubble{ right:16px; bottom:16px; }
}

/* ---------- Halaman Masukan & Saran ---------- */
.feedback-heading{ border-bottom:1px solid #eef1ef; padding-bottom:.75rem; margin-bottom:1.5rem; position:relative; }
.feedback-heading::after{ content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:var(--kemenag-green); }
.feedback-info-box{ background:#f4f6f8; border-radius:var(--radius-md); padding:1.25rem 1.5rem; margin-bottom:1.75rem; }
.feedback-info-icon{
  width:52px; height:52px; border-radius:50%; border:2px solid #1a73b5; color:#1a73b5;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-right:1rem;
}
.feedback-input{ border-radius:8px; border:1px solid #dde5e1; padding:.65rem .9rem; }
.feedback-input:focus{ border-color:var(--kemenag-green); box-shadow:0 0 0 3px var(--kemenag-green-light); }
.btn-feedback-submit{
  background:linear-gradient(135deg,#3b5bdb,#2643b0); color:#fff; border:none; border-radius:8px;
  padding:.65rem 1.6rem; font-weight:600; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:0 8px 18px rgba(43,67,176,.25);
}
.btn-feedback-submit:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 24px rgba(43,67,176,.35); }
.feedback-reply{ background:var(--kemenag-green-light); border-left:3px solid var(--kemenag-green); border-radius:8px; padding:.75rem 1rem; }

/* ---------- Header 3-baris (logo/kontak, menu, running text) ---------- */
.site-header{ position:sticky; top:0; z-index:1030; box-shadow:0 2px 14px rgba(0,0,0,.06); }
.site-header.is-scrolled .header-menu{ box-shadow:0 6px 20px rgba(8,83,60,.1); }

.header-top{ background:#fff; border-bottom:1px solid #eef1ef; }
.header-title{ font-weight:800; font-size:1.05rem; letter-spacing:.2px; color:var(--kemenag-green-dark); line-height:1.2; }

.social-circle{
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--kemenag-green);
  color:var(--kemenag-green); display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social-circle:hover{ background:var(--kemenag-green); color:#fff; transform:translateY(-3px); }

.contact-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1.5px solid var(--kemenag-green); color:var(--kemenag-green-dark);
  border-radius:30px; padding:.4rem 1rem; font-size:.85rem; font-weight:600;
  text-decoration:none; transition:background .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.contact-pill:hover{ background:var(--kemenag-green-light); color:var(--kemenag-green-dark); }

.header-menu{ background:#fff; border-bottom:1px solid #eef1ef; padding:.25rem 0; }
.header-menu .navbar-nav .nav-link{
  font-weight:600; color:var(--ink) !important; padding:.7rem .9rem !important;
  position:relative;
}
.header-menu .navbar-nav .nav-link.active{ color:var(--kemenag-green) !important; }
.header-menu .navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2.5px;
  background:var(--kemenag-green); border-radius:2px;
}
.btn-login-pill{
  border:1.5px solid var(--kemenag-green); color:var(--kemenag-green-dark);
  border-radius:30px; padding:.45rem 1.4rem; font-weight:700; font-size:.9rem;
  text-decoration:none; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  display:inline-block;
}
.btn-login-pill:hover{ background:var(--kemenag-green); color:#fff; transform:translateY(-2px); }

.announcement-ticker{
  background:#eef4f1; border-bottom:1px solid #e2ebe6; overflow:hidden; white-space:nowrap;
}
.ticker-track{ display:inline-block; padding:.5rem 0; animation:tickerScroll 28s linear infinite; }
.ticker-content{ display:inline-block; }
.ticker-item{ font-weight:700; font-size:.82rem; color:var(--kemenag-green-dark); }
.ticker-sep{ color:var(--kemenag-gold); margin:0 1.5rem; font-weight:700; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.announcement-ticker:hover .ticker-track{ animation-play-state:paused; }

/* ---------- Statistik Kantor (di bawah Sambutan Kepala Kantor) ---------- */
.office-stat-card{
  background:#fff; border:2px solid var(--stat-color, var(--kemenag-green));
  border-radius:var(--radius-lg); padding:1.75rem 1rem; text-align:center; height:100%;
  box-shadow:var(--shadow-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.office-stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.office-stat-card i{ font-size:2.2rem; color:var(--stat-color, var(--kemenag-green)); }
.office-stat-card h3{ font-weight:800; margin:.6rem 0 .3rem; color:var(--ink); font-size:1.8rem; }
.office-stat-label{ font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); margin-bottom:.4rem; }
.office-stat-tag{ display:inline-block; font-size:.78rem; font-weight:700; color:var(--stat-color, var(--kemenag-green)); }

/* ---------- Sekilas Kemenag Bone: Tab Profil (Visi Misi/Sambutan/Pengumuman/Agenda/Video) ---------- */
.profile-tabs{
  display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.75rem;
}
.profile-tab-btn{
  flex:1 1 140px; min-width:110px; background:#fff; border:1px solid #e5eae7; border-radius:12px;
  padding:1rem .75rem; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--ink-soft); font-weight:600; font-size:.85rem; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.profile-tab-btn i{ font-size:1.4rem; }
.profile-tab-btn:hover{ transform:translateY(-3px); border-color:var(--kemenag-green); color:var(--kemenag-green); }
.profile-tab-btn.active{
  background:linear-gradient(135deg,var(--kemenag-green),var(--kemenag-green-dark));
  border-color:var(--kemenag-green); color:#fff; box-shadow:0 10px 22px rgba(11,110,79,.25);
}
.profile-tab-panel-wrap{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:2rem; }
.profile-tab-panel{ display:none; }
.profile-tab-panel.active{ display:block; animation:fadeInPanel .35s var(--ease); }
@keyframes fadeInPanel{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Berita Terbaru: kartu slider otomatis ---------- */
.news-carousel .carousel-inner{ overflow:visible; }
.news-slide-card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news-slide-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.news-slide-img-wrap{ position:relative; height:190px; overflow:hidden; }
.news-slide-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-slide-card:hover .news-slide-img-wrap img{ transform:scale(1.08); }
.news-date-badge{
  position:absolute; top:12px; left:12px; background:rgba(8,20,16,.72); color:#fff; border-radius:8px;
  padding:.4rem .6rem; text-align:center; line-height:1.1; backdrop-filter:blur(2px);
}
.news-date-badge .nd-day{ display:block; font-size:1.2rem; font-weight:800; }
.news-date-badge .nd-mon, .news-date-badge .nd-year{ font-size:.65rem; opacity:.9; }
.news-cat-badge{
  position:absolute; top:12px; right:12px; color:#fff; font-size:.7rem; font-weight:700;
  padding:.35rem .7rem; border-radius:6px; text-transform:uppercase; letter-spacing:.3px;
}
.news-slide-body{ padding:1.1rem 1.2rem 1.3rem; flex:1; display:flex; flex-direction:column; }
.news-slide-title{ font-weight:700; margin-bottom:.5rem; }
.news-slide-title a{ color:var(--ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-slide-title a:hover{ color:var(--kemenag-green); }
.news-slide-excerpt{ font-size:.85rem; color:var(--ink-soft); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:1rem; }
.news-slide-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.btn-readmore{
  background:#5b5fc7; color:#fff; font-size:.78rem; font-weight:600; padding:.5rem 1rem; border-radius:8px;
  text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn-readmore:hover{ background:#4649a8; color:#fff; transform:translateX(2px); }
.news-slide-meta{ font-size:.72rem; color:#9aa89f; white-space:nowrap; }
.news-carousel .carousel-control-prev, .news-carousel .carousel-control-next{ width:5%; opacity:.6; }
.news-carousel .carousel-control-prev{ left:-40px; }
.news-carousel .carousel-control-next{ right:-40px; }
.news-carousel .carousel-control-prev-icon, .news-carousel .carousel-control-next-icon{ background-color:var(--kemenag-green); border-radius:50%; padding:18px; }
@media (max-width:991px){
  .news-carousel .carousel-control-prev, .news-carousel .carousel-control-next{ display:none; }
}

/* ---------- Strip Aplikasi/Tautan Terkait (partner logos) ---------- */
.partner-strip{
  background:linear-gradient(90deg, var(--kemenag-green-dark), #0a2a38 60%, var(--kemenag-green-dark));
}
.partner-slider{ position:relative; display:flex; align-items:center; gap:.75rem; }
.partner-track{
  display:flex; gap:2.25rem; align-items:center;
  overflow-x:auto; scroll-behavior:smooth;
  flex:1; padding:.5rem .25rem;
  scrollbar-width:none;
}
.partner-track::-webkit-scrollbar{ display:none; }
.partner-item{
  flex:0 0 auto; width:96px; height:52px;
  background:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:.4rem .6rem;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.partner-item:hover{ transform:translateY(-5px) scale(1.04); box-shadow:0 12px 26px rgba(0,0,0,.28); }
.partner-item img{ max-width:100%; max-height:32px; width:auto; height:auto; object-fit:contain; }
.partner-nav{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.partner-nav:hover{ background:var(--kemenag-gold); border-color:var(--kemenag-gold); transform:scale(1.08); }
.partner-nav:active{ transform:scale(.95); }
@media (max-width:576px){
  .partner-item{ width:82px; height:46px; }
  .partner-item img{ max-height:26px; }
  .partner-track{ gap:1.25rem; }
}

/* ---------- Tombol Bagikan (share) ---------- */
.share-btn{
  width:38px; height:38px; border-radius:50%; border:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.share-btn:hover{ color:#fff; transform:translateY(-4px) scale(1.06); filter:brightness(1.08); }
.share-whatsapp{ background:#25D366; }
.share-facebook{ background:#1877F2; }
.share-twitter{ background:#000; }
.share-telegram{ background:#229ED9; }
.share-copy{ background:var(--ink-soft); cursor:pointer; }

/* Content typography (halaman detail/berita) */
.content{ line-height:1.85; color:#374842; }
.content img{ border-radius:var(--radius-md); }

@media (max-width:768px){
  .hero-slide{ height:420px; }
}