/* === 1. FONT VE TEMEL DEĞİŞKENLER === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
    --ark-text-primary: #2c2c2c; /* Tam siyah yerine koyu antrasit */
    --ark-text-secondary: #5f6368; /* Yumuşak gri */
    --ark-accent: #D21E2B; /* Marka kırmızısı */
    --ark-bg-body: #ffffff;
    --ark-bg-section: #fcfcfc; /* Neredeyse beyaz, çok hafif ayrım */
    --ark-border: #eaeaea;
}

/* === 2. TEMEL SIFIRLAMA === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--ark-text-secondary);
    background-color: var(--ark-bg-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

    a:hover {
        opacity: 0.8;
    }

h1, h2, h3 {
    color: var(--ark-text-primary);
    font-weight: 600; /* Daha ince başlıklar */
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* === 3. GRID SİSTEMİ (Layout) === */
.ark-container-fluid {
    width: 100%;
}

.ark-container {
    width: 100%;
    max-width: 1100px; /* Daha dar, daha odaklı içerik alanı */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ark-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.ark-u-justify-center {
    justify-content: center;
}

.ark-u-align-center {
    align-items: center;
}

.ark-col-10, .ark-col-lg-8 {
    padding: 0 1rem;
    width: 100%;
}

/* === 4. COMPACT HERO SECTION (KÜÇÜLTÜLMÜŞ BAŞLIK) === */
.ark-carousel {
    position: relative;
    width: 100%;
}

.ark-carousel__image-wrapper {
    /* Minimalist yükseklik ayarı */
    height: 55vh;
    min-height: 400px;
    max-height: 550px;
    position: relative;
    overflow: hidden;
}

.ark-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kesmeden ortalar */
    object-position: center;
}

/* Çok hafif karartma - sadece yazı okunsun diye */
.ark-carousel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
    display: flex;
    align-items: center; /* İçeriği dikey ortala */
}

.ark-carousel__content {
    color: #fff;
    max-width: 800px;
}

.ark-carousel__title {
    font-size: 2.75rem; /* Çok daha kibar başlık boyutu */
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* === BUTONLAR (SIDE-BY-SIDE GARANTİSİ) === */
.ark-carousel__links {
    display: flex;
    gap: 12px;
    margin-bottom: 0; /* Alt boşluğu kaldırdık, daha kompakt */
}

.ark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem; /* Daha ince butonlar */
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px; /* Hafif oval */
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--ark-text-primary);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .ark-button:hover {
        background-color: #fff;
        transform: translateY(-1px);
        color: var(--ark-accent);
    }

/* İkinci butonun stilini ayrıştırmak isterseniz (Opsiyonel) */
.ark-button--secondary {
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

    .ark-button--secondary:hover {
        background-color: rgba(0,0,0,0.6);
        color: #fff;
    }

/* SOSYAL İKONLAR */
.ark-socials {
    position: absolute; /* Banner'ın sağ alt köşesine alalım, daha minimal durur */
    bottom: 20px;
    right: 30px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.ark-socials__link svg {
    width: 18px;
    height: 18px;
    fill: rgba(255,255,255,0.8);
    transition: fill 0.2s;
}

.ark-socials__link:hover svg {
    fill: #fff;
}

/* === 5. CONTENT SECTIONS (MİNİMAL AKIŞ) === */
.ark-section {
    padding: 5rem 0; /* Rahat ama abartısız boşluk */
}

.ark-section--alt {
    background-color: var(--ark-bg-section);
    border-top: 1px solid var(--ark-border);
}

.ark-section__title {
    font-size: 2rem;
    color: var(--ark-text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.ark-section__divider {
    width: 40px;
    height: 2px;
    background-color: var(--ark-accent);
    margin: 0 auto 2rem;
    border: none;
}

.ark-text-block {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--ark-text-secondary);
}

/* About Us Liste Yapısı */
.ark-feature-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.ark-feature-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: var(--ark-text-primary);
    font-weight: 500;
}

.ark-feature-icon {
    color: var(--ark-accent);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

/* === 6. RESPONSIVE (MİNİMAL) === */
@media (min-width: 992px) {
    .ark-col-lg-8 {
        flex: 0 0 66.666%;
        max-width: 66.666%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .ark-carousel__image-wrapper {
        height: 50vh; /* Mobilde yarım ekran */
        min-height: 350px;
    }

    .ark-carousel__title {
        font-size: 1.75rem; /* Mobilde daha küçük başlık */
        text-align: center;
    }

    .ark-carousel__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* BUTONLAR MOBİLDE YAN YANA */
    .ark-carousel__links {
        width: 100%;
        max-width: 400px;
        justify-content: center;
    }

    .ark-button {
        flex: 1; /* Eşit dağılım */
        padding: 0.8rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Sosyal İkonlar Mobilde Gizlensin mi? Hayır, merkeze alalım */
    .ark-socials {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 1.5rem;
        justify-content: center;
    }

    .ark-section {
        padding: 3.5rem 0;
    }

    .ark-feature-list {
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }
}
/* === MOBİL NAVBAR DÜZENLEMESİ (ÇAKIŞMAYI ÖNLEME) === */
@media (max-width: 991px) {
    /* Navbar Container'ı esnek yapıp uçlara yaslayalım */
    .navbar .container,
    .navbar .container-fluid {
        display: flex !important;
        justify-content: space-between !important; /* Biri sağa biri sola */
        align-items: center !important;
        flex-wrap: nowrap !important; /* Asla alt satıra düşmesin */
    }

    /* Marka/Logo (Kariyer Yazısı) */
    .navbar-brand {
        font-size: 1.25rem !important; /* Mobilde fontu biraz küçültelim */
        max-width: 70%; /* Genişliğin %70'inden fazlasını almasın */
        white-space: nowrap; /* Yazı alt satıra kırılmasın */
        overflow: hidden; /* Taşarsa gizle */
        text-overflow: ellipsis; /* Taşarsa "..." koy */
        margin-right: 0 !important;
    }

    /* Hamburger Menü Butonu */
    .navbar-toggler {
        font-size: 1rem !important; /* Buton ikonunu biraz kibarlaştır */
        padding: 0.4rem 0.6rem !important; /* İç boşluğu azalt */
        margin-left: auto !important; /* Kendini en sağa itsin */
        border: 1px solid rgba(0,0,0,0.1); /* Hafif çerçeve */
        z-index: 1050; /* Her zaman üstte kalsın */
    }

    /* Eğer menü açılınca çirkin görünüyorsa */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff; /* Menü açılınca zemin beyaz olsun */
        padding: 1rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
        z-index: 1000;
    }
}