@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&display=swap');
.tk-card{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;position:relative}
.tk-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10);transform:translateY(-2px)}
.tk-card__img{width:100%;display:block;object-fit:cover;background:#f8f9fa}
.tk-card__img-placeholder{width:100%;display:flex;align-items:center;justify-content:center;background:#f0f4ff}
.tk-card__img-placeholder span{font-size:36px;font-weight:700;color:#004aad;opacity:.3}
.tk-card__badges{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tk-card__badges--overlay{position:absolute;top:8px;right:8px;flex-direction:column;align-items:flex-end}
.tk-card__badges--overlay .tk-card__badge-row{display:flex;gap:4px}
.tk-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;line-height:1;white-space:nowrap}
.tk-badge--date{background:#f0f4ff;color:#004aad}
.tk-badge--code{background:#004aad;color:#fff;letter-spacing:.5px}
.tk-badge--batch{background:#e8f5e9;color:#2e7d32}
.tk-badge--batch-archive{background:#f5f5f5;color:#888}
.tk-badge--active{background:#e8f5e9;color:#2e7d32}
.tk-badge--flag-my{background:#fff3e0;color:#e65100}
.tk-badge--flag-event{background:#fce4ec;color:#c62828}
.tk-card__body{padding:12px;flex:1;display:flex;flex-direction:column}
.tk-card__title{margin:0 0 4px;font-size:15px;font-weight:600;line-height:1.35;color:#1a1a1a}
.tk-card__subtitle{margin:0 0 4px;font-size:13px;color:#444;line-height:1.4}
.tk-card__mentor{margin:0;font-size:12px;color:#666;line-height:1.3}
.tk-card__mentor-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-top:6px}
.tk-card__mentor-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0;background:#fff;flex:0 0 auto}
/* Every expert in charge, not just the lead — tandem classes show the whole line-up.
   row-reverse keeps the FIRST mentor (sort_order) pinned to the card's right edge, so a
   solo class looks exactly as it did before and co-experts fan out to the left. */
.tk-card__mentor-stack{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center}
.tk-card__mentor-stack .tk-card__mentor-photo{position:relative;z-index:1}
.tk-card__mentor-stack .tk-card__mentor-photo+.tk-card__mentor-photo{margin-right:-12px}
.tk-card__mentor-stack .tk-card__mentor-photo:first-child{z-index:3}
.tk-card__mentor-stack .tk-card__mentor-photo:nth-child(2){z-index:2}
/* No photo on file (1 of 86 instructors, Aug 2026) — initial keeps the tandem complete. */
.tk-card__mentor-photo--initial{display:flex;align-items:center;justify-content:center;background:#eaf0fb;color:#004aad;font-size:15px;font-weight:700;line-height:1}
/* 4th expert onwards collapse into one chip. */
.tk-card__mentor-more{z-index:0;display:flex;align-items:center;justify-content:center;background:#004aad;color:#fff;font-size:12px;font-weight:700;line-height:1}
.tk-card__mentor-name{font-size:10px;color:#333;line-height:1.2;text-align:right;background:rgba(255,255,255,.92);padding:2px 8px;border-radius:3px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-card__date{font-size:12px;color:#888;margin:2px 0 0}
.tk-btn{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:14px;padding:12px;transition:background .2s,color .2s;border:none}
.tk-btn--primary{background:#004aad;color:#fff}
.tk-card:hover .tk-btn--primary{background:#003080}
.tk-btn--secondary{background:#f0f4ff;color:#004aad}
.tk-card:hover .tk-btn--secondary{background:#e0ecff}
.tk-btn--outline{background:#fff;color:#004aad;border:1px solid #004aad}
.tk-card:hover .tk-btn--outline{background:#f0f4ff}
.tk-card--grid > div:first-child{overflow:hidden;border-radius:10px;margin:8px}
.tk-card--grid .tk-card__img{height:140px;object-fit:contain;object-position:left center;border-radius:0;margin:0;width:100%}
.tk-card--grid .tk-card__img-placeholder{height:140px}
.tk-card--grid .tk-card__body{padding:6px 12px 10px}
.tk-card--grid .tk-card__title{font-size:14px}
.tk-card--grid .tk-btn{font-size:14px;padding:12px;border-radius:0 0 10px 10px}
.tk-card--compact{border:1px solid #e0e0e0;border-radius:10px}
.tk-card--compact .tk-card__layout{display:flex;gap:10px;align-items:flex-start;padding:10px;flex:1}
.tk-card--compact .tk-card__img{width:80px;height:80px;border-radius:10%;flex-shrink:0}
.tk-card--compact .tk-card__content{flex:1;min-width:0}
.tk-card--compact .tk-card__badges{margin-bottom:3px}
.tk-card--compact .tk-badge--code{font-size:9px;padding:2px 6px;border-radius:2px}
.tk-card--compact .tk-card__title{font-size:14px}
.tk-card--compact .tk-card__mentor{font-size:11px}
.tk-card--compact .tk-btn{font-size:13px;padding:10px 16px;border:none;border-radius:0 0 10px 10px}
.tk-card--mini > div:first-child{overflow:hidden;border-radius:10px;margin:8px}
.tk-card--mini .tk-card__img{height:140px;object-fit:contain;object-position:left center;border-radius:0;margin:0;width:100%}
.tk-card--mini .tk-card__img-placeholder{height:140px}
.tk-card--mini .tk-card__title{font-size:14px}
.tk-card--mini .tk-card__body{padding:6px 12px 10px}
.tk-card--mini .tk-btn{font-size:14px;padding:12px;border-radius:0 0 10px 10px}
.tk-grid-search{grid-template-columns:repeat(2,1fr)!important}
.tk-grid-search{grid-template-columns:1fr!important}
.tk-grid-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1320px}
.tk-grid-mini{grid-template-columns:repeat(3,1fr)}
.tk-grid-mini{grid-template-columns:repeat(2,1fr)}
.tk-grid-mini{grid-template-columns:1fr}
.sidebar-kelas-section>.tk-card--compact{margin:0 0 8px!important;max-width:100%!important}
/* --- Article card: horizontal, borderless, clickable block --- */
    .tk-card--artikel{border:none!important;box-shadow:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:16px!important;padding:12px!important;border-radius:10px!important;transition:background .2s!important}
.tk-card--artikel:hover{background:#f0f4ff!important;box-shadow:none!important;transform:none!important}
.tk-card--artikel .tk-card__img{width:120px!important;height:80px!important;object-fit:cover!important;border-radius:8px!important;flex-shrink:0!important}
.tk-card--artikel .tk-card__body{flex:1!important;padding:0!important}
.tk-card--artikel .tk-card__title{font-size:15px!important;font-weight:600!important;line-height:1.35!important;margin:0 0 4px!important;color:#1a1a1a!important}
.tk-card--artikel .tk-card__meta{font-size:13px;color:#666;margin:0}
/* --- Article grid --- */
    .tk-grid-artikel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:1320px}
.tk-grid-artikel{grid-template-columns:repeat(2,1fr)}
.tk-grid-artikel{grid-template-columns:1fr}
/* v4.4: hide mentor name globally — all card variants */
    /* Grid variant uses .tk-card__mentor-name (span inside .tk-card__mentor-wrap) */
    .tk-card__mentor-name,
    .tk-card .tk-card__mentor-name,
    .tk-card--grid .tk-card__mentor-name,
    .tk-card--compact .tk-card__mentor-name,
    .tk-card--mini .tk-card__mentor-name{display: none !important;}
/* Compact variant uses p.tk-card__mentor (different element) */
    p.tk-card__mentor,
    .tk-card p.tk-card__mentor,
    .tk-card--compact p.tk-card__mentor{display: none !important;}
/* v4.6: ecourse badge — flow inside .tk-card__badges--overlay flex column */
    .tk-eco-badge{display: inline-block;
        background: #fbbf24;
        color: #004aad;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        padding: 3px 8px;
        border-radius: 4px;
        line-height: 1;
        white-space: nowrap;
        text-transform: uppercase;}
/* Ecourse code badge: styled like .tk-badge--code but white bg */
    .tk-eco-code{background: #fff;
        color: #004aad;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 4px;
        border: 1px solid #004aad;
        line-height: 1;
        white-space: nowrap;}
/* Hide date badge on ecourse cards */
    .tk-card-eco .tk-badge--date{display: none !important;}
.tk-card-eco{border-top: 3px solid #fbbf24 !important;}
/* Ecourse: keep mentor photo, hide name only (same as global rule) */
    /* CTA: blue text on yellow bg */
    .tk-card-eco .tk-btn,
    .tk-eco-cta{background: #fbbf24 !important;
        color: #004aad !important;
        font-weight: 700 !important;
        border: none !important;}
@media(max-width:900px){.tk-grid-search{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:500px){.tk-grid-search{grid-template-columns:1fr!important}}
@media(max-width:900px){.tk-grid-mini{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.tk-grid-mini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.tk-grid-mini{grid-template-columns:1fr}}
@media(max-width:768px){.tk-grid-artikel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.tk-grid-artikel{grid-template-columns:1fr}}
/* /en homepage additions (#251c) */
.enh-hero{background:linear-gradient(135deg,#004aad,#0066e6);color:#fff;padding:56px 0 64px;}
.enh-hero h1{font-size:36px;font-weight:800;margin:0 0 12px;letter-spacing:-.02em;line-height:1.15;font-family:'DM Sans',sans-serif;}
.enh-hero p{font-size:17px;opacity:.92;max-width:620px;margin:0;line-height:1.6;}
.enh-pill{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:16px;}
.enh-sec{padding:48px 0 72px;background:#f5f7fb;}
.enh-sec h2{font-size:24px;font-weight:800;margin:0 0 4px;font-family:'DM Sans',sans-serif;color:#1f2937;}
.enh-sec .sub{color:#6b7280;margin:0 0 26px;}
.enh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1320px;margin:0 auto;}
@media(max-width:1024px){.enh-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.enh-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.enh-grid{grid-template-columns:1fr;} .enh-hero h1{font-size:28px;}}

/* =====================================================================
   /en/classes catalog — /bisnis/ category-page parity (2026-07-21)
   Breadcrumb + lavender hero (stats + experts) + testimoni + clips + articles
   ===================================================================== */
.enh-bc{background:#0a3d91;}
.enh-bc-inner{max-width:1320px;margin:0 auto;padding:9px 12px;font-size:13px;color:rgba(255,255,255,.72);}
.enh-bc-inner a{color:rgba(255,255,255,.72);text-decoration:none;}
.enh-bc-inner a:hover{color:#fff;text-decoration:underline;}
.enh-bc-sep{margin:0 8px;opacity:.6;}
.enh-bc-cur{color:#fff;}

.enh-herox{background:#f2f4fb;padding:44px 0 48px;}
.enh-herox-inner{max-width:1320px;margin:0 auto;padding:0 12px;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;}
.enh-herox-left{flex:1 1 380px;min-width:300px;}
.enh-herox-right{flex:1 1 460px;min-width:280px;}
.enh-herox .enh-pill{display:inline-block;background:rgba(0,74,173,.09);border:1px solid rgba(0,74,173,.22);color:#004aad;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:14px;letter-spacing:.02em;}
.enh-herox h1{font-size:32px;font-weight:800;margin:0 0 12px;line-height:1.15;letter-spacing:-.01em;color:#004aad;font-family:'DM Sans',sans-serif;}
.enh-herox p.enh-lead{font-size:16px;line-height:1.6;color:#4b5563;margin:0;max-width:560px;}
.enh-stats{display:flex;gap:32px;margin-top:22px;flex-wrap:wrap;}
.enh-stat-num{font-size:28px;font-weight:800;color:#004aad;font-family:'DM Sans',sans-serif;line-height:1.1;}
.enh-stat-lbl{font-size:13px;color:#777;margin-top:2px;}

.enh-experts{display:flex;flex-wrap:wrap;gap:14px 12px;justify-content:flex-start;}
.enh-expert{width:100px;text-align:center;text-decoration:none;color:inherit;}
.enh-expert-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0;display:block;margin:0 auto;background:#e9edf6;}
.enh-expert-ph{width:80px;height:80px;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;margin:0 auto;background:#e9edf6;color:#004aad;font-weight:800;font-size:26px;}
.enh-expert-name{font-size:12px;font-weight:600;color:#333;margin-top:6px;line-height:1.25;}
.enh-expert-count{font-size:11px;color:#888;margin-top:1px;}

/* Section chrome */
.enh-block{padding:40px 0;}
.enh-block .container,.enh-herox .container{max-width:1320px;}
.enh-h2{font-size:24px;font-weight:800;margin:0 0 20px;color:#004aad;font-family:'DM Sans',sans-serif;}
.enh-h2--center{text-align:center;}
.enh-block--alt{background:#f7f8fc;}

/* Testimoni cards */
.enh-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.enh-testi-card{background:#fff;border:1px solid #eceef4;border-radius:12px;padding:22px 20px;}
.enh-testi-quote{color:#555;font-size:15px;line-height:1.6;margin:0 0 14px;font-style:italic;}
.enh-testi-author{color:#004aad;font-weight:700;font-size:14px;margin:0;}
@media(max-width:900px){.enh-testi-grid{grid-template-columns:1fr;}}

@media(max-width:768px){
  .enh-herox-inner{gap:26px;}
  .enh-herox h1{font-size:26px;}
  .enh-experts{justify-content:center;}
}

/* Video clips (ported from WP taalenta-clips-renderer .tclip-*) */
.tclip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;}
.tclip-card{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:12px;text-decoration:none;color:inherit;transition:background .2s;}
.tclip-card:hover{background:#f0f4ff;}
.tclip-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;}
.tclip-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tclip-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;line-height:1.4;}
.tclip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.tclip-card:hover .tclip-play{opacity:1;}
.tclip-play span{width:48px;height:48px;border-radius:50%;background:rgba(255,0,0,.92);display:flex;align-items:center;justify-content:center;}
.tclip-play span:after{content:"";border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff;margin-left:3px;}
.tclip-title{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 6px;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tclip-meta{font-size:12px;color:#666;margin:0;display:flex;align-items:center;gap:6px;margin-top:auto;}
.tclip-meta svg{width:18px;height:13px;flex-shrink:0;}
@media(max-width:1024px){.tclip-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
  .tclip-grid{grid-template-columns:1fr;gap:8px;}
  .tclip-card{flex-direction:row;align-items:center;gap:12px;}
  .tclip-thumb{width:130px;flex-shrink:0;}
  .tclip-meta{margin-top:0;}
}

/* revision 2026-07-22 — match /bisnis testimoni + artikel exactly */
.enh-testi-card{background:#f9f9fb;border:1px solid #e8e8ef;padding:24px;border-radius:12px;}
.enh-testi-quote{font-style:normal;color:#1a1a1a;font-size:16px;line-height:1.6;}
/* fix flattened .tk-grid-artikel (shared class collapses to 1 col) — scope to catalog sections */
.enh-block .tk-grid-artikel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:1320px;}
@media(max-width:900px){.enh-block .tk-grid-artikel{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.enh-block .tk-grid-artikel{grid-template-columns:1fr;}}

/* revision 2026-07-22b — expert block: centered + hover affordance */
.enh-experts{justify-content:center;}
.enh-expert{transition:transform .15s ease;}
.enh-expert-photo,.enh-expert-ph{transition:border-color .15s ease,box-shadow .15s ease;}
.enh-expert-name{transition:color .15s ease;}
.enh-expert:hover{transform:translateY(-3px);}
.enh-expert:hover .enh-expert-photo,.enh-expert:hover .enh-expert-ph{border-color:#004aad;box-shadow:0 6px 16px rgba(0,74,173,.20);}
.enh-expert:hover .enh-expert-name{color:#004aad;}

/* =====================================================================
   Executive class card (2026-08-10) — premium tier for config('executive.slugs')
   Distinct from ecourse (.tk-card-eco, gold-dominant): navy + thin gold frame + serif.
   Real class icon (SSoT) untouched; premium chrome layered around it.
   ===================================================================== */
.tk-card--exec{border:1.5px solid #caa24a;}
.tk-card--exec:hover{box-shadow:0 6px 20px rgba(0,55,127,.16);}
.tk-exec-tag{position:absolute;top:0;left:0;z-index:3;background:#caa24a;color:#00305f;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:0 0 8px 0;line-height:1;white-space:nowrap;box-shadow:0 1px 4px rgba(0,55,127,.18);}
.tk-card--exec .tk-card__title{font-family:'Fraunces','Playfair Display',Georgia,serif;color:#00377f;font-weight:600;letter-spacing:-.005em;}
.tk-card--exec .tk-btn{background:#00377f;color:#fff;border-top:2px solid #caa24a;}
.tk-card--exec:hover .tk-btn{background:#002a63;}

.tk-card--intl{border:1.5px solid #0284c7}
.tk-card--intl:hover{box-shadow:0 6px 20px rgba(2,132,199,.16)}
.tk-intl-tag{position:absolute;top:0;left:0;z-index:3;background:#0284c7;color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:0 0 8px 0;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;box-shadow:0 1px 4px rgba(2,132,199,.25)}
.tk-card--intl .tk-btn{background:#004aad;color:#fff;border-top:2px solid #38bdf8}
.tk-card--intl:hover .tk-btn{background:#003080}
.tk-badge--en{background:#e0f2fe;color:#0369a1;border:1px solid #7dd3fc}

/* ═══════════════ Strip CTA di kaki kartu (24 Agu 2026) ═══════════════
   DITARUH DI SINI, bukan di berkas terpisah, karena strip adalah bagian dari kartu —
   dan kartunya dipakai 13 view. Saat aturannya sempat tinggal di card-strip.css yang
   cuma dimuat homepage, /kelas, /cari, dan /experts merender strip TANPA gaya sama
   sekali: markupnya benar, halamannya 200, dan tak ada yang error. Setiap view yang
   sudah memuat tk-card.css otomatis ikut, jadi permukaan baru tidak bisa lupa. */

/* Strip CTA di kaki kartu kelas + badge kelas yang sudah lewat.
   Dipakai halaman depan (/id) dan katalog (/kelas, /kelas/{kategori}, /cari,
   /experts/{slug}) — datanya dari App\Support\CardStrip, markupnya dari
   kelas/partials/_card-strip.

   Tata letak yang dipilih Ega 24 Agu 2026: baris meta (harga kiri, status kanan) di
   ATAS tombol yang tetap selebar kartu. Varian satu-baris sempat diuji dan kalah di
   semua lebar — di grid 4 kolom (~290px) tombolnya terpaksa turun sendiri sehingga
   kartunya justru lebih tinggi (108px vs 82px). */

/* ── Tautan yang direntangkan ──────────────────────────────────────────────
   Kartu ber-strip bukan <a> lagi (lihat catatan di class-card.blade.php).
   Judulnya yang jadi tautan, lalu ::after-nya menutupi seluruh kartu supaya
   bidang kliknya tetap seluas kartu seperti sebelumnya. Strip di kaki kartu
   punya z-index lebih tinggi, jadi tombolnya menang atas lapisan itu. */
.tk-card--strip .tk-card__link { color: inherit; text-decoration: none; }
.tk-card--strip .tk-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.tk-card--strip .tk-strip { position: relative; z-index: 1; margin-top: auto; }
.tk-card--strip:hover .tk-card__link { text-decoration: none; }

/* ── Baris meta: harga kiri, status kanan ───────────────────────────────── */
/* flex-wrap penting: pill status tidak pernah menyusut (flex:0 0 auto), jadi tanpa
   ini yang tergencet justru harganya — "mulai Rp275rb" tercetak "mulai Rp275rt" di
   kartu ber-status panjang. Angka harga yang terpotong satu huruf lebih buruk
   daripada strip yang jadi dua baris. */
.tk-strip__meta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 4px 8px; padding: 7px 12px; border-top: 1px solid #f1f1f1; min-width: 0;
}
.tk-strip__price { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
.tk-strip__was { font-size: 11px; color: #9aa0a6; text-decoration: line-through; }
.tk-strip__now { font-size: 12px; color: #555; line-height: 1.2; white-space: nowrap; }
.tk-strip__now b { font-size: 16px; font-weight: 800; color: #004aad; letter-spacing: -.2px; }
.tk-strip__now--ask { font-size: 12.5px; font-weight: 700; color: #004aad; }

/* Teks status hitam polos, TANPA latar pill: satu-satunya pembawa warna di strip ini
   adalah titik di KANAN teks. Kartu sudah punya badge tanggal, badge kode, badge batch,
   dan tombol biru; menambah pill berwarna kelima membuat semuanya berebut perhatian.
   Titik seukuran teks (1em) cukup terbaca dari kejauhan tanpa ikut berteriak.
   Ukuran naik 10.5px -> 11.5px karena tanpa latar, teks sekecil itu jadi terlalu lemah. */
.tk-strip__status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; line-height: 1;
    padding: 4px 0; white-space: nowrap; flex: 0 0 auto;
    background: none; color: #1a1a1a;
}
/* 1em = ikut font-size induk, jadi titiknya otomatis tetap seukuran teks kalau
   ukurannya diubah lagi nanti. */
.tk-strip__status::after {
    content: ""; width: 1em; height: 1em; border-radius: 50%;
    flex: 0 0 auto; background: #004aad;
}
/* Warna dipetakan menurut APA YANG HARUS DILAKUKAN PEMBACA, bukan menurut fase kelas:
     merah  = jam berdetak, kesempatannya menutup  (tenggat daftar, kelas tinggal N hari)
     jingga = mulai dekat, belum mendesak
     hijau  = ada yang bisa dibeli sekarang        (rekaman/e-course)
     biru   = terbuka, masih lama
     abu    = jalan buntu
   "Selesai N hari lagi" sengaja merah walau kelasnya sedang jalan: bagi pembaca itu
   hitung mundur kesempatan, sama mendesaknya dengan tenggat daftar. Dan hijau dilepas
   dari situ supaya bisa dipakai untuk rekaman — satu-satunya keadaan di deretan ini
   yang benar-benar berarti "silakan beli". (Ega 24 Agu 2026) */
.tk-strip__status--urgent::after  { background: #d93025; }
.tk-strip__status--running::after { background: #d93025; }
.tk-strip__status--soon::after    { background: #f5a623; }
.tk-strip__status--normal::after  { background: #7ea6e0; }
.tk-strip__status--closed::after  { background: #9aa0a6; }
/* Rekaman / Ecourse: pendaftaran live tutup TAPI masih ada yang bisa dibeli — dan
   itulah satu-satunya keadaan di deretan ini yang benar-benar berarti "silakan beli",
   jadi hijaunya jatuh ke sini. Rekaman dan Ecourse berbagi tone; kalau nanti perlu
   warna beda, pisahkan tone-nya di deadlineStatus(), CSS-nya tinggal ditambah. */
.tk-strip__status--replay::after  { background: #2e7d32; }

/* Badge kelas yang tanggalnya sudah lewat — dipasang lewat $it['date_class'] /
   $it['batch_class'] dari CardStrip::pastBadges(). Abu-abu karena tanggal dan
   nomor gelombang berhenti jadi pertimbangan begitu kelasnya usai; yang masih penting
   di kartu itu harga dan apa yang bisa dibeli. Satu kelas untuk keduanya supaya
   greynya dijamin sama. */
.tk-badge--past { background: #f1f1f1; color: #8a8a8a; }

/* Kunci warna teks tombol saat hover/focus.
   Bootstrap memasang `a:focus, a:hover { color:#343a40 }` — spesifisitas (0,0,1,1),
   sedangkan `.tk-btn--primary { color:#fff }` cuma (0,0,1,0). Jadi Bootstrap menang:
   tombol biru tua berteks hitam, praktis tidak terbaca.
   Baru muncul sekarang karena dulu tombolnya <span> DI DALAM <a> — span tidak pernah
   cocok dengan `a:hover`. Begitu ia jadi <a> sendiri (supaya rekaman/ecourse bisa punya
   tujuan berbeda dari kartunya), aturan Bootstrap itu langsung mengenainya.
   Selektor sengaja `a.tk-btn--x:hover` (0,0,2,1) supaya menang tanpa !important. */
a.tk-btn,
a.tk-btn:hover,
a.tk-btn:focus { text-decoration: none; }
a.tk-btn--primary,
a.tk-btn--primary:hover,
a.tk-btn--primary:focus { color: #fff; }
a.tk-btn--secondary,
a.tk-btn--secondary:hover,
a.tk-btn--secondary:focus { color: #004aad; }
a.tk-btn--outline,
a.tk-btn--outline:hover,
a.tk-btn--outline:focus { color: #004aad; }

/* Judul kartu ber-strip kena masalah yang sama: warnanya melompat ke abu gelap saat
   hover karena `a:hover` mengalahkan `color: inherit`. */
.tk-card--strip .tk-card__link,
.tk-card--strip .tk-card__link:hover,
.tk-card--strip .tk-card__link:focus { color: inherit; text-decoration: none; }