:root{--brand:#0ea5e9}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji','Segoe UI Emoji';}
.container{max-width:1100px;margin:0 auto;padding:1rem}
nav a{padding:.5rem .75rem;border-radius:.5rem;text-decoration:none}
nav a.active, nav a:hover{background:var(--brand);color:#fff}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;margin:.75rem 0}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
img{max-width:100%;height:auto;border-radius:.5rem}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:.6rem;border:1px solid #e5e7eb;background:#f8fafc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.badge{display:inline-block;padding:.25rem .5rem;font-size:.8rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f8fafc}
footer{margin-top:2rem;padding:2rem 0;color:#6b7280;border-top:1px solid #e5e7eb}
table{width:100%;border-collapse:collapse}
th,td{padding:.6rem;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
input,select,textarea{width:100%;padding:.6rem;border:1px solid #d1d5db;border-radius:.5rem}
label{font-size:.9rem;color:#374151}
form .row{display:grid;grid-template-columns:1fr 2fr;gap:.75rem;align-items:center;margin:.5rem 0}
.hero{display:flex;align-items:center;gap:1rem;padding:2rem 0}
.hero .title{font-size:1.8rem;font-weight:700}
@media (max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr} .hero{flex-direction:column;align-items:flex-start}}
/* Home gallery grid tweaks */
.home-gallery-grid a{display:block;text-decoration:none;color:inherit}
.home-gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:12px}
@media (max-width:768px){ .home-gallery-grid img{height:180px} }



/* === Cheerful RA Theme === */
:root{
  --brand:#16a34a;
  --accent:#f59e0b;
  --pink:#fbcfe8;
  --sky:#bae6fd;
  --mint:#bbf7d0;
  --lav:#e9d5ff;
  --sun:#fde68a;
  --card-bg: #ffffff;
}
*{box-sizing:border-box}
body{
  font-family: 'Fredoka','Baloo 2', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background: linear-gradient(180deg, #fff, #f8fafc 40%, #f1f5f9);
  color:#0f172a;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.hero .title{font-size:2rem;font-weight:800;letter-spacing:.2px}
h1,h2,h3{font-family:'Baloo 2','Fredoka',sans-serif}

/* Cards: pastel rainbow */
.card{
  background: var(--card-bg);
  border:0;
  border-radius:1rem;
  padding:1rem;
  margin:.9rem 0;
  box-shadow: 0 8px 20px rgba(2, 8, 23, .06);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:'';
  position:absolute; inset:-20% -20% auto auto; width:240px; height:240px;
  background: radial-gradient(120px 120px at 70% 30%, rgba(255,255,255,.7), transparent),
              radial-gradient(200px 160px at 10% 80%, rgba(255,255,255,.5), transparent);
  opacity:.4; pointer-events:none;
}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Pastel accents by order */
.grid .card:nth-child(6n+1){ background: linear-gradient(-150deg, var(--sky), #fff); }
.grid .card:nth-child(6n+2){ background: linear-gradient(-150deg, var(--mint), #fff); }
.grid .card:nth-child(6n+3){ background: linear-gradient(-150deg, var(--pink), #fff); }
.grid .card:nth-child(6n+4){ background: linear-gradient(-150deg, var(--lav), #fff); }
.grid .card:nth-child(6n+5){ background: linear-gradient(-150deg, var(--sun), #fff); }
.grid .card:nth-child(6n+6){ background: linear-gradient(-150deg, #ffe4e6, #fff); }

/* Buttons */
.btn{display:inline-block;padding:.65rem 1rem;border-radius:999px;border:0;background:#10b981;color:#fff;font-weight:600}
.btn.primary{background:#10b981}
.btn:hover{filter:brightness(.95)}

/* Inputs */
input,select,textarea{
  width:100%;padding:.7rem .9rem;border:1px solid #e2e8f0;border-radius:.8rem;background:#fff;outline:none;
  font-family:inherit;font-size:1rem;
}
input:focus,select:focus,textarea:focus{border-color:#86efac; box-shadow:0 0 0 4px rgba(134,239,172,.25)}

form .row{display:grid;grid-template-columns:230px 1fr;gap:1rem;align-items:center;margin:.7rem 0}
label{
  font-size:1rem;color:#0f172a;font-weight:700;
  display:flex;align-items:center;gap:.6rem
}

/* Label icons (SVG) */
label::before{
  content:''; display:inline-block; width:26px; height:26px; flex:0 0 26px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
label[data-ico="nama"]::before{ background-image:url('/assets/icons/user.svg'); }
label[data-ico="ortu"]::before{ background-image:url('/assets/icons/family.svg'); }
label[data-ico="alamat"]::before{ background-image:url('/assets/icons/home.svg'); }
label[data-ico="hp"]::before{ background-image:url('/assets/icons/phone.svg'); }
label[data-ico="lahir"]::before{ background-image:url('/assets/icons/birthday.svg'); }
label[data-ico="asal"]::before{ background-image:url('/assets/icons/school.svg'); }
label[data-ico="catatan"]::before{ background-image:url('/assets/icons/note.svg'); }
label[data-ico="judul"]::before{ background-image:url('/assets/icons/title.svg'); }
label[data-ico="lokasi"]::before{ background-image:url('/assets/icons/location.svg'); }
label[data-ico="tanggal"]::before{ background-image:url('/assets/icons/calendar.svg'); }
label[data-ico="cover"]::before{ background-image:url('/assets/icons/image.svg'); }
label[data-ico="embed"]::before{ background-image:url('/assets/icons/video.svg'); }
label[data-ico="caption"]::before{ background-image:url('/assets/icons/caption.svg'); }
label[data-ico="ringkas"]::before{ background-image:url('/assets/icons/short.svg'); }
label[data-ico="isi"]::before{ background-image:url('/assets/icons/article.svg'); }

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{padding:.75rem 1rem;border:0;background:#fff}
thead th{background:#e2fbe8; font-weight:800}
tbody tr td{box-shadow:0 1px 0 rgba(2,6,23,.04)}
tbody tr{border-radius:.8rem}
tbody tr td:first-child{border-top-left-radius:.8rem;border-bottom-left-radius:.8rem}
tbody tr td:last-child{border-top-right-radius:.8rem;border-bottom-right-radius:.8rem}

nav a{padding:.55rem .9rem;border-radius:999px;text-decoration:none;font-weight:700;color:#0f172a;background:#ecfeff}
nav a.active, nav a:hover{background:#22d3ee;color:#0b1020}

footer{margin-top:2rem;padding:2rem 0;color:#475569;border-top:1px dashed #cbd5e1}

img{max-width:100%;height:auto;border-radius:.8rem}
.badge{display:inline-block;padding:.35rem .65rem;font-size:.85rem;border-radius:999px;background:#fee2e2;border:0;color:#991b1b;font-weight:700}

@media (max-width:768px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
}


/* Layout adjustments for sticky header & fixed footer */
body{padding-top:64px; padding-bottom:66px;}
footer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px dashed #cbd5e1}


/* Footer compact */
footer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px dashed #cbd5e1}
footer .container{padding:.5rem 1rem}
body{padding-bottom:60px} /* match footer height */
@media (max-width:768px){
  body{padding-bottom:72px}
  footer .container{padding:.65rem 1rem}
}

.card-accent{background:linear-gradient(-150deg, var(--mint), #fff) !important}


/* === Override: Footer not sticky === */
footer{position:static !important; left:auto !important; right:auto !important; bottom:auto !important;}
body{padding-bottom:0 !important;}


/* === Footer compact height === */
footer .container{padding:.4rem 1rem !important}
footer{font-size:.95rem; line-height:1.3}

/* === PATCH: Home gallery no-crop & responsive === */
.home-gallery-grid a{
  display:block; text-decoration:none; color:inherit;
}
.home-gallery-grid .img-wrap{
  width:100%;
  aspect-ratio:16/9;                   /* proporsi stabil di desktop */
  background:#fff;                     /* warna letterbox */
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.home-gallery-grid .img-wrap img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;                  /* kunci: tidak memotong gambar */
  display:block;
}
@media (max-width:768px){
  .home-gallery-grid .img-wrap{ aspect-ratio:4/3; }  /* lebih pas di mobile */
}
/* === Title with icon (homepage) === */
.section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem 0}
.section-title .ico{width:28px;height:28px;display:block}
.section-title--sm .ico{width:22px;height:22px}

/* Header abu-abu muda terang */
header{
  background: #f3f4f6 !important; /* atau rgba(243,244,246,.9) */
}

/* === PATCH: Footer light & compact === */
footer{
  background: #f4f4f4 !important;      /* abu-abu muda/terang */
  border-top: 1px solid #e5e7eb !important;
  padding: .5rem 0 !important;          /* tinggi lebih pendek */
  margin-top: 1rem !important;          /* jarak dari konten */
  font-size: .9rem !important;
  line-height: 2.5 !important;
}
footer .container{
  padding: 0 1rem !important;           /* buang padding vertikal di container */
}

/* (jaga-jaga) pastikan tidak ada offset bawah sisa dari versi sticky */
body{ padding-bottom: 0 !important; }
/* === Mobile dropdown header === */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border:0; border-radius:10px;
  background:#fff; box-shadow:0 1px 3px rgba(2,6,23,.08);
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background:#0f172a; margin:3px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Desktop nav default */
.primary-nav{ display:flex; gap:.25rem; flex-wrap:wrap; }

/* Mobile behavior */
@media (max-width: 768px){
/* === Mobile dropdown header (override kuat) === */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border:0; border-radius:10px;
  background:#fff; box-shadow:0 1px 3px rgba(2,6,23,.08);
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background:#0f172a; margin:3px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Default (desktop) */
.primary-nav{ display:flex; gap:.25rem; flex-wrap:wrap; }

/* MODE MOBILE */
@media (max-width: 768px){
  .nav-toggle{ display:flex !important; }

  /* Sembunyikan menu secara default di mobile */
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid #e5e7eb;
    display:none !important;            /* override inline/warisan */
    flex-direction:column; gap:.25rem;
    padding:.5rem .75rem; z-index:60;
  }
  /* Tampilkan saat dibuka */
  .primary-nav.open{ display:flex !important; }

  /* Item nav full-width di mobile */
  .primary-nav a{
    display:block; padding:.8rem 1rem; border-radius:.75rem;
    background:#f8fafc; color:#0f172a; text-decoration:none; font-weight:700;
  }
  .primary-nav a.active, .primary-nav a:hover{
    background:#e2fbe8; color:#065f46;
  }

  /* Netralisir chip nav yang mungkin ditetapkan global */
  header nav a{ background:transparent !important; }
}
/* === Responsive table (mobile) === */
.table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width:768px){
  .table-responsive table{ min-width: 600px; } /* picu scroll bila kolom banyak */
  .table-compact th, .table-compact td{
    padding: .5rem .6rem;
    font-size: .95rem;
    white-space: nowrap;                /* cegah patah yang bikin tinggi membengkak */
  }
  /* Kolom pertama sticky agar header/label tetap terlihat saat discroll */
  .stick-first table{ border-collapse: separate; border-spacing: 0; }
  .stick-first td:first-child,
  .stick-first th:first-child{
    position: sticky; left: 0; z-index: 1;
    background: #fff;                    /* samakan dengan bg tabel */
    box-shadow: 1px 0 0 rgba(2,6,23,.06);
  }
}
/* Util opsional */
.nowrap{ white-space: nowrap; }
.wrap{ white-space: normal; }

/* === Compact Header: flush to top === */
html, body{ margin:0 !important; }      /* hilangkan default margin 8px browser */
body{ padding-top:0 !important; }        /* override sisa offset lama */

/* kecilkan padding vertikal di dalam header */
header{ margin-top:0 !important; top:0; } /* pastikan top:0 untuk sticky */
header .container{
  padding-top:.4rem !important;
  padding-bottom:.4rem !important;
}

/* (opsional) sedikit lebih lega di desktop */
@media (min-width: 768px){
  header .container{
    padding-top:.5rem !important;
    padding-bottom:.5rem !important;
  }
}
/* Tinggi header via padding */
header .container{
  padding-top: .5rem !important;   /* kecilkan = header makin pendek */
  padding-bottom: .5rem !important; /* contoh: .35rem – 1rem */
}
/* === Header height control === */
:root{
  --header-h-mobile: 56px;   /* ubah di sini */
  --header-h-desktop: 68px;  /* ubah di sini */
}

/* Hilangkan padding default container agar patuh min-height */
header .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--header-h-mobile);
  display: flex; align-items: center; /* vertikal tengah */
}

@media (min-width:768px){
  header .container{ min-height: var(--header-h-desktop); }
}

/* (Opsional) sesuaikan tinggi logo agar proporsional */
header .brand-logo{
  height: calc(var(--header-h-mobile) - 20px);
  width: auto;
}
@media (min-width:768px){
  header .brand-logo{ height: calc(var(--header-h-desktop) - 24px); }
}

/* (Opsional) jika konten ketutup karena header sticky, tambahkan offset: */
/*
body{ padding-top: var(--header-h-mobile); }
@media (min-width:768px){ body{ padding-top: var(--header-h-desktop); } }
*/

.home-slider { position:relative; overflow:hidden; }
.home-slider .slide { position:relative; height: 360px; }
.slide-img { width:100%; height:100%; object-fit:cover; display:block; }
.slide-cap { position:absolute; left:0; right:0; bottom:0; padding:.5rem .75rem;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; font-size:.95rem; }

.home-latest .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.5rem; }
.card { border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; }
.thumb { width:100%; aspect-ratio: 4 / 3; object-fit:cover; display:block; }
.noimg { width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:#888; background:#f4f4f4; }

/* Hilangkan gap default browser */
html, body {
  margin: 0;
  padding: 0;
}

/* Header sticky nempel di atas */
header.stickybar {
  position: sticky;
  top: 0;                 /* kunci di atas */
  z-index: 1000;          /* pastikan di atas konten */
  margin-top: 0;          /* jaga-jaga jika ada util margin */
}

/* Opsional: aman di iPhone yang ada notch, tanpa bikin renggang */
@supports (padding: max(0px)) {
  header.stickybar {
    padding-top: env(safe-area-inset-top);
  }
}

/* Jangan biarkan parent mematikan sticky */
main, .container, body {
  overflow: visible;      /* kalau sebelumnya ada overflow:hidden/auto di parent header, sticky bisa gagal */
}
:root { scroll-padding-top: 72px; } /* sesuaikan 72px dengan tinggi header-mu */

/* reset global: hilangkan gap bawaan browser */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* header tetap sticky & menempel */
header.stickybar {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-top: 0 !important;   /* pastikan tidak ada margin dari utility lain */
  padding-top: 0 !important;  /* cegah padding tak sengaja */
}

/* cegah elemen pertama memberi jarak di atas */
body > *:first-child {
  margin-top: 0 !important;
}

/* sticky bisa gagal kalau parent punya overflow selain visible */
html, body, header.stickybar, .container {
  overflow: visible !important;
}