:root{--navy:#0c223e;
    --navy2:#173f6d;
    --soft:#f4f7fb;
    --line:#dce5ef;
    --text:#172033;
    --muted:#667085;
    --gold:#d7b45b}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:var(--soft);
    color:var(--text)}
    a{text-decoration:none;color:inherit}
    .admin-layout{
        display:grid;
        grid-template-columns:260px 1fr;
        min-height:100vh}
    .sidebar{
        background:linear-gradient(180deg,#081a30,#123f6b);
        color:#fff;
        padding:25px 18px;
        position:sticky;
        top:0;
        height:100vh}
    .side-brand{
        display:flex;
        gap:12px;
        align-items:center;
        margin-bottom:28px}
    .side-brand img{width:46px}
    .side-brand strong,
    .side-brand small{display:block}
    .side-brand small{
        opacity:.7;
        font-size:12px}
    .menu-title{
        font-size:11px;
        opacity:.55;
        margin:24px 10px 10px}
    .side-nav a{
        display:flex;
        gap:10px;
        padding:12px 14px;
        border-radius:10px;
        margin:4px 0;
        color:#dce9f5}
        .side-nav a:hover,
        .side-nav a.active{background:linear-gradient(90deg,#1b5f99,#2d78bd);color:#fff}
        .admin-main{padding:28px}
        .topbar{background:#fff;
            border-bottom:1px solid var(--line);
            padding:18px 28px;
            display:flex;
            justify-content:space-between;
            align-items:center}
        .topbar h1{margin:0;
            font-size:23px}
        .admin-card{background:#fff;
            border:1px solid var(--line);
            border-radius:16px;
            box-shadow:0 10px 25px rgba(10,35,64,.06)}
            .welcome{padding:25px;
                margin-bottom:22px}
            .welcome h2{margin:0 0 8px}
            .stats-admin{display:grid;
                grid-template-columns:repeat(4,1fr);
                gap:18px;
                margin-bottom:22px}
            .stat-admin{padding:22px}
            .stat-admin b{font-size:30px;
                color:var(--navy2);
                display:block}
                .stat-admin span{color:var(--muted);
                    font-size:13px}
                    .grid-2{display:grid;
                        grid-template-columns:1.2fr .8fr;
                        gap:22px}
                        .panel-head{display:flex;
                            justify-content:space-between;
                            align-items:center;
                            padding:18px 20px;
                            border-bottom:1px solid var(--line)}
                            .panel-head h3{margin:0}
                            .panel-body{padding:20px}
                            .table{width:100%;
                                border-collapse:collapse}
                                .table th,
                                .table td{text-align:left;
                                    padding:13px 10px;
                                    border-bottom:1px solid var(--line);
                                    font-size:14px}
                                .badge{padding:6px 9px;
                                    border-radius:999px;
                                    background:#e8f5ed;
                                    color:#1b7b49;
                                    font-size:12px}
                                .btn{display:inline-block;
                                    padding:11px 16px;
                                    border-radius:9px;
                                    border:0;
                                    font-weight:700;
                                    cursor:pointer}
                                .btn-primary{background:linear-gradient(135deg,#1d5d98,#2f7cc1);
                                    color:#fff}
                                    .btn-danger{background:#dd3f4b;
                                        color:#fff}
                                        .btn-light{background:#edf3f8;
                                            color:#24435f}
                                            .form-grid{display:grid;
                                                grid-template-columns:1fr 1fr;gap:16px}
                                                .field{display:flex;
                                                    flex-direction:column;
                                                    gap:7px}
                                                    .field.full{grid-column:1/-1}
                                                    .field input,
                                                    .field textarea,
                                                    .field select{padding:12px 13px;
                                                        border:1px solid #cad6e2;
                                                        border-radius:9px;
                                                        font:inherit}
                                                    .login-page{min-height:100vh;
                                                        display:grid;
                                                        place-items:center;
                                                        background:linear-gradient(135deg,#07182c,#1e568b)}
                                                    .login-card{width:min(440px,92%);
                                                        background:#fff;
                                                        padding:34px;
                                                        border-radius:20px;
                                                        box-shadow:0 25px 70px rgba(0,0,0,.28)}
                                                        .login-card h1{margin:0 0 6px}
                                                        .login-card p{color:var(--muted)}
                                                        .notice{padding:12px;
                                                            border-radius:9px;
                                                            margin:12px 0;
                                                            background:#fff1f1;
                                                            color:#ad2f2f}
                                                        .chart{height:280px;
                                                            display:flex;
                                                            align-items:end;
                                                            gap:18px;
                                                            padding:20px}
                                                    .bar{flex:1;
                                                        background:linear-gradient(180deg,#2f7cc1,#163e6d);
                                                        border-radius:10px 10px 0 0}
                                                    .quick-links{display:grid;
                                                        grid-template-columns:repeat(2,1fr);
                                                        gap:12px}
                                                    .quick-links a{padding:16px;
                                                        border:1px solid var(--line);
                                                        border-radius:12px;
                                                        background:#f9fbfd}
                                                        .muted{color:var(--muted)}
@media(max-width:900px){
    .admin-layout{grid-template-columns:1fr}
    .sidebar{height:auto;position:relative}
    .stats-admin,.grid-2{grid-template-columns:1fr 1fr}
    .admin-main{padding:18px}}
@media(max-width:600px){
    .stats-admin,
    .grid-2,
    .form-grid{grid-template-columns:1fr}
    .table{display:block;overflow:auto}}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field.full {
    grid-column: 1 / -1;
}

.admin-thumb {
    width: 65px;
    height: 65px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 2px solid #dce5ef;
    box-shadow: 0 4px 10px rgba(13, 35, 64, 0.12);
}

.admin-thumb-placeholder {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #e8eef5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #60758a;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }
}
/* Paksa ukuran video di tabel admin */
table.table video.admin-video-preview {
    width: 220px !important;
    height: 125px !important;
    max-width: 220px !important;

    display: block !important;
    object-fit: cover !important;

    border-radius: 10px;
    background: #000;
}

/* Jangan biarkan kolom sumber video melebar */
table.table td:nth-child(2) {
    width: 240px;
    max-width: 240px;
}

/* Biar tabel tetap rapi */
table.table {
    table-layout: auto;
}

.admin-thumb {
    width: 65px;
    height: 65px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 2px solid #dce5ef;
}
.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-edit {
    background: #f59e0b;
    color: #ffffff;
}

.btn-edit:hover {
    background: #d97706;
}

.admin-edit-preview {
    width: 130px;
    height: 90px;
    display: block;
    margin-top: 12px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #dce5ef;
}
.admin-video-preview {
    width: 180px;
    height: 105px;
    object-fit: cover;
    background: #000000;
}
.table td {
    vertical-align: middle;
}

.table td video {
    max-width: 220px;
}
.admin-news-link {
    color: #1d5d98;
    font-weight: 700;
}

.admin-news-link:hover {
    text-decoration: underline;
}