/* Dosen AI — hub, detail, kelas, admin. Navy tokens, light/dark aware. */ .dsn-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; } .dsn-head h1 { font-size: 1.6rem; margin: 0 0 6px; color: var(--c-text, #e8eefc); } .dsn-head p { color: var(--c-text-muted, #9fb0cc); margin: 0; } .dsn-hero { background: var(--grad-primary); border-radius: 16px; padding: 26px 22px; color: #0A0F1E; margin-bottom: 22px; } .dsn-hero h1 { color: #0A0F1E; font-size: 1.7rem; margin: 0 0 8px; } .dsn-hero p { color: rgba(10,15,30,.78); margin: 0; max-width: 640px; } .dsn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; } .dsn-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card, #131c2e); border: 1px solid var(--c-line, #24314d); border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s; } .dsn-card:hover { border-color: var(--c-accent, #3b82f6); transform: translateY(-2px); } .dsn-avatar { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0e1626; display: block; } .dsn-avatar-ph { width: 100%; aspect-ratio: 4/3; display: grid; place-items: center; background: var(--grad-primary); color: #0A0F1E; font-size: 2.4rem; font-weight: 800; } .dsn-card-body { padding: 14px; } .dsn-card-body h3 { margin: 0 0 3px; font-size: 1.02rem; color: var(--c-text, #e8eefc); } .dsn-card-body .dsn-title { color: var(--c-text-muted, #9fb0cc); font-size: .82rem; } .dsn-field-tag { display: inline-block; margin-top: 8px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--c-accent-bright, #60a5fa); padding: 3px 10px; border-radius: 999px; font-size: .78rem; } .dsn-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:600; } .dsn-badge.active { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); } .dsn-badge.draft { background: rgba(148,163,184,.16); color: var(--c-text-muted,#9fb0cc); } .dsn-badge.archived { background: rgba(248,113,113,.14); color: var(--c-danger,#f87171); } .dsn-badge.free { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); } .dsn-badge.paid_idr { background: rgba(251,191,36,.16); color: var(--c-warning,#fbbf24); } .dsn-badge.subscription { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--c-accent-bright,#60a5fa); } .dsn-panel { background: var(--bg-card, #131c2e); border: 1px solid var(--c-line, #24314d); border-radius: 14px; padding: 18px; margin-bottom: 16px; } .dsn-panel h2 { font-size: 1.08rem; margin: 0 0 12px; color: var(--c-text, #e8eefc); } .dsn-muted { color: var(--c-text-muted, #9fb0cc); } .dsn-field { margin-bottom: 12px; } .dsn-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--c-text-soft, #c4d0e6); } .dsn-field input, .dsn-field select, .dsn-field textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; background: var(--bg-input, #0e1626); border: 1px solid var(--c-line, #24314d); color: var(--c-text, #e8eefc); font: inherit; } .dsn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width:560px){ .dsn-row { grid-template-columns: 1fr; } } .dsn-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:600; font-size:.9rem; text-decoration:none; background: var(--c-accent,#2563eb); color:#fff; } .dsn-btn:hover { filter: brightness(1.08); } .dsn-btn.ghost { background: transparent; border:1px solid var(--c-line-strong,#3a4a6b); color: var(--c-text,#e8eefc); } .dsn-btn.ok { background: var(--c-success,#16a34a); } .dsn-btn.bad { background: var(--c-danger,#dc2626); } .dsn-btn.sm { padding:6px 12px; font-size:.82rem; } .dsn-btn:disabled { opacity:.5; cursor:not-allowed; } .dsn-actions { display:flex; gap:8px; flex-wrap:wrap; } .dsn-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; } .dsn-stat { background: var(--bg-card,#131c2e); border:1px solid var(--c-line,#24314d); border-radius:12px; padding:14px; } .dsn-stat .n { font-size:1.5rem; font-weight:800; color: var(--c-text,#e8eefc); } .dsn-stat .l { font-size:.76rem; color: var(--c-text-muted,#9fb0cc); } .dsn-table { width:100%; border-collapse:collapse; font-size:.87rem; } .dsn-table th, .dsn-table td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--c-line,#24314d); } .dsn-table th { color: var(--c-text-muted,#9fb0cc); font-size:.78rem; } .dsn-note { padding:11px 13px; border-radius:10px; font-size:.86rem; margin-bottom:12px; } .dsn-note.info { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--c-accent-bright,#60a5fa); } .dsn-note.ok { background: rgba(52,211,153,.12); color: var(--c-success,#34d399); } .dsn-note.warn { background: rgba(251,191,36,.12); color: var(--c-warning,#fbbf24); } .dsn-syl-row { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; } .dsn-syl-row input { flex:1; } .dsn-pill { background: rgba(148,163,184,.12); padding:2px 8px; border-radius:6px; font-size:.74rem; } .dsn-pill.official { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); } .dsn-pill.foundation { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--c-accent-bright,#60a5fa); } /* Ruang kelas */ .dsn-class { max-width: 1100px; margin: 0 auto; padding: 16px; } .dsn-stage { display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; } @media (max-width:820px){ .dsn-stage { grid-template-columns: 1fr; } } .dsn-lecturer { position:relative; background:#0b1220; border-radius:16px; overflow:hidden; aspect-ratio: 4/3; display:grid; place-items:center; } .dsn-lecturer img, .dsn-lecturer video { width:100%; height:100%; object-fit:cover; } .dsn-lecturer .ph { font-size:4rem; font-weight:800; color:#fff; } /* Avatar 3D menutupi seluruh kotak dosen saat aktif. `hidden` dari HTML tetap menang (display:none) sampai JS memastikan render benar-benar jalan — jadi perangkat yang tak sanggup tidak pernah melihat kanvas kosong. */ .dsn-lecturer canvas.dsn-avatar3d { position:absolute; inset:0; width:100%; height:100%; z-index:1; } .dsn-lecturer.speaking { box-shadow: 0 0 0 3px var(--c-accent,#3b82f6), 0 0 32px color-mix(in oklab, var(--accent) 50%, transparent); } /* Lip-sync 2D: --talk (0..1) dari amplitudo suara TTS → ilusi rahang bergerak + sedikit "hidup" pada foto. Biaya Rp0/menit, real-time di browser, no uncanny. */ .dsn-lecturer img.lk-face, .dsn-lecturer .ph { transform-origin: center 66%; transition: transform .06s linear, filter .1s linear; } .dsn-lecturer.speaking img.lk-face, .dsn-lecturer.speaking .ph { transform: scaleY(calc(1 + var(--talk,0) * 0.06)) scale(calc(1 + var(--talk,0) * 0.012)); filter: brightness(calc(1 + var(--talk,0) * 0.07)); } .dsn-lecturer .lbl { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.55); color:#fff; padding:5px 12px; border-radius:8px; font-size:.85rem; } .dsn-me { background:#0b1220; border-radius:14px; overflow:hidden; aspect-ratio: 4/3; position:relative; } .dsn-me video { width:100%; height:100%; object-fit:cover; } /* Placeholder kamera-off peserta: avatar sendiri / inisial */ .dsn-me .me-ph { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:2.4rem; font-weight:800; } .dsn-me .me-ph::before { content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:var(--grad-primary); opacity:.28; } .dsn-me .me-ph img { width:88px; height:88px; border-radius:50%; object-fit:cover; position:relative; } .dsn-ctl { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; } /* Kolom chat kelas — diskusi teks + unggah dokumen latihan (dosen bisa mengoreksi) */ /* ⚠️ `minmax(0,1fr)`, BUKAN `1fr`. `1fr` = minmax(auto,1fr): kolom mengikuti lebar MINIMUM isinya. Setelah keluar dari layar penuh, xterm masih memegang lebar piksel layar penuh di dalam terminal → kolom utama terkunci 996 px di ruang 960 px, meluap menutupi chat, dan fit() tidak bisa mengecilkannya karena wadahnya sendiri yang melebar (terukur Playwright 1366×768, 6 Sep 2026). Dengan minmax(0,…) kolom kembali ke ruangnya dan terminal di-refit. */ .dsn-room { display:grid; grid-template-columns: minmax(0,1fr) 330px; gap:16px; align-items:start; } .dsn-main, .dsn-stage, .dsn-term-layar, .dsn-meja-stage { min-width: 0; } .dsn-term-layar { overflow: hidden; } @media (max-width:980px){ .dsn-room { grid-template-columns: 1fr; } } .dsn-chat { background: var(--bg-card,#131c2e); border:1px solid var(--c-line,#24314d); border-radius:14px; display:flex; flex-direction:column; height:560px; } @media (max-width:980px){ .dsn-chat { height:420px; } } .dsn-chat-head { padding:12px 14px; font-weight:700; font-size:.92rem; color:var(--c-text,#e8eefc); border-bottom:1px solid var(--c-line,#24314d); display:flex; gap:8px; align-items:center; } .dsn-chat-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; } .dsn-msg { max-width:92%; font-size:.86rem; line-height:1.45; border-radius:12px; padding:8px 11px; overflow-wrap:anywhere; } .dsn-msg .who { display:block; font-size:.7rem; font-weight:700; opacity:.75; margin-bottom:2px; } .dsn-msg.dosen { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--c-text,#e8eefc); align-self:flex-start; border-bottom-left-radius:4px; } .dsn-msg.me { background: var(--c-accent,#2563eb); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; } .dsn-msg.sys { background: rgba(148,163,184,.14); color: var(--c-text-muted,#9fb0cc); align-self:center; font-size:.76rem; padding:5px 10px; border-radius:999px; } .dsn-msg .mn { font-weight:800; } .dsn-msg.dosen .mn { color: var(--c-accent-bright,#60a5fa); } .dsn-chat-form { display:flex; gap:8px; padding:10px; border-top:1px solid var(--c-line,#24314d); align-items:center; } #dsnChatInput { flex:1; min-width:0; padding:9px 11px; border-radius:9px; background: var(--bg-input,#0e1626); border:1px solid var(--c-line,#24314d); color:var(--c-text,#e8eefc); font:inherit; } .dsn-chat-attach { cursor:pointer; display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:9px; border:1px solid var(--c-line,#24314d); color:var(--c-text-muted,#9fb0cc); } .dsn-chat-attach:hover { border-color: var(--c-accent,#3b82f6); color: var(--c-accent-bright,#60a5fa); } /* Tombol Latar aktif di kelas */ .dsn-btn.ghost.on { border-color: var(--c-accent, #3b82f6); color: var(--c-accent-bright, #60a5fa); } /* ── Panggung share layar + pin/fullscreen per card (kelas dosen) ─────────── */ .dsn-share { position:relative; background:#0b1220; border-radius:16px; overflow:hidden; margin-bottom:16px; } .dsn-share-wrap video { width:100%; max-height:56vh; display:block; object-fit:contain; background:#000; } .dsn-share-full { position:absolute; top:10px; right:10px; z-index:3; width:34px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:grid; place-items:center; } .dsn-share-full:hover { background:rgba(0,0,0,.75); } .dsn-box-btns { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:3; opacity:0; transition:opacity .15s; } .dsn-lecturer:hover .dsn-box-btns, .dsn-me:hover .dsn-box-btns { opacity:1; } .dsn-box-btns button { width:32px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:grid; place-items:center; } .dsn-box-btns button:hover { background:rgba(0,0,0,.75); } .dsn-box-btns .ic, .dsn-box-btns svg { width:15px; height:15px; } /* Pin: perbesar salah satu card (dosen / kamera kamu) */ .dsn-stage.pin-lect { grid-template-columns: 3fr 1fr; } .dsn-stage.pin-me { grid-template-columns: 1fr 3fr; } /* ── Perangkat Ajar: slide di panggung kelas ──────────────────────────────── */ .dsn-share-wrap { position: relative; } .dsn-share-wrap .slide-img { width: 100%; max-height: 56vh; object-fit: contain; background: #000; display: block; } .slide-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(0,0,0,.62); color: #fff; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; } /* Saat slide tayang: tile dosen + kamu mengecil jadi baris kompak di bawah slide */ .dsn-class.slide-on .dsn-stage, .dsn-class.cobrowse-on .dsn-stage { grid-template-columns: 170px 170px; justify-content: center; } @media (max-width:560px){ .dsn-class.slide-on .dsn-stage, .dsn-class.cobrowse-on .dsn-stage { grid-template-columns: 1fr 1fr; } } /* Co-browse aktif (NON-fullscreen): panggung app = VIEW UTAMA, lebar penuh + tinggi memadai. Tanpa ini stage tak ber-ukuran → iframe ter-skala ke kotak kecil (mis. 416px saat DevTools terbuka) → app & kursor nyaris tak terlihat. */ .dsn-class.cobrowse-on #dsnCobrowseStage { width: 100%; height: 68vh; min-height: 420px; margin-bottom: 12px; } .dsn-file { color: var(--c-accent-bright, #60a5fa); text-decoration: underline; word-break: break-word; font-weight: 600; } /* ── Layar Penuh SELURUH ruang kelas (ala Zoom): dosen + kamu + slide + chat ── Pakai kelas .dsn-fs (di-set JS pada fullscreenchange), BUKAN :fullscreen — agar styling jalan lintas-browser TERMASUK Safari/WebKit berprefiks. */ .dsn-room.dsn-fs { width: 100vw; height: 100vh; padding: 16px; box-sizing: border-box; background: var(--bg, #0a0e1a); overflow: hidden; grid-template-columns: minmax(0,1fr) 320px; /* ⚠️ BARIS GRID HARUS PASTI. Tanpa `minmax(0,1fr)` barisnya `auto` — ia tumbuh mengikuti isi kolom chat, melewati 100vh, dan `overflow:hidden` memotong bagian bawah: "diskusi kelas kalau makin panjang memotong tampilan" (Rio, 6 Sep 2026). Dengan baris pasti, chat mengisi tinggi ruang dan daftar pesannya yang menggulir. */ grid-template-rows: minmax(0, 1fr); align-items: stretch; /* override align-items:start base → kolom melar penuh 100vh */ } .dsn-room.dsn-fs .dsn-main { display: flex; flex-direction: column; min-height: 0; gap: 10px; } /* Tile peserta = BOX 16:9 rapi, di-tengah, WRAP (tahan banyak peserta) — bukan persegi-panjang melar. Ukuran menyesuaikan tinggi ruang yang tersedia. */ .dsn-room.dsn-fs .dsn-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; grid-template-columns: none; } .dsn-room.dsn-fs .dsn-lecturer, .dsn-room.dsn-fs .dsn-me { aspect-ratio: 16 / 9; height: min(100%, 46vh); width: auto; max-width: 46vw; flex: 0 0 auto; } .dsn-room.dsn-fs .dsn-share { flex: 2 1 auto; min-height: 0; margin-bottom: 0; } /* Co-browse aktif + fullscreen: panggung co-browse isi ruang, tile jadi strip kompak (jangan pakai height:64vh tetap → cards lain terpotong). */ .dsn-room.dsn-fs #dsnCobrowseStage { flex: 2 1 auto; min-height: 0; height: auto; margin-bottom: 0; } .dsn-class.cobrowse-on .dsn-room.dsn-fs .dsn-stage, .dsn-class.meja-on .dsn-room.dsn-fs .dsn-stage, .dsn-class.slide-on .dsn-room.dsn-fs .dsn-stage { flex: 0 0 auto; height: 172px; } /* ── Panggung MEJA PERAGA di layar penuh ────────────────────────────────── ⚠️ Tanpa blok ini panggung meja memakai aturan dasarnya (video 16:9 selebar ruang), memakan seluruh tinggi, dan mendorong tile peserta + dosen ke luar layar. Terlaporkan langsung: "pas layar penuh, tampilan peserta dan dosen AI-nya terpotong". Perlakuannya disamakan dengan panggung co-browse: meja melar mengisi sisa ruang, tile jadi strip 172px (aturan di atas). */ .dsn-room.dsn-fs .dsn-meja-stage { flex: 2 1 auto; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; } .dsn-room.dsn-fs .dsn-meja-stage .dsn-meja-kepala { flex: 0 0 auto; } /* Terminal pendamping di layar penuh: berbagi tinggi dengan meja, tidak memaksa 340px. */ .dsn-room.dsn-fs .dsn-term-stage { flex: 1 1 auto; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; } .dsn-room.dsn-fs .dsn-term-stage .dsn-term-kepala { flex: 0 0 auto; } .dsn-room.dsn-fs .dsn-term-stage .dsn-term-layar { flex: 1 1 auto; min-height: 120px; height: auto; } /* `aspect-ratio` dari aturan dasar HARUS dipatahkan di sini: rasio tetap + lebar penuh = tinggi yang dipaksakan, dan itulah yang memotong kartu lain. */ .dsn-room.dsn-fs .dsn-meja-stage video { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; object-fit: contain; } .dsn-room.dsn-fs .dsn-meja-tunggu { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .dsn-room.dsn-fs .dsn-share-wrap { height: 100%; } .dsn-room.dsn-fs .dsn-share-wrap .slide-img { max-height: 100%; height: 100%; } /* Chat di layar penuh: tinggi dari baris grid (bukan 560px tetap), daftar pesan menggulir di dalam. `min-height:0` wajib — tanpa itu flex item menolak menyusut di bawah tinggi isinya dan kembali memotong. */ .dsn-room.dsn-fs .dsn-chat { height: auto; min-height: 0; max-height: 100%; } .dsn-room.dsn-fs .dsn-chat-list { min-height: 0; } .dsn-room.dsn-fs .dsn-main { overflow: hidden; } /* ── Layar penuh PER KARTU (fokus satu kartu) ─────────────────────────── */ .dsn-kartu-full { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--c-line-strong, #3a4a6b); background: rgba(10,14,26,.6); color: var(--c-text, #e8eefc); display: grid; place-items: center; cursor: pointer; } .dsn-kartu-full:hover { border-color: var(--c-accent, #3b82f6); } .dsn-kartu-full svg { width: 14px; height: 14px; } .dsn-meja-stage:fullscreen, .dsn-term-stage:fullscreen { width: 100vw; height: 100vh; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; background: #05070d; } .dsn-meja-stage:fullscreen video { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; object-fit: contain; } .dsn-term-stage:fullscreen .dsn-term-layar { flex: 1 1 auto; min-height: 0; height: auto; } .dsn-room.dsn-fs #dsnStatus { flex: 0 0 auto; margin: 0; } .dsn-room.dsn-fs .dsn-ctl { flex: 0 0 auto; margin: 0; } /* (strip slide + co-browse kompak digabung di atas; tile = BOX 16:9 dari rule dasar, height min(100%,46vh) → dalam strip 172px jadi box ~306×172, rapi & wrap) */ @media (max-width:820px){ .dsn-room.dsn-fs { grid-template-columns: 1fr; } } /* ── Badge sisa MENIT Dosen AI (jatah per tier, reset bulanan) ─────────────── Navy brand (bukan ungu). State .low = sisa menipis → warning tanpa alarm. */ .dsn-minutes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(29, 78, 216, .12); border: 1px solid rgba(29, 78, 216, .32); color: var(--c-text-soft, #c4d0e6); font-size: .86rem; line-height: 1.4; } .dsn-minutes strong { color: var(--c-text, #e8eefc); font-weight: 650; } .dsn-minutes svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; } .dsn-minutes .dsn-muted { font-size: .8rem; } .dsn-minutes.low { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .36); } .dsn-minutes .dsn-btn.sm { margin-left: 4px; } /* Tajuk seksi kelas mandiri di hub dosen. Dipisah dari daftar dosen dengan garis, karena keduanya produk yang berbeda meski sama-sama disebut "kelas". */ .dsn-kur-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 34px 0 10px; padding-top: 26px; border-top: 1px solid var(--c-line, rgba(255,255,255,.1)); } .dsn-kur-head h2 { color: var(--c-text, #e8eefc); font-size: 1.15rem; margin: 0; } /* ── Tanda hidup/mati Mic & Kamera ──────────────────────────────────────── ⚠️ Tandanya TIDAK boleh hanya warna. Peserta yang buta warna tidak membedakan biru dari merah, jadi keadaan "mati" juga membawa garis coret pada ikon dan kata "mati" pada labelnya (dipasang dsn-class.js). */ .dsn-btn.ghost.mati { border-color: var(--c-danger, #e0645c); color: var(--c-danger, #e0645c); } .dsn-btn.ghost.mati svg { opacity: .85; } /* Garis coret melintang di atas ikon: tanda "mati" yang terbaca tanpa warna. */ .dsn-btn.ghost.mati .dsn-kendali-teks::before { content: ""; position: absolute; left: 6px; top: 50%; width: 22px; height: 2px; background: currentColor; transform: rotate(-20deg); border-radius: 1px; } .dsn-btn.ghost.mati { position: relative; } /* ── Panggung Meja Peraga di dalam kelas ────────────────────────────────── Panggungnya TAMPIL sejak awal dengan keterangan; hanya