/* ============================================================
   FORUM ANAK KOTA PALEMBANG — Design System v2
   Modern Children's Educational Portal
   ============================================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  /* Brand Colors */
  --primary:        #5B8DEF;
  --primary-dark:   #3B6FD4;
  --primary-light:  #EBF2FF;
  --secondary:      #7DD3FC;
  --secondary-light:#E0F4FF;

  /* Accent Colors */
  --yellow:   #FFD166;
  --yellow-light: #FFF8E6;
  --green:    #8BD3A8;
  --green-light: #E8F8EE;
  --pink:     #FDA4AF;
  --pink-light: #FEF0F2;
  --purple:   #C4B5FD;
  --purple-light: #F0EEFF;
  --orange:   #FDBA74;
  --orange-light: #FFF4E6;
  --red:      #FB7185;

  /* Neutrals */
  --bg:       #F8FBFF;
  --bg-alt:   #F0F6FF;
  --white:    #FFFFFF;
  --text:     #1E2A3B;
  --text-muted: #6B7A9A;
  --border:   #E4ECF7;

  /* Typography */
  --font-title: 'Baloo 2', 'Nunito', sans-serif;
  --font-body:  'Nunito', 'Poppins', sans-serif;

  /* Radii */
  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  36px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(91,141,239,.10);
  --shadow-md:   0 4px 20px rgba(91,141,239,.14);
  --shadow-lg:   0 8px 40px rgba(91,141,239,.18);
  --shadow-card: 0 4px 24px rgba(30,42,59,.08);
  --shadow-lift: 0 12px 40px rgba(91,141,239,.22);

  /* Transitions */
  --t-fast: 0.18s ease;
  --t-mid:  0.30s ease;
  --t-slow: 0.50s ease;

  /* Spacing */
  --section-py: 80px;
  --section-py-sm: 48px;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout Helpers ────────────────────────────────────── */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.section-padding { padding: var(--section-py) 0; }
.section-padding-sm { padding: var(--section-py-sm) 0; }
.text-center { text-align: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

/* ── Typography ────────────────────────────────────────── */
.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 10px;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.7;
}

.section-header { margin-bottom: 40px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--primary);
  font-size: .95rem;
  white-space: nowrap;
  transition: gap var(--t-fast);
}
.link-more:hover { gap: 10px; }

/* ── Global Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(91,141,239,.35);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 8px 28px rgba(91,141,239,.40); }

.btn-secondary {
  background: var(--white);
  color: var(--primary);
  border: 2.5px solid var(--primary);
}
.btn-secondary:hover { background: var(--primary-light); }

.btn-help {
  background: linear-gradient(135deg, var(--pink) 0%, #f9536a 100%);
  color: var(--white);
  padding: 11px 22px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(253,164,175,.45);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.btn-help:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(253,164,175,.55); }

.btn-yellow {
  background: var(--yellow);
  color: var(--text);
  box-shadow: 0 4px 18px rgba(255,209,102,.40);
}
.btn-yellow:hover { background: #f5c43a; box-shadow: 0 8px 28px rgba(255,209,102,.50); }

.btn-purple {
  background: linear-gradient(135deg, #a78bfa 0%, var(--purple) 100%);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(196,181,253,.45);
}
.btn-purple:hover { box-shadow: 0 8px 28px rgba(196,181,253,.55); }

.btn-lg { padding: 16px 36px; font-size: 1.1rem; }

/* Ripple Effect */
.btn::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.btn:active::after { width: 200px; height: 200px; opacity: 1; transition: 0s; }

/* ── NAVBAR ────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--border);
  transition: box-shadow var(--t-mid);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}

/* Brand */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.brand-name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav Links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.nav-link:hover { color: var(--primary); background: var(--primary-light); }
.nav-link.active {
  color: var(--primary);
  background: var(--primary-light);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: var(--primary);
  border-radius: var(--r-full);
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Hamburger */
.hamburger-btn {
  display: none;
  background: var(--primary-light);
  border: none;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: background var(--t-fast);
}
.hamburger-btn:hover { background: var(--primary); color: var(--white); }

/* Mobile Nav Drawer */
.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,42,59,.35);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.nav-drawer-overlay.active { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--white);
  z-index: 999;
  padding: 24px;
  transform: translateX(100%);
  transition: transform var(--t-mid);
  overflow-y: auto;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.nav-drawer.open { transform: translateX(0); }

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.drawer-close-btn {
  background: var(--pink-light);
  border: none;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 1.1rem;
  cursor: pointer;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  color: var(--text);
  font-size: 1.05rem;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.drawer-link:hover, .drawer-link.active { background: var(--primary-light); color: var(--primary); }
.drawer-help { background: var(--pink-light); color: #e63960 !important; margin-top: 16px; }
.drawer-help:hover { background: var(--pink) !important; color: var(--white) !important; }

/* ── HERO SECTION ──────────────────────────────────────── */
.hero-section {
  position: relative;
  padding: 70px 0 90px;
  overflow: hidden;
  background: linear-gradient(160deg, #EBF4FF 0%, #F8FBFF 55%, #FFF0F5 100%);
}

/* Decorative background blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}
.hero-blob-1 {
  width: 500px; height: 500px;
  background: var(--secondary);
  top: -180px; right: -100px;
}
.hero-blob-2 {
  width: 350px; height: 350px;
  background: var(--purple);
  bottom: -120px; left: -80px;
}
.hero-blob-3 {
  width: 200px; height: 200px;
  background: var(--yellow);
  top: 60px; left: 40%;
  opacity: .25;
}

/* Decorative shapes */
.hero-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.cloud-1 {
  top: 30px; right: 8%;
  width: 90px; height: 50px;
  background: var(--white);
  border-radius: var(--r-full);
  opacity: .7;
  box-shadow: 0 4px 16px rgba(91,141,239,.10);
  animation: floatY 6s ease-in-out infinite;
}
.cloud-1::before {
  content: '';
  position: absolute;
  width: 50px; height: 50px;
  background: var(--white);
  border-radius: 50%;
  top: -20px; left: 12px;
}
.cloud-1::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  background: var(--white);
  border-radius: 50%;
  top: -12px; right: 14px;
}
.star-1 { top: 80px; left: 5%; font-size: 1.8rem; animation: floatY 4s ease-in-out infinite 1s; }
.star-2 { top: 200px; right: 4%; font-size: 1.4rem; animation: floatY 5s ease-in-out infinite 0.5s; }
.star-3 { bottom: 80px; left: 12%; font-size: 1.2rem; animation: floatY 3.5s ease-in-out infinite 2s; }

.palembang-ornament {
  position: absolute;
  bottom: 0; right: 0;
  width: 220px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80'%3E%3Cpath d='M0 80 Q20 40 40 60 Q60 20 80 50 Q100 10 120 40 Q140 0 160 30 Q180 60 200 20 L220 80Z' fill='%235B8DEF' opacity='.08'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .6;
}

/* Ampera silhouette hint */
.hero-ampera {
  position: absolute;
  bottom: 0; left: 0;
  width: 180px; height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Crect x='0' y='50' width='180' height='10' rx='4' fill='%238BD3A8' opacity='.3'/%3E%3Crect x='80' y='10' width='20' height='50' rx='4' fill='%238BD3A8' opacity='.3'/%3E%3Cpath d='M30 50 Q90 10 150 50' stroke='%238BD3A8' stroke-width='4' fill='none' opacity='.4'/%3E%3C/svg%3E") no-repeat bottom/contain;
}

/* Grid */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Left – content */
.badge-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-light);
  color: var(--primary);
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.badge-tagline::before { content: ''; }

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.18;
  margin-bottom: 18px;
}
.hero-title .highlight {
  background: linear-gradient(135deg, var(--primary) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 480px;
}

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-stat strong {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}
.hero-stat span { font-size: .82rem; color: var(--text-muted); font-weight: 600; }

/* Right – visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-wrapper{

background:#ffffffaa;

backdrop-filter:blur(10px);

padding:30px;

border-radius:35px;

border:1px solid rgba(255,255,255,.4);

box-shadow:0 25px 60px rgba(91,141,239,.12);

}

.hero-img{
    width:100%;
    max-width:650px;
    height:auto;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));
    transition:.4s;
  animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}


}

/* Floating sticker badges on hero */
.hero-float-badge {
  position: absolute;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: 0 12px 30px rgba(91,141,239,.15);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  animation: floatY 4s ease-in-out infinite;
}

/* kiri atas */
.badge-top-left{

    top:10%;

    left:-7%;

}

.badge-top-right{

    top:10%;

    right:-7%;

}

.badge-bottom-left{

    bottom:8%;

    left:-5%;

}

.badge-bottom-right{

    bottom:15%;

    right:-8%;

}

/* ── QUICK ACCESS SECTION ──────────────────────────────── */
.quick-access-section {
  padding: var(--section-py) 0;
  position: relative;
}

.quick-access-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    max-width:1100px;
    margin:40px auto 0;
}

.quick-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 20px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}
.quick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.quick-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-lift); }

.icon-wrapper {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.6rem;
  transition: transform var(--t-mid);
}
.quick-card:hover .icon-wrapper { transform: scale(1.15) rotate(-5deg); }

.quick-card h3 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.quick-card p {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Card color themes */
.card-blue  { border-color: var(--primary);  }
.card-blue  .icon-wrapper { background: var(--primary-light); color: var(--primary); }
.card-blue:hover  { background: linear-gradient(160deg, #EBF2FF 0%, var(--white) 100%); }

.card-orange { border-color: var(--orange); }
.card-orange .icon-wrapper { background: var(--orange-light); color: #c45b00; }
.card-orange:hover { background: linear-gradient(160deg, #FFF4E6 0%, var(--white) 100%); }

.card-purple { border-color: var(--purple); }
.card-purple .icon-wrapper { background: var(--purple-light); color: #6843c4; }
.card-purple:hover { background: linear-gradient(160deg, #F0EEFF 0%, var(--white) 100%); }

.card-green  { border-color: var(--green); }
.card-green  .icon-wrapper { background: var(--green-light); color: #2d6a47; }
.card-green:hover  { background: linear-gradient(160deg, #E8F8EE 0%, var(--white) 100%); }

.card-red    { border-color: var(--red); }
.card-red    .icon-wrapper { background: var(--pink-light); color: #c41136; }
.card-red:hover    { background: linear-gradient(160deg, #FEF0F2 0%, var(--white) 100%); }

/* ── INFO & AGENDA SECTION ─────────────────────────────── */
.bg-light { background: var(--bg-alt); }

.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.info-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }

.card-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--primary-light);
}
.card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.info-card:hover .card-thumb img { transform: scale(1.05); }

.status-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .3px;
}
.status-badge.open   { background: var(--green); color: #1a4d30; }
.status-badge.soon   { background: var(--yellow); color: #6b4700; }
.status-badge.active { background: var(--primary); }
.status-badge.done   { background: var(--text-muted); }

.card-body {
  padding: 22px 24px 26px;
}
.category-tag {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--primary-light);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.card-title {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .83rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.card-date svg { width: 14px; height: 14px; }
.card-excerpt {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  font-size: .9rem;
  transition: gap var(--t-fast);
}
.btn-text:hover { gap: 10px; }

/* ── POJOK EDUKASI ─────────────────────────────────────── */
.edu-category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.edu-card {
  border-radius: var(--r-lg);
  padding: 28px 16px 24px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
}
.edu-card:hover { transform: translateY(-8px) scale(1.04); box-shadow: var(--shadow-lift); }

.edu-card svg {
  width: 40px; height: 40px;
  transition: transform var(--t-mid);
}
.edu-card:hover svg { transform: scale(1.25) rotate(-8deg); }

.edu-card h4 {
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 800;
}

/* Edu card colors */
.edu-card.card-1 { background: var(--primary-light); color: var(--primary); box-shadow: 0 4px 20px rgba(91,141,239,.15); }
.edu-card.card-2 { background: var(--pink-light);    color: #c41136;       box-shadow: 0 4px 20px rgba(253,164,175,.20); }
.edu-card.card-3 { background: var(--secondary-light);color: #0077b6;      box-shadow: 0 4px 20px rgba(125,211,252,.20); }
.edu-card.card-4 { background: var(--yellow-light);  color: #7a5000;       box-shadow: 0 4px 20px rgba(255,209,102,.20); }
.edu-card.card-5 { background: var(--purple-light);  color: #5730cc;       box-shadow: 0 4px 20px rgba(196,181,253,.20); }
.edu-card.card-6 { background: var(--green-light);   color: #1f5c39;       box-shadow: 0 4px 20px rgba(139,211,168,.20); }

/* ── BELAJAR SERU / GAME SECTION ───────────────────────── */
.bg-game {
  background: linear-gradient(160deg, #EBF2FF 0%, #F8FBFF 50%, #F0EEFF 100%);
  position: relative;
  overflow: hidden;
}
.bg-game::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(196,181,253,.25) 0%, transparent 55%),
              radial-gradient(circle at 10% 80%, rgba(125,211,252,.20) 0%, transparent 50%);
  pointer-events: none;
}

.game-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
  position: relative;
  z-index: 2;
}

.game-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.game-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lift); }
.game-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.game-card:nth-child(1)::after { background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.game-card:nth-child(2)::after { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.game-card:nth-child(3)::after { background: linear-gradient(90deg, var(--purple), var(--pink)); }

.game-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  transition: transform var(--t-mid);
}
.game-card:hover .game-icon-wrap { transform: scale(1.15) rotate(10deg); }
.game-card:nth-child(1) .game-icon-wrap { background: var(--primary-light); color: var(--primary); }
.game-card:nth-child(2) .game-icon-wrap { background: var(--yellow-light);  color: #7a5000; }
.game-card:nth-child(3) .game-icon-wrap { background: var(--purple-light);  color: #5730cc; }

.game-card h3 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}
.game-card p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── ABOUT / SIAPA KAMI SECTION ────────────────────────── */
.about-section { background: var(--white); }

.role-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.role-card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border);
}
.role-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: transparent; }

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 auto 16px;
}
.role-card:nth-child(1) .role-badge { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); }
.role-card:nth-child(2) .role-badge { background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%); color: var(--text); }
.role-card:nth-child(3) .role-badge { background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); }

.role-card h3 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}
.role-card p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.margin-top-lg { margin-top: 36px; }
.margin-top-md { margin-top: 24px; }

/* ── FOOTER ────────────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #EBF2FF 0%, #DDE8FF 100%);
  position: relative;
  overflow: hidden;
  padding-top: 64px;
}

/* Grass decoration */
.footer-grass {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50'%3E%3Cpath d='M0 50 Q50 10 100 30 Q150 0 200 20 Q250 40 300 10 Q350 30 400 5 Q450 25 500 15 Q550 35 600 8 Q650 28 700 12 Q750 32 800 6 Q850 26 900 16 Q950 36 1000 10 Q1050 30 1100 20 Q1150 10 1200 25 L1200 50Z' fill='%238BD3A8' opacity='.6'/%3E%3Cpath d='M0 50 Q60 20 120 35 Q180 5 240 28 Q300 45 360 18 Q420 38 480 22 Q540 42 600 20 Q660 38 720 25 Q780 45 840 18 Q900 40 960 24 Q1020 44 1080 30 Q1140 15 1200 35 L1200 50Z' fill='%238BD3A8' opacity='.35'/%3E%3C/svg%3E") no-repeat bottom/cover;
}

/* Footer clouds */
.footer::before {
  content: '☁️';
  position: absolute;
  top: 12px; left: 5%;
  font-size: 2.5rem;
  opacity: .4;
  animation: floatY 7s ease-in-out infinite;
}
.footer::after {
  content: '☁️';
  position: absolute;
  top: 8px; right: 8%;
  font-size: 1.8rem;
  opacity: .3;
  animation: floatY 5s ease-in-out infinite 2s;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  position: relative;
  z-index: 1;
}

.footer-brand h3 {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.footer-brand p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 280px;
}

/* Social links */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.social-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--primary);
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.social-btn:hover { transform: translateY(-3px); background: var(--primary); color: var(--white); }

.footer-links h4,
.footer-contact h4 {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
}
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: .9rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: inline-block;
}
.footer-links a:hover { color: var(--primary); padding-left: 4px; }

.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary); }

.footer-bottom {
  border-top: 1.5px solid rgba(91,141,239,.15);
  padding: 18px 0;
  position: relative;
  z-index: 1;
}
.footer-bottom p {
  font-size: .85rem;
  color: var(--text-muted);
}
.footer-bottom span { color: var(--red); }

/* ── ANIMATIONS ────────────────────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,141,239,.40); }
  50%       { box-shadow: 0 0 0 12px rgba(91,141,239,.0); }
}

/* Scroll-reveal base state */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .quick-access-grid { grid-template-columns: repeat(3, 1fr); }
  .edu-category-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-description { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .role-cards-grid { grid-template-columns: 1fr 1fr; }
  .game-cards-grid  { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --section-py: 56px; }
  .nav-menu { display: none; }
  .hamburger-btn { display: flex; }
  .quick-access-grid { grid-template-columns: repeat(2, 1fr); }
  .edu-category-grid { grid-template-columns: repeat(2, 1fr); }
  .section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .quick-access-grid { grid-template-columns: 1fr 1fr; }
  .role-cards-grid { grid-template-columns: 1fr; }
  .game-cards-grid  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 1.9rem; }
  .edu-category-grid { grid-template-columns: repeat(2, 1fr); }
  .mascot-wrapper { display: none; }
}

/* ── ACCESSIBILITY ─────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── PAGE HERO (inner pages) ───────────────────────────── */
.page-hero {
  background: linear-gradient(160deg, #EBF4FF 0%, #F8FBFF 60%, #F0EEFF 100%);
  padding: 60px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(196,181,253,.20) 0%, transparent 55%),
              radial-gradient(circle at 10% 70%, rgba(125,211,252,.15) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.page-hero-deco {
  width: 260px;
  flex-shrink: 0;
  animation: floatY 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(91,141,239,.18));
}
.page-hero-deco svg { width: 100%; border-radius: var(--r-xl); }

@media (max-width: 768px) {
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-deco  { display: none; }
  .page-hero       { padding: 48px 0 40px; }
}

/* ── EDU CARD — with description paragraph ─────────────── */
.edu-card p {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   INFO & AGENDA — Search bar, Detail drawer, Enhancements
   ═══════════════════════════════════════════════════════ */

/* ── Search bar ─────────────────────────────────────── */
.search-bar-wrap {
  position: relative;
  max-width: 520px;
  width: 100%;
}

.search-bar-wrap .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding: 13px 46px 13px 46px;
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.search-input::placeholder { color: var(--text-muted); }

.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91,141,239,.12);
}

.search-clear-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--border);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .7rem;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
  opacity: 0;
  pointer-events: none;
}

.search-bar-wrap.has-value .search-clear-btn {
  opacity: 1;
  pointer-events: auto;
}

.search-clear-btn:hover {
  background: var(--primary);
  color: var(--white);
}

/* Search + filter toolbar row */
.agenda-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
}

/* No-results state */
.no-results {
  text-align: center;
  padding: 56px 20px;
  animation: fadeUp .35s ease;
}
.no-results-icon { font-size: 3.5rem; display: block; margin-bottom: 14px; }
.no-results h3 {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.no-results p { font-size: .95rem; color: var(--text-muted); }

/* ── Agenda card — publication date row ─────────────── */
.card-pub-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.card-pub-date svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Card — clickable cursor */
.info-card.clickable {
  cursor: pointer;
}
.info-card.clickable .card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap var(--t-fast);
}
.info-card.clickable:hover .card-read-more { gap: 10px; }

/* ── Detail Drawer (slide-in from right) ────────────── */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,42,59,.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.detail-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(540px, 100vw);
  height: 100%;
  background: var(--white);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-mid);
  box-shadow: -8px 0 40px rgba(30,42,59,.14);
}
.detail-drawer.open {
  transform: translateX(0);
}

.detail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.detail-drawer-header h2 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detail-close-btn {
  background: var(--pink-light);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.detail-close-btn:hover { background: var(--red); color: var(--white); }

.detail-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  overscroll-behavior: contain;
}

/* Hero thumb inside drawer */
.detail-thumb {
  width: 100%;
  height: 160px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 6rem;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.detail-thumb .detail-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* Meta chips row */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--bg);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.detail-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Detail sections */
.detail-section {
  margin-bottom: 22px;
}
.detail-section-title {
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.detail-section p {
  font-size: .93rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Syarat list */
.detail-syarat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-syarat li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.detail-syarat li::before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Info box */
.detail-info-box {
  background: var(--primary-light);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.detail-info-box-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.detail-info-box p {
  font-size: .88rem;
  color: var(--primary-dark);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
}

/* Drawer footer CTA */
.detail-drawer-footer {
  padding: 16px 24px 20px;
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}
.detail-drawer-footer .btn { flex: 1; justify-content: center; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .agenda-toolbar { flex-direction: column; align-items: stretch; }
  .search-bar-wrap { max-width: 100%; }
  .detail-drawer { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; top: auto; bottom: 0; height: 92vh; transform: translateY(100%); }
  .detail-drawer.open { transform: translateY(0); }
  .detail-drawer-header { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ═══════════════════════════════════════════════════════
   FLOATING HELP BUTTON
   Simple <a> link injected by main.js — visible on every page
   ═══════════════════════════════════════════════════════ */

/* ── FAB link ───────────────────────────────────────── */
.help-fab {
  position: fixed;
  bottom: 160px;        /* comfortably above back-to-top (100px + 44px height + gap) */
  right: 24px;
  z-index: 810;
  /* Pill on desktop */
  height: 48px;
  padding: 0 18px 0 14px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--pink) 0%, #f9536a 100%);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(253,164,175,.55),
              0 1px 4px rgba(30,42,59,.12);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  animation: floatY 4s ease-in-out infinite;
}
.help-fab::after {
  content: 'Butuh Bantuan?';
}
.help-fab:hover,
.help-fab:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(253,164,175,.65),
              0 2px 8px rgba(30,42,59,.14);
  animation-play-state: paused;
  color: var(--white);
  outline: none;
}

/* ── Mobile: compact circle, no label ──────────────── */
@media (max-width: 480px) {
  .help-fab {
    bottom: 156px;
    right: 16px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .help-fab::after { display: none; }
}

/* ═══════════════════════════════════════════════════════
   KABAR ANAK — Featured Article, News Cards, Article Drawer
   ═══════════════════════════════════════════════════════ */

/* ── Featured article hero ──────────────────────────── */
.featured-article {
  background: linear-gradient(135deg, #EBF2FF 0%, #FFF0F2 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: box-shadow var(--t-mid), transform var(--t-mid);
  position: relative;
  border: 2px solid transparent;
}
.featured-article:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.featured-article:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* "Featured" label */
.featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  color: var(--text);
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--r-full);
  margin-bottom: 14px;
}

.featured-body {
  padding: 36px 36px 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-body .category-tag { margin-bottom: 10px; }

.featured-title {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 14px;
}

.featured-excerpt {
  font-size: .97rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 520px;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.featured-meta span { display: flex; align-items: center; gap: 5px; }
.featured-meta svg  { width: 13px; height: 13px; }

.featured-thumb {
  width: 280px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}
/* Decorative blob behind emoji */
.featured-thumb::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  filter: blur(24px);
}

/* ── News toolbar ────────────────────────────────────── */
.news-toolbar {
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  padding: 16px 0;
}
.news-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── News card — reading-time + author row ───────────── */
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.news-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
}
.news-card-meta svg { width: 12px; height: 12px; flex-shrink: 0; }

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

/* Tag chips inside article detail */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.tag-chip {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
}
.tag-chip::before { content: '#'; margin-right: 1px; }

/* ── Article detail drawer ───────────────────────────── */
.article-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,42,59,.48);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.article-overlay.open { opacity: 1; pointer-events: all; }

.article-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(600px, 100vw);
  height: 100%;
  background: var(--white);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-mid);
  box-shadow: -8px 0 48px rgba(30,42,59,.16);
}
.article-drawer.open { transform: translateX(0); }

/* Drawer header */
.article-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
  background: var(--white);
}
.article-drawer-header-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 800;
  color: var(--text-muted);
}
.article-drawer-header-label svg { width: 15px; height: 15px; }

.article-drawer-close {
  background: var(--pink-light);
  border: none;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); cursor: pointer; flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.article-drawer-close:hover { background: var(--red); color: var(--white); }
.article-drawer-close svg { width: 16px; height: 16px; }

/* Drawer scrollable body */
.article-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Article thumb banner */
.article-thumb-banner {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Article content area */
.article-content {
  padding: 28px 28px 40px;
}
.article-content-kategori { margin-bottom: 12px; }

.article-content-title {
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.28;
  margin-bottom: 16px;
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1.5px dashed var(--border);
}
.article-byline span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.article-byline svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Paragraphs */
.article-paragraph {
  font-size: .97rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 18px;
}
.article-paragraph:last-of-type { margin-bottom: 0; }

/* Drop-cap on first paragraph */
.article-paragraph:first-of-type::first-letter {
  font-family: var(--font-title);
  font-size: 3.2em;
  font-weight: 800;
  color: var(--primary);
  float: left;
  line-height: .8;
  margin: 4px 8px 0 0;
}

/* Quote block — for any paragraph starting with " */
.article-quote {
  border-left: 4px solid var(--primary);
  background: var(--primary-light);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  margin: 18px 0;
  font-style: italic;
  font-size: .95rem;
  color: var(--primary-dark);
  font-weight: 600;
  line-height: 1.65;
}

/* Drawer footer */
.article-drawer-footer {
  padding: 16px 24px 20px;
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  background: var(--white);
}
.article-drawer-footer .btn { flex: 1; justify-content: center; font-size: .9rem; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .featured-article {
    grid-template-columns: 1fr;
  }
  .featured-thumb {
    width: 100%;
    min-height: 160px;
    font-size: 6rem;
    order: -1;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .featured-body { padding: 24px; }
}
@media (max-width: 768px) {
  .news-toolbar-inner { flex-direction: column; align-items: stretch; }
  .article-drawer {
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    top: auto; bottom: 0;
    height: 92vh;
    transform: translateY(100%);
  }
  .article-drawer.open { transform: translateY(0); }
  .article-drawer-header { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
@media (max-width: 480px) {
  .featured-title { font-size: 1.2rem; }
  .article-content { padding: 20px 18px 32px; }
  .article-thumb-banner { height: 130px; font-size: 5rem; }
}

.brand-logo-image{
    width:56px;
    height:56px;
    object-fit:contain;
    flex-shrink:0;
}

.footer-social{
    display:flex;
    gap:16px;
    margin-top:20px;
}

.social-btn{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#5B8DEF;
    font-size:24px;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    transition:.3s;
}

.social-btn:hover{
    transform:translateY(-4px);
    background:#5B8DEF;
    color:#fff;
}


/* ── Bantuan page — hero image ─────────────────────────── */
.bantuan-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;      /* 260px × 1.35 ≈ 360px */
  flex-shrink: 0;
  /* inherit float animation from .page-hero-deco */
}

.bantuan-hero-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  /* animation handled by parent .bh-card */
}

@media (max-width: 768px) {
  /* .page-hero-deco is already hidden at 768px by the base rule */
  .bantuan-hero-img { max-width: 380px; }
}

/* ═══════════════════════════════════════════════════════
   BANTUAN HERO — floating badges + decorations
   ═══════════════════════════════════════════════════════ */

/* Outer wrapper — position context for badges & decor */
.bantuan-hero-visual {
  position: relative;
  width: 360px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none; /* override any inherited drop-shadow */
}

/* ── Image wrapper (mirrors .hero-img-wrapper) ──────── */
.bh-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 460px;
  z-index: 2;
}

/* White card behind the illustration */
.bh-card {
  background: var(--white);
  border-radius: var(--r-xl);                       /* 36px — same large radius as design system */
  box-shadow: 0 8px 40px rgba(91, 141, 239, .14),   /* soft blue glow */
              0 2px 12px rgba(30, 42, 59, .08);      /* subtle lift */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatY 6s ease-in-out infinite;        /* gentle float — same as homepage hero-img */
}

/* ── Background pastel blobs ────────────────────────── */
.bh-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.bh-blob-1 {
  width: 260px;
  height: 260px;
  background: rgba(253, 164, 175, .14);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(32px);
  animation: floatY 8s ease-in-out infinite;
}
.bh-blob-2 {
  width: 160px;
  height: 160px;
  background: rgba(196, 181, 253, .16);
  top: 5%; right: 0%;
  filter: blur(24px);
  animation: floatY 6s ease-in-out infinite 1.5s;
}

/* ── Decorative elements (clouds, stars, leaves) ────── */
.bh-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  line-height: 1;
}

/* Clouds */
.bh-cloud-1 { font-size: 1.8rem; top: 2%;  left: -6%; opacity: .55; animation: floatY 7s ease-in-out infinite 0s; }
.bh-cloud-2 { font-size: 1.3rem; top: 12%; right: -4%; opacity: .45; animation: floatY 5.5s ease-in-out infinite 2s; }

/* Stars */
.bh-star-1  { font-size: 1.2rem; top: 18%;  left: 2%;   opacity: .80; animation: floatY 4s ease-in-out infinite 0.4s; }
.bh-star-2  { font-size: 1.0rem; bottom: 22%; right: 0%;  opacity: .75; animation: floatY 5s ease-in-out infinite 1.1s; }
.bh-star-3  { font-size: 0.9rem; bottom: 6%;  left: 4%;   opacity: .70; animation: floatY 3.8s ease-in-out infinite 1.8s; }

/* Leaves / flowers */
.bh-leaf-1  { font-size: 1.1rem; bottom: 18%; left: -4%;  opacity: .75; animation: floatY 6s ease-in-out infinite 0.9s; }
.bh-leaf-2  { font-size: 1.0rem; top: 30%;    right: -5%; opacity: .70; animation: floatY 4.5s ease-in-out infinite 2.3s; }

/* ── Floating badges ─────────────────────────────────── */
/* Base — inherits .hero-float-badge from style.css    */
.bh-badge {
  z-index: 4;
  position: absolute;
  animation: floatY 4s ease-in-out infinite;
}

/* Positions — mirror homepage badge layout */
.bh-badge-tl {
  top: 6%;
  left: -8%;
  animation-delay: .5s;
  background: var(--pink-light);
  color: #8b1d2f;
}
.bh-badge-tr {
  top: 20%;
  right: -10%;
  animation-delay: 1.2s;
  background: var(--primary-light);
  color: var(--primary-dark);
}
.bh-badge-bl {
  bottom: 24%;
  left: -8%;
  animation-delay: .9s;
  background: var(--green-light);
  color: #1a4d30;
}
.bh-badge-br {
  bottom: 8%;
  right: -8%;
  animation-delay: 1.6s;
  background: var(--yellow-light);
  color: #7a5000;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Badges tuck closer to image on mid-size screens */
  .bh-badge-tl { left: -4%; }
  .bh-badge-tr { right: -4%; }
  .bh-badge-bl { left: -4%; }
  .bh-badge-br { right: -4%; }
}

@media (max-width: 768px) {
  /* .page-hero-deco is hidden at 768px — nothing extra needed */
  .bantuan-hero-visual { width: 100%; max-width: 400px; }
}

/* ═══════════════════════════════════════════════════════
   BANTUAN PAGE — Form field classes + FAQ Accordion
   ═══════════════════════════════════════════════════════ */

/* ── Form label ─────────────────────────────────────── */
.form-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  margin-bottom: 8px;
}

/* ── Form input / select / textarea ─────────────────── */
.form-input {
  width: 100%;
  padding: 13px 18px;
  border: 2.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--text);
  background: var(--bg);
  outline: none;
  appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91,141,239,.13);
}
.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── FAQ Accordion ───────────────────────────────────── */

/* ── Home: Tentang Kami two-column layout ────────────── */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .about-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

  /* Tombol Butuh Bantuan disembunyikan dari navbar mobile */
  .navbar .btn-bantuan,
  .navbar .btn-help,
  .navbar .help-button {
    display: none !important;
  }