/* Native Laravel Blog (Fase A, doc 31 §C-2). Self-contained; reuses layout .container. */
.tblog{color:#1a1a1a}
/* 1320px + padding 12px = SAMA PERSIS dengan Bootstrap .container yang dipakai
   navbar & footer (layouts.course), jadi isi halaman sejajar dengan logo.
   Lihat knowledge: lebar baku Taalenta. */
.tblog .container{max-width:1320px;margin:0 auto;padding-left:12px;padding-right:12px}

/* Breadcrumb (site standard blue bar) */
.tblog-crumb{background:#1a5fb4;color:#fff}
.tblog-crumb .container{padding-top:10px;padding-bottom:10px;font-size:13px}
.tblog-crumb a{color:rgba(255,255,255,.8);text-decoration:none}
.tblog-crumb a:hover{color:#fff}
.tblog-crumb__sep{margin:0 8px;color:rgba(255,255,255,.5)}
.tblog-crumb [aria-current]{color:rgba(255,255,255,.95)}

/* Hero */
.tblog-hero{background:linear-gradient(180deg,#eef1f8,#e5eaf3);padding:44px 0 40px}
.tblog-hero__title{margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#004aad;letter-spacing:-.01em}
.tblog-hero__sub{margin:8px 0 0;font-size:16px;color:#475569;max-width:640px}

/* Category chips -> PINDAH ke assets/shared/listing-toolbar.css (.tls-pill),
   5 Sep 2026. Gaya ini lahir di sini lalu disalin ke video.css; ketika /tools dan
   /kelas ikut memakainya, salinannya dihentikan dan satu berkas dijadikan sumber.
   Markup /blog kini memakai .tls-pills / .tls-pill. JANGAN mendefinisikan ulang
   .tblog-cats__chip di sini: yang tertinggal akan diam-diam melenceng lagi. */

/* Layout: content + sidebar */
.tblog-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;padding-top:40px;padding-bottom:72px;align-items:start}
.tblog-layout--single{grid-template-columns:1fr 320px;padding-top:28px;padding-bottom:72px}
.tblog-main{min-width:0}

/* Card grid */
.tblog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tblog-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e9f0;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.tblog-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.10);transform:translateY(-2px)}
.tblog-card__thumb{aspect-ratio:16/9;background:#f0f4ff;overflow:hidden}
.tblog-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tblog-card__thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tblog-card__thumb-ph span{font-size:44px;font-weight:800;color:#004aad;opacity:.25}
.tblog-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.tblog-card__cat{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#004aad;margin-bottom:6px}
.tblog-card__title{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.35;color:#111}
.tblog-card__excerpt{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#556}
.tblog-card__meta{margin:auto 0 0;font-size:12px;color:#8a94a6}

/* Pagination */
.tblog-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px}
.tblog-pager__btn{font-size:14px;padding:9px 16px;border-radius:8px;background:#004aad;color:#fff;text-decoration:none;transition:.15s}
.tblog-pager__btn:hover{background:#003080}
.tblog-pager__btn.is-disabled{background:#e2e8f0;color:#94a3b8;pointer-events:none}
.tblog-pager__info{font-size:13px;color:#64748b}
.tblog-empty{padding:40px 0;color:#64748b;text-align:center}

/* Sidebar */
.tblog-side{display:flex;flex-direction:column;gap:20px}
.tblog-widget{background:#fff;border:1px solid #e6e9f0;border-radius:12px;padding:16px 18px}
.tblog-widget__title{margin:0 0 12px;font-size:15px;font-weight:800;color:#004aad;border-bottom:2px solid #eef1f8;padding-bottom:8px}
.tblog-widget__list{list-style:none;margin:0;padding:0}
.tblog-widget__list li{margin:0 0 8px}
.tblog-widget__list a{font-size:14px;color:#334155;text-decoration:none;line-height:1.4;display:block}
.tblog-widget__list a:hover{color:#004aad}
.tblog-widget__posts{list-style:none;margin:0;padding:0}
.tblog-widget__posts li{margin:0 0 12px}
.tblog-widget__posts a{display:flex;gap:10px;align-items:center;text-decoration:none;color:#334155}
.tblog-widget__posts img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0}
.tblog-widget__posts span{font-size:13px;line-height:1.35;font-weight:600}
.tblog-widget__posts a:hover span{color:#004aad}

/* Single article */
.tblog-article__head{margin-bottom:20px}
.tblog-article__cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tblog-article__cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#004aad;background:#eef2fd;padding:4px 10px;border-radius:999px;text-decoration:none}
.tblog-article__title{margin:0 0 10px;font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;line-height:1.2;color:#0f172a}
.tblog-article__meta{margin:0;font-size:13px;color:#8a94a6}
.tblog-article__feat{margin:0 0 24px}
.tblog-article__feat img{width:100%;display:block;border-radius:14px}
.tblog-content{font-size:16.5px;line-height:1.75;color:#26303d}
.tblog-content p{margin:0 0 1.1em}
.tblog-content h2{font-size:1.5rem;font-weight:800;margin:1.6em 0 .5em;color:#0f172a;line-height:1.3}
.tblog-content h3{font-size:1.22rem;font-weight:700;margin:1.4em 0 .4em;color:#1e293b}
.tblog-content h4{font-size:1.05rem;font-weight:700;margin:1.2em 0 .4em;color:#1e293b}
.tblog-content ul,.tblog-content ol{margin:0 0 1.1em;padding-left:1.4em}
.tblog-content li{margin:0 0 .4em}
.tblog-content a{color:#004aad;text-decoration:underline}
.tblog-content img{max-width:100%;height:auto;border-radius:10px;margin:1em 0}
.tblog-content blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:4px solid #004aad;background:#f7f9fd;color:#334155;font-style:italic}
.tblog-content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px}
.tblog-content th,.tblog-content td{border:1px solid #e2e8f0;padding:8px 12px;text-align:left}
.tblog-content th{background:#f1f5f9}

/* Related */
.tblog-related{margin-top:40px;border-top:1px solid #e8ecf3;padding-top:24px}
.tblog-related__title{font-size:1.25rem;font-weight:800;color:#0f172a;margin:0 0 16px}
.tblog-related__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tblog-related__list a{display:flex;gap:12px;align-items:center;text-decoration:none;color:#26303d}
.tblog-related__list img{width:72px;height:72px;border-radius:10px;object-fit:cover;flex-shrink:0}
.tblog-related__list span{font-size:14px;font-weight:600;line-height:1.35}
.tblog-related__list a:hover span{color:#004aad}

/* Responsive */
@media(max-width:900px){
  .tblog-layout,.tblog-layout--single{grid-template-columns:1fr}
  .tblog-side{position:static;flex-direction:row;flex-wrap:wrap}
  .tblog-side .tblog-widget{flex:1;min-width:260px}
}
@media(max-width:560px){
  .tblog-grid,.tblog-related__list{grid-template-columns:1fr}
  .tblog-side{flex-direction:column}
}

/* ── Photo credit ── */
.tblog-article__credit{margin:8px 2px 0;font-size:11.5px;color:#94a3b8;font-style:italic;text-align:right}

/* ── Sidebar: Kelas Terkait cards ── */
.tblog-widget__cards{list-style:none;margin:0;padding:0}
.tblog-widget__cards li{margin:0 0 12px}
.tblog-widget__cards a{display:flex;gap:10px;align-items:center;text-decoration:none;color:#334155}
.tblog-widget__thumb{width:84px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#eef2fd;display:block}
.tblog-widget__thumb--ph{background:#e2e8fa}
.tblog-widget__cbody{display:flex;flex-direction:column;min-width:0;gap:2px}
.tblog-widget__ctitle{font-size:13px;font-weight:600;line-height:1.35;color:#334155}
.tblog-widget__cmeta{font-size:11.5px;color:#64748b;line-height:1.3}
.tblog-widget__cards a:hover .tblog-widget__ctitle{color:#004aad}

/* ── Sidebar: Video Terkait ── */
.tblog-widget__videos{list-style:none;margin:0;padding:0}
.tblog-widget__videos li{margin:0 0 12px}
.tblog-widget__videos a{display:flex;gap:10px;align-items:center;text-decoration:none;color:#334155}
.tblog-vthumb{position:relative;width:74px;height:46px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#000}
.tblog-vthumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.tblog-vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:rgba(255,0,0,.88)}
.tblog-vplay::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tblog-widget__videos a:hover .tblog-widget__ctitle{color:#004aad}

/* ── Sidebar: Expert Relevan ── */
.tblog-widget__experts{list-style:none;margin:0;padding:0}
.tblog-widget__experts li{margin:0 0 12px}
.tblog-widget__experts a{display:flex;gap:10px;align-items:center;text-decoration:none}
.tblog-widget__avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #eef2fd}
.tblog-widget__avatar--ph{display:flex;align-items:center;justify-content:center;background:#004aad;color:#fff;font-weight:700;font-size:18px}
.tblog-widget__person{display:flex;flex-direction:column;min-width:0}
.tblog-widget__person strong{font-size:13.5px;font-weight:700;color:#1e293b;line-height:1.3}
.tblog-widget__person small{font-size:11.5px;color:#64748b;line-height:1.3;margin-top:1px}
.tblog-widget__experts a:hover strong{color:#004aad}

/* ── Single: full-width illustration on top + clear header/footer margin ── */
.tblog--single{padding-bottom:24px}                 /* extra breathing room before footer */
.tblog-hero-img{margin:28px 0 0;line-height:0}   /* gap between breadcrumb (header) and image */
.tblog-hero-img img{width:100%;height:auto;border-radius:14px;display:block}
.tblog-hero-img__credit{margin:8px 2px 0;font-size:11.5px;color:#94a3b8;font-style:italic;text-align:right;line-height:1.4}

/* ── Sidebar list separators (items no longer touch) ── */
.tblog-widget__cards li,
.tblog-widget__videos li,
.tblog-widget__experts li,
.tblog-widget__tools li,
.tblog-widget__posts li{border-bottom:1px solid #eef1f6;padding-bottom:12px;margin-bottom:12px}
.tblog-widget__cards li:last-child,
.tblog-widget__videos li:last-child,
.tblog-widget__experts li:last-child,
.tblog-widget__tools li:last-child,
.tblog-widget__posts li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* ── Kelas Terkait = WP compact cards (tk-card.css); no outer box, cards stand alone ── */
.tblog-widget--kelas{background:none;border:0;padding:0}
.tblog-widget--kelas .tblog-widget__title{margin-bottom:14px;border-bottom:2px solid #eef1f8;padding-bottom:8px}
.tblog-widget--kelas .tk-card--compact{margin-bottom:12px!important}
.tblog-widget__more{margin-top:4px;text-align:center}
.tblog-widget__more a{font-size:13px;color:#004aad;text-decoration:none;font-weight:600}
.tblog-widget__more a:hover{text-decoration:underline}

/* ── C5 A/B: highlighted first recommended class (variant B) ── */
.tblog-widget--kelas .tk-card--compact.tblog-rec-hl{outline:2px solid #004aad;outline-offset:1px;position:relative}
.tblog-widget--kelas .tk-card--compact.tblog-rec-hl::before{content:"★ Rekomendasi";position:absolute;top:0;left:0;background:#004aad;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px 0 8px 0;z-index:2}

/* ── C6/C7: Baca juga inline + author byline ── */
.tblog-bacajuga{margin:28px 0 8px;padding:14px 16px;background:#f7f9fd;border-left:4px solid #004aad;border-radius:0 8px 8px 0}
.tblog-bacajuga__label{font-weight:800;color:#004aad;font-size:14px}
.tblog-bacajuga ul{margin:6px 0 0;padding-left:18px}
.tblog-bacajuga li{margin:3px 0;font-size:14.5px}
.tblog-bacajuga a{color:#004aad;text-decoration:none}
.tblog-bacajuga a:hover{text-decoration:underline}
.tblog-article__byline-foot{margin:20px 0 0;font-size:13.5px;color:#64748b}
.tblog-article__byline-foot a{color:#004aad;text-decoration:none;font-weight:600}

/* ===== Tanya Expert (blog Q&A) ===== */
.tblog-qa{margin:36px 0 8px;padding-top:26px;border-top:2px solid #e8edf5}
.tblog-qa__title{font-size:22px;font-weight:800;color:#00377f;margin:0 0 6px}
.tblog-qa__lead{font-size:14.5px;color:#5a6478;margin:0 0 18px;line-height:1.6}
.tblog-qa__flash{padding:11px 14px;border-radius:8px;font-size:14px;margin-bottom:16px;line-height:1.5}
.tblog-qa__flash--ok{background:#e6f4ea;color:#1b5e34;border:1px solid #b7e0c4}
.tblog-qa__flash--err{background:#fdecec;color:#8a2626;border:1px solid #f5bcbc}
.tblog-qa__list{list-style:none;margin:0 0 24px;padding:0}
.tblog-qa__item{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid #eef1f6}
.tblog-qa__item:last-child{border-bottom:0;margin-bottom:0}
.tblog-qa__q,.tblog-qa__a{display:flex;gap:10px;align-items:flex-start}
.tblog-qa__a{margin-top:10px;padding-left:22px}
.tblog-qa__badge{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:2px}
.tblog-qa__badge--q{background:#eef2f9;color:#00377f}
.tblog-qa__badge--a{background:#004aad;color:#fff}
.tblog-qa__bubble{flex:1;min-width:0}
.tblog-qa__bubble--a{background:#f7f9fd;border-left:3px solid #004aad;border-radius:0 8px 8px 0;padding:12px 14px}
.tblog-qa__text{margin:0;font-size:15px;line-height:1.65;color:#22282f;overflow-wrap:anywhere}
.tblog-qa__meta{margin:5px 0 0;font-size:12.5px;color:#8a93a3}
.tblog-qa__meta--a{color:#5a6478}
.tblog-qa__meta--a strong{color:#00377f}
.tblog-qa__pending{background:#fff8e6;border:1px solid #f2dfae;border-radius:8px;padding:11px 14px;font-size:14px;color:#6b5417;line-height:1.55;margin-bottom:16px}
.tblog-qa__form{margin-top:4px}
.tblog-qa__label{display:block;font-size:13px;font-weight:700;color:#00377f;margin-bottom:7px}
.tblog-qa__textarea{width:100%;padding:11px 13px;border:1px solid #cfd7e3;border-radius:8px;font-size:15px;font-family:inherit;line-height:1.6;resize:vertical;box-sizing:border-box}
.tblog-qa__textarea:focus{outline:0;border-color:#004aad;box-shadow:0 0 0 3px rgba(0,74,173,.13)}
.tblog-qa__formfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;flex-wrap:wrap}
.tblog-qa__hint{font-size:12.5px;color:#8a93a3}
.tblog-qa__btn{display:inline-block;background:#004aad;color:#fff;border:0;border-radius:8px;padding:10px 20px;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s}
.tblog-qa__btn:hover{background:#003585;color:#fff}
.tblog-qa__gate{background:#f7f9fd;border:1px solid #dfe6f2;border-radius:10px;padding:18px 20px;text-align:center}
.tblog-qa__gatetext{margin:0 0 14px;font-size:14.5px;color:#5a6478;line-height:1.6}
@media(max-width:640px){
  .tblog-qa__title{font-size:19px}
  .tblog-qa__a{padding-left:0}
  .tblog-qa__formfoot{flex-direction:column;align-items:stretch}
  .tblog-qa__btn{width:100%;text-align:center}
}

/* Tanya Expert: engine login yang disematkan.
   Kolom artikel lebar, jadi pemilih metode dibuat 2 kolom supaya tidak menyisakan ruang
   kosong di kiri-kanan. Langkah setelahnya (input, OTP, register) tetap dipersempit dan
   ditengahkan, karena field selebar 600px justru tidak enak dibaca. */
.tblog-qa__gate{background:#f7f9fd;border:1px solid #dfe6f2;border-radius:10px;padding:26px 24px}
.tblog-qa__gate .tl-auth--compact{max-width:620px;margin:0 auto}
.tblog-qa__gate .tl-auth--compact #auth-title{font-size:21px;margin-bottom:1.25rem !important}

.tblog-qa__gate #method-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tblog-qa__gate .tl-method-btn{border-color:#dfe4ec;padding:14px 16px;font-size:15px}
.tblog-qa__gate .tl-method-btn:hover{border-color:#004aad}

/* Setelah metode dipilih: kembali ke lebar baca yang wajar */
.tblog-qa__gate #auth-banner,
.tblog-qa__gate #form-login,
.tblog-qa__gate #form-register,
.tblog-qa__gate #wrap-change,
.tblog-qa__gate #email-checking{max-width:400px;margin-left:auto;margin-right:auto}
.tblog-qa__gate .alert{font-size:13.5px}

@media(max-width:640px){
  .tblog-qa__gate{padding:18px 15px}
  .tblog-qa__gate .tl-auth--compact{max-width:none}
  .tblog-qa__gate #method-buttons{grid-template-columns:1fr}
  .tblog-qa__gate .tl-auth--compact #auth-title{font-size:18px}
}

/* ── Tools terkait (5 Sep 2026). Memakai .tblog-widget__person yang sama dengan
      rubrik expert, jadi nama dan keterangannya sudah sepadan tanpa aturan baru. ── */
.tblog-widget__tools{list-style:none;margin:0;padding:0}
.tblog-widget__tools a{display:flex;gap:10px;align-items:flex-start;text-decoration:none}
.tblog-widget__ticon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#eef3fc;
  color:#004aad;display:flex;align-items:center;justify-content:center;font-size:14px}
.tblog-widget__tools a:hover strong{color:#004aad}

/* Baris keterangan hasil pencarian + tombol reset (5 Sep 2026).
   Nilainya cermin .tkls-searchnote dan .tkls-search-clear di kelas.css supaya
   /blog dan /kelas terbaca sebagai satu keluarga. Ditulis dengan warna harfiah,
   BUKAN var(--tkls-*): variabel itu hidup di kelas `.tkls`, dan blok ini berada
   di dalam .tblog-main yang bukan keturunannya, jadi variabelnya tidak akan
   pernah terselesaikan di sini. */
.tblog-searchnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 0 4px;color:#1f2937;font-size:1rem}
.tblog-searchnote__reset{border:1px solid #e7eaf5;background:#fff;color:#64748b;
  border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:border-color .15s ease,color .15s ease}
.tblog-searchnote__reset:hover{border-color:#004aad;color:#004aad}
#tblog-results[hidden],#tblog-default[hidden]{display:none!important}

/* Tata letak tanpa sidebar (5 Sep 2026, arahan Ega) untuk /blog dan halaman
   kategori. Sidebar tetap ada di artikel tunggal dan halaman penulis, tempat
   rekomendasinya punya konteks.

   Kisinya naik ke 3 kolom karena tanpa sidebar lebar isinya 1320px; dengan 2
   kolom tiap kartu jadi ~650px dan gambarnya meregang tidak karuan. Titik
   putusnya mengikuti .tblog-grid yang sudah ada, cuma digeser satu tingkat. */
.tblog-layout--penuh{grid-template-columns:1fr}
.tblog-layout--penuh .tblog-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.tblog-layout--penuh .tblog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.tblog-layout--penuh .tblog-grid{grid-template-columns:1fr}}

/* Blok referensi di kaki artikel — dikecilkan (arahan Ega 5 Sep 2026).

   ---- KENAPA CUKUP SATU ATURAN ----
   Penandanya SUDAH ADA di markup dan tidak perlu dibuat: badan artikel menulis
   daftar referensinya sebagai `<li class="has-small-font-size">`, kelas bawaan
   WordPress. Yang tidak ada selama ini justru aturannya — `blog.css` tidak
   pernah menata kelas itu sama sekali, jadi penandanya diam dan referensinya
   tampil sebesar teks isi.

   Diukur di produksi 5 Sep 2026 sebelum menulis aturan ini:
     142 artikel memakai `has-small-font-size`
     145 artikel punya label `<strong>Referensi`
       2 artikel memakai kelas itu DI LUAR blok referensi
       0 artikel memakai label `<strong>Sumber`

   Jadi kelas itu praktis penanda blok referensi, dan menatanya kecil tidak
   menyenggol apa pun yang lain. (Catatan koreksi: hitungan "181 artikel punya
   blok Referensi/Sumber" yang sempat saya sebut itu KELIRU — ia ikut menghitung
   kata "sumber" yang muncul di kalimat biasa. Angka yang benar 145.)

   ⚠ ISI TIDAK DISENTUH. Tidak ada linkifikasi, tidak ada pelipatan, tidak ada
   pemindahan blok. Keputusan Ega: apa adanya, cuma diperkecil. Kalau nanti
   berubah pikiran soal tautan, ingat temuannya: 142 dari 145 blok itu TIDAK
   menyimpan URL sama sekali, cuma nama penerbit, jadi linkifikasi otomatis
   mustahil dan harus riset redaksi per artikel.

   Label "Referensi:" sendiri sengaja dibiarkan seukuran teks isi: ia `<p><strong>`
   tanpa kelas, dan satu-satunya cara menargetkannya lewat CSS adalah menebak
   bentuk ("paragraf yang isinya cuma satu strong"), yang akan ikut mengecilkan
   penekanan lain di artikel mana pun yang kebetulan berbentuk sama. Label normal
   di atas daftar kecil juga hierarki yang benar. */
.tblog-content .has-small-font-size{font-size:13.5px;line-height:1.6;color:#64748b}
.tblog-content ul:has(> .has-small-font-size){margin-top:.4em}