.custom-slider {
position: relative;
width: 100%;
 height: 80vh; /* Masaüstü yüksekliği */
background: #000;
overflow: hidden;
}

.custom-slider:active { cursor: grabbing; }

/* Ok Tasarımı */
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.3);
color: white;
border: none;
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
z-index: 20;
transition: 0.3s;
border-radius: 50%;
}
.nav-arrow:hover { background: #fff; color: #000; }
.prev { left: 20px; }
.next { right: 20px; }

.my-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
z-index: 1;
}

/* Siyah Geçişli Overlay (Maske) */
.my-slide::after {
content: "";
position: absolute;
inset: 0;
/* Alttan üste doğru %90 koyudan %20 koyuluğa geçiş */
background: linear-gradient(
to top, 
rgba(0, 0, 0, 0.3) 0%, 
rgba(0, 0, 0, 0.2) 10%, 
rgba(0, 0, 0, 0.1) 20%
);
z-index: 2;
}
.my-slide.active { opacity: 1; z-index: 2; }

/* İçerik Paneli (Z-index ile en üste aldık) */
.slider-content-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 60px; /* Biraz daha yukarı aldık */
z-index: 10; /* Overlay'in (2) üzerinde olmalı */
}

/* İçerik Katmanı */
.slider-content-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 40px;
z-index: 10;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.title-container {
margin-bottom: 30px;
overflow: visible; /* İsmin yarım kalmaması için */
}

.project-title {
color: #fff;
font-size: clamp(1.3rem, 5vw, 1.8rem); /* Ekran boyutuna göre otomatik ölçeklenir */
font-weight: 100;
letter-spacing:3px;
margin: 0;
display: inline-block;
}

/* Giriş Efekti */
.title-animate {
animation: slideInText 0.6s ease-out forwards;
}

@keyframes slideInText {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Küçük Resimler (Pagination) */
.thumb-navigation { gap: 10px; }

.thumb-btn {
width: 80px;
height: 50px;
border: 3px solid rgba(255,255,255,0.3);
background-size: cover;
background-position: center;
cursor: pointer;
transition: 0.3s;
}

.thumb-btn.active {
border-color: #fff;
transform: translateY(-5px);
}

@media (max-width: 576px) {
.custom-slider { height: 600px; }
.thumb-btn { width: 60px; height: 40px; }
}

h2#project-name {
    backdrop-filter: blur(10px);
    background: #3a3a3a69;
    padding: 10px 30px;
    border-radius: 10px;
    box-shadow: 2px 1px 20px rgb(0 0 0);
}

#project-name {
    transition: all 0.3s ease;
}

#project-name:hover {
    background:#111;
}