/* ==========================================
   Responsive Video Container (Aspect Ratio 16:9)
   ========================================== */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Rasio 16:9 (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 24px;
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Opsi modern jika browser mendukung aspect-ratio secara native */
@supports (aspect-ratio: 16 / 9) {
    .video-container {
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    .video-container iframe {
        position: static;
    }
}

/* ==========================================
   Table & Content Responsiveness
   ========================================== */
.table-profile-wrap {
    width: 100%;
    overflow-x: auto; /* Mencegah tabel merusak layout mobile */
    margin-bottom: 24px;
}

.table-profile {
    width: 100%;
    border-collapse: collapse;
}

.table-profile td {
    padding: 8px 12px;
    vertical-align: top;
}

.table-profile td:nth-child(1) {
    font-weight: 600;
    white-space: nowrap;
    width: 30%;
}

.table-profile td:nth-child(2) {
    width: 10px;
}

.about-school {
    margin-top: 20px;
    line-height: 1.6;
}

/* Penyesuaian khusus tampilan Mobile */
@media screen and (max-width: 600px) {
    .table-profile td {
        display: block;
        width: 100% !important;
        padding: 4px 0;
    }

    .table-profile td:nth-child(2) {
        display: none; /* Sembunyikan titik dua di layar kecil agar rapi */
    }

    .table-profile tr {
        margin-bottom: 12px;
        display: block;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }
}