/* assets/slider.css - GÜNCELLENMİŞ MİNİ VE ŞEFFAF PANEL */

.gradient-bg-slider {
    background-color: transparent !important;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

/* 2. Cam Efektli Ana Panel (Çok Daha Şeffaf ve İnce) */
.slider-glass-main-panel {
    background: rgba(15, 23, 42, 0.15); /* 0.4'ten 0.15'e düşürdük, çok daha şeffaf oldu */
    backdrop-filter: blur(8px); /* 20px'ten 8px'e düşürdük, arkası daha net görünecek */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); /* Gölgeyi de hafiflettik */
    margin: 0 auto; /* Paneli ortala */
    max-width: 64rem; /* Panelin ekranı kaplamasını engelledik (yaklaşık 1024px ile sınırladık) */
}

/* 3. Panel İçindeki Teknolojik Görsel (Mini panele uygun küçültüldü) */
.slider-image-inside-panel {
    max-width: 100%;
    max-height: 16rem; /* Resmi de mini panele uygun olarak 16rem (yaklaşık 256px) ile sınırladık */
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
    transition: all 0.4s ease;
}

.slider-image-inside-panel:hover {
    transform: scale(1.04) translateY(-5px);
    filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.8));
}

/* Daktilo İmleci Efekti */
.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background-color: #38bdf8;
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

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

/* --- Yön Okları (Glassmorphism) --- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.8);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow-prev { left: 1rem; }
.slider-arrow-next { right: 1rem; }

/* --- Yuvarlak Göstergeler (Pagination Dots) --- */
.slider-dots-container {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 20;
}

.slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.slider-dot.active {
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    transform: scale(1.3);
}
/* --- Resim Yoksa Çıkacak Teknolojik Hologram/Radar Animasyonu --- */
.tech-hologram-fallback {
    position: relative;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    border: 2px dashed rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.1) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}

/* Dışarı yayılan sinyal halkası */
.tech-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(56, 189, 248, 0.5);
    animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Dönen radar ışığı */
.radar-sweep {
    position: absolute;
    width: 50%;
    height: 50%;
    background: linear-gradient(45deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0.4) 100%);
    transform-origin: bottom right;
    animation: radar-spin 3s linear infinite;
    top: 0;
    left: 0;
}

/* Yanıp sönen teknolojik konum noktaları */
.tech-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 10px #38bdf8, 0 0 20px #38bdf8;
    animation: blink-node 1.5s infinite alternate;
}

/* Noktaların konumları ve yanıp sönme gecikmeleri */
.node-1 { top: 30%; left: 40%; animation-delay: 0.2s; }
.node-2 { top: 60%; left: 70%; animation-delay: 0.5s; }
.node-3 { top: 70%; left: 30%; animation-delay: 0.8s; }
.node-4 { top: 40%; left: 20%; animation-delay: 1.1s; }

/* --- Animasyonların (Keyframes) Tanımları --- */
@keyframes pulse-ring {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(1.1); opacity: 0; }
}

@keyframes radar-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blink-node {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}