/* Khusus halaman Form Profil dan Profil Saya.
   style.css utama tidak diubah agar desain Home dan halaman lain tetap terjaga. */
body:has(.profile-container) {
    background:
      radial-gradient(circle at 8% 12%, rgba(218, 165, 190, .18), transparent 28%),
      radial-gradient(circle at 94% 85%, rgba(194, 178, 196, .16), transparent 30%),
      #f7f5f7;
    color: #29242b;
}
body:has(.profile-container) .topbar {
    position: relative;
    z-index: 2;
}
.profile-container {
    width: min(940px, calc(100% - 36px));
    margin: 58px auto 86px;
    padding: clamp(25px, 5vw, 54px);
    border: 1px solid rgba(55, 39, 53, .08);
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 24px 70px rgba(48,31,44,.09);
    position: relative;
    overflow: hidden;
}
.profile-container::before {
    content: "";
    position: absolute;
    width: 240px; height: 240px;
    right: -120px; top: -135px;
    border-radius: 50%;
    background: rgba(218,165,190,.19);
    pointer-events: none;
}
.profile-container > h1 {
    position: relative;
    margin: 0 0 10px;
    color: #29232c;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.055em;
}
.profile-container > p {
    color: #817783;
    line-height: 1.75;
}
#profileForm {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
    margin-top: 32px;
}
#profileForm label {
    align-self: end;
    margin-top: 8px;
    color: #4a414b;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .025em;
}
#profileForm input, #profileForm textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #e8e0e7;
    border-radius: 13px;
    background: #fcfafc;
    color: #29232b;
    font: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
#profileForm textarea, #profileForm input[type="file"] { grid-column: 1 / -1; }
#profileForm textarea { min-height: 135px; resize: vertical; }
#profileForm input:focus, #profileForm textarea:focus {
    border-color: #c786a8;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(199,134,168,.13);
}
#profileForm input[type="file"] { padding: 12px; color: #776b78; }
#profileForm button, .edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 180px;
    margin-top: 15px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: #302833;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(48,40,51,.16);
    transition: transform .2s, background .2s, box-shadow .2s;
}
#profileForm button:hover, .edit-button:hover {
    transform: translateY(-2px);
    background: #a96589;
    box-shadow: 0 12px 25px rgba(169,101,137,.22);
}
#pesan { margin-top: 16px; color: #47775c; font-weight: 600; }
.profile-card {
    position: relative;
    margin-top: 30px;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid #eee6ed;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff 0%, #fbf6fa 100%);
    box-shadow: 0 18px 48px rgba(48,31,44,.08);
}
.profile-card img {
    display: block;
    width: 165px; height: 165px;
    object-fit: cover;
    border: 6px solid #fff;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: #f0e7ee;
    box-shadow: 0 10px 30px rgba(48,31,44,.14);
}
.profile-card h2 {
    margin: 0 0 24px;
    color: #302833;
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    letter-spacing: -.04em;
}
.profile-card p {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #eee7ed;
    color: #716875;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.profile-card p strong {
    display: inline-block;
    min-width: 145px;
    color: #39313c;
}
.profile-card #tampilDeskripsi {
    margin-top: 14px;
    padding: 18px;
    border: 0;
    border-radius: 15px;
    background: #f5edf3;
    color: #5f5361;
}
.profile-card .edit-button { margin-top: 25px; }
@media (max-width: 640px) {
    .profile-container {
        margin: 30px auto 55px;
        padding: 25px 20px;
        border-radius: 21px;
    }
    #profileForm { grid-template-columns: 1fr; gap: 9px; }
    #profileForm input, #profileForm textarea, #profileForm button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .profile-card p strong { display: block; margin-bottom: 3px; }
}