﻿/* ==========================================================================
   MIO ENTERPRISE - PERFECT ALIGNED WIDE SLIDER CSS
   ========================================================================== */

/* --- YATAYDA TAM GENİŞLİK SİYAH PERDE --- */
.hero-slider { position: relative !important; width: 100vw !important; /* Sağa ve sola sıfır siyah arka plan */ left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; height: 50vh !important; background: #000000 !important; z-index: 5; overflow: hidden; border-bottom: 1px solid #222; }

/* Bootstrap Yapısal Alanları */
#mioCarousel, .carousel-inner, .carousel-item { width: 100% !important; height: 100% !important; }

/* --- GOOGLEBOT VE SEÇİCİ GÖRÜNÜRLÜK --- */
.carousel-item { opacity: 0; transition: opacity 0.5s ease-in-out; }
    .carousel-item.active,
    .carousel-item.active.carousel-item-start,
    .carousel-item.active.carousel-item-next { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* --- KRİTİK HİZALAMA MERKEZİ (METİNLERİ ORTALAYAN ALAN) --- */
.hero-slider .container { max-width: 1200px !important; /* Metinlerin ekranın dışına, en sola kaçmasını engeller */ width: 100% !important; height: 100% !important; margin: 0 auto !important; /* İçeriği her çözünürlükte tam ortalar */ position: relative !important; padding-left: 60px !important; /* Sol ok butonundan kaçış boşluğu */ padding-right: 60px !important; /* Sağ ok butonundan kaçış boşluğu */ }

.hero-slider .row { height: 100% !important; align-items: center !important; /* Dikeyde tam ortalama */ }

/* İçerik Yazı Bloğu */
.slider-content { position: relative !important; z-index: 20 !important; opacity: 1 !important; visibility: visible !important; text-align: left !important; }

    .slider-content h2 { font-size: calc(1.5rem + 1.2vw) !important; color: #ffffff !important; margin-bottom: 1rem; line-height: 1.2; }

    .slider-content p { font-size: calc(0.9rem + 0.1vw) !important; color: rgba(255,255,255,0.75) !important; margin-bottom: 1.5rem; }

/* --- YÖN OKLARI (SİYAH BANTIN EN DIŞ UCUNA SABİTLEME) --- */
.carousel-control-prev,
.carousel-control-next { position: absolute !important; top: 0 !important; width: 50px !important; /* Buton genişliğini sabitledik */ height: 100% !important; z-index: 1010 !important; background: transparent !important; }

/* Okları tarayıcının en dış köşelerine sıfırlıyoruz */
.carousel-control-prev { left: calc(50vw - 50%) !important; }
.carousel-control-next { right: calc(50vw - 50%) !important; }

/* --- SVG ALANI --- */
.svg-container { display: flex; justify-content: flex-end; align-items: center; }
.hero-svg { width: auto; height: 240px; max-width: 100%; stroke: #ffffff; fill: none; stroke-width: 1.5; }

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .hero-slider { height: 45vh !important; }
        .hero-slider .container { padding-left: 40px !important; padding-right: 40px !important; }
    .carousel-control-prev { left: 0 !important; }
    .carousel-control-next { right: 0 !important; }
    .hero-svg { height: 130px !important; }
}
