:root {
    --primary-green: #425F57;
    --dark-bg: #1F1F1F;
    --text-white: #FFFFFF;
    --text-gray: #4C4C4C;
    --text-light-gray: #989898;
    --border-color: rgba(255, 255, 255, 0.24);
    --font-primary: 'Poppins', sans-serif;
}

html {
    /* Dikey kaydırma çubuğu için yer HER SAYFADA ayrılır. Aksi halde içeriği kısa olan
       sayfalarda çubuk çıkmadığı için sayfa ~15px daha geniş oluyor ve ortalanmış header
       (logo/menü) sayfa değiştirirken sağa sola kayıyordu. */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-primary);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
}

/* ===========================
   HERO WRAPPER & SLIDER
   =========================== */

.hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px;
    overflow: hidden;
}

/* Hero arka plan görselleri büyük (270-680 KB) ve geç gelebiliyor. O ana kadar hero alanı
   beyaz kalıyor, üzerindeki beyaz header menüsü ve başlıklar görünmez oluyordu; görsel
   gelince aniden belirdiği için sayfa geçişlerinde "header oynuyor/bozuluyor" gibi
   görünüyordu. Bu koyu zemin, görsel gelene kadar aynı kontrastı sağlar. */
.hero-wrapper,
.page-hero,
.products-hero,
.blog-hero,
.referanslar-hero,
.markalar-hero,
.sertifikalar-hero,
.kurumsal-hero {
    background-color: #2E4239;
}

/* Ana sayfada navbar'ı hero-wrapper içine yerleştir */
#header-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

#header-placeholder .navbar {
    position: absolute;
    top: 0;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

#header-placeholder .navbar.scrolled {
    position: fixed;
    background: rgba(31, 31, 31, 0.95);
    border-bottom: none;
}

/* Hero görseli olmayan sayfalarda header'ı normal akışa koyup koyu zemin veriyoruz ki
   içeriğin üstüne binmesin ve beyaz sayfa zemininde okunabilir olsun. Header'ı HER ZAMAN
   (scroll edilse de edilmese de) fixed tutuyoruz — aksi halde bir önceki halde ".scrolled"
   sınıfının position:fixed'i bu kural tarafından eziliyordu ve header, hero'lu sayfaların
   aksine kaydırılınca sayfayla birlikte kayıp gidiyordu (sayfadan sayfaya tutarsız görünüm).
   İçerik headerin altında kalmasın diye <main>'e navbar yüksekliği kadar boşluk veriliyor
   (--navbar-h, script.js tarafından gerçek yükseklikle dolduruluyor). */
body:not(:has(main .hero-wrapper, main [class*="-hero"])) #header-placeholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

body:not(:has(main .hero-wrapper, main [class*="-hero"])) #header-placeholder .navbar {
    position: relative;
    background: rgba(31, 31, 31, 0.95);
}

body:not(:has(main .hero-wrapper, main [class*="-hero"])) main {
    /* Fallback, navbar'ın masaüstündeki gerçek yüksekliğiyle (90px) aynı tutuluyor:
       JS değişkeni atayana kadar farklı bir değer kullanılırsa içerik bir anlığına kayıyor. */
    padding-top: var(--navbar-h, 90px);
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 4;
}

.bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Overlay Katmanları */
.bg-overlay-green {
    background: rgba(66, 95, 87, 0.57);
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-overlay-gradient {
    background: linear-gradient(90deg, rgba(31, 31, 31, 0.75) 0%, rgba(31, 31, 31, 0) 100%);
    z-index: 3;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.left-gradient-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 124px;
    height: 100vh;
    background: linear-gradient(90deg, rgba(31, 31, 31, 0.75) 0%, rgba(31, 31, 31, 0) 100%);
    z-index: 8;
    pointer-events: none;
}

/* ===========================
   NAVBAR (HEADER)
   =========================== */

.navbar {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 20;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s;
}

.navbar .container {
    position: relative;
}

.navbar .container {
    padding-left: 240px;
    padding-right: 240px;
    max-width: 1920px;
    width: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.navbar-brand img {
    height: 65px;
    width: auto;
    object-fit: contain;
}

.navbar.scrolled {
    background: rgba(31, 31, 31, 0.95);
    padding: 12px 0;
    border-bottom: none;
    position: fixed;
}

.navbar-nav {
    gap: 50px !important;
    margin-right: 0;
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
}

/* Bootstrap me-3 class override */
.navbar-nav.me-3 {
    margin-right: 0;
}

.nav-link {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-grow: 0;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active,
a.nav-link:hover,
a.nav-link:focus,
a.nav-link:active {
    color: #FFFFFF !important;
    background: transparent !important;
    background-color: transparent !important;
}

.nav-item:hover .nav-link {
    color: #FFFFFF;
    background: transparent;
    background-color: transparent;
}

.nav-link i {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    flex: none;
    flex-grow: 0;
}

/* FontAwesome JS, sayfa yüklenince <i class="fa-solid fa-chevron-down"> etiketini otomatik
   olarak <svg class="svg-inline--fa fa-chevron-down"> ile değiştiriyor (DOM'dan <i> kalkıyor) —
   footer'daki aynı sorun burada da vardı. Seçici "fa-chevron-down" sınıfına göre yazıldığı için
   i/svg farkı önemli değil. */
.nav-link .fa-chevron-down {
    width: 13px;
    height: 13px;
    font-size: 8px;
    transition: transform 0.25s ease;
}

/* Dropdown açıkken (üzerine gelince JS ile eklenen .show) ok yukarı dönüyor */
.nav-item.dropdown.show .fa-chevron-down {
    transform: rotate(180deg);
}

.btn-header-cta i {
    width: 13.67px;
    height: 9.33px;
    flex: none;
    flex-grow: 0;
}

.btn-header-cta {
    background: var(--primary-green);
    color: #FFFFFF;
    padding: 16px 26px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    white-space: nowrap;
    flex: none;
    flex-grow: 0;
    width: auto;
    height: 48px;
}

.nav-item .btn-header-cta {
    margin: 0;
    padding: 12px 26px;
    height: auto;
    line-height: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

.nav-item .nav-link {
    display: flex;
    align-items: center;
}

/* style.css Bootstrap'ten önce yüklendiği için .navbar-nav .nav-link (koyu gri) rengini ezmek gerekiyor */
#mainNav .navbar-nav .nav-link {
    color: #FFFFFF;
}

/* Dropdown Menu */
.nav-item.dropdown {
    position: relative;
}

.nav-item.dropdown .nav-link {
    cursor: pointer;
}

/* Görünmez "köprü": .dropdown-menu, nav-link'in 10px altında başlıyor (top: calc(100% + 10px)).
   Bu boşlukta .nav-item.dropdown'ın hiçbir parçası olmadığından fare oradan geçerken
   mouseleave tetiklenip menü kapanıyordu. Bu pseudo-element boşluğu doldurup hover'ı sürdürür. */
.nav-item.dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
}

/* #mainNav ile özgüllük artırılıyor: style.css, Bootstrap'ten ÖNCE yüklendiği için normal
   .dropdown-menu kuralı Bootstrap'in (beyaz zeminli) kuralı tarafından eziliyordu — bu yüzden
   dropdown bazı sayfalarda beyaz, bazılarında (yayınlanmış HTML'in kendi <link> kopyası
   Bootstrap'ten sonra geldiği için tesadüfen) yeşil çıkıyordu. #mainNav ile her sayfada tutarlı hale getirildi. */
#mainNav .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: rgba(66, 95, 87, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px) scale(0.95);
    transform-origin: top left;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#mainNav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#mainNav .nav-item.dropdown.show .dropdown-menu,
#mainNav .dropdown.show .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    display: block !important;
}

#mainNav .nav-item.dropdown.show .dropdown-menu::before,
#mainNav .dropdown.show .dropdown-menu::before {
    opacity: 1;
}

#mainNav .dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0;
    position: relative;
    transform: translateX(-5px);
    opacity: 0;
}

#mainNav .dropdown.show .dropdown-item {
    transform: translateX(0);
    opacity: 1;
}

#mainNav .dropdown.show .dropdown-item:nth-child(1) {
    transition-delay: 0.05s;
}

#mainNav .dropdown.show .dropdown-item:nth-child(2) {
    transition-delay: 0.1s;
}

#mainNav .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #FFFFFF;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mainNav .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    transform: translateX(5px);
    padding-left: 25px;
}

#mainNav .dropdown-item:hover::before {
    transform: scaleY(1);
}

#mainNav .dropdown-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#mainNav .dropdown-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* "Tüm Ürünler" sadece mobil hamburger menüsünde gerekli: ÜRÜNLER tetikleyicisi mobilde artık
   sayfaya gitmiyor (sadece alt menüyü açıyor), o yüzden /urunler'e mobilden ulaşmak için ayrıca
   eklenmişti. Masaüstünde (≥1200px, hamburger'ın kapandığı nokta) ÜRÜNLER'e tıklamak zaten
   doğrudan /urunler'e gidiyor — burada tekrar göstermeye gerek yok. */
@media (min-width: 1200px) {
    .dropdown-item-mobile-only {
        display: none !important;
    }
}

/* Hamburger Menü Butonu */
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    background: transparent;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 20px;
    z-index: 10000;
    order: 2;
    position: relative;
}

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

.navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-toggler i {
    color: #FFFFFF;
}

/* Navbar collapse - footer ile hizalama için */
.navbar-collapse {
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
}

/* Mobil görünümde navbar-collapse her zaman gizli (mobile-menu kullanılıyor) */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none !important;
    }
}

.navbar-collapse .navbar-nav {
    width: 100%;
    justify-content: flex-end;
    margin-right: 0;
}

.btn-header-cta:hover {
    background-color: #354d46;
}

/* ===========================
   HERO İÇERİK
   =========================== */

.hero-container {
    position: relative;
    z-index: 15;
    padding-top: 80px;
}

.hero-container.container {
    padding-left: 240px;
    padding-right: 240px;
    max-width: 1920px;
    width: 100%;
}

.frame-5-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.frame-3-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frame-3-text {
    width: 100%;
    max-width: 800px;
}

.hero-title {
    font-size: 54px;
    line-height: 68px;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0;
    font-weight: 500;
}

.hero-title strong {
    font-weight: 600;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* ===========================
   BUTONLAR & OKLAR
   =========================== */

.frame-4-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 42px;
    min-width: 189px;
    width: auto;
    height: 56px;
    white-space: nowrap;
    background: #425F57;
    border-radius: 4px;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.frame-4-btn:hover {
    background: #354d46;
    color: #FFFFFF;
}

.frame-4-btn:active {
    background: #2a3d38;
    transform: scale(0.98);
}

.hero-controls {
    position: absolute;
    bottom: 80px;
    right: 15%;
    z-index: 20;
    display: flex;
    gap: 12px;
}

.slider-arrow {
    width: 80px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    /* Varsayılan gizli: JS (script.js, bindScroller) içerik gerçekten taşıyorsa ".is-visible"
       sınıfını ekliyor. Önce görünür basılıp JS'in gizlemesini beklemek, sayfa yenilenince
       okların bir anlığına görünüp kaybolmasına (flash) sebep oluyordu. */
    display: none;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.slider-arrow.is-visible {
    display: flex;
}

.slider-arrow:hover,
.slider-arrow:active {
    background: #FFFFFF;
    color: var(--primary-green);
    border-color: #FFFFFF;
}

/* ===========================
   DİĞER BÖLÜMLER (HAKKIMIZDA VB.)
   =========================== */

/* Tüm section container'ları için aynı padding */
section .container,
.section-features .container,
.section-products .container,
.section-blog .container,
.cta-content.container {
    padding-left: 240px;
    padding-right: 240px;
    max-width: 1920px;
    width: 100%;
}

.section-padding {
    padding: 100px 0;
    min-height: 512px;
    display: flex;
    align-items: center;
}

.text-green {
    color: var(--primary-green);
}

.text-gray {
    color: var(--text-gray);
}

.about-vector-img {
    max-width: 100%;
    height: auto;
}

.about-top-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-green);
    margin-bottom: 20px;
}

.about-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: var(--primary-green);
    margin-bottom: 10px;
}

.about-title strong {
    font-weight: 700;
}

.about-subtitle-text {
    font-weight: 400;
    font-size: 28px;
    color: #1F1F1F;
    margin-bottom: 30px;
}

.about-desc p {
    font-size: 16px;
    line-height: 24px;
    color: #4C4C4C;
    margin-bottom: 20px;
}

/* ===========================
   NEDEN ARK YAPI (ÖZELLİKLER)
   =========================== */

.section-features {
    position: relative;
    padding: 86px 0; /* Figma: Frame 20 padding */
    overflow: hidden;
}

.features-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.features-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-green);
    opacity: 0.95; /* Arkaplan resmi üzerine yeşil filtre */
    z-index: 1;
}

/* Sol Başlık (Neden ARK Yapı) */
.features-main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    color: #FFFFFF;
    margin: 0;
}

/* Kart Yapısı */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Figma: Frame 17 gap */
    text-align: center;
}

/* İkon (Daire yok) */
.feature-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    /* Border ve border-radius kaldırıldı */
}

/* Kart İçeriği */
.feature-content {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Figma: Frame 14 gap */
}

.feature-content h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
}

.feature-content p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* Grimsi Beyaz İsteği */
    color: #E0E0E0; 
    margin: 0;
}

/* ===========================
   ÜRÜNLER BÖLÜMÜ (GÜNCEL - FIGMA)
   =========================== */

.section-products {
    padding: 100px 0;
    background-color: #F0F5F4; /* Rectangle 4298 rengi */
    position: relative;
    min-height: 858px;
}

/* Başlık (Ürünlerimiz) */
.products-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    color: #425F57; /* Yeşil */
    margin: 0;
}

/* Ürünler Bölümü Ok Butonları (Hero ile aynı stil) */
.product-nav-box {
    display: flex;
    gap: 12px;
}

.section-products .slider-arrow {
    border: 1px solid rgba(66, 95, 87, 0.25);
    background: transparent;
    color: rgba(66, 95, 87, 0.4); /* Normal durumda açık gri */
}

.section-products .slider-arrow:hover {
    background: var(--primary-green);
    color: #FFFFFF;
    border-color: var(--primary-green);
}

.section-products .slider-arrow:active,
.section-products .slider-arrow.active {
    background: var(--primary-green);
    color: #FFFFFF;
    border-color: var(--primary-green);
}

/* Scroll Wrapper */
.products-scroll-wrapper {
    display: flex;
    gap: 20px; /* Frame 21 gap */
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
    width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.products-scroll-wrapper::-webkit-scrollbar { display: none; }

/* Kart Yapısı (Group 4, 5, 6, 7) */
.product-card-simple {
    flex: 0 0 calc((100% - 60px) / 4); /* 4 kart + 3 gap (20px * 3 = 60px) */
    width: calc((100% - 60px) / 4);
    height: 374px;    /* Rectangle 4294 Height */
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Kart Resmi */
.prod-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.product-card-simple:hover .prod-bg {
    transform: scale(1.1);
}

/* Kart Alt Bilgi Kutusu (Rectangle 4304) */
.prod-info-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 86px; /* Figma Height */
    
    /* Figma Background Code */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), rgba(255, 255, 255, 0.8);
    
    border-radius: 0px 0px 8px 8px;
    display: flex;
    align-items: center; /* Dikey ortalama */
    padding-left: 24px;  /* Text left: 24px */
}

/* Kart Yazısı */
.prod-info-box h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #425F57; /* Yeşil Yazı */
    margin: 0;
}

/* Tüm Ürünler Butonu (Frame 4) */
.btn-all-products {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 42px;
    width: 220px;
    height: 56px;
    background: #425F57;
    border-radius: 4px;
    
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.3s;
}

.btn-all-products:hover {
    background-color: #354d46;
    color: #FFFFFF;
}

/* ===========================
   MARKALAR, BLOG, FOOTER
   =========================== */

.brand-grid {
    /* Sabit 3 sütun: marka sayısı ne olursa olsun (admin panelinden istenildiği
       kadar eklenebiliyor) her satırda 3 logo olacak şekilde alta sarar.
       Sütunlar kendi içeriği kadar geniş (1fr değil) — aksi halde sütunlar
       kapsayıcıya göre orantısız aralanıp aradaki boşluk devasa görünüyordu.
       "start" ile sola yasladığımızda ise metin bloğuna çok yakın kalıp sağda
       boş alan bırakıyordu; "center" ile boşluk iki yana dengeli dağılıyor. */
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 20px 60px;
}

.brand-item {
    width: auto;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.brand-item img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: 0.3s;
}

.brand-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* ===========================
   BLOG BÖLÜMÜ (GÜNCEL - FIGMA)
   =========================== */

.section-blog {
    position: relative;
    /* Frame 47 Height: 671px - Padding hesaplaması */
    padding: 100px 0;
    overflow: hidden;
    background-color: #425F57; /* Fallback renk */
    min-height: 967px;
}

/* Arkaplan Görseli (Rectangle 4301) */
.blog-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../img/ark/blog-background.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Koyu Yeşil Overlay */
.blog-bg-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66, 95, 87, 0.95); /* Koyu yeşil overlay */
    z-index: 1;
}

/* Başlık (Blog) */
.blog-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    color: #FFFFFF;
    margin: 0;
}

/* Blog Bölümü Ok Butonları (Ürünler ile aynı stil) */
.blog-nav-box {
    gap: 12px;
}

.section-blog .slider-arrow {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.4); /* Normal durumda açık beyaz */
}

.section-blog .slider-arrow:hover {
    background: #FFFFFF;
    color: var(--primary-green);
    border-color: #FFFFFF;
}

.section-blog .slider-arrow:active,
.section-blog .slider-arrow.active {
    background: #FFFFFF;
    color: var(--primary-green);
    border-color: #FFFFFF;
}

/* Blog Scroll Wrapper */
.blog-scroll-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
    width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.blog-scroll-wrapper::-webkit-scrollbar { display: none; }

/* Blog Kartı (Frame 42/43/44) */
.blog-card {
    flex: 0 0 calc((100% - 40px) / 3); /* 3 kart + 2 gap (20px * 2 = 40px) */
    width: calc((100% - 40px) / 3);
    min-width: 320px; /* Minimum genişlik mobil için */
    height: 467px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    /* Kart içeriğini aşağı hizala */
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-direction: column;
    justify-content: flex-end;
}

/* Blog Gradient (Eski Stil) */
.blog-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(31, 31, 31, 0.8), rgba(31, 31, 31, 0.2));
    z-index: 1;
}

/* Blog Content (Eski Stil) */
.blog-content {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

/* Blog Date (Eski Stil) */
.blog-date {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 0;
    align-self: flex-start;
}

/* Blog Title (Eski Stil) */
.blog-title {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 15px;
    line-height: 1.3;
    word-wrap: break-word;
    align-self: flex-start;
}

/* Blog Content Top (Tarih ve Başlık) */
.blog-content-top {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Blog Content Bottom (Buton) */
.blog-content-bottom {
    margin-top: auto;
}

/* Button Outline Glass (Eski Stil) */
.btn-outline-glass {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
    margin-top: auto;
    align-self: flex-start;
}

.btn-outline-glass:hover {
    background: white;
    color: var(--dark-bg);
}

/* Button White Text */
.btn-white-text {
    background: #FFFFFF;
    color: var(--primary-green);
    padding: 16px 42px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
}

/* Blog Navigasyon Butonları */
.nav-btn {
    width: 80px;
    height: 46px;
    border: 1px solid rgba(66, 95, 87, 0.25);
    background: transparent;
    border-radius: 8px;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

.nav-btn.btn-glass {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    color: white;
}

.nav-btn.btn-glass.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- CTA (İletişim) Bölümü --- */
/* Ana Kapsayıcı */
.cta-section {
    position: relative;
    width: 100%;
    height: 341px;
    background-color: #F0F5F4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. Katman: Havalandırma Görseli */
.cta-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../img/ark/hero.webp');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
}

/* 2. Katman: Vector (ARK Yazısı/Şekli) */
.cta-vector {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: url('../../img/ark/iletisim-bg.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

/* 3. Katman: İçerik Alanı */
.cta-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Başlık Stili */
.cta-title {
    font-size: 36px;
    font-weight: 600;
    color: #425F57;
    white-space: nowrap;
    margin: 0;
    line-height: 48px;
    letter-spacing: 0
    ;
}

/* Açıklama Yazısı Stili */
.cta-desc {
    font-size: 16px;
    color: #4c4c4c;
    max-width: 400px;
    line-height: 100%;
    margin: 0;
}

/* Buton Stili */
.cta-button {
    display: inline-block;
    background-color: #425F57;
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.cta-button:hover {
    background-color: #2f453e;
}

/* --- Footer Bölümü (YENİ YAPI - FOF) --- */
/* ============================================
   FOOTER SECTION
   ============================================ */
.site-footer-fof {
    background: #1F1F1F;
    padding: 60px 0 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.footer-container-fof {
    padding-left: 240px;
    padding-right: 240px;
    max-width: 1920px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 62px;
    width: 1440px;
    height: 335px;
    position: relative;
}

/* Footer Top Row - Logo ve Footer Acc Wrapper yan yana */
.footer-top-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 196px;
    width: 1440px;
    height: 214px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Footer Intro (Logo + Açıklama) */
.footer-intro-fof {
    margin-bottom: 0;
    width: 291px;
    height: 179px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fof-logo-main {
    width: 187px;
    height: 75px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin: 0;
    flex: none;
}

.fof-desc-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #BABABA;
    margin: 0;
    width: 291px;
    height: 80px;
    flex: none;
}

/* Footer Accordion Wrapper */
.footer-acc-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    gap: 72px;
    width: 953px;
    height: 214px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Static Section (SOSYAL MEDYA - Accordion DEĞİL, PC'de her zaman açık) */
.fof-static-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: none;
    margin: 0 auto;
}

/* SOSYAL MEDYA */
.fof-col-sosyal {
    width: 169px;
    height: 180.4px;
}

.fof-static-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
    margin: 0;
}

/* Accordion Item (HIZLI ERİŞİM, LİNKLER, İLETİŞİM BİLGİLERİ — mobilde katlanır, PC'de hep açık;
   sıraya göre değil (:first-of-type / :last-of-type) açık sınıf adına göre boyutlanıyor, çünkü
   dördüncü sütun eklenince sıralamaya dayalı seçiciler yanlış sütunu hedeflemeye başlıyordu). */
.fof-acc-item {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: none;
    margin: 0 auto;
}

/* HIZLI ERİŞİM */
.fof-col-hizli {
    width: 91px;
    height: 214px;
}

/* LİNKLER */
.fof-col-linkler {
    width: 195px;
    height: 176px;
}

/* İLETİŞİM BİLGİLERİ */
.fof-col-iletisim {
    width: 287px;
    height: 178px;
}

/* Accordion Header/Button — artık Bootstrap'ın kendi accordion/collapse JS'i (bootstrap.bundle.js,
   data-bs-toggle="collapse") kullanılıyor; elle yazılmış açma/kapama JS'i ve FontAwesome ikonuna
   bağlı özel çözümler kaldırıldı (FontAwesome JS <i>'yi runtime'da <svg>'ye çeviriyordu, o yüzden
   "PC'de oku gizle" gibi kurallar "i" etiketini hedefleyince sessizce çalışmaz olmuştu — Bootstrap'ın
   kendi ok ikonu (.accordion-button::after, bir SVG background-image) bu sorunu da ortadan kaldırıyor).
   Burada sadece Bootstrap'ın varsayılan (beyaz kutu, gölge, mavi focus) görünümü site tasarımına
   göre sıfırlanıp yeniden veriliyor. */
.accordion-header {
    margin: 0;
}

.accordion-button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button:not(.collapsed) {
    background: transparent;
    color: #FFFFFF;
    box-shadow: none;
}

/* Bootstrap'ın ok ikonu normalde "--bs-accordion-btn-icon" değişkeninden geliyor ama bu değişken
   Bootstrap'ta ".accordion" (dış sarmalayıcı) üzerinde tanımlı; burada footer'ın mevcut flex
   sütun düzenini bozmamak için ".accordion" sarmalayıcısı kullanılmadığından değişken boş kalıp
   ok hiç görünmüyordu. Bootstrap'ın kendi ok SVG'si burada doğrudan veriliyor, header logosunda
   kullanılan aynı yöntemle (filter: brightness(0) invert(1)) koyu SVG beyaza çevriliyor. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 12px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.accordion-item {
    background: transparent;
    color: inherit;
}

/* Bootstrap açılış animasyonu sırasında (.collapsing) overflow:hidden veriyor, ama animasyon
   bitip ".show" durumuna geçince overflow'u "visible"a bırakıyor. Bu geçiş anında kenar boşluğu
   (margin) hesaplaması değişip hedeflenen yükseklik birkaç piksel farklı çıkıyor — animasyon
   biterken kutunun aniden küçülüp "zıplaması" buradan geliyordu. overflow:hidden'ı kalıcı
   yaparak (içerik zaten taşmıyor) bu sıçramayı ortadan kaldırıyoruz. */
.accordion-collapse {
    overflow: hidden;
}

.accordion-body {
    padding: 0;
}

/* List Links */
.fof-list-links {
    display: flex;
    flex-direction: column;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: none;
}

/* HIZLI ERİŞİM links (height sabitlenmiyor: içerik zaten aynı boyuta oturuyor, sabit değer
   birkaç pikselik görünmez taşmaya ve footer accordion'un açılış animasyonunda "zıplamaya"
   sebep oluyordu) */
.fof-col-hizli .fof-list-links {
    width: 82px;
}

/* LİNKLER links */
.fof-col-linkler .fof-list-links {
    width: 195px;
}

.fof-list-links li {
    /* Sabit height:16px kaldırıldı: içerik (a etiketi, line-height:16px) zaten bu yüksekliği
       veriyordu. "overflow:hidden" ise asıl kaynağı düzeltiyor: fontun kendi satır metrikleri
       (Poppins) sıkıştırılmış line-height:16px'i görünmez şekilde birkaç piksel aşıyordu — göze
       hiç görünmüyordu ama bu taşma li'den ul'a, oradan footer accordion'un ölçtüğü
       scrollHeight'a kadar birikip Bootstrap'ın açılış animasyonunun HEDEF yüksekliğini gerçek
       (offsetHeight) değerden birkaç piksel fazla hesaplamasına, animasyon biterken kutunun
       gerçek boyutuna aniden "zıplamasına" sebep oluyordu. Her li kendi taşmasını kırpınca
       ölçümler birebir eşleşiyor ve zıplama kayboluyor. */
    line-height: 16px;
    overflow: hidden;
}

.fof-list-links a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #BABABA;
    text-decoration: none;
    transition: color 0.3s;
}

/* "Linkler" listesi eskiden Hızlı Erişim'den bir tık daha koyu griydi (#989898 vs #BABABA) —
   kasıtlıydı ama tutarsız görünüyordu, aynı renge çekildi. */
.fof-list-links.fof-gray a {
    color: #BABABA;
}

.fof-list-links a:hover {
    color: #FFFFFF;
}

/* Contact List */
.fof-contact-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 287px;
    height: 132px;
    flex: none;
}

.fof-contact-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 8px;
    flex: none;
    /* fof-list-links li'deki aynı sebep: sıkıştırılmış line-height:16px'in fontun kendi satır
       metriklerini görünmez şekilde aşması, footer accordion'un scrollHeight ölçümünü şaşırtıp
       açılış animasyonu biterken kutunun "zıplamasına" yol açıyordu. */
    overflow: hidden;
}

a.fof-contact-row {
    text-decoration: none;
    color: inherit;
}

.fof-contact-row:first-of-type {
    width: 215px;
    height: 28px;
}

.fof-contact-row:nth-of-type(2) {
    width: 198px;
    height: 28px;
}

.fof-contact-row:last-of-type {
    width: 287px;
    height: auto;
    min-height: 32px;
    align-items: flex-start;
}

.fof-contact-row:last-of-type span {
    line-height: 16px;
    white-space: normal;
    word-wrap: break-word;
    /* flex item'lar varsayılan olarak shrink olmadığı için metin taşıp tek satırda kalıyordu;
       sabit bir genişlik vererek iki satıra bölünmesini sağlıyoruz (Figma tasarımındaki gibi). */
    width: 210px;
    flex: none;
}

.fof-icon-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px;
    gap: 10px;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.fof-icon-box i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #425F57;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.fof-icon-box img {
    width: 16px;
    height: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    object-fit: contain;
}

.fof-contact-row span {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #BABABA;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Social Grid */
.fof-social-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 119px;
    height: 134.4px;
    flex: none;
}

.fof-social-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 12px;
    flex: none;
}

a.fof-social-row {
    text-decoration: none;
    color: inherit;
}

.fof-social-row:first-of-type {
    width: 119px;
    height: 30.13px;
}

.fof-social-row:nth-of-type(2) {
    width: 119px;
    height: 30.13px;
}

.fof-social-row:last-of-type {
    width: 51.13px;
    height: 30.13px;
}

.fof-icon-box.white {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px;
    gap: 11.33px;
    width: 30.13px;
    height: 30.13px;
    background: #FFFFFF;
    border-radius: 8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.fof-icon-box.white img {
    width: 18.13px;
    height: 18.13px;
    flex: none;
    order: 0;
    flex-grow: 0;
    filter: none;
}

.fof-social-row span {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #BABABA;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Bottom Area */
.fof-bottom-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 34px;
    width: 1440px;
    height: 59px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.fof-bottom-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 1010px;
    width: 1440px;
    height: 24px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.fof-divider {
    width: 1440px;
    height: 1px;
    background: #4C4C4C;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.fof-copy-text {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    margin: 0;
    width: 328px;
    height: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.fof-logo-secondary {
    width: 102px;
    height: 24px;
    object-fit: contain;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Mobil görünümde footer düzeni */
@media (max-width: 991px) {
    .footer-container-fof {
        width: 100%;
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .footer-top-row {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 20px;
    }
    
    .footer-intro-fof {
        width: 100%;
        height: auto;
    }
    
    .footer-acc-wrapper {
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 30px;
    }
    
    .fof-static-section,
    .fof-acc-item {
        width: 100% !important;
        margin-bottom: 0;
    }
    
    .fof-col-hizli {
        order: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

    .fof-col-linkler {
        order: 1;
        margin-top: 0;
    }

    .fof-col-iletisim {
        order: 2;
    }

    .fof-col-sosyal {
        order: 3;
    }
    
    .fof-bottom-area {
        width: 100%;
        height: auto;
    }
    
    .fof-bottom-content {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 15px;
        align-items: flex-start;
    }
    
    .fof-divider {
        width: 100%;
    }
}

/* --- FOOTER ACCORDION (Bootstrap accordion/collapse bileşeni) --- */

/* 1. Masaüstü (PC) Görünümü - Accordion her zaman açık, tıklanamaz, ok yok */
@media (min-width: 992px) {
    .accordion-collapse {
        display: block !important; /* Bootstrap'ın .collapse (display:none) durumunu ez */
    }

    .accordion-button {
        cursor: default;
        pointer-events: none; /* PC'de tıklamayı kapat */
    }

    .accordion-button::after {
        display: none !important; /* PC'de okları gizle */
    }

    /* PC'de accordion item'larda border ve padding yok */
    .accordion-item {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* PC'de static section'larda (SOSYAL MEDYA) padding normal */
    .fof-static-section {
        padding: 0 !important;
    }
}

/* 2. Mobil Görünüm - Akordeon Aktif (HIZLI ERİŞİM, LİNKLER, İLETİŞİM BİLGİLERİ) */
@media (max-width: 991px) {
    .footer-acc-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    /* border/border-radius burada !important: Bootstrap'ın kendi accordion CSS'i, kutular
       bitişik/yapışık dizilmiş varsayımıyla ".accordion-item:not(:first-of-type){border-top:0}"
       ve sadece ilk/son kutuya border-radius veren kurallar içeriyor (çift kenarlık olmasın
       diye). Bizim kutular arasında 30px boşluk var, bitişik değiller — o yüzden LİNKLER ve
       İLETİŞİM BİLGİLERİ kutularının üst kenarlığı görünmüyordu. !important ile her kutu kendi
       tam çerçevesini (4 kenar + 4 köşe) alıyor, sıradaki yerine bakılmaksızın. */
    .accordion-item {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        width: 100% !important;
        /* Masaüstü boyutlandırması (.fof-col-hizli vb.) sabit bir height veriyor — o değer
           açık/dolu içerik için hesaplanmıştı; mobilde accordion kapalıyken kutu boş görünüp
           o sabit yükseklikte kalmasın diye height serbest bırakılıyor. */
        height: auto !important;
        padding: 15px;
        gap: 0 !important;
        margin-bottom: 0;
    }

    .fof-static-section {
        border: none;
        width: 100% !important;
        padding: 15px 0;
        margin-bottom: 0;
    }

    /* Mobilde bottom area düzeni */
    .fof-bottom-area {
        margin-top: 10px !important;
        padding-top: 15px !important;
    }

    /* İçerik açıldığında (Bootstrap'ın .show sınıfı) başlıkla liste arasına boşluk */
    .accordion-body {
        padding-top: 20px;
    }
}

/* Eski Footer Bölümü (Backward Compatibility) */
.footer-section {
    background: #1F1F1F;
    padding: 60px 0 40px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 62px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-section .container {
    padding-left: 240px;
    padding-right: 240px;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Top Row: Main Content */
.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: 214px;
    box-sizing: border-box;
    gap: 72px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

/* Column 1: Company Info */
.footer-company {
    width: 291px;
    height: 179px;
    flex-shrink: 0;
}

.footer-logo {
    width: 187px;
    height: 75px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-description {
    width: 291px;
    height: 80px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #BABABA;
    margin: 0;
    align-self: stretch;
}

/* Column 2: Quick Access */
.footer-quick-access {
    width: auto;
    min-width: 120px;
    height: 214px;
    margin-left: 0;
    flex-shrink: 0;
}

/* Column 3: Links */
.footer-links-col {
    width: 195px;
    height: 176px;
    margin-left: 0;
    flex-shrink: 0;
}

/* Column 4: Contact */
.footer-contact {
    width: 287px;
    height: 178px;
    margin-left: 0;
    flex-shrink: 0;
}

/* Desktop'ta footer hizalaması */
@media (min-width: 1200px) {
    .footer-top {
        justify-content: space-between;
    }
}

/* Column 5: Social Media */
.footer-social {
    width: 169px;
    height: 180.4px;
    margin-left: 0;
    flex-shrink: 0;
}

/* Footer Headings */
.footer-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
    margin: 0;
}

.footer-quick-access .footer-heading {
    white-space: nowrap;
}

/* --- FOOTER CUSTOM ACCORDION (NO BOOTSTRAP) --- */

/* 1. Masaüstü (PC) Görünümü - ASLA DEĞİŞMEZ */
@media (min-width: 992px) {
    .footer-body-fof {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .fof-arrow {
        display: none !important; /* PC'de okları gizle */
    }
    .footer-header-fof {
        cursor: default;
        pointer-events: none; /* PC'de tıklamayı kapat */
    }
}

/* 2. Mobil Görünüm - Akordeon Aktif */
@media (max-width: 991px) {
    .accordion-item-fof {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ayrım çizgisi */
        width: 100% !important;
    }

    .footer-header-fof {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        cursor: pointer;
    }

    .footer-heading {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* Ok İkonu Animasyonu */
    .fof-arrow {
        font-size: 12px;
        transition: transform 0.3s ease;
        color: #fff;
    }

    /* İçerik Alanı (Kapalı Başlar) */
    .footer-body-fof {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }

    /* Aktif Durum (Tıklanınca JS ile eklenir) */
    .accordion-item-fof.is-open .footer-body-fof {
        max-height: 500px; /* İçeriğe göre genişler */
        opacity: 1;
        padding-bottom: 20px;
    }

    .accordion-item-fof.is-open .fof-arrow {
        transform: rotate(180deg); /* Ok yukarı döner */
    }
}

/* Footer Links */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-quick-access .footer-links {
    width: auto;
    min-width: 120px;
    height: 168px;
}

.footer-links-col .footer-links {
    width: 195px;
    height: 130px;
}

.footer-links li {
    height: 16px;
}

.footer-links a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #BABABA;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links-col .footer-links a {
    color: #989898;
}

.footer-links a:hover {
    color: #FFFFFF;
}

/* Contact List */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 287px;
    height: 132px;
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-contact-list li:first-child {
    width: 215px;
    height: 28px;
}

.footer-contact-list li:nth-child(2) {
    width: 198px;
    height: 28px;
}

.footer-contact-list li:nth-child(3) {
    width: 287px;
    height: 32px;
    align-items: flex-start;
}

.contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 8px;
}

.contact-icon i {
    font-size: 12px;
    color: #425F57;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-svg-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.footer-contact-list span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #989898;
}

.footer-contact-list li:first-child span {
    width: 179px;
    height: 16px;
}

.footer-contact-list li:nth-child(2) span {
    width: 162px;
    height: 16px;
}

.footer-contact-list li:nth-child(3) span {
    width: 251px;
    height: 32px;
    line-height: 16px;
}

/* Social Media List */
.footer-social-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 119px;
    height: 134.4px;
}

.footer-social-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 30.13px;
}

.footer-social-list li:first-child {
    width: 119px;
}

.footer-social-list li:nth-child(2) {
    width: 119px;
}

.footer-social-list li:nth-child(3) {
    width: 51.13px;
}

.social-icon {
    display: flex;
    align-items: center;
    padding: 6px;
    width: 30.13px;
    height: 30.13px;
    background: #FFFFFF;
    border-radius: 8px;
}

.social-icon i {
    font-size: 14px;
    color: #FFFFFF;
    width: 18.13px;
    height: 18.13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #425F57;
    border-radius: 2px;
}

.social-svg-icon {
    width: 18.13px;
    height: 18.13px;
    object-fit: contain;
    display: block;
}

.footer-social-list span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #989898;
    order: 1;
}

.footer-social-list li:first-child span {
    width: 69px;
    height: 16px;
}

.footer-social-list li:nth-child(2) span {
    width: 73px;
    height: 16px;
}

.footer-social-list li:nth-child(3) span {
    width: 9px;
    height: 16px;
}

/* Bottom Row: Copyright */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    width: 100%;
    height: auto;
    min-height: 59px;
    order: 1;
    align-self: stretch;
    margin-top: 0;
    padding: 0;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: #4C4C4C;
    align-self: stretch;
    margin: 0;
}

.footer-copyright {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    width: 100%;
    height: auto;
    min-height: 24px;
    order: 1;
    align-self: stretch;
    margin: 0;
    padding: 0;
}

.copyright-text {
    width: 328px;
    height: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    margin: 0;
}

.footer-secondary-logo {
    width: 102px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.argede-logo {
    width: 100%;
    height: 24px;
    object-fit: contain;
    display: block;
    order: 1;
}

/* ===========================
   RESPONSIVE
   =========================== */

/* Orta çözünürlükler için padding ayarları */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 100px;
        padding-right: 100px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 150px;
        padding-right: 150px;
    }
}

@media (min-width: 1400px) and (max-width: 1499px) {
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 120px;
        padding-right: 120px;
    }
}

@media (min-width: 1500px) and (max-width: 1599px) {
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 150px;
        padding-right: 150px;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 200px;
        padding-right: 200px;
    }
}

/* =========================================
   1470px (Laptop) Ekranı İçin Özel Düzeltme
   ========================================= */
@media (min-width: 1350px) and (max-width: 1550px) {
    
    /* 1. Kenar Boşluklarını Rahatlatma */
    /* Mevcut 120px olan boşluğu 60px'e düşürerek içeriğe yer açıyoruz */
    .navbar .container,
    .hero-container.container,
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Navbar içindeki menü linklerinin arasını biraz kısalım */
    .navbar-nav {
        gap: 30px !important;
        margin-right: 15px !important;
    }

    /* 2. Footer (Alt Kısım) Hizalaması */
    .footer-quick-access {
        margin-left: 50px !important;
    }
    
    .footer-links-col,
    .footer-contact,
    .footer-social {
        margin-left: 40px !important;
    }

    /* Footer üst kısmındaki hizalamayı garantiye al */
    .footer-top {
        justify-content: space-between;
        gap: 0;
    }

    /* 3. Yazı Boyutları */
    /* Çok büyük başlıkların ekrandan taşmasını engellemek için */
    .hero-title {
        font-size: 46px;
        line-height: 60px;
    }
    
    .hero-subtitle {
        font-size: 20px;
        line-height: 48px;
    }

    /* Ürün kartlarını biraz daha orantılı hale getirelim */
    .product-card-simple {
        height: 340px;
    }
}

@media (max-width: 991px) {
    .hero-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 20px;
        line-height: 32px;
    }

    .navbar {
        background: rgba(31, 31, 31, 0.95);
        position: fixed;
    }
    
    .navbar .container {
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Bootstrap'ın varsayılan padding'ini override et */
    .navbar.navbar-expand-lg .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .navbar-brand {
        order: 1;
    }
    
    .navbar-toggler {
        order: 2;
        margin-left: auto;
    }
    
    
    .hero-container.container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* Tüm section container'ları için responsive padding */
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .navbar .container {
        position: relative;
    }
    
    /* Mobile Menu Overlay - Sağdan Yarım Açılan */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
    
    /* Mobile Menu Panel - Sağdan Yarım */
    .mobile-menu-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        background: rgba(66, 95, 87, 0.98);
        backdrop-filter: blur(10px);
        padding: 80px 0 20px;
        z-index: 9999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .mobile-menu-overlay.active .mobile-menu-panel {
        transform: translateX(0);
    }
    
    /* Close Button - Artık kullanılmıyor, hamburger butonu toggle olacak */
    .mobile-menu-close {
        display: none !important;
    }
    
    /* Navbar Nav - Mobil */
    .mobile-menu-panel .navbar-nav {
        gap: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        list-style: none;
        padding: 0 20px;
    }
    
    .mobile-menu-panel .nav-item {
        width: 100%;
    }
    
    .mobile-menu-panel .nav-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-menu-panel .nav-item.d-none.d-lg-block {
        display: block !important;
    }
    
    .mobile-menu-panel .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 16px 0;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .mobile-menu-panel .nav-link:hover {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .mobile-menu-panel .nav-link i {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        line-height: 1;
        font-size: 10px;
        opacity: 0.7;
    }
    
    /* Mobile Dropdown - Dropdown item'ları görünür yap */
    .mobile-menu-panel .nav-item.dropdown {
        display: block !important;
    }
    
    .mobile-menu-panel .nav-item.dropdown .nav-link {
        cursor: pointer;
    }
    
    /* Mobile Dropdown — "#mobileMenuPanel" (ID) kullanılıyor, sadece ".mobile-menu-panel"
       (class) DEĞİL: masaüstü kuralı "#mainNav .dropdown-menu" bir ID içerdiği için, aynı
       özgüllükte olmayan class tabanlı bir seçici onu asla eviremiyordu — mobil menüde alt
       menü (KURUMSAL/ÜRÜNLER) bu yüzden gerçekte masaüstündeki gibi köşeleri yuvarlak,
       yüzen/kayan koyu yeşil bir kutu olarak diğer menü öğelerinin ÜZERİNE biniyordu, normal
       akışta aşağı itilmiyordu. ID ile özgüllük eşitleniyor, dosyada masaüstü kuralından SONRA
       geldiği için de mobil kural kazanıyor. */
    #mobileMenuPanel .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        /* Bootstrap'ın varsayılan ".dropdown-menu" kuralı kenarlık (border) veriyor; masaüstü
           kuralımız (#mainNav .dropdown-menu) bunu hiç ezmediği için buraya da sızıp sol
           kenardaki ince çizginin yanında dört tarafı saran çirkin bir kutu oluşturuyordu.
           Önce tamamen kaldırılıp sonra sadece istenen sol çizgi geri veriliyor. */
        border: none;
        padding: 0;
        margin: 0;
        margin-top: 10px;
        margin-left: 20px;
        border-left: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
        padding-left: 15px;
        display: none !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #mobileMenuPanel .dropdown.show .dropdown-menu {
        display: block !important;
        max-height: 200px;
        opacity: 1;
        margin-top: 15px;
    }

    #mobileMenuPanel .dropdown-item {
        padding: 10px 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        transform: translateX(-15px);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    color 0.2s ease,
                    padding-left 0.2s ease;
    }

    #mobileMenuPanel .dropdown.show .dropdown-item {
        transform: translateX(0);
        opacity: 1;
    }

    #mobileMenuPanel .dropdown.show .dropdown-item:nth-child(1) {
        transition-delay: 0.1s;
    }

    #mobileMenuPanel .dropdown.show .dropdown-item:nth-child(2) {
        transition-delay: 0.15s;
    }

    #mobileMenuPanel .dropdown-item:hover {
        background: transparent;
        color: #FFFFFF;
        transform: translateX(5px);
        padding-left: 20px;
    }
    
    /* İletişim Butonu - Mobil — beyaz zemin: koyu yeşil menü panelinin üstünde eskisi gibi
       koyu yeşil kalırsa arka planla neredeyse aynı renk olup gözden kayboluyordu. */
    .mobile-menu-panel .btn-header-cta {
        width: calc(100% - 40px);
        margin: 20px 20px 0;
        padding: 14px 24px;
        text-align: center;
        justify-content: center;
        border-radius: 8px;
        background: #FFFFFF;
        color: var(--primary-green);
    }

    .hero-controls {
        right: 20px !important;
        left: auto !important;
        transform: none !important;
        bottom: 40px;
    }

    .left-gradient-bar {
        display: none;
    }

    .cta-section {
        height: auto;
        padding: 60px 0;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .cta-title {
        white-space: normal;
    }
    

    .frame-3-text {
        max-width: 100%;
    }

    .about-title {
        font-size: 20px;
    }

    .about-subtitle-text {
        font-size: 22px;
    }

    /* Mobil Uyumluluk - Features */
    .features-main-title {
        margin-bottom: 40px;
        text-align: center;
    }
    
    .section-features {
        padding: 60px 0;
    }

    /* Mobil Uyumluluk - Products */
    .section-products {
        padding: 40px 0;
        min-height: auto;
    }
    
    .section-products .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .products-title {
        font-size: 24px;
        text-align: left;
        width: auto;
        margin-bottom: 0;
        line-height: 32px;
    }
    
    .section-products .d-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }
    
    /* Mobilde ok butonlarını göster */
    .product-nav-box {
        display: flex;
        gap: 8px;
    }
    
    .product-nav-box .slider-arrow {
        width: 50px;
        height: 36px;
        font-size: 12px;
    }
    
    /* Tüm Ürünler Butonu - Mobil */
    .btn-all-products {
        width: auto;
        min-width: 160px;
        max-width: 100%;
        height: 48px;
        padding: 12px 28px;
        font-size: 14px;
    }
    
    /* Frame-4-btn butonları - Mobil */
    .frame-4-btn {
        width: auto;
        min-width: 140px;
        max-width: 100%;
        height: 48px;
        padding: 12px 28px;
        font-size: 14px;
    }
    
    /* Markalar bölümü başlık ve buton */
    .text-green.fw-bold {
        font-size: 24px;
        margin-bottom: 15px;
    }

    /* Blog başlığı: Bootstrap'ın h2 için verdiği varsayılan akışkan (viewport'a göre büyüyen)
       boyutu hiç özelleştirilmediği için "Ürünler"/"Markalar" ile aynı boyuta hizalanıyor. */
    .text-white.fw-bold {
        font-size: 24px;
    }

    .text-gray {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .products-scroll-wrapper {
        gap: 0;
        scroll-padding: 0;
    }
    
    .product-card-simple {
        flex: 0 0 100%; /* Mobilde 1 kart tam genişlik */
        width: 100%;
        min-width: 0;
        height: 300px;
        scroll-snap-align: center;
    }
    
    .products-scroll-wrapper {
        gap: 15px;
        padding-bottom: 10px;
    }

    /* Mobil Uyumluluk - Blog */
    .blog-section-title {
        font-size: 24px;
        margin-bottom: 0;
    }
    
    .section-blog .d-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }
    
    .blog-nav-box {
        display: flex;
        gap: 8px;
    }
    
    .blog-nav-box .slider-arrow {
        width: 50px;
        height: 36px;
        font-size: 12px;
    }

    .blog-scroll-wrapper {
        gap: 0;
        scroll-padding: 0;
    }
    
    .blog-card {
        flex: 0 0 100%; /* Mobilde 1 kart tam genişlik */
        width: 100%;
        min-width: 0;
        height: 400px;
        scroll-snap-align: center;
    }
    
    .blog-content {
        top: 15px;
        bottom: 15px;
        left: 15px;
        right: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .blog-date {
        font-size: 12px;
        padding: 4px 10px;
        margin-bottom: 0;
        align-self: flex-start;
    }
    
    .blog-title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 0;
        margin-top: 10px;
        align-self: flex-start;
    }
    
    .btn-outline-glass {
        padding: 10px 20px;
        font-size: 13px;
        margin-top: auto;
        align-self: flex-start;
    }
    
    .btn-white-text {
        width: auto;
        min-width: 160px;
        max-width: 100%;
        height: 48px;
        padding: 12px 28px;
        font-size: 14px;
    }

    /* Mobil Uyumluluk - CTA */
    .cta-section {
        height: auto;
        padding: 60px 0;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .cta-title {
        white-space: normal;
    }

}

/* Tablet için 2 kart */
@media (min-width: 768px) and (max-width: 991px) {
    .product-card-simple {
        flex: 0 0 calc((100% - 20px) / 2); /* 2 kart + 1 gap */
        width: calc((100% - 20px) / 2);
    }

    .blog-card {
        flex: 0 0 calc((100% - 20px) / 2); /* 2 kart + 1 gap */
        width: calc((100% - 20px) / 2);
    }
}

/* Desktop için 4 kart - Container genişliğine göre tam sığacak şekilde */
@media (min-width: 992px) {
    .product-card-simple {
        /* Container genişliğine göre: (100% - 60px) / 4 */
        /* 4 kart + 3 gap (20px * 3 = 60px) */
        flex: 0 0 calc((100% - 60px) / 4);
        width: calc((100% - 60px) / 4);
        min-width: 0; /* min-width'i kaldırıyoruz */
    }

    .blog-card {
        flex: 0 0 calc((100% - 40px) / 3); /* 3 kart + 2 gap (20px * 2 = 40px) */
        width: calc((100% - 40px) / 3);
        min-width: 0;
    }
}

/* Footer Responsive */
@media (max-width: 1600px) {
    .footer-quick-access {
        margin-left: 100px;
    }
    
    .footer-links-col,
    .footer-contact,
    .footer-social {
        margin-left: 50px;
    }
}

@media (max-width: 1400px) {
    .footer-top {
        gap: 40px;
        flex-wrap: wrap;
        height: auto;
        justify-content: flex-start;
    }
    
    .footer-quick-access {
        margin-left: 60px;
    }
    
    .footer-links-col,
    .footer-contact,
    .footer-social {
        margin-left: 40px;
    }
    
    .footer-company {
        width: 100%;
        max-width: 291px;
    }
    
    .footer-copyright {
        gap: 0;
        justify-content: space-between;
    }
}

@media (max-width: 1200px) {
    .footer-top {
        gap: 30px;
    }
    
    .footer-quick-access {
        margin-left: 40px;
    }
    
    .footer-links-col,
    .footer-contact,
    .footer-social {
        margin-left: 30px;
    }
}

@media (max-width: 991px) {
    .site-footer-fof {
        padding: 40px 0 30px;
    }
    
    .footer-container-fof {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .footer-section {
        padding: 40px 0 30px;
    }
    
    .footer-section .container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .footer-content {
        padding: 0;
        gap: 40px;
    }
    
    .footer-top {
        flex-direction: column;
        gap: 40px;
        height: auto;
        align-items: flex-start;
    }
    
    .footer-col {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    
    .footer-company {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-description {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-quick-access,
    .footer-links-col,
    .footer-contact,
    .footer-social {
        width: 100%;
        margin-left: 0;
        height: auto;
    }
    
    .footer-copyright {
        flex-direction: column;
        gap: 20px;
        height: auto;
        align-items: flex-start;
    }
    
    .footer-copyright-text {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .footer-container-fof {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .footer-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .navbar .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .hero-container.container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Tüm section container'ları için responsive padding */
    section .container,
    .section-features .container,
    .section-products .container,
    .section-blog .container,
    .cta-content.container,
    .footer-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Mobilde ürünler ve blog bölümlerinin boşluğunu azalt */
    .section-products {
        padding: 40px 0;
        min-height: auto;
    }
    
    .section-blog {
        padding: 40px 0;
        min-height: auto;
    }
    
    /* Küçük mobil için butonlar ve başlıklar. Font-size 24px: "Ürünler", "Markalar" ve "Blog"
       başlıkları mobilde farklı büyüklükte görünüyordu (Blog, Bootstrap'ın h2 için varsayılan
       akışkan/fluid boyutunu -viewport'a göre değişen- hiç özelleştirilmeden kullanıyordu, ~24-25px;
       diğerleri elle daha küçük bir değere sabitlenmişti) — hepsi aynı 24px'e çekildi. */
    .products-title {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 15px;
    }
    
    .btn-all-products {
        width: auto;
        min-width: 140px;
        height: 44px;
        padding: 10px 24px;
        font-size: 13px;
    }
    
    .frame-4-btn {
        width: auto;
        min-width: 120px;
        height: 44px;
        padding: 10px 24px;
        font-size: 13px;
    }
    
    .product-nav-box .slider-arrow {
        width: 50px;
        height: 36px;
        font-size: 12px;
    }
    
    .about-title {
        font-size: 24px;
        line-height: 32px;
    }
    
    .about-subtitle-text {
        font-size: 18px;
        line-height: 26px;
    }
    
    .text-green.fw-bold {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .text-white.fw-bold {
        font-size: 24px;
    }

    .text-gray {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .blog-section-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .blog-nav-box .slider-arrow {
        width: 50px;
        height: 36px;
        font-size: 12px;
    }
    
    .blog-card {
        height: 350px;
    }
    
    .blog-content {
        top: 12px;
        bottom: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .blog-date {
        font-size: 11px;
        padding: 3px 8px;
        margin-bottom: 0;
        align-self: flex-start;
    }
    
    .blog-title {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 0;
        margin-top: 8px;
        align-self: flex-start;
    }
    
    .btn-outline-glass {
        padding: 8px 16px;
        font-size: 12px;
        margin-top: auto;
        align-self: flex-start;
    }
    
    .btn-white-text {
        width: auto;
        min-width: 140px;
        height: 44px;
        padding: 10px 24px;
        font-size: 13px;
    }
    
    .footer-section {
        padding: 30px 0 20px;
    }
    
    .footer-content {
        padding: 0;
        gap: 30px;
    }
    
    .footer-top {
        flex-direction: column;
        gap: 30px;
        height: auto;
    }
    
    .footer-col {
        width: 100% !important;
        margin-left: 0 !important;
        height: auto !important;
    }
    
    .footer-company,
    .footer-quick-access,
    .footer-links-col,
    .footer-contact,
    .footer-social {
        width: 100%;
        margin-left: 0;
        height: auto;
    }
    
    .footer-description {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-links,
    .footer-contact-list,
    .footer-social-list {
        width: 100%;
        height: auto;
    }
    
    .footer-contact-list li,
    .footer-contact-list li span {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-copyright {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .copyright-text {
        width: 100%;
    }
}