/* =================================================================
   ARK YAPI - HİZALAMA KATMANI (masaüstü, ≥ 992px)

   Bu dosya TÜM diğer CSS'lerden SONRA yüklenir (bkz. Layout/_Styles.cshtml).

   Sorun: header, hero, içerik, CTA ve footer'ın her biri kendi
   breakpoint tablosunda FARKLI yan boşluk (padding) tanımlıyordu
   (100 / 120 / 150 / 200 / 240 / 60px ...). Bu yüzden farklı ekran
   genişliklerinde header logosu ile içerik ve footer aynı dikey
   çizgide durmuyordu. Ayrıca footer 1440px sabit genişlikte ve
   padding: 0 ile ekranın soluna yapışıyordu.

   Çözüm: Yan boşluğun TEK bir kaynağı var: --sayfa-yan-bosluk.
   Tüm kapsayıcılar bunu kullanır; içerik alanı max 1920px olup
   geniş ekranlarda ortalanır.
   ================================================================= */

:root {
    --sayfa-max: 1920px;
    /* Tasarım (Figma) 1920px için 240px yan boşlukla yapılmış; sayfalardaki birçok öğe
       (ör. kategori okları) bu 240px'e göre konumlandırılmış. Bu yüzden 1920px ve üstünde
       DEĞER 240px SABİT kalır, yalnızca ekran daraldıkça kademeli küçülür:
         1920px → 240   1728px → 216   1600px → 200   1440px → 140   1280px → 100   1200px → 80
       (eski clamp(40px, 6.5vw, 240px) 1920'de 125px veriyordu ve tasarımı bozmuştu) */
    --sayfa-yan-bosluk: 240px;
}

/* 1920px altında yan boşluk KESİNTİSİZ küçülür (basamaklı/atlamalı değil).
   Doğru parçalı: 1920→240px, 1440→120px, 992→64px. İçerik alanını gereksiz daraltmaz.
     1920px → 240   1728px → 200   1600px → 173   1440px → 120   1366px → 111   1280px → 100   992px → 64 */
@media (min-width: 1440px) and (max-width: 1919px) {
    :root { --sayfa-yan-bosluk: calc(120px + (100vw - 1440px) * 0.25); }
}
@media (min-width: 992px) and (max-width: 1439px) {
    :root { --sayfa-yan-bosluk: calc(64px + (100vw - 992px) * 0.125); }
}

@media (min-width: 992px) {

    /* Header, hero, bölümler, CTA ve sayfa içerik kapsayıcılarının hepsi AYNI kuralı kullanır. */
    /* `html body` öneki özgüllüğü yükseltir: style.css'teki eski "1470px laptop düzeltmesi"
       (1350–1550px, padding: 60px !important) ve kurumsal/sertifikalar.css'teki benzerleri,
       header ile bölümlerin farklı yan boşluk almasına yol açıyordu. Eşit !important'ta
       özgüllüğü yüksek olan kazanır. */
    html body .navbar .container,
    html body .hero-container.container,
    html body .hero-container,
    html body .content-container:not(.form-wrapper),   /* .form-wrapper kendi max-width:1249px'ini korur (iletisim.css) */
    html body .cta-content.container,
    html body .cta-content,
    html body section > .container,
    html body section .container,
    html body .section-padding > .container,
    html body .section-features .container,
    html body .section-products .container,
    html body .section-blog .container,
    html body main > section .container,
    /* Sayfaya özel kapsayıcılar (kurumsal.css / sertifikalar.css'te eski 60px !important ile eziliyorlardı) */
    html body .kurumsal-hero .container,
    html body .biz-kimiz-section .container,
    html body .mv-container,
    html body .sertifikalar-hero .container,
    html body .sertifikalar-section .container,
    html body .referanslar-section .container,
    html body .referanslar-hero .container {
        box-sizing: border-box;
        width: 100%;
        max-width: var(--sayfa-max);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--sayfa-yan-bosluk) !important;
        padding-right: var(--sayfa-yan-bosluk) !important;
    }

    /* Eski "1470px laptop düzeltmesi" (style.css / kurumsal.css / sertifikalar.css) header menüsüne
       `margin-right: 15px !important` veriyordu; İLETİŞİM butonunun sağ kenarı içerik sınırından
       15px içeride kalıyordu (1366–1550px). Sağ kenar da içerikle aynı çizgide olmalı. */
    html body #mainNav .navbar-nav {
        margin-right: 0 !important;
    }

    /* --- FOOTER: 1440px sabit genişlik + padding:0 yerine aynı kapsayıcı kuralı --- */
    .footer-container-fof {
        box-sizing: border-box;
        width: 100%;
        max-width: var(--sayfa-max);
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--sayfa-yan-bosluk);
        padding-right: var(--sayfa-yan-bosluk);
    }

    /* Sütunların sabit genişlikleri toplamı 583px (91+181+287+169 ... + boşluklar); sağdaki
       "Sosyal Medya" sütunu kapsayıcının sağ sınırında bitmeli. Bunun için logo bloğu ile
       sütunlar arasındaki boşluk esnek bırakılıp (space-between), sütunlar birbirine
       yaklaşabilir ama HİÇBİR ZAMAN küçülmez/taşmaz (flex-shrink: 0). */
    .footer-top-row {
        width: 100%;
        height: auto;
        gap: 48px;
        justify-content: space-between;
    }

    .footer-intro-fof {
        flex: 0 0 auto;
    }

    .footer-acc-wrapper {
        width: auto;
        height: auto;
        flex: 0 1 auto;          /* içeriği kadar geniş; artan alanı logo tarafı boşluk olarak alır */
        min-width: 0;
        max-width: 100%;         /* asla kapsayıcıdan taşmaz */
        gap: 72px;               /* Figma'daki orijinal sütun boşluğu; dar ekranlarda aşağıdaki blok küçültür */
        margin-left: auto;       /* sütun grubu sağ sınıra yaslanır */
        flex-wrap: wrap;         /* yer yetmezse alta sarar (taşmak yerine) */
        row-gap: 32px;
    }

    /* Alt satır (çizgi + telif + Argede logosu) da Figma'dan gelen sabit değerlerle yazılmıştı:
       çizgi width:1440px (sayfadan taşıyordu), içerik gap:1010px (Argede logosunu ekranın
       dışına itiyordu). Kapsayıcıya göre esnek hâle getirildi. */
    .fof-bottom-area,
    .fof-bottom-content,
    .fof-divider {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .fof-bottom-area {
        height: auto;
    }

    .fof-bottom-content {
        height: auto;
        gap: 24px;
        justify-content: space-between;
    }
}

/* Footer sütun boşluğu yalnızca 1920px'in ALTINDA küçülür (orijinal 72px, 1920px'te korunur). */
@media (min-width: 992px) and (max-width: 1919px) {
    .footer-acc-wrapper { gap: clamp(20px, calc(72px - (1920px - 100vw) * 0.09), 72px); }
}

/* =================================================================
   DAR MASAÜSTÜ (992px – 1399px): header menüsü ve footer sütunları
   sabit boyutlarla tasarlandığı için bu aralıkta ekrandan taşıyordu.
   Boşluklar kademeli daraltılır; büyük ekranların görünümü değişmez.
   ================================================================= */
@media (min-width: 992px) and (max-width: 1399px) {

    /* Header: menü linkleri arası 50px -> ekrana göre 16-34px */
    .navbar-nav {
        /* 1280px'te menü ihtiyacı = mevcut alan (0px pay) idi ve sağa taşıyordu; boşluğu biraz
           daha daraltarak ~30px pay bırakıyoruz. */
        gap: clamp(12px, 1.9vw, 30px) !important;
    }

    .navbar .nav-link {
        font-size: 15px;
        white-space: nowrap;
    }

    .btn-header-cta {
        padding: 14px clamp(14px, 1.8vw, 26px);
    }

    /* Footer: 4 sütun sabit genişlikte (169+195+287+119...) sığmıyordu */
    .footer-acc-wrapper {
        flex-wrap: wrap;
        max-width: 100%;
        row-gap: 32px;
    }

    .footer-top-row {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    .fof-static-section,
    .fof-acc-item {
        flex: 1 1 140px;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    .fof-contact-row:first-of-type,
    .fof-contact-row:nth-of-type(2),
    .fof-contact-row:last-of-type {
        width: auto;
        max-width: 100%;
    }

    .fof-social-grid {
        width: auto;
        height: auto;
    }

    .fof-social-row:first-of-type,
    .fof-social-row:nth-of-type(2),
    .fof-social-row:last-of-type {
        width: auto;
        height: auto;
    }
}

/* =================================================================
   TABLET / KÜÇÜK LAPTOP (992px – 1199px): HAMBURGER MENÜ

   Header'ın 7 linki + butonu bu aralıkta 54–204px sığmıyordu (ölçüldü),
   Bootstrap ise 992px'te masaüstü menüyü açıyordu. Bu yüzden hamburger menü
   bu aralığa da uygulanır. style.css'teki ≤991px MENÜ kurallarının (28 kural)
   aynısıdır; sayfa düzeni kuralları (hero, kartlar vb.) BİLEREK dahil değil —
   o aralıkta sayfa masaüstü düzeninde kalır. Menüde değişiklik yaparken
   style.css'teki ≤991px bloğuyla birlikte güncelleyin.
   ================================================================= */
@media (min-width: 992px) and (max-width: 1199px) {

    .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;
        }

    .navbar.navbar-expand-lg .container {
            padding-left: 20px;
            padding-right: 20px;
        }

    .navbar-brand {
            order: 1;
        }

    .navbar-toggler {
            order: 2;
            margin-left: auto;
        }

    .navbar .container {
            position: relative;
        }

    .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 {
            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);
        }

    .mobile-menu-close {
            display: none !important;
        }

    .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-menu-panel .nav-item.dropdown {
            display: block !important;
        }

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

    .mobile-menu-panel .dropdown-menu {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            background: transparent;
            box-shadow: none;
            padding: 0;
            margin: 0;
            margin-top: 10px;
            margin-left: 20px;
            border-left: 2px solid rgba(255, 255, 255, 0.2);
            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);
        }

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

    .mobile-menu-panel .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;
        }

    .mobile-menu-panel .dropdown.show .dropdown-item {
            transform: translateX(0);
            opacity: 1;
        }

    .mobile-menu-panel .dropdown.show .dropdown-item:nth-child(1) {
            transition-delay: 0.1s;
        }

    .mobile-menu-panel .dropdown.show .dropdown-item:nth-child(2) {
            transition-delay: 0.15s;
        }

    .mobile-menu-panel .dropdown-item:hover {
            background: transparent;
            color: #FFFFFF;
            transform: translateX(5px);
            padding-left: 20px;
        }

    .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;
        }

    /* Bootstrap navbar-expand-lg 992px'te menüyü yatay açıyor; burada tekrar kapat. */
    .navbar-expand-lg .navbar-toggler { display: block !important; }
    .navbar-expand-lg .navbar-collapse { display: none !important; }
}

/* =================================================================
   scrollbar-gutter: stable (style.css) sayfa kenarında 15px yer ayırıyor.
   Panel ve karartma `position: fixed; right: 0` olduğu için bu boşluğun
   soluna yerleşiyor ve ekranın sağında 15px açık kalıyordu. Kaydırma
   çubuğunun kapladığı alan kadar sağdan taşırarak tam ekranı kaplatıyoruz.
   ================================================================= */
.mobile-menu-overlay,
.mobile-menu-panel {
    right: calc(-1 * (100vw - 100%));
}

.mobile-menu-overlay {
    /* karartma zaten left:0;right:0 -> tam genişlik için sağı da gutter kadar uzat */
    right: 0;
    width: 100vw;
}

/* =================================================================
   MOBİL: Admin WYSIWYG editöründen gelen başlık içeriği (Hakkımızda alt
   başlığı) satır içi `font-size: 36px` taşıyor (style="..." her zaman CSS'i
   ezer) ve 375px ekrana sığmayıp sayfayı yatay kaydırıyordu.

   İçerik <h2>/<h3> etiketleri barındırdığı için HTML'e <h3 class="about-subtitle-text">
   içine yerleştirilince tarayıcı bu başlıkları kapsayıcının DIŞINA çıkarıyor
   (geçersiz iç içe başlık). Bu yüzden seçici .about-subtitle-text'e değil,
   Hakkımızda bölümünün sağ sütunundaki tüm başlıklara bakıyor.
   !important yalnızca burada ve yalnızca mobilde, admin içeriğinin boyutunu
   ekrana sığacak şekilde sınırlamak için kullanılıyor.
   ================================================================= */
@media (max-width: 575px) {
    .section-about .col-lg-6 h1 *,
    .section-about .col-lg-6 h2 *,
    .section-about .col-lg-6 h3 * {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
    .section-about .col-lg-6 h1,
    .section-about .col-lg-6 h2,
    .section-about .col-lg-6 h3 {
        overflow-wrap: anywhere;
    }
}