/* ============================================================
   home-id.css — native Laravel homepage (/id)
   Scoped under .thome to coexist with Bootstrap 5 + tk-card.css.
   Brand: #004aad (primary), #00377f (dark).
   ============================================================ */

.thome {
    font-family: 'DM Sans', 'Raleway', sans-serif;
    color: #1f2937;
}
.thome a { text-decoration: none; }

/* ---------- Hero ---------- */
.thome-hero {
    background: #ffffff url('https://taalenta.id/wp-content/uploads/2025/10/Aksen-1024x576.png') left top/55% auto repeat fixed;
    /* Padding bawah 56px -> 22px (arahan Ega 5 Sep 2026): sejak disklaimer merek dagang
       pindah ke dasar hero, 56px membuatnya mengambang jauh dari tepi, padahal ia justru
       dimaksudkan mepet dan tidak menonjol. Angka ini berpasangan dengan margin atas
       .thome-hero-legal. */
    padding: 48px 0 22px;
    border-bottom: 1px solid #eef2f7;
}
/* Disklaimer merek dagang: melintang selebar container, rata kiri, mepet dasar hero
   (arahan Ega 5 Sep 2026, revisi dari versi rata tengah). Maksudnya memang TIDAK menonjol -
   yang penting ada.

   `max-width: none` disengaja dan itu inti permintaannya: selama viewport masih lebar,
   kalimatnya harus muat satu baris. Versi sebelumnya dibatasi 560px lalu 900px, dan
   keduanya memaksanya patah dua baris padahal ruangnya jelas cukup. Jangan pasang batas
   lebar lagi di sini.

   Jaraknya diatur berpasangan dengan padding bawah .thome-hero (22px): 26px di atas
   memisahkannya dari baris konten, 22px di bawah membuatnya mepet tanpa menempel. Kalau
   salah satunya diubah, timbang lagi yang satunya. */
.thome-hero-legal {
    margin: 26px 0 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: #8a90a0;
    font-weight: 400;
    max-width: none;
    text-align: left;
}
.thome-hero-legal-mark { color: #6b7180; font-weight: 600; }
.thome-hero-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.12;
    color: #004aad;
    margin-bottom: 14px;
}
/* Sub-tagline with #004aad highlighter (stabilo) — white text on brand marker. */
.thome-hero-subtagline {
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    font-weight: 600;
    line-height: 1.9;
    margin: 0 0 22px;
}
.thome-stabilo {
    background: #004aad;
    color: #fff;
    padding: 2px 9px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.thome-hero-mascot {
    max-width: 360px;
    width: 100%;
    height: auto;
}
.thome-hero-card { max-width: 500px; margin: 0 auto; }
@media (min-width: 992px) { .thome-hero-card { margin: 0; } }

/* Hero peek layout: login box (right) with mascot peeking from behind it (left) */
.thome-authwrap { position: relative; max-width: 520px; margin: 0 auto; }
.thome-peek-mascot {
    position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 300px; z-index: 1;
    filter: drop-shadow(0 16px 22px rgba(2, 32, 71, 0.18)); pointer-events: none;
}
.thome-authwrap .thome-hero-card { position: relative; z-index: 2; width: 330px; max-width: 330px; margin: 0; }
@media (min-width: 992px) {
    .thome-authwrap { padding-left: 150px; min-height: 420px; display: flex; align-items: center; justify-content: flex-end; max-width: 480px; margin-left: auto; margin-right: 0; }
}
@media (max-width: 991px) {
    .thome-authwrap { max-width: 500px; }
    .thome-authwrap .thome-hero-card { width: 100%; max-width: 500px; margin: 0 auto; }
}

/* Compact login box (WP-style) */
.thome-login {
    background: #fff;
    border: 1px solid #e8ecf3;
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    text-align: center;
}
.thome-login-head { font-size: 0.98rem; color: #334155; margin: 0 0 16px; }
.thome-login-title { font-size: 1.35rem; font-weight: 500; color: #0f172a; margin: 0 0 16px; line-height: 1.2; }
.thome-login-title strong { color: #004aad; font-weight: 700; }
.thome-login-sub { font-size: 0.85rem; color: #64748b; margin: 16px 0 0; line-height: 1.5; }
.thome-login-social { display: flex; gap: 10px; }
.thome-social-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid #dadce0; border-radius: 999px; padding: 9px 10px;
    font-size: 0.9rem; font-weight: 600; color: #3c4043; background: #fff;
    transition: background 0.12s ease;
}
.thome-social-btn:hover { background: #f8fafc; color: #3c4043; }
.thome-login-or {
    display: flex; align-items: center; text-align: center; gap: 12px;
    margin: 16px 0; color: #94a3b8; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px;
}
.thome-login-or::before, .thome-login-or::after { content: ''; flex: 1; height: 1px; background: #e5e9f0; }
.thome-login-form { display: block; }
.thome-login-form .thome-login-input { width: 100%; display: block; margin: 0 0 10px; }
.thome-login-form .thome-login-btn { width: 100%; display: block; }
.thome-login-input {
    flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 10px 14px; font-size: 0.92rem; color: #1f2937;
}
.thome-login-input:focus { outline: none; border-color: #004aad; box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.12); }
.thome-login-btn {
    background: #004aad; color: #fff; border: none; border-radius: 999px;
    padding: 10px 22px; font-weight: 700; font-size: 0.92rem; white-space: nowrap; cursor: pointer;
    transition: background 0.12s ease;
}
.thome-login-btn:hover { background: #00377f; }
.thome-login-hint { font-size: 0.8rem; color: #64748b; margin: 12px 0 0; }

/* Authed greeting (rotating multilingual welcome + name) */
.thome-greet { margin-bottom: 22px; }
.thome-greet-lang {
    font-size: 0.85rem; font-weight: 600; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
    transition: opacity 0.4s ease;
}
.thome-greet-line {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 700; line-height: 1.15; color: #004aad;
}
.thome-greet-text { transition: opacity 0.4s ease; }
.thome-greet-name { display: block; color: #0f172a; }
.tk-fade { opacity: 0; }
.thome-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 992px) { .thome-hero-cta { justify-content: flex-start; } }

/* ---------- Stats + Journey band ---------- */
.thome-stats {
    background: #f2f4fb;
    padding: 40px 0;
    border-bottom: 1px solid #e7eaf5;
}
.thome-stats__row {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* Shared base counter look — kept for corporate / outro / expert overrides. */
.thome-stat-num {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1;
    color: #004aad;
}

/* Left: title + inviting metaphor */
.thome-stats-left { flex: 1 1 300px; min-width: 280px; }
.thome-journey-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    line-height: 1.2;
    color: #004aad;
    margin: 0 0 14px;
}
.thome-journey-tm { font-size: 0.6em; font-weight: 700; vertical-align: super; }
.thome-journey-icon { margin-right: 7px; font-size: 0.82em; }
.thome-journey-lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
    max-width: 520px;
}

/* Right: horizontal figures (smallest first) + winding path beneath */
.thome-stats-right { flex: 1 1 440px; min-width: 320px; }
.thome-stats__figures {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    text-align: center;
}
.thome-stat { flex: 1 1 0; padding: 0; }
.thome-stat-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.thome-stats__figures .thome-stat-num {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.8vw, 2.3rem);
}
.thome-stat-unit { font-size: 0.85rem; font-weight: 700; color: #64748b; }
.thome-stat-label {
    margin-top: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    line-height: 1.2;
}
.thome-journey-viz { margin-top: 6px; }
.thome-journey-svg { display: block; width: 100%; height: auto; max-height: 96px; overflow: visible; }

@media (max-width: 767.98px) {
    .thome-stats__row { flex-direction: column; align-items: stretch; gap: 18px; }
    /* In column flow, flex-basis maps to HEIGHT — reset so blocks size to content (no giant gaps). */
    .thome-stats-left, .thome-stats-right { flex: 0 0 auto; min-width: 0; }
    .thome-stats-left { text-align: center; }   /* center title + description on mobile */
    .thome-stat-label { white-space: normal; }
}

/* ---------- Generic section ---------- */
.thome-sec { padding: 56px 0; }
.thome-sec-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    text-align: center;
    color: #004aad;
    margin-bottom: 12px;
}
.thome-sec-rule {
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: #004aad;
    margin: 0 auto 32px;
}
/* Count-up number inside a section title (e.g. "N Kelas Sinkronus") — heavier + larger than the text. */
.thome-count { font-weight: 800; font-size: 1.3em; line-height: 1; }
.thome-btn-more {
    display: inline-block;
    background: #004aad;
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    /* Pil, ikut bahasa desain tombol beranda (arahan Ega 5 Sep 2026: "design language untuk
       tombol adalah membulat"). Ini tombol "jalan keluar" bersama - dipakai rubrik blog,
       video, corporate, outro kelas, dan tools sekaligus, jadi satu baris ini yang membuat
       kelimanya seragam. */
    border-radius: 999px;
    transition: background 0.15s ease;
}
.thome-btn-more:hover { background: #00377f; color: #fff; }
/* Ghost variant — white with blue outline (See-all buttons) */
.thome-btn-ghost { background: #fff; color: #004aad; border: 1px solid #004aad; }
.thome-btn-ghost:hover { background: #004aad; color: #fff; }

/* Hero CTA buttons (authed) — explicit states so outline never goes blue-on-blue */
/* Pil penuh, bukan 10px (arahan Ega 5 Sep 2026). Tombol ini bersebelahan langsung dengan
   .thome-herosearch di dalam .thome-hero-cta, dan kotak cari itu pil; dua radius berbeda
   pada satu baris terbaca sebagai kelalaian. Padding vertikal 12px menjaga tingginya tetap
   44px, sama dengan min-height kotak carinya - kalau salah satu diubah, ubah keduanya. */
.thome-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; text-align: center;
    padding: 12px 26px; border-radius: 999px; border: 1px solid transparent;
    transition: background 0.12s ease, color 0.12s ease;
}
.thome-cta-btn--primary { background: #004aad; color: #fff; border-color: #004aad; }
.thome-cta-btn--primary:hover, .thome-cta-btn--primary:focus, .thome-cta-btn--primary:active { background: #00377f; color: #fff; }
.thome-cta-btn--outline { background: #fff; color: #004aad; border-color: #004aad; }
.thome-cta-btn--outline:hover, .thome-cta-btn--outline:focus, .thome-cta-btn--outline:active { background: #004aad; color: #fff; }

/* ---------- Classes ---------- */
.thome-classes { background: #fff; }
/* Section title rendered as the top-left tile of the class grid so it blends in. */
.thome-classes-titletile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 6px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    line-height: 1.12;
    color: #004aad;
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
}
.thome-classes-titletile .thome-count {
    font-size: 2.4em;
    display: block;
    margin-bottom: 2px;
}
.thome-classes-titletile__label { display: block; }
/* Class-only search under the counter label — fills the tile, lands on /kelas?q=. */
.thome-ksearch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    max-width: 330px;
    background: #fff;
    border: 1.5px solid #e2e5ee;
    border-radius: 999px;
    padding: 4px 4px 4px 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.thome-ksearch:focus-within { border-color: #004aad; box-shadow: 0 0 0 4px rgba(0, 74, 173, .10); }
.thome-ksearch__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    color: #334155;
}
.thome-ksearch__input::placeholder { color: #9aa1b1; font-weight: 500; }
.thome-ksearch__input::-webkit-search-cancel-button { cursor: pointer; }
.thome-ksearch__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #004aad;
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.thome-ksearch__btn:hover { background: #003a87; }
.thome-ksearch__btn:focus-visible { outline: 2px solid #004aad; outline-offset: 2px; }

@media (max-width: 520px) {
    /* Single-column grid: render the title like a normal heading, not a tall tile. */
    .thome-classes-titletile { padding: 0 4px 4px; text-align: center; }
    .thome-classes-titletile .thome-count { display: inline; font-size: 1.3em; }
    .thome-classes-titletile__label { display: inline; }
    /* Tile is centred here, so the search bar centres with it and takes the full width.
       width is explicit: auto margins on a column-flex item cancel the stretch and would
       otherwise shrink the bar to its content (~220px), leaving a cramped input. */
    .thome-ksearch { margin: 12px auto 0; max-width: 100%; width: 100%; }
}

/* ---------- Corporate ---------- */
.thome-corporate { background: #f2f4fb; scroll-margin-top: 88px; }
.thome-corp-lead {
    margin: 0 0 20px;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
}
.thome-corp-lead a { color: #004aad; font-weight: 700; }
.thome-corp-stat { margin: 0 0 22px; }
.thome-corp-num {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: 1;
    color: #004aad;
}
.thome-corp-num-label {
    display: block;
    margin-top: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748b;
    text-transform: capitalize;
}
.thome-logo-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px 28px;
}
.thome-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    flex: 0 0 auto;
}
.thome-logo img {
    max-width: 100%;
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- Video ---------- */
.thome-video { background: #fff; }
.thome-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 576px) { .thome-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .thome-video-grid { grid-template-columns: repeat(3, 1fr); } }

/* Experts panel (right of the video grid) */
.thome-expert-panel {
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    background: #ffffff; border: 1px solid #e7eaf5; border-radius: 16px;
    padding: 32px 28px; text-align: center;
}
.thome-expert-num {
    /* display:block ditulis eksplisit walau span ini item flex langsung .thome-expert-panel
       (jadi ter-blockify sendiri). Sengaja dipertahankan sebagai jaring: pembungkus di sekitar
       angka ini sempat ada lalu dicabut lagi 5 Sep 2026, dan tanpa baris ini pencabutan
       serupa berikutnya mengubah line-height tanpa jejak. */
    display: block;
    font-family: 'Raleway', sans-serif; font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: #004aad;
}
.thome-expert-label { display: block; font-weight: 700; font-size: 1.1rem; color: #0f172a; margin-top: 6px; }
.thome-expert-avatars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    margin: 16px 0 4px;
    justify-items: center;
}
.thome-expert-avatar {
    width: 100%; max-width: 40px; aspect-ratio: 1 / 1; border-radius: 50%;
    overflow: hidden; background: #dbe2f0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.thome-expert-avatar img { width: 100%; height: 100%; object-fit: cover; }
.thome-expert-more {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 40px; aspect-ratio: 1 / 1;
    color: #004aad; font-weight: 700; font-size: clamp(22px, 4.5vw, 32px); line-height: 1;
}

/* Mobile (<992px): panel on top (order handled in markup), 3 videos, single avatar row (5 + "+") */
@media (max-width: 991.98px) {
    .thome-video-card:nth-child(n+4) { display: none; }
    .thome-expert-avatar:nth-child(n+6) { display: none; }
}
.thome-expert-desc { font-size: 0.94rem; color: #475569; line-height: 1.6; margin: 14px 0 22px; }
.thome-expert-cta { display: flex; flex-direction: column; gap: 10px; }
.thome-expert-cta .thome-btn-more { display: block; text-align: center; }
.thome-video-card {
    display: block;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    overflow: hidden;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.thome-video-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.thome-video-thumb { position: relative; aspect-ratio: 16 / 9; background: #0f172a; }
.thome-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thome-video-dur {
    position: absolute; right: 8px; bottom: 8px;
    background: rgba(0, 0, 0, 0.8); color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
}
.thome-video-play {
    position: absolute; inset: 0; margin: auto;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #ff0000; color: #fff; font-size: 18px;
    opacity: 0; transition: opacity 0.15s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.thome-video-card:hover .thome-video-play { opacity: 1; }
.thome-video-body { padding: 14px 16px 16px; }
.thome-video-title {
    font-weight: 700; font-size: 0.95rem; line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thome-video-cat { font-size: 0.78rem; color: #64748b; font-weight: 600; }
.thome-yt { color: #ff0000; margin-right: 5px; }
.thome-video-channel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px 16px;
}
.thome-channel-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }

/* ---------- Blog ---------- */
.thome-blog { background: #ffffff; }
.thome-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.thome-blog-card {
    display: block; background: #fff;
    border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden;
    color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.thome-blog-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.thome-blog-thumb { aspect-ratio: 16 / 9; background: #e2e8f0; }
.thome-blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thome-blog-thumb-ph { width: 100%; height: 100%; background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.thome-blog-body { padding: 16px 18px 18px; }
.thome-blog-title {
    font-weight: 700; font-size: 1rem; line-height: 1.4; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.thome-blog-meta { font-size: 0.8rem; color: #64748b; margin: 0; }

/* ---------- Quote ---------- */
.thome-quote {
    background: #f2f4fb;
    color: #1f2937;
    padding: 56px 0;
    text-align: center;
}
.thome-quote blockquote {
    max-width: 760px; margin: 0 auto;
    font-family: 'Raleway', sans-serif;
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    font-style: italic; font-weight: 600; line-height: 1.5;
}
.thome-quote cite {
    display: block; margin-top: 18px;
    font-size: 1rem; font-style: normal; font-weight: 700;
    color: #64748b;
}

/* ---------- Featured etalase — [counter] [terakhir dilihat] [rekomendasi x2] ---------- */
.thome-featured {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;   /* counter | lead | recos(2) */
    align-items: stretch;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto 20px;
}
/* Counter reuses the titletile block look, sitting to the left of the lead card. */
.thome-featured__counter { padding: 8px 6px; }
.thome-featured__group { display: flex; flex-direction: column; min-width: 0; }
/* Lead card fills the row height so it isn't short (cingkrang) next to taller reco cards. */
.thome-featured__group--lead .tk-card { flex: 1 1 auto; }
/* Group header — grey, thin underline spanning the whole group (lead box / both recos). */
.thome-featured__label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e5ee;
}
.thome-featured__recos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1 1 auto; grid-auto-rows: 1fr; }
@media (max-width: 768px) {
    .thome-featured { grid-template-columns: 1fr 1fr; }
    .thome-featured__group--reco { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .thome-featured { grid-template-columns: 1fr; }
    .thome-featured__recos { grid-template-columns: 1fr; }
}

/* ---------- Grid header — same rule as .thome-featured__label, plus the sort control ---- */
.thome-restbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1320px;
    margin: 0 auto 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e5ee;
}
.thome-restbar__label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}
.thome-sortpick { display: inline-flex; align-items: center; gap: 8px; }
.thome-sortpick__lbl { color: #9aa1b1; font-size: 13px; font-weight: 500; }
.thome-sortpick__sel {
    appearance: none; -webkit-appearance: none;
    /* chevron baked in so the control matches in every browser */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center / 12px 12px;
    border: 1px solid #e2e5ee;
    border-radius: 8px;
    color: #334155;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 5px 26px 5px 10px;
    cursor: pointer;
    transition: border-color .15s ease;
}
.thome-sortpick__sel:hover { border-color: #c7cddd; }
.thome-sortpick__sel:focus-visible { outline: 2px solid #004aad; outline-offset: 1px; }
@media (max-width: 480px) {
    .thome-restbar { flex-wrap: wrap; row-gap: 8px; }
    .thome-sortpick__lbl { display: none; }
}

/* ---------- Classes outro (Kelas Terlaksana counter + routing message) ---------- */
.thome-classes-outro {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: #fff;
    border: 1px solid #e7eaf5;
    border-radius: 16px;
    padding: 26px 32px;
}
/* Inside the class grid: no extra top margin (grid gap handles spacing). */
.thome-classes .enh-grid > .thome-classes-outro { margin-top: 0; }
/* When filling the trailing empty cells of the last row, match the card height.
   Stay horizontal (left→right) while there is room; centered within the tile. */
.thome-classes-outro.is-filling {
    justify-content: center;
    gap: 24px;
    padding: 24px 28px;
}
.thome-classes-outro.is-filling .thome-classes-outro__count { min-width: 0; flex: 0 0 auto; }
.thome-classes-outro.is-filling .thome-classes-outro__divider { align-self: center; height: 72px; }
/* Only stack when the filled area is too narrow (e.g. a single empty cell). */
.thome-classes-outro.is-narrow {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
}
.thome-classes-outro.is-narrow .thome-classes-outro__divider { display: none; }
.thome-classes-outro.is-narrow .thome-classes-outro__text { flex: 0 0 auto; }
.thome-classes-outro__count {
    flex: 0 0 auto;
    text-align: center;
    min-width: 132px;
}
.thome-classes-outro__count .thome-stat-num {
    font-size: clamp(2.2rem, 5.5vw, 3.2rem);
    font-weight: 700;
}
.thome-classes-outro__count-label {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}
.thome-classes-outro__divider {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: #d8def0;
}
.thome-classes-outro__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
}
.thome-classes-outro__text a { color: #004aad; font-weight: 700; }
.thome-classes-outro__text a:hover { text-decoration: underline; }
.thome-classes-outro__cta {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}
/* Right column: number stacked above the ghost CTA. */
.thome-classes-outro__aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
@media (max-width: 560px) {
    .thome-classes-outro { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; }
    .thome-classes-outro__divider { width: 56px; height: 1px; align-self: center; }
    .thome-classes-outro__text { text-align: center; }
    .thome-classes-outro__cta { margin-top: 4px; }
}

/* ============ Mobile tuning (homepage) ============ */

/* Corporate: center blurb / counter / CTA when the columns stack */
@media (max-width: 991.98px) {
    .thome-corporate .col-lg-4 { text-align: center; }
    .thome-corp-lead { text-align: center; }
}

@media (max-width: 767.98px) {
    /* Live-class cards: icon shrinks to the height of its 3 info rows (date / code+batch / mentor) */
    .thome-classes .tk-card--grid > div:first-child {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f8f9fa;   /* keep the light panel behind the icon + info pills */
        padding: 12px;
    }
    .thome-classes .tk-card--grid .tk-card__img,
    .thome-classes .tk-card--grid .tk-card__img-placeholder {
        width: 80px;
        height: 80px;
        flex: 0 0 auto;
        object-fit: contain;
        border-radius: 8px;
    }
    .thome-classes .tk-card--grid .tk-card__badges--overlay {
        position: static;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-end;   /* keep info right-aligned (as in the original overlay) */
        gap: 5px;
    }

    /* Client logo wall: compress (smaller logos -> more per row, less vertical space) */
    .thome-logo-wall { gap: 16px 22px; }
    .thome-logo { height: 38px; }
    .thome-logo img { max-height: 30px; }

    /* Blog: horizontal cards (image left, title/date/category right) to save vertical space */
    .thome-blog-grid { grid-template-columns: 1fr; gap: 14px; }
    .thome-blog-card { display: flex; align-items: stretch; }
    .thome-blog-thumb { flex: 0 0 38%; max-width: 150px; aspect-ratio: auto; }
    .thome-blog-body { flex: 1 1 auto; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
    .thome-blog-title { font-size: 0.95rem; margin: 0 0 6px; }
}


/* ---------- Video modal player (in-page, mirrors LP clip modal) ---------- */
.thome-video-card { cursor: pointer; }
.thome-video-modal[hidden] { display: none; }
.thome-video-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.thome-video-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 12, 24, 0.82); }
.thome-video-modal-box { position: relative; width: 100%; max-width: 900px; }
.thome-video-modal-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); }
.thome-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.thome-video-modal-close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #fff; color: #1a2233; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: background 0.15s, color 0.15s, transform 0.15s; z-index: 2; }
.thome-video-modal-close:hover { background: #004aad; color: #fff; transform: scale(1.06); }
.thome-video-modal-close:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
.thome-video-modal-cap { color: #eaf0fb; font-size: 14px; font-weight: 600; text-align: center; margin: 12px 4px 0; }
body.thome-video-lock { overflow: hidden; }
@media (max-width: 600px) {
    .thome-video-modal { padding: 14px; }
    .thome-video-modal-close { top: -12px; right: -6px; width: 38px; height: 38px; }
}

/* ---------- Tools (6 sorotan, tepat di atas rubrik blog) ----------
   Latarnya putih seperti rubrik blog di bawahnya, jadi batas antar keduanya
   dibuat oleh garis rambut ini, bukan oleh beda warna. Quote di atasnya sudah
   #f2f4fb, jadi sisi atas tidak perlu garis apa pun. */
.thome-tools { background: #fff; border-bottom: 1px solid #eef2f7; }

/* Judul di kiri, alat di kanan - proporsi mengikuti .thome-featured di rubrik
   kelas (blok pencacah sekitar seperempat lebar, isinya sisanya). align-items
   start supaya blok judul tidak ikut meninggi mengikuti dua baris kartu. */
/* align-items: center, bukan start (arahan Ega 3 Sep 2026 sesi 2).
   Sejak CTA pindah ke blok judul, kolom kiri (angka + judul + lead + tombol) jadi
   LEBIH TINGGI daripada kisi kanan, jadi meratakan atas membuat kisinya menggantung.
   Center menyeimbangkan keduanya terhadap baris yang sama.
   Aman di layar sempit: di bawah 991px baris ini jadi satu kolom, tiap item punya
   row track sendiri setinggi isinya, sehingga center tidak mengubah apa pun.
   JANGAN samakan dengan .tt-tool di halaman alat: yang itu WAJIB align-items:start
   karena position:sticky di kolomnya butuh tinggi track penuh. */
.thome-tools-row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
}
.thome-tools__judul { padding: 8px 6px; }
.thome-tools-lead {
    margin: 16px 0 0;
    color: #64748b;
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.6;
}
.thome-tools-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.thome-tool {
    display: flex; align-items: center; gap: 14px;
    background: #fff; color: inherit;
    border: 1px solid #eef2f7; border-radius: 14px; padding: 16px 18px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.thome-tool:hover {
    color: inherit; border-color: #d8e2f3;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); transform: translateY(-2px);
}
.thome-tool:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
.thome-tool-ikon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: #eef3fc; color: #004aad; font-size: 22px; line-height: 1;
}
.thome-tool-teks { min-width: 0; }
.thome-tool-name {
    display: block; font-weight: 700; font-size: 0.98rem; line-height: 1.35; color: #1f2937;
}
.thome-tool-cat {
    display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: #64748b;
}

/* CTA ke hub, pindah ke blok judul 3 Sep 2026 sesi 2 (dulu kotak ke-6 di kisi).
   font-size dan font-family DITULIS ULANG dengan sengaja: induknya
   .thome-classes-titletile memasang Raleway 700 pada clamp(1.5rem, 2.2vw, 2.05rem)
   untuk angka besarnya, dan .thome-btn-more tidak punya font-size sendiri. Tanpa dua
   baris ini tombolnya terwarisi ~2rem dan merusak kolom kiri. .thome-tools-lead di
   atasnya menulis ulang karena alasan yang sama.
   align-self: tanpa ini <a> merentang selebar kolom, karena .thome-classes-titletile
   adalah flex column tanpa align-items sehingga bawaannya stretch. */
.thome-tools__cta {
    align-self: flex-start;
    margin-top: 18px;
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 11px 22px;
}

/* TIDAK DIPAKAI sejak 3 Sep 2026 sesi 2: CTA hub pindah ke blok judul sebagai
   .thome-tools__cta, jadi markup .thome-tool--semua sudah tidak dipancarkan lagi.
   Aturan di bawah SENGAJA tidak dihapus supaya kalau suatu saat CTA dikembalikan
   ke dalam kisi, angka kontras yang sudah dihitung ini tidak perlu dihitung ulang.
   Kalau Anda menambah kartu ke kisi, kartu itu TIDAK akan memakai gaya ini.

   Kotak terakhir di kisi: jalan keluar ke hub, bukan alat.
   Biru penuh sejak diam (arahan Ega 3 Sep 2026), bukan hanya saat disentuh - lima
   kartu putih di sekelilingnya membuat satu blok biru terbaca sebagai tindakan tanpa
   perlu disentuh dulu, dan di layar sentuh memang tidak ada keadaan "disentuh".
   Semua warna teks ditulis ulang di sini karena .thome-tool-name dan .thome-tool-cat
   memasang warnanya sendiri.
   Kontras diperiksa, bukan dikira: putih di #004aad = 8,1:1; baris kedua putih 72%
   = 5,4:1 (ambang teks normal 4,5:1, dan 0,8rem masih terhitung teks normal).
   Kalau warnanya diubah, hitung ulang - kotak ini satu-satunya teks putih di rubrik. */
.thome-tool--semua { background: #004aad; border-color: #004aad; }
.thome-tool--semua .thome-tool-ikon {
    background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 19px;
}
.thome-tool--semua .thome-tool-name { color: #fff; }
.thome-tool--semua .thome-tool-cat { color: rgba(255, 255, 255, 0.72); font-weight: 500; }
/* Hover memakai #00377f yang sama dengan .thome-btn-more:hover - tombol biru di
   beranda ini menggelap ke satu warna, bukan ke selera tiap rubrik. */
.thome-tool--semua:hover { background: #00377f; border-color: #00377f; }
.thome-tool--semua:hover .thome-tool-ikon { background: #fff; color: #004aad; }

/* Blok judul menumpuk di atas alat. Ambangnya 991px, sama dengan tempat kartu
   kelas berhenti muat empat kolom - dua rubrik yang bersebelahan sebaiknya patah
   di titik yang sama, kalau tidak halaman terlihat goyah saat jendela dikecilkan. */
@media (max-width: 991px) {
    .thome-tools-row { grid-template-columns: 1fr; gap: 24px; }
    .thome-tools-grid { grid-template-columns: repeat(2, 1fr); }
    /* Ikut pola .thome-classes-titletile di lebar sempit: angka dan label sebaris,
       rata tengah. Tanpa ini angka 2,4em berdiri sendirian di atas satu baris teks
       dan terlihat seperti kesalahan render. */
    .thome-tools__judul { padding: 0 4px 4px; text-align: center; }
    .thome-tools__judul .thome-count { display: inline; font-size: 1.3em; }
    .thome-tools__judul .thome-classes-titletile__label { display: inline; }
    .thome-tools-lead { margin-top: 10px; max-width: 620px; margin-left: auto; margin-right: auto; }
    /* Blok judul rata tengah di sini, jadi tombolnya ikut ke tengah. Tanpa ini ia
       tetap menempel kiri sementara teks di atasnya rata tengah. */
    .thome-tools__cta { align-self: center; margin-top: 14px; }
}
@media (max-width: 575px) {
    .thome-tools-grid { grid-template-columns: 1fr; gap: 12px; }
    .thome-tool { padding: 14px 16px; gap: 12px; }
    .thome-tool-ikon { width: 42px; height: 42px; font-size: 20px; }
}

/* ---------- Karakter menyala satu per satu (.thome-type) — pengganti count-up ---------- */
/* Riwayat, supaya tidak berputar balik. Semuanya 5 Sep 2026:
   1. count-up disapu dari sini karena membuat pengunjung membaca angka yang SALAH sambil
      menunggu;
   2. penggantinya pudar-masuk + naik seluruh blok -> Ega: "ga kerasa" (0,22 s lalu 0,52 s
      sama saja tidak terbaca sebagai gerak pada layar yang sedang digulir);
   3. lalu mengetik 200 ms/karakter dengan kursor berkedip -> Ega: "jangan typing banget";
   4. SEKARANG: tiap karakter pudar masuk sendiri-sendiri, jeda 500 ms, TANPA kursor.
   Jangan hidupkan lagi kursornya, dan jangan kembalikan gerak ke seluruh blok.

   PENTING: potongan .thome-type__c DIBUAT JS, tidak pernah ada di HTML server. Itulah kenapa
   opacity:0 di sini aman - tanpa JS elemen ini tidak ada dan angka utuh tetap terbaca.
   JANGAN memindahkan opacity:0 ke .thome-type sendiri: itu mengulang jebakan lama, blok
   hilang selamanya bagi pengunjung tanpa JS, tanpa satu pun galat. */
.thome-type__c {
    opacity: 0;
    /* .28s sengaja lebih panjang dari setengah jeda 500 ms: karakter sebelumnya masih
       mengendap saat berikutnya mulai, jadi terbaca sebagai gelombang lembut, bukan
       kedipan satu-satu. Transisi ini juga yang membedakannya dari efek mesin ketik. */
    transition: opacity .28s ease-out;
}
.thome-type__c.is-on { opacity: 1; }
/* Salinan utuh khusus pembaca layar; potongan per karakter di-aria-hidden oleh JS supaya
   angkanya tidak dieja huruf per huruf.
   user-select:none WAJIB. Tanpa itu salinan ini ikut terseleksi dan menyalin angka
   menghasilkan "389+389+" - dobel, karena teksnya memang ada dua kali di DOM. */
.thome-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
    -webkit-user-select: none;
    user-select: none;
}
/* Jaring pengaman kedua. JS sudah tidak memotong teks sama sekali saat gerak diminta
   dikurangi, tapi kalau potongannya sempat terpasang angkanya tetap wajib terbaca utuh. */
@media (prefers-reduced-motion: reduce) {
    .thome-type__c { opacity: 1; transition: none; }
}

/* ---------- Field pencarian global di hero pasca-login ---------- */
/* Menggantikan tombol "Cari Kelas" (arahan Ega 5 Sep 2026). Duduk sebaris dengan
   .thome-cta-btn--primary di dalam .thome-hero-cta yang flex + wrap.

   Pil penuh dengan garis tepi TIPIS DAN NETRAL, bukan garis biru tebal (arahan Ega 5 Sep 2026,
   revisi dari versi pertama yang radiusnya 10px dan tepinya #004aad). Warna biru disimpan
   untuk tombol kacanya saja; kotaknya sendiri diam supaya tidak berebut perhatian dengan
   tombol Journey di sebelahnya.

   min-height 44px menyamakan tingginya dengan .thome-cta-btn (padding 12px + baris ~19px +
   border 1px). Kalau padding tombol itu diubah, ubah angka ini juga - tidak ada yang
   menghubungkan keduanya selain baris komentar ini. */
.thome-herosearch {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 300px;
    max-width: 420px;
    min-height: 44px;
    padding: 3px 4px 3px 20px;
    background: #fff;
    border: 1.5px solid #e2e5ee;
    border-radius: 999px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.thome-herosearch:focus-within { border-color: #004aad; }
.thome-herosearch:focus-within { box-shadow: 0 0 0 4px rgba(0, 74, 173, .12); }
.thome-herosearch__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2937;
}
.thome-herosearch__input::placeholder { color: #9aa1b1; font-weight: 500; }
.thome-herosearch__input::-webkit-search-cancel-button { cursor: pointer; }
.thome-herosearch__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    /* Bulat penuh, sama dengan .thome-ksearch__btn di kotak cari kelas. Satu-satunya
       tombol biru di dalam kotak yang tepinya netral, jadi bentuknya yang menandai
       "ini yang diklik". */
    border-radius: 50%;
    background: #004aad;
    color: #fff;
    cursor: pointer;
    transition: background .12s ease;
}
.thome-herosearch__btn:hover { background: #00377f; }
.thome-herosearch__btn:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
/* Di layar sempit .thome-hero-cta membungkus dan rata tengah; kotaknya ambil satu baris
   penuh supaya tidak menyisa sempit di sebelah tombol Journey. */
@media (max-width: 575px) {
    .thome-herosearch { flex: 1 1 100%; max-width: none; }
}

/* Kotak cari di hero TAMU (belum masuk), di bawah baris stabilo. Bentuknya sama persis
   dengan yang di hero sudah-masuk; yang beda cuma perataan dan jaraknya.

   Di hero sudah-masuk kotak ini jadi item flex .thome-hero-cta, jadi `flex:1 1 300px`
   miliknya yang bekerja. Di sini induknya BUKAN flex, jadi yang menentukan lebar adalah
   max-width 420px milik kelas dasar, dan margin auto yang menengahkannya - kolom hero tamu
   memakai `text-center text-lg-start`, jadi kotaknya harus ikut: tengah di layar sempit,
   kiri mulai lg. */
.thome-herosearch--hero { margin: 0 auto 8px; }
@media (min-width: 992px) {
    .thome-herosearch--hero { margin-left: 0; margin-right: 0; }
}