/* Putaran juri 2: perbaikan brand dan responsif. Dimuat paling akhir supaya menimpa aturan sebelumnya. */

/* ---------- Rekomendasi orang di aside beranda ---------- */
.aside .rec-person .av { flex: none; }
.aside .rec-person .av img.avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---------- Aside komunitas ---------- */
/* /about sudah menampilkan cover besar, jadi cover di aside tidak diulang */
.aside-nocover .ccard-side > img { display: none; }
@media (max-width: 1023px) {
  .aside-aside-community .ccard-side > img { display: none; }
}
@media (max-width: 900px) {
  /* di HP aside jatuh ke bawah konten: cukup baris ringkas "Level kamu" (dan tombol gabung untuk non-anggota) */
  .aside-aside-community { padding-top: 20px; padding-bottom: 24px; }
  .aside-aside-community .side-ccard.is-member, .aside-aside-community .side-lb30 { display: none; }
  .aside-aside-community .side-ccard + section { margin-top: 20px; }
  .aside-aside-community .side-ccard.is-member + section { margin-top: 0; }
  .aside-aside-community .ccard-side .nums, .aside-aside-community .ccard-side .url, .aside-aside-community .ccard-side p { display: none; }
  .aside-aside-community .ccard-side .in { padding: 14px 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .aside-aside-community .ccard-side h3 { font-size: 16px; }
  .aside-hide-m { display: none !important; }
}

/* ---------- /anggota di HP: tombol Pesan tetap sebaris dengan nama ---------- */
@media (max-width: 600px) {
  .mrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; flex-wrap: nowrap; }
  .mrow-actions { width: auto; padding-left: 0; grid-column: 3; grid-row: 1; align-self: start; flex-wrap: nowrap; }
  .mrow-actions:has(form) { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; margin-top: 10px; }
  .mrow-actions .btn-sm { height: 36px; }
  .mrow-actions a.btn-sm:only-child { width: 36px; padding: 0; justify-content: center; }
  .mrow .mbio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- /pesan "Mulai percakapan" ---------- */
.people-list strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) {
  .people-list .pm-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .people-list .pm-lbl { display: none; }
  .people-list small { white-space: nowrap; }
}

/* ---------- pelajaran tanpa video: ilustrasi tanpa ikon play, lebih pendek ---------- */
.video.lesson-ph { aspect-ratio: 21 / 9; background: var(--accent-soft); }
.lesson-ph img { object-position: 50% 45%; }

/* ---------- /k/:slug/about untuk tamu: dua kolom di layar lebar ---------- */
@media (min-width: 1024px) {
  .about-pub .about-grid { max-width: 1120px; }
  .about-pub .about-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; align-items: start; }
  .about-pub .about-main > * { grid-column: 1; }
  .about-pub .about-main > .join-box { grid-column: 2; grid-row: 1 / span 20; margin-top: 0; position: sticky; top: 88px; }
}

/* ---------- /masuk, /daftar, /lupa-password: panel ilustrasi di layar lebar ---------- */
.auth-split { width: 100%; display: grid; place-items: center; }
.auth-art { display: none; }
@media (min-width: 1024px) {
  .auth-body { padding: 0; place-items: stretch; }
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; place-items: center; }
  .auth-art { display: grid; justify-items: center; align-content: center; gap: 14px; align-self: stretch; padding: 48px; background: var(--accent-soft); text-align: center; }
  .auth-art img { width: min(420px, 80%); height: auto; border-radius: 24px; }
  .auth-tag { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; max-width: 420px; line-height: 1.3; margin-top: 12px; }
  .auth-sub { color: var(--muted); max-width: 380px; }
  .auth-split > .auth-card { margin: 48px 32px; }
}

/* ---------- 404 di dalam shell aplikasi ---------- */
.main .err-page { min-height: 0; padding: 40px 0 24px; }

/* ---------- /pengaturan: chip bagian satu baris yang bisa digeser ---------- */
@media (max-width: 760px) {
  .settings-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav a { flex: none; white-space: nowrap; }
}

/* ---------- /notifikasi: dua tombol satu baris ---------- */
.n-actions { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 600px) {
  .page-head:has(.n-actions) { flex-wrap: wrap; align-items: center; }
  .n-set { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .n-set-lbl { display: none; }
  .n-actions .btn-sm { height: 36px; }
}

/* ---------- /k/:slug/kursus (detail kelas) 768-1199: gambar selebar kartu ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .course-head { grid-template-columns: 1fr; }
  .course-head > img { max-width: none; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
}
@media (max-width: 767px) {
  .course-head > img { max-width: none; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
}

/* ---------- heatmap profil: label bulan yang terpotong di tepi kiri dipudarkan ---------- */
.heatmap-wrap.is-scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }

/* ---------- textarea komentar dan pesan: tanpa pegangan resize, tumbuh mengikuti isi ---------- */
.cmt-new textarea, .cmt textarea, .chat-form textarea { resize: none; field-sizing: content; max-height: 240px; overflow-y: auto; }
.cmt-new textarea, .cmt textarea { min-height: 48px; }

/* ---------- detail acara: durasi di baris sendiri tanpa pemisah ---------- */
.ev-facts .ev-dur { display: block; }
@media (max-width: 600px) { .mrow-main > .muted.small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ===================== Putaran juri 3 ===================== */

/* ---------- tab komunitas: tanda bisa digeser (pudar di tepi) ---------- */
.ctabs { padding-right: 16px; scroll-padding-inline: 40px; }
.ctabs.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ctabs.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.ctabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* ---------- Rekomendasi Diikuti di aside sempit (1024-1199): satu baris per orang ---------- */
.aside .rec small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .aside .rec .rec-comm { display: none; }
  .aside .rec .rec-btn { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; }
  .aside .rec .rec-lbl { display: none; }
}

/* ---------- kartu kursus: chip "Kelas" supaya beda dari kartu komunitas ---------- */
.kcard .kchip { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--accent-text); font-size: 12px; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(8,24,16,.35); }
.kcard .kchip svg { width: 14px; height: 14px; }

/* ---------- heatmap profil di layar lebar: 53 minggu mengisi penuh lebar kartu ---------- */
@media (min-width: 1200px) {
  .heatmap-wrap > .heatmap, .heatmap-wrap > .hm-months { width: 100%; padding-right: 0; }
  .heatmap-wrap > .heatmap { grid-template-columns: repeat(var(--weeks, 53), minmax(9px, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-columns: minmax(9px, 1fr); gap: 3px; }
  .heatmap-wrap > .heatmap i { width: auto; height: auto; aspect-ratio: 1; border-radius: 3px; }
  .heatmap-wrap > .hm-months { grid-template-columns: repeat(var(--weeks, 53), minmax(9px, 1fr)) !important; column-gap: 3px; }
}

/* ---------- /kelas untuk tamu: jarak ajakan gabung ke kartu ---------- */
.classroom .join-hint { margin-bottom: 18px; }

/* ===================== Putaran juri 4 ===================== */

/* ---------- tab komunitas di HP: tepi kanan/kiri diberi gradient + panah, scroll-snap ----------
   Gradient tampil default di layar sempit (tanpa menunggu JS); JS menambah .at-start/.at-end/.no-overflow
   pada .ctabs-wrap untuk menyembunyikan sisi yang sudah habis. Mask lama diganti overlay yang lebih jelas. */
.ctabs-wrap { position: relative; }
.ctabs.fade-r, .ctabs.fade-l, .ctabs.fade-l.fade-r { -webkit-mask-image: none; mask-image: none; }
.ctabs-more { display: none; }
@media (max-width: 900px) {
  .ctabs { scroll-snap-type: x proximity; scroll-behavior: smooth; }
  .ctabs a { scroll-snap-align: center; }
  .ctabs-more {
    position: absolute; top: 0; bottom: 1px; width: 52px; display: flex; align-items: center; border: 0; padding: 0;
    color: var(--accent); cursor: pointer; z-index: 2; transition: opacity .2s;
  }
  .ctabs-more-r { right: -16px; justify-content: flex-end; padding-right: 10px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 62%); }
  .ctabs-more-l { left: -16px; justify-content: flex-start; padding-left: 10px; background: linear-gradient(270deg, rgba(255,255,255,0), #fff 62%); opacity: 0; pointer-events: none; }
  .ctabs-wrap.at-end .ctabs-more-r, .ctabs-wrap.no-overflow .ctabs-more-r { opacity: 0; pointer-events: none; }
  .ctabs-wrap.scrolled .ctabs-more-l { opacity: 1; pointer-events: auto; }
  .pub-comm .ctabs-more-r { right: 0; }
  .pub-comm .ctabs-more-l { left: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .ctabs { scroll-behavior: auto; } }

/* ---------- /k/:slug/about (tamu): ringkasan pemilik, statistik, aturan singkat di kartu gabung yang sticky ---------- */
.join-summary { display: none; }
@media (min-width: 1024px) {
  .about-pub .join-summary { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
  .join-summary .js-owner { display: flex; align-items: center; gap: 12px; color: var(--text); }
  .join-summary .js-owner img { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); }
  .join-summary .js-owner span { display: grid; line-height: 1.3; }
  .join-summary small { color: var(--muted); font-size: 12.5px; }
  .join-summary .js-owner strong { font-weight: 500; font-size: 14.5px; }
  .join-summary .js-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .join-summary .js-stats li { display: grid; text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--accent-soft); line-height: 1.25; }
  .join-summary .js-stats strong { font-size: 18px; font-weight: 600; color: var(--text); }
  .join-summary .js-rules { display: grid; gap: 6px; }
  .join-summary .js-rules ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
}

/* ---------- kartu user sidebar: email satu baris dengan elipsis (sesuai dashboard/index.html acuan), alamat lengkap di title ---------- */
.user > div { min-width: 0; }
.user small.email { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; font-size: 12px; line-height: 1.35; max-width: 100%; }
@media (min-width: 1200px) { .nav .user { gap: 10px; } .nav .user > .avatar { width: 40px; height: 40px; } }

/* ---------- /masuk, /daftar, /lupa-password di HP dan tablet: ilustrasi ringkas + tagline di atas kartu ---------- */
@media (max-width: 1023.98px) {
  .auth-split { gap: 14px; align-content: center; }
  .auth-art {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
    width: 100%; max-width: 460px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--accent-soft);
  }
  .auth-art img { grid-row: 1 / span 2; width: 84px; height: 84px; object-fit: cover; border-radius: 14px; background: #fff; }
  .auth-tag { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; align-self: end; margin: 0; }
  .auth-sub { font-size: 13px; color: var(--muted); line-height: 1.4; align-self: start; margin: 0; }
}

/* ---------- putaran live 2: item "komunitas yang sedang dibuka" di sidebar (menggantikan penanda Diikuti) ---------- */
.menu-comm a .comm-ico { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; flex: none; background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.menu-comm a .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Komunitas Saya: warna judul konsisten, hover tidak berganti warna; penanda eksplisit untuk komunitas yang dibuka ---------- */
.aside .mine strong, .aside .mine:visited strong { color: var(--text); }
.aside .mine:hover strong { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.aside .mine.cur strong::after { content: "Sedang dibuka"; margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }

/* ---------- baris post tanpa thumbnail (ilustrasi bertema sudah terpakai di halaman ini, jadi tidak diulang) ---------- */
.row.row-noimg { grid-template-columns: minmax(0, 1fr) !important; }
.row.row-noimg .row-body { padding-left: 16px; border-left: 3px solid var(--accent-soft); }

/* ---------- kepala materi teks tanpa ilustrasi (pelajaran tidak memakai ulang cover kelas/komunitas) ---------- */
.lesson-head-txt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--accent-soft); margin-bottom: 8px; }
.lesson-head-txt .lh-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--accent); flex: none; }
.lesson-head-txt div { display: grid; line-height: 1.35; min-width: 0; }
.lesson-head-txt strong { font-weight: 600; font-size: 15.5px; }
.lesson-head-txt small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- putaran live 2: isi kolom halaman yang kontennya sedikit ---------- */
.list-end { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 16px; background: #fff; }
.list-end img { width: 120px; height: 75px; object-fit: cover; border-radius: 12px; background: var(--accent-soft); flex: none; }
.list-end div { display: grid; gap: 4px; min-width: 0; }
.list-end strong { font-weight: 600; font-size: 15px; }
.list-end p { margin: 0; line-height: 1.5; }
.list-end .linkbtn { justify-self: start; }
@media (max-width: 560px) { .list-end { gap: 12px; padding: 14px; } .list-end img { width: 84px; height: 56px; } }
.side-card { margin-top: 28px; }
.next-ev-body { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--accent-soft); color: var(--text); margin-top: 12px; }
.next-ev-body:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.next-ev-body .date { flex: none; background: #fff; }
.next-ev-txt { display: grid; gap: 3px; min-width: 0; line-height: 1.35; }
.next-ev-txt strong { font-weight: 600; font-size: 15px; }
.next-ev-txt small { color: var(--muted); font-size: 12.5px; }
.next-ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.next-ev-foot .more { margin-top: 0; }
.side-tip { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; }
.side-tip img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--accent-soft); }
.side-tip strong { font-weight: 600; font-size: 15.5px; }
.side-tip p { margin: 0; line-height: 1.5; }
.side-tip .btn { justify-self: start; }

/* ---------- juri LIVE putaran 3 ---------- */
/* Gutter samping sedang (40px) untuk 768-1200px: landing, halaman publik, header, dan footer ikut satu kontainer */
@media (min-width: 768px) { .wrap { width: min(1180px, 100% - 80px); } }
/* /k/:slug/about untuk tamu: grid dua kolom selebar kontainer header dan footer */
@media (min-width: 1024px) { .about-pub .about-grid { max-width: none; } }
/* Ikon header Pesan/Notifikasi aktif saat halamannya dibuka */
.searchbar .bell.on, .topbar .iconbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.searchbar .bell.on svg, .topbar .iconbtn.on svg { color: var(--accent); }
/* Hitungan di item sidebar Pesan/Notifikasi memakai gaya yang sama dengan Acara */
.menu a .count { margin-left: auto; }
/* Kolom kanan halaman member umum (pesan, notifikasi, pengaturan, tersimpan, riwayat) disembunyikan di HP */
@media (max-width: 767.98px) {
  .aside-aside-default, .aside-aside-messages { display: none !important; }
}
/* Header landing di HP: tombol Daftar Gratis tampil di samping hamburger seperti halaman publik lain */
.hero .topnav .actions > .btn.go-m { display: none; }
@media (max-width: 600px) {
  .hero .topnav .actions > .btn.go-m { display: inline-flex; height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 374px) { .hero .topnav .actions > .btn.go-m { display: none; } }