/* --- 1. ANA YAPI & BOŞLUK KONTROLÜ --- */
.dual-split-section {
    display: flex;
    height: 70%;
    /* Ekranı tam kaplar */
    width: 100%;
    overflow: hidden;
    margin-top: 0 !important;
    /* Menü ile arasındaki boşluğu sıfırlar */
    position: relative;
    font-family: 'Inter', sans-serif;
}

.split-box {
    flex: 1;
    position: relative;
    display: flex;
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    background-size: cover;
    background-position: center;
}

.split-box:hover {
    flex: 1.3;
}

.split-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 10, 10, 0.614);
    /* Sol taraf koyu endüstriyel */
    z-index: 1;
}

.split-overlay.orange {
    background: rgba(255, 106, 0, 0.534);
    /* Sağ taraf enerjik turuncu */
}

/* --- 2. İÇERİK DÜZENİ (BUTONLARI AŞAĞI İTER) --- */
.split-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 80px 5% 60px 5%;
    display: flex;
    flex-direction: column;
    /* Dikey sıralama */
    justify-content: space-between;
    /* İçeriği yukarı ve aşağı yayar */
    color: #fff;
}

/* --- 3. TİPOGRAFİ & RENKLENDİRME --- */
.split-content .tag {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #FFB000;
    /* Amber dürüstlüğü */
    margin-bottom: 10px;
    display: block;
}

.split-content h2 {
    font-family: 'Expletus Sans', cursive;
    color: #F8F9FA;
    font-size: clamp(2rem, 4vw, 3.2rem);
    /* Ekran boyutuna göre küçülür */
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 20px;
}

.hero-section-info-divider {
    width: 60px;
    height: 4px;
    background: #ff6b00;
    margin-bottom: 30px;
}

.main-intro {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.sub-intro {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 30px;
}

/* --- 4. LİSTE AYARLARI --- */
.detail-list {
    list-style: none;
    padding: 0;
}

.detail-list li {
    text-align: left;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid rgba(255, 176, 0, 0.4);
}

.detail-list li strong {
    display: block;
    color: #FFB000;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.detail-list li span {
    color: #e0e0e0;
    font-size: 0.9rem;
}

/* --- PARS PURE OUTLINE BUTTONS --- */

/* --- PARS DYNAMIC BUTTONS (Outline to Solid) --- */

.hero-buttons .btn-main {
    display: inline-block;
    padding: 16px 40px;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    color: #F8F9FA !important;
    /* Off-White */
    border-radius: 4px;
    position: relative;
    z-index: 10;
    background-color: transparent;
    /* Başlangıçta şeffaf */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. SOL BUTON (Turuncu Çerçeve -> Turuncu Dolgu) */
.hero-buttons .btn-orange-outline {
    border: 2px solid #ff6b00 !important;
}

.hero-buttons .btn-orange-outline:hover {
    background-color: #ff6b00 !important;
    /* Hoverda Pars Turuncusu dolar */
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
    transform: translateY(-3px);
    color: #ffffff !important;
    /* Dolunca yazı tam beyaz olsun */
}

/* 2. SAĞ BUTON (Lacivert Çerçeve -> Lacivert Dolgu) */
.hero-buttons .btn-blue-outline {
    border: 2px solid #103b7b !important;
}

.hero-buttons .btn-blue-outline:hover {
    background-color: #103b7b !important;
    /* Hoverda Pars Laciverti dolar */
    box-shadow: 0 0 20px rgba(16, 59, 123, 0.5);
    transform: translateY(-3px);
    color: #ffffff !important;
    /* Dolunca yazı tam beyaz olsun */
}

/* Alt Çizgi Efekti - Hoverda dolgu geldiği için bunu opsiyonel tutuyorum, 
   dolgu varken çizgiye gerek kalmayabilir ama kodda bıraktım. */
.hero-buttons .btn-main::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.hero-buttons .btn-main:hover::after {
    width: 0;
    /* Dolgu varken çizgiyi kapattım ki görüntü kirlenmesin */
}

/* =========================================================
   RESPONSIVE AYARLAR (TABLET & MOBİL)
   ========================================================= */

/* --- 1. TABLETLER VE KÜÇÜK LAPTOPLAR (1024px ve altı) --- */
@media screen and (max-width: 1024px) {
    .dual-split-section {
        height: auto;
        /* Yüksekliği serbest bırakıyoruz ki içerik sığsın */
        flex-direction: column;
        /* Paneller yan yana değil, alt alta */
    }

    .split-box {
        flex: none;
        width: 100%;
        height: 700px;
        /* Her bir panelin yüksekliği sabitlenir */
    }

    .split-box:hover {
        flex: none;
        /* Mobilde genişleme efektini kapatıyoruz (sağlıklı çalışmaz) */
    }

    .split-content h2 {
        font-size: 2.8rem;
        /* Başlığı biraz küçültelim */
    }
}

/* --- 2. SAMSUNG, iPHONE VE GENEL TELEFONLAR (768px ve altı) --- */
@media screen and (max-width: 768px) {
    .split-box {
        height: auto;
        /* İçerik ne kadarsa o kadar büyüsün */
        min-height: 100vh;
        /* Ama en az ekran boyu kadar olsun */
    }

    .split-content {
        padding: 60px 20px 40px 20px;
        /* Yanlardan boşluğu daraltalım */
    }

    .split-content h2 {
        font-size: 2.2rem;
        /* Mobilde devasa başlık ekranı bozar */
    }

    .main-intro {
        font-size: 1.1rem;
    }

    .detail-list li {
        margin-bottom: 25px;
        /* Okunurluk için maddelerin arasını açalım */
    }

    .hero-buttons {
        margin-top: 40px;
        padding: 0 !important;
        /* Varsa dış boşlukları sıfırla */
        display: flex;
        /* Flexbox ile kontrolü ele al */
        justify-content: center;
        /* Yatayda tam ortala */
        align-items: center;
        /* Dikeyde hizala */
        width: 100%;
    }

    .hero-buttons .btn-main {
        width: 80% !important;
        /* İstediğin o %80 boyut */
        margin: 0 auto !important;
        /* Sağdan soldan otomatik boşlukla ortala */
        text-align: center;
        /* Yazıyı buton içinde ortala */
        padding: 18px 0;
        /* Yükseklik ver, yan padding'i sıfırla */
        display: block;
        /* Blok eleman yaparak tam kontrol sağla */
        left: 0;
    }
}

/* --- 3. ÇOK KÜÇÜK EKRANLAR (iPhone SE vb. - 400px altı) --- */
@media screen and (max-width: 400px) {
    .split-content h2 {
        font-size: 1.8rem;
    }

    .tag {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    .sub-intro {
        font-size: 0.85rem;
    }
}