/* ==========================================================================
   Terapan.id — Mode gelap (meeting 2026-10-18)
   Aktif bila <html data-theme="dark">: diset skrip kecil di <head> layout dari pilihan pengunjung (tombol bulan/matahari
   di header, disimpan di localStorage) atau, bila belum memilih, dari setelan gelap HP/laptop (prefers-color-scheme).
   <meta name="color-scheme" content="light dark"> mencegah browser HP "memaksa gelap" (auto-dark) yang dulu membuat
   logo & teks tidak terbaca.
   Semua selector diawali :root[data-theme="dark"] supaya menang dari CSS per halaman yang dimuat sesudahnya.
   Hero, footer, dan blok CTA gelap tidak diubah (sudah gelap).
   ========================================================================== */

:root[data-theme="dark"] {
    color-scheme: dark;
    /* satu keluarga warna: teal-slate gelap, beda tipis antar lapisan (latar < section < kartu < kartu dalam) */
    --th-dk-bg: #0d1c21;
    --th-dk-bg-2: #102229;
    --th-dk-card: #142a31;
    --th-dk-card-2: #183139;
    --th-dk-line: #233d46;
    --th-dk-text: #d9e4e7;
    --th-dk-muted: #9fb3b9;
    --th-dk-head: #eef5f6;
    --th-dk-link: #7fd0de;

    --th-text: var(--th-dk-text);
    --th-muted: var(--th-dk-muted);
    --th-border: var(--th-dk-line);
    --th-primary-soft: #153a42;
    --th-accent-soft: #3a2616;
    --th-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    --th-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .45);
    --th-grad-from: #11313a; /* teal, bukan hijau: menyambung dari hero */
    --th-grad-to: var(--th-dk-bg);
}

:root[data-theme="dark"] body {
    background-color: var(--th-dk-bg);
    color: var(--th-dk-text);
}

/* teks yang memakai --th-primary sebagai warna huruf (link, label) -> teal terang; latar --th-primary tetap gelap */
:root[data-theme="dark"] .th-hr-more a,
:root[data-theme="dark"] .th-pos-count,
:root[data-theme="dark"] .th-pos-cta,
:root[data-theme="dark"] .th-sp-more,
:root[data-theme="dark"] .th-sp-showall,
:root[data-theme="dark"] .th-sp-kicker.is-solution,
:root[data-theme="dark"] .th-hr-story dt,
:root[data-theme="dark"] .th-sp-plan-list a,
:root[data-theme="dark"] .th-sp-plan-unit,
:root[data-theme="dark"] .th-card-count,
:root[data-theme="dark"] .th-pos-select > i,
:root[data-theme="dark"] .th-prose a,
:root[data-theme="dark"] .th-sp-plan-list em {
    color: var(--th-dk-link) !important;
}

/* ---------- Header & menu ---------- */
:root[data-theme="dark"] .header.th-header:not(.is-overlay),
:root[data-theme="dark"] .th-header.is-overlay.is-solid,
:root[data-theme="dark"] .th-header.is-overlay.is-menu-open {
    background: #0b171a;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .th-brand-img {
    opacity: 0;
}

:root[data-theme="dark"] .th-brand-img--light {
    opacity: 1;
}

:root[data-theme="dark"] .th-brand-tag {
    color: rgba(255, 255, 255, .78);
}

:root[data-theme="dark"] .header-menu-wrap ul li > a,
:root[data-theme="dark"] .th-lang-switch,
:root[data-theme="dark"] .header-menu-wrap .th-lang-switch a.is-active {
    color: #e4eef0;
}

:root[data-theme="dark"] .header-menu-wrap .th-lang-switch a {
    color: #9fb4b9;
}

:root[data-theme="dark"] .th-header .dl-menu > li.is-current > a,
:root[data-theme="dark"] .header-menu-wrap ul li:hover > a {
    color: #ffb27a;
}

:root[data-theme="dark"] .line-menu {
    background-color: #fff;
}

@media (max-width: 992px) {
    :root[data-theme="dark"] .primary-header .header-menu-wrap {
        border-top-color: var(--th-dk-line);
        background: #11242a;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    }

    :root[data-theme="dark"] .primary-header .header-menu-wrap ul li,
    :root[data-theme="dark"] .primary-header .header-menu-wrap ul li:first-child {
        border-bottom-color: var(--th-dk-line);
    }

    :root[data-theme="dark"] .primary-header .header-menu-wrap ul li > a {
        color: #e4eef0;
    }
}

/* ---------- Bar bawah HP ---------- */
:root[data-theme="dark"] .th-mbar {
    background: #0b171a;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .5);
}

/* ---------- Section & latar ---------- */
:root[data-theme="dark"] .th-section--soft,
:root[data-theme="dark"] .th-sp-hook {
    background: var(--th-dk-bg-2);
}

:root[data-theme="dark"] .th-trusted,
:root[data-theme="dark"] .th-hr-alumni {
    background: var(--th-dk-bg);
}

/* logo klien tetap berwarna asli: diberi alas putih supaya logo berteks gelap terbaca */
:root[data-theme="dark"] .th-trusted .customer-logos img {
    padding: 6px 10px;
    border-radius: 10px;
    background: #fff;
}

/* ---------- Kartu & kotak ---------- */
:root[data-theme="dark"] .th-card,
:root[data-theme="dark"] .th-pos-card,
:root[data-theme="dark"] .th-alumni-card,
:root[data-theme="dark"] .th-picker-list a,
:root[data-theme="dark"] .th-finder,
:root[data-theme="dark"] .th-benefit,
:root[data-theme="dark"] .th-why-lead,
:root[data-theme="dark"] .th-why-step,
:root[data-theme="dark"] .th-sp-shift-row,
:root[data-theme="dark"] .th-sp-plan,
:root[data-theme="dark"] .th-sp-plan.th-sp-plan--single,
:root[data-theme="dark"] .th-sp-showall,
:root[data-theme="dark"] .th-sp-fold,
:root[data-theme="dark"] .th-sp-course,
:root[data-theme="dark"] .th-topic,
:root[data-theme="dark"] .th-cd-proc-num,
:root[data-theme="dark"] .th-pos-nav,
:root[data-theme="dark"] .th-no-result,
:root[data-theme="dark"] .tc-skeleton,
:root[data-theme="dark"] .tc-empty,
:root[data-theme="dark"] .tc-pagination .pagination-wrap li {
    background: var(--th-dk-card) !important;
    border-color: var(--th-dk-line);
}

:root[data-theme="dark"] .th-hr-forwho,
:root[data-theme="dark"] .th-sp-shift--joined {
    background: rgba(22, 43, 49, .85);
    border-color: var(--th-dk-line);
}

:root[data-theme="dark"] .th-hr-forwho li {
    background: var(--th-dk-card-2);
    border-color: #2f5a52;
    color: var(--th-dk-text);
}

:root[data-theme="dark"] .th-sp-shift-from {
    background: var(--th-dk-card-2);
}

:root[data-theme="dark"] .th-sp-shift-from > i {
    background: #4a2c17;
    color: #ffb27a;
}

:root[data-theme="dark"] .th-sp-shift-arrow {
    background: linear-gradient(90deg, var(--th-dk-card-2) 50%, var(--th-dk-card) 50%);
}

:root[data-theme="dark"] .th-sp-shift-arrow i {
    background: var(--th-dk-card);
}

:root[data-theme="dark"] .th-sp-shift-to > i,
:root[data-theme="dark"] .th-step-num,
:root[data-theme="dark"] .th-cd-module[open] .th-cd-num {
    background: #1d7487;
}

:root[data-theme="dark"] .th-sp-plan.is-best {
    background: #241a12 !important;
}

:root[data-theme="dark"] .th-cd-module.is-final {
    border-color: #6b4423;
    background: linear-gradient(180deg, #2a1d12 0%, var(--th-dk-card) 100%);
}

:root[data-theme="dark"] .th-sp-plan-foot,
:root[data-theme="dark"] .th-sp-rows li,
:root[data-theme="dark"] .th-syllabus li {
    border-color: var(--th-dk-line);
}

:root[data-theme="dark"] .th-sp-fit-note {
    background: #153a42;
    color: var(--th-dk-head);
}

:root[data-theme="dark"] .th-sp-nudge {
    background: #3a2616;
    color: #ffc79e !important;
}

:root[data-theme="dark"] .th-cd-proc li:not(:last-child)::before {
    background: var(--th-dk-line);
}

/* ---------- Teks isi dengan warna gelap tertanam ---------- */
:root[data-theme="dark"] .th-hr-story dd,
:root[data-theme="dark"] .th-alumni-org,
:root[data-theme="dark"] .th-prose,
:root[data-theme="dark"] .th-sp-req li,
:root[data-theme="dark"] .th-sp-plan-list,
:root[data-theme="dark"] .th-syllabus li,
:root[data-theme="dark"] .th-faq details p,
:root[data-theme="dark"] .th-cd-proc p,
:root[data-theme="dark"] .th-sp-pains li {
    color: #c9d7db !important;
}

:root[data-theme="dark"] .th-hr-kicker,
:root[data-theme="dark"] .th-sp-kicker,
:root[data-theme="dark"] .th-hr-alumni-title,
:root[data-theme="dark"] .th-pos-count em {
    color: #ff9f5c;
}

:root[data-theme="dark"] .th-eyebrow {
    color: #ffc79e;
}

:root[data-theme="dark"] .th-hr-story mark,
:root[data-theme="dark"] .th-hr-result mark {
    background: linear-gradient(transparent 58%, rgba(232, 101, 10, .45) 58%);
}

/* ---------- Form & tombol ---------- */
:root[data-theme="dark"] .th-pos-select select,
:root[data-theme="dark"] .th-search input,
:root[data-theme="dark"] .th-picker-search input,
:root[data-theme="dark"] .th-chip,
:root[data-theme="dark"] .tc-search {
    border-color: #335760;
    background: var(--th-dk-card);
    color: var(--th-dk-text);
}

:root[data-theme="dark"] .th-btn--outline {
    background: transparent;
    border-color: var(--th-dk-link);
    color: var(--th-dk-link) !important;
}

:root[data-theme="dark"] .th-btn--outline:hover {
    background: var(--th-dk-link);
    color: #08262c !important;
}

/* ---------- Tombol ganti tema di header ---------- */
.th-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid #d6e3e6;
    border-radius: 50%;
    background: transparent;
    color: #094e5d;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.th-theme-toggle:hover {
    border-color: #094e5d;
}

.th-theme-toggle .fa-sun,
:root[data-theme="dark"] .th-theme-toggle .fa-moon {
    display: none;
}

:root[data-theme="dark"] .th-theme-toggle .fa-sun {
    display: inline-block;
}

:root[data-theme="dark"] .th-theme-toggle {
    border-color: #335760;
    color: #ffd27a;
}

.th-header.is-overlay:not(.is-solid):not(.is-menu-open) .th-theme-toggle {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* elemen berlatar putih tetap memakai teks gelap */
:root[data-theme="dark"] .th-btn--white,
:root[data-theme="dark"] .th-pos-badge,
:root[data-theme="dark"] .th-badge {
    color: #063743 !important;
}

/* judul & teks tebal yang memakai --th-primary-dark sebagai warna huruf (token itu juga dipakai latar hero, jadi tidak diubah) */
:root[data-theme="dark"] .tc-count b,
:root[data-theme="dark"] .tc-empty h2,
:root[data-theme="dark"] .tc-finder-text b,
:root[data-theme="dark"] .tc-pagination .pagination-wrap li a,
:root[data-theme="dark"] .th-alumni-text b,
:root[data-theme="dark"] .th-benefit h3,
:root[data-theme="dark"] .th-card-title,
:root[data-theme="dark"] .th-faq summary,
:root[data-theme="dark"] .th-finder-title,
:root[data-theme="dark"] .th-hr-forwho li,
:root[data-theme="dark"] .th-hr-h2,
:root[data-theme="dark"] .th-hr-result,
:root[data-theme="dark"] .th-no-result h2,
:root[data-theme="dark"] .th-pd-h2,
:root[data-theme="dark"] .th-pd-h3,
:root[data-theme="dark"] .th-pd-notfound h1,
:root[data-theme="dark"] .th-picker-name b,
:root[data-theme="dark"] .th-pos-name,
:root[data-theme="dark"] .th-section-title,
:root[data-theme="dark"] .th-sp-course-body b,
:root[data-theme="dark"] .th-sp-fit-note,
:root[data-theme="dark"] .th-sp-h2,
:root[data-theme="dark"] .th-sp-hook b,
:root[data-theme="dark"] .th-sp-plan-name,
:root[data-theme="dark"] .th-sp-price strong,
:root[data-theme="dark"] .th-sp-rows-price,
:root[data-theme="dark"] .th-sp-shift-to,
:root[data-theme="dark"] .th-step-item h3,
:root[data-theme="dark"] .th-syllabus li.is-group,
:root[data-theme="dark"] .th-topic-name,
:root[data-theme="dark"] .th-why-lead,
:root[data-theme="dark"] .th-why-step h3 {
    color: var(--th-dk-head) !important;
}

:root[data-theme="dark"] .th-cd-num,
:root[data-theme="dark"] .th-topic-caret,
:root[data-theme="dark"] .th-sp-fold summary,
:root[data-theme="dark"] .th-sp-fit,
:root[data-theme="dark"] .th-topic-num,
:root[data-theme="dark"] .th-sp-course-for,
:root[data-theme="dark"] .th-card-for b,
:root[data-theme="dark"] .th-sp-crumb a {
    color: var(--th-dk-link) !important;
}

:root[data-theme="dark"] .th-sp-plan.is-best .th-sp-fit {
    color: #ffb27a !important;
}

/* teks aksen oranye di latar gelap: dibuat lebih terang supaya kontras >= 4.5 */
:root[data-theme="dark"] .th-card-title small,
:root[data-theme="dark"] .th-pos-name small,
:root[data-theme="dark"] .th-card-cta,
:root[data-theme="dark"] .th-card-count em,
:root[data-theme="dark"] .th-sp-course-num,
:root[data-theme="dark"] .th-sp-save,
:root[data-theme="dark"] .th-pos-cta {
    color: #ffa86b !important;
}

:root[data-theme="dark"] .th-sp-badge {
    background: #c2510a;
}

/* ==========================================================================
   Harmonisasi dark mode (revisi 2026-10-18 malam): hero, section, footer satu keluarga warna,
   transisi antar section halus, tanpa kotak putih mencolok.
   ========================================================================== */
/* hero halaman dalam & home: sedikit lebih gelap supaya menyambung ke section berikutnya */
:root[data-theme="dark"] .th-sp-hero,
:root[data-theme="dark"] .th-page-hero,
:root[data-theme="dark"] .tc-hero {
    /* sama untuk semua hero halaman dalam: gradasi teal gelap + cahaya oranye tipis (pola kotak tetap dari ::after) */
    background:
        radial-gradient(circle at 100% 0, rgba(255, 178, 122, .12), transparent 42%),
        linear-gradient(135deg, #0b3540 0%, #0a2a32 100%);
}

/* footer & area di bawahnya: gelap, sedikit lebih pekat dari latar halaman */
:root[data-theme="dark"],
:root[data-theme="dark"] .th-footer {
    background: #0a171b;
}

:root[data-theme="dark"] .th-footer {
    border-top: 1px solid #1d343b;
}

/* section bergantian: beda sangat tipis, dipisah garis halus */
:root[data-theme="dark"] .th-section--soft {
    background: var(--th-dk-bg-2);
}

:root[data-theme="dark"] .th-hr-alumni,
:root[data-theme="dark"] .th-trusted {
    background: var(--th-dk-bg);
}

:root[data-theme="dark"] .th-grad-section {
    background: linear-gradient(180deg, #0f2b33 0%, var(--th-dk-bg) 60%);
}

/* logo klien: alas terang lembut, bukan putih menyala */
:root[data-theme="dark"] .th-trusted .customer-logos img {
    padding: 6px 12px;
    border-radius: 10px;
    background: #dfe8ea;
    opacity: .92;
}

/* kartu Kenapa OJT & bar Hasilnya */
:root[data-theme="dark"] .th-hr-why-card {
    border-color: var(--th-dk-line);
    background: var(--th-dk-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] .th-hr-step3 {
    border-color: var(--th-dk-line);
    background: var(--th-dk-card-2);
}

:root[data-theme="dark"] .th-hr-resultbar {
    background: linear-gradient(110deg, #0b2d36 0%, #0f3b45 100%);
    border: 1px solid #1f4752;
}

/* highlight teks: stripe oranye lebih lembut */
:root[data-theme="dark"] mark,
:root[data-theme="dark"] .th-hr-step3 mark,
:root[data-theme="dark"] .th-hr-why-card mark {
    background: linear-gradient(transparent 60%, rgba(232, 101, 10, .38) 60%);
    color: inherit;
}

/* Sebelum / Setelah */
:root[data-theme="dark"] .th-sp-shift-head span {
    color: var(--th-dk-muted);
}

:root[data-theme="dark"] .th-sp-shift-head span + span {
    color: var(--th-dk-link);
}

:root[data-theme="dark"] .th-sp-shift-to {
    background: var(--th-dk-card);
    color: var(--th-dk-head);
}

/* garis pemisah antar blok di halaman training/posisi */
:root[data-theme="dark"] .th-sp-block {
    border-color: var(--th-dk-line);
}

/* label kicker hijau (For Who / Untuk Siapa) */
:root[data-theme="dark"] .th-hr-forwho-title {
    background: #146b55;
}

/* Oranye brand sedikit lebih pekat di mode gelap: teks putih di tombol/badge oranye kontras >= 4.5
   (teks oranye di latar gelap tetap memakai oranye terang #ffa86b / #ff9f5c di atas) */
:root[data-theme="dark"] {
    --th-accent: #e8650a;
    --th-accent-hover: #f07a26;
}

:root[data-theme="dark"] .th-btn--primary {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}