@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');


/* =====================================================
   GLOBAL
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: #4B3A40;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
    width: 90%;
    max-width: 1250px;

    height: 90px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    z-index: 20;
}

.logo {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -2px;
}

.logo span {
    color: #C97891;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    font-size: 13px;
    font-weight: 600;

    opacity: .65;

    transition: .2s;
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
}


/* =====================================================
   HOME
===================================================== */

.home-page {
    min-height: 100vh;

    background: #EEDB9A;

    overflow-x: hidden;
}

.home {
    width: 90%;
    max-width: 1250px;

    min-height: calc(100vh - 140px);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;
}

.home-left {
    position: relative;
    z-index: 5;
}

.mini-title {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.home h1 {
    font-family: "Playfair Display", serif;

    font-size: clamp(65px, 8vw, 115px);

    line-height: .88;

    letter-spacing: -6px;
}

.home h1 span {
    color: #C97891;
}

.intro-text {
    max-width: 480px;

    margin: 35px 0;

    font-size: 15px;

    line-height: 1.8;

    color: #604B43;
}

.main-button {
    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding: 15px 20px;

    background: #C97891;

    color: white;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    transition: .25s;
}

.main-button:hover {
    transform: translateX(7px);

    background: #B5647D;
}

.main-button span {
    font-size: 20px;
}


/* HOME PHOTO */

.home-right {
    position: relative;

    height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.photo-wrap {
    position: relative;

    z-index: 4;

    width: 390px;
    height: 500px;

    overflow: hidden;

    border-radius: 200px 200px 25px 25px;

    border: 12px solid #C97891;

    transform: rotate(4deg);

    box-shadow: 20px 25px 0 #E8A0B5;
}

.photo-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pink-shape {
    position: absolute;

    width: 250px;
    height: 250px;

    background: #E8A0B5;

    border-radius: 50%;

    right: 0;
    bottom: 20px;
}

.circle-text {
    position: absolute;

    z-index: 5;

    top: 40px;
    right: 10px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: #C97891;

    color: white;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    padding: 20px;

    transform: rotate(12deg);
}

.bottom-line {
    width: 90%;
    max-width: 1250px;

    margin: auto;

    padding: 20px 0;

    border-top: 1px solid rgba(75,58,64,.25);

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =====================================================
   PROFILE — NEW DESIGN
===================================================== */

.profile-page {
    min-height: 100vh;

    background: #F5D4DE;

    color: #4B3A40;

    overflow: hidden;

    position: relative;
}


/* dekorasi background */

.profile-page::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: #EEDB9A;

    right: -140px;
    top: 120px;

    opacity: .8;
}


.profile-page::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    background: #C97891;

    border-radius: 50%;

    left: -70px;
    bottom: 40px;

    opacity: .35;
}


/* navbar */

.profile-page .navbar {
    position: relative;
    z-index: 10;
}

.profile-page .logo span {
    color: #C97891;
}


/* =====================================================
   PROFILE CONTENT
===================================================== */

.profile {
    width: 90%;
    max-width: 1200px;

    min-height: calc(100vh - 90px);

    margin: auto;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    gap: 50px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   FOTO
===================================================== */

.profile-photo {
    height: 570px;

    overflow: hidden;

    border-radius: 45% 45% 20px 20px;

    border: 10px solid #FFF8F1;

    transform: rotate(-3deg);

    position: relative;

    box-shadow:
        18px 18px 0 #EEDB9A,
        -12px 12px 0 #C97891;

    background: #FFF8F1;
}


.profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.profile-photo:hover img {
    transform: scale(1.05);
}


/* =====================================================
   TEXT
===================================================== */

.profile-text {
    padding-left: 30px;
}


.profile-text .mini-title {
    color: #C97891;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}


.profile-text h1 {
    font-family: "Playfair Display", serif;

    font-size: clamp(70px, 7vw, 100px);

    line-height: .82;

    letter-spacing: -6px;

    margin-bottom: 35px;

    color: #4B3A40;
}


.profile-text h1 span {
    color: #C97891;

    display: inline-block;
}


/* paragraf */

.profile-text > p:not(.mini-title) {
    max-width: 500px;

    margin-bottom: 16px;

    line-height: 1.8;

    color: #604B53;

    font-size: 14px;
}


/* =====================================================
   INFO
===================================================== */

.info-list {
    max-width: 500px;

    margin-top: 32px;
}


.info-list div {
    padding: 14px 0;

    border-bottom: 1px solid rgba(75,58,64,.2);

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: .3s ease;
}


.info-list div:hover {
    padding-left: 10px;

    color: #C97891;
}


.info-list span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #C97891;
}


.info-list strong {
    font-size: 13px;

    font-weight: 600;
}


/* =====================================================
   EXTRA DECORATION
===================================================== */

/* tanda plus */

.profile-text::before {
    content: "+";

    position: absolute;

    right: 80px;
    top: 150px;

    font-size: 45px;

    font-weight: 300;

    color: #C97891;

    transform: rotate(15deg);
}


/* garis kecil */

.profile-text::after {
    content: "TKJ • TECHNOLOGY • DIGITAL";

    position: absolute;

    right: 20px;
    bottom: 70px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #C97891;

    transform: rotate(-90deg);

    transform-origin: right bottom;
}


/* =====================================================
   PROFILE ANIMATION
===================================================== */

@media (prefers-reduced-motion: no-preference) {

    .profile-photo {
        animation: profileImageIn .9s ease both;
    }

    .profile-text {
        animation: profileTextIn .9s ease .15s both;
    }

    .profile-page::before {
        animation: profileCircle 6s ease-in-out infinite;
    }

    .profile-page::after {
        animation: profileCircleSmall 5s ease-in-out infinite;
    }


    @keyframes profileImageIn {

        from {
            opacity: 0;

            transform:
                translateX(-50px)
                rotate(-8deg);
        }

        to {
            opacity: 1;

            transform:
                translateX(0)
                rotate(-3deg);
        }
    }


    @keyframes profileTextIn {

        from {
            opacity: 0;

            transform:
                translateX(40px);
        }

        to {
            opacity: 1;

            transform:
                translateX(0);
        }
    }


    @keyframes profileCircle {

        0% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(-25px, 20px);
        }

        100% {
            transform: translate(0, 0);
        }
    }


    @keyframes profileCircleSmall {

        0% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(15px, -15px);
        }

        100% {
            transform: translate(0, 0);
        }
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .profile {
        grid-template-columns: 1fr;

        padding: 50px 0 80px;

        gap: 50px;
    }

    .profile-photo {
        height: 450px;

        max-width: 500px;

        margin: auto;
    }

    .profile-text {
        padding-left: 0;
    }

    .profile-text h1 {
        font-size: 70px;
    }

    .profile-text::before {
        display: none;
    }

    .profile-text::after {
        display: none;
    }
}


/* =====================================================
   GALLERY
===================================================== */

.gallery-page {
    min-height: 100vh;

    background: #F0DEA0;
}

.gallery-main {
    width: 90%;
    max-width: 1250px;

    margin: auto;

    padding: 50px 0 100px;
}

.gallery-heading h1 {
    font-family: "Playfair Display", serif;

    font-size: 85px;

    line-height: .9;

    letter-spacing: -5px;

    margin-bottom: 60px;
}

.gallery-heading h1 span {
    color: #C97891;
}

.masonry {
    columns: 3 280px;

    column-gap: 18px;
}

.gallery-photo {
    break-inside: avoid;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 20px;

    background: #C97891;

    border: 8px solid #C97891;
}

.gallery-photo:nth-child(2) {
    border-color: #E8A0B5;
}

.gallery-photo:nth-child(3) {
    border-color: #FAF0C9;
}

.gallery-photo:nth-child(4) {
    border-color: #E8B49B;
}

.gallery-photo:nth-child(5) {
    border-color: #C97891;
}

.gallery-photo img {
    display: block;

    width: 100%;

    height: auto;

    transition: .4s;
}

.gallery-photo:hover img {
    transform: scale(1.05);
}


/* =====================================================
   CONTACT
   BALANCE PINK + CREAM + YELLOW
===================================================== */

.contact-page {
    min-height: 100vh;

    /*
       CREAM sebagai background utama
       supaya tidak terlalu pink
    */
    background: #FFF8F1;

    color: #4B3A40;

    position: relative;

    overflow: hidden;
}


/* dekorasi pink di background */

.contact-page::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background: #E8A0B5;

    left: -220px;
    bottom: -220px;

    z-index: 0;
}


/* dekorasi kuning */

.contact-page::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: #EEDB9A;

    right: -50px;
    top: 120px;

    z-index: 0;
}


/* navbar tetap di atas dekorasi */

.contact-page .navbar {
    position: relative;
    z-index: 5;
}

.contact-page .logo span {
    color: #C97891;
}


/* CONTACT CONTENT */

.contact {
    width: 90%;
    max-width: 1200px;

    margin: auto;

    min-height: calc(100vh - 90px);

    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    position: relative;

    z-index: 2;
}


/* TITLE */

.contact-title {
    padding-right: 40px;
}

.contact-title .mini-title {
    color: #C97891;
}

.contact-title h1 {
    font-family: "Playfair Display", serif;

    font-size: 90px;

    line-height: .9;

    letter-spacing: -5px;

    color: #4B3A40;
}

.contact-title h1 span {
    color: #C97891;
}


/* SOCIAL LINKS */

.social-links {
    border-top: 1px solid rgba(75,58,64,.25);
}


.social-links a {
    min-height: 90px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(75,58,64,.25);

    display: grid;

    grid-template-columns: 50px 1fr 180px 30px;

    align-items: center;

    transition: .25s;
}


/* nomor */

.social-links a span {
    font-size: 11px;

    color: #C97891;

    font-weight: 700;
}


/* nama sosmed */

.social-links strong {
    font-size: 20px;

    color: #4B3A40;
}


/* deskripsi */

.social-links small {
    font-size: 12px;

    color: #7D6D73;
}


/* panah */

.social-links b {
    font-size: 22px;

    font-weight: 400;

    color: #C97891;

    transition: .25s;
}


/* hover */

.social-links a:hover {
    padding-left: 15px;

    background: #F5D4DE;

    color: #4B3A40;
}

.social-links a:hover strong {
    color: #B5647D;
}

.social-links a:hover b {
    transform: translate(5px, -5px);

    color: #B5647D;
}


/* =====================================================
   ANIMATION
===================================================== */

@media (prefers-reduced-motion: no-preference) {

    .navbar {
        animation: navDown .8s ease both;
    }

    .home-left,
    .profile-text,
    .contact-title,
    .gallery-heading {
        animation: fadeUp .8s ease both;
    }

    .home-right {
        animation: fadeRight .9s ease .15s both;
    }

    .profile-photo {
        animation: photoIn .9s ease both;
    }

    .gallery-photo {
        opacity: 0;
        animation: galleryIn .7s ease forwards;
    }

    .gallery-photo:nth-child(1) {
        animation-delay: .2s;
    }

    .gallery-photo:nth-child(2) {
        animation-delay: .35s;
    }

    .gallery-photo:nth-child(3) {
        animation-delay: .5s;
    }

    .gallery-photo:nth-child(4) {
        animation-delay: .65s;
    }

    .gallery-photo:nth-child(5) {
        animation-delay: .8s;
    }

    .social-links {
        animation: fadeRight .9s ease .2s both;
    }

    .social-links a {
        opacity: 0;
        animation: socialIn .6s ease forwards;
    }

    .social-links a:nth-child(1) {
        animation-delay: .3s;
    }

    .social-links a:nth-child(2) {
        animation-delay: .45s;
    }

    .social-links a:nth-child(3) {
        animation-delay: .6s;
    }

    .social-links a:nth-child(4) {
        animation-delay: .75s;
    }

    .photo-wrap {
        animation: floating 5s ease-in-out infinite;
    }

    .pink-shape {
        animation: floatShape 5s ease-in-out infinite;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeRight {
        from {
            opacity: 0;
            transform: translateX(40px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes navDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes photoIn {
        from {
            opacity: 0;
            transform: translateX(-40px) rotate(-8deg);
        }

        to {
            opacity: 1;
            transform: translateX(0) rotate(-3deg);
        }
    }

    @keyframes galleryIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes socialIn {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes floating {
        0% {
            transform: rotate(4deg) translateY(0);
        }

        50% {
            transform: rotate(4deg) translateY(-10px);
        }

        100% {
            transform: rotate(4deg) translateY(0);
        }
    }

    @keyframes floatShape {
        0% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(-12px, -12px);
        }

        100% {
            transform: translate(0, 0);
        }
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .navbar {
        height: auto;
        padding: 25px 0;
        display: block;
    }

    .logo {
        display: block;
        margin-bottom: 20px;
    }

    .nav-links {
        gap: 20px;
        flex-wrap: wrap;
    }

    .home,
    .profile,
    .contact {
        grid-template-columns: 1fr;
    }

    .home {
        padding: 50px 0;
    }

    .home-right {
        height: 500px;
    }

    .profile {
        padding: 50px 0;
    }

    .profile-text {
        padding: 40px 0;
    }

    .profile-text h1,
    .contact-title h1 {
        font-size: 65px;
    }

    .contact {
        padding: 60px 0;
        gap: 60px;
    }

    .social-links a {
        grid-template-columns: 40px 1fr 30px;
    }

    .social-links small {
        display: none;
    }
}


@media (max-width: 500px) {

    .home h1 {
        font-size: 60px;
    }

    .photo-wrap {
        width: 290px;
        height: 400px;
    }

    .circle-text {
        right: 0;
    }

    .bottom-line {
        display: none;
    }

    .contact-page::before {
        width: 350px;
        height: 350px;
    }

    .contact-title h1 {
        font-size: 60px;
    }
}