/* public/assets/css/custom-landing.css */

/* HANYA CSS UNTUK EFEK GAMBAR OVERLAP */

.image-overlap-container {
    position: relative;
    min-height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

/* Meningkatkan kontras teks hero di dark mode */
[data-theme="dark"] .hero-content .hero-title,
[data-theme="dark"] .hero-content .hero-subtitle {
    /* Shadow putih tipis untuk outline */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
     color: #F5F5F5;
}

[data-theme="dark"] .hero-overlay {
    background: rgba(0, 0, 0, 0.65); /* Sedikit lebih terang */
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Hapus 'color: white;' jika ada, atau pastikan selector di atas lebih spesifik */
}

.image-overlap-container img {
    position: absolute;
    width: 80%;
    height: auto;
    max-width: 450px;
    border-radius: 0.5rem;
    /* Gunakan variabel --border-color jika ada, fallback ke default */
    border: 1px solid var(--border-color, #dee2e6);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    will-change: transform, opacity, z-index, box-shadow;
    cursor: pointer;
}

/* 1. GAMBAR DEPAN (AWAL) */
.image-overlap-container img:nth-child(1) {
    z-index: 2;
    transform: translateY(-15%) translateX(-15%); /* Jarak X dilebarkan */
    opacity: 1;
}

/* 2. GAMBAR BELAKANG (AWAL) */
.image-overlap-container img:nth-child(2) {
    z-index: 1;
    transform: translateY(15%) translateX(15%); /* Jarak X dilebarkan */
    opacity: 0.7;
}

/* 3. SAAT HOVER GAMBAR DEPAN (atas) */
.image-overlap-container img:nth-child(1):hover {
    z-index: 3;
    transform: translateY(-15%) translateX(-15%); /* Posisi TETAP */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    opacity: 1;
}

/* 4. ...dan GAMBAR BELAKANG (bawah) akan memudar */
.image-overlap-container img:nth-child(1):hover ~ img:nth-child(2) {
    z-index: 1;
    transform: translateY(15%) translateX(15%); /* Posisi TETAP */
    opacity: 0.5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 5. SAAT HOVER GAMBAR BELAKANG (bawah) */
.image-overlap-container img:nth-child(2):hover {
    z-index: 3;
    transform: translateY(15%) translateX(15%); /* Posisi TETAP */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    opacity: 1;
}

/* 6. ...dan GAMBAR DEPAN (atas) akan mundur & memudar */
.image-overlap-container:has(img:nth-child(2):hover) img:nth-child(1) {
    z-index: 1;
    transform: translateY(-15%) translateX(-15%); /* Posisi TETAP */
    opacity: 0.5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Pastikan text-primary sesuai tema */
.text-primary {
    color: var(--primary-color, #666cff) !important;
}

/* Styling dasar untuk dark/light mode jika diperlukan di sini */
body[data-theme="dark"] .image-overlap-container img {
    border-color: var(--border-color, #404040); /* Border gelap */
}