/*
 * Tema halaman publik Kelas Digital (beranda, detail video, stream CCTV, login).
 * Token warna & tipografi sama dengan desain aplikasi mobile (Figma "android kelas digital"):
 * ColorScheme Material 3 dengan primary #015440, aksen oranye/biru dari logo, font Poppins.
 */
:root {
    --kd-primary: #015440;
    --kd-primary-hover: #013f33;
    --kd-on-primary: #ffffff;
    --kd-primary-container: #cfeadf;
    --kd-on-primary-container: #00271d;
    --kd-secondary: #e8622c;
    --kd-secondary-container: #ffe1d4;
    --kd-on-secondary-container: #3a1100;
    --kd-tertiary-container: #d7eefa;
    --kd-on-tertiary-container: #00324a;
    --kd-surface: #ffffff;
    --kd-surface-low: #f5f8f6;
    --kd-surface-container: #edf2ef;
    --kd-surface-high: #e3eae6;
    --kd-on-surface: #1a1c1b;
    --kd-on-surface-variant: #5c6560;
    --kd-outline: #bac4bf;
    --kd-outline-variant: #e0e6e2;
    --kd-live: #e53935;
    --kd-success: #1e8e3e;
    --kd-radius-sm: 8px;
    --kd-radius: 12px;
    --kd-radius-lg: 16px;
    --kd-navbar-height: 64px;

    /* Selaraskan komponen Bootstrap dengan token di atas */
    --bs-primary: var(--kd-primary);
    --bs-primary-rgb: 1, 84, 64;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--kd-on-surface);
    --bs-body-bg: var(--kd-surface);
    --bs-link-color: var(--kd-primary);
    --bs-link-color-rgb: 1, 84, 64;
    --bs-link-hover-color: var(--kd-primary-hover);
    --bs-border-color: var(--kd-outline-variant);
    --bs-secondary-color: var(--kd-on-surface-variant);
}

body.kd-public {
    font-family: var(--bs-body-font-family);
    color: var(--kd-on-surface);
    background: var(--kd-surface);
    -webkit-font-smoothing: antialiased;
}

.kd-public a { text-decoration: none; }
.kd-public :focus-visible { outline: 2px solid var(--kd-primary); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.kd-public .btn { font-weight: 500; border-radius: 999px; }
.kd-public .btn-primary { --bs-btn-bg: var(--kd-primary); --bs-btn-border-color: var(--kd-primary); --bs-btn-hover-bg: var(--kd-primary-hover); --bs-btn-hover-border-color: var(--kd-primary-hover); --bs-btn-active-bg: var(--kd-primary-hover); --bs-btn-active-border-color: var(--kd-primary-hover); --bs-btn-disabled-bg: var(--kd-primary); --bs-btn-disabled-border-color: var(--kd-primary); }
.kd-public .btn-tonal { background: var(--kd-primary-container); color: var(--kd-on-primary-container); border: 0; }
.kd-public .btn-tonal:hover { background: #bfe0d3; color: var(--kd-on-primary-container); }
.kd-public .btn-outline-kd { border: 1px solid var(--kd-outline); color: var(--kd-on-surface); background: var(--kd-surface); }
.kd-public .btn-outline-kd:hover { background: var(--kd-surface-low); border-color: var(--kd-outline); color: var(--kd-on-surface); }
.kd-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: transparent; color: var(--kd-on-surface); font-size: 1.25rem; }
.kd-icon-btn:hover { background: var(--kd-surface-container); }

/* ---------- Navbar ---------- */
.kd-navbar { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--kd-outline-variant); }
.kd-navbar .kd-brand img { height: 36px; width: auto; }
@media (max-width: 575.98px) {
    /* logo 600×99: di 26px lebarnya ±158px, cukup untuk menu + cari + tombol Masuk di layar 360px */
    .kd-navbar .kd-brand img { height: 26px; }
    .kd-navbar .kd-navbar-inner { padding-left: 8px !important; padding-right: 12px !important; }
}
.kd-search { position: relative; width: 100%; max-width: 560px; }
.kd-search .form-control { height: 44px; border-radius: 999px; padding-left: 44px; padding-right: 16px; background: var(--kd-surface-low); border: 1px solid var(--kd-outline-variant); font-size: .95rem; }
.kd-search .form-control:focus { background: var(--kd-surface); border-color: var(--kd-primary); box-shadow: 0 0 0 3px rgba(1, 84, 64, .12); }
.kd-search .kd-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kd-on-surface-variant); pointer-events: none; }
.kd-navbar-inner { height: var(--kd-navbar-height); }
.kd-mobile-search { padding: 0 16px 12px; }

/* ---------- Avatar ---------- */
.kd-avatar { position: relative; --size: 40px; width: var(--size); height: var(--size); border-radius: 50%; flex: 0 0 var(--size); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--kd-primary-container); color: var(--kd-on-primary-container); font-weight: 500; font-size: calc(var(--size) * .38); line-height: 1; text-transform: uppercase; }
.kd-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kd-avatar-sm { --size: 32px; }
.kd-avatar-btn { border: 0; padding: 0; background: none; border-radius: 50%; }
.kd-avatar-btn::after { display: none; }

/* ---------- Side navigation (desktop sidebar & offcanvas) ---------- */
.kd-sidenav { position: sticky; top: calc(var(--kd-navbar-height) + 16px); max-height: calc(100vh - var(--kd-navbar-height) - 32px); overflow-y: auto; }
.kd-sidenav .kd-sidenav-title { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kd-on-surface-variant); padding: 16px 12px 8px; }
.kd-sidenav .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 999px; color: var(--kd-on-surface); font-size: .9rem; }
.kd-sidenav .nav-link i { font-size: 1.1rem; color: var(--kd-on-surface-variant); }
.kd-sidenav .nav-link:hover { background: var(--kd-surface-container); }
.kd-sidenav .nav-link.active { background: var(--kd-primary-container); color: var(--kd-on-primary-container); font-weight: 600; }
.kd-sidenav .nav-link.active i { color: var(--kd-on-primary-container); }
.kd-sidenav .nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Filter chips ---------- */
.kd-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kd-chips::-webkit-scrollbar { display: none; }
.kd-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--kd-outline); background: var(--kd-surface); color: var(--kd-on-surface); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background .15s; }
.kd-chip:hover { background: var(--kd-surface-low); color: var(--kd-on-surface); }
.kd-chip.active { background: var(--kd-on-surface); border-color: var(--kd-on-surface); color: var(--kd-surface); }
.kd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kd-live); display: inline-block; flex: 0 0 8px; }
.kd-live-dot.pulse { box-shadow: 0 0 0 0 rgba(229, 57, 53, .6); animation: kd-pulse 1.8s infinite; }
@keyframes kd-pulse { 70% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .kd-live-dot.pulse { animation: none; } }

/* ---------- Section header ---------- */
.kd-section-title { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; margin: 0; }

/* ---------- Thumbnail ---------- */
.kd-thumb { position: relative; border-radius: var(--kd-radius); overflow: hidden; background: var(--kd-surface-container); aspect-ratio: 16 / 9; }
/* img ditumpuk di atas placeholder; jika gagal dimuat (onerror → remove), placeholder yang terlihat */
.kd-thumb > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.kd-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .9); background: linear-gradient(135deg, #013328 0%, #0b8a63 100%); }
.kd-thumb-placeholder.is-cctv { background: linear-gradient(135deg, #1f2a30 0%, #3c4b52 100%); }
.kd-thumb-placeholder.is-zoom { background: linear-gradient(135deg, #1c5fa8 0%, #2a9fd6 100%); }
.kd-thumb-placeholder::before, .kd-thumb-placeholder::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.kd-thumb-placeholder::before { width: 55%; aspect-ratio: 1; right: -12%; top: -25%; }
.kd-thumb-placeholder::after { width: 45%; aspect-ratio: 1; left: -15%; bottom: -30%; }
.kd-thumb-placeholder .kd-thumb-icon { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.kd-thumb.is-offline { filter: grayscale(.6); opacity: .75; }
.kd-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5; }
.kd-badge.is-live { top: 8px; left: 8px; background: var(--kd-live); color: #fff; }
.kd-badge.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.kd-badge.is-offline { top: 8px; left: 8px; background: rgba(0, 0, 0, .65); color: #fff; }
.kd-badge.is-type { bottom: 8px; right: 8px; background: rgba(0, 0, 0, .7); color: #fff; text-transform: uppercase; }

/* ---------- Video card ---------- */
.kd-card { display: block; color: inherit; border-radius: var(--kd-radius-lg); }
.kd-card:hover { color: inherit; }
.kd-card:hover .kd-thumb > img { transform: scale(1.03); }
.kd-card-body { display: flex; gap: 12px; padding-top: 12px; }
.kd-card-title { font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-meta { font-size: .8rem; color: var(--kd-on-surface-variant); line-height: 1.5; }
.kd-verified { color: var(--kd-primary); font-size: .8em; }

/* ---------- Compact list item (Video/CCTV lainnya) ---------- */
.kd-list-item { display: flex; gap: 12px; color: inherit; padding: 6px; margin: -6px; border-radius: var(--kd-radius); }
.kd-list-item:hover { background: var(--kd-surface-low); color: inherit; }
.kd-list-item .kd-thumb { flex: 0 0 168px; width: 168px; border-radius: var(--kd-radius-sm); }
.kd-list-item .kd-thumb-icon { width: 36px; height: 36px; font-size: 1.1rem; }
.kd-list-item .kd-card-title { font-size: .875rem; }

/* ---------- Detail page ---------- */
.kd-player { border-radius: var(--kd-radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.kd-player video, .kd-player .video-js { width: 100%; height: 100%; display: block; }
/* Pesan kosong/offline bisa lebih tinggi dari kotak 16:9 di layar sempit */
.kd-player.is-empty { aspect-ratio: auto; min-height: 220px; display: flex; }
.kd-player.is-empty .kd-player-empty { flex: 1; }
@media (min-width: 768px) { .kd-player.is-empty { aspect-ratio: 16 / 9; } }
.kd-player-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; color: rgba(255, 255, 255, .85); background: linear-gradient(135deg, #1f2a30 0%, #3c4b52 100%); text-align: center; padding: 24px; }
.kd-player-empty > i { font-size: 2.5rem; opacity: .9; }
.kd-detail-title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 600; line-height: 1.35; margin: 16px 0 4px; }
.kd-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: var(--kd-radius-sm); background: var(--kd-tertiary-container); color: var(--kd-on-tertiary-container); font-size: .8rem; font-weight: 500; }
.kd-tag:hover { color: var(--kd-on-tertiary-container); filter: brightness(.97); }
.kd-panel { background: var(--kd-surface-low); border: 1px solid var(--kd-outline-variant); border-radius: var(--kd-radius-lg); padding: 16px 20px; }
.kd-ai-card { background: var(--kd-surface-low); border: 1.5px solid var(--kd-primary-container); border-radius: var(--kd-radius-lg); padding: 16px 20px; }
.kd-ai-card .kd-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; color: var(--kd-on-primary-container); }
.kd-ai-card .kd-ai-head i { color: var(--kd-primary); }
.kd-ai-card .kd-ai-body { line-height: 1.7; font-size: .925rem; }
.kd-ai-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-top: 1px solid var(--kd-outline-variant); margin-top: 12px; padding: 12px 0 0; background: none; color: var(--kd-on-surface); font-weight: 500; font-size: .9rem; text-align: left; }
.kd-ai-toggle .bi-chevron-down { margin-left: auto; transition: transform .2s; }
.kd-ai-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.kd-transcript { max-height: 320px; overflow-y: auto; font-size: .875rem; line-height: 1.7; color: var(--kd-on-surface-variant); background: var(--kd-surface); border: 1px solid var(--kd-outline-variant); border-radius: var(--kd-radius); padding: 12px 16px; margin-top: 12px; white-space: pre-line; }
.kd-status { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 500; }
.kd-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kd-success); }
.kd-status.is-offline .dot { background: var(--kd-on-surface-variant); }

/* ---------- Empty state ---------- */
.kd-empty { text-align: center; padding: 48px 16px; color: var(--kd-on-surface-variant); background: var(--kd-surface-low); border: 1px dashed var(--kd-outline); border-radius: var(--kd-radius-lg); }
.kd-empty i { font-size: 2.25rem; color: var(--kd-primary); display: block; margin-bottom: 8px; }
.kd-empty h2 { font-size: 1rem; font-weight: 600; color: var(--kd-on-surface); margin-bottom: 4px; }

/* ---------- Dropdown ---------- */
.kd-public .dropdown-menu { border: 1px solid var(--kd-outline-variant); border-radius: var(--kd-radius); box-shadow: 0 8px 24px rgba(0, 32, 24, .12); padding: 6px; font-size: .9rem; }
.kd-public .dropdown-item { border-radius: var(--kd-radius-sm); padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.kd-public .dropdown-item:active { background: var(--kd-primary-container); color: var(--kd-on-primary-container); }
.kd-public .dropdown-header { color: var(--kd-on-surface); }

/* ---------- Auth (login) ---------- */
.kd-auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.kd-auth-hero { position: relative; overflow: hidden; background: var(--kd-primary); color: var(--kd-on-primary); padding: 24px 24px 40px; border-radius: 0 0 28px 28px; }
.kd-auth-hero::before, .kd-auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.kd-auth-hero::before { width: 320px; height: 320px; right: -120px; top: -120px; }
.kd-auth-hero::after { width: 220px; height: 220px; right: -40px; bottom: -120px; }
.kd-auth-logo { display: inline-flex; background: #fff; border-radius: 14px; padding: 10px 14px; position: relative; z-index: 1; }
.kd-auth-logo img { height: 30px; width: auto; }
.kd-auth-hero-text { position: relative; z-index: 1; margin-top: 28px; max-width: 460px; }
.kd-auth-hero h1 { font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.kd-auth-hero p { opacity: .85; margin: 0; }
.kd-auth-points { list-style: none; padding: 0; margin: 32px 0 0; }
.kd-auth-points li { display: flex; align-items: center; gap: 12px; padding: 8px 0; opacity: .92; }
.kd-auth-points i { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.kd-auth-main { display: flex; justify-content: center; padding: 24px 16px 40px; }
.kd-auth-card { width: 100%; max-width: 420px; }
.kd-auth-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; }
.kd-label { font-size: .875rem; font-weight: 500; margin-bottom: 6px; }
.kd-input-icon { position: relative; }
.kd-input-icon > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kd-on-surface-variant); pointer-events: none; }
.kd-input { height: 50px; border-radius: var(--kd-radius); padding-left: 46px; border-color: var(--kd-outline); }
.kd-input:focus { border-color: var(--kd-primary); box-shadow: 0 0 0 3px rgba(1, 84, 64, .12); }
.kd-input-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; color: var(--kd-on-surface-variant); }
.kd-input-action:hover { background: var(--kd-surface-container); }
.kd-public .form-check-input:checked { background-color: var(--kd-primary); border-color: var(--kd-primary); }
.kd-public .form-check-input:focus { box-shadow: 0 0 0 3px rgba(1, 84, 64, .15); border-color: var(--kd-primary); }
.kd-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--kd-on-surface-variant); font-size: .8rem; }
.kd-divider::before, .kd-divider::after { content: ''; flex: 1; height: 1px; background: var(--kd-outline-variant); }
@media (min-width: 992px) {
    .kd-auth-shell { grid-template-columns: minmax(420px, 5fr) 7fr; }
    .kd-auth-hero { border-radius: 0 32px 32px 0; padding: 40px 48px; display: flex; flex-direction: column; align-items: flex-start; }
    .kd-auth-hero-text { margin-top: auto; margin-bottom: auto; }
    .kd-auth-hero h1 { font-size: 2.1rem; }
    .kd-auth-main { align-items: center; padding: 48px; }
}

/* ---------- Banner akun tamu ---------- */
.kd-guest-banner { background: var(--kd-secondary-container); color: var(--kd-on-secondary-container); font-size: .85rem; padding: 10px 0; border-bottom: 1px solid #f7c9b4; }
.kd-guest-banner i { color: var(--kd-secondary); }

/* ---------- Footer ---------- */
.kd-footer { border-top: 1px solid var(--kd-outline-variant); color: var(--kd-on-surface-variant); font-size: .8rem; padding: 20px 0 28px; margin-top: 48px; }