/* =========================================
   1. GENEL AYARLAR VE DEĞİŞKENLER
   ========================================= */
:root {
    --primary-olive: #68633D;
    --primary-hover: #4e4a2e;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --navbar-height: 5rem;
}

html, body {
    width: 100%;
}

main {
    flex: 1 0 auto;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--navbar-height);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* =========================================
   2. NAVBAR (KURUMSAL TASARIM)
   ========================================= */
.navbar-custom {
    background-color: #ffffff;
    height: auto;
    min-height: var(--navbar-height);
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.05);
    border-bottom: 0.2rem solid var(--primary-olive);
    padding: 0.625rem 0;
}

/* Logo Alanı */
.navbar-logo {
    height: 4rem;
    width: auto;
    margin-right: 2rem;
    object-fit: contain;
}

.brand-text {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
}

/* Menü Linkleri (Masaüstü) */
.navbar-custom .nav-link {
    color: var(--text-dark) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.625rem 0.95rem !important;
    text-transform: uppercase;
    position: relative;
}

    /* Hover Efekti (Altı çizili animasyon) */
    .navbar-custom .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0.125rem;
        bottom: 0.3rem;
        left: 50%;
        background-color: var(--primary-olive);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-custom .nav-link:hover::after {
        width: 80%;
    }

    .navbar-custom .nav-link:hover,
    .navbar-custom .nav-link.active {
        color: var(--primary-olive) !important;
    }

/* B2B Butonu */
.btn-olive {
    background-color: var(--primary-olive);
    color: #fff !important;
    border: 1px solid var(--primary-olive);
    transition: all 0.3s ease;
}

    .btn-olive:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        transform: translateY(-0.06rem);
    }

/* =========================================
   3. MENÜ OK VE HOVER AYARLARI
   ========================================= */
/* Bootstrap'in otomatik eklediği ok işaretini gizle */
.dropdown-submenu .dropdown-toggle::after,
.dropdown-toggle::after {
    display: none !important;
}

/* Masaüstünde bizim eklediğimiz oku da gizle */
@media (min-width: 992px) {
    .main-arrow {
        display: none !important;
    }
}

.main-arrow {
    transition: transform 0.3s ease;
}

/* Ok döndürme (Mobilde çalışır) */
.nav-link[aria-expanded="true"] .main-arrow {
    transform: rotate(180deg);
}

/* =========================================
   4. MOBİL MENÜ DÜZENLEMELERİ
   ========================================= */
.navbar-toggler {
    border: none;
    padding: 0;
    outline: none;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

.toggler-icon {
    font-size: 1.8rem;
    color: var(--primary-olive);
}

/* Mobil Menü Açıldığında */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #ffffff;
        margin-top: 0.95rem;
        padding-bottom: 1.25rem;
        border-top: 1px solid #eee;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.3rem;
    }

    /* Mobilde linkler */
    .navbar-custom .nav-link {
        padding: 0.95rem 1.25rem !important;
        border-bottom: 1px solid #f9f9f9;
        font-size: 1rem;
        width: 100%;
        text-align: left;
    }

        .navbar-custom .nav-link::after {
            display: none;
        }

        .navbar-custom .nav-link:hover {
            background-color: #f8f9fa;
            padding-left: 1.56rem !important;
        }

    /* B2B Butonu Mobil */
    .btn-olive {
        width: 100%;
        margin-top: 0.625rem;
        display: block;
        text-align: center;
        padding: 0.75rem 0;
    }

    /* --- İÇ İÇE (NESTED) MENÜ MOBİL --- */
    .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: #fcfcfc;
        padding-left: 0.95rem;
        margin-top: 0;
    }

    .dropdown-submenu .dropdown-menu {
        display: none; /* JS ile kontrol ediliyor */
        background-color: #f0f0f0;
        margin-left: 0;
        border-radius: 0.3rem;
        padding: 0.3rem 0;
    }

    .dropdown-submenu .dropdown-item {
        padding: 0.625rem 1.25rem;
    }
}

/* =========================================
   5. MASAÜSTÜ HOVER VE DROPDOWN
   ========================================= */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation: fadeInUp 0.3s ease forwards;
    }

    .dropdown-menu {
        margin-top: 0;
        border: none;
        border-top: 0.2rem solid var(--primary-olive);
        box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.1);
        border-radius: 0 0 0.3rem 0.3rem;
    }

    /* Submenu (Yan Menü) Ayarları */
    .dropdown-submenu {
        position: relative;
    }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -0.3rem;
            margin-left: 0;
            display: none;
        }

        /* Yan menü sadece kendi üzerine gelince açılsın */
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
            animation: fadeInRight 0.3s ease forwards;
        }

    .dropdown-item {
        padding: 0.625rem 1.25rem;
        font-size: 0.95rem;
        position: relative;
    }

        .dropdown-item:hover {
            background-color: var(--bg-light);
            color: var(--primary-olive);
        }
}

/* =========================================
   6. DİĞER BİLEŞENLER VE FOOTER
   ========================================= */

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;

    aspect-ratio: 21/ 7; /* İdeal slider oranı */
    min-height: 25rem; /* 400px'e karşılık gelen rem değeri */
    overflow: hidden;
}

/* Yarı Saydam Siyah Katman */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Yazıların bulunduğu alan üstte kalsın */
.hero-content {
    z-index: 2;
    position: relative;
}

/* Görselin Kutuya Oturma Ayarı */
.slider-ratio-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
}

/* Özel Çerçeveli Buton */
.btn-outline-olive {
    color: var(--primary-olive);
    border: 1px solid var(--primary-olive);
    transition: all 0.3s ease;
}

    .btn-outline-olive:hover {
        background-color: var(--primary-olive);
        color: #fff;
    }

/* Footer Tasarımı (Birleştirilmiş) */
footer.custom-footer {
    background-color: #1a1a1a;
    color: #eee;
    border-top: 0.3rem solid var(--primary-olive);
    padding: 2.5rem 0 1.25rem;
    margin-top: auto;
}

.footer-heading {
    font-weight: 600;
    letter-spacing: 0.031rem;
}

    .footer-heading::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.625rem;
        width: 2.5rem;
        height: 0.187rem;
        background-color: var(--primary-olive);
    }

.text-olive {
    color: var(--primary-olive) !important;
}

/* Footer Hızlı Linkler */
.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

    .footer-links a:hover {
        color: var(--primary-olive);
        transform: translateX(0.312rem);
    }

/* Sosyal Medya İkonları */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .social-icon:hover {
        background-color: var(--primary-olive);
        color: white;
        transform: translateY(-0.187rem);
    }

.hover-white:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.footer-bottom {
    background-color: #111111;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* =========================================
   7. ANİMASYONLAR
   ========================================= */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-0.625rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* =========================================
   SADECE RESİMLİ (YAZISIZ) BÜYÜK PANEL TASARIMI (TAM EKRAN)
   ========================================= */

.image-only-panel {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
}

/* Resim ayarları - Hiç boşluk bırakmadan alanı %100 kaplar */
.panel-img {
    width: 100%;
    /* İŞTE BURASI: Resimlerin dilim oranını belirliyoruz. 
       Yüklediğiniz dilimler diktörtgense 3/4 veya 4/5, tam kare ise 1/1 yapın. */
    aspect-ratio: 1 /1;
    /* Cover, aspect-ratio kilitli olduğu için artık kesme yapmaz, alanı doldurur */
    object-fit: fill;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    transition: transform 0.5s ease;
}
/* =========================================
   CKEDITOR & WORD İÇERİK DÜZENLEYİCİSİ
   ========================================= */

/* İçeriğin bulunduğu ana kapsayıcı */
.ck-content-area {
    width: 100%;
    color: #212529; /* Bootstrap'in text-muted baskısını ezer, normal okunaklı renk yapar */
    font-family: inherit;
    line-height: 1.6;
    overflow-x: auto; /* Word'den gelen devasa tablolar sayfayı taşırmasın, scroll çıksın */
}

    /* Word'den kopyalanan resimlerin mobilde ekranı aşmasını engeller */
    .ck-content-area img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Word'den gelen tabloların mobil uyumlu olmasını sağlar */
    .ck-content-area table {
        max-width: 100% !important;
        border-collapse: collapse;
    }

    /* Editörden gelen başlıkların aralıklarını düzeltir */
    .ck-content-area h1,
    .ck-content-area h2,
    .ck-content-area h3 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-weight: bold;
    }

/* Üzerine gelindiğinde afiş hissiyatını bozmayan çok hafif bir yakınlaşma efekti */
.image-only-panel:hover .panel-img {
    transform: scale(1.03);
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}