/* =====================================================================
   LENTERASAFETY — GLOBAL FRONTEND THEME
   Single global stylesheet for the public site redesign. Loaded once in
   frontend/layouts/head.php after bootstrap.min.css / style.css so it can
   layer design tokens + reusable components on top without touching any
   page logic. New pages should reuse the components below instead of
   writing page-scoped <style> blocks.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand */
    --ls-primary: #237dd0;
    --ls-primary-rgb: 35, 125, 208;
    --ls-primary-dark: #1a63a8;
    --ls-primary-light: #eaf3fc;

    --ls-accent: #f36c20;
    --ls-accent-rgb: 243, 108, 32;
    --ls-accent-dark: #cf590f;
    --ls-accent-light: #fef1e8;

    /* Neutrals */
    --ls-ink-900: #0f1b2d;
    --ls-ink-700: #33475b;
    --ls-ink-500: #64768a;
    --ls-ink-300: #c7d2dc;
    --ls-surface: #ffffff;
    --ls-surface-alt: #f6f9fc;
    --ls-border: #e5ebf1;

    /* Type */
    --ls-font: 'General Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radius */
    --ls-radius-sm: 10px;
    --ls-radius-md: 16px;
    --ls-radius-lg: 24px;
    --ls-radius-pill: 999px;

    /* Shadow */
    --ls-shadow-sm: 0 2px 10px rgba(15, 27, 45, 0.06);
    --ls-shadow-md: 0 14px 34px rgba(15, 27, 45, 0.10);
    --ls-shadow-lg: 0 22px 50px rgba(15, 27, 45, 0.14);

    /* Motion */
    --ls-ease: cubic-bezier(.22, 1, .36, 1);

    /* Safety hazard-stripe motif (brand-colored caution-tape pattern) —
       reused as both a border-image (page-hero) and a plain background
       (footer top bar), so it lives once here instead of being duplicated
       per usage. */
    --ls-hazard-stripe: repeating-linear-gradient(45deg, var(--ls-primary) 0 14px, #fff 14px 18px, var(--ls-accent) 18px 32px, #fff 32px 36px);

    /* Re-point Bootstrap's own primary token at the real brand blue so every
       existing var(--bs-primary) usage across the site (header, footer,
       template css) inherits the correct color automatically. */
    --bs-primary: var(--ls-primary);
    --bs-primary-rgb: var(--ls-primary-rgb);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 2. BASE TYPOGRAPHY ---------- */
body {
    font-family: var(--ls-font);
    color: var(--ls-ink-700);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ls-font);
    font-weight: 800;
    color: var(--ls-ink-900);
    letter-spacing: -0.02em;
}

a { color: var(--ls-primary); }

.text-accent { color: var(--ls-accent) !important; }

/* ---------- 3. REUSABLE: SECTION HEADER ---------- */
.ls-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
}

.ls-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ls-primary);
    margin-bottom: 14px;
}

.ls-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ls-accent);
}

.ls-section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ls-ink-900);
    margin-bottom: 14px;
    line-height: 1.2;
}

.ls-section-title .ls-accent-text {
    color: var(--ls-accent);
}

.ls-section-desc {
    color: var(--ls-ink-500);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 auto;
}

/* ---------- 4. REUSABLE: BUTTONS ---------- */
.ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--ls-radius-pill);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .25s var(--ls-ease), box-shadow .25s var(--ls-ease), background-color .25s var(--ls-ease), color .25s var(--ls-ease);
}

.ls-btn-sm { padding: 10px 22px; font-size: .85rem; }

.ls-btn-primary {
    background: var(--ls-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--ls-primary-rgb), .25);
}

.ls-btn-primary:hover {
    background: var(--ls-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--ls-primary-rgb), .32);
}

.ls-btn-outline {
    background: #fff;
    color: var(--ls-primary);
    border: 1.5px solid var(--ls-primary);
}

.ls-btn-outline:hover {
    background: var(--ls-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--ls-primary-rgb), .25);
}

.ls-btn-ghost-light {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
}

.ls-btn-ghost-light:hover {
    background: #fff;
    color: var(--ls-primary);
    transform: translateY(-2px);
}

/* ---------- 5. REUSABLE: BADGES ---------- */
.ls-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 12px;
    border-radius: var(--ls-radius-pill);
}

.ls-badge-soft-primary { background: var(--ls-primary-light); color: var(--ls-primary); }
.ls-badge-soft-accent { background: var(--ls-accent-light); color: var(--ls-accent-dark); }

/* ---------- 6. REUSABLE: CARD HOVER LIFT ---------- */
.ls-card-lift {
    transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease);
}

.ls-card-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--ls-shadow-lg);
}

/* ---------- 7. REUSABLE: PAGE HERO (breadcrumb banner for inner pages) ----------
   Compact colored banner used at the top of every non-homepage page (Public
   Training, Tentang Kami, dst) — badge + title + description + breadcrumb,
   with floating blobs echoing the same decorative language used elsewhere
   on the site (navbar blobs, training-card header blobs). */
.ls-page-hero {
    position: relative;
    overflow: hidden;
    height: 300px;
    padding: 0;
    display: flex;
    align-items: center;
    border-style: solid;
    border-width: 0 0 6px 0;
    /* Diagonal safety hazard-stripe border in brand colors instead of a
       flat accent line — keeps the caution-stripe motif but reads as
       LenteraSafety rather than generic hazard tape.
       Global on every inner-page hero, not just one page. */
    border-image: var(--ls-hazard-stripe) 6;
    /* Same faint diagonal hairline texture used on training-card headers,
       for a consistent decorative language across the site. */
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 14px),
        linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
}

.ls-page-hero > .container { width: 100%; }

.ls-page-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ls-page-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: var(--ls-radius-pill);
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(16px);
    animation: lsHeroFadeUp .7s var(--ls-ease) forwards;
}

.ls-page-hero-title {
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(16px);
    animation: lsHeroFadeUp .7s var(--ls-ease) forwards .1s;
}

.ls-page-hero-desc {
    color: rgba(255, 255, 255, .72);
    max-width: 640px;
    margin: 0 auto 10px;
    opacity: 0;
    transform: translateY(16px);
    animation: lsHeroFadeUp .7s var(--ls-ease) forwards .2s;
}

.ls-page-hero-crumb {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin: 0;
    opacity: 0;
    transform: translateY(16px);
    animation: lsHeroFadeUp .7s var(--ls-ease) forwards .3s;
}

.ls-page-hero-crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ls-page-hero-crumb a:hover { color: #fff; }
.ls-page-hero-crumb .current { color: #fff; }
.ls-page-hero-crumb .sep { margin: 0 4px; }

.ls-page-hero-blob {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, .1);
    animation: lsBlobFloat ease-in-out infinite;
}

.ls-page-hero-blob-1 {
    width: 180px;
    height: 180px;
    top: -70px;
    right: 6%;
    border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%;
    animation-duration: 9s;
}

.ls-page-hero-blob-2 {
    width: 90px;
    height: 90px;
    bottom: -40px;
    left: 10%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    animation-duration: 7s;
    animation-delay: -2s;
}

.ls-page-hero-blob-3 {
    width: 60px;
    height: 60px;
    top: 18px;
    left: 4%;
    border-radius: 50%;
    background: rgba(var(--ls-accent-rgb), .18);
    animation-duration: 6s;
    animation-delay: -1s;
}

.ls-page-hero-blob-4 {
    width: 130px;
    height: 130px;
    bottom: -60px;
    right: 14%;
    border-radius: 55% 45% 48% 52% / 60% 40% 60% 40%;
    background: rgba(255, 255, 255, .07);
    animation-duration: 11s;
    animation-delay: -4s;
}

.ls-page-hero-blob-5 {
    width: 36px;
    height: 36px;
    top: 50%;
    right: 30%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    animation-duration: 5s;
    animation-delay: -3s;
}

@keyframes lsBlobFloat {

    0%,
    100% { transform: translate(0, 0) scale(1); }

    50% { transform: translate(16px, -18px) scale(1.06); }
}

/* ---------- 8. REUSABLE: PANEL HEADER (colored bar on top of a white card) ---------- */
.ls-panel-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
}

.ls-panel-header::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -24px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.ls-panel-header i { position: relative; z-index: 1; color: #fff; font-size: 1.1rem; }
.ls-panel-header h5, .ls-panel-header h6 { position: relative; z-index: 1; color: #fff; font-weight: 700; margin: 0; }

.ls-panel-header-primary {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0px, rgba(255, 255, 255, .06) 1px, transparent 1px, transparent 14px),
        linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
}

.ls-panel-header-accent {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0px, rgba(255, 255, 255, .06) 1px, transparent 1px, transparent 14px),
        linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
}

/* ---------- 9. REUSABLE: FORM LABEL WITH ICON ---------- */
.ls-form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ls-ink-700);
    margin-bottom: 6px;
}

.ls-form-label i { color: var(--ls-primary); font-size: 15px; }

/* ---------- 10. REUSABLE: FORM FIELDS ----------
   Targets Bootstrap's own .form-control/.form-select/.form-check-input
   classes so every input across the whole site gets the premium style
   automatically, with no per-page CSS needed. */
.form-control,
.form-select {
    border: 1.5px solid var(--ls-border);
    border-radius: var(--ls-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ls-ink-900);
    background-color: var(--ls-surface-alt);
    transition: border-color .2s var(--ls-ease), box-shadow .2s var(--ls-ease), background-color .2s var(--ls-ease);
}

.form-control::placeholder { color: var(--ls-ink-300); opacity: 1; }

.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--ls-primary);
    box-shadow: 0 0 0 4px rgba(var(--ls-primary-rgb), .12);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ls-surface-alt);
    color: var(--ls-ink-500);
    opacity: 1;
}

.form-control-sm,
.form-select-sm {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 9px;
}

textarea.form-control { min-height: 100px; }

.form-check-input {
    border: 1.5px solid var(--ls-border);
    accent-color: var(--ls-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--ls-primary-rgb), .15);
    border-color: var(--ls-primary);
}

.input-group-text {
    border: 1.5px solid var(--ls-border);
    background: var(--ls-surface-alt);
    color: var(--ls-ink-500);
    font-size: 13.5px;
}

.form-label {
    font-weight: 600;
    color: var(--ls-ink-700);
    font-size: 13.5px;
}

/* ---------- 11. REUSABLE: SELECT2 OVERRIDE ----------
   Restyles the Select2 widget (used for searchable dropdowns) to match
   the .form-control look above, so it doesn't read as a leftover
   unstyled default widget next to our other fields. */
.select2-container .select2-selection--single {
    height: auto !important;
    border: 1.5px solid var(--ls-border) !important;
    border-radius: var(--ls-radius-sm) !important;
    background-color: var(--ls-surface-alt) !important;
    padding: 10px 14px !important;
    transition: border-color .2s var(--ls-ease), box-shadow .2s var(--ls-ease), background-color .2s var(--ls-ease);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding: 0 !important;
    color: var(--ls-ink-900);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ls-ink-300); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    background-color: #fff !important;
    border-color: var(--ls-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--ls-primary-rgb), .12);
}

.select2-dropdown {
    border-color: var(--ls-border) !important;
    border-radius: var(--ls-radius-sm) !important;
    overflow: hidden;
    box-shadow: var(--ls-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ls-primary) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--ls-border) !important;
    border-radius: var(--ls-radius-sm) !important;
    padding: 7px 10px !important;
}

/* Compact variant for the "Area" field inside the "Tambah Perusahaan" modal
   (sits next to form-control-sm fields, so it needs to match that height). */
#new_area + .select2-container .select2-selection--single {
    padding: 4px 10px !important;
    font-size: 13px;
}

/* ---------- 12. REUSABLE: CAPTCHA ROW ---------- */
.ls-captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ls-captcha-question {
    display: inline-flex;
    align-items: center;
    background: var(--ls-primary-light);
    color: var(--ls-primary);
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 16px;
    border-radius: var(--ls-radius-sm);
    white-space: nowrap;
}

.ls-captcha-row .form-control { flex: 1; min-width: 100px; }

/* ---------- 13. REUSABLE: FORM COLUMN DIVIDER ----------
   Thin vertical rule exactly down the middle of a two-column form row (e.g.
   "A." / "B." blocks). Positioned via a pseudo-element on the row itself
   (not a border on one column) so it's always dead-center regardless of
   Bootstrap's gutter math, and only shows once the columns sit side by side. */
.ls-form-split { position: relative; }

@media (min-width: 992px) {
    .ls-form-split::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--ls-border);
    }

    .ls-form-col-divider { padding-left: 2.5rem !important; }
}

/* ---------- 14. REUSABLE: DELIVERY-MODE TEXT COLORS ----------
   Same offline/online/blended color convention as .tc-mode-* (training
   card price grid on Beranda), reusable anywhere a price or label needs
   to match that mode's color as plain text instead of a pill badge. */
.text-mode-offline { color: #15803d !important; }
.text-mode-online { color: #1d4ed8 !important; }
.text-mode-blended { color: #6d28d9 !important; }

/* ---------- 15. REUSABLE: INFO CARD (colored left-border accent) ----------
   Set --card-accent inline per instance to vary the accent color while
   keeping the border/title styling itself defined once. */
.ls-info-card { border-left: 4px solid var(--card-accent, var(--ls-primary)) !important; }
.ls-info-card-title { color: var(--card-accent, var(--ls-primary)); }

/* =====================================================================
   PAGE: HOME (Beranda)
   ===================================================================== */

/* ----- Hero carousel ----- */
.ls-hero-wrap { position: relative; border-bottom: 3px solid var(--ls-accent); }

/* Page-turn transition: the outgoing slide hinges open around its left
   edge (the "spine"), like turning a book page, revealing the next slide
   already sitting underneath it. perspective-origin is aligned to the
   spine so the fold reads as a straight hinge instead of a skewed corner. */
.ls-hero-carousel.owl-carousel .owl-stage-outer {
    perspective: 1500px;
    perspective-origin: 0% 50%;
}

.ls-hero-carousel.owl-carousel .owl-item { backface-visibility: hidden; }

.ls-hero-carousel.owl-carousel .owl-item.lsPageFlipOut {
    transform-origin: left center;
    animation-name: lsPageFlipOut;
    animation-duration: 1200ms;
    animation-timing-function: cubic-bezier(.55, 0, .85, .35);
    animation-fill-mode: both;
    z-index: 5;
}

@keyframes lsPageFlipOut {
    0% {
        transform: rotateY(0deg);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    60% {
        filter: brightness(.75);
        box-shadow: -50px 0 70px rgba(0, 0, 0, .35);
    }

    100% {
        transform: rotateY(-140deg);
        filter: brightness(.55);
        box-shadow: -50px 0 80px rgba(0, 0, 0, 0);
        opacity: .25;
    }
}

.ls-hero-slide {
    position: relative;
    height: 62vh;
    min-height: 480px;
    max-height: 660px;
    overflow: hidden;
}

.ls-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 7s var(--ls-ease);
}

.owl-item.active .ls-hero-img { transform: scale(1); }

.ls-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(var(--ls-primary-rgb), .90) 36%, rgba(var(--ls-primary-rgb), .35) 76%, rgba(var(--ls-primary-rgb), .12) 100%);
}

.ls-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 50%, rgba(255, 255, 255, .06) 0%, transparent 45%),
        radial-gradient(circle at 88% 15%, rgba(var(--ls-accent-rgb), .18) 0%, transparent 40%);
}

.ls-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6%;
    max-width: 800px;
    z-index: 2;
}

.ls-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: var(--ls-radius-pill);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(16px);
}

.ls-hero-title {
    color: #fff;
    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(16px);
}

.ls-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(16px);
}

.ls-hero-meta .dot { color: rgba(255, 255, 255, .35); }
.ls-hero-meta i { color: var(--ls-accent); margin-right: 4px; }

.ls-hero-cta {
    opacity: 0;
    transform: translateY(16px);
    width: fit-content;
}

.owl-item.active .ls-hero-badge,
.owl-item.active .ls-hero-title,
.owl-item.active .ls-hero-meta,
.owl-item.active .ls-hero-cta {
    animation: lsHeroFadeUp .8s var(--ls-ease) forwards;
}

.owl-item.active .ls-hero-title { animation-delay: .12s; }
.owl-item.active .ls-hero-meta { animation-delay: .22s; }
.owl-item.active .ls-hero-cta { animation-delay: .32s; }

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

.ls-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s, transform .3s, box-shadow .3s;
}

.ls-hero-nav:hover {
    background: rgba(255, 255, 255, .28);
    box-shadow: var(--ls-shadow-md);
    transform: translateY(-50%) scale(1.08);
}

.ls-hero-nav-prev { left: 24px; }
.ls-hero-nav-next { right: 24px; }

/* Core owl.carousel.min.css only ships layout/behavior rules (no visual
   theme), so the dot nav needs its shape defined here from scratch —
   display/size/radius, not just a background color override. */
.ls-hero-wrap .owl-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.ls-hero-wrap .owl-dots .owl-dot {
    display: inline-block !important;
    border: 0;
    background: none;
    padding: 6px 4px;
    cursor: pointer;
}

.ls-hero-wrap .owl-dots .owl-dot span {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .45) !important;
    transition: width .3s var(--ls-ease), background .3s var(--ls-ease);
}

.ls-hero-wrap .owl-dots .owl-dot.active span {
    width: 24px !important;
    border-radius: 999px !important;
    background: var(--ls-accent) !important;
}

@media (max-width: 768px) {
    .ls-hero-slide { height: 70vh; min-height: 440px; }
    .ls-hero-content { max-width: 90%; padding: 0 6%; }
    .ls-hero-nav { width: 38px; height: 38px; font-size: 13px; }
    .ls-hero-nav-prev { left: 12px; }
    .ls-hero-nav-next { right: 12px; }
}

/* ----- Training filter bar & tabs ----- */
.ls-tab-pills {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-sm);
    padding: 8px;
}

.ls-tab-pills .nav-link {
    color: var(--ls-ink-500);
    background: transparent;
    border: none;
    border-radius: var(--ls-radius-pill);
    font-weight: 600;
    transition: all .25s var(--ls-ease);
}

.ls-tab-pills .nav-link.active {
    background: var(--ls-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(var(--ls-primary-rgb), .3);
}

.ls-tab-pills .nav-link:hover:not(.active) { color: var(--ls-accent); }

/* Single merged filter bar (month + search) instead of two separate
   floating chips — one surface/shadow instead of stacking several. */
.ls-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-sm);
    padding: 6px 10px;
}

.ls-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.ls-filter-item i { color: var(--ls-primary); font-size: 16px; flex-shrink: 0; }

.ls-filter-item .form-select,
.ls-filter-item .form-control {
    box-shadow: none !important;
    font-weight: 600;
    border: 0;
    padding: 0;
    background: transparent;
}

.ls-filter-item-grow { flex: 1; min-width: 160px; }
.ls-filter-item-grow .form-control { width: 100%; }

.ls-filter-divider { width: 1px; align-self: stretch; background: var(--ls-border); margin: 6px 0; }

/* ----- Training card ----- */
.training-card {
    --cat-1: #1565c0;
    --cat-2: #1976d2;
    --cat-icon: #90caf9;
    border-radius: var(--ls-radius-md);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ls-shadow-sm);
}

.training-card.cat-angkat      { --cat-1: #4a148c; --cat-2: #6a1b9a; --cat-icon: #ea80fc; }
.training-card.cat-kebakaran   { --cat-1: #7f0000; --cat-2: #b71c1c; --cat-icon: #ff8f00; }
.training-card.cat-uap         { --cat-1: #e65100; --cat-2: #bf360c; --cat-icon: #ffe57f; }
.training-card.cat-produksi    { --cat-1: #37474f; --cat-2: #546e7a; --cat-icon: #ffd740; }
.training-card.cat-kesehatan   { --cat-1: #880e4f; --cat-2: #ad1457; --cat-icon: #ff80ab; }
.training-card.cat-ketinggian  { --cat-1: #01579b; --cat-2: #0277bd; --cat-icon: #80d8ff; }
.training-card.cat-k3umum      { --cat-1: #006064; --cat-2: #00838f; --cat-icon: #84ffff; }
.training-card.cat-listrik     { --cat-1: #1a237e; --cat-2: #283593; --cat-icon: #ffd600; }
.training-card.cat-limbah      { --cat-1: #33691e; --cat-2: #558b2f; --cat-icon: #ccff90; }
.training-card.cat-air         { --cat-1: #006064; --cat-2: #0097a7; --cat-icon: #80deea; }
.training-card.cat-udara       { --cat-1: #0277bd; --cat-2: #039be5; --cat-icon: #b3e5fc; }
.training-card.cat-getaran     { --cat-1: #4a148c; --cat-2: #7b1fa2; --cat-icon: #ce93d8; }
.training-card.cat-bnsp        { --cat-1: #6d4c00; --cat-2: #a5750a; --cat-icon: #ffd77a; }
.training-card.cat-profesi     { --cat-1: #0d3b66; --cat-2: #1f5c96; --cat-icon: #90cdf4; }

/* Gradient banner with a watermark icon behind, promo badge top-left, and
   the title anchored at the bottom in white — ties the title directly to
   the category color instead of splitting it off into the white body. */
.tc-head {
    position: relative;
    min-height: 150px;
    padding: 14px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Faint diagonal hairlines layered under the gradient for a bit of
       texture — subtle enough not to compete with the icon/blobs. */
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 14px),
        linear-gradient(160deg, var(--cat-1), var(--cat-2));
}

.tc-head::before {
    content: '';
    position: absolute;
    right: -36px;
    top: -36px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

/* Second, smaller blob in the opposite corner so the composition doesn't
   feel perfectly symmetric. */
.tc-head::after {
    content: '';
    position: absolute;
    left: -28px;
    bottom: -28px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.tc-icon-chip {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Soft glow behind the watermark glyph so it reads as lit rather than flat. */
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 65%);
}

.tc-icon-chip i { color: rgba(255, 255, 255, .28); font-size: 68px; }

.tc-promo-chip {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ls-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--ls-radius-pill);
    box-shadow: 0 4px 12px rgba(var(--ls-accent-rgb), .35);
}

.tc-promo-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-body { padding: 16px; display: flex; flex-direction: column; }

.tc-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-title a { color: inherit; text-decoration: none; }

.tc-title a { color: inherit; text-decoration: none; }

.tc-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ls-ink-500); font-size: 14px; margin-bottom: 12px; }
.tc-meta-row i { color: var(--cat-1); margin-right: 3px; }
.tc-meta-dot { color: var(--ls-ink-300); }

.tc-divider { height: 1px; background: var(--ls-border); margin: 10px 0; }

/* Price grid: one cell per active delivery mode (1-3), divided by a hairline
   border — replaces the old stacked label/price rows. */
.tc-price-grid {
    display: flex;
    background: var(--ls-surface-alt);
    border-radius: var(--ls-radius-md);
    overflow: hidden;
}

.tc-price-cell { flex: 1; min-width: 0; padding: 10px 8px; text-align: center; }
.tc-price-cell + .tc-price-cell { border-left: 1px solid var(--ls-border); }

.tc-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--ls-radius-pill);
    margin-bottom: 6px;
}

.tc-mode-offline { background: #dcfce7; color: #15803d; }
.tc-mode-online  { background: #dbeafe; color: #1d4ed8; }
.tc-mode-blended { background: #ede9fe; color: #6d28d9; }

.tc-price-value { display: block; font-weight: 800; font-size: 19px; color: var(--cat-1); white-space: nowrap; }
.tc-price-strike { display: block; color: var(--ls-ink-300); font-size: 12.5px; text-decoration: line-through; white-space: nowrap; }
.tc-no-price { font-size: 14.5px; color: var(--ls-ink-500); font-style: italic; }

.tc-date-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--cat-1) 12%, white);
    color: var(--cat-1);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: var(--ls-radius-pill);
    margin-bottom: 10px;
}

.tc-footer { padding: 0 16px 16px; }
.tc-cta {
    width: 100%;
    background: linear-gradient(135deg, var(--cat-1), var(--cat-2));
    color: #fff;
}
.tc-cta:hover { color: #fff; filter: brightness(1.08); }

/* ----- News / blog cards ----- */
.news-card {
    border-radius: var(--ls-radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ls-border) !important;
}

.news-card .news-img-wrap { position: relative; height: 200px; overflow: hidden; }
.news-card .news-img { object-fit: cover; transition: transform .5s var(--ls-ease); }
.news-card:hover .news-img { transform: scale(1.06); }
.news-card .news-img-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .38) 0%, transparent 55%); }
.news-card .news-cat-badge { position: absolute; top: 12px; left: 12px; background: var(--ls-primary); color: #fff; font-size: 11px; padding: 3px 11px; border-radius: var(--ls-radius-pill); font-weight: 600; }
.news-card .news-title { font-size: 16px; line-height: 1.5; color: var(--ls-ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .news-excerpt { color: var(--ls-ink-500); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .news-readmore { color: var(--ls-primary); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.news-card .news-readmore i { transition: transform .25s var(--ls-ease); }
.news-card:hover .news-readmore i { transform: translateX(4px); }

/* ----- Instagram section ----- */
.ig-card {
    border-radius: var(--ls-radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ls-border);
    transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease);
}

.ig-card:hover { transform: translateY(-6px); box-shadow: var(--ls-shadow-lg); }
.ig-card .ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--ls-border); }
.ig-card .ig-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ls-surface-alt); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ig-card .ig-avatar img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ig-card .ig-uname { font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--ls-ink-900); margin: 0; }
.ig-card .ig-loc { font-size: 10.5px; color: var(--ls-ink-500); margin: 0; }
.ig-card .ig-img-wrap { position: relative; height: 280px; overflow: hidden; }
.ig-card .ig-img { object-fit: cover; transition: transform .5s var(--ls-ease); }
.ig-card:hover .ig-img { transform: scale(1.06); }
.ig-card .ig-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(240, 148, 51, .75), rgba(188, 24, 136, .75)); opacity: 0; transition: opacity .3s var(--ls-ease); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.ig-card:hover .ig-overlay { opacity: 1; }
.ig-card .ig-foot { padding: 10px 12px; }

.ls-ig-cta {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    box-shadow: 0 10px 26px rgba(220, 39, 67, .3);
}
.ls-ig-cta:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); }

/* ----- Client logos ----- */
.ls-client-tile {
    background: #fff;
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

.ls-client-tile img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    transition: transform .35s var(--ls-ease);
}

.ls-client-tile:hover img {
    transform: scale(1.04);
}

/* ----- Section shells (replace ad-hoc inline background per section) ----- */
.ls-section { padding: 44px 0; }
.ls-section-alt { background: var(--ls-surface-alt); }

@media (max-width: 767px) {
    .ls-section { padding: 32px 0; }
}

/* =====================================================================
   PAGE: ABOUT (Tentang Kami)
   ===================================================================== */

.ls-body-text { color: var(--ls-ink-500); line-height: 1.9; font-size: 14px; }

/* Some .ls-body-text blocks render raw HTML from a rich-text editor (CMS
   content), which often carries its own inline font-family/size. Force the
   site's global typeface on it and everything nested inside, so pasted
   content can't break typography consistency. */
.ls-body-text,
.ls-body-text * {
    font-family: var(--ls-font) !important;
}

/* ----- Credibility bar: card of trust numbers sitting below .ls-page-hero
   (not overlapping it), used to lead with real numbers before body copy.
   Reusable on any inner page. ----- */
.ls-cred-bar {
    position: relative;
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-md);
    padding: 26px 12px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.ls-cred-bar-item {
    flex: 1 1 0;
    min-width: 130px;
    text-align: center;
    padding: 6px 16px;
    position: relative;
}

.ls-cred-bar-item + .ls-cred-bar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: var(--ls-border);
}

.ls-cred-bar-value { font-size: 2rem; font-weight: 800; color: var(--ls-primary); margin: 0; }
.ls-cred-bar-value span { color: var(--ls-accent); }
.ls-cred-bar-label { color: var(--ls-ink-500); font-size: 13.5px; margin: 4px 0 0; }

@media (max-width: 767.98px) {
    .ls-cred-bar { border-radius: var(--ls-radius-md); padding: 18px 8px; }
    .ls-cred-bar-item { flex: 1 1 50%; padding: 10px 8px; }
    .ls-cred-bar-item + .ls-cred-bar-item::before { display: none; }
    .ls-cred-bar-value { font-size: 1.5rem; }
}

/* ----- About card ----- */
.about-card {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    border: 1px solid var(--ls-border);
    box-shadow: var(--ls-shadow-md);
}

.about-quote {
    background: var(--ls-primary-light);
    border-left: 4px solid var(--ls-primary);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
}

.about-quote p { color: var(--ls-primary); font-size: 1.02rem; line-height: 1.8; }

.about-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .95);
    color: var(--ls-primary);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: var(--ls-radius-pill);
    box-shadow: var(--ls-shadow-md);
}

.text-gradient-body {
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----- Certifications ----- */
.cert-card {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    border: 1px solid var(--ls-border);
    overflow: hidden;
    box-shadow: var(--ls-shadow-md);
    transition: box-shadow .3s var(--ls-ease);
}

.cert-card:hover { box-shadow: var(--ls-shadow-lg); }

.cert-header { display: flex; align-items: center; gap: 14px; padding: 18px 24px; }
.cert-header-blue { background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark)); }
.cert-header-orange { background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark)); }

.cert-header-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.cert-body { padding: 16px 24px; }

.cert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ls-border);
}

.cert-item:last-child { border-bottom: none; }

.cert-num {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.cert-num-blue { background: var(--ls-primary-light); color: var(--ls-primary); }
.cert-num-orange { background: var(--ls-accent-light); color: var(--ls-accent-dark); }

.cert-text { font-size: 14px; color: var(--ls-ink-500); line-height: 1.6; padding-top: 4px; }

/* ----- Timeline ----- */
.timeline-section {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    border: 1px solid var(--ls-border);
    box-shadow: var(--ls-shadow-md);
}

.timeline-track { display: flex; justify-content: center; gap: 40px; position: relative; flex-wrap: wrap; }

.timeline-track::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 2px;
    background: linear-gradient(to right, var(--ls-primary), var(--ls-accent));
}

.timeline-item { flex: 1; max-width: 300px; text-align: center; }

.timeline-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.timeline-year { font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.timeline-title { font-size: 15px; font-weight: 700; color: var(--ls-ink-900); margin-bottom: 8px; }
.timeline-desc { font-size: 14px; color: var(--ls-ink-500); line-height: 1.7; margin: 0; }

.timeline-content {
    background: var(--ls-surface-alt);
    border-radius: var(--ls-radius-md);
    padding: 20px;
    border: 1px solid var(--ls-border);
    border-top-width: 3px;
    border-top-style: solid;
}

/* ----- Team ----- */
.team-section { background: linear-gradient(180deg, var(--ls-surface-alt) 0%, #fff 100%); }

.team-item {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    transition: all .35s var(--ls-ease);
    border: 1px solid var(--ls-border);
}

.team-item:hover { transform: translateY(-10px); box-shadow: var(--ls-shadow-lg); }

.team-img { position: relative; overflow: hidden; }

.team-img img { width: 100%; height: 340px; object-fit: cover; transition: transform .5s var(--ls-ease); }

.team-item:hover .team-img img { transform: scale(1.07); }

.team-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
    opacity: 0;
    transition: .4s var(--ls-ease);
}

.team-item:hover .team-overlay { opacity: 1; }

.team-icon {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: all .35s var(--ls-ease);
    z-index: 2;
}

.team-item:hover .team-icon { opacity: 1; transform: translateX(-50%) translateY(0); }

.team-icon a {
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--ls-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s var(--ls-ease);
    text-decoration: none;
}

.team-icon a:hover { background: var(--ls-accent); color: #fff; }

.team-title { padding: 25px 20px; text-align: center; }
.team-title h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--ls-ink-900); }
.team-title p { color: var(--ls-primary); font-weight: 500; margin: 0; font-size: 14px; }

.team-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(255, 255, 255, .95);
    color: var(--ls-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--ls-radius-pill);
    z-index: 2;
    box-shadow: var(--ls-shadow-sm);
}

/* =====================================================================
   PAGE: INHOUSE TRAINING
   ===================================================================== */

/* Fix warna select yang terlihat disabled (browser default styling saat
   opsinya diisi lewat JS setelah render awal). */
#filter_sertifikasi_ih,
#filter_kategori_ih,
#topik_ih {
    background-color: #fff !important;
    color: #212529 !important;
    opacity: 1 !important;
}

/* =====================================================================
   PAGE: WEBINAR
   ===================================================================== */

.wb-section {
    background: var(--ls-surface-alt);
    min-height: 400px;
}

.wc {
    position: relative;
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ls-shadow-md);
    transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 4px solid transparent;
}

.wc:hover {
    transform: translateY(-10px);
    box-shadow: var(--ls-shadow-lg);
    border-bottom-color: var(--ls-accent);
}

.wc-img {
    position: relative;
    flex-shrink: 0;
    background: var(--ls-primary-light);
}

.wc-photo {
    width: 100%;
    height: auto;
    display: block;
}

.wc-photo-placeholder {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--ls-primary);
    opacity: .35;
    background: linear-gradient(135deg, var(--ls-primary-light), var(--ls-surface-alt));
}

.wc-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wc-accent {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ls-primary), var(--ls-accent));
    margin-bottom: 14px;
    transition: width .3s ease;
}

.wc:hover .wc-accent {
    width: 70px;
}

.wc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ls-ink-900);
    line-height: 1.4;
    margin-bottom: 14px;
    flex-grow: 1;
}

.wc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: var(--ls-radius-pill);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    color: #fff;
    border: none;
    transition: background .3s ease, box-shadow .3s ease, transform .2s ease;
}

.wc-btn:hover {
    background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--ls-accent-rgb), .45);
    transform: translateY(-2px);
}

/* -- Webinar Detail -- */
.wbd-section {
    background: var(--ls-surface-alt);
    min-height: 400px;
}

.wbd-card {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-md);
}

/* =====================================================================
   PAGE: NEWS
   ===================================================================== */

.news-section {
    background: var(--ls-surface-alt);
    min-height: 400px;
}

/* Card (nc = news card) */
.nc {
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ls-shadow-md);
    transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 4px solid transparent;
}

.nc:hover {
    transform: translateY(-10px);
    box-shadow: var(--ls-shadow-lg);
    border-bottom-color: var(--ls-accent);
}

.nc-img {
    position: relative;
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
}

.nc-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.nc:hover .nc-photo {
    transform: scale(1.12);
}

.nc-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 15, 35, .92) 0%, rgba(5, 15, 35, .55) 45%, transparent 100%);
}

.nc-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--ls-radius-pill);
}

.nc-meta {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.nc-meta span {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 20px;
}

.nc-meta span i {
    color: var(--ls-accent);
}

.nc-img-title {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    z-index: 3;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
}

.nc-img-title a {
    transition: color .2s;
}

.nc:hover .nc-img-title a {
    color: #ffd580 !important;
}

.nc-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nc-accent {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ls-primary), var(--ls-accent));
    margin-bottom: 14px;
    transition: width .3s ease;
}

.nc:hover .nc-accent {
    width: 70px;
}

.nc-excerpt {
    font-size: 13.5px;
    color: var(--ls-ink-500);
    line-height: 1.72;
    margin-bottom: 20px;
    flex-grow: 1;
}

.nc-btn {
    display: block;
    text-align: center;
    padding: 10px 0;
    border-radius: var(--ls-radius-pill);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    color: #fff;
    border: none;
    transition: background .3s ease, box-shadow .3s ease, transform .2s ease;
}

.nc-btn:hover {
    background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--ls-accent-rgb), .45);
    transform: translateY(-2px);
}

/* Pagination */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.np-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--ls-radius-pill);
    border: 2px solid var(--ls-primary);
    background: #fff;
    color: var(--ls-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

.np-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--ls-primary-rgb), .35);
}

.np-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.np-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.np-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--ls-border);
    background: #fff;
    color: var(--ls-ink-500);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

.np-dot:hover {
    border-color: var(--ls-primary);
    color: var(--ls-primary);
}

.np-dot.active {
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    border-color: var(--ls-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--ls-primary-rgb), .4);
}

.np-info {
    color: var(--ls-ink-500);
    font-size: 13px;
}

/* =====================================================================
   PAGE: NEWS DETAIL
   ===================================================================== */

.nd-section {
    background: var(--ls-surface-alt);
    padding: 56px 0 80px;
}

.nd-article {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    padding: 44px 48px;
    box-shadow: var(--ls-shadow-md);
}

@media (max-width: 576px) {
    .nd-article {
        padding: 28px 22px;
    }
}

.nd-accent-bar {
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ls-primary), var(--ls-accent));
    margin-bottom: 28px;
}

.nd-featured-img {
    margin-bottom: 28px;
    border-radius: var(--ls-radius-sm);
    overflow: hidden;
    box-shadow: var(--ls-shadow-sm);
}

.nd-featured-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Rich-text CMS content — force site font over any inline WYSIWYG font-family. */
.nd-content {
    font-family: var(--ls-font) !important;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ls-ink-700);
}

.nd-content * {
    font-family: var(--ls-font) !important;
}

.nd-content p {
    margin-bottom: 1.3em;
}

.nd-content h2,
.nd-content h3 {
    color: var(--ls-ink-900);
    font-weight: 700;
    margin-top: 1.8em;
    margin-bottom: .6em;
}

.nd-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 16px 0;
}

.nd-content a {
    color: var(--ls-primary);
    text-decoration: underline;
}

.nd-author-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--ls-surface-alt);
    border-radius: var(--ls-radius-sm);
    border-left: 4px solid var(--ls-primary);
}

.nd-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 20px;
}

.nd-author-label {
    font-size: 11px;
    color: var(--ls-ink-500);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 2px;
}

.nd-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ls-ink-900);
}

.nd-author-date {
    font-size: 12px;
    color: var(--ls-ink-500);
    margin-top: 2px;
}

.nd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: var(--ls-radius-pill);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-dark));
    color: #fff;
    border: none;
    transition: background .3s ease, box-shadow .3s ease, transform .2s ease;
}

.nd-back-btn:hover {
    background: linear-gradient(135deg, var(--ls-accent), var(--ls-accent-dark));
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--ls-accent-rgb), .4);
    transform: translateY(-2px);
}

/* =====================================================================
   PAGE: HUBUNGI KAMI
   ===================================================================== */

/* Account Executive business card — centered vertical layout (big photo on
   top, info below) instead of the generic colored-banner + small-circle
   team-member template. Vertical stacking holds up at any column width,
   unlike a side-by-side photo+text layout which overflows in a narrow
   4-across grid. */
.ae-card {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    border: 1px solid var(--ls-border);
    box-shadow: var(--ls-shadow-sm);
    transition: transform .3s var(--ls-ease), box-shadow .3s var(--ls-ease), border-color .3s var(--ls-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 18px 22px;
    position: relative;
    overflow: hidden;
}

.ae-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ls-primary), var(--ls-accent));
}

.ae-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ls-shadow-lg);
    border-color: transparent;
}

.ae-avatar {
    width: 104px;
    height: 104px;
    border-radius: var(--ls-radius-md);
    background: var(--ls-primary-light);
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ae-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ae-avatar i {
    font-size: 34px;
    color: var(--ls-primary);
    opacity: .4;
}

.ae-body {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ae-badge {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ls-accent);
    margin-bottom: 4px;
}

.ae-name {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ls-ink-900);
    margin-bottom: 8px;
}

.ae-email {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 11.5px;
    color: var(--ls-ink-500);
    text-decoration: none;
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ae-email:hover {
    color: var(--ls-primary);
}

.ae-wa-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--ls-radius-pill);
    background: rgba(37, 211, 102, .12);
    color: #128c7e;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .25s var(--ls-ease), color .25s var(--ls-ease);
}

.ae-wa-btn:hover {
    background: #25d366;
    color: #fff;
}

@media (max-width: 575.98px) {
    .ae-avatar { width: 92px; height: 92px; }
}

.hk-map-wrap {
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    box-shadow: var(--ls-shadow-md);
}

.hk-map-header {
    background: #fff;
    padding: 15px 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ls-ink-900);
    border-bottom: 1px solid var(--ls-border);
}

/* ---------- REUSABLE: BACK-TO-TOP (smaller than the template default) ----------
   Shows scroll progress as a percentage while scrolling, swaps to an
   up-arrow only once the page is scrolled all the way to the bottom. */
.back-to-top.btn-lg-square {
    width: 34px;
    height: 34px;
    /* Match the WhatsApp float button's bottom offset (#wa-widget, inline
       style in footer.php) so the two floating buttons sit level. */
    bottom: 24px;
}

.back-to-top .btt-percent {
    font-size: 10.5px;
    font-weight: 700;
}

.back-to-top .btt-arrow {
    display: none;
    font-size: 13px;
}

.back-to-top.at-bottom .btt-percent {
    display: none;
}

.back-to-top.at-bottom .btt-arrow {
    display: inline-block;
}

/* =====================================================================
   PAGE: PENCARIAN ALUMNI
   ===================================================================== */
.ls-result-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-sm);
    padding: 20px 24px;
}

.ls-result-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ls-primary-light);
    color: var(--ls-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.ls-result-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ls-accent);
    margin-bottom: 2px;
}

.ls-result-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--ls-ink-900);
    margin: 0;
}

.ls-table-card {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-sm);
    overflow: hidden;
}

.ls-table-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    font-weight: 700;
    color: var(--ls-ink-900);
    border-bottom: 1px solid var(--ls-border);
}

.ls-table-card-header i {
    color: var(--ls-primary);
    font-size: 18px;
}

.ls-table thead th {
    background: var(--ls-surface-alt);
    color: var(--ls-ink-500);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--ls-border);
    padding: 12px 16px;
    white-space: nowrap;
}

.ls-table tbody td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: var(--ls-ink-700);
    vertical-align: middle;
    border-bottom: 1px solid var(--ls-border);
}

.ls-table tbody tr:last-child td {
    border-bottom: 0;
}

.ls-table tbody tr:hover {
    background: var(--ls-surface-alt);
}

.ls-empty-state {
    background: #fff;
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-sm);
    text-align: center;
    padding: 60px 24px;
}

.ls-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ls-primary-light);
    color: var(--ls-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin: 0 auto 18px;
}

.ls-empty-state h5 {
    font-weight: 800;
    color: var(--ls-ink-900);
    margin-bottom: 8px;
}

.ls-empty-state p {
    color: var(--ls-ink-500);
    margin-bottom: 20px;
}