/* --- CSS LANDING PAGE BY CORE NATIVES BEHIND THE SCENES WARRIOR --- */

/* --- SISA CSS SETELAH EKSTRAKSI CSS KRITIS --- */

/* Gaya body yang mungkin ditunda dari CSS kritis */
body {
    /* padding, display, flex-direction, align-items, justify-content SUDAH DIHANDLE DI CSS KRITIS */
    /* min-height: 100vh; SUDAH DI CSS KRITIS */
    /* Tujuan utama di sini adalah untuk gaya yang tidak memengaruhi CLS awal, seperti Ken Burns */
}

/* --- Ken Burns Background (Tidak Kritis untuk LCP Teks/Layout Awal) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/bglanding.webp'); /* Sesuaikan path jika perlu */
    background-size: cover;
    background-position: center center;
    z-index: -1; /* Di belakang .container */
    animation: kenburns 5s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes kenburns {
    0% {
        transform: scale(1.0) translate(0, 0);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.05) translate(-2%, 1%);
        opacity: 1;
    }
}
/* --- End Ken Burns Background --- */


/* --- Penyempurnaan Container (gaya non-dimensi/non-layout-kritis) --- */
.container {
    /* Dimensi inti (max-width, width, margin, padding, background-color, border-radius, text-align) SUDAH DI CSS KRITIS */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border subtle, umumnya tidak menyebabkan CLS signifikan jika ditambahkan kemudian */
}

/* --- Penyempurnaan Header Section (efek visual, bukan dimensi inti) --- */
.profile-pic-wrapper {
    /* width, height, aspect-ratio, margin-bottom, border-radius, padding, overflow SUDAH DI CSS KRITIS */
    /* Efek gradien border tidak kritis untuk layout awal jika padding sudah dialokasikan */
}

.profile-pic-wrapper::before { /* Efek gradien border, tidak kritis */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    padding: 3px; /* Ini adalah padding UNTUK gradien, BUKAN padding wrapper itu sendiri */
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: running-gradient 5s linear infinite;
    z-index: 1; /* Di bawah .profile-pic */
    transition: transform 0.4s ease;
}

.profile-pic {
    /* Gaya .profile-pic dasar (display, width, height, object-fit, border-radius, background-color) SUDAH DI CSS KRITIS */
    position: relative; /* Diperlukan untuk z-index jika ::before juga z-indexed */
    z-index: 2; /* Di atas gradien ::before */
    transition: transform 0.4s ease; /* Hanya transisi transform, bukan dimensi */
}

.profile-pic-wrapper:hover .profile-pic {
    transform: scale(1.05);
}
 .profile-pic-wrapper:hover::before {
    transform: scale(1.1);
    animation-play-state: paused;
 }

/* Gaya font-size dan margin untuk h1, .description, .locations
   SEKARANG DIHANDLE DI CSS KRITIS DENGAN MEDIA QUERIES UNTUK MOBILE & DESKTOP.
   Hanya simpan di sini jika ada override yang sangat spesifik yang TIDAK relevan dengan CLS awal.
   Untuk saat ini, diasumsikan CSS kritis sudah cukup.
*/

/* --- Links Section (Hanya gaya tambahan/efek visual, dasar sudah di kritis) --- */
.links-list li {
    /* margin-bottom SUDAH DI CSS KRITIS */
}

.links-list a {
    /* display, align-items, padding, background-color, color, text-decoration, border-radius, font-family, font-weight SUDAH DI CSS KRITIS */
    transition: transform 0.3s ease, background 0.4s ease, box-shadow 0.3s ease; /* Efek transisi */
    position: relative; /* Untuk overflow hidden dan ::before/::after jika ada */
    overflow: hidden; /* Untuk efek visual */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Border bisa ditambahkan di sini jika tidak menyebabkan shift */
}

.link-icon {
    /* width, height, min-width, margin-right, display, align-items, justify-content, border-radius, font-size, background-color, color, padding SUDAH DI CSS KRITIS */
    position: relative; /* Untuk ::before */
    overflow: hidden; /* Untuk ::before */
    transition: transform 0.3s ease; /* Efek transisi */
}

.link-icon::before { /* Gradien untuk ikon, tidak kritis */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    padding: 2px; /* Padding untuk gradien di dalam ikon */
    background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffcc00, #ff00cc);
    background-size: 400% 400%;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: running-gradient 4s linear infinite alternate;
    z-index: 1; /* Di bawah span ikon */
    transition: transform 0.4s ease;
}

.link-icon span {
     /* display, align-items, justify-content, width, height, background, border-radius SUDAH DI CSS KRITIS */
     position: relative;
     z-index: 2; /* Di atas gradien ::before */
}

.link-text {
    /* flex-grow, text-align, font-size SUDAH DI CSS KRITIS */
}

/* --- Hover Effects (Tidak kritis) --- */
.links-list a:hover {
    transform: scale(1.03);
    background: linear-gradient(90deg, rgba(255, 0, 204, 0.3), rgba(51, 51, 255, 0.3)); /* Perubahan background pada hover */
    box-shadow: 0 0 15px rgba(255, 0, 204, 0.4), 0 0 15px rgba(51, 51, 255, 0.4); /* Shadow pada hover */
    color: #fff; /* Perubahan warna teks pada hover */
}

.links-list a:hover .link-icon {
     transform: rotate(10deg) scale(1.05);
}

.links-list a:hover .link-icon::before {
    transform: scale(1.1);
    animation-play-state: paused;
}

/* --- Gradient Animation (Tidak kritis) --- */
@keyframes running-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Footer (Dasar sudah di kritis, hanya efek jika ada) --- */
.site-footer {
    /* text-align, margin-top, padding-bottom, color, font-size, position, z-index, width SUDAH DI CSS KRITIS */
}
.site-footer p {
    /* margin-bottom, font-family SUDAH DI CSS KRITIS */
}
.built-by {
    /* font-style, font-size, color, font-family SUDAH DI CSS KRITIS */
}

/* --- Back to Top Button (Tidak kritis untuk CLS awal) --- */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: rgba(40, 40, 40, 0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #fff;
    padding: 10px 15px; /* Bisa di-override untuk mobile jika perlu */
    border-radius: 8px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease, background-color 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2em; /* Bisa di-override untuk mobile jika perlu */
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top-btn:hover {
    background-color: rgba(80, 80, 80, 1);
    transform: translateY(-3px);
}

/* --- Responsiveness (Sisa yang tidak di CSS kritis atau merupakan penyesuaian minor) --- */
@media (max-width: 640px) {
    /* body (justify-content, align-items sudah disesuaikan di kritis untuk mobile) */
    /* .container (dimensi inti SUDAH DI CSS KRITIS untuk mobile) */
    /* .profile-pic-wrapper (dimensi inti SUDAH DI CSS KRITIS untuk mobile) */
     .profile-pic-wrapper::before {
         padding: 2px; /* Penyesuaian padding gradien di mobile, spesifik untuk efek visual */
     }

    /* h1, .description, .locations font sizes untuk mobile SUDAH DI CSS KRITIS */
    /* .links-list a (padding, font-size SUDAH DI CSS KRITIS mobile-first) */
    /* .link-icon (width, height, min-width, margin-right, font-size, padding SUDAH DI CSS KRITIS mobile-first) */
    .link-icon::before {
         padding: 2px; /* Padding gradien di dalam ikon untuk mobile */
    }

    /* .site-footer (margin-top, font-size, padding-bottom SUDAH DI CSS KRITIS mobile-first) */
    /* .built-by (font-size SUDAH DI CSS KRITIS mobile-first) */

    .back-to-top-btn {
        bottom: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 1em;
    }
}

/* --- Responsiveness (Desktop Overrides untuk gaya yang tidak di kritis) --- */
@media (min-width: 641px) {
    /* Jika ada gaya khusus desktop yang BUKAN layout kritis dan ada di sini, bisa diletakkan di sini */
    /* Contoh:
    .back-to-top-btn {
        padding: 10px 15px;
        font-size: 1.2em;
    }
    (Ini sebenarnya sudah defaultnya, jadi tidak perlu jika sama)
    */
}

        * {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* Standard */
        }
        
        img {
            pointer-events: none; /* Mencegah drag/klik pada gambar */
        }