/* ===========================
   ABOUT PAGE DESKTOP
=========================== */

/* 1. CONTAINER UTAMA DESKTOP */
.container-about {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Navbar mengikuti style bawaan dari style.css (sticky, transparan di atas,
   dapet background pas discroll) — sama kayak halaman Home */
/* Pembungkus utama agar konten tidak nempel ke tepi layar */
.about-page {
    max-width: 1200px; /* Batasi lebar maksimal halaman */
    margin: 0 auto;    /* Posisikan ke tengah layar */
    padding: 40px 40px 60px; /* Top dikurangin, nav sekarang sticky bukan fixed jadi udah otomatis makan tempatnya sendiri */
    box-sizing: border-box;
}

.about-header {
    margin-bottom: 70px;
}

.about-header span {
    color: var(--accent);
    letter-spacing: 4px;
}

.about-header h1 {
    font-size: 64px;
    margin: 15px 0;
}

.about-header p {
    max-width: 600px;
    color: var(--text-muted);
}

/* CONTENT (KUNCI PERBAIKAN DI SINI) */
.about-content {
    display: flex;
    align-items: flex-start; /* KUNCI 1: Bikin foto sejajar di atas dengan judul teks */
    gap: 60px;
    margin-bottom: 100px;
}

/* IMAGE */
.about-image {
    flex: 0 0 260px; /* Ukuran lebar foto dibuat tetap, sedikit lebih kecil */
    width: 260px;
}

.about-image img {
    width: 100%;
    height: 320px;        /* Tinggi dikunci biar gak ikut-ikutan gede sesuai resolusi asli foto */
    border-radius: 20px;
    display: block;
    object-fit: cover;    /* Foto tetep proporsional, cuma di-crop biar pas sama box */
}

/* TEXT */
.about-text {
    flex: 1; /* Teks akan mengambil sisa ruang yang ada */
}

.about-text h2 {
    font-size: 42px;
    margin-top: 0; /* Menghilangkan margin atas agar pas sejajar dengan foto */
    margin-bottom: 25px;
}

.about-text p {
    line-height: 1.9;
    margin-bottom: 18px;
    color: var(--text-muted);
}

/* SKILLS */
.skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.skill-card {
    padding: 25px;
    border-radius: 18px;
    background: var(--card);
}