/* =========================================================================
   OJS 3 Custom Stylesheet — "Ceria" Early Childhood (Anak Usia Dini)
   Elegan, lembut, playful + ANIMASI LATAR (awan melayang, balon & bintang).
   Untuk OJS 3 Default Theme (berbasis Bootstrap).
   ------------------------------------------------------------------------
   Cara pakai:
   1. Login sebagai Journal Manager / Admin.
   2. Settings > Website > Appearance > Setup.
   3. Pada "Journal style sheet", unggah file CSS ini, lalu Save.
   4. Refresh keras: Ctrl/Cmd + Shift + R.
   Self-contained: font via Google Fonts + motif/animasi via SVG inline.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --paud-blue:      #4A90D9;
  --paud-blue-dk:   #2F6FB3;
  --paud-sky:       #7FC4EC;
  --paud-mint:      #6FC6A6;
  --paud-yellow:    #F6B940;
  --paud-coral:     #F58A7B;
  --paud-lavender:  #B49BE0;

  --paud-ink:       #33475B;
  --paud-ink-soft:  #61728A;
  --paud-cream:     #FFFDF9;
  --paud-surface:   #FFFFFF;
  --paud-soft:      #F3F8FD;
  --paud-border:    #E7EEF6;

  --paud-radius:    16px;
  --paud-radius-sm: 10px;
  --paud-shadow:    0 2px 6px rgba(51,71,91,.06), 0 12px 30px rgba(51,71,91,.06);
  --paud-shadow-sm: 0 1px 3px rgba(51,71,91,.07);
}

/* ------------------------------------------------------------------ Base */
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--paud-ink);
  background-color: var(--paud-cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(127,196,236,.10) 0, rgba(127,196,236,0) 22%),
    radial-gradient(circle at 88% 4%, rgba(180,155,224,.10) 0, rgba(180,155,224,0) 20%),
    radial-gradient(circle at 80% 92%, rgba(111,198,166,.10) 0, rgba(111,198,166,0) 22%);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ============================ ANIMASI LATAR ANAK USIA DINI ============================
   Dua lapisan tetap (fixed) di belakang seluruh konten (z-index negatif),
   sehingga muncul di SEMUA halaman termasuk About. pointer-events:none agar
   tidak mengganggu klik. */

/* Lapisan 1: awan melayang (dua arah) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .55;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 14%, 0 72%;
  background-size: 220px auto, 170px auto;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='120'%3E%3Cg%20fill='%23BBDDF5'%3E%3Cellipse%20cx='60'%20cy='80'%20rx='46'%20ry='24'/%3E%3Cellipse%20cx='105'%20cy='82'%20rx='32'%20ry='19'/%3E%3Cellipse%20cx='86'%20cy='62'%20rx='28'%20ry='20'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='100'%3E%3Cg%20fill='%23D8ECFB'%3E%3Cellipse%20cx='55'%20cy='65'%20rx='38'%20ry='20'/%3E%3Cellipse%20cx='90'%20cy='66'%20rx='26'%20ry='15'/%3E%3Cellipse%20cx='75'%20cy='50'%20rx='22'%20ry='16'/%3E%3C/g%3E%3C/svg%3E");
  animation: paudClouds 90s linear infinite;
}

/* Lapisan 2: balon, bintang & gelembung mengambang naik */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .5;
  background-repeat: repeat;
  background-size: 320px 320px;
  background-position: 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cg%3E%3Cellipse%20cx='45'%20cy='60'%20rx='15'%20ry='19'%20fill='%23F6A9A0'/%3E%3Cpath%20d='M45%2079%20q3%206%200%2014'%20stroke='%23F6A9A0'%20stroke-width='1.2'%20fill='none'/%3E%3Cellipse%20cx='232'%20cy='42'%20rx='14'%20ry='18'%20fill='%239FD0F0'/%3E%3Cpath%20d='M232%2060%20q3%206%200%2013'%20stroke='%239FD0F0'%20stroke-width='1.2'%20fill='none'/%3E%3Cellipse%20cx='150'%20cy='205'%20rx='14'%20ry='18'%20fill='%2394D3B8'/%3E%3Cpath%20d='M150%20223%20q3%206%200%2013'%20stroke='%2394D3B8'%20stroke-width='1.2'%20fill='none'/%3E%3Cellipse%20cx='288'%20cy='250'%20rx='13'%20ry='17'%20fill='%23C7B4EC'/%3E%3Cpath%20d='M288%20267%20q3%206%200%2013'%20stroke='%23C7B4EC'%20stroke-width='1.2'%20fill='none'/%3E%3Ccircle%20cx='95'%20cy='150'%20r='5'%20fill='%23F6D488'/%3E%3Ccircle%20cx='262'%20cy='150'%20r='4'%20fill='%23BBDDF5'/%3E%3Ccircle%20cx='40'%20cy='255'%20r='5'%20fill='%23C7B4EC'/%3E%3Ccircle%20cx='192'%20cy='92'%20r='4'%20fill='%23F6A9A0'/%3E%3Cg%20fill='%23F4C74B'%3E%3Cpath%20transform='translate(120,62)'%20d='M0%20-8%20L2%20-2%20L8%200%20L2%202%20L0%208%20L-2%202%20L-8%200%20L-2%20-2%20Z'/%3E%3Cpath%20transform='translate(70,292)'%20d='M0%20-7%20L1.6%20-1.6%20L7%200%20L1.6%201.6%20L0%207%20L-1.6%201.6%20L-7%200%20L-1.6%20-1.6%20Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: paudFloat 60s linear infinite;
}

@keyframes paudClouds {
  from { background-position: 0 14%, 0 72%; }
  to   { background-position: 2200px 14%, -1700px 72%; }
}
@keyframes paudFloat {
  from { background-position: 0 0; }
  to   { background-position: 0 -960px; }
}

/* Konten selalu di ATAS animasi latar (mencegah bug "tidak tampil") */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_head,
.pkp_structure_footer_wrapper,
.pkp_page_content { position: relative; z-index: 1; }

h1, h2, h3, h4, h5,
.pkp_site_name,
.obj_article_summary .title,
.pkp_structure_sidebar .pkp_block .title {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  color: var(--paud-ink);
  letter-spacing: .1px;
}

a { color: var(--paud-blue-dk); transition: color .15s ease, background-color .15s ease; }
a:hover, a:focus { color: var(--paud-coral); }

/* --------------------------------------------------------------- Header */
.pkp_structure_head {
  background: linear-gradient(120deg, #79B9EC 0%, #6FA9E6 35%, #9C8FE0 78%, #B49BE0 100%);
  border: 0;
  box-shadow: 0 8px 24px rgba(74,144,217,.18);
}

/* ===== Perbaikan dropdown navigasi (menu ABOUT dll.) =====
   Bug: submenu "About" tidak muncul karena terpotong oleh overflow:hidden
   di header. Solusi: pastikan header & baris navigasi overflow:visible,
   lalu tata submenu-nya agar tampil rapi di atas konten. */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_user { overflow: visible !important; }
.pkp_navigation_primary li { position: relative; }
.pkp_navigation_primary li ul {
  background: #ffffff;
  border: 1px solid var(--paud-border);
  border-radius: 12px;
  box-shadow: var(--paud-shadow);
  padding: 6px;
  min-width: 210px;
  z-index: 1000;
}
.pkp_navigation_primary li ul li { display: block; }
.pkp_navigation_primary li ul li a {
  display: block;
  color: var(--paud-ink) !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}
.pkp_navigation_primary li ul li a:hover,
.pkp_navigation_primary li ul li a:focus {
  background: var(--paud-soft) !important;
  color: var(--paud-blue-dk) !important;
  padding-left: 14px;
}
.pkp_structure_head::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='420'%20height='200'%20viewBox='0%200%20420%20200'%3E%3Cg%20fill='white'%20fill-opacity='0.12'%3E%3Cellipse%20cx='70'%20cy='150'%20rx='55'%20ry='26'/%3E%3Cellipse%20cx='120'%20cy='150'%20rx='40'%20ry='20'/%3E%3Cellipse%20cx='340'%20cy='40'%20rx='48'%20ry='22'/%3E%3Cellipse%20cx='300'%20cy='42'%20rx='30'%20ry='15'/%3E%3Ccircle%20cx='40'%20cy='40'%20r='6'/%3E%3Ccircle%20cx='150'%20cy='30'%20r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
  pointer-events: none;
}
.pkp_head_wrapper { position: relative; z-index: 2; }

.pkp_site_name_wrapper { padding: 6px 0; }
.pkp_site_name, .pkp_site_name a {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.9rem;
  text-shadow: 0 1px 2px rgba(47,111,179,.35);
}
.pkp_site_name .is_img img { filter: drop-shadow(0 2px 4px rgba(47,111,179,.3)); }

/* --------------------------------------------------- Navigasi utama */
.pkp_navigation_primary_row {
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.25);
}
.pkp_navigation_primary,
.pkp_navigation_user { background: transparent; }
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color: #ffffff !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover {
  background: rgba(255,255,255,.22);
  color: #ffffff !important;
}

.pkp_search input[type="text"],
.pkp_search input[type="search"] {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  padding: 6px 14px;
}

/* -------------------------------------------------------------- Layout */
.pkp_structure_content { padding-top: 8px; }

/* Kartu konten utama — sedikit transparan agar animasi latar terasa,
   tetap kontras & mudah dibaca. */
.pkp_structure_main {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--paud-border);
  border-radius: var(--paud-radius);
  box-shadow: var(--paud-shadow);
  padding: 28px 32px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 992px) { .pkp_structure_main { padding: 20px 18px; } }

/* ------------------------------------------------- Halaman "About" fix */
/* Pastikan seluruh varian kontainer About tampil normal & di atas latar. */
.pkp_page_about .pkp_structure_main,
.pkp_page_content .about_site,
.cmp_editorialTeam,
.about_site,
.additional_content {
  position: relative;
  z-index: 1;
  display: block !important;   /* cegah konten About ter-hidden */
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100%;
}
.about_site img,
.pkp_page_content img { max-width: 100%; height: auto; border-radius: var(--paud-radius-sm); }
.cmp_editorialTeam .member { margin-bottom: 12px; }

/* ===================================================== Additional Content
   Tipografi yang lebih rapi & elegan untuk blok "Additional Content"
   (Settings > Website > Appearance > Setup > Additional Content) yang
   dirender OJS pada beranda sebagai .additional_content. */
.additional_content {
  max-width: 900px;
  margin: 8px auto 28px;
  padding: 28px 32px;
  background: var(--paud-surface);
  border: 1px solid var(--paud-border);
  border-radius: var(--paud-radius);
  box-shadow: var(--paud-shadow);
  color: var(--paud-ink);
  font-size: 1.02rem;
  line-height: 1.8;
  letter-spacing: .1px;
  text-align: left;
}
@media (max-width: 992px) { .additional_content { padding: 22px 20px; margin: 6px 0 22px; } }

/* Judul di dalam Additional Content */
.additional_content h1,
.additional_content h2,
.additional_content h3,
.additional_content h4 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  color: var(--paud-blue-dk);
  line-height: 1.3;
  margin: 1.4em 0 .5em;
}
.additional_content > :first-child { margin-top: 0; }
.additional_content h1 { font-size: 1.7rem; font-weight: 700; }
.additional_content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  padding-bottom: 8px;
  position: relative;
}
.additional_content h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--paud-yellow), var(--paud-coral));
}
.additional_content h3 { font-size: 1.18rem; font-weight: 600; color: var(--paud-blue); }
.additional_content h4 { font-size: 1.05rem; font-weight: 600; color: var(--paud-ink); }

/* Paragraf & teks */
.additional_content p {
  margin: 0 0 1.05em;
  color: var(--paud-ink);
}
.additional_content p:last-child { margin-bottom: 0; }
.additional_content strong { color: var(--paud-blue-dk); font-weight: 700; }
.additional_content em { color: var(--paud-ink-soft); }
.additional_content a {
  color: var(--paud-blue-dk);
  text-decoration: none;
  border-bottom: 1px solid var(--paud-sky);
  transition: color .15s ease, border-color .15s ease;
}
.additional_content a:hover {
  color: var(--paud-coral);
  border-bottom-color: var(--paud-coral);
}

/* Daftar (list) */
.additional_content ul,
.additional_content ol {
  margin: 0 0 1.05em;
  padding-left: 1.4em;
}
.additional_content li { margin-bottom: .4em; }
.additional_content ul li::marker { color: var(--paud-coral); }
.additional_content ol li::marker { color: var(--paud-blue); font-weight: 700; }

/* Kutipan */
.additional_content blockquote {
  margin: 1.2em 0;
  padding: 12px 18px;
  background: var(--paud-soft);
  border-left: 4px solid var(--paud-sky);
  border-radius: var(--paud-radius-sm);
  color: var(--paud-ink-soft);
  font-style: italic;
}

/* Gambar & pemisah */
.additional_content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--paud-radius-sm);
  box-shadow: var(--paud-shadow-sm);
}
.additional_content hr {
  border: 0;
  height: 1px;
  margin: 1.6em 0;
  background: var(--paud-border);
}

/* Tabel */
.additional_content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: .96rem;
}
.additional_content th,
.additional_content td {
  border: 1px solid var(--paud-border);
  padding: 10px 14px;
  text-align: left;
}
.additional_content th {
  background: var(--paud-soft);
  color: var(--paud-blue-dk);
  font-weight: 600;
}

/* ------------------------------------------------------ Sidebar blocks */
.pkp_structure_sidebar .pkp_block {
  background: rgba(243,248,253,.92);
  border: none;
  border-radius: var(--paud-radius);
  box-shadow: none;
  padding: 14px 16px;
  margin-bottom: 8px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pkp_structure_sidebar .pkp_block .title {
  color: var(--paud-blue-dk);
  font-weight: 600;
  font-size: 1.05rem;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px dotted var(--paud-sky);
}

/* ------------------------------------------------ Judul & pemisah seksi */
.page_title,
.pkp_page_content h1:first-child {
  color: var(--paud-blue-dk);
  font-weight: 700;
  position: relative;
  padding-bottom: 12px;
}
.page_title::after {
  content: "";
  display: block;
  width: 74px; height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--paud-yellow), var(--paud-coral));
}

/* ------------------------------------------------- Daftar artikel (TOC) */
.obj_issue_toc .heading,
.obj_issue_toc h2 { color: var(--paud-blue-dk); }

.obj_article_summary {
  background: var(--paud-surface);
  border: 1px solid var(--paud-border);
  border-left: 5px solid var(--paud-sky);
  border-radius: var(--paud-radius-sm);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--paud-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.obj_article_summary:hover {
  transform: translateY(-2px);
  box-shadow: var(--paud-shadow);
  border-left-color: var(--paud-coral);
}
.obj_article_summary .title a { color: var(--paud-ink); font-weight: 600; }
.obj_article_summary .title a:hover { color: var(--paud-blue-dk); }
.obj_article_summary .authors { color: var(--paud-ink-soft); font-size: .95rem; }

.obj_article_summary:nth-child(4n+2) { border-left-color: var(--paud-mint); }
.obj_article_summary:nth-child(4n+3) { border-left-color: var(--paud-yellow); }
.obj_article_summary:nth-child(4n+4) { border-left-color: var(--paud-lavender); }

.obj_article_summary .galleys_links a,
.obj_galley_link {
  display: inline-block;
  background: var(--paud-soft);
  color: var(--paud-blue-dk) !important;
  border: 1px solid var(--paud-border);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
}
.obj_article_summary .galleys_links a:hover,
.obj_galley_link:hover { background: var(--paud-blue); color: #fff !important; }

/* ------------------------------------------------------------- Tombol */
.pkp_button,
a.pkp_button,
.cmp_button,
button.pkp_button,
.pkp_page_content button:not(.pkp_controllers_grid button) {
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk));
  color: #ffffff !important;
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(74,144,217,.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pkp_button:hover,
a.pkp_button:hover,
.cmp_button:hover,
button.pkp_button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 6px 16px rgba(74,144,217,.34);
  color: #fff !important;
}

/* ----------------------------------------------------------- Formulir */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
select, textarea {
  border: 1px solid var(--paud-border);
  border-radius: var(--paud-radius-sm);
  padding: 8px 12px;
  background: var(--paud-surface);
  color: var(--paud-ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--paud-blue);
  box-shadow: 0 0 0 3px rgba(74,144,217,.15);
}

/* ------------------------------------------------------------- Tabel */
.pkp_page_content table:not(.pkp_controllers_grid) {
  border-radius: var(--paud-radius-sm);
  overflow: hidden;
  box-shadow: var(--paud-shadow-sm);
  background: var(--paud-surface);
}
.pkp_page_content table:not(.pkp_controllers_grid) thead th,
.pkp_page_content table:not(.pkp_controllers_grid) tr:first-child th {
  background: var(--paud-soft);
  color: var(--paud-blue-dk);
  border-bottom: 2px solid var(--paud-sky);
}

/* ---------------------------------------------------- Kutipan / callout */
blockquote {
  border-left: 4px solid var(--paud-yellow);
  background: #FFF8EC;
  border-radius: var(--paud-radius-sm);
  padding: 12px 18px;
  color: var(--paud-ink);
}

/* ------------------------------------------------------------- Footer */
/* Footer bergaya kartu terang dengan kolom link (tempel HTML-nya di
   Settings > Website > Appearance > Page Footer). */
.pkp_structure_footer_wrapper {
  background: var(--paud-surface);
  color: var(--paud-ink);
  border-top: 1px solid var(--paud-border);
  border-radius: var(--paud-radius) var(--paud-radius) 0 0;
  box-shadow: 0 -2px 10px rgba(51,71,91,.05);
  overflow: hidden;
}
.pkp_structure_footer { color: var(--paud-ink); }
.pkp_structure_footer a { color: var(--paud-ink); }
.pkp_structure_footer a:hover { color: var(--paud-coral); }

/* Kolom-kolom footer */
.paud-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 4px 0;
}
.paud-footer-col h3 {
  font-family: 'Fredoka', sans-serif;
  color: var(--paud-blue-dk);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--paud-sky), var(--paud-lavender)) 1;
}
.paud-footer-col ul { list-style: none; margin: 0; padding: 0; }
.paud-footer-col li { margin-bottom: 9px; line-height: 1.4; }
.paud-footer-col a { color: var(--paud-ink) !important; text-decoration: none; }
.paud-footer-col a:hover {
  color: var(--paud-coral) !important;
  padding-left: 3px;
  transition: color .15s ease, padding-left .15s ease;
}

/* Tombol Contact */
.paud-footer-contact {
  display: inline-block;
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk));
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 20px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(74,144,217,.28);
  transition: transform .12s ease, filter .12s ease;
}
.paud-footer-contact:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff !important; }

/* Peta (opsional) */
.paud-footer-map { margin: 18px 0 4px; border-radius: var(--paud-radius-sm); overflow: hidden; box-shadow: var(--paud-shadow-sm); }
.paud-footer-map iframe { display: block; width: 100%; border: 0; }

/* Copyright + lisensi */
.paud-footer-copyright {
  margin-top: 20px;
  padding: 18px 0 20px;
  border-top: 1px dashed var(--paud-border);
  text-align: center;
  color: var(--paud-ink-soft);
  font-size: .9rem;
  line-height: 1.6;
}
.paud-footer-copyright img { vertical-align: middle; margin-right: 8px; }

/* Garis aksen pelangi lembut, full-width, di paling bawah footer */
.pkp_structure_footer_wrapper::after {
  content: "";
  display: block;
  height: 10px;
  margin: 16px -9999px 0;
  background: linear-gradient(90deg, var(--paud-blue), var(--paud-lavender) 42%, var(--paud-coral) 72%, var(--paud-yellow));
}

@media (max-width: 768px) { .paud-footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .paud-footer-cols { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- Aksesibilitas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--paud-yellow);
  outline-offset: 2px;
}

/* Matikan animasi bila pengguna memilih reduce-motion */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  * { transition: none !important; }
  .obj_article_summary:hover, .pkp_button:hover { transform: none; }
}


/* =========================================================================
   DUKUNGAN MARKUP FOOTER VERSI ANDA (.footer / .footer-column / .share-buttons)
   Menata footer yang Anda tempel di Page Footer tanpa perlu mengubah HTML-nya.
   ========================================================================= */
.pkp_structure_footer .footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 4px 0;
}
.pkp_structure_footer .footer-column h3 {
  font-family: 'Fredoka', sans-serif;
  color: var(--paud-blue-dk);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--paud-sky), var(--paud-lavender)) 1;
}
.pkp_structure_footer .footer-column ul { list-style: none; margin: 0; padding: 0; }
.pkp_structure_footer .footer-column li { margin-bottom: 9px; line-height: 1.4; }
.pkp_structure_footer .footer-column a { color: var(--paud-ink) !important; text-decoration: none; }
.pkp_structure_footer .footer-column a:hover {
  color: var(--paud-coral) !important;
  padding-left: 3px;
  transition: color .15s ease, padding-left .15s ease;
}

/* Tombol Share (X Post, dll.) */
.pkp_structure_footer .share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pkp_structure_footer .share-buttons button,
.pkp_structure_footer .share-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk));
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(74,144,217,.28);
  transition: transform .12s ease, filter .12s ease;
}
.pkp_structure_footer .share-buttons button:hover,
.pkp_structure_footer .share-buttons a:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff !important; }

/* Baris copyright + lisensi (paragraf tepat setelah <footer class="footer">) */
.pkp_structure_footer .footer + p {
  margin: 18px 0 0;
  padding: 16px 12px 22px;
  border-top: 1px dashed var(--paud-border);
  text-align: center !important;
  color: var(--paud-ink-soft);
  font-size: .82rem !important;
  line-height: 1.7;
}
.pkp_structure_footer .footer + p img { vertical-align: middle; margin-right: 8px; border-radius: 4px; }
.pkp_structure_footer .footer + p a { color: var(--paud-blue-dk); }
.pkp_structure_footer .footer + p a:hover { color: var(--paud-coral); }

@media (max-width: 768px) { .pkp_structure_footer .footer { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pkp_structure_footer .footer { grid-template-columns: 1fr; } }

/* Pastikan header + dropdown-nya berada DI ATAS kartu konten (perbaikan
   lanjutan: submenu About sempat tertutup konten karena z-index sama). */
.pkp_structure_head { position: relative; z-index: 30 !important; }
.pkp_navigation_primary_row { position: relative; z-index: 31; }
.pkp_navigation_primary li ul { z-index: 1000 !important; }


/* =========================================================================
   BLOK SIDEBAR: #cssmenu (Make a Submission + dropdown), jam & kotak kontak
   Tempel HTML-nya di sebuah Custom Block (Settings > Website > Appearance >
   Setup > Sidebar Management > tambah Custom Block), lalu isi kontennya.
   ========================================================================= */
#cssmenu { font-family: 'Nunito', sans-serif; margin: 0 0 6px; }
#cssmenu center { display: block; }
#cssmenu ul { list-style: none; margin: 0; padding: 0; }

/* Tombol "Make a Submission" (menonjol) */
#cssmenu > center > ul { margin: 0 0 14px; }
#cssmenu > center > ul > li > a {
  display: block;
  text-align: center;
  background: linear-gradient(120deg, var(--paud-coral), var(--paud-yellow));
  color: #fff !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(245,138,123,.32);
  transition: transform .12s ease, filter .12s ease;
}
#cssmenu > center > ul > li > a:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  color: #fff !important;
}

/* Item dropdown tingkat atas */
#cssmenu > ul > li { margin-bottom: 8px; }
#cssmenu > ul > li.has-sub > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--paud-soft);
  color: var(--paud-blue-dk) !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 11px 16px;
  border: 1px solid var(--paud-border);
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
#cssmenu > ul > li.has-sub > a:hover {
  background: #fff;
  box-shadow: var(--paud-shadow-sm);
  color: var(--paud-blue-dk) !important;
}
#cssmenu .arrow { font-size: .8em; transition: transform .25s ease; }
#cssmenu > ul > li.has-sub:hover > a .arrow { transform: rotate(180deg); }

/* Submenu (accordion buka saat hover) */
#cssmenu > ul > li.has-sub > ul {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0 6px;
  padding-left: 8px;
  border-left: 2px dotted var(--paud-sky);
  transition: max-height .3s ease, opacity .25s ease, margin .2s ease;
}
#cssmenu > ul > li.has-sub:hover > ul {
  max-height: 600px;
  opacity: 1;
  margin: 8px 6px 4px;
}
#cssmenu > ul > li.has-sub > ul > li > a {
  display: block;
  color: var(--paud-ink) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  padding: 7px 12px;
  border-radius: 8px;
  transition: background .12s ease, padding-left .12s ease, color .12s ease;
}
#cssmenu > ul > li.has-sub > ul > li > a:hover {
  background: var(--paud-soft) !important;
  color: var(--paud-coral) !important;
  padding-left: 16px;
}

/* Jam (ClockLink) di bawah menu */
#cssmenu ~ center p { margin: 10px 0; text-align: center; }
#cssmenu ~ center iframe { max-width: 100%; border-radius: var(--paud-radius-sm); }

/* Kotak "Contact Us" + WhatsApp */
.contact-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: max-content;
  margin: 8px auto 4px;
  padding: 5px 12px;
  background: linear-gradient(120deg, var(--paud-mint), #8FD3C0);
  border-radius: 999px;
  box-shadow: var(--paud-shadow-sm);
}
.contact-text-box { line-height: 1; }
.contact-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: .82rem;
}
.contact-image-box a { display: inline-block; line-height: 0; }
.contact-image {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  vertical-align: middle;
  transition: transform .12s ease;
}
.contact-image:hover { transform: scale(1.08); }


/* =========================================================================
   HEADER: pastikan tulisan terbaca & senada dengan tema.
   Penyebab teks samar: latar header memakai warna tema bawaan (mis. hijau
   zaitun) sehingga teks putih kurang kontras. Solusi: kunci latar header ke
   gradasi tema, lalu buat SEMUA teks header putih + badge notifikasi jelas.
   ========================================================================= */
.pkp_structure_head {
  background: linear-gradient(120deg, #79B9EC 0%, #6FA9E6 35%, #9C8FE0 78%, #B49BE0 100%) !important;
}
.pkp_head_wrapper,
.pkp_navigation_user_wrapper { background: transparent !important; }

/* Semua tulisan & tautan di header → putih terang */
.pkp_structure_head,
.pkp_structure_head a,
.pkp_site_name,
.pkp_site_name a,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a span,
.pkp_navigation_user .pkp_user_name,
.pkp_navigation_primary_row a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(47,111,179,.30);
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  border-radius: 999px;
}

/* Badge jumlah notifikasi (mis. angka 28) → bulatan koral kontras */
.pkp_navigation_user .unread,
.pkp_navigation_user .count,
.pkp_navigation_user .task_count,
.pkp_navigation_user .notification_count,
.pkp_notification_count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  margin-left: 4px;
  background: var(--paud-coral) !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(245,138,123,.4);
}

/* Kolom pencarian di header tetap terbaca (teks gelap di kotak putih) */
.pkp_search input[type="text"],
.pkp_search input[type="search"] {
  background: #ffffff;
  color: var(--paud-ink);
}
.pkp_search input::placeholder { color: var(--paud-ink-soft); }


/* =========================================================================
   DROPDOWN MENU PENGGUNA (hatta ▾: Dashboard / View Profile / Administration /
   Logout). Bug: teksnya mewarisi putih dari header sehingga tak terbaca di
   atas kartu terang. Solusi: kartu putih + teks gelap + sorotan warna cerah.
   ========================================================================= */
.pkp_navigation_user li { position: relative; }
.pkp_navigation_user li ul {
  background: #ffffff;
  border: 1px solid var(--paud-border);
  border-radius: 12px;
  box-shadow: var(--paud-shadow);
  padding: 6px;
  min-width: 200px;
  z-index: 1000;
}
.pkp_navigation_user li ul li { display: block; }
.pkp_navigation_user li ul li a,
.pkp_navigation_user li ul li a span {
  display: block;
  color: var(--paud-ink) !important;      /* teks gelap, terbaca */
  text-shadow: none !important;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  text-decoration: none;
}
/* Sorotan warna cerah saat disorot / item aktif */
.pkp_navigation_user li ul li a:hover,
.pkp_navigation_user li ul li a:focus,
.pkp_navigation_user li ul li.current a,
.pkp_navigation_user li ul li a.active {
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk)) !important;
  color: #ffffff !important;
}
.pkp_navigation_user li ul li a:hover span,
.pkp_navigation_user li ul li a:focus span { color: #ffffff !important; }


/* =========================================================================
   REL BERJALAN (marquee) logo — .scrolling-container / .scrolling-content
   Loop mulus: konten digandakan 2x, lalu digeser -50%.
   Berhenti saat kursor menyorot; logo abu-abu → berwarna saat di-hover.
   ========================================================================= */
.scrolling-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  padding: 12px 0;
  background: var(--paud-surface);
  border: 1px solid var(--paud-border);
  border-radius: 16px;
  box-shadow: var(--paud-shadow-sm);
  /* efek pudar di tepi kiri & kanan */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.scrolling-content {
  display: flex;
  width: max-content;
  align-items: center;
  animation: paudMarquee 28s linear infinite;
  will-change: transform;
}
.scrolling-container:hover .scrolling-content { animation-play-state: paused; }
.scrolling-content table { margin: 0; border: 0; border-collapse: collapse; }
.scrolling-content td { padding: 0 16px; vertical-align: middle; border: 0; }
.scrolling-content a { display: inline-flex; align-items: center; }
.scrolling-content img {
  width: auto !important;
  height: 22px !important;   /* ukuran logo lebih kecil & seragam */
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease, transform .2s ease;
}
.scrolling-content a:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}
@keyframes paudMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-content { animation: none; }
}


/* =========================================================================
   KOTAK "APLIKASI PENDUKUNG" untuk marquee (judul bar + sudut terlipat)
   Mengikuti gaya pada contoh gambar, tetapi warna disesuaikan tema (senada).
   ========================================================================= */
.paud-appbox {
  position: relative;
  margin: 12px 0;
  background: #ffffff;
  border: 2px solid var(--paud-blue);
  border-radius: 16px;
  box-shadow: var(--paud-shadow-sm);
}
.paud-appbox-title {
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk));
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 40px;
  border-radius: 14px 14px 0 0;
}
/* Marquee menyatu di dalam kotak */
.paud-appbox .scrolling-container {
  margin: 0;
  border: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: none;
  background: #ffffff;
  padding: 9px 0;
}


/* =========================================================================
   BLOK SIDEBAR KUSTOM (mis. VISITASU / penghitung kunjungan)
   Pastikan isi blok tampil penuh & teks/gambar/penghitung rata tengah.
   ========================================================================= */
.pkp_block[class*="custom"] .content {
  display: block !important;
  overflow: visible;
  text-align: center;
}
.pkp_block[class*="custom"] .content p,
.pkp_block[class*="custom"] .content div,
.pkp_block[class*="custom"] .content span,
.pkp_block[class*="custom"] .content center { text-align: center; }
.pkp_block[class*="custom"] .content img,
.pkp_block[class*="custom"] .content iframe,
.pkp_block[class*="custom"] .content table,
.pkp_block[class*="custom"] .content a {
  float: none;
  margin-left: auto;
  margin-right: auto;
}
.pkp_block[class*="custom"] .content img,
.pkp_block[class*="custom"] .content iframe { display: inline-block; }

/* Kecuali menu #cssmenu — biarkan rata kiri seperti semula */
#cssmenu,
#cssmenu > ul,
#cssmenu > ul > li,
#cssmenu > ul > li.has-sub > ul,
#cssmenu > ul > li.has-sub > ul > li a { text-align: left; }


/* Judul/nama blok kustom (mis. VISITASU) — ratakan tengah di atas konten */
.pkp_block[class*="custom"] .title,
.pkp_block[class*="custom"] h2.title,
.pkp_block[class*="custom"] .pkp_block_header .title {
  display: block;
  text-align: center;
}


/* =========================================================================
   GRID KARTU PROFIL (.profile-grid > .profile-card)
   Untuk Dewan Editor / Mitra Bestari / Tim — elegan, rapi, responsif.
   ========================================================================= */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--paud-border);
  border-radius: var(--paud-radius);
  padding: 22px 18px 18px;
  box-shadow: var(--paud-shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--paud-shadow);
}
/* Foto bulat dengan cincin lembut */
.profile-card .photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  outline: 3px solid var(--paud-sky);
  box-shadow: var(--paud-shadow-sm);
  margin-bottom: 14px;
}
/* Nama orang (h3.name pertama) */
.profile-card .name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--paud-ink);
  margin: 0 0 12px;
}
/* Nama afiliasi (h3.name terakhir) */
.profile-card .name:last-child {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--paud-border);
  width: 100%;
  font-size: .85rem;
  font-weight: 500;
  color: var(--paud-blue-dk);
}
/* Blok ID */
.profile-card .ids {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.profile-card .id-row {
  display: grid;
  grid-template-columns: 24px 8px 1fr;
  align-items: center;
  gap: 4px;
  text-align: left;
  background: var(--paud-soft);
  border-radius: 9px;
  padding: 6px 10px;
}
.profile-card .id-row .label { display: inline-flex; align-items: center; justify-content: center; }
.profile-card .id-row .label img { width: 18px; height: 18px; object-fit: contain; }
.profile-card .id-row .colon { color: var(--paud-ink-soft); }
.profile-card .id-row .value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--paud-ink);
  word-break: break-word;
}
.profile-card .id-row .value.copy { cursor: pointer; }
.profile-card .id-row .value.copy:hover { color: var(--paud-blue-dk); }
.profile-card .id-row .value a { color: var(--paud-blue-dk); font-weight: 700; text-decoration: none; }
.profile-card .id-row .value a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .profile-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .profile-card { padding: 16px 12px; }
  .profile-card .photo { width: 96px; height: 96px; }
}


/* =========================================================================
   KOTAK UNDUHAN TEMPLATE (.col-md-6 > .well > table)
   Dua kolom (English / Indonesia) dengan tombol Download bergaya.
   ========================================================================= */
.well {
  background: linear-gradient(135deg, var(--paud-soft), #ffffff);
  border: 1px solid var(--paud-border);
  border-radius: var(--paud-radius);
  padding: 18px 20px;
  box-shadow: var(--paud-shadow-sm);
  margin: 16px 0;
}
.well table {
  width: 100% !important;
  height: auto !important;
  border-collapse: separate;
  border-spacing: 14px 0;
}
.well td {
  width: 50% !important;
  vertical-align: middle;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--paud-border);
  border-radius: 14px;
  padding: 18px 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.well td:hover { transform: translateY(-3px); box-shadow: var(--paud-shadow-sm); }
.well td p { margin: 0 0 12px; }
.well td p:last-child { margin: 0; }
.well td strong {
  font-family: 'Fredoka', sans-serif;
  color: var(--paud-blue-dk);
  font-size: 1.02rem;
}
/* Tombol Download */
.well td a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(120deg, var(--paud-blue), var(--paud-blue-dk));
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  padding: 9px 24px;
  border-radius: 999px;
  box-shadow: var(--paud-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.well td a::before { content: "\2193"; font-size: 1em; font-weight: 700; }
.well td a:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--paud-shadow); }
@media (max-width: 520px) {
  .well table, .well tbody, .well tr { display: block; }
  .well td { display: block; width: 100% !important; margin-bottom: 12px; }
  .well td:last-child { margin-bottom: 0; }
}