.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.form-group{
    margin-bottom:20px;
}

.form-label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    font-size: 14px;
}

.form-control{
    width:100%;
    padding:15px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:white;
    transition:var(--transition);
    font-size:15px;
}

.form-control::placeholder{
    color:#94a3b8;
    font-size: 14px;
}

.form-control:hover{
    border-color:#cbd5e1;
}

.form-control:focus{
    border-color:var(--primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}

.error{
    border-color:var(--danger);
    background:var(--danger-bg);
}

.form-error{
    display:block;
    margin-top:8px;
    font-size:13px;
    color:var(--danger);
    font-weight:500;
}

.alert{
    padding:14px 16px;
    border-radius:var(--radius-sm);
    margin-bottom:20px;
    font-size:14px;
    font-weight:500;
}

.alert-danger{
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid #fecaca;
}

.form-section{
    margin-bottom:28px;
}
 
.form-section:last-of-type{
    margin-bottom:0;
}
 
.form-section-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}
 
/* EXTEND: teks bantu di bawah field (bukan error, cuma info biasa) */
.form-hint{
    margin-top:8px;
    font-size:12.5px;
    color:var(--text-light);
}
 
/* EXTEND: label tambahan kaya "(opsional)" di sebelah form-label */
.form-label .optional{
    font-weight:500;
    color:var(--text-light);
    font-size:12px;
}
 
/* EXTEND: baris tombol aksi di bagian bawah form (Cancel, Submit, dst) */
.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:8px;
    padding-top:24px;
    border-top:1px solid var(--border);
}
 
.form-actions-note{
    margin-right:auto;
    font-size:12.5px;
}
 
@media(max-width:640px){
    .form-actions{
        flex-wrap:wrap;
    }
    .form-actions-note{
        width:100%;
        margin-right:0;
        margin-bottom:4px;
    }
}
 
@media(max-width:480px){
    .form-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }
}
 
/* EXTEND: dropzone upload file (thumbnail, dokumen, dst) */
.upload-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:36px 20px;
    border:2px dashed var(--border);
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:var(--transition);
}
 
.upload-box:hover{
    border-color:var(--primary);
    background:#f8faff;
}
 
.upload-box .icon{
    width:28px;
    height:28px;
    color:var(--text-light);
}
 
.upload-box:hover .icon{
    color:var(--primary);
}
 
.upload-title{
    font-size:13.5px;
    font-weight:700;
}
 
.upload-hint{
    font-size:12px;
    color:var(--text-light);
}

.upload-wrapper{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.upload-preview{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:var(--radius-md);
}

.upload-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.upload-placeholder[hidden]{
    display:none !important;
}

.upload-preview[hidden]{
    display:none !important;
}

.upload-actions[hidden]{
    display:none !important;
}

.upload-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    text-align:center;
}

/* =========================================================
   EXTEND components/form.css (revisi lagi)
   Tempel ke file form.css yang sudah ada.
========================================================= */

/* GANTI rule .upload-box yang lama dengan ini — sekarang .upload-box
   cuma jadi wrapper, isi visualnya pindah ke .upload-placeholder
   (state kosong) dan .upload-result (state udah ada file/gambar) */
.upload-box{
    position:relative;
    border:2px dashed var(--border);
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:var(--transition);
    overflow:hidden;
}

.upload-box:hover{
    border-color:var(--primary);
    background:#f8faff;
}

.upload-box.has-image{
    border-style:solid;
}

/* TAMBAH: isi dropzone waktu belum ada file dipilih */
.upload-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:36px 20px;
}

.upload-placeholder .icon{
    width:28px;
    height:28px;
    color:var(--text-light);
}

.upload-box:hover .upload-placeholder .icon{
    color:var(--primary);
}

/* .upload-title dan .upload-hint sudah ada dari extend sebelumnya,
   dipakai lagi di sini, gak perlu didefinisikan ulang */

/* TAMBAH: tampilan setelah file dipilih */
.upload-result{
    position:relative;
}

[hidden]{
    display:none !important;
}

/* modifier: buat file non-gambar (video, dokumen, dst) - baris nama
   file + tombol hapus, bukan preview visual kaya gambar */
.upload-result--file{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
}

.upload-file-info{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:600;
}

.upload-file-info .icon{
    width:20px;
    height:20px;
    color:var(--primary);
}

.upload-remove{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--bg);
    color:var(--text-light);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition);
    flex-shrink:0;
}

.upload-remove:hover{
    background:var(--danger-bg);
    color:var(--danger);
}

.upload-remove .icon{
    width:16px;
    height:16px;
}

.video-preview-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:36px 20px;
    border:2px dashed var(--border);
    border-radius:var(--radius-md);
    margin-top:14px;
}
 
.video-preview-box .icon{
    width:28px;
    height:28px;
    color:var(--text-light);
}
 
.video-preview-title{
    font-size:13.5px;
    font-weight:700;
}
 
.video-preview-hint{
    font-size:12px;
    color:var(--text-light);
}

.upload-preview{
    width:100%;
    min-height:240px;
    border-radius:var(--radius-sm);
    object-fit:contain;
    display:block;
}

/* =========================================================
   TAMBAH: toggle 2 pilihan (dipakai buat Video URL vs Upload Video).
   Berpotensi dipakai lagi kalau nanti ada field lain yang punya
   2 cara pengisian serupa (link vs file).
========================================================= */

.source-toggle{
    display:inline-flex;
    background:var(--bg);
    border-radius:12px;
    padding:4px;
    margin-bottom:14px;
    gap:4px;
}

.source-toggle-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 16px;
    border-radius:9px;
    font-size:13px;
    font-weight:600;
    color:var(--text-light);
    cursor:pointer;
    transition:var(--transition);
}

.source-toggle-btn .icon{
    width:15px;
    height:15px;
}

.source-toggle-btn:hover{
    color:var(--text);
}

.source-toggle-btn.active{
    background:white;
    color:var(--primary);
    box-shadow:var(--shadow-sm);
}

/* =========================================================
   COMPONENT: stepper.css
   Indicator step buat form multi-step (dipakai di Add Material
   Video sekarang, kemungkinan besar dipakai lagi di Add Material
   Text karena sama-sama butuh step Quiz).
========================================================= */

.stepper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:32px;
    padding-bottom:24px;
    border-bottom:1px solid var(--border);
}

.stepper-step{
    display:flex;
    align-items:center;
    gap:10px;
}

.stepper-step-number{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text-light);
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    flex-shrink:0;
}

.stepper-step-label{
    font-size:13.5px;
    font-weight:600;
    color:var(--text-light);
    transition:var(--transition);
}

.stepper-step.active .stepper-step-number{
    background:var(--primary);
    border-color:var(--primary);
    color:white;
}

.stepper-step.active .stepper-step-label{
    color:var(--text);
}

.stepper-step.completed .stepper-step-number{
    background:var(--success);
    border-color:var(--success);
    color:white;
}

.stepper-line{
    width:80px;
    height:2px;
    background:var(--border);
    flex:none;
}

/* =========================================================
   COMPONENT: quiz_builder.css
   Dipakai buat nambahin quiz di material Video & Text (sama-sama
   butuh quiz builder ini, bukan cuma video).
========================================================= */

.quiz-question-list{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-bottom:16px;
}

.quiz-question{
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:20px;
}

.quiz-question-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.quiz-question-number{
    font-size:13.5px;
    font-weight:700;
}

.quiz-remove-btn{
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-light);
    cursor:pointer;
    transition:var(--transition);
    flex-shrink:0;
}

.quiz-remove-btn:hover{
    background:var(--danger-bg);
    color:var(--danger);
}

.quiz-remove-btn .icon{
    width:14px;
    height:14px;
}

.quiz-options{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
}

.quiz-option{
    display:flex;
    align-items:center;
    gap:10px;
}

.quiz-option input[type="radio"]{
    width:18px;
    height:18px;
    flex-shrink:0;
    accent-color:var(--primary);
}

.quiz-option .form-control{
    flex:1;
}

.quiz-add-question-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    border:1px dashed var(--border);
    border-radius:var(--radius-sm);
    padding:14px;
    width:100%;
    transition:var(--transition);
}

.quiz-add-question-btn:hover{
    border-color:var(--primary);
    background:#f8faff;
}

.quiz-add-question-btn .icon{
    width:16px;
    height:16px;
}