.intro {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.intro .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeSlide 30s infinite;
}

.intro .slide:nth-child(1) { background-image: url(../img/slideshow-intro/Landscape/slide1.jpg); animation-delay: 0s; }
.intro .slide:nth-child(2) { background-image: url(../img/slideshow-intro/Landscape/slide2.jpg); animation-delay: 5s; }
.intro .slide:nth-child(3) { background-image: url(../img/slideshow-intro/Landscape/slide3.jpg); animation-delay: 10s; }
.intro .slide:nth-child(4) { background-image: url(../img/slideshow-intro/Landscape/slide4.jpg); animation-delay: 15s; }
.intro .slide:nth-child(5) { background-image: url(../img/slideshow-intro/Landscape/slide5.jpg); animation-delay: 20s; }
.intro .slide:nth-child(6) { background-image: url(../img/slideshow-intro/Landscape/slide6.jpg); animation-delay: 25s; }

@keyframes fadeSlide {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    20%  { opacity: 1; }
    24%  { opacity: 0; }
    100% { opacity: 0; }
}

.intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2;
}

/* --- posisi teks di tengah kiri --- */
.intro-content {
    position: absolute;
    left: 6vw;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-dark);
    z-index: 3;
    font-family: var(--font-biasa);
    max-width: 450px;
}

.intro-content h1 {
    font-family: var(--font-kaligrafi);
    font-size: 4rem;
}

.intro-content p {
    font-size: 2rem;
}

@media (max-width: 767px) {
    .intro .slide:nth-child(1) { background-image: url(../img/slideshow-intro/Portrait/slide1.jpg); }
    .intro .slide:nth-child(2) { background-image: url(../img/slideshow-intro/Portrait/slide2.jpg); }
    .intro .slide:nth-child(3) { background-image: url(../img/slideshow-intro/Portrait/slide3.jpg); }
    .intro .slide:nth-child(4) { background-image: url(../img/slideshow-intro/Portrait/slide4.jpg); }
    .intro .slide:nth-child(5) { background-image: url(../img/slideshow-intro/Portrait/slide5.jpg); }
    .intro .slide:nth-child(6) { background-image: url(../img/slideshow-intro/Portrait/slide6.jpg); }

    .intro-content {
        max-width: 275px;
    }

    .intro-content h1 {
        font-size: 3rem;
    }

    .intro-content p {
        font-size: 1.5rem;
    }
}