/* Video Hub — mandiri, tidak menimpa lp.css / blog.css. Prefix .tv- */
/* 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. */
.tv-wrap{max-width:1320px;margin:0 auto;padding:0 12px}
/* Hero = SALINAN .tblog-hero dari blog.css (gradien, ukuran, warna, padding sama
   persis). Disalin, bukan diimpor, supaya halaman video tak perlu menarik
   blog.css 16 KB. Kalau hero di blog.css berubah, samakan di sini. */
.tv-hero{background:linear-gradient(180deg,#eef1f8,#e5eaf3);padding:44px 0 40px}
.tv-hero__inner{max-width:1320px;margin:0 auto;padding:0 12px}
.tv-hero h1{margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#004aad;letter-spacing:-.01em}
.tv-hero p{margin:8px 0 0;font-size:16px;color:#475569;max-width:640px}
.tv-note{background:#f1f5fb;border:1px solid #dbe5f2;color:#3b4a5e;border-radius:10px;padding:10px 14px;font-size:13.5px;margin:14px 0}
/* Baris kategori -> PINDAH ke assets/shared/listing-toolbar.css (.tls-pill),
   5 Sep 2026. Berkas ini dulu menyalinnya dari blog.css dan komentarnya mengaku
   begitu; salinan itu dihentikan saat /tools dan /kelas ikut memakai gayanya.
   Markup /video kini memakai .tls-pills / .tls-pill dengan keadaan .is-active
   (dulu .tv-chip--on). */
.tv-wrap--hub{padding-top:28px}
.tv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tv-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:600px){.tv-grid{grid-template-columns:1fr}}
.tv-card{display:block;text-decoration:none;color:inherit}
.tv-card__thumb{position:relative;display:block;border-radius:12px;overflow:hidden;background:#e9eef5;aspect-ratio:16/9}
.tv-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.tv-card:hover .tv-card__thumb img{transform:scale(1.04)}
.tv-card__dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;font-size:12px;padding:2px 6px;border-radius:4px}
.tv-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.9}
.tv-card__body{display:block;padding:10px 2px 0}
.tv-card__code{display:inline-block;font-size:11px;letter-spacing:.06em;color:#004AAD;background:#eaf1fb;border-radius:4px;padding:2px 7px;margin-bottom:6px;font-weight:600}
.tv-card__title{display:block;font-size:15px;line-height:1.42;color:#1f2b3a;font-weight:600}
.tv-card:hover .tv-card__title{color:#004AAD}
.tv-pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:34px 0 10px}
.tv-pager a,.tv-pager span{padding:8px 14px;border-radius:8px;border:1px solid #d8e0ea;color:#33475b;text-decoration:none;font-size:14px}
.tv-pager span{border-color:transparent;color:#8894a4}
/* --- detail --- */
.tv-detail{display:grid;grid-template-columns:1fr 330px;gap:34px;padding:22px 0 40px}
@media(max-width:980px){.tv-detail{grid-template-columns:1fr;gap:26px}}
/* ===== Panggung video: facade/iframe + control bar sendiri =====
   Bar duduk DI BAWAH frame dalam satu kotak membulat, jadi terlihat menyatu tanpa
   menimpa apa pun di dalam player. Menutupi branding YouTube melanggar ToS-nya,
   dan `modestbranding` sudah tidak berefek sejak Agustus 2023 — logo YouTube di
   dalam frame memang tidak bisa dihilangkan lagi. */
.tv-stage{border-radius:14px;overflow:hidden;background:#0d1117;box-shadow:0 2px 14px rgba(13,17,23,.10)}
.tv-stage.is-live .tv-player{border-radius:0}
.tv-player{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9}
.tv-stage .tv-player{border-radius:14px 14px 0 0}

.tv-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#0d1117;color:#e7edf5;
  font-family:'DM Sans',sans-serif;user-select:none}
.tv-bar[hidden]{display:none}
/* `hidden` pada <svg> tidak dijamin dihormati UA stylesheet — dipaksa di sini,
   sepasang dengan perbaikan icon() yang memakai atribut, bukan properti. */
.tv-bar svg[hidden]{display:none}
/* Sebelum player hidup: hanya tombol putar & mode lebar yang berarti. */
.tv-bar.is-idle .tv-bar__btn:not([data-tvb="play"]):not([data-tvb="wide"]),
.tv-bar.is-idle .tv-bar__track,
.tv-bar.is-idle .tv-bar__volrange{opacity:.45;pointer-events:none}
.tv-bar.is-idle #tvbCur{opacity:.55}
.tv-bar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;
  background:none;border:0;border-radius:8px;color:#e7edf5;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;transition:background .15s}
.tv-bar__btn:hover{background:rgba(255,255,255,.14)}
.tv-bar__rate{min-width:38px;letter-spacing:.2px}
/* Volume: rel melebar saat kursor/fokus masuk, seperti YouTube. */
.tv-bar__vol{display:flex;align-items:center;gap:4px}
.tv-bar__volrange{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:14px;background:none;cursor:pointer;
  transition:width .18s ease,opacity .18s ease}
.tv-bar__vol:hover .tv-bar__volrange,.tv-bar__volrange:focus-visible{width:66px;opacity:1}
.tv-bar__volrange::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.tv-bar__volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;
  background:#fff;margin-top:-3.5px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.tv-bar__volrange::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.tv-bar__volrange::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
.tv-bar__volrange:focus-visible{outline:2px solid #4b8bf5;outline-offset:3px;border-radius:4px}
@media(hover:none){.tv-bar__volrange{width:60px;opacity:1}}
.tv-bar__time{font-size:12.5px;font-variant-numeric:tabular-nums;color:#aebbcd;flex:0 0 auto}
.tv-bar__time--dur{color:#8b98ab}

/* Rel geser: area sentuh 14px tapi garisnya tipis, seperti player modern. */
.tv-bar__track{position:relative;flex:1 1 auto;height:14px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.tv-bar__track::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.tv-bar__buf{position:absolute;left:0;height:4px;border-radius:4px;background:rgba(255,255,255,.34);width:0}
.tv-bar__fill{position:absolute;left:0;height:4px;border-radius:4px;background:#4b8bf5;width:0}
.tv-bar__knob{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);opacity:0;transition:opacity .15s}
.tv-bar__track:hover .tv-bar__knob,.tv-bar__track:focus-visible .tv-bar__knob{opacity:1}
.tv-bar__track:focus-visible{outline:2px solid #4b8bf5;outline-offset:3px;border-radius:4px}

/* Layar penuh: frame mengisi layar, bar tetap menempel di kakinya. */
.tv-stage:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000;border-radius:0}
.tv-stage:fullscreen .tv-player{flex:0 1 auto;border-radius:0;width:100%}
.tv-stage:fullscreen .tv-bar{border-radius:0}

/* Mode lebar (teater): kolom sidebar ditiadakan, video memakai lebar penuh dan
   Video/Artikel Terkait turun ke bawahnya. */
.tv-detail.is-wide{grid-template-columns:1fr}
.tv-detail.is-wide .tv-side{margin-top:6px}
.tv-detail.is-wide .tv-side .tv-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:720px){.tv-detail.is-wide .tv-side .tv-list{grid-template-columns:1fr}}

@media(max-width:520px){
  .tv-bar{gap:7px;padding:8px 9px}
  .tv-bar__time--dur{display:none}
  .tv-bar__btn--wide{display:none}
}
.tv-player img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.tv-player button{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* --- Tombol putar: hidup saat kursor masuk ---
   Gerakannya ditaruh di SVG-nya, bukan di <button> yang inset:0 — kalau tombolnya
   sendiri di-scale, seluruh area kliknya ikut membesar sampai keluar frame.
   Lingkarannya berubah ke biru merek supaya jelas ini tombol, bukan hiasan. */
.tv-player button svg{transition:transform .22s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));will-change:transform}
.tv-player button circle{transition:fill .22s ease}
.tv-player:hover img{transform:scale(1.035);opacity:1}
.tv-player:hover button svg,.tv-player button:focus-visible svg{transform:scale(1.1)}
.tv-player:hover button circle,.tv-player button:focus-visible circle{fill:#004aad}
.tv-player button:active svg{transform:scale(.95);transition-duration:.09s}
.tv-player button:focus-visible{outline:3px solid #4b8bf5;outline-offset:-6px;border-radius:14px}

/* Riak sekali-jalan saat kursor masuk: memberi umpan balik tanpa berdenyut terus,
   yang mengganggu kalau kursor kebetulan diam di atas video. */
.tv-player button::after{content:"";position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-38px 0 0 -38px;
  border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}
.tv-player:hover button::after{animation:tvPulse .62s ease-out 1}
@keyframes tvPulse{
  0%{transform:scale(.85);opacity:.75}
  100%{transform:scale(1.55);opacity:0}
}
/* Begitu iframe menggantikan facade, tombolnya sudah tidak ada — aturan di atas
   tak berlaku lagi dengan sendirinya. */
@media (prefers-reduced-motion: reduce){
  .tv-player img,.tv-player button svg{transition:none}
  .tv-player:hover img{transform:none}
  .tv-player:hover button svg{transform:none}
  .tv-player:hover button::after{animation:none}
}
.tv-player iframe,.tv-player #tvYt{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-h1{font-size:clamp(20px,2.4vw,28px);color:#00377F;margin:18px 0 10px;font-weight:700;line-height:1.3}
.tv-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:#5a6472;font-size:13.5px;margin-bottom:18px}
.tv-meta img{width:30px;height:30px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:7px}
.tv-meta a{color:#004AAD;text-decoration:none}
.tv-desc{color:#2c3a4b;font-size:15.5px;line-height:1.75;white-space:pre-line;margin:0 0 24px}
/* Durasi overlay di thumbnail (ala YouTube). Pojok kanan bawah, di atas tombol play. */
.tv-player__dur{position:absolute;right:9px;bottom:9px;z-index:2;background:rgba(0,0,0,.78);color:#fff;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.2px;padding:4px 6px;border-radius:4px;pointer-events:none}
/* --- Deskripsi terlipat (ala YouTube). Dipotong CSS line-clamp: teks penuh TETAP
       ada di DOM, jadi tidak ada konten yang hilang dari crawler/pembaca layar. --- */
/* ===== Dual-pane Deskripsi + Transkrip =====
   Dua kotak abu-abu sejajar, keduanya terpotong. Klik salah satu -> kotak itu
   MELEBAR PENUH (span 2 kolom) dan naik ke baris atas; kotak satunya tetap
   terpotong, tetap selebar semula, dan TETAP DI KOLOMNYA (Deskripsi kiri,
   Transkrip kanan) — cuma turun satu baris. Karena itu grid-template-columns
   TIDAK pernah berubah; yang dipakai `grid-column` + `order`.
   Teks penuh SELALU ada di DOM — yang memotong cuma CSS line-clamp, bukan
   display:none — jadi crawler dan pembaca layar tetap dapat isinya. */
.tv-panes{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:18px}
.tv-panes--single{grid-template-columns:1fr}
.tv-panes > .tv-pane:nth-child(1){grid-column:1}
.tv-panes > .tv-pane:nth-child(2){grid-column:2}
.tv-panes--single > .tv-pane{grid-column:1}
.tv-panes.is-open > .tv-pane.is-open{grid-column:1/-1;order:1}
.tv-panes.is-open > .tv-pane:not(.is-open){order:2}

.tv-pane{position:relative;background:#f2f5f9;border:1px solid #e5eaf2;border-radius:12px;padding:12px 16px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.tv-pane:hover{border-color:#cfd9e8;background:#eef2f8}
.tv-pane.is-open{cursor:default;background:#f2f5f9;border-color:#e5eaf2}

.tv-pane__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;padding:0 0 8px;margin:0;font:inherit;text-align:left;cursor:pointer}
.tv-pane__title{font-size:15px;color:#00377F;font-weight:700}
/* Abu-abu, bukan biru: ini kontrol sekunder, bukan ajakan bertindak. */
.tv-pane__toggle{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#6b7789;flex:0 0 auto}
.tv-pane:hover .tv-pane__toggle{color:#41506a}
.tv-pane__chev{transition:transform .18s ease;position:relative;top:1px}
.tv-pane.is-open .tv-pane__chev{transform:rotate(180deg)}
.tv-pane__note{font-size:13px;color:#8894a4;margin:0 0 8px}

/* Batas potong: line-clamp memaksa elipsis "..." yang jelek, jadi dipakai
   tinggi tetap + gradasi memudar di kaki kotak. Tinggi = 5 baris x 1.75em. */
.tv-pane__body{position:relative;max-height:8.75em;overflow:hidden}
.tv-pane__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,245,249,0) 0%,rgba(242,245,249,.85) 55%,#f2f5f9 100%)}
.tv-pane:hover .tv-pane__body::after{background:linear-gradient(180deg,rgba(238,242,248,0) 0%,rgba(238,242,248,.85) 55%,#eef2f8 100%)}
.tv-pane.is-open .tv-pane__body{max-height:min(60vh,460px);overflow:auto;padding-right:4px}
.tv-pane.is-open .tv-pane__body::after,.tv-pane.is-full .tv-pane__body::after{display:none}
.tv-pane.is-full{cursor:default}
.tv-pane.is-full .tv-pane__body{max-height:none}
.tv-pane .tv-desc{margin:0}

@media(max-width:720px){
  .tv-panes,.tv-panes.is-open{grid-template-columns:1fr}
  .tv-panes > .tv-pane:nth-child(1),.tv-panes > .tv-pane:nth-child(2){grid-column:1}
}
.tv-side h3,.tv-block h3{font-size:15px;color:#00377F;margin:0 0 12px;font-weight:700}
.tv-block{margin:30px 0}
.tv-classcard{display:block;border:1px solid #e2e8f1;border-radius:14px;padding:16px;text-decoration:none;color:inherit;background:#fff}
.tv-classcard:hover{border-color:#004AAD;box-shadow:0 4px 18px rgba(0,74,173,.09)}
.tv-classcard .c{font-size:11px;font-weight:700;letter-spacing:.06em;color:#004AAD}
.tv-classcard .t{display:block;font-weight:650;color:#1f2b3a;margin:6px 0;line-height:1.4;font-size:15px}
.tv-classcard .d{font-size:13px;color:#5a6472}
.tv-cta{display:inline-block;margin-top:12px;background:#004AAD;color:#fff;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600}
.tv-list a{display:flex;gap:10px;text-decoration:none;color:inherit;margin-bottom:14px;align-items:flex-start}
.tv-list img{width:104px;height:59px;object-fit:cover;border-radius:7px;flex:0 0 auto;background:#e9eef5}
.tv-list span{font-size:13.5px;line-height:1.4;color:#1f2b3a;font-weight:600}
.tv-list a:hover span{color:#004AAD}
.tv-empty{padding:40px 0;text-align:center;color:#8894a4}

/* --- Diskusi dengan Expert --- */
.tv-qa{margin:34px 0 10px;padding-top:26px;border-top:1px solid #e8edf4}
.tv-qa__lead{color:#5a6472;font-size:14px;margin:-4px 0 16px}
.tv-qa__flash{background:#eef4fd;border:1px solid #d5e3f7;border-radius:9px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;color:#2c4a75}
.tv-qa__flash--err{background:#fdf0ef;border-color:#f6d4d0;color:#8c3a30}
.tv-qa__item{border:1px solid #e8edf4;border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fff}
.tv-qa__who{display:block;font-size:12px;font-weight:700;color:#8894a4;letter-spacing:.02em;margin-bottom:3px}
.tv-qa__who--exp{color:#004AAD}
.tv-qa__q p,.tv-qa__a p{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:#2c3a4b}
.tv-qa__a{border-left:3px solid #004AAD;padding-left:12px;margin-top:6px}
.tv-qa__a p{margin-bottom:0}
.tv-qa__empty{color:#8894a4;font-size:14px;margin-bottom:16px}
.tv-qa__form textarea{width:100%;border:1px solid #d8e0ea;border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:inherit;resize:vertical;margin-bottom:10px}
.tv-qa__form textarea:focus{outline:none;border-color:#004AAD}

/* --- Expert terkait (blok di bawah video) --- */
.tv-expert{display:flex;gap:16px;align-items:flex-start;border:1px solid #e2e8f1;border-radius:14px;padding:16px;text-decoration:none;color:inherit;background:#fff}
.tv-expert:hover{border-color:#004AAD;box-shadow:0 4px 18px rgba(0,74,173,.09)}
.tv-expert img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#e9eef5}
.tv-expert .n{font-weight:700;color:#1f2b3a;font-size:16px;display:block;margin-bottom:3px}
.tv-expert .s{font-size:13.5px;color:#5a6472;line-height:1.5}
/* Chip filter "Video Terkait" — bentuknya mengikuti chip kategori hub (.tv-chip),
   ukurannya lebih kecil karena duduk di sidebar. Menggulir mendatar kalau sempit,
   tanpa scrollbar yang terlihat. */
.tv-chips{display:flex;gap:6px;margin:2px 0 12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.tv-chips::-webkit-scrollbar{display:none}
.tv-chip2{flex:0 0 auto;font-size:12.5px;font-weight:600;padding:5px 12px;border:0;border-radius:999px;
  background:#f1f4fb;color:#334155;cursor:pointer;white-space:nowrap;font-family:inherit;transition:.15s}
.tv-chip2:hover{background:#e2e8fa;color:#004aad}
.tv-chip2.is-on{background:#004aad;color:#fff}
.tv-list[hidden]{display:none}

/* --- sidebar: daftar video terkait --- */
.tv-side .tv-list img{width:120px;height:68px}
.tv-side .tv-list--sm img{width:74px;height:52px}
.tv-side .tv-list--sm span{font-size:12.5px;font-weight:600}

/* --- produk terkait: 2 kartu berjajar --- */
.tv-prod{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
@media(max-width:720px){.tv-prod{grid-template-columns:1fr}}
.tv-prod .tk-card{height:100%}
/* --- expert: kartu keterangan (atas) & grid expert lain (bawah) --- */
.tv-expert{margin:14px 0 22px;align-items:center}
.tv-expert__body{flex:0 1 auto;min-width:0}
.tv-expert__meta{display:flex;gap:14px;flex:0 0 auto;color:#8894a4;font-size:13px;padding-left:12px}
@media(max-width:600px){.tv-expert__meta{display:none}}
/* Pill statistik di kanan kartu expert — SALINAN .texpp-stats/.texpp-stat dari
   experts/profile.css supaya tampil identik dengan hero halaman expert. */
.tv-expert__stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 auto;margin-left:12px}
.tv-stat{background:#e8eef7;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:700;color:#004aad;line-height:1.4;white-space:nowrap}
.tv-stat strong{color:inherit;font-weight:700}
.tv-stat--exp{white-space:normal;max-width:340px}
@media(max-width:820px){.tv-expert__stats{display:none}}
/* Kartu expert sebagai pengantar section diskusi: menempel ke kotak diskusi di
   bawahnya, tanpa jarak besar seperti waktu dia masih di header. */
.tv-expert--pre-qa{margin:30px 0 0}
.tv-expert--pre-qa + .tv-qa{margin-top:18px;padding-top:0;border-top:0}
/* --- sidebar: daftar video lebih besar --- */

/* --- Strip breadcrumb: SALINAN dari lp.css (.tlp-breadcrumb-bar).
       Disalin, bukan impor, supaya halaman video tak perlu menarik lp.css 52 KB.
       Kalau bar di lp.css berubah, samakan di sini. --- */
.tlp-breadcrumb-bar{background:#1a5fb4;padding:10px 0;font-family:"DM Sans",sans-serif}
.tlp-breadcrumb-inner{max-width:1320px;margin:0 auto;padding:0 12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
.tlp-breadcrumb-inner a{color:rgba(255,255,255,.85);text-decoration:none}
.tlp-breadcrumb-inner a:hover{color:#fff;text-decoration:underline}
.tlp-breadcrumb-inner .tlp-bc-sep{margin:0 8px;color:rgba(255,255,255,.45)}
.tlp-breadcrumb-inner .tlp-bc-cur{color:rgba(255,255,255,.7)}

/* --- Gate login di kotak diskusi.
       SALINAN aturan `.tblog-qa__gate` dari blog.css (kelas ditukar ke .tv-qa__login)
       supaya tampilannya identik dengan "Tanya Expert" di artikel blog, tanpa harus
       menarik blog.css 16 KB ke halaman video. Kalau gate di blog.css berubah,
       samakan di sini. --- */
.tv-qa__login{background:#f7f9fd;border:1px solid #dfe6f2;border-radius:10px;padding:26px 24px;text-align:center}
.tv-qa__login .tl-auth--compact{max-width:620px;margin:0 auto}
.tv-qa__login .tl-auth--compact #auth-title{font-size:21px;margin-bottom:1.25rem !important}
.tv-qa__login #method-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tv-qa__login .tl-method-btn{border-color:#dfe4ec;padding:14px 16px;font-size:15px}
.tv-qa__login .tl-method-btn:hover{border-color:#004aad}
/* Setelah metode dipilih: kembali ke lebar baca yang wajar */
.tv-qa__login #auth-banner,.tv-qa__login #form-login,.tv-qa__login #form-register,
.tv-qa__login #wrap-change,.tv-qa__login #email-checking{max-width:400px;margin-left:auto;margin-right:auto;text-align:left}
.tv-qa__login .alert{font-size:13.5px}
@media(max-width:900px){
  /* Kolom utama video lebih sempit daripada kolom artikel blog (ada sidebar 330px),
     jadi ambang 1-kolom dinaikkan dari 640px. */
  .tv-qa__login{padding:18px 15px}
  .tv-qa__login .tl-auth--compact{max-width:none}
  .tv-qa__login #method-buttons{grid-template-columns:1fr}
  .tv-qa__login .tl-auth--compact #auth-title{font-size:18px}
}
/* Judul & lead samakan dengan blog (.tblog-qa__title / __lead) */
.tv-qa h3{font-size:22px;font-weight:800;color:#00377f;margin:0 0 6px}
.tv-qa__lead{font-size:14.5px;color:#5a6478;margin:0 0 18px;line-height:1.6}
@media(max-width:640px){.tv-qa h3{font-size:19px}}