:root {
  --navy: #0c1c3f;
  --navy-dark: #081530;
  --navy-soft: #eef1f8;
  --gold: #f5a623;
  --gold-dark: #e0940f;
  --text-muted: #6b7280;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-card: 0 10px 30px rgba(12, 28, 63, 0.08);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  color: #1b2436;
  background: #fff;
}

h1, h2, h3, h4 { font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
h5, h6 { font-weight: 700; color: var(--navy); }

/* Display headings scale with the viewport instead of fixed inline sizes. */
.hero-title { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.6rem); line-height: 1.15; }
.page-title { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.4rem); line-height: 1.2; }
.page-title.page-title-sm { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); }
.cta-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.2; }
.hero-title, .page-title, .cta-title { overflow-wrap: break-word; }

.min-w-0 { min-width: 0; }

a { text-decoration: none; }

.eyebrow {
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[x-cloak] { display: none !important; }

/* ---------- Buttons ---------- */
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font-weight: 700;
  transition: background .2s ease, transform .15s ease;
}
.btn-gold:hover { background: var(--gold-dark); color: var(--navy); transform: translateY(-1px); }

.btn-outline-light-navy {
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font-weight: 700;
  background: transparent;
}
.btn-outline-light-navy:hover { background: rgba(255,255,255,0.1); color: #fff; }

.btn-outline-navy {
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font-weight: 700;
  background: transparent;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ---------- Header ---------- */
.topbar {
  background: var(--navy);
  color: #cdd6ea;
  font-size: 0.85rem;
}
.topbar a { color: #cdd6ea; }
.main-nav { box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.main-nav .nav-link { color: var(--navy); font-weight: 600; white-space: nowrap; }
.main-nav .nav-link.active { color: var(--gold-dark); }
.main-nav .nav-link:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; box-shadow: none; }

/* Desktop dropdown: the label is a link, the chevron is its own toggle
   button so touch and keyboard users can open the submenu too. */
.nav-dropdown { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-toggle {
  background: transparent; border: 0; padding: 4px 6px; color: var(--navy); line-height: 1;
  border-radius: 6px;
}
.nav-dropdown-toggle i { transition: transform .2s ease; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 1000; background: #fff; }
.nav-dropdown-menu .nav-link { white-space: normal; }
.nav-dropdown-menu .nav-link:hover { background: var(--navy-soft); }

/* Desktop menu: comfortable at xxl, tightened at xl (1200-1399px) so brand,
   seven links and the CTA keep clear gaps inside the 1140px container. */
.nav-list { gap: 1.5rem; margin: 0 1.25rem; }
@media (max-width: 1399.98px) {
  .nav-list { gap: 1rem; margin: 0 1rem; }
  .nav-list .nav-link { font-size: .95rem; }
  .nav-cta { padding: .6rem 1.15rem; font-size: .95rem; }
}

.nav-burger { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }

/* The mobile menu sits inside the sticky nav, so it scrolls on its own. */
.mobile-menu {
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu .nav-link { min-height: 44px; display: flex; align-items: center; }
.mobile-menu .nav-link i { transition: transform .2s ease; }
.brand-logo-badge {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}
/* Uploaded company logo: fixed height, width follows the logo's aspect ratio. */
.brand-logo-img { height: 42px; width: auto; max-width: 140px; object-fit: contain; flex-shrink: 0; }
.brand-logo-img.on-dark { background: #fff; border-radius: 10px; padding: 4px; }
.brand-logo-img.lg { height: 36px; max-width: 158px; }
@media (max-width: 575px) {
  .brand-logo-img { height: 36px; max-width: 110px; }
  .brand-logo-img.lg { height: 40px; max-width: 130px; }
}
.brand-name { font-weight: 800; color: var(--navy); font-size: 1.05rem; line-height: 1.1; }
@media (max-width: 374.98px) { .brand-name { font-size: .95rem; } }
.brand-sub { font-size: 0.65rem; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero-section { background: var(--navy); position: relative; overflow: hidden; }
.hero-img { border-radius: var(--radius-lg); object-fit: cover; }
.hero-img-ratio { aspect-ratio: 3 / 2; height: auto; }
.hero-img-fixed { height: 320px; }
@media (max-width: 575.98px) { .hero-img-fixed { height: 220px; } }
.hero-badge-card {
  position: absolute; bottom: -20px; left: 20px;
  background: #fff; color: var(--navy-dark); padding: 0.6rem 1rem; border-radius: 12px;
  font-size: 0.8rem; box-shadow: var(--shadow-card);
}

/* Floating stats card overlapping hero bottom */
.stats-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  margin-top: -60px; position: relative; z-index: 5;
}
.stats-card.stats-card-flat { margin-top: 1.5rem; }
.stat-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--navy-soft);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  flex-shrink: 0;
}
.stat-number { font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.9rem); font-weight: 800; color: var(--navy); line-height: 1.2; }

/* ---------- Cards ---------- */
.card-soft {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  border: 1px solid rgba(12,28,63,0.05); padding: 1.5rem; height: 100%;
}
.icon-circle {
  width: 44px; height: 44px; border-radius: 12px; background: var(--navy-soft); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--gold-dark);
  margin-bottom: 1rem;
}
.card-link-arrow { color: var(--navy); font-weight: 700; font-size: 0.9rem; }

/* Cards in a row share one height; the closing link/button sits on the
   bottom edge so it lines up across cards whatever the text length. */
.card-stack { display: flex; flex-direction: column; align-items: flex-start; }
.card-stack > :last-child { margin-top: auto; }

.pill-tag {
  display: inline-block; background: #fff; border: 1px solid #e4e7ef; color: var(--navy);
  padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.9rem; margin: 0.25rem;
}

.client-logo-card {
  background: #fff; border-radius: var(--radius-md); border: 1px solid #e6e9f2;
  padding: 1.2rem; display: flex; align-items: center; justify-content: center;
  min-height: 88px; color: var(--text-muted); font-weight: 600; text-align:center;
}
.client-logo-card img { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Klien & Mitra page grid */
.client-card {
  background: #fff; border: 1px solid #e6e9f2; border-radius: var(--radius-md);
  padding: 1.25rem; height: 100%; text-align: center;
}
.client-card-logo { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.client-card-logo img { max-height: 64px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.client-card-initials {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy-soft); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.client-card h6 { overflow-wrap: break-word; }
@media (max-width: 575.98px) { .client-card { padding: 1rem .75rem; } }

/* ---------- Client Carousel ---------- */
.client-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.client-track::-webkit-scrollbar { display: none; }

.client-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 44%;
}
@media (min-width: 576px) { .client-slide { width: 31%; } }
@media (min-width: 768px) { .client-slide { width: 23%; } }
@media (min-width: 992px) { .client-slide { width: 18.5%; } }

.carousel-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid #dfe3ee; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.carousel-arrow:hover { background: var(--navy); color: #fff; }

.carousel-dot {
  width: 24px; height: 24px; border-radius: 999px;
  background: #d7dcea; background-clip: content-box; border: none; padding: 7px;
  transition: width .25s ease, background-color .25s ease;
}
.carousel-dot.active {
  width: 40px;
  background-color: var(--gold);
}
.carousel-arrow:focus-visible, .carousel-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .client-track { scroll-behavior: auto; }
  .carousel-dot { transition: none; }
}

/* ---------- FAQ Accordion ---------- */
.faq-item {
  background: #fff; border: 1px solid #e6e9f2; border-radius: var(--radius-md);
  margin-bottom: 0.75rem; overflow: hidden;
}
.faq-question {
  padding: 1rem 1.25rem; font-weight: 700; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer;
  width: 100%; text-align: left; background: transparent; border: 0;
}
.faq-question i { flex-shrink: 0; transition: transform .2s ease; }
.faq-question:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius-md); }
.faq-answer { padding: 0 1.25rem 1rem; color: var(--text-muted); }
.faq-answer p { margin-bottom: 0.75rem; }
.faq-answer ul, .faq-answer ol { padding-left: 1.4rem; margin-bottom: 0.75rem; }
.faq-answer li { margin-bottom: 0.35rem; padding-left: 0.2rem; }
.faq-answer li::marker { color: var(--gold); font-weight: 700; }
.faq-answer > :last-child { margin-bottom: 0; }

/* ---------- CTA Banner ---------- */
.cta-banner { background: var(--navy-dark); color: #fff; border-radius: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #b9c3dc; }
.site-footer h6 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: .06em;}
.site-footer a { color: #b9c3dc; }
.site-footer a:hover { color: #fff; }
.social-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--navy); color: #fff; padding: 4rem 0; }
@media (max-width: 767.98px) { .page-hero { padding: 2.75rem 0; } }
.about-journey-img { object-fit: cover; height: 340px; }
@media (max-width: 575.98px) { .about-journey-img { height: auto; aspect-ratio: 4 / 3; } }

/* ---------- Career / News cards ---------- */
.job-card { background: #fff; border: 1px solid #e6e9f2; border-radius: var(--radius-md); padding: 1.5rem; height: 100%; }
.news-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); height: 100%; }
.news-card img { width: 100%; height: 220px; object-fit: cover; background: var(--navy-soft); }
.badge-category { background: var(--navy-soft); color: var(--navy); font-weight: 700; }

/* ---------- About content blocks ---------- */
/* Photos are shown whole (never cropped): scaled to the column width, capped
   in height, centred on a soft panel when narrower than the column. */
.about-figure { margin: 0 0 1.5rem; }
.about-frame {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-soft); border-radius: var(--radius-lg); overflow: hidden;
  padding: 0; border: 0; width: 100%; cursor: zoom-in;
}
.about-frame img { display: block; max-width: 100%; width: auto; height: auto; max-height: min(70vh, 560px); }
.about-frame.side img { max-height: 420px; }
.about-figure figcaption { font-size: .875rem; color: var(--text-muted); margin-top: .5rem; }
.about-gallery-thumb { display: block; width: 100%; padding: 0; border: 0; background: var(--navy-soft); border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; }
.about-gallery-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.about-gallery-thumb:hover img { transform: scale(1.04); }
.about-lightbox .modal-content { background: transparent; border: 0; }
.about-lightbox img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto; border-radius: var(--radius-md); }
.about-rich > :last-child { margin-bottom: 0; }
.about-rich, .rich-text { overflow-wrap: break-word; }
.about-rich img, .rich-text img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.about-rich table, .rich-text table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin-bottom: 1rem;
}
.about-rich th, .about-rich td, .rich-text th, .rich-text td { border: 1px solid #e4e7ef; padding: .5rem .75rem; vertical-align: top; }
.about-rich th, .rich-text th { background: var(--navy-soft); color: var(--navy); }

/* Paragraphs and lists rendered by content_html() / plain_text_html() (news body, career sections) */
.rich-text p { margin-bottom: 0.9rem; }
.rich-text ul, .rich-text ol { padding-left: 1.4rem; margin-bottom: 0.9rem; }
.rich-text li { margin-bottom: 0.35rem; padding-left: 0.2rem; }
.rich-text li::marker { color: var(--gold); font-weight: 700; }
.rich-text > :last-child { margin-bottom: 0; }

.rotate-180 { transform: rotate(180deg); }

/* ---------- Admin ---------- */
/* Keeps anchors / scrollIntoView targets clear of the sticky topbar. */
.admin-html { scroll-padding-top: 84px; }
.admin-body { background: #f4f6fb; }
.admin-body h5, .admin-body h6 { font-weight: 700; color: var(--navy); }
.admin-body.admin-scroll-lock, .admin-body.admin-modal-open { overflow: hidden; }

.admin-sidebar {
  background: var(--navy); color: #cdd6ea; width: 260px; flex-shrink: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.admin-sidebar a,
.admin-sidebar .admin-nav-toggle { color: #cdd6ea; display:block; padding: .65rem 1.2rem; border-radius: 10px; font-weight: 600;}
.admin-sidebar .admin-nav-toggle { display: flex; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; }
.admin-sidebar .admin-nav-toggle .admin-nav-chevron { margin-left: auto; font-size: .75rem; transition: transform .2s ease; }
.admin-sidebar a.active, .admin-sidebar a:hover,
.admin-sidebar .admin-nav-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-sidebar .admin-nav-toggle.has-active { color: #fff; }
.admin-sidebar a:focus-visible,
.admin-sidebar .admin-nav-toggle:focus-visible,
.admin-sidebar-close:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.admin-sidebar-close { color: #cdd6ea; background: transparent; border: 0; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.admin-sidebar-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Desktop: the sidebar stays in view and scrolls on its own. */
@media (min-width: 992px) {
  .admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
/* Mobile / tablet: off-canvas panel, full viewport height, scrollable. */
@media (max-width: 991.98px) {
  .admin-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045;
    height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .admin-sidebar.open {
    transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,0.3);
    transition: transform .2s ease, visibility 0s;
  }
}
.admin-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(8,21,48,0.5); }

.admin-main { min-width: 0; }
.admin-topbar { background:#fff; border-bottom: 1px solid #eaedf3; position: sticky; top: 0; z-index: 1020; min-height: 64px; }
.admin-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--navy-soft); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0;
}
img.admin-avatar { object-fit: cover; background: var(--navy-soft); }
.admin-avatar.admin-avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; }
.admin-user-name { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) {
  .admin-content h3 { font-size: 1.35rem; }
}

/* Page header: [back link] title [description] ... actions */
.admin-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.admin-page-header h3 { margin: 0; }
.admin-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.admin-page-desc { color: var(--text-muted); font-size: .875rem; margin: .35rem 0 0; max-width: 760px; }
.admin-back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.admin-back-link:hover { color: var(--navy); }

/* The pill buttons are sized for the public site; in the admin they line up
   with form controls (38px) and honour .btn-sm next to Bootstrap buttons. */
.admin-content .btn-gold,
.admin-content .btn-outline-navy { padding: .45rem 1.1rem; }
.admin-content .btn-gold.btn-sm,
.admin-content .btn-outline-navy.btn-sm { padding: .25rem .75rem; font-size: .875rem; }

.stat-widget { background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.25rem; }
.admin-quick-card { transition: transform .15s ease, box-shadow .15s ease; }
.admin-quick-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(12, 28, 63, 0.12); }

/* Tables: scroll sideways inside the card instead of widening the page. */
.card-soft > .table-responsive { border-radius: inherit; }
.admin-content .table th { white-space: nowrap; }

/* CodeIgniter's default pagination markup (<strong>/<a> separated by &nbsp;). */
.admin-pagination { display: flex; flex-wrap: wrap; gap: .35rem; font-size: 0; }
.admin-pagination > a,
.admin-pagination > strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .75rem; border-radius: 10px;
  border: 1px solid #dfe3ee; background: #fff; color: var(--navy); font-size: .875rem; font-weight: 600;
}
.admin-pagination > a:hover { background: var(--navy-soft); }
.admin-pagination > strong { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Modals: the overlay scrolls; margin:auto centres the dialog when it fits
   and keeps its top reachable when it is taller than the screen. */
.admin-modal {
  position: fixed; inset: 0; z-index: 1055; display: flex; padding: 1rem;
  overflow-y: auto; overscroll-behavior: contain; background: rgba(8,21,48,0.55);
}
.admin-modal-dialog { margin: auto; width: 100%; height: auto; }
.admin-modal-dialog:focus { outline: none; }
.admin-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 575.98px) {
  .admin-modal { padding: .75rem; }
  .admin-modal-dialog.card-soft { padding: 1.25rem; }
}