* { box-sizing: border-box; font-family: Arial,sans-serif; }
html,body{margin:0;min-height:100vh;}

.icd-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 50px;
    min-height:100vh;
    gap:40px;
}

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

.icd-text{
    width:60%;
}

/* STATE AWAL ANIMASI */
.icd-text h1,
.icd-text p,
.icd-text .icd-button{
    opacity:0;
    transform:translateY(30px);
}

/* JUDUL */
.icd-text h1{
    font-size:46px;
    margin-bottom:20px;
    background:linear-gradient(90deg,#C9A645 17.14%,#EDC9C6 114.29%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
}

/* DESKRIPSI */
.icd-text p{
    font-size:18px;
    color:#fff;
    line-height:1.6;
    margin-bottom:20px;
}

/* BUTTON */
.icd-text .icd-button{
    display:inline-block;
    padding:12px 30px;
    font-size:16px;
    color:#000;
    font-weight:bold;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:linear-gradient(90deg,#C9A645 17.14%,#EDC9C6 114.29%);
    text-decoration:none;
    transition:transform .2s ease,opacity .2s ease;
}

.icd-text .icd-button:hover{
    transform:translateY(-2px);
    opacity:.9;
}

/* ================= ANIMASI MASUK ================= */

.icd-text.icd-animate h1{
    animation:icd-slide-up .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.icd-text.icd-animate p{
    animation:icd-slide-up .7s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:.15s;
}

.icd-text.icd-animate .icd-button{
    animation:icd-slide-up .7s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:.3s;
}

@keyframes icd-slide-up{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ================= CARD STACK ================= */

.icd-image-stack{
    width:40%;
    max-width:270px;
    aspect-ratio:300/385;
    position:relative;
}

.icd-card{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 25px 45px rgba(0,0,0,.25);
    transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s;
}

.icd-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.icd-pos-0{transform:translate(0,0) rotate(0deg);z-index:4;}
.icd-pos-1{transform:translate(20px,15px) rotate(-2deg);z-index:3;}
.icd-pos-2{transform:translate(40px,30px) rotate(-4deg);z-index:2;}
.icd-pos-3{transform:translate(60px,45px) rotate(-6deg);z-index:1;}

.icd-hover-icon{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    color:#fff;
    opacity:0;
    cursor:pointer;
    transition:opacity .3s ease,transform .3s ease;
}

@media(hover:hover){
    .icd-card.icd-top:hover .icd-hover-icon{
        opacity:1;
        transform:scale(1.1);
    }
}

.icd-drop-out{
    transform:translateY(220px) rotate(12deg);
    opacity:0;
    transition:transform .45s ease-in,opacity .45s ease-in;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
    .icd-text h1{
        font-size:38px;
    }
    .icd-text p{
        font-size:16px;
    }
    .icd-text .icd-button{
        font-size:15px;
        padding:10px 25px;
    }
}

@media(max-width:768px){
    .icd-container{
        flex-direction:column;
        align-items:center;
        padding:20px;
        min-height:auto;
    }
    .icd-text{
        width:100%;
        text-align:center;
        margin-bottom:20px;
    }
    .icd-text h1{
        font-size:32px;
    }
    .icd-text p{
        font-size:15px;
    }
    .icd-text .icd-button{
        font-size:14px;
        padding:10px 20px;
    }
    .icd-image-stack{
        width:90%;
        max-width:200px;
        height:auto;
        aspect-ratio:300/385;
        margin-bottom:20px;
    }
    .icd-card img{height:100%;}
}

@media(max-width:480px){
    .icd-text h1{
        font-size:26px;
    }
    .icd-text p{
        font-size:14px;
    }
    .icd-text .icd-button{
        font-size:13px;
        padding:8px 16px;
    }
}