@charset "UTF-8";
/*
Theme Name: Katrolindo
Theme URI: https://primakatrolindo.co.id/
Author: Kukuh Nova Putra
Author URI: https://github.com/kukuhnovaputra
Description: WordPress Theme for Katrolindo Website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: katrolindo
Tags: block-editor-styles, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
*/

/* Menu
--------------------------------------------- */
.more-menu-desktop-dropdown .children > li > a,
.more-menu-desktop-dropdown .sub-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 12px 30px;
}
.more-menu-desktop-dropdown .children > li > a .arrow,
.more-menu-desktop-dropdown .children > li > a > .arrow,
.more-menu-desktop-dropdown .sub-menu > li > a .arrow,
.more-menu-desktop-dropdown .sub-menu > li > a > .arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

/* Comments
--------------------------------------------- */
#comments .logged-in-as {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #4b5563;
}
#comments .comment-notes {
  margin-bottom: 1.5rem;
}
#comments .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: #374151;
}
#comments .comment-form-cookies-consent input[type="checkbox"] {
  margin: 0;
  accent-color: #111827;
}

/* Body
--------------------------------------------- */
body {
  font-family: "Titillium Web", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.5;
  line-height: 1.5;
  /* color: #333333; */
  /* background-color: #f3f4f6; */
}

/* Permalink
--------------------------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Container
--------------------------------------------- */
.container-base {
  box-sizing: border-box;
  margin-inline: auto;
}

.container-full {
  max-width: 100%;
}

/* Responsive Container Widths */
@media (min-width: 480px) {
  .container-xs {
    max-width: 480px;
  }
}

@media (min-width: 640px) {
  .container-sm {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container-md {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-lg {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container-xl {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container-2xl {
    max-width: 1536px;
  }
}

@media (min-width: 1920px) {
  .container-3xl {
    max-width: 1920px;
  }
}

/* Responsive Container Section Paddings */
@media (min-width: 640px) {
  .container-section {
    padding-inline: 0.75rem;
  }
  #top-bar .container-section {
    padding-block: 0.75rem;
  }
  #footer .container-section {
    padding-block: 0.75rem;
  }
}
@media (min-width: 768px) {
  .container-section {
    padding-inline: 2rem;
  }
  #top-bar .container-section {
    padding-block: 0.75rem;
  }
  #footer .container-section {
    padding-block: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .container-section {
    padding-inline: 3rem;
  }
  #top-bar .container-section {
    padding-block: 0.75rem;
  }
  #footer .container-section {
    padding-block: 0.75rem;
  }
}

/* Responsive Grid
--------------------------------------------- */
/* Default (mobile) → 1 kolom */
.grid-1-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-2-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-3-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-4-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-5-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-6-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-7-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-8-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-9-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-10-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-11-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-12-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* md: maksimal 2 kolom */
@media (min-width: 768px) {
  .grid-1-column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-2-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-4-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-5-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-6-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-7-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-8-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-9-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-10-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-11-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-12-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* lg: maksimal 4 kolom */
@media (min-width: 1024px) {
  .grid-1-column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-2-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-5-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-6-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-7-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-8-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-9-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-10-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-11-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-12-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* xl: sesuai jumlah kolom sebenarnya */
@media (min-width: 1280px) {
  .grid-1-column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-2-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-5-column {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-6-column {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-7-column {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-8-column {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-9-column {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-10-column {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-11-column {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-12-column {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0073e6;
  color: #fafafa;
  text-decoration: none;
}
.btn:hover {
  background-color: rgb(0, 89.5, 179);
}

input, textarea, select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.card {
  padding: 2rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
  .card {
    padding: 1rem;
  }
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.nav a {
  color: #333333;
  text-decoration: none;
}
.nav a:hover {
  color: #0073e6;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}
.nav-links svg {
  width: 2rem;
  height: 2rem;
}

.page-404 {
  text-align: center;
  padding: 4rem;
}
.page-404 h1 {
  font-size: 4rem;
  color: #0073e6;
}

/* Blog
--------------------------------------------- */
#blog {
  margin-inline: auto;
  gap: 1.75rem;
}

/* WIP: Default Article Grid Layout
--------------------------------------------- */
.grid-layout {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 kolom */
  gap: 20px;
}

@media (min-width: 640px) {
  .grid-layout {
    grid-template-columns: repeat(2, 1fr); /* Small screens: 2 kolom */
    grid-auto-flow: dense;
  }
  /* Artikel 1 & 2 selalu di baris 1, mengambil 1 kolom masing-masing */
  .grid-layout > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (min-width: 1024px) {
  .grid-layout {
    /* DEFAULT: Untuk kasus umum, atur sebagai 3 kolom.
       Aturan ini AKAN ditimpa oleh kelas JS jika relevan. */
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }
  /* Aturan Penempatan Default untuk > 2 artikel (ketika tidak ada kelas JS spesifik) */
  .grid-layout > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout > article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .grid-layout > article:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .grid-layout > article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }
  .grid-layout > article:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
  }
  .grid-layout > article:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }
  .grid-layout > article:nth-child(8) {
    grid-column: 1;
    grid-row: 4;
  }
  .grid-layout > article:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
  }
  .grid-layout > article:nth-child(10) {
    grid-column: 3;
    grid-row: 4;
  }
  .grid-layout.layout-2-items {
    grid-template-columns: repeat(2, 1fr); /* Kontainer jadi 2 kolom penuh */
  }
  .grid-layout.layout-2-items > article:nth-child(1) { /* Artikel 1 mengambil kolom 1 dari 2 */
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-2-items > article:nth-child(2) { /* Artikel 2 mengambil kolom 2 dari 2 */
    grid-column: 2;
    grid-row: 1;
  }
  /* KASUS: Tepat 3 artikel (2 di atas, 1 di bawah - ini akan menyisakan ruang kosong di baris kedua) */
  .grid-layout.layout-3-items {
    grid-template-columns: repeat(2, 1fr); /* Kontainer tetap 2 kolom */
  }
  .grid-layout.layout-3-items > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-3-items > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout.layout-3-items > article:nth-child(3) {
    grid-column: 1; /* Artikel ke-3 di baris baru, kolom 1 */
    grid-row: 2;
  }
  /* KASUS: Tepat 4 artikel (2 di atas, 2 di bawah) */
  .grid-layout.layout-4-items {
    grid-template-columns: repeat(2, 1fr); /* Kontainer tetap 2 kolom */
  }
  .grid-layout.layout-4-items > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-4-items > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout.layout-4-items > article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .grid-layout.layout-4-items > article:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  /* KASUS: Tepat 5 artikel (2 di atas, 3 di bawah) */
  .grid-layout.layout-5-items {
    grid-template-columns: repeat(3, 1fr); /* Kontainer jadi 3 kolom */
  }
  .grid-layout.layout-5-items > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-5-items > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout.layout-5-items > article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .grid-layout.layout-5-items > article:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .grid-layout.layout-5-items > article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }
  /* Anda perlu menambahkan kelas-kelas serupa untuk layout-7-items dan layout-10-items
     sesuai dengan pola yang Anda inginkan. */
  /* Contoh untuk layout-7-items (2 | 3 | 2) */
  .grid-layout.layout-7-items {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom dasar */
  }
  .grid-layout.layout-7-items > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-7-items > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout.layout-7-items > article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .grid-layout.layout-7-items > article:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .grid-layout.layout-7-items > article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }
  .grid-layout.layout-7-items > article:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
  }
  .grid-layout.layout-7-items > article:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }
  /* Contoh untuk layout-10-items (2 | 3 | 2 | 3) */
  .grid-layout.layout-10-items {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom dasar */
  }
  .grid-layout.layout-10-items > article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-layout.layout-10-items > article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-layout.layout-10-items > article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .grid-layout.layout-10-items > article:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .grid-layout.layout-10-items > article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }
  .grid-layout.layout-10-items > article:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
  }
  .grid-layout.layout-10-items > article:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }
  .grid-layout.layout-10-items > article:nth-child(8) {
    grid-column: 1;
    grid-row: 4;
  }
  .grid-layout.layout-10-items > article:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
  }
  .grid-layout.layout-10-items > article:nth-child(10) {
    grid-column: 3;
    grid-row: 4;
  }
}
/* Article
--------------------------------------------- */
.article {
  padding: 2rem;
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
}
.article > * + * {
  margin-top: 1.5rem;
}
.article > .featured-image {
  margin-inline: -2rem;
}
.article > .featured-image:first-of-type {
  margin-top: -2rem;
}

.article .meta-post, .article-row-content .meta-post {
  color: #6a7282;
  font-size: 0.875rem;
}
.article .meta-post > :not(:last-child), .article-row-content .meta-post > :not(:last-child) {
  margin-inline-end: 0.25rem;
}

.article-title {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 700;
}

.featured-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-summary {
  flex: 1;
}
.article-summary p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.meta-area {
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.meta-gravatar {
  flex-shrink: 0;
  line-height: 0;
}
.meta-gravatar img {
  height: 2.5rem;
  width: 2.5rem;
}

.meta-author a {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
}

.meta-info {
  margin-left: 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
}

/* Article Row
--------------------------------------------- */
.article-row {
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.article-row .article-row-content {
  padding: 2rem;
  margin-top: -8px;
}
.article-row .article-row-content > * + * {
  margin-top: 1.5rem;
}

.article {
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.article .article-row-content > * + * {
  margin-top: 1.5rem;
}
.article .article-row-content .article-content-area {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.article .article-row-content .article-content-area > * + * {
  margin-top: 1.5rem;
}

.featured-image-left {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: 0;
}
.featured-image-left img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-row-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.article-row-content > .featured-image-left {
  margin-inline: -2rem;
}
.article-row-content .article-content-area {
  margin-top: -8px !important;
}

@media (min-width: 640px) {
  .article-background {
    padding-top: 12rem;
  }
  .featured-image-left {
    aspect-ratio: 16/9;
  }
}
@media (min-width: 768px) {
  .article .article-title-large {
    font-size: 1.5rem;
  }
  .article .article-row-content {
    flex-direction: row;
    justify-content: space-between;
  }
  .article .article-row-content .featured-image-left {
    width: 100%;
    height: 100%;
  }
  .article .article-row-content .article-content-area {
    width: 100%;
  }
  .article-row-content > .featured-image-left {
    margin-inline: 0;
  }
  .article-row-content .article-content-area {
    margin-top: 0 !important;
  }
}
@media (min-width: 1024px) {
  .article .article-row-content .featured-image-left {
    width: 40%;
    flex-shrink: 0;
  }
  .article-background {
    padding-top: 20rem;
  }
  .featured-image-left {
    width: 40%;
    flex-shrink: 0;
  }
  .article-row {
    flex-direction: row;
  }
}
/* Article Background
--------------------------------------------- */
.article-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20rem 2rem 2rem;
  border-radius: 1.5rem;
}
.article-background .article-title {
  margin-block: 1.25rem;
  color: #fafafa;
}
.article-background .article-title .article-title-helper {
  position: absolute;
  inset: 0;
}
.article-background .meta-categories a {
  padding: 5px 10px;
  background-color: #ff6f00;
  color: #fafafa;
}

.featured-image-bg,
.featured-image-bg-helper-1,
.featured-image-bg-helper-2 {
  position: absolute;
  inset: 0;
  z-index: -10;
}

.featured-image-bg-helper-1 {
  background-image: linear-gradient(to top, rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0.25), rgba(17, 24, 39, 0.1));
}

.featured-image-bg-helper-2 {
  border-radius: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
}

.featured-image-bg {
  z-index: -10;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-background-meta {
  row-gap: 0.25rem;
  overflow: hidden;
  color: #fafafa;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}
.article-background-meta .meta-date {
  margin-right: 2rem;
}
.article-background-meta .meta-author-area {
  margin-left: -1rem;
  align-items: center;
  column-gap: 1rem;
}
.article-background-meta .meta-author-area svg {
  margin-left: 0.125rem;
  width: 0.25rem;
  height: 0.25rem;
  fill: #fafafa;
}
.article-background-meta .meta-author-area .author {
  column-gap: 0.625rem;
  align-items: center;
}
.article-background-meta .meta-author-area .author img {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #fafafa;
  border-radius: calc(infinity * 1px);
}

.archive .post {
  margin-bottom: 2rem;
}

/* Page
--------------------------------------------- */
#page {
  background-color: #fafafa;
}

.has-featured-image .page-title {
  font-size: 2.25rem;
}

.hero-featured-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #101828;
  padding-block: 6rem;
  padding-inline: 1.5rem;
}
.hero-featured-image img {
  position: absolute;
  inset: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-image-helper-area-1 {
  display: none;
}

.cover-image-helper-2 {
  position: absolute;
  top: -13rem;
  right: 50%;
  z-index: -10;
}

.cover-image-helper-1,
.cover-image-helper-2 {
  aspect-ratio: 1097/845;
  width: 68.5625rem;
}

@media (min-width: 640px) {
  .hero-featured-image {
    padding-block: 8rem;
  }
  .cover-image-helper-area-1 {
    position: absolute;
    top: -2.5rem;
    right: 50%;
    z-index: -10;
    margin-right: 2.5rem;
    display: block;
  }
}
@media (min-width: 1024px) {
  .hero-featured-image {
    padding-inline: 2rem;
  }
}
.meta-featured-image {
  padding-block: 3.5rem;
}
.meta-featured-image .meta-post {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.is-featured-image-content {
  margin-top: 3rem;
}
.is-featured-image-content #page {
  background-color: transparent;
}
.is-featured-image-content #page figure {
  margin-inline: -3rem;
}
.is-featured-image-content .content-area {
  padding-block: 0;
  box-shadow: none;
}

.content-area {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
  padding: 3rem;
  font-size: 1rem;
  max-width: none;
}
.content-area > * + * {
  margin-top: 1.5rem;
}
.content-area figure {
  margin: 0 0 1rem 0;
  padding: 0;
}
.content-area figure img {
  width: 100%;
  margin-inline: auto;
}
.content-area figure figcaption {
  font-size: 0.875rem;
}
.content-area ul, .content-area ol {
  margin: 1rem;
}
.content-area ul > :not(:last-child), .content-area ol > :not(:last-child) {
  margin-block-start: 0.5rem;
  margin-block-end: 0.5rem;
}
.content-area .meta-post > :not(:last-child) {
  margin-inline-end: 1rem;
}
.content-area .meta-date {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
}

.page-title {
  display: block;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  margin: 2.5rem 0;
}

.edit-post {
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 500;
  margin-top: 1rem;
}

.meta-tag {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 0.5rem;
}
.meta-tag span {
  padding: 0 0.1rem 0.5rem 0;
}
.meta-tag span a {
  font-size: 0.875rem;
  line-height: 1.625;
  background-color: #dddddd;
  padding: 0.25rem 0.5rem;
  width: 100%;
  margin-inline: auto;
}

.search-results .result-item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

#layout {
  display: flex;
  flex-direction: column;
}

#top-bar {
  background-color: #fafafa;
  border-bottom: 1px solid #eeeeee;
  padding-block: 1rem;
}
#top-bar nav {
  font-size: 0.75rem;
  color: #333333;
  text-transform: uppercase;
  font-weight: 500;
  align-items: baseline;
}
#top-bar nav ul {
  list-style: none;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
}
.top-bar-inner ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}

#header {
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 20;
}

body.page #header,
body.single #header,
body.single-post #header,
body.blog #header,
body.archive #header {
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
}

/* .header-inner */
.header-inner {
  display: flex;
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
  padding-block: 2rem; /* py-8 */
}
.header-inner .site-title {
  margin-block: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Header tanpa CTA - Navigation di kanan */
@media (min-width: 769px) {
  .header-inner.header-no-cta {
    justify-content: space-between;
  }
  .header-inner.header-no-cta > div:first-child {
    flex: 0 0 auto;
  }
  .header-inner.header-no-cta #main-navigation {
    margin-left: auto;
  }
  .header-inner.header-no-cta > div.flex.items-center.gap-4 {
    display: none;
  }
}

/* ==================================== */
/* Global/Base Header Menu CSS               */
/* ==================================== */
.menu-toggle {
  display: none; /* Default hidden, shown in mobile */
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
  color: #000;
  padding: 8px;
  margin-left: auto; /* Push to the right */
  order: 3; /* Ensure it's after other elements */
}

header nav {
  position: relative; /* For desktop submenu positioning */
}

.primary-menu {
  /* Dukung sebagai wrapper <div class="primary-menu"> maupun <ul class="primary-menu"> */
  margin: 0;
  padding: 0;
}

.primary-menu,
.primary-menu > ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
}

.primary-menu li {
  position: relative; /* For submenu positioning */
}

.primary-menu > li > a,
.primary-menu > ul > li > a {
  text-decoration: none;
  font-weight: 600;
  color: #3E4095;
  padding: 10px 15px; /* Adjusted for better click/hover area */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px; /* Same as hover state to prevent box appearance */
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s, border-radius 0.3s;
  gap: 8px; /* Space between text and arrow */
}

/* Ensure menu text doesn't take full width, allowing arrow to be on the right */
.primary-menu > li > a > *:not(.arrow),
.primary-menu > ul > li > a > *:not(.arrow) {
  flex: 0 1 auto;
  min-width: 0;
}

/* Ensure arrow inside menu links doesn't inherit link color - Highest specificity */
.primary-menu > li:not(:hover) > a:not(:hover) .arrow,
.primary-menu > li:not(:hover) > a:not(:hover) > .arrow,
.primary-menu > ul > li:not(:hover) > a:not(:hover) .arrow,
.primary-menu > ul > li:not(:hover) > a:not(:hover) > .arrow,
.primary-menu > li:not(:hover) > a:not(:hover):link .arrow,
.primary-menu > li:not(:hover) > a:not(:hover):visited .arrow,
.arrow:not(:hover),
span.arrow:not(:hover),
a:not(:hover) .arrow,
a:not(:hover) > .arrow,
.primary-menu a:not(:hover) .arrow,
.primary-menu > li:not(:hover) > a:not(:hover) .arrow,
.primary-menu > ul > li:not(:hover) > a:not(:hover) .arrow,
.primary-menu > li:not(:hover) > a:not(:hover) > .arrow,
.primary-menu > ul > li:not(:hover) > a:not(:hover) > .arrow {
  color: #3E4095 !important;
  background: none !important;
  background-color: transparent !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* Arrow white on hover - termasuk untuk has-submenu */
.primary-menu > li:hover > a .arrow,
.primary-menu > li:hover > a > .arrow,
.primary-menu > li > a:hover .arrow,
.primary-menu > li > a:hover > .arrow,
.primary-menu > ul > li:hover > a .arrow,
.primary-menu > ul > li:hover > a > .arrow,
.primary-menu > ul > li > a:hover .arrow,
.primary-menu > ul > li > a:hover > .arrow,
.primary-menu > li.has-submenu:hover > a .arrow,
.primary-menu > li.has-submenu:hover > a > .arrow,
.primary-menu > li.has-submenu > a:hover .arrow,
.primary-menu > li.has-submenu > a:hover > .arrow,
.primary-menu > ul > li.has-submenu:hover > a .arrow,
.primary-menu > ul > li.has-submenu:hover > a > .arrow,
.primary-menu > ul > li.has-submenu > a:hover .arrow,
.primary-menu > ul > li.has-submenu > a:hover > .arrow {
  color: #ffffff !important;
}

.primary-menu .arrow i {
  font-size: 0.85rem;
}

/* --- Submenu Default Styling (Used by both Desktop and Mobile logic) --- */
.children,
.sub-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background-color: #ffffff;
  list-style: none;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 1000;
  box-shadow: none; /* Remove box shadow to prevent border appearance on hover */
  padding: 0;
  margin: 0;
  border-radius: 4px;
  border: none; /* Remove border like More menu */
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translateY(10px); /* Same as More menu */
  display: block;
}

/* Sub-submenu (children of children) positioning */
.children > .children,
.children > .sub-menu,
.sub-menu > .children,
.sub-menu > .sub-menu,
.more-menu-desktop-dropdown > li > .children,
.more-menu-desktop-dropdown > li > .sub-menu,
.sub-menu .menu-item-has-children > .sub-menu,
.sub-menu .menu-item-has-children > .children,
.more-menu-desktop-dropdown .sub-menu > li > .children,
.more-menu-desktop-dropdown .sub-menu > li > .sub-menu,
.more-menu-desktop-dropdown .children > .children,
.more-menu-desktop-dropdown .children > .sub-menu,
.more-menu-desktop-dropdown .sub-menu > .children,
.more-menu-desktop-dropdown .sub-menu > .sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 12px;
  transform: translateX(-5px);
}

/* More dropdown child alignment */
.more-menu-desktop-dropdown > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.more-menu-desktop-dropdown > li > a .arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

/* Secondary submenu under main navigation open to the left */
.primary-menu > li > .children > li > .children,
.primary-menu > li > .children > li > .sub-menu,
.primary-menu > li > .sub-menu > li > .children,
.primary-menu > li > .sub-menu > li > .sub-menu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 8px;
}

.children > .children.active,
.children > .sub-menu.active,
.sub-menu > .children.active,
.sub-menu > .sub-menu.active,
.more-menu-desktop-dropdown > li > .children.active,
.more-menu-desktop-dropdown > li > .sub-menu.active,
.sub-menu .menu-item-has-children > .sub-menu.active,
.sub-menu .menu-item-has-children > .children.active,
.more-menu-desktop-dropdown .sub-menu > li > .children.active,
.more-menu-desktop-dropdown .sub-menu > li > .sub-menu.active,
.more-menu-desktop-dropdown .children > .children.active,
.more-menu-desktop-dropdown .children > .sub-menu.active,
.more-menu-desktop-dropdown .sub-menu > .children.active,
.more-menu-desktop-dropdown .sub-menu > .sub-menu.active,
.sub-menu li:hover > .sub-menu,
.sub-menu li:focus-within > .sub-menu,
.more-menu-desktop-dropdown li:hover > .sub-menu,
.more-menu-desktop-dropdown li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
  pointer-events: auto;
}
.primary-menu > li:hover > .children > .children,
.primary-menu > li:hover > .children > .sub-menu,
.primary-menu > li:hover > .sub-menu > .children,
.primary-menu > li:hover > .sub-menu > .sub-menu,
.primary-menu > li:focus-within > .children > .children,
.primary-menu > li:focus-within > .children > .sub-menu,
.primary-menu > li:focus-within > .sub-menu > .children,
.primary-menu > li:focus-within > .sub-menu > .sub-menu,
.more-menu-desktop-dropdown > li:hover > .children,
.more-menu-desktop-dropdown > li:hover > .sub-menu,
.more-menu-desktop-dropdown > li:focus-within > .children,
.more-menu-desktop-dropdown > li:focus-within > .sub-menu {
  transform: translateX(0);
}

.children li,
.sub-menu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #e0e0e0;
}

.children li:last-child,
.sub-menu li:last-child {
  border-bottom: none;
}

.children li > a,
.sub-menu li > a,
.more-menu-desktop-dropdown .children li > a,
.more-menu-desktop-dropdown .sub-menu li > a {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #3E4095;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
  gap: 8px;
  width: 100%;
}

/* Ensure text in child menu doesn't take full width */
.children li > a > *:not(.arrow),
.sub-menu li > a > *:not(.arrow) {
  flex: 0 1 auto;
  min-width: 0;
}

/* Arrow pada child menu - lebih kecil dan berada di kanan */
.children li > a .arrow,
.children li > a > .arrow,
.sub-menu li > a .arrow,
.sub-menu li > a > .arrow {
  font-size: 0.4em !important;
  line-height: 1;
  vertical-align: middle;
  margin-left: auto !important; /* Force arrow to the right */
  flex-shrink: 0;
  order: 999; /* Ensure arrow is always last */
  color: #3E4095 !important;
  background: none !important;
  background-color: transparent !important;
  display: inline-block;
}

.children li > a:hover,
.children li > a:focus,
.sub-menu li > a:hover,
.sub-menu li > a:focus,
.more-menu-desktop-dropdown .children li > a:hover,
.more-menu-desktop-dropdown .children li > a:focus,
.more-menu-desktop-dropdown .sub-menu li > a:hover,
.more-menu-desktop-dropdown .sub-menu li > a:focus {
  background-color: #3E4095;
  color: #ffffff;
  outline: none;
}

/* Arrow putih saat hover pada child menu */
.children li > a:hover .arrow,
.children li > a:hover > .arrow,
.children li > a:focus .arrow,
.children li > a:focus > .arrow,
.sub-menu li > a:hover .arrow,
.sub-menu li > a:hover > .arrow,
.sub-menu li > a:focus .arrow,
.sub-menu li > a:focus > .arrow,
.more-menu-desktop-dropdown .children li > a:hover .arrow,
.more-menu-desktop-dropdown .children li > a:hover > .arrow,
.more-menu-desktop-dropdown .children li > a:focus .arrow,
.more-menu-desktop-dropdown .children li > a:focus > .arrow,
.more-menu-desktop-dropdown .sub-menu li > a:hover .arrow,
.more-menu-desktop-dropdown .sub-menu li > a:hover > .arrow,
.more-menu-desktop-dropdown .sub-menu li > a:focus .arrow,
.more-menu-desktop-dropdown .sub-menu li > a:focus > .arrow {
  color: #ffffff !important;
}

.primary-menu > li.menu-item-original.hidden-in-desktop-main-row {
  display: none !important;
}

.primary-menu > li.hidden-original-desktop {
  display: none !important;
}

/* ==================================== */
/* Desktop Specific CSS (min-width: 769px) */
/* ==================================== */
@media (min-width: 769px) {
  /* Ensure all arrows are blue on desktop - Universal selector with highest specificity */
  .arrow,
  span.arrow,
  a .arrow,
  a > .arrow,
  .primary-menu .arrow,
  .primary-menu a .arrow,
  .primary-menu > li:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > li:not(:hover) > a:not(:hover) > .arrow,
  .primary-menu > ul > li:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > ul > li:not(:hover) > a:not(:hover) > .arrow,
  .primary-menu > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
  .primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
  .more-menu-desktop-dropdown .arrow,
  .more-menu-desktop-dropdown a .arrow,
  .more-menu-desktop-dropdown > li > a .arrow,
  .more-menu-desktop-dropdown > li > a > .arrow,
  .more-menu-desktop-dropdown > li.has-submenu > a .arrow,
  .more-menu-desktop-dropdown > li.has-submenu > a > .arrow,
  .children .arrow,
  .children a .arrow,
  .children > li > a .arrow,
  .children > li > a > .arrow,
  .children > li.has-children > a .arrow,
  .children > li.has-children > a > .arrow,
  .sub-menu .arrow,
  .sub-menu a .arrow,
  .sub-menu > li > a .arrow,
  .sub-menu > li > a > .arrow,
  .sub-menu > li.has-children > a .arrow,
  .sub-menu > li.has-children > a > .arrow,
  .more-menu-desktop-trigger > a.more-menu-link .arrow,
  .more-menu-desktop-trigger > a.more-menu-link > .arrow,
  .primary-menu > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link .arrow,
  .primary-menu > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link > .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link > .arrow {
    color: #3E4095 !important;
    background: none !important;
    background-color: transparent !important;
    /* Override any inherited color from parent link */
    text-decoration: none !important;
  }
  
  /* Arrow putih saat hover pada primary menu - harus setelah rule universal */
  .primary-menu > li:hover > a .arrow,
  .primary-menu > li:hover > a > .arrow,
  .primary-menu > li > a:hover .arrow,
  .primary-menu > li > a:hover > .arrow,
  .primary-menu > ul > li:hover > a .arrow,
  .primary-menu > ul > li:hover > a > .arrow,
  .primary-menu > ul > li > a:hover .arrow,
  .primary-menu > ul > li > a:hover > .arrow,
  .primary-menu > li.has-submenu:hover > a .arrow,
  .primary-menu > li.has-submenu:hover > a > .arrow,
  .primary-menu > li.has-submenu > a:hover .arrow,
  .primary-menu > li.has-submenu > a:hover > .arrow,
  .primary-menu > ul > li.has-submenu:hover > a .arrow,
  .primary-menu > ul > li.has-submenu:hover > a > .arrow,
  .primary-menu > ul > li.has-submenu > a:hover .arrow,
  .primary-menu > ul > li.has-submenu > a:hover > .arrow {
    color: #ffffff !important;
  }
  
  .menu-toggle {
    display: none !important;
  }
  header nav {
    font-size: 15px;
    position: relative;
    right: auto;
    width: auto;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    padding-top: 0;
    overflow-y: visible;
    display: block !important;
    transform: none;
    transition: none;
    visibility: visible;
    opacity: 1;
  }
  .primary-menu,
  .primary-menu > ul {
    flex-direction: row;
  }
  .primary-menu li {
    border-bottom: none;
    display: flex;
    align-items: center;
  }
  
  /* Desktop submenu hover states - Main level */
  .primary-menu > li:hover > .children,
  .primary-menu > li:hover > .sub-menu,
  .primary-menu > li:focus-within > .children,
  .primary-menu > li:focus-within > .sub-menu,
  .primary-menu > ul > li:hover > .children,
  .primary-menu > ul > li:hover > .sub-menu,
  .primary-menu > ul > li:focus-within > .children,
  .primary-menu > ul > li:focus-within > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  
  /* Desktop submenu hover states - Nested levels */
  .primary-menu .children > li:hover > .children,
  .primary-menu .children > li:hover > .sub-menu,
  .primary-menu .sub-menu > li:hover > .children,
  .primary-menu .sub-menu > li:hover > .sub-menu,
  .primary-menu .children > li:focus-within > .children,
  .primary-menu .children > li:focus-within > .sub-menu,
  .primary-menu .sub-menu > li:focus-within > .children,
  .primary-menu .sub-menu > li:focus-within > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  
  /* Hide mobile active state on desktop */
  .primary-menu .children.active,
  .primary-menu .sub-menu.active {
    display: none !important;
  }
  
  /* Main menu item hover */
  .primary-menu > li > a:hover,
  .primary-menu > ul > li > a:hover {
    background-color: #3E4095;
    color: #ffffff;
    border-radius: 4px;
    padding: 10px 15px; /* Keep same padding to prevent box appearance */
  }
  
  .primary-menu > li > a:hover .arrow,
  .primary-menu > li > a:hover > .arrow,
  .primary-menu > ul > li > a:hover .arrow,
  .primary-menu > ul > li > a:hover > .arrow,
  .primary-menu > li.has-submenu:hover > a .arrow,
  .primary-menu > li.has-submenu:hover > a > .arrow,
  .primary-menu > li.has-submenu > a:hover .arrow,
  .primary-menu > li.has-submenu > a:hover > .arrow,
  .primary-menu > ul > li.has-submenu:hover > a .arrow,
  .primary-menu > ul > li.has-submenu:hover > a > .arrow,
  .primary-menu > ul > li.has-submenu > a:hover .arrow,
  .primary-menu > ul > li.has-submenu > a:hover > .arrow {
    color: #ffffff !important;
  }
  
  /* Submenu item hover */
  .children li > a:hover,
  .children li > a:focus,
  .sub-menu li > a:hover,
  .sub-menu li > a:focus {
    background-color: #3E4095;
    color: #ffffff;
  }
  .children-toggle {
    display: none !important;
  }
  /* Styling untuk item "Lainnya" (More Menu Item) */
  .primary-menu > li.more-menu-desktop-trigger,
  .primary-menu > ul > li.more-menu-desktop-trigger {
    position: relative;
    /* display: none; */ /* Awalnya disembunyikan, JS akan menampilkannya jika perlu */
  }
  /* Default state - hanya berlaku saat tidak hover dan tidak active */
  .primary-menu > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link,
  .primary-menu > ul > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link {
    text-decoration: none;
    font-weight: 600;
    color: #3E4095;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
    gap: 8px;
  }
  
  /* Hover dan active state */
  .primary-menu > li.more-menu-desktop-trigger:hover > a.more-menu-link,
  .primary-menu > li.more-menu-desktop-trigger > a.more-menu-link:hover,
  .primary-menu > li.more-menu-desktop-trigger.active > a.more-menu-link,
  .primary-menu > ul > li.more-menu-desktop-trigger:hover > a.more-menu-link,
  .primary-menu > ul > li.more-menu-desktop-trigger > a.more-menu-link:hover,
  .primary-menu > ul > li.more-menu-desktop-trigger.active > a.more-menu-link {
    background-color: #3E4095 !important;
    border-radius: 4px;
    color: #ffffff !important;
  }
  
  /* Semua elemen di dalam link menjadi putih saat hover/active */
  .primary-menu > li.more-menu-desktop-trigger:hover > a.more-menu-link *,
  .primary-menu > li.more-menu-desktop-trigger > a.more-menu-link:hover *,
  .primary-menu > li.more-menu-desktop-trigger.active > a.more-menu-link *,
  .primary-menu > ul > li.more-menu-desktop-trigger:hover > a.more-menu-link *,
  .primary-menu > ul > li.more-menu-desktop-trigger > a.more-menu-link:hover *,
  .primary-menu > ul > li.more-menu-desktop-trigger.active > a.more-menu-link * {
    color: #ffffff !important;
  }
  /* Styling untuk panah di dalam link "More" - default state */
  .primary-menu > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link .arrow,
  .primary-menu > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link > .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link > .arrow {
    display: inline-block;
    margin-left: auto; /* Push arrow to the right (justify-end) */
    transition: transform 0.2s ease-in-out, color 0.3s;
    transform: rotate(0deg);
    flex-shrink: 0;
    order: 2; /* Pastikan arrow selalu di kanan */
    color: #3E4095 !important;
    background: none !important;
    background-color: transparent !important;
    font-size: 0.5em; /* Perkecil ukuran arrow */
    line-height: 1;
    vertical-align: middle;
  }
  
  /* Arrow pada hover dan active state - harus setelah rule default dengan spesifisitas lebih tinggi */
  .primary-menu > li.more-menu-desktop-trigger:hover > a.more-menu-link .arrow,
  .primary-menu > li.more-menu-desktop-trigger:hover > a.more-menu-link > .arrow,
  .primary-menu > li.more-menu-desktop-trigger.active > a.more-menu-link .arrow,
  .primary-menu > li.more-menu-desktop-trigger.active > a.more-menu-link > .arrow,
  .primary-menu > li.more-menu-desktop-trigger > a.more-menu-link:hover .arrow,
  .primary-menu > li.more-menu-desktop-trigger > a.more-menu-link:hover > .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:hover > a.more-menu-link .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger:hover > a.more-menu-link > .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger.active > a.more-menu-link .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger.active > a.more-menu-link > .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger > a.more-menu-link:hover .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger > a.more-menu-link:hover > .arrow,
  .more-menu-desktop-trigger:hover > a.more-menu-link .arrow,
  .more-menu-desktop-trigger:hover > a.more-menu-link > .arrow,
  .more-menu-desktop-trigger.active > a.more-menu-link .arrow,
  .more-menu-desktop-trigger.active > a.more-menu-link > .arrow {
    color: #ffffff !important;
  }
  
  .primary-menu > li.more-menu-desktop-trigger.active > a.more-menu-link .arrow,
  .primary-menu > ul > li.more-menu-desktop-trigger.active > a.more-menu-link .arrow {
    transform: rotate(90deg); /* Putar panah ke bawah saat dropdown aktif */
  }
  /* Styling untuk dropdown "Lainnya" */
  .primary-menu > li.more-menu-desktop-trigger .more-menu-desktop-dropdown,
  .primary-menu > ul > li.more-menu-desktop-trigger .more-menu-desktop-dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: #ffffff;
    list-style: none;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 1100;
    box-shadow: none; /* Remove box shadow to prevent border appearance on hover */
    padding: 0;
    margin: 0;
    border-radius: 4px;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
  }
  /* KOREKSI UTAMA: Tampilkan dropdown "Lainnya" saat .active */
  .primary-menu > li.more-menu-desktop-trigger.active .more-menu-desktop-dropdown,
  .primary-menu > ul > li.more-menu-desktop-trigger.active .more-menu-desktop-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Izinkan interaksi saat terlihat */
  }
  /* Styling untuk item di dalam dropdown "Lainnya" */
  .more-menu-desktop-dropdown > li {
    position: relative;
    display: block !important;
  }
.more-menu-desktop-dropdown > li > a {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #3E4095;
  white-space: nowrap;
  font-size: 14px;
  transition: background-color 0.3s;
}
.more-menu-desktop-dropdown > li > a:hover {
  background-color: #3E4095;
  color: #ffffff;
}

/* Arrow putih saat hover pada More menu dropdown items */
.more-menu-desktop-dropdown > li > a:hover .arrow,
.more-menu-desktop-dropdown > li > a:hover > .arrow,
.more-menu-desktop-dropdown > li > a:focus .arrow,
.more-menu-desktop-dropdown > li > a:focus > .arrow {
  color: #ffffff !important;
}

  .more-menu-desktop-dropdown > li:hover > .children,
  .more-menu-desktop-dropdown > li:hover > .sub-menu,
  .more-menu-desktop-dropdown > li:focus-within > .children,
  .more-menu-desktop-dropdown > li:focus-within > .sub-menu,
  .more-menu-desktop-dropdown .children > li:hover > .children,
  .more-menu-desktop-dropdown .children > li:hover > .sub-menu,
  .more-menu-desktop-dropdown .sub-menu > li:hover > .children,
  .more-menu-desktop-dropdown .sub-menu > li:hover > .sub-menu,
  .more-menu-desktop-dropdown .children > li:focus-within > .children,
  .more-menu-desktop-dropdown .children > li:focus-within > .sub-menu,
  .more-menu-desktop-dropdown .sub-menu > li:focus-within > .children,
  .more-menu-desktop-dropdown .sub-menu > li:focus-within > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 0;
    left: 100%;
  }
  .more-menu-desktop-dropdown .children-toggle {
    display: none !important;
  }
  /* Pastikan elemen mobile baru ini tersembunyi di desktop */
  .mobile-nav-panel-header,
  .mobile-menu-close {
    display: none !important;
  }
  /* Kelas penanda untuk item menu yang submenunya harus terbuka ke kiri */
  .primary-menu > li.open-submenu-left > .children,
  .primary-menu > li.open-submenu-left > .sub-menu,
  .primary-menu > ul > li.open-submenu-left > .children,
  .primary-menu > ul > li.open-submenu-left > .sub-menu,
  .more-menu-desktop-dropdown > li.open-submenu-left > .children,
  .more-menu-desktop-dropdown > li.open-submenu-left > .sub-menu {
    left: auto; /* Batalkan left: 0; atau left: 100% */
    right: 100%; /* Posisikan sisi kanan submenu ke sisi kiri item induknya (untuk submenu level 2 dari item 'More' atau item biasa) */
  }
  /* Submenu level > 1 buka ke kiri secara default */
  .more-menu-desktop-dropdown .sub-menu > li > .children,
  .more-menu-desktop-dropdown .sub-menu > li > .sub-menu,
  .more-menu-desktop-dropdown .children > li > .children,
  .more-menu-desktop-dropdown .children > li > .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
  }
  .more-menu-desktop-dropdown .sub-menu > li > .children.active,
  .more-menu-desktop-dropdown .sub-menu > li > .sub-menu.active,
  .more-menu-desktop-dropdown .children > li > .children.active,
  .more-menu-desktop-dropdown .children > li > .sub-menu.active {
    transform: translateX(0);
  }
  /* Untuk submenu utama yang terkait langsung dengan item menu utama di baris atas */
  .primary-menu > li.open-main-submenu-left > .children,
  .primary-menu > li.open-main-submenu-left > .sub-menu,
  .primary-menu > ul > li.open-main-submenu-left > .children,
  .primary-menu > ul > li.open-main-submenu-left > .sub-menu {
    left: auto; /* Batalkan left: 0; */
    right: 0; /* Posisikan sisi kanan submenu ke sisi kanan item induknya */
  }
  /* Untuk child submenu (sub-submenu) yang induknya sudah terbuka ke kiri */
  .primary-menu > li.open-main-submenu-left > .children > li > .children,
  .primary-menu > li.open-main-submenu-left > .children > li > .sub-menu,
  .primary-menu > li.open-main-submenu-left > .sub-menu > li > .children,
  .primary-menu > li.open-main-submenu-left > .sub-menu > li > .sub-menu,
  .primary-menu > li.open-submenu-left > .children > li > .children,
  .primary-menu > li.open-submenu-left > .children > li > .sub-menu,
  .primary-menu > li.open-submenu-left > .sub-menu > li > .children,
  .primary-menu > li.open-submenu-left > .sub-menu > li > .sub-menu,
  .primary-menu > ul > li.open-main-submenu-left > .children > li > .children,
  .primary-menu > ul > li.open-main-submenu-left > .children > li > .sub-menu,
  .primary-menu > ul > li.open-main-submenu-left > .sub-menu > li > .children,
  .primary-menu > ul > li.open-main-submenu-left > .sub-menu > li > .sub-menu,
  .primary-menu > ul > li.open-submenu-left > .children > li > .children,
  .primary-menu > ul > li.open-submenu-left > .children > li > .sub-menu,
  .primary-menu > ul > li.open-submenu-left > .sub-menu > li > .children,
  .primary-menu > ul > li.open-submenu-left > .sub-menu > li > .sub-menu,
  .more-menu-desktop-dropdown > li.open-submenu-left > .children > li > .children,
  .more-menu-desktop-dropdown > li.open-submenu-left > .children > li > .sub-menu,
  .more-menu-desktop-dropdown > li.open-submenu-left > .sub-menu > li > .children,
  .more-menu-desktop-dropdown > li.open-submenu-left > .sub-menu > li > .sub-menu {
    left: auto; /* Batalkan left: 100% */
    right: 100%; /* Posisikan sisi kanan sub-submenu ke sisi kiri item submenu induknya */
  }
  /*
     Jika menu "More" itu sendiri yang perlu dropdown-nya dibuka ke kiri
     (misalnya, jika "More" adalah item terakhir yang terlihat dan sangat kanan)
  */
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown {
    left: auto;
    right: 0; /* Dropdown "More" rata kanan dengan trigger "More" */
  }
  /*
     Ketika dropdown "More" sudah diatur untuk buka ke kiri (open-main-submenu-left),
     maka submenu dari item di DALAM dropdown "More" tersebut juga harus menyesuaikan.
     Mereka akan terbuka ke kiri relatif terhadap item di dalam dropdown "More".
  */
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown > li > .children,
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown > li > .sub-menu,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown > li > .children,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown > li > .sub-menu {
    left: auto;
    right: 100%; /* Submenu muncul di sebelah kiri item di dalam dropdown "More" */
    margin-right: 10px;
  }
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .children > li > .children,
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .children > li > .sub-menu,
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .sub-menu > li > .children,
  .primary-menu > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .sub-menu > li > .sub-menu,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .children > li > .children,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .children > li > .sub-menu,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .sub-menu > li > .children,
  .primary-menu > ul > li.more-menu-desktop-trigger.open-main-submenu-left .more-menu-desktop-dropdown .sub-menu > li > .sub-menu {
    left: auto;
    right: 100%; /* Sub-submenu juga muncul di sebelah kiri item submenu di dalam dropdown "More" */
  }
  /* Panah untuk item menu utama, item di dropdown More, submenu, dan link More */
  .primary-menu > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
  .primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
  .primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
  .more-menu-desktop-dropdown > li.has-submenu > a .arrow,
  .more-menu-desktop-dropdown > li.has-submenu > a > .arrow,
  /* Arrow pada child menu - lebih kecil dari parent dan berada di kanan */
  .children > li.has-children > a .arrow,
  .children > li.has-children > a > .arrow,
  .children li > a .arrow,
  .children li > a > .arrow,
  .sub-menu > li.has-children > a .arrow,
  .sub-menu > li.has-children > a > .arrow,
  .sub-menu li > a .arrow,
  .sub-menu li > a > .arrow {
    display: inline-block;
    margin-left: auto !important; /* Force arrow to the right (justify-end) */
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    flex-shrink: 0;
    order: 999 !important; /* Ensure arrow is always last (right side) */
    color: #3E4095 !important;
    background: none !important;
    background-color: transparent !important;
    /* Force black color, override any inherited color from parent link */
    text-decoration: none !important;
    font-size: 0.4em !important; /* Arrow child menu lebih kecil dari parent */
    line-height: 1;
    vertical-align: middle;
  }
  
  /* Ensure child menu links use flexbox for proper arrow positioning */
  .children li > a,
  .sub-menu li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  /* Arrow pada parent menu dan More menu */
.primary-menu > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
.primary-menu > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
.primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) .arrow,
.primary-menu > ul > li.has-submenu:not(:hover) > a:not(:hover) > .arrow,
.more-menu-desktop-dropdown > li.has-submenu > a .arrow,
.more-menu-desktop-dropdown > li.has-submenu > a > .arrow,
.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link:not(:hover) .arrow,
.more-menu-desktop-trigger:not(:hover):not(.active) > a.more-menu-link:not(:hover) > .arrow {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  transition: transform 0.2s ease-in-out, color 0.3s;
  transform: rotate(0deg);
  flex-shrink: 0;
  order: 2;
  color: #3E4095 !important;
  background: none !important;
  background-color: transparent !important;
  text-decoration: none !important;
  font-size: 0.5em;
  line-height: 1;
  vertical-align: middle;
}
  /* Rotasi panah saat hover menjadi ke bawah (90deg) dan arrow putih saat hover */
  .primary-menu > li:hover > a .arrow,
  .primary-menu > li:hover > a > .arrow,
  .primary-menu > li:focus-within > a .arrow,
  .primary-menu > li:focus-within > a > .arrow,
  .primary-menu > ul > li:hover > a .arrow,
  .primary-menu > ul > li:hover > a > .arrow,
  .primary-menu > ul > li:focus-within > a .arrow,
  .primary-menu > ul > li:focus-within > a > .arrow {
    transform: rotate(90deg);
  }
  
  /* Arrow putih saat hover pada primary menu dengan submenu */
  .primary-menu > li:hover > a .arrow,
  .primary-menu > li:hover > a > .arrow,
  .primary-menu > li > a:hover .arrow,
  .primary-menu > li > a:hover > .arrow,
  .primary-menu > ul > li:hover > a .arrow,
  .primary-menu > ul > li:hover > a > .arrow,
  .primary-menu > ul > li > a:hover .arrow,
  .primary-menu > ul > li > a:hover > .arrow,
  .primary-menu > li.has-submenu:hover > a .arrow,
  .primary-menu > li.has-submenu:hover > a > .arrow,
  .primary-menu > li.has-submenu > a:hover .arrow,
  .primary-menu > li.has-submenu > a:hover > .arrow,
  .primary-menu > ul > li.has-submenu:hover > a .arrow,
  .primary-menu > ul > li.has-submenu:hover > a > .arrow,
  .primary-menu > ul > li.has-submenu > a:hover .arrow,
  .primary-menu > ul > li.has-submenu > a:hover > .arrow {
    color: #ffffff !important;
  }
  .more-menu-desktop-dropdown > li:hover > a .arrow,
  .more-menu-desktop-dropdown > li:hover > a > .arrow,
  .more-menu-desktop-dropdown > li:focus-within > a .arrow,
  .more-menu-desktop-dropdown > li:focus-within > a > .arrow,
  .children > li:hover > a .arrow,
  .children > li:hover > a > .arrow,
  .children > li:focus-within > a .arrow,
  .children > li:focus-within > a > .arrow,
  .sub-menu > li:hover > a .arrow,
  .sub-menu > li:hover > a > .arrow,
  .sub-menu > li:focus-within > a .arrow,
  .sub-menu > li:focus-within > a > .arrow,
  .more-menu-desktop-trigger.active > a.more-menu-link .arrow,
  .more-menu-desktop-trigger.active > a.more-menu-link > .arrow {
    transform: rotate(90deg);
    color: #ffffff !important;
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
  }
  /* Pastikan panah tidak muncul di tombol toggle mobile */
  .children-toggle .arrow {
    display: none !important;
  }
}
/* ==================================== */
/* Mobile Specific CSS (max-width: 768px) */
/* ==================================== */
@media (max-width: 768px) {
  .header-inner {
    position: relative;
    justify-content: space-between;
  }
  
  .menu-toggle {
    display: block !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 100;
    order: 999; /* Ensure it's always last */
  }
  
  /* Hide the CTA buttons on mobile */
  .header-inner > div.flex.items-center.gap-4,
  .header-inner > .flex {
    display: none !important;
  }
  
  /* Ensure logo/title area doesn't take full width */
  .header-inner > div[class*="space-y"] {
    flex: 0 1 auto;
    max-width: calc(100% - 60px); /* Leave space for hamburger */
  }
  .mobile-nav-panel-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ffffff;
    background-color: #f9f9f9;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .mobile-site-title a {
    font-size: 1.125rem;
    font-weight: bold;
    color: #3E4095;
    text-decoration: none;
  }
  .mobile-menu-close {
    display: block;
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #3E4095;
    line-height: 1;
  }
  header nav {
    position: fixed;
    top: 0;
    right: -70%;
    width: 70%;
    height: 100%;
    background-color: #f9f9f9;
    transition: right 0.3s ease-in-out;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    visibility: hidden;
    display: flex;
    flex-direction: column;
  }
  header nav.active {
    right: 0;
    visibility: visible;
  }
  header nav.active .mobile-nav-panel-header {
    display: flex;
  }
  .primary-menu,
  .primary-menu > ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
    overflow-y: auto;
    flex-grow: 1;
  }
  .primary-menu li {
    border-bottom: 1px solid #eaeaea;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: transparent !important;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .primary-menu li:last-child {
    border-bottom: none;
  }
  
  .primary-menu > li > a,
  .primary-menu > ul > li > a {
    padding: 15px 20px;
    flex-grow: 1;
    background-color: transparent !important;
    color: #3E4095 !important;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
    min-width: 0; /* Allow text to shrink */
  }
  
  .primary-menu > li > a:hover,
  .primary-menu > li > a:focus,
  .primary-menu > ul > li > a:hover,
  .primary-menu > ul > li > a:focus {
    background-color: #f5f5f5;
    outline: none;
  }
  /* Mobile submenu styling */
  .children,
  .sub-menu {
    display: none; /* Important: ensure this is the default for mobile */
    position: static; /* Override absolute positioning */
    background-color: #f5f5f5;
    box-shadow: none;
    min-width: 100%;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    margin: 0;
    padding: 0;
    opacity: 1; /* Should be visible when active */
    visibility: visible; /* Should be visible when active */
    pointer-events: auto; /* Should be interactive when active */
    transition: none !important; /* No transitions for mobile accordion */
    margin-left: 0; /* Reset any desktop margins */
    top: auto; /* Reset desktop positioning */
    left: auto; /* Reset desktop positioning */
    transform: none !important; /* Reset any transforms */
    list-style: none;
    border-radius: 0;
  }
  
  /* Show active submenus in mobile */
  header nav .primary-menu .children.active,
  header nav .primary-menu .sub-menu.active,
  header nav .primary-menu li.submenu-open > .children,
  header nav .primary-menu li.submenu-open > .sub-menu {
    display: block !important;
  }
  
  .children li,
  .sub-menu li {
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .children li:last-child,
  .sub-menu li:last-child {
    border-bottom: none;
  }
  
  .children li > a,
  .sub-menu li > a {
    padding: 12px 20px 12px 30px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    color: #3E4095;
    transition: background-color 0.2s;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
  }

  .children li > a > *:not(.arrow),
  .sub-menu li > a > *:not(.arrow) {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .children li > a:hover,
  .children li > a:focus,
  .sub-menu li > a:hover,
  .sub-menu li > a:focus {
    background-color: #3E4095;
    color: #ffffff;
    outline: none;
  }
  
  /* Sub-submenu (children of children) padding */
  .children > .children,
  .children > .sub-menu,
  .sub-menu > .children,
  .sub-menu > .sub-menu {
    margin-top: 0;
    border-top: 1px solid #ddd;
    background-color: #ebebeb;
  }
  
  .children > .children li > a,
  .children > .sub-menu li > a,
  .sub-menu > .children li > a,
  .sub-menu > .sub-menu li > a {
    padding: 10px 20px 10px 40px;
  }
  
  /* Sub-sub-submenu (level 3) */
  .children > .children > .children li > a,
  .children > .children > .sub-menu li > a,
  .children > .sub-menu > .children li > a,
  .children > .sub-menu > .sub-menu li > a,
  .sub-menu > .children > .children li > a,
  .sub-menu > .children > .sub-menu li > a,
  .sub-menu > .sub-menu > .children li > a,
  .sub-menu > .sub-menu > .sub-menu li > a {
    padding: 10px 20px 10px 50px;
  }
  /* Mobile toggle button */
  .children-toggle {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #3E4095;
    padding: 12px 15px;
    margin-left: auto;
    display: inline-flex !important; /* Ensure visible */
    align-items: center;
    justify-content: center;
    user-select: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 44px;
    min-height: 44px;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
  }
  
  .children-toggle:hover,
  .children-toggle:focus {
    color: #3E4095;
    opacity: 0.8;
    outline: none;
    background-color: transparent;
  }
  
  .children-toggle.active {
    transform: rotate(180deg);
  }
  /* Prevent desktop hover effects on mobile for submenus not explicitly opened */
  .primary-menu li:hover > .children:not(.active),
  .primary-menu li:hover > .sub-menu:not(.active),
  .primary-menu li:focus-within > .children:not(.active),
  .primary-menu li:focus-within > .sub-menu:not(.active),
  .primary-menu .children li:hover > .children:not(.active),
  .primary-menu .children li:hover > .sub-menu:not(.active),
  .primary-menu .sub-menu li:hover > .children:not(.active),
  .primary-menu .sub-menu li:hover > .sub-menu:not(.active),
  .primary-menu .children li:focus-within > .children:not(.active),
  .primary-menu .children li:focus-within > .sub-menu:not(.active),
  .primary-menu .sub-menu li:focus-within > .children:not(.active),
  .primary-menu .sub-menu li:focus-within > .sub-menu:not(.active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }
  .primary-menu > li > a:hover {
    background-color: transparent !important; /* No hover background for main items if submenu toggle is used */
  }
  .children li > a:hover {
    background-color: #3E4095 !important;
    color: #ffffff !important;
  }
  .primary-menu > li.hidden-original-desktop,
  .primary-menu > ul > li.hidden-original-desktop {
    display: flex !important;
  }
  .primary-menu > li.menu-item-original.hidden-in-desktop-main-row,
  .primary-menu > ul > li.menu-item-original.hidden-in-desktop-main-row {
    display: flex !important;
  }
  .primary-menu > li.more-menu-desktop-trigger,
  .primary-menu > ul > li.more-menu-desktop-trigger {
    display: none !important; /* Sembunyikan "More" trigger dan dropdown-nya di mobile */
  }
  .primary-menu > li > a .arrow,
  .primary-menu > ul > li > a .arrow,
  .children > li > a .arrow,
  .more-menu-desktop-dropdown > li > a .arrow,
  .more-menu-desktop-trigger > a.more-menu-link .arrow {
    display: none !important;
  }

  /* Sesuaikan posisi panel nav saat admin bar WordPress tampil */
  body.admin-bar header nav {
    top: 46px;
    height: calc(100% - 46px);
  }
  @media (min-width: 783px) {
    body.admin-bar header nav {
      top: 32px;
      height: calc(100% - 32px);
    }
  }
}
#content {
  flex-grow: 1;
  position: relative;
  z-index: 10;
}

/* Sidebar
--------------------------------------------- */
aside {
  margin-top: 2rem;
  width: 100%;
  flex-shrink: 0;
}
aside > * + * {
  margin-top: 1.5rem; /* vertical spacing between children */
}
aside .widget h2, aside .widget h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
aside .widget ul {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 500;
  list-style: none;
}
aside .widget ul > * + * {
  margin-top: 1rem; /* vertical spacing between children */
}

.sidebar-block .widget {
  padding: 2rem;
  background-color: #fafafa;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
}

.sidebar-full {
  position: relative;
  isolation: isolate;
  margin-inline: -1.5rem;
}
.sidebar-full .widget {
  padding-block-end: 1rem;
}

.sidebar-right.sidebar-border:before {
  border-left: 2px solid #eaeaea;
}

.sidebar-left.sidebar-border:before {
  border-right: 2px solid #eaeaea;
}

aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: -3rem 0;
  width: 100vw; /* width as viewport */
  z-index: -1; /* make sure show before sidebar */
}

aside::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: -3rem 0;
  width: 100vw; /* width as viewport */
  z-index: -1; /* make sure show before sidebar */
}

@media (min-width: 1024px) {
  .sidebar-full {
    margin-inline: 0;
  }
}
@media (min-width: 1024px) {
  aside {
    margin-top: 0;
    width: 33.333333%;
  }
}
@media (min-width: 1280px) {
  aside {
    width: 25%;
  }
}
/* .has-sidebar */
.has-sidebar {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .has-sidebar {
    flex-direction: row;
    gap: 1.75rem;
  }
}
.sidebar-right-full .sidebar-full .widget {
  padding-inline-start: 2rem;
}

.sidebar-both-full aside .widget {
  padding-inline-start: 2rem;
}


/* Katrolindo Colors */
.ka-color-blue {
  color: #3E4095!important;
}

.ka-color-red {
  color: #ED3237!important;
}

.ka-bg-blue-90 {
  background-color: rgba(62, 64, 149, 0.9)!important;
  background-color: #3E4095E6!important!important;
  background-color: #3E4095!important;
}

/* Footer
--------------------------------------------- */
#footer .widget-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
#footer ul {
  list-style: none;
}

.footer-row-top,
.footer-row-middle,
.footer-row-bottom {
  background-color: #fafafa;
  border-top: 1px solid #eeeeee;
}

.footer-row-middle nav ul {
  font-size: 0.875rem;
  font-weight: 500;
}
.footer-row-middle nav ul > * + * {
  margin-top: 1rem; /* vertical spacing between children */
}

.footer-row-bottom .footer-credits {
  font-size: 0.875rem;
  color: #333333;
}
.footer-row-bottom #footer-menu {
  display: flex;
  gap: 2rem;
}
.footer-row-bottom #footer-menu ul {
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.footer-row-bottom #footer-menu ul > * + * {
  margin-left: 1.5rem; /* horizontal spacing between children */
}

footer .widget.widget_nav_menu a {
  color: #ffffff;
}

footer .widget.widget_nav_menu a:hover {
  color: #60a5fa;
}

/*# sourceMappingURL=style.css.map */