/* ═══════════════════════════════════════════
   LOGIN.CSS — Autentikasi, Topmenu & Media Player
   Versi: 2.0

   TOKEN: diwarisi dari donat.css (:root)
   SCOPE:
     • Topmenu sticky + breakpoint
     • App panel & profile panel (dropdown)
     • App grid (ikon aplikasi)
     • Form login wrapper
     • Media player (video stage, seek bar, controls)
     • Breadcrumb toolbar
     • Canvas / sertifikat utilities
   ═══════════════════════════════════════════ */


/* ─── TOPMENU (sticky) ───────────────────── */
.topmenu {
    position:         sticky;
    top:              0;
    z-index:          11;
    background-color: #fff;
    border-bottom:    1px solid #eee;
}

/* Diperlukan agar sticky bekerja pada parent .main */
#main { overflow: visible; }

.topmenu-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         6px 16px;
    min-height:      48px;
}

@media (max-width: 700px) { .topmenu { top: 50px; } }
@media (max-width: 450px) { .topmenu { top: 0;    } }


/* ─── APP PANEL & PROFILE PANEL ─────────── */
.app-panel,
.profile-panel {
    position:      fixed;
    top:           58px;
    right:         16px;
    width:         300px;
    background:    #fff;
    border:        1px solid #ddd;
    border-radius: var(--radius-md, 8px);
    box-shadow:    0 8px 24px rgba(0,0,0,.15);
    padding:       16px;
    display:       none;
    z-index:       9000;
}

.app-panel.active,
.profile-panel.active { display: block; }


/* ─── APP GRID ───────────────────────────── */
.app-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
}

.app-item {
    text-align:    center;
    padding:       12px 6px;
    border-radius: var(--radius-md, 8px);
    cursor:        pointer;
    transition:    background var(--transition, .3s ease);
}

.app-item:hover {
    background: var(--pLightColor);
}

.app-icon {
    display:         flex;
    justify-content: center;
    margin-bottom:   4px;
}

.app-name {
    font-size:  12px;
    color:      #333;
}


/* ─── PROFILE PANEL ──────────────────────── */
.profile-header {
    padding-bottom: 10px;
    margin-bottom:  10px;
    border-bottom:  1px solid #eee;
}

.profile-header strong { display: block; font-size: .95rem; }
.profile-header small  { color: #888; font-size: .8rem; }


/* ─── LOGIN WRAP ─────────────────────────── */
/*     Bungkus form sign-in / sign-up         */
.login-wrap {
    max-width:  400px;
    margin:     60px auto;
    padding:    0 16px;
}

.login-wrap h2 {
    margin:      0 0 16px;
    color:       var(--pColor);
    font-size:   1.4rem;
}


/* ─── MEDIA PLAYER ───────────────────────── */
/*     Komponen video kustom (dark skin)      */

/* CSS vars khusus player — tidak konflik dengan :root donat */
.player {
    --bg:     #0f172a;
    --panel:  #111827;
    --muted:  #334155;
    --text:   #e5e7eb;
    --accent: #38bdf8;
    overflow: hidden;
}

.video-stage {
    position:     relative;
    aspect-ratio: 16 / 9;
    background:   #000;
}

.video-stage video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* Seek bar */
.seek {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 12px;
    border-top:  1px solid #1f2937;
}

.time {
    font-variant-numeric: tabular-nums;
    opacity:              .9;
    color:                var(--text, #e5e7eb);
    font-size:            .8rem;
}

.bar {
    position:  relative;
    flex:      1;
    height:    10px;
    overflow:  hidden;
    border:    1px solid #1f2937;
}

.bar .progress {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        90deg,
        var(--accent, #38bdf8) 0 var(--prog, 0%),
        transparent            var(--prog, 0%)
    );
}

input[type="range"].seek-range {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    opacity:        0;
    pointer-events: none;
}

.controls {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     12px;
    border-top:  1px solid #1f2937;
}


/* ─── BREADCRUMB TOOLBAR ─────────────────── */
.toolbar {
    display:         flex;
    gap:             12px;
    align-items:     center;
    justify-content: space-between;
    margin:          6px 0 10px;
}

.toolbar .search { flex: 1; }

.toolbar .search input {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid #d0d7de;
    border-radius: var(--radius-sm, 5px);
    font:          14px system-ui;
}

.breadcrumb {
    font:          14px system-ui;
    background:    #f6f8fa;
    border:        1px solid #e5e7eb;
    border-radius: var(--radius-sm, 5px);
    padding:       8px 10px;
}

.breadcrumb a       { color: #2563eb; text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }
.muted              { color: #6b7280; font-size: 13px; }


/* ─── CANVAS / SERTIFIKAT ────────────────── */
.canvascert {
    width:  100%;
    height: auto;
    border: 1px solid #ccc;
}

.canvas-wrap {
    margin-top: 15px;
    text-align: center;
}

.canvas-wrap canvas {
    width:  100%;
    height: auto;
    border: 1px solid #ccc;
}

.img.crop {
    display:   inline-block;
    max-width: 200px;
}


/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 450px) {
    .app-panel,
    .profile-panel { width: calc(100vw - 32px); right: 16px; }

    .app-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}