/* ==========================================================================
   06.1 TABLET & SMALL LAPTOP (MAX-WIDTH: 1100PX)
   Zona Transisi: Sebelum masuk ke skala minim smartphone
   ========================================================================== */
@media (max-width: 1100px) {

    /* --- 1. LAYOUT UMUM --- */
    /* Ubah semua sistem 2-kolom (Side-by-Side) menjadi bertumpuk vertikal */
    .project-layout,
    .journal-main-container,
    .award-detail-wrapper,
    .team-detail-wrapper,
    .first-construction {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- 2. PADDING & SPACING --- */
    /* Mengurangi padding 100px-150px desktop ke angka menengah */
    .cont-projects,
    .about-container-main,
    .single-journal-wrapper,
    .single-team-container,
    .single-award-container,
    .mid-journals,
    .mid-awards {
        padding: 60px 40px !important;
    }

    /* --- 3. TYPOGRAPHY TRANSISI --- */
    /* Judul Utama: Dikecilkan dari 42px-60px ke 28px agar tidak raksasa */
    .font-gede-projects,
    .big-font-journals,
    .big-construction,
    .big-font-awards,
    #about_title,
    .large-journal-title,
    .award-title,
    .team-name {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    /* Teks Deskripsi: Skala menengah (14px) */
    .project-description p,
    .journal-entry-content p,
    .award-text-body,
    .bio-text p,
    #problem1-construction {
        font-size: 14px !important;
        line-height: 1.6 !important;
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- 4. MEDIA & IMAGE RESET --- */
    /* Bongkar kuncian lebar gambar (400px-500px) desktop */
    .team-visual,
    .award-visual,
    .journal-col-left,
    .img-construction {
        width: 80% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .project-info,
    .journal-col-right,
    .award-info-content,
    .team-info-content {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
    }

    /* --- 5. GRID SYSTEM (PROJECTS & JOURNALS) --- */
    /* Tetap 2 kolom di tablet agar tidak terlalu melompong */
    .project-grid, 
    .group-grid,
    .cont-portfolio-construction {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .Team_container {
        width: 100% !important;     /* Bongkar kuncian 1134px */
        max-width: 95% !important;   /* Beri ruang napas di kiri-kanan */
        margin: 0 auto !important;   /* Paksa posisi di tengah layar */
        padding: 0 20px !important;  /* Kecilkan padding 50px desktop agar tidak sesak */
        box-sizing: border-box;
    }

    .Team_board_member {
        justify-content: center !important; /* Pastikan kartu-kartu tim rata tengah */
        gap: 20px !important;
    }

    /* Penyesuaian Judul agar tidak turun terlalu jauh */
    .Team_center {
        margin: 60px 0 30px !important; /* Kurangi margin 100px desktop */
        font-size: 24px !important;     /* Skala tablet */
    }

    .about-container-main {
        padding: 60px 20px !important; /* Rapatkan padding samping dari 40px desktop */
        width: 100% !important;
        overflow-x: hidden; /* Safety net agar tidak ada sisa scroll horizontal */
    }

    #about_mid {
        width: 100% !important;
        max-width: 900px !important; /* Perkecil max-width dari 1300px agar tidak mepet */
        margin: 0 auto !important;   /* Paksa center */
    }

    /* Penyelarasan Kolom: Perkecil gap agar tidak memakan ruang lebar */
    .about-content-wrapper {
        display: flex !important;
        flex-direction: row !important; /* Tetap berjajar sesuai permintaan */
        justify-content: center !important;
        gap: 15px !important; 
        width: 100% !important;
    }
}