/* ==========================================================================
   RESPONSIVE-NEW.CSS
   --------------------------------------------------------------------------
   Amaç:
     Mevcut desktop tasarımı birebir koruyarak siteye mobil duyarlılık
     kazandırmak. Bu dosya `responsive.css`'TEN SONRA yüklenir (bkz.
     app/areas/ui/view/Shared/MasterPage.php) ve cascade'de onun üstüne
     yazar. Renk/tipografi tercihi/bileşen düzeni DEĞİŞTİRİLMEZ — sadece
     küçük ekranlarda kırılan/taşan/okunmayan yerler için uyarlama yapılır.

   Yaklaşım:
     Mobile-first değil, DESKTOP-FIRST override yaklaşımı kullanıyoruz.
     Çünkü mevcut `stylesheet.css` desktop ölçülerine göre yazılmış.
     Buraya `max-width` media query'leri ile küçük ekran override'ları
     yazılır. Böylece desktop kuralları korunur, sadece küçük ekranda
     ezilir.

   Breakpoint Stratejisi (Bootstrap 4 uyumlu, desktop → mobil):
     - `@media (max-width: 1199.98px)`  → lg altı (küçük masaüstü/tablet yatay)
     - `@media (max-width: 991.98px)`   → md altı (tablet dikey)
     - `@media (max-width: 767.98px)`   → sm altı (büyük telefon / küçük tablet)
     - `@media (max-width: 575.98px)`   → xs altı (telefon)
     - `@media (max-width: 374.98px)`   → çok küçük telefon (iPhone SE 1. nesil vb.)

   Not:
     - `.navbar-expand-md` zaten 768px altında hamburger menü açıyor,
       dolayısıyla Header'da ana kırılım 767.98px noktasındadır.
     - `stylesheet.css`'teki `@media (min-width: 770px)` dropdown teması
       otomatik olarak mobilde devre dışı kalıyor — onu override etmemize
       gerek yok.

   Bölüm Sırası:
     1. HEADER          (navbar, logo, mobile side-menu, quick-contact)
     2. HERO / SLIDER   (hero içerik, h1/p scale, CTA butonlar, stats)
     (Sonraki adımlarda: problem-solution, packages, features, footer, vs.)
   ========================================================================== */


/* ==========================================================================
   0. BAZ KURALLAR (media query'siz)
   --------------------------------------------------------------------------
   Header.php'de eklenen yeni markup öğelerinin VARSAYILAN görünümü.
   Bu dosya çoğunlukla media query override'larından oluşur, ama yeni
   eklenen markup'ın desktop'taki "gizli" başlangıç durumunu burada
   tanımlamak gerekiyor — aksi halde fa-bolt ikonu desktop'ta da
   icon-menu ile yan yana gözükürdü.
   ========================================================================== */

/* Hızlı İletişim butonu içindeki fa-bolt ikonu default gizli.
   Sadece ≤991.98px'te (tablet kompakt mod) icon-menu'nün yerine gözükür. */
.action-button .ab-bolt {
    display: none;
}

/* SSS linkinin kısa varyantı (.al-text-short = "S.S.S.") default gizli.
   Sadece ≤991.98px'te uzun metin ("Sıkça Sorulanlar") yerine gözükür. */
.action-link .al-text-short {
    display: none;
}

/* --------------------------------------------------------------------------
   STATS TOOLTIP — KART-YAKIN POZİSYONLAMA + TAŞMA KORUMASI
   --------------------------------------------------------------------------
   Tooltip'in UX kuralı: hover edilen objenin YAKININDA durur, sabit
   bir merkezde değil. Ama 3 kart yan yana + dar ekran kombinasyonunda
   default "kart merkezinden açıl" davranışı kenar kartlarda taşıyor.

   Çözüm: Kartın stats içindeki konumuna göre tooltip'in ankor kenarını
   değiştir (CSS-only, :first-child / :last-child seçicileri ile):

     - İlk kart  → tooltip kartın SOL kenarına yaslanır, sağa doğru uzar
     - Son kart  → tooltip kartın SAĞ kenarına yaslanır, sola doğru uzar
     - Orta kart(lar) → default (kartın ORTAsına yaslı)

   Böylece tooltip her zaman hover edilen kartın hizasında açılır
   (görsel bağ korunur), aynı zamanda ekrandan taşmaz.

   stylesheet.css:8287-8313'teki default kurallar (left:50%, translateX(-50%))
   orta kart için olduğu gibi kalır — override gerekmez.
   max-width: calc(100vw - 40px) kuralı da genişlik için güvence sağlar.
   -------------------------------------------------------------------------- */

/* İLK KART — tooltip kartın sol kenarına yaslansın, sağa doğru uzasın.
   Default left:50% + translateX(-50%) yerine left:0 + translateX(0). */
.stat-card-wrap:first-child .stat-card-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0) translateY(8px);
}

.stat-card-wrap:first-child:hover .stat-card-tooltip,
.stat-card-wrap:first-child.is-active .stat-card-tooltip {
    transform: translateX(0) translateY(0);
}

/* SON KART — tooltip kartın sağ kenarına yaslansın, sola doğru uzasın.
   left:auto + right:0 ile sağ kenara lock, translateX sıfır. */
.stat-card-wrap:last-child .stat-card-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
}

.stat-card-wrap:last-child:hover .stat-card-tooltip,
.stat-card-wrap:last-child.is-active .stat-card-tooltip {
    transform: translateX(0) translateY(0);
}


/* ==========================================================================
   1. HEADER
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/UiBase/Header.php
     - stylesheet.css satır 30-347    (header, main-menu, navbar, dropdown)
     - stylesheet.css satır 8354-8617 (top-actions, quick-contact-sidebar)
     - responsive.css satır 410-810   (mevcut mobil header davranışı)

   Not:
     Mevcut responsive.css zaten ≤768px'de header'ı hamburger + slide-in
     side-menu'ye dönüştürüyor. Burada sadece yeni Header.php markup'ında
     ortaya çıkan ama eski responsive.css'te KARŞILIĞI OLMAYAN bileşenler
     için kural yazıyoruz:
       - `.navbar-right.desktop-menu` (Hızlı İletişim butonu + SSS linki bloğu)
       - `.quick-contact-sidebar`      (sağdan açılan hızlı iletişim paneli)
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
/*
   Bu aralıkta (768-1199px) responsive.css menü öğelerine çok az müdahale
   ediyor (sadece 845-992px için bir nav-link padding kuralı var).
   Sonuçta iki kelimeli menü başlıkları ("Web Sitesi Paketleri",
   "Biz Kimiz?", "Sıkça Sorulanlar") kelime bazlı kırılıp header'ı
   bozuyordu. Buraya temel "nowrap" + gap azaltma kurallarını ekliyoruz.
*/
@media (max-width: 1199.98px) {
    /* Menü link'leri tek satırda kalsın — kelime bazlı kırılma olmasın.
       Container'a sığmazsa menü elemanları doğal olarak daralır/üst üste
       binmek yerine nowrap sayesinde sadece yanyana akar. */
    header .main-menu .navbar-light .navbar-nav .nav-link {
        white-space: nowrap;
    }

    /* SSS linki (.action-link içindeki "Sıkça Sorulanlar") da tek satırda
       kalsın - ikon + metin alt alta düşmesin. */
    header .top-actions .action-link {
        white-space: nowrap;
    }

    /* .top-actions li gap: 28px çok geniş - menü ile çakışıyordu */
    header .top-actions {
        gap: 16px;
    }
}

/* --- Küçük desktop / büyük tablet: ≤1099.98px ---------------------------- */
/*
   Burada menü kelimelerinin sığması için hem nav-link padding'i
   hem de action-button padding/font'unu kademeli olarak küçültüyoruz.
   responsive.css'in bu aralıkta tek etkisi: 1100px'de header top bar
   mesajını gizlemek. Menüye dokunulmuyor, buraya ekliyoruz.
*/
@media (max-width: 1099.98px) {
    /* Nav-link iç boşluklarını azalt — 10px 14px → 10px 9px.
       Font default 16px kalıyor, sadece yatay hava azaltılıyor. */
    header .main-menu .navbar-light .navbar-nav .nav-link {
        padding: 10px 9px;
        font-size: 15px;
    }

    /* Dropdown toggle (▼) biraz daha kompakt görünsün */
    header .main-menu .navbar-light .navbar-nav .nav-link.dropdown-toggle::after {
        margin-left: 4px;
    }

    /* "Hızlı İletişim" butonu — padding ve gap kısıltıldı,
       metin küçültüldü ki menüyü taşırmasın. */
    header .top-actions .action-button {
        padding: 8px 10px;
        gap: 8px;
        font-size: 13px;
    }

    /* Hamburger ikonu (icon-menu) biraz küçülsün ki buton da daralsın */
    header .top-actions .action-button .icon-menu {
        width: 22px;
        height: 11px;
    }

    /* SSS linki ikonu ve metni de ufak nüans */
    header .top-actions .action-link {
        font-size: 13px;
    }

    header .top-actions .action-link i {
        font-size: 17px;
    }
}

/* --- Tablet: ≤991.98px --------------------------------------------------- */
/*
   responsive.css burada nav-link padding'ini 10px 8px, font'u 17px yapıyor
   (satır 378-381, aslında 845-992 arası). Biz sadece top-actions tarafını
   daha da sıkıştırıyoruz — nav ile top-actions arasındaki sürtünmeyi azalt.
*/
@media (max-width: 991.98px) {
    header .top-actions {
        gap: 10px;
    }

    /* Hızlı İletişim butonu — KOMPAKT MOD.
       Bu aralıkta header dar alan için mücadele ediyordu: nowrap menü
       öğeleri + geniş buton = x-ekseninde overflow (~902px'den itibaren).
       Çözüm: butonun metnini 2 satıra kır (Hızlı / İletişim) ve hamburger
       ikonu yerine fa-bolt ikonunu göster. Mobil buton ile görsel
       süreklilik bonus. Sonuç: Buton ~%40 daraldı, taşma sonlandı. */
    header .top-actions .action-button {
        padding: 6px 10px;
        font-size: 12px;
        gap: 8px;
    }

    /* Metin 2 satıra kırılsın — "Hızlı" üstte, "İletişim" altta.
       max-width, ilk kelime sığınca zorunlu kırılmayı tetikler. */
    header .top-actions .action-button .ab-text {
        display: inline-block;
        max-width: 55px;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        font-weight: 700;
    }

    /* Custom hamburger ikonu (.icon-menu) gizle — yerine fa-bolt gelecek.
       Mobil butonla görsel dil tutarlı olsun. */
    header .top-actions .action-button .icon-menu {
        display: none;
    }

    /* fa-bolt ikonunu göster (baz kuralda gizlenmişti) */
    header .top-actions .action-button .ab-bolt {
        display: inline-block;
        font-size: 16px;
    }

    /* Nav-link font override — responsive.css 17px'e çıkarıyor (muhtemelen
       eski bir bug/tercih), bu dar alanda 14px daha mantıklı. */
    header .main-menu .navbar-light .navbar-nav .nav-link {
        padding: 10px 7px;
        font-size: 14px;
    }

    /* SSS linki metin swap: uzun → kısa.
       "Sıkça Sorulanlar" ~100px yer tuttuğundan dar alanda kısaltıyoruz.
       "S.S.S." ~35px, toplam ~65px yatay alan kazancı. */
    header .top-actions .action-link .al-text-long {
        display: none;
    }

    header .top-actions .action-link .al-text-short {
        display: inline;
    }
}

/* --- Kritik tablet: ≤810.98px -------------------------------------------- */
/*
   Hamburger eşiği (768px) hemen üstü — son bir sıkıştırma adımı.
   Bu dar aralıkta (768-810) menü öğeleri + top-actions sığmıyor.
   Çözüm: Hızlı İletişim butonundan metni tamamen çıkar, sadece fa-bolt
   kalsın (ikon-only). Mobil muadiliyle bire bir görsel eşleşme sağlanır,
   hamburger'a geçişe kadar tutarlı kalır.
*/
@media (max-width: 810.98px) {
    /* Buton metnini tamamen gizle - "Hızlı İletişim" 2-satır zaten ~55px
       yer tutuyordu; ikon-only moda geçip o alanı boşaltıyoruz. */
    header .top-actions .action-button .ab-text {
        display: none;
    }

    /* İkon tek başına ortalansın — metin olmadığı için gap da anlamsız */
    header .top-actions .action-button {
        padding: 8px 12px;
        gap: 0;
    }
}

/* --- Hamburger devreye girer: ≤767.98px ---------------------------------- */
/*
   navbar-expand-md bu noktada hamburger'ı gösterir.
   Mevcut responsive.css `@media (max-width: 768px)` bloğu (satır 410-1196)
   #navbarNav'ı side-menu yapıyor, top bar'ı gizliyor, header'ı 53px'e
   indiriyor. Buraya sadece yeni markup'tan gelen eksikleri ekliyoruz.
*/
@media (max-width: 767.98px) {
    /*
       BUG-FIX: Masaüstü-only blok mobilde gözüküyordu.
       Header.php'de `.navbar-right.desktop-menu` içinde "Sıkça Sorulanlar"
       ve "Hızlı İletişim" butonları var. Mevcut responsive.css sadece
       `.mobile-menu`'yü desktop'ta gizliyor, ama `.desktop-menu`'yü
       mobilde gizleme kuralı yoktu — bu yüzden bu blok mobilde header'ı
       taşırıyordu. Mobilde hamburger + slide-in menü zaten var, bu blok
       gereksiz.
    */
    header .main-menu .navbar-right.desktop-menu {
        display: none !important;
    }

    /*
       Mobil Hızlı İletişim tetiği (.right-link-compact)
       ---------------------------------------------------
       Header.php'de SSS linkinin hemen ardında duran ikon-butondur.
       Desktop'taki "Hızlı İletişim" butonunun mobil karşılığı.

       Flex sıralama mantığı:
         - .navbar-toggler  → order 0 (sol)
         - .navbar-brand    → order 1 (logo)
         - .right-link SSS  → order 2 + margin-left:auto (sağa iter)
         - .right-link-compact → order 3 (SSS'e yapışık durur, kendine margin yok)

       SSS'in `margin-left:auto`'su serbest alanı yiyip SSS'i sağa
       yapıştırdığı için, compact buton ekstra margin gerektirmeden
       SSS'in hemen sağında konumlanır.

       Görsel dil: Mevcut .right-link ile tutarlı — 53px yükseklik,
       sol border ayraç (#363636), hover'da turuncu arka plan.
       Genişlik 56px (hamburger toggler ile aynı).
    */
    header .main-menu .navbar-light .right-link-compact {
        order: 3;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        width: 56px;
        height: 53px;
        line-height: 53px;
        border-style: solid;
        border-width: 0 0 0 1px;
        border-color: #363636;
        text-align: center;
        /* Normal hal: turuncu arkaplan (CTA olarak belirginleşsin).
           Koyu header ile kontrast sağlar, kullanıcı "bana tıkla" diye
           algılar. Eskiden hover rengiydi, artık varsayılan. */
        background-color: #fd8828;
        color: #ffffff;
        font-size: 18px;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Hover/Focus: temanın mor rengine geçiş.
       #602f9d stylesheet.css'te gradient'lerde (services, problem-solution,
       footer) yaygın kullanılıyor — marka uyumu için bu tonu seçtik. */
    header .main-menu .navbar-light .right-link-compact:hover,
    header .main-menu .navbar-light .right-link-compact:focus {
        background-color: #602f9d;
        color: #ffffff;
    }

    /* Icon kendi line-height'ını resetlesin — parent 53px'lik flex
       merkezleme yapıyor, icon'un ekstra line-height'ı dikey
       ortalamayı bozmasın */
    header .main-menu .navbar-light .right-link-compact i {
        line-height: 1;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/*
   Küçük telefonlarda sağdan açılan Hızlı İletişim paneli (.quick-contact-sidebar)
   için ince ayarlar. Panel stylesheet.css:8488'de `width: 380px; max-width: 92vw`
   olarak tanımlı — genişlik tamam, iç boşluklar ve tipografi küçültülmeli.

   Ek olarak: header'da SSS linki + Hızlı İletişim butonu toplam genişliği
   ~353px altında toggler+logo ile çakışıp Hızlı İletişim butonunu yeni
   satıra atıyordu. SSS ve buton genişliklerini kademeli daraltıyoruz.
*/
@media (max-width: 575.98px) {

    /* SSS linki (.right-link.mobile-menu) desktop'ta 90px.
       "S.S.S." metni 72px'e rahat sığar — 18px yer kazancı. */
    header .main-menu .navbar-light .right-link.mobile-menu {
        width: 72px;
        font-size: 13px;
    }

    /* Hızlı İletişim ikon-butonu (.right-link-compact) 56 → 48 */
    header .main-menu .navbar-light .right-link-compact {
        width: 48px;
        font-size: 17px;
    }

    /* İç padding'i azalt — 380px genişlikte 28px/24px fazla sıkışık kalıyor */
    .quick-contact-sidebar {
        padding: 22px 18px 20px;
    }

    /* Başlık ölçeğini küçük ekrana indir (30px → 24px) */
    .quick-contact-head h3 {
        font-size: 24px;
    }

    .quick-contact-head p {
        font-size: 15px;
    }

    /* Liste kartları — padding ve icon boyutu daralt */
    .quick-contact-item {
        padding: 12px;
        gap: 12px;
        border-radius: 14px;
    }

    .quick-contact-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 19px;
    }

    .quick-contact-item strong {
        font-size: 15px;
    }

    .quick-contact-item span {
        font-size: 13px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
/*
   iPhone SE (1.nesil) / Galaxy Fold (kapalı) gibi 375px altı cihazlarda
   quick-contact-sidebar'ı tam ekran yap — `max-width: 92vw` geride küçük
   bir boşluk bırakıyordu, 360px altında bu boşluk değerli pikseli yiyor.
*/
@media (max-width: 374.98px) {
    .quick-contact-sidebar {
        max-width: 100vw;
        width: 100vw;
        padding: 18px 14px;
    }

    .quick-contact-close {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    /* Header son kademe: 353-320 aralığında bile tek satır kalsın.
       SSS 72 → 60, buton 48 → 42, logo margin-left 14 → 8. */
    header .main-menu .navbar-light .right-link.mobile-menu {
        width: 60px;
        font-size: 12px;
    }

    header .main-menu .navbar-light .right-link-compact {
        width: 42px;
        font-size: 16px;
    }

    /* Logo ile toggler arasındaki boşluğu kıs */
    header .main-menu .navbar-light .navbar-brand {
        margin-left: 8px;
    }
}


/* ==========================================================================
   2. HERO / SLIDER
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/Slider.php
     - stylesheet.css satır 369-510 (hero, hero-bg, hero-content, butonlar)
     - stylesheet.css satır 8196-8347 (stats, stat-card-inner, tooltip)

   Strateji:
     - RENKLER/GRADIENT'LER DEĞİŞMEZ (gradient-top/bottom, mask-image'ler,
       border radial, glow, shadow korunur).
     - Sadece: tipografi scale, spacing azaltma, buton stack, stats
       3-kart sıkıştırma (flex:1 ile eşit pay).
     - .stats her zaman tek satır, 3 kart yan yana (nowrap strategy).
   ========================================================================== */

/* --- Büyük tablet / küçük desktop: ≤1199.98px ---------------------------- */
/* Tipografi ilk kademe küçültme, buton yan padding'i hafif düş. */
@media (max-width: 1199.98px) {
    /* h1 49.5 → 42 - desktop büyüklüğünden ilk adım */
    .hero .hero-content .post-content h1 {
        font-size: 42px;
    }

    /* p 28.3 → 24 - alt başlık da orantılı */
    .hero .hero-content .post-content p {
        font-size: 24px;
        margin-bottom: 40px;
    }

    /* Buton iç yatay padding: 70 → 48 (görsel kompakt) */
    .hero-btn-1,
    .hero-btn-2 {
        padding: 14px 48px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   Hero yüksekliği azalt, tipografi biraz daha düş, stats sıkışmaya başlar
   (3 kart korunur, flex:1 1 0 ile eşit pay alır).
*/
@media (max-width: 991.98px) {
    /* Hero kendi 100vh min-height'ı ile ekranı kaplasın — video bg +
       gradient kompozisyonu bu section'ın görsel imzası, küçültmüyoruz.
       (Eski 80vh override'ı kaldırıldı.)

       Hero-content için 800px sabit desktop değerini viewport-relative
       70vh'a çeviriyoruz. Kısa mobile portrait ekranlarda (örn. iPhone SE
       568px yükseklik) sabit 580px+ değerler hero'yu taşırıyordu; 70vh
       cihaz yüksekliğine oransal davranarak hem içerik barınır hem hero
       her zaman viewport'a uyumlu kalır. */
    .hero .hero-content {
        min-height: 70vh;
    }

    /* Tipografi scale */
    .hero .hero-content .post-content h1 {
        font-size: 38px;
        margin-bottom: 18px;
    }

    .hero .hero-content .post-content p {
        font-size: 22px;
        margin-bottom: 36px;
    }

    /* Buton padding biraz daha sıkı */
    .hero-btn-1,
    .hero-btn-2 {
        padding: 13px 40px;
    }

    /* --- Stats sıkıştırma başlar ---
       Mevcut: 4 kart × 210px + 3×28px gap = ~924px (tablet'te sığar ama
       taşmaya yakın). flex:1 1 0 ile kartları container'a böl. */
    .stats {
        gap: 20px;
        margin-top: 80px;   /* hero kısaldığı için üst marjı da azalt */
        flex-wrap: nowrap;  /* 3 kart tek satırda kalsın */
    }

    .stat-card-wrap {
        flex: 1 1 0;
        min-width: 0;       /* flex child default min-width:auto, override */
    }

    /* stat-card-inner sabit 210px'i kaldır, wrap genişliğine uy */
    .stat-card-inner {
        width: 100%;
        padding: 22px 16px;
    }

    .stat-card-inner img {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-label {
        font-size: 14px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
/*
   Asıl kırılma noktası — header hamburger'a geçer, hero kompakt hale gelir,
   butonlar alt alta stacklenir, stats agresif sıkıştırılır (hâlâ 3 kart).
*/
@media (max-width: 767.98px) {
    /* NOT: .hero ve .hero-content için padding/margin/min-height override'ları
       bilinçli olarak kaldırıldı. Hero desktop'taki gibi ekranı kaplasın —
       video bg + gradient bu section'ın imzası. Yükseklik kuralları ≤991
       bloğundaki 70vh ile viewport-relative ayarlandı, mobilde de sağlıklı
       çalışıyor.

       Sadece `::after` yüksekliği (stats overlap alanı) mobilde 120 → 40,
       çünkü stats margin-top da mobilde 40'a iniyor; büyük overlap anlamsız. */
    .hero::after {
        height: 40px;
    }

    /* Tipografi - mobil ölçek */
    .hero .hero-content .post-content h1 {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .hero .hero-content .post-content p {
        font-size: 18px;
        margin-bottom: 28px;
        line-height: 1.3;
    }

    /* --- Butonlar alt alta ---
       Desktop'ta yan yana + margin-right:30px. Mobilde stack yapıp her ikisi
       de tam genişlik (max 320px - çok geniş görünmesin). */
    .hero-btn-1,
    .hero-btn-2 {
        display: block;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        padding: 12px 24px;
        text-align: center;
    }

    /* btn-1'in sağ margin'ini sıfırla, yerine alt margin ver */
    .hero-btn-1 {
        margin-right: auto;
        margin-bottom: 12px;
    }

    /* --- Stats mobilde 3 kart çok kompakt ---
       Kartlar min-width:0 ile container'a bölünür, iç boşlukları azalır. */
    .stats {
        gap: 14px;
        margin-top: 40px;
    }

    .stat-card-inner {
        padding: 16px 10px;
        border-radius: 14px;
    }

    .stat-card-inner img {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .stat-value {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .stat-label {
        font-size: 13px;
        line-height: 1.2;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/* Son kademe — h1 daha da küçük, stat kartları ultra kompakt. */
@media (max-width: 575.98px) {
    /* Tipografi */
    .hero .hero-content .post-content h1 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .hero .hero-content .post-content p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    /* Butonlar daha kompakt */
    .hero-btn-1,
    .hero-btn-2 {
        padding: 11px 20px;
    }

    /* Stats ultra kompakt - telefonda 3 kartı hâlâ yan yana tutmak için */
    .stats {
        gap: 8px;
        margin-top: 30px;
    }

    .stat-card-inner {
        padding: 12px 8px;
        border-radius: 12px;
    }

    .stat-card-inner img {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }

    .stat-value {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .stat-label {
        font-size: 11px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
/* iPhone SE (1.nesil), Galaxy Fold kapalı vb. — son çare kademesi. */
@media (max-width: 374.98px) {
    .hero .hero-content .post-content h1 {
        font-size: 22px;
    }

    .hero .hero-content .post-content p {
        font-size: 15px;
    }

    .hero-btn-1,
    .hero-btn-2 {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Stats son kademe - 3 kartı 320px altı ekrana sığdır */
    .stats {
        gap: 6px;
    }

    .stat-card-inner {
        padding: 10px 6px;
    }

    .stat-card-inner img {
        width: 32px;
        height: 32px;
        margin-bottom: 6px;
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 10px;
    }
}


/* ==========================================================================
   3. PROBLEM & SOLUTION
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/ProblemAndSolution.php
     - stylesheet.css satır 512-622 (problem-solution, ps-card, ps-label, ps-text)

   Strateji:
     Okunabilirlik öncelikli — iki kart (PROBLEM + ÇÖZÜM) mümkün olduğu
     kadar yan yana kalmalı. stylesheet.css:591'deki ≤1100 wrap kuralı
     1110px civarında kartları alt alta atıyor; bu çok erken.

     Bu yüzden ≤1199.98'den itibaren:
       - Container'ı `flex-wrap: nowrap` yap (wrap kuralını override et)
       - Cards'ı `flex: 1 1 0; min-width: 0` ile eşit pay alsın şekilde
         container'a böldür
       - Font/padding'leri kademeli azalt

     Ancak ≤575.98px'te okunabilirlik bozuluyor (her kart ~270px'e düşüyor,
     text kırılma kaçınılmaz) → bu noktada wrap geri geliyor.

   Renkler/hover/gradient/radius/border — DEĞİŞMEZ.
   `margin-top: -120px` — kullanıcı talebi ile şimdilik dokunulmuyor.
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
/*
   stylesheet.css:591'deki `@media (max-width: 1100px) .ps-card { width:100% }`
   kuralını bu aralıkta override ediyoruz — cards side-by-side kalsın diye.
*/
@media (max-width: 1199.98px) {
    /* Wrap'ı kapat, cards tek satırda kalsın */
    .problem-solution-container {
        flex-wrap: nowrap;
        gap: 36px;
    }

    /* stylesheet.css:591 override — `width:100%, max-width:620px` yerine
       flex:1 ile container'a bölünen kartlar. */
    .ps-card {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 40px 32px;
    }

    /* Label 32 → 28 */
    .ps-label {
        font-size: 28px;
        margin-bottom: 22px;
    }

    /* Ana metin ve liste maddeleri — 22/27 → 20 (tek ölçek) */
    .ps-card li,
    .ps-text,
    .ps-text p {
        font-size: 20px;
        line-height: 1.45;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/* Daha sıkı kademe — cards hâlâ side-by-side. */
@media (max-width: 991.98px) {
    .services  {
        padding-bottom: 415px;
    }
    .problem-solution {
        padding-left: 20px;
        padding-right: 20px;
    }
    .problem-solution-container {
        gap: 28px;
    }

    .ps-card {
        padding: 30px 24px;
    }

    .ps-label {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .ps-card li,
    .ps-text,
    .ps-text p {
        font-size: 18px;
        line-height: 1.4;
    }
}

/* --- Mobil büyük: ≤767.98px ---------------------------------------------- */
/*
   Cards HÂLÂ side-by-side. stylesheet.css:599-622'de ≤768 kuralları var
   (padding 28/24, label 22, li/text 18). Onları override ediyoruz çünkü
   bizim yaklaşımda kartlar daha dar olduğu için content daha kompakt
   olmalı — aksi halde 2 kart sığmıyor.
*/
@media (max-width: 767.98px) {
    .packages-title {
        font-size: 26px;
    }
    .problem-solution-container {
        gap: 20px;
    }

    /* stylesheet.css:603 override — padding 28/24 → 22/16,
       ayrıca flex:1 kuralını koruyoruz (≤1199'dan miras). */
    .ps-card {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 22px 16px;
    }

    /* stylesheet.css:609 override — label 22 → 20 */
    .ps-label {
        font-size: 20px;
        margin-bottom: 12px;
    }

    /* stylesheet.css:614 override — text/li 18 → 16 */
    .ps-card li,
    .ps-text,
    .ps-text p {
        font-size: 16px;
        line-height: 1.35;
    }

    /* Liste bullet indent'i biraz kıs - dar alanda padding değerli */
    .ps-card ul {
        padding-left: 16px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/*
   BURADA WRAP GERİ GELİYOR. Her kart ~270px'e düştüğünde text okunamaz
   hale geliyor; kartları alt alta koymak daha mantıklı.
*/
@media (max-width: 575.98px) {
    /* Container wrap geri aç, gap küçült */
    .problem-solution-container {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* flex:1 iptali — kartlar artık kendi genişliklerini alır (100%) */
    .ps-card {
        flex: 0 1 100%;
        width: 100%;
        max-width: 520px;
        padding: 22px 18px;
    }

    .ps-label {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .ps-card li,
    .ps-text,
    .ps-text p {
        font-size: 16px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
/* Son kademe — minimal ölçekler. */
@media (max-width: 374.98px) {
    .ps-card {
        padding: 18px 14px;
    }

    .ps-label {
        font-size: 17px;
    }

    .ps-card li,
    .ps-text,
    .ps-text p {
        font-size: 15px;
    }
}


/* ==========================================================================
   4. OFFERINGS — CTA BANNER
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/Offerings.php
     - stylesheet.css satır 8092-8192 (cta-banner, cta-title, cta-btn,
       cta-btn-call, mevcut ≤768 kuralı)

   Not:
     .services section'ı (services-title, services-list, .service kartları)
     responsive.css satır 120-302 arasında KAPSAMLI şekilde ele alınmış
     (≤1100 flex column, ≤992 kart genişliği, ≤768 daha sıkı, ≤650 2-sütun
     wrap). Bu section'a dokunmuyoruz — yalnızca CTA banner'a odaklanıyoruz.

     stylesheet.css:8183-8192'deki mevcut ≤768 kuralı cta-title'ı 28px'e,
     cta-btn min-width'ini 260px'e indiriyor. Bizim kurallarımız bunları
     kademeye oturtuyor + ≤575 altında buton full-width'e geçiyor (çünkü
     min-width:260 dar ekranlarda hâlâ taşıyor).

   Dokunulmayanlar: renkler, cta-btn-call::before gradient border
   (mask-composite), hover transform/shadow, services bg + ::before/::after.
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
@media (max-width: 1199.98px) {
    /* Bottom padding 130 → 90 - mobile'a doğru kademeli azaltma başlar */
    .cta-banner {
        padding-bottom: 90px;
    }

    /* Başlık 38 → 34 */
    .cta-title {
        font-size: 34px;
        margin-bottom: 36px;
    }

    /* Butonun min-width'i 305 → 270 (dar container'a sığsın) */
    .cta-btn {
        min-width: 270px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
@media (max-width: 991.98px) {
    .cta-banner {
        padding-bottom: 60px;
    }

    .cta-title {
        font-size: 30px;
        margin-bottom: 30px;
    }

    /* Alt başlık (span) ile ana başlık arası boşluk da daralsın */
    .cta-title span {
        margin-top: 8px;
    }

    /* Buton grubu gap daraltma */
    .cta-actions {
        gap: 20px;
    }

    /* Buton yüksekliği 56 → 50, font 21 → 19, min-width 240 */
    .cta-btn {
        min-width: 240px;
        height: 50px;
        font-size: 19px;
    }
}

/* --- Mobil büyük: ≤767.98px ---------------------------------------------- */
/*
   stylesheet.css:8183-8192'de zaten:
     .cta-title { font-size: 28px }
     .cta-btn   { min-width: 260px; font-size: 18px }
   var. Biz bu kademeye banner padding ve actions gap eklemesi yapıyoruz.
*/
@media (max-width: 767.98px) {
    /* Banner'ın yan ve alt padding'i — desktop 0 20px 130px yerine
       mobilde 0 16px 40px (yan daralt, alt daha da azalt). */
    .cta-banner {
        padding: 0 16px 40px;
    }

    /* Başlık altı margin de biraz küçülsün */
    .cta-title {
        margin-bottom: 24px;
    }

    .cta-actions {
        gap: 14px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/*
   Kritik nokta: stylesheet.css mobilde cta-btn'u min-width:260 yapıyor,
   ama 320px telefon viewport - 32px yan padding = 288px inner → 260px
   buton sığar ama nefes alamaz. Bu aralıkta butonları tam genişliğe geçir,
   alt alta güzel stacklensin.
*/
@media (max-width: 575.98px) {
    .cta-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .cta-actions {
        gap: 12px;
        /* Bir de her butonun kendi hizasında ortalanması için padding
           inherit edilen flex-wrap:wrap davranışı korunur, sadece her
           buton tam genişlik istiyor (alttaki cta-btn rule'u ile). */
    }

    /* BUTON FULL-WIDTH — stylesheet.css'teki min-width:260 override'ı.
       Her buton alt alta, container genişliğine kadar açılır (max 320). */
    .cta-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        height: 48px;
        font-size: 16px;
        padding: 0 38px 0 20px;
    }

    /* Icon biraz küçülsün — buton daraldığı için orantılı */
    .cta-btn img {
        width: 26px;
        height: 26px;
        right: 16px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .cta-banner {
        padding: 0 12px 32px;
    }

    .cta-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .cta-btn {
        height: 46px;
        font-size: 15px;
        padding: 0 34px 0 16px;
        gap: 12px;
    }

    .cta-btn img {
        width: 22px;
        height: 22px;
        right: 12px;
    }
}


/* ==========================================================================
   4b. SERVICES LIST — 2-COL OVERRIDE
   --------------------------------------------------------------------------
   İlgili kurallar:
     - responsive.css satır 1287-1293 (≤650px)

   Sorun:
     responsive.css ≤650'de `.service` genişliğini `calc(100% - 10px)`
     yapıp kartları alt alta stack'liyordu. Bu geçiş çok erken — 650px
     viewport'ta 2 kart rahatlıkla yan yana sığıyor.

   Çözüm:
     - ≤650px   → 2-col (width: calc(50% - 10px))
     - ≤374.98  → 1-col (stack, küçük telefonlarda okunabilirlik için)

   responsive.css'in diğer kuralları (flex-wrap:wrap, margin:0 5px 10px 5px,
   padding:10px, height:160, img:50px) aynen kalır; sadece genişlik override.
   ========================================================================== */

/* 2-col — 650px civarında 2×2 grid (4 servis varsayımıyla) */
@media (max-width: 650px) {
    .services .container .services-list .service {
        width: calc(50% - 10px);
    }
}

/* 1-col stack — 374 altı telefonlarda 2-col çok dar kalıyor */
@media (max-width: 374.98px) {
    .services .container .services-list .service {
        width: calc(100% - 10px);
    }
}


/* ==========================================================================
   5. PACKAGES — HOME-PACKAGES (paket kartları grid'i)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/Packages.php
     - stylesheet.css satır 648-710  (home-packages section + üst geçiş mask)
     - stylesheet.css satır 7779-8070 (packages-grid, package-card variants)
     - stylesheet.css satır 8910-9200 (package-card-body, head, features,
       actions, buttons, mevcut ≤1200 / ≤992 kuralları)

   Kritik tespit (specificity bug):
     stylesheet.css:7809'daki
         `.home-packages.new-packages .packages-grid .package-card { width: calc((100%/3)-10px) }`
     specificity 0,0,4,0. Mevcut ≤992 stack kuralı `.package-card { width: 100% }`
     specificity 0,0,1,0 — o yüzden KAYBEDİYOR, kartlar mobilde bile 3-col.
     Bu override'larda aynı specificity'yi (0,0,4,0) kullanıp load-order ile
     kazanıyoruz.

   Geçiş stratejisi:
     3-col → (doğrudan) → 1-col. Ara 2-col YOK (3 kartta 2-col asimetrik
     olur, kullanıcı tercihi okunabilir 3 yada 1). Stack noktası ≤991.98.

   Dokunulmayanlar:
     - Tüm renkler (.color-1 #1fb118, .color-2 #3f80f5, .color-3 #b740e5,
       .featured #4b7ff0, btn-black #25d366, discount #fa7217)
     - .home-packages::before (240px üst geçiş mask-image)
     - .home-packages .new-packages-container { margin-top: -350px }
       (KULLANICI TALEBİ — arka plan geçişi için gerekli)
     - Hover davranışları
     - .package-installment-badge background-image (icon-installments.png)
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
/*
   3-col kalır, sadece content küçülsün — kartlar dar alanda sığsın ama
   okunabilirlik korunsun.
*/
@media (max-width: 1199.98px) {
    .home-packages .package-card-body {
        padding: 26px 16px 16px;
    }

    .package-name {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .package-subtitle {
        font-size: 14px;
    }

    .package-desc {
        font-size: 14px;
        margin: 0 0 14px;
    }

    .discount-badge {
        padding: 8px 14px;
        font-size: 13px;
    }

    .home-packages .old-price {
        font-size: 16px;
    }

    .package-price-wrapper {
        height: 50px;
    }

    .package-installment-text {
        font-size: 13px;
    }

    .package-btn-black,
    .package-btn-outline {
        height: 48px;
        font-size: 15px;
    }

    .package-features-top li,
    .package-features-bottom li {
        font-size: 14px;
        margin-bottom: 12px;
        padding-left: 26px;
    }

    .package-features-top li i,
    .package-features-bottom li i {
        font-size: 18px;
    }

    /* Taksit badge kompaktla - icon bg image korunur, sadece ölçek */
    .package-installment-badge .installment-text {
        width: 52px;
        height: 52px;
        font-size: 12px;
    }

    .package-installment-badge .installment-text .installment-number {
        font-size: 26px;
    }

    .home-packages .package-installment-badge .installment-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .featured-label {
        font-size: 19px;
        height: 52px;
    }
}

/* --- Taksit ikon gizle: ≤1045.98px --------------------------------------- */
/*
   1045px altında package-installment-text içindeki payment-icon img
   (mastercard/visa/troy) text'in yerini dar alanda yiyip "Peşin fiyatına
   N Taksit" yazısının satır kırılmasına yol açıyordu. Bilgi metni
   (taksit miktarı + fiyat) kritik; ikon görsel süs — bu aralıkta
   gizleyip text'e nefes aldırıyoruz.
*/
@media (max-width: 1045.98px) {
    .package-installment-text > img {
        display: none;
    }
}

/* --- 2-COL: ≤991.98px ----------------------------------------------------- */
/*
   3-col → 2-col geçiş noktası. 992px'de 3 kart sığmaya zorlanınca
   daralıp okunmaz hale geliyordu; 2-col'a geçince kartlar ~470-300px
   arası kalır (comfortable).
   Specificity 0,0,4,0 ile stylesheet.css:7809 override — aynı seçici,
   daha sonra yüklenir → kazanır.

   Layout:
     - 2 kart × (50% - 7px) + 14px gap = 100%
     - 3. kart flex-wrap:wrap ile alt satıra iner (2+1 düzeni)
     - Featured pop-up (margin-top:-58) 2-col'da asimetrik durduğu için
       iptal edilir.
*/
@media (max-width: 991.98px) {
    /* Specificity override (0,0,4,0) — 2 sütun grid */
    .home-packages.new-packages .packages-grid .package-card {
        width: calc(50% - 7px);
    }

    /* Featured pop-up'ı iptal — 2-col/1-col'da dengesiz */
    .package-card.featured {
        margin-top: 0;
    }

    /* Colored border artık hover OLMADAN da aktif — touch cihazlarda
       hover tetiklenmiyor, stacked/wrapped layout'ta kartların paket
       tier'ı görsel olarak ayrışsın. stylesheet.css:7805'teki default
       `border: 3px solid #fff` kuralını override ediyoruz.
       (Featured color-2 kartın border'ı stylesheet.css:8001'de zaten
       unconditional mavi, conflict yok.) */
    .package-card.color-1 {
        border: 3px solid #1fb118;
    }

    .package-card.color-2 {
        border: 3px solid #3f80f5;
    }

    .package-card.color-3 {
        border: 3px solid #b740e5;
    }

    /* 2-col için moderate content scale (card ~300-470px) */
    .home-packages .package-card-body {
        padding: 26px 18px 18px;
    }

    .package-name {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .package-subtitle {
        font-size: 14px;
    }

    .package-desc {
        font-size: 14px;
        margin: 0 0 14px;
    }

    .discount-badge {
        padding: 8px 14px;
        font-size: 13px;
    }

    .home-packages .old-price {
        font-size: 16px;
    }

    .package-price-wrapper {
        height: 52px;
    }

    .package-installment-text {
        font-size: 13px;
    }

    .package-btn-black,
    .package-btn-outline {
        height: 50px;
        font-size: 16px;
    }

    .package-features-top li,
    .package-features-bottom li {
        font-size: 14px;
        margin-bottom: 12px;
        padding-left: 26px;
    }

    .package-features-top li i,
    .package-features-bottom li i {
        font-size: 18px;
    }

    .package-installment-badge .installment-text {
        width: 50px;
        height: 50px;
        font-size: 12px;
    }

    .package-installment-badge .installment-text .installment-number {
        font-size: 24px;
    }

    .home-packages .package-installment-badge .installment-title {
        font-size: 12px;
    }

    .featured-label {
        font-size: 18px;
        height: 50px;
    }
}

/* --- STACK NOKTASI: ≤650.98px -------------------------------------------- */
/*
   3-col → 1-col direkt geçişi. Cards artık tek sütunda, merkezli, max 440.
   Specificity 0,0,4,0 ile stylesheet.css:7809 override — aynı seçici,
   daha sonra yüklenir → kazanır. Content ≤991'deki aşırı küçültmeden
   rahatlamış değere döner (card ~440px, nefes var).
*/
@media (max-width: 650.98px) {
    .packages-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .package-card.color-2.featured {
        margin-top: 0;
    }
    /* Specificity override (0,0,4,0) — aynı seçici, load-order ile kazanır */
    .home-packages.new-packages .packages-grid .package-card {
        width: 100%;
        max-width: 440px;
    }

    /* Grid'i column'a al, merkezli hizala */
    .home-packages .packages-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    /* Featured pop-up iptal — stack'te merkezli, -58px dengesiz durur */
    .package-card.featured {
        margin-top: 0;
    }

    /* Content rahatlar — artık card 440px geniş */
    .home-packages .package-card-body {
        padding: 28px 20px 20px;
    }

    .package-icon img {
        width: 48px;
        height: 48px;
    }

    .package-head {
        gap: 14px;
        margin-bottom: 13px;
    }

    .package-name {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .package-subtitle {
        font-size: 15px;
    }

    .package-desc {
        font-size: 15px;
        margin: 0 0 18px;
        line-height: 1.467;
    }

    .discount-badge {
        padding: 10px 18px;
        font-size: 14px;
    }

    .home-packages .old-price {
        font-size: 18px;
    }

    .package-price-wrapper {
        height: 58px;
    }

    .package-installment-text {
        font-size: 14px;
    }

    .package-btn-black,
    .package-btn-outline {
        height: 52px;
        font-size: 17px;
        padding: 15px 10px;
        gap: 6px;
    }

    .package-features-top li,
    .package-features-bottom li {
        font-size: 15px;
        margin-bottom: 14px;
        padding-left: 30px;
    }

    .package-features-top li i,
    .package-features-bottom li i {
        font-size: 20px;
    }

    .package-installment-badge {
        top: 11px;
        right: 11px;
    }

    .package-installment-badge .installment-text {
        width: 58px;
        height: 58px;
        font-size: 13px;
    }

    .package-installment-badge .installment-text .installment-number {
        font-size: 30px;
    }

    .home-packages .package-installment-badge .installment-title {
        font-size: 14px;
    }

    .featured-label {
        font-size: 19px;
        height: 54px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/* Bu aralıkta artık stack aktif (≤650'den miras). Telefon genişliğine
   tam açılsın diye max-width'i kaldırıyoruz. */
@media (max-width: 575.98px) {
    /* Telefonda tam genişlik — önceki max-width:440 sınırı kalksın */
    .home-packages.new-packages .packages-grid .package-card {
        max-width: 100%;
    }

    .home-packages .package-card-body {
        padding: 22px 16px 16px;
    }

    .package-name {
        font-size: 22px;
    }

    .package-subtitle {
        font-size: 14px;
    }

    .package-desc {
        font-size: 14px;
    }

    .discount-badge {
        padding: 8px 14px;
        font-size: 13px;
    }

    .home-packages .old-price {
        font-size: 16px;
    }

    .package-btn-black,
    .package-btn-outline {
        height: 48px;
        font-size: 15px;
    }

    .package-features-top li,
    .package-features-bottom li {
        font-size: 14px;
        margin-bottom: 12px;
        padding-left: 26px;
    }

    .package-features-top li i,
    .package-features-bottom li i {
        font-size: 18px;
    }

    .package-installment-badge {
        top: 8px;
        right: 8px;
    }

    .package-installment-badge .installment-text {
        width: 50px;
        height: 50px;
        font-size: 12px;
    }

    .package-installment-badge .installment-text .installment-number {
        font-size: 24px;
    }

    .home-packages .package-installment-badge .installment-title {
        font-size: 12px;
    }

    .featured-label {
        font-size: 17px;
        height: 48px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .home-packages .package-card-body {
        padding: 18px 14px 14px;
    }

    .package-name {
        font-size: 20px;
    }

    .package-btn-black,
    .package-btn-outline {
        height: 46px;
        font-size: 14px;
    }

    .package-features-top li,
    .package-features-bottom li {
        font-size: 13px;
    }

    .package-installment-badge .installment-text {
        width: 44px;
        height: 44px;
    }

    .package-installment-badge .installment-text .installment-number {
        font-size: 22px;
    }
}


/* ==========================================================================
   5b. PACKAGES-BOTTOM — "Paketleri Detaylı İncele" butonu
   --------------------------------------------------------------------------
   İlgili kurallar:
     - stylesheet.css:8033-8072 (.packages-bottom, .orange-btn-gradient,
       .packages-btn, ::after hover layer)
     - stylesheet.css:8074-8090 (mevcut ≤992 kuralı: min-width 280, font 17)

   Not:
     `.packages-bottom .orange-btn-gradient { font-size: 22 }` (0,0,2,0)
     `.packages-btn { min-width: 360; min-height: 58 }` (0,0,1,0)
     Existing ≤992 `.packages-btn { min-width: 280; font-size: 17 }` —
     font-size 17 kuralı `.packages-bottom .orange-btn-gradient`'in 22'si
     tarafından override'landığı için etkisiz. Burada iki seçiciyi de
     kademelenmiş ölçeklerle biz override ediyoruz.

   Dokunulmayanlar: gradient bg (188deg #ffa200 → #f5390d), hover ::after
   transition, span z-index, margin-top: 53 (desktop).
   ========================================================================== */

@media (max-width: 1199.98px) {
    .packages-bottom .orange-btn-gradient {
        font-size: 20px;
    }
    .packages-btn {
        min-width: 320px;
        min-height: 54px;
    }
}

@media (max-width: 991.98px) {
    .packages-bottom {
        margin-top: 40px;
    }
    .packages-bottom .orange-btn-gradient {
        font-size: 18px;
    }
    .packages-btn {
        min-width: 280px;
        min-height: 52px;
    }
}

@media (max-width: 767.98px) {
    .packages-bottom {
        margin-top: 32px;
    }
    .packages-bottom .orange-btn-gradient {
        font-size: 16px;
    }
    .packages-btn {
        min-width: 260px;
        min-height: 48px;
    }
}

/* ≤575: Buton tam genişlik (phone pattern) — min-width:0 ile kısıtı
   kaldırıp width:100% + max-width:320 ile dengeliyoruz. */
@media (max-width: 575.98px) {
    .packages-bottom {
        margin-top: 28px;
        padding: 0 16px;
    }
    .packages-bottom .orange-btn-gradient {
        font-size: 15px;
        width: 100%;
        max-width: 320px;
    }
    .packages-btn {
        min-width: 0;
        min-height: 46px;
    }
}

@media (max-width: 374.98px) {
    .packages-bottom .orange-btn-gradient {
        font-size: 14px;
    }
    .packages-btn {
        min-height: 44px;
    }
}


/* ==========================================================================
   6. FEATURES
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/Features.php
     - stylesheet.css satır 1077-1126 (features, feature, feature-img,
       feature-content, h3, p)
     - responsive.css satır 107-118   (≤1100)
     - responsive.css satır 210-225   (≤992 — flex-direction: column)
     - responsive.css satır 1099-1113 (≤768 — feature-img max-width:25%)
     - responsive.css satır 1512-1523 (400-550 — tekrar flex-direction:row)
     - responsive.css satır 1527-1531 (≤400)

   Mevcut sorun:
     responsive.css'in breakpoint mantığı karışık (992'de column, 550'de
     tekrar row, 400'de başka) ve ≤768'de feature-img max-width:25% ile
     Lottie animasyonu ~96px'e düşüp görünmez hale geliyor.

   Çözüm — tutarlı kademe:
     - ≥1200          → 2-col (feature 50%), internal row  (default)
     - ≤1199.98       → 2-col, internal row, content scale
     - ≤991.98        → 1-col (feature 100%), internal ROW (img left + content right)
     - ≤767.98        → 1-col, internal COLUMN (img üstte merkezli, content altta)
     - ≤575.98        → daha kompakt
     - ≤374.98        → minimal

   Lottie notu:
     .feature-img içindeki #lottie-animation-X div'i parent'ın boyutunu
     alır. Her breakpoint'te feature-img'e explicit width veriyoruz; Lottie
     SVG'nin doğru boyutlanmasını sağlıyor. responsive.css'in `max-width:35%`
     ve `max-width:25%` kurallarını `max-width: none` ile override ediyoruz
     çünkü bu oran kısıtları flex-basis'i bozuyor.

   Dokunulmayanlar:
     - Renkler (#1a1a1a h3, #0f0f0f p)
     - Lottie animasyonu (loadAnimation/lottie-web çağrıları)
     - Container .container-xl padding'leri
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
/*
   2-col kalır, feature-img 350 → 300, content padding-right 127 → 40,
   h3/p hafif küçültme.
   responsive.css:112'deki `max-width:35%` override için max-width:none.
*/
@media (max-width: 1199.98px) {
    .features .container .feature .feature-img {
        flex: 0 0 300px;
        max-width: none;
    }

    .features .container .feature .feature-content {
        padding-right: 40px;
    }

    .features .container .feature .feature-content h3 {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .features .container .feature .feature-content p {
        font-size: 17px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   Features 2-col → 1-col (her feature full-width). İç layout hâlâ row
   (img left + content right) — tablet'te yan yana okuma yeri var.

   responsive.css:213 `.feature { flex-direction: column }` override ediyoruz
   (aynı specificity 0,0,3,0, load-order ile kazanır).
*/
@media (max-width: 991.98px) {
    .features .container .feature {
        width: 100%;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .features .container .feature .feature-img {
        flex: 0 0 260px;
        max-width: none;
    }

    /* responsive.css:219 text-align:center override — row'da sol hizalama */
    .features .container .feature .feature-content {
        flex: 0 1 100%;
        padding-right: 30px;
        padding-left: 0;
        text-align: left;
    }

    .features .container .feature .feature-content h3 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .features .container .feature .feature-content p {
        font-size: 17px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
/*
   Internal layout column'a geçer — img üstte merkezli, content altta
   merkezli. Dar mobilde yan yana sığmıyor.

   responsive.css:1100 `feature-img max-width:25%` override — explicit
   width:240 ile Lottie düzgün boyutta render olsun.
*/
@media (max-width: 767.98px) {
    .features .container .feature {
        flex-direction: column;
        margin-bottom: 36px;
    }

    .features .container .feature .feature-img {
        flex: 0 0 auto;
        width: 240px;
        max-width: 100%;
        margin: 0 auto 16px;
    }

    .features .container .feature .feature-content {
        padding-right: 0;
        padding-left: 0;
        text-align: center;
    }

    .features .container .feature .feature-content h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .features .container .feature .feature-content p {
        font-size: 16px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .features .container .feature .feature-img {
        width: 200px;
    }

    .features .container .feature .feature-content h3 {
        font-size: 20px;
    }

    .features .container .feature .feature-content p {
        font-size: 15px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .features .container .feature .feature-img {
        width: 160px;
    }

    .features .container .feature .feature-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .features .container .feature .feature-content p {
        font-size: 14px;
    }
}


/* ==========================================================================
   7. WRITE US (İletişim section — "Bize Yazın")
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/UiBase/WriteUs.php
     - stylesheet.css satır 1648-1798 (write-us, container, content,
       form-container, whatsapp-box, bottom-message, privacy-policy)
     - responsive.css satır 260-277 (≤992: padding 60/60, flex-direction
       column, content font 30 text-center, home-form margin-left 0)

   Mevcut sorunlar:
     1. `.write-us { height: 584px }` sabit — mobilde stack'te overflow/boşluk
     2. `.write-us-form-container { width: 400px; margin-left: 80; height:
        calc(100% + 46px) }` — responsive.css sadece `.home-form`'u (iç form)
        resetliyor, form-CONTAINER'ı es geçmiş
     3. `.whatsapp-text-number 34px`, `.bottom-message 25px`,
        `.write-us-form-text-title 34px` — mobilde taşabilir
     4. Form container border-radius `0 0 15 15` (sadece alt köşe) —
        desktop'ta sayfadan sarkan kart efekti; mobilde standalone kartta
        üst köşe de rounded olmalı

   Dokunulmayanlar:
     - Arka plan image (bize-dunyanin-her-yerinden-ulasabilirsiniz.png)
     - Renkler (beyaz text, turuncu vurgular)
     - WhatsApp box hover (border #25d366, bg green, translateY)
     - Form input stilleri (stylesheet.css 6845+ ve responsive.css ilgili)
   ========================================================================== */

/* --- Tablet yatay ve altı: ≤1199.98px ------------------------------------ */
/* Hafif scale — content 48→40, form başlık 34→30, tel no 34→30 */
@media (max-width: 1199.98px) {
    .write-us .container .write-us-content {
        font-size: 40px;
    }

    .whatsapp-text-number {
        font-size: 30px;
    }

    .write-us-form-text-title {
        font-size: 30px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   Kritik kırılma noktası — desktop'un iki sütunlu yan yana layout'u
   dikey stack'e geçer. responsive.css:260 zaten container flex-direction
   column + content font 30 + text-center yapıyor. Buradaki asıl iş:

   1. Fixed 584px section yüksekliğini aç (height: auto).
   2. Form-container'ı standalone karta çevir (width 100% max 480,
      margin-left 0, margin-top 30, height auto, 4 köşe rounded).
   3. Tipografi ölçeklerini ayarla.
*/
@media (max-width: 991.98px) {
    /* Fixed height'i aç — içeriğe göre genişlesin */
    .write-us {
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Container align-items center — stack'te yatay merkezleme */
    .write-us .container {
        align-items: center;
    }

    /* Content dikey hizaya dönsün (desktop'ta height:100% flex column'du) */
    .write-us .container .write-us-content {
        height: auto;
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
    }

    /* Form container tam override — desktop'un sarkık kart efekti kalksın */
    .write-us .container .write-us-form-container {
        width: 100%;
        max-width: 480px;
        margin-left: 0;
        margin-top: 0;
        height: auto;
        padding: 30px 26px;
        border-radius: 15px;
    }

    .write-us-form-text-title {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .write-us-form-text-description {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .write-us-content-text {
        margin-bottom: 28px;
    }

    /* WhatsApp box — iç padding + gap küçül, font ölçekle */
    .whatsapp-box {
        padding: 16px 22px;
        gap: 16px;
    }

    .whatsapp-text-title {
        font-size: 20px;
    }

    .whatsapp-text-number {
        font-size: 26px;
        margin-top: 6px;
    }

    .bottom-message {
        font-size: 20px;
        margin-top: 14px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
@media (max-width: 767.98px) {
    .write-us {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .write-us .container .write-us-content {
        font-size: 24px;
        margin-bottom: 24px;
    }

    /* Form container mobilde tam ekran genişliği */
    .write-us .container .write-us-form-container {
        max-width: 100%;
        padding: 24px 20px;
    }

    .write-us-form-text-title {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .write-us-form-text-description {
        font-size: 15px;
    }

    .write-us-content-text {
        margin-bottom: 22px;
    }

    .whatsapp-box {
        padding: 14px 18px;
        gap: 14px;
    }

    .whatsapp-text-title {
        font-size: 18px;
    }

    .whatsapp-text-number {
        font-size: 22px;
    }

    .bottom-message {
        font-size: 16px;
        margin-top: 10px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/*
   Dar ekranda whatsapp-box'ı COLUMN'a al (icon üstte merkezli, text
   altta merkezli) — row kalırsa icon + 2 satır text yan yana sıkışıyor.
*/
@media (max-width: 575.98px) {
    .write-us {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .write-us .container .write-us-content {
        font-size: 20px;
    }

    .write-us .container .write-us-form-container {
        padding: 20px 16px;
    }

    .write-us-form-text-title {
        font-size: 20px;
    }

    /* WhatsApp box stack (column) — icon üste, text alta merkezli */
    .whatsapp-box {
        flex-direction: column;
        text-align: center;
        padding: 16px 18px;
        gap: 10px;
    }

    .whatsapp-text {
        text-align: center;
    }

    .whatsapp-text-title {
        font-size: 17px;
    }

    .whatsapp-text-number {
        font-size: 20px;
    }

    .bottom-message {
        font-size: 15px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .write-us .container .write-us-content {
        font-size: 18px;
    }

    .write-us-form-text-title {
        font-size: 18px;
    }

    .whatsapp-text-title {
        font-size: 15px;
    }

    .whatsapp-text-number {
        font-size: 18px;
    }

    .bottom-message {
        font-size: 14px;
    }
}


/* ==========================================================================
   8. FAQS (Home FAQ section — "Sizin İçin Bir Kaç Soruyu Cevapladık")
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/SikcaSorulanSorular/Section.php
     - stylesheet.css satır 1540-1646 (faqs, faqs-title, faq h6, faq i,
       faq-body, all-faq)
     - responsive.css satır 239-257 (≤992), 1138-1146 (≤768),
       1457-1464 (≤500)

   Mevcut sorunlar:
     1. `.faqs-title { font: 34px }` unconditional; responsive.css'te
        sadece `.faq-page.faqs .faqs-title` ölçekleniyor → home section
        başlığı her ekranda 34px kalıyor. Override şart.
     2. `.all-faq { height: 39px }` sabit — mobilde text wrap'lendiğinde
        kırpılır.
     3. `.faq-body { padding-left: 41px }` unconditional — ikon 22'ye
        düştüğünde sol girinti orantısız.

   Dokunulmayanlar: renkler (#f49734, #5099f3, #181818 span bg), Bootstrap
   collapse, +/- toggle pseudo (h6::after content), .all-faq span radius 22.
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
/* Başlık 34 → 30. Diğerleri default kalır, henüz çok dar değil. */
@media (max-width: 1199.98px) {
    .faqs .faqs-title {
        font-size: 30px;
        margin-bottom: 22px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   responsive.css:241 yalnızca `.faq-page.faqs .faqs-title`'ı 28'e indiriyor;
   home section için aynı kuralı biz yazıyoruz.
   Diğer (.faq h6, .faq-body, .faq i, .all-faq a) zaten responsive.css
   ≤992'de ölçekli; biz sadece title + faq-body padding-left'i düzeltiyoruz.
*/
@media (max-width: 991.98px) {
    .faqs .faqs-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* İkon 27 → 22 olunca text hizası bozuluyordu, padding-left daralt */
    .faqs .faq-list .faq .faq-body {
        padding-left: 36px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
@media (max-width: 767.98px) {
    .faqs {
        padding: 50px 0;
    }

    .faqs .faqs-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .faqs .faq-list {
        margin-bottom: 28px;
    }

    .faqs .faq-list .faq i {
        font-size: 20px;
        padding-right: 10px;
    }

    .faqs .faq-list .faq .faq-body {
        font-size: 15px;
        padding-left: 30px;
        padding-bottom: 12px;
    }

    .faqs .all-faq a {
        font-size: 16px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .faqs {
        padding: 40px 0;
    }

    .faqs .faqs-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .faqs .faq-list .faq h6 {
        font-size: 16px;
        line-height: 1.35;
        padding-top: 12px;
    }

    .faqs .faq-list .faq i {
        font-size: 18px;
        padding-right: 8px;
    }

    .faqs .faq-list .faq .faq-body {
        font-size: 14px;
        padding-left: 26px;
    }

    /* Fixed 39px height'i kaldır — text wrap'lendiğinde boğmasın.
       min-height koruyalım ki boş gözükmesin. */
    .faqs .all-faq {
        height: auto;
        min-height: 39px;
    }

    .faqs .all-faq a {
        font-size: 15px;
    }

    .faqs .all-faq a span {
        padding: 5px 10px;
        font-size: 14px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .faqs .faqs-title {
        font-size: 18px;
    }

    .faqs .faq-list .faq h6 {
        font-size: 15px;
    }

    .faqs .faq-list .faq i {
        font-size: 16px;
    }

    .faqs .faq-list .faq .faq-body {
        font-size: 13px;
        padding-left: 22px;
    }

    .faqs .all-faq a {
        font-size: 14px;
    }
}


/* ==========================================================================
   9. WHY DESTOMEDYA (Neden destomedya? + Reviews Swiper)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Home/Why.php (section + inline Swiper CSS)
     - stylesheet.css satır 1128-1202 (why-destomedya, ::after, h4)
     - responsive.css satır 1366-1395 (≤650 kuralları)

   Not:
     Swiper-specific kurallar (slide width, mask-image, arrow button
     pozisyonu) Why.php'de inline kalıyor — section-specific. Burada
     sadece section-wide tipografi + spacing kademe yapıyoruz.

   Dokunulmayanlar:
     - Mor arka plan (rgb 148 65 229 / 90%)
     - ::after bg image (neden-destomedya.png)
     - Text-shadow (mor glow)
     - Swiper config + scale/opacity/blur animasyonları
     - Swiper dead code (.owl-* kuralları cleanup başka zamana)
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
@media (max-width: 1199.98px) {
    .why-destomedya {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .why-destomedya h4 {
        font-size: 36px;
        /* line-height 0.925 çok sıkı — font küçüldükçe text overlap riski.
           1.1 daha okunaklı, tüm breakpoint'lerde geçerli olsun diye
           base değer burada set ediliyor (sonraki media query'ler miras alır). */
        line-height: 1.1;
        margin-bottom: 30px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
@media (max-width: 991.98px) {
    .why-destomedya {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .why-destomedya h4 {
        font-size: 32px;
        margin-bottom: 26px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
@media (max-width: 767.98px) {
    .why-destomedya {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .why-destomedya h4 {
        font-size: 28px;
        line-height: 1.15;
        margin-bottom: 22px;
    }

    /* responsive.css ≤650'deki `.why-destomedya h4 span { font-size: 22 }`
       override — 22 yerine 20 daha orantılı (h4 28'e indi) */
    .why-destomedya h4 span {
        font-size: 20px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .why-destomedya {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .why-destomedya h4 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .why-destomedya h4 span {
        font-size: 18px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .why-destomedya {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .why-destomedya h4 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .why-destomedya h4 span {
        font-size: 16px;
    }
}


/* ==========================================================================
   10. FOOTER — HTML atraksiyonlarına dikkat
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/UiBase/Footer.php
     - stylesheet.css satır 1800-2170 (footer-top, footer-body, f-col-*,
       footer-bottom)
     - responsive.css satır 322-326 (≤992: footer-bottom-links hide)
     - responsive.css satır 1191-1202 (≤989 f-col-3/-1-k margin-top)
     - responsive.css satır 1211-1263 (≤650 footer-top-bar scale)
     - responsive.css satır 1310-1356 (≤650 footer-body REORDER +
       flex-basis, padding: 50/0/30)

   ============== HTML ATRAKSİYONLARI (önemli!) ==============

   (A) Invisible alignment spacer:
       Footer.php:44'te 4. f-col-1'in col-title'ı şöyle:
         <div class="col-title"><span class="text-transparent">KURUMSAL</span></div>
       Desktop'ta 4 kolon yan yana dururken, bu görünmez başlık Blog/SSS
       listesinin hizasını önceki (Kurumsal) kolonun listesi ile eşitler.
       Mobilde kolonlar wrap'lendiği/stack'lendiği zaman bu "şeffaf başlık"
       boş bir blok olarak gözükür. → ≤991.98'de gizliyoruz.

   (B) responsive.css ≤650 reorder kurgusu:
       Link kolonları + f-col-3 + f-col-4 order/flex-basis ile yeniden
       dizilir. Sonuç (responsive.css'in planı):
         Row 1 │ f-col-3 (50%)  │ f-col-4 (50%)   │  — logo+phones | image
         Row 2 │ f-col-1-k Kurumsal (100%, liste içinde 2-col wrap)
         Row 3 │ f-col-1 Web Sitesi Kurulumu (100%)
         Row 4 │ f-col-1 Tüm Hizmetler (100%)
         Row 5 │ f-col-1 Blog/SSS (100%)
       Bu özenle tasarlanmış bir mobil akış — iletişim önce, sonra
       öncelikli linkler. Bu plana saygı göstereceğiz, ≤650'de layout'a
       MÜDAHALE ETMİYORUZ; sadece font/padding scale yapıyoruz.

   (C) f-col-1-k'nın iki class'ı (f-col-1 + f-col-1-k):
       responsive.css ≤989'da f-col-1-k'ya margin-top:20 ekliyor. Bizim
       651-991 2×2 grid aralığımızda bu margin hizayı bozuyor — aynı
       aralıkta override ediyoruz.

   ============== ÖLÜ KOD NOTU ==============
   responsive.css'te `.f-col-2` için çok sayıda kural var ama Footer.php
   markup'ında .f-col-2 yok. Silmedik (kullanıcı talebi), sadece not.

   ============== GRID STRATEJİSİ ==============
   - ≥1200              → default (4 link col + f-col-3 yan yana)
   - 651-991.98         → 2×2 grid (link col'lar %50) + f-col-3 alt satır %100
   - ≤650 (responsive.css) → kendi reorder akışı devrede, layout'a dokunmuyoruz
   - ≤575/≤374          → sadece typography scale

   Dokunulmayanlar: tüm arka plan renkleri (#1e1e1e, #f4f4f4, #ededed,
   #e0e0e0), link renkleri + #ff5400 hover, social media renkleri,
   .footer-top::before mask-image, .footer-top-bar absolute "kart",
   scroll-up ve whatsapp floating butonları (responsive.css ≤768 handle).
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
/* Hafif padding/font azaltma, layout aynı kalır. */
@media (max-width: 1199.98px) {
    .footer-body {
        padding-top: 90px;
    }

    .footer-top .footer-top-content {
        font-size: 17px;
    }

    .footer-body .f-col-1 {
        padding-right: 20px;
    }

    .footer-body .f-col-3 {
        flex: 0 0 180px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   Burada iki kategori kural var:
     1. Hem tablet hem mobilde geçerli olanlar (text-transparent gizle,
        padding, font). Bunlar tüm ≤991.98'de aktif.
     2. Sadece 2×2 grid uygulaması — range query (651-991) ile sınırlı
        ki responsive.css'in ≤650 reorder'ı bozulmasın.
*/
@media (max-width: 991.98px) {
    .footer-body {
        padding-top: 80px;
        padding-bottom: 24px;
    }

    .footer-top .footer-top-content {
        font-size: 16px;
        padding: 25px 0 32px 0;
    }

    /* ATRAKSİYON (A) çözümü: invisible alignment spacer (4. f-col-1'in
       col-title'ı) mobilde hizalama işlevini kaybettiği için gizli olsun.
       `:has()` modern tarayıcılar (Chrome 105+, Safari 15.4+, Firefox 121+)
       — eski tarayıcıda title görünür (text-transparent yüzünden zaten
       görünmez, sadece yüksekliği gapt yaratır — küçük bir tolere). */
    .footer-body .f-col .col-title:has(.text-transparent) {
        display: none;
    }
}

/* --- 2×2 grid aralığı: min 651 / max 991.98 ------------------------------ */
/*
   Link kolonları 2×2 grid, f-col-3 altta tam genişlik.
   Range query kullanıyoruz — ≤650'de responsive.css'in ordered layout'u
   devreye girsin diye kendi kurallarımızı bu aralıkla sınırlıyoruz.
*/
@media (min-width: 651px) and (max-width: 991.98px) {
    /* 4 link kolonu 2×2 grid */
    .footer-body .f-col-1 {
        flex: 0 0 50%;
        padding-right: 12px;
        margin-bottom: 20px;
    }

    /* ATRAKSİYON (C) çözümü: responsive.css:1200 (≤989)'daki
       `.f-col-1-k { margin-top: 20 }` 2×2 grid'de hizayı bozuyor.
       Aynı specificity ile override (responsive-new.css sonra yüklenir). */
    .footer-body .f-col-1-k {
        margin-top: 0;
    }

    /* f-col-3 (logo + phones) altta tam genişlik satır */
    .footer-body .f-col-3 {
        flex: 0 0 100%;
        padding-right: 0;
        padding-top: 10px;
    }
}

/* --- Mobil: ≤767.98px --- (sadece typography — layout @991 range yönetiyor) */
@media (max-width: 767.98px) {
    .form .input-col input[type="text"] {
        font-size: 14px;
    }
    .form .input-col textarea {
        font-size: 14px;
    }
    .footer-body {
        padding-top: 60px;
    }

    .footer-top .footer-top-content {
        font-size: 15px;
        padding: 20px 0 28px 0;
    }

    .footer-body .f-col-1 {
        padding-right: 8px;
    }

    /* Başlık ve link font'ları hafif scale */
    .footer-body .f-col .col-title {
        font-size: 16px;
    }

    .footer-body .f-col li {
        font-size: 14px;
    }

    .footer-body .f-col-3 .title {
        font-size: 15px;
    }

    .footer-body .f-col-3 .phone {
        font-size: 14px;
    }

    .footer-bottom .footer-bottom-copyright {
        font-size: 13px;
        padding: 14px 0;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
/*
   ATRAKSİYON (B) gereği: responsive.css ≤650 reorder/flex-basis kurallarını
   BOZMUYORUZ — sadece typography/padding scale yapıyoruz. Link kolonları
   zaten responsive.css'te 100% genişliğe geçiyor, tekrar set etmemize
   gerek yok.
*/
@media (max-width: 575.98px) {
    .footer-top .footer-top-content {
        font-size: 14px;
        line-height: 1.4;
    }

    .footer-body .f-col .col-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .footer-body .f-col li {
        font-size: 14px;
        padding-bottom: 4px;
    }

    .footer-bottom .footer-bottom-copyright {
        font-size: 12px;
        padding: 12px 0;
        line-height: 1.4;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .footer-top .footer-top-content {
        font-size: 13px;
    }

    .footer-body .f-col .col-title {
        font-size: 14px;
    }

    .footer-body .f-col li {
        font-size: 13px;
    }

    .footer-body .f-col-1 ul li {
        flex-basis: 100%;
    }

    .footer-body .f-col-3 .title {
        font-size: 14px;
    }

    .footer-body .f-col-3 .phone {
        font-size: 13px;
    }

    .footer-bottom .footer-bottom-copyright {
        font-size: 11px;
    }
}


/* ==========================================================================
   11. PAGE HEADER (inner sayfa başlığı — UiBase/PageHeader.php template)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/UiBase/PageHeader.php
     - stylesheet.css satır 2598-2652 (page-header, page-header-content,
       title, sub-title, breadcrumbs-light)
     - stylesheet.css satır 2864-2950 (page-header-content h1,
       page-header-content-text-1/2/3, service-page h1)
     - stylesheet.css satır 8621-8710 (page-header-bg, gradient-top/bottom,
       mask-image'lar, bg image)
     - responsive.css satır 402-404 (≤768: text-3 font 24)
     - responsive.css satır 495-497 (≤768: breadcrumbs hide)
     - responsive.css satır 857-864 (≤768: package-page h1 28, h2 18)
     - responsive.css satır 1140-1145 (≤768: title 20, padding 27/0/30)

   Yapı (çok amaçlı template):
     .page-header[.cssClass]
       ├─ .page-header-bg
       │   ├─ .gradient-top    (mor gradient, max-height:320, mask fade)
       │   └─ .gradient-bottom (açık gri #f8f5fa, height:210, mask fade)
       ├─ .breadcrumbs (opsiyonel, ≤768'de mevcut rule ile gizleniyor)
       └─ .page-header-content
           └─ .container
               └─ SLOT İÇERİĞİ — sayfaya göre değişen class'lar:
                  .title / .sub-title (default/faq page)
                  h1 (tüm sayfalar, 47.584px)
                  .page-header-content-text-1 (20 #ffc000)
                  .page-header-content-text-2 (20 #fff)
                  .page-header-content-text-3 (48 #fff w:800)
                  .page-header-content-text-h1 (service, 34 #ffa200)
                  .timer (package sayacı)

   Sorun odağı:
     h1 47.584 ve text-3 48 — tablet/mobilde kesinlikle taşıyor. Diğer
     text varyantları da scale yok. Mevcut responsive.css sadece ≤768'de
     bir kaç kural koymuş, 768-1199 aralığı komple boş.

   Dokunulmayanlar:
     - Mor gradient-top (#602f9d → #8a31a0) + mask-image fade
     - gradient-bottom (#f8f5fa) + mask-image fade
     - Black fade overlay (gradient-top::before)
     - Bg image (page-header-bg.png)
     - Tüm renkler (#ffa200, #ffc000, #fff, #151515)
     - .service-page-header .gradient-bottom { display: none } davranışı
     - Breadcrumbs ≤768 hide (responsive.css mevcut kararı)
     - .package-page-header .timer bloğu (ayrıca incelenmeli)
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
@media (max-width: 1199.98px) {
    .page-header .page-header-content {
        padding: 48px 0 60px 0;
    }

    .page-header-content h1 {
        font-size: 42px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .page-header-content .page-header-content-text-3,
    .page-header-content .page-header-content-text-3 p {
        font-size: 42px;
    }

    .service-page-header .page-header-content .page-header-content-text-h1 {
        font-size: 32px;
    }

    .page-header .page-header-content .title {
        font-size: 28px;
        margin-bottom: 36px;
    }

    .page-header .page-header-content .sub-title {
        font-size: 30px;
    }

    .page-header .page-header-content .sub-title span.desto {
        font-size: 34px;
    }

    /* Gradient oranları — header kısaldıkça gradient'ler de kısalsın */
    .page-header .gradient-top {
        max-height: 300px;
    }

    .page-header .gradient-bottom {
        height: 190px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
@media (max-width: 991.98px) {
    .page-header {
        padding-top: 60px;
    }

    .page-header .page-header-content {
        padding: 40px 0 56px 0;
    }

    .page-header-content h1 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .page-header-content .page-header-content-text-3,
    .page-header-content .page-header-content-text-3 p {
        font-size: 36px;
    }

    .service-page-header .page-header-content .page-header-content-text-h1 {
        font-size: 28px;
    }

    .page-header-content .page-header-content-text-1,
    .page-header-content .page-header-content-text-1 p,
    .page-header-content .page-header-content-text-2,
    .page-header-content .page-header-content-text-2 p {
        font-size: 18px;
    }

    .page-header .page-header-content .title {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .page-header .page-header-content .sub-title {
        font-size: 28px;
    }

    .page-header .page-header-content .sub-title span.desto {
        font-size: 30px;
    }

    .page-header .gradient-top {
        max-height: 250px;
    }

    .page-header .gradient-bottom {
        height: 170px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
/*
   responsive.css:1143 `.page-header-content { padding: 27/0/30 }` bg ile
   content arasındaki orantıyı boz(uyordu — bg içinde çok fazla padding
   alanı kalıyordu. Override ediyoruz (20/0/24) + gradient-bottom'u
   daraltıp (140→100) bg'nin content'i "ezmemesini" sağlıyoruz.
*/
@media (max-width: 767.98px) {
    .page-header {
        /* Desktop header 74px, mobilde 53px — padding-top da onu yansıtsın */
        padding-top: 53px;
    }

    /* responsive.css:1143 OVERRIDE — 27/0/30 çok fazla, content'i bg
       içinde yüzdürüyordu. 20/0/24 daha sıkı, content bg'ye oturdu. */
    .page-header .page-header-content {
        padding: 20px 0 24px 0;
    }

    /* TÜM VARYANT h1'leri 28'e indir (responsive.css sadece
       package-page-header için 28 yapıyor, biz genel olarak da). */
    .page-header-content h1 {
        font-size: 28px;
        margin-bottom: 14px;
    }

    /* text-3 responsive.css zaten 24'e indiriyor — consistent, dokunma. */

    .service-page-header .page-header-content .page-header-content-text-h1 {
        font-size: 22px;
    }

    .page-header-content .page-header-content-text-1,
    .page-header-content .page-header-content-text-1 p,
    .page-header-content .page-header-content-text-2,
    .page-header-content .page-header-content-text-2 p {
        font-size: 16px;
    }

    .page-header .page-header-content .sub-title {
        font-size: 22px;
    }

    .page-header .page-header-content .sub-title span.desto {
        font-size: 24px;
    }

    .page-header .gradient-top {
        max-height: 200px;
    }

    /* Gradient-bottom 140 → 100 — section kısaldıkça fade de kısalsın,
       content üstündeki bg alanı sürrealist derecede büyük kalmasın */
    .page-header .gradient-bottom {
        height: 100px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Daha sıkı — content bg'de asılı kalmasın */
    .page-header .page-header-content {
        padding: 16px 0 20px 0;
    }

    .page-header-content h1 {
        font-size: 24px;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .page-header-content .page-header-content-text-3,
    .page-header-content .page-header-content-text-3 p {
        font-size: 22px;
    }

    .service-page-header .page-header-content .page-header-content-text-h1 {
        font-size: 20px;
    }

    .page-header-content .page-header-content-text-1,
    .page-header-content .page-header-content-text-1 p,
    .page-header-content .page-header-content-text-2,
    .page-header-content .page-header-content-text-2 p {
        font-size: 15px;
    }

    .page-header .page-header-content .title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .page-header .page-header-content .sub-title {
        font-size: 20px;
    }

    .page-header .gradient-top {
        max-height: 180px;
    }

    /* Gradient-bottom daha da dar — content çok kısaldı */
    .page-header .gradient-bottom {
        height: 80px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    /* Minimum padding — bg'nin ölçeği content ile uyumlu */
    .page-header .page-header-content {
        padding: 12px 0 16px 0;
    }

    .page-header-content h1 {
        font-size: 20px;
    }

    .page-header-content .page-header-content-text-3,
    .page-header-content .page-header-content-text-3 p {
        font-size: 18px;
    }

    .service-page-header .page-header-content .page-header-content-text-h1 {
        font-size: 17px;
    }

    .page-header-content .page-header-content-text-1,
    .page-header-content .page-header-content-text-1 p,
    .page-header-content .page-header-content-text-2,
    .page-header-content .page-header-content-text-2 p {
        font-size: 14px;
    }

    .page-header .page-header-content .title {
        font-size: 16px;
    }

    .page-header .page-header-content .sub-title {
        font-size: 18px;
    }

    .page-header .gradient-top {
        max-height: 160px;
    }

    /* En dar fade — küçük phone'da content'e oranla */
    .page-header .gradient-bottom {
        height: 60px;
    }
}


/* ==========================================================================
   12. PAGE WRAPPER + CUSTOM PAGE CONTENT CARD
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/SikcaSorulanSorular/Index.php (FAQ page)
     - stylesheet.css satır 2224-2228 (.page temel padding/bg)
     - stylesheet.css satır 9776-9791 (.custom-page-content__text-card,
       .custom-page-content__text p)
     - responsive.css satır 550 (≤768: .page h1.title.big-title font 26)

   Not:
     Bu section sadece FAQ page için değil, inner sayfalarda yaygın olarak
     kullanılan wrapper (.page) ve beyaz kart (.custom-page-content__text-card)
     için geneldir. FAQ page'de faq item'ları home FAQ için yazdığım
     kurallardan (.faqs .faq-list .faq ...) cascade ile yararlanır — ayrıca
     rule gerekmez.

   Ölü kod notu:
     stylesheet.css:6387 `.faq-page.faqs .faqs-title` ve
     responsive.css:233'teki ≤992 kuralı, FAQ page markup'ında
     `.faqs-title` element'i OLMADIĞI için ölü. Silmedik.

   Dokunulmayanlar:
     - .page { background-color: #f3f0f5 }
     - .custom-page-content__text-card { background: #fff, box-shadow }
     - .custom-page-content__text p { color: #2a2a2a, line-height: 1.4 }
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
@media (max-width: 1199.98px) {
    .page {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .custom-page-content__text-card {
        padding: 28px 44px;
    }

    .custom-page-content__text p {
        font-size: 19px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
@media (max-width: 991.98px) {
    .page {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .custom-page-content__text-card {
        padding: 26px 36px;
    }

    .custom-page-content__text p {
        font-size: 18px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
@media (max-width: 767.98px) {
    .page {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .custom-page-content__text-card {
        padding: 22px 24px;
        border-radius: 16px;
    }

    .custom-page-content__text p {
        font-size: 16px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .page {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .custom-page-content__text-card {
        padding: 18px 18px;
        border-radius: 14px;
    }

    .custom-page-content__text p {
        font-size: 15px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .page {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .custom-page-content__text-card {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .custom-page-content__text p {
        font-size: 14px;
    }
}


/* ==========================================================================
   13. İLETİŞİM SAYFASI (Iletisim/Index.php + ContactForm.php)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Iletisim/Index.php
     - app/areas/ui/view/Iletisim/ContactForm.php (partial)
     - stylesheet.css satır 7070-7144 (contact-page wrapper, content, cards,
       form box)
     - stylesheet.css satır 7290-7367 (contact-card detayı, icon, info)
     - stylesheet.css satır 9501-9507 (contact-page .page-wrapper)
     - responsive.css satır 348-351 (≤992: form max-width 40%)
     - responsive.css satır 1160-1176 (≤768: content padding, form
       padding-top 0, form max-width 100%)

   Yapı:
     .page.contact-page
       .container
         .page-wrapper (bg #fff, radius 20, shadow, padding 26/35, FLEX row)
           .page-content.contact-page-content (sol yarı)
             .contact-row (text + cards block-stacked)
           .form.contact-form (sağ yarı, flex 0 0 53%, bg #fafafa)

   Kritik sorun:
     page-wrapper flex row olarak kalıyor mobilde. responsive.css sadece
     form'un max-width'ini 100%'e çekiyor ama flex-basis 53%'i ezmiyor —
     sonuçta mobilde 53/47 cramped 2-col devam ediyor. ≤767'de column'a
     geçirip tam genişlik stack yapıyoruz.

   Dokunulmayanlar:
     - Tüm renkler (#9441e5, #ffa200, #161616, #24282b, #fafafa form bg)
     - page-wrapper shadow + radius 20
     - contact-card shadow + radius 10
     - Hover animasyonu (translateY -4, shadow artış)
     - Form input stilleri (stylesheet.css:6845+ + responsive.css genel form)
     - contact-cards { display: inline-grid } — kartların dikey stack'i
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
@media (max-width: 1199.98px) {
    .contact-page .page-wrapper {
        padding: 24px 28px;
    }

    .contact-page .contact-row .contact-text span.contact-title {
        font-size: 30px;
        margin-bottom: 18px;
    }

    .contact-card {
        padding: 14px 22px;
        gap: 14px;
    }

    .contact-card__icon i {
        font-size: 34px;
    }

    .contact-card__number {
        font-size: 22px;
    }

    .contact-card__sub {
        font-size: 18px;
    }

    .contact-page .contact-form {
        padding: 28px 36px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
@media (max-width: 991.98px) {
    .page .page-content {
        padding-bottom: 0;
    }
    .contact-page .page-wrapper {
        padding: 22px 22px;
    }

    .contact-page .contact-row .contact-text span.contact-title {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .contact-page .contact-text p {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .contact-card {
        padding: 12px 18px;
        gap: 12px;
    }

    .contact-card__icon i {
        font-size: 30px;
    }

    .contact-card__label {
        font-size: 14px;
    }

    .contact-card__number {
        font-size: 20px;
    }

    .contact-card__sub {
        font-size: 16px;
    }

    /* responsive.css:350'deki `max-width: 40%` override — 50% daha mantıklı
       (53/47'den 50/50'ye) */
    .contact-page .form.contact-form {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 24px 28px;
        padding-top: 24px;
    }

    .contact-form h2 {
        font-size: 22px;
    }

    .contact-form .col-12 p {
        font-size: 15px;
    }

    /* Contact form GÖNDER butonu tablet scale (button.css:152 override) */
    .contact-page .orange-btn {
        width: 180px;
        line-height: 40px;
        font-size: 18px;
    }

    .contact-page button {
        margin-top: 16px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
/*
   Kritik kırılma: page-wrapper flex row → column. Content üstte, form altta
   stack. contact-form flex-basis 100% + padding azaltma.
*/
@media (max-width: 767.98px) {
    /* STACK — content üst, form alt */
    .contact-page .page-wrapper {
        flex-direction: column;
        padding: 20px 18px;
    }

    /* Content ile form arasında nefes */
    .contact-page .contact-page-content {
        padding-bottom: 20px;
    }

    .contact-page .contact-row .contact-text span.contact-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .contact-page .contact-text p {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .contact-card {
        padding: 12px 16px;
        gap: 12px;
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .contact-card__icon i {
        font-size: 26px;
    }

    .contact-card__label {
        font-size: 13px;
    }

    .contact-card__number {
        font-size: 18px;
    }

    .contact-card__sub {
        font-size: 14px;
        margin-top: 3px;
    }

    /* Form tam genişlik — flex:0 0 53% override */
    .contact-page .form.contact-form {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 22px 18px;
        padding-top: 22px;
    }

    .contact-form h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .contact-form .col-12 p {
        font-size: 15px;
        margin-bottom: 14px;
    }

    /* MOBİL CTA PATTERN: full-width buton — form tam genişliğe geçtiğinde
       158px sabit buton ufak kalıyor, CTA olarak öne çıksın diye 100%
       (max 320) yapıyoruz. Scope .contact-page — diğer sayfalardaki
       orange-btn'lere etki etmesin. */
    .contact-page .orange-btn {
        width: 100%;
        max-width: 320px;
        line-height: 42px;
        font-size: 17px;
        border-radius: 8px;
    }

    .contact-page button {
        margin-top: 12px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .contact-page .page-wrapper {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .contact-page .contact-row .contact-text span.contact-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .contact-page .contact-text p {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .contact-card {
        padding: 12px 14px;
        gap: 10px;
        margin-bottom: 12px;
    }

    .contact-card__icon i {
        font-size: 24px;
    }

    .contact-card__label {
        font-size: 12px;
    }

    .contact-card__number {
        font-size: 16px;
    }

    .contact-card__sub {
        font-size: 13px;
    }

    .contact-page .form.contact-form {
        padding: 18px 14px;
        padding-top: 18px;
        border-radius: 10px;
    }

    .contact-form h2 {
        font-size: 18px;
    }

    .contact-form .col-12 p {
        font-size: 14px;
    }

    /* Telefonda buton line-height ve font biraz daha kompakt */
    .contact-page .orange-btn {
        line-height: 40px;
        font-size: 16px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .contact-page .page-wrapper {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .contact-page .contact-row .contact-text span.contact-title {
        font-size: 18px;
    }

    .contact-page .contact-text p {
        font-size: 13px;
    }

    .contact-card {
        padding: 10px 12px;
        gap: 10px;
    }

    .contact-card__icon i {
        font-size: 22px;
    }

    .contact-card__number {
        font-size: 15px;
    }

    .contact-card__sub {
        font-size: 12px;
    }

    .contact-page .form.contact-form {
        padding: 16px 12px;
    }

    .contact-form h2 {
        font-size: 17px;
    }

    .contact-form .col-12 p {
        font-size: 13px;
    }

    /* En küçük ekran: buton son kademe */
    .contact-page .orange-btn {
        line-height: 38px;
        font-size: 15px;
    }

    .contact-page button {
        margin-top: 10px;
    }
}


/* ==========================================================================
   14. KURUMSAL (About/Corporate — Kurumsal/Index.php + partial'lar)
   --------------------------------------------------------------------------
   İlgili partial'lar (hepsi kendi CSS'ini stylesheet.css'te içeriyor):
     - Kurumsal/VideoHero.php     → .video-hero (video bg, hero block)
     - Kurumsal/VisionCards.php   → .vision-cards-section (2-col grid, orange/purple)
     - Kurumsal/Text2.php         → .honesty-section (gri kutu, center text)
     - Kurumsal/Why.php           → .why-us-section (4-col grid, 4 beyaz kart)
     - Kurumsal/Text3.php         → .final-message-section (merkezli başlık+metin)

   Ana sayfa wrapper (.page.about-page + .custom-page-content__text-card)
   section 12'de zaten covered.

   Strateji:
     stylesheet.css her partial için bir kaç responsive kural koymuş ama
     breakpoint'ler arasında GAP'ler var (992-1199, 575-767, 374 boş).
     Burada gap'leri kademeli değerlerle dolduruyoruz. Ek olarak
     WhyUs'da title 44 → 46'ya YÜKSELİYOR ≤1200'de (muhtemel typo), 40'a
     override ediyoruz.

   Dokunulmayanlar:
     - Tüm renkler (gradient #ff6000→#ffa200, #6420a6→#9441e5, etc.)
     - Bg renkleri (#fff, #e9e7ea honesty box, rgba video overlay)
     - Shadow ve border-radius değerleri
     - Video playback davranışı (autoplay/muted/loop/playsinline)
     - Grid-template-columns değişimleri (zaten breakpoint'te uygulanmış)
   ========================================================================== */

/* ---------- 14a. VIDEO HERO ---------------------------------------------- */
/* stylesheet.css: ≤1199 sadece title, ≤767 hero height auto.
   Gaps: ≤991 (title+text), ≤575, ≤374. */
@media (max-width: 991.98px) {
    .video-hero {
        height: auto;
    }

    .video-hero__title {
        font-size: 36px;
        margin-bottom: 22px;
    }

    .video-hero__text p {
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {
    .video-hero {
        padding: 40px 0;
    }

    .video-hero__title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .video-hero__text p {
        font-size: 15px;
        margin-bottom: 0;
    }
}

@media (max-width: 374.98px) {
    .video-hero {
        padding: 30px 0;
    }

    .video-hero__title {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .video-hero__text p {
        font-size: 14px;
    }
}


/* ---------- 14b. VISION CARDS -------------------------------------------- */
/* stylesheet.css: ≤991 grid 1-col, ≤575 padding/font scale.
   Gaps: ≤1199, ≤767, ≤374. */
@media (max-width: 1199.98px) {
    .vision-cards-section {
        padding: 70px 0;
    }

    .vision-cards {
        gap: 30px;
    }

    .vision-card {
        padding: 34px 28px;
    }

    .vision-card__title {
        font-size: 38px;
        margin-bottom: 22px;
    }

    .vision-card__content p {
        font-size: 19px;
        margin-bottom: 24px;
    }
}

@media (max-width: 767.98px) {
    .vision-cards-section {
        padding: 50px 0;
    }

    .vision-card {
        padding: 30px 24px;
    }

    .vision-card__title {
        font-size: 30px;
        margin-bottom: 18px;
    }

    .vision-card__content p {
        font-size: 17px;
        margin-bottom: 20px;
    }
}

@media (max-width: 374.98px) {
    .vision-cards-section {
        padding: 30px 0;
    }

    .vision-cards {
        padding: 0 12px;
        gap: 16px;
    }

    .vision-card {
        padding: 22px 18px;
    }

    .vision-card__title {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .vision-card__content p {
        font-size: 15px;
        line-height: 1.55;
    }
}


/* ---------- 14c. HONESTY SECTION (Text2) --------------------------------- */
/* stylesheet.css: ≤991 box/title/p, ≤575 section + kompakt.
   Gaps: ≤1199, ≤767, ≤374. */
@media (max-width: 1199.98px) {
    .honesty-section {
        padding: 0 0 70px 0;
    }

    .honesty-box {
        padding: 70px 34px 80px;
    }

    .honesty-title {
        font-size: 38px;
        padding-bottom: 28px;
    }

    .honesty-content p {
        font-size: 19px;
        max-width: 85%;
    }
}

@media (max-width: 767.98px) {
    .honesty-section {
        padding: 0 0 50px;
    }

    .honesty-box {
        padding: 36px 24px 40px;
    }

    .honesty-title {
        font-size: 28px;
        padding-bottom: 22px;
    }

    .honesty-content p {
        font-size: 17px;
        max-width: 100%;
    }
}

@media (max-width: 374.98px) {
    .honesty-box {
        padding: 26px 16px 28px;
    }

    .honesty-title {
        font-size: 22px;
        padding-bottom: 16px;
    }

    .honesty-content p {
        font-size: 15px;
    }
}


/* ---------- 14d. WHY US (Kurumsal/Why) ----------------------------------- */
/* BUG FIX: stylesheet.css:10209'da `.why-us-title { font-size: 46 }` ≤1200
   kuralı — 44'ten 46'ya YÜKSELİYOR. Muhtemel typo (40 olmalıydı).
   Ayrıca ≤575 ve ≤374 scale yok. */
@media (max-width: 1199.98px) {
    .why-us-section {
        padding: 0 0 80px;
    }

    /* BUG FIX override — smaller viewport'ta title daha büyük anlamsız */
    .why-us-title {
        font-size: 40px;
        margin-bottom: 36px;
    }
}

@media (max-width: 991.98px) {
    .why-us-title {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .why-card {
        padding: 18px 32px 28px;
    }

    .why-card__top {
        font-size: 30px;
    }

    .why-card__title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .why-card__text p {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .why-us-section {
        padding: 0 0 50px;
    }

    .why-us-title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .why-card {
        padding: 18px 18px 20px;
    }

    .why-card__top {
        font-size: 22px;
    }

    .why-card__title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .why-card__text p {
        font-size: 15px;
        line-height: 1.55;
    }
}

@media (max-width: 374.98px) {
    .why-us-title {
        font-size: 22px;
    }

    .why-card {
        padding: 16px 14px 18px;
    }

    .why-card__top {
        font-size: 20px;
    }

    .why-card__title {
        font-size: 18px;
    }

    .why-card__text p {
        font-size: 14px;
    }
}


/* ---------- 14e. FINAL MESSAGE (Text3) ----------------------------------- */
/* stylesheet.css: ≤991 title+p, ≤575 section pad + compact.
   Gaps: ≤1199, ≤767, ≤374. */
@media (max-width: 1199.98px) {
    .final-message-section {
        padding: 40px 0 90px;
    }

    .final-message-title {
        font-size: 38px;
        margin-bottom: 32px;
    }

    .final-message-content p {
        font-size: 20px;
        margin-bottom: 22px;
    }
}

@media (max-width: 767.98px) {
    .final-message-section {
        padding: 40px 0 60px;
    }

    .final-message-title {
        font-size: 28px;
        margin-bottom: 22px;
    }

    .final-message-content p {
        font-size: 17px;
    }
}

@media (max-width: 374.98px) {
    .final-message-section {
        padding: 0 0 40px;
    }

    .final-message-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .final-message-content p {
        font-size: 15px;
        line-height: 1.55;
    }
}


/* ==========================================================================
   15. HİZMETLER (Services — Hizmetler/Index.php + Intro partial)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Hizmetler/Index.php
     - app/areas/ui/view/Hizmetler/Intro.php (hizmetler-intro partial)
     - stylesheet.css satır 5202-5246 (service-page, service-container)
     - stylesheet.css satır 9322-9499 (hizmetler-intro + kendi responsive)
     - stylesheet.css satır 9519-9573 (service-page-content__container —
       RESPONSIVE YOK, kritik gap!)
     - responsive.css satır 491-493 (≤768 service-container padding 0/10)

   Kritik sorun:
     `.service-page-content__container` desktop'ta flex row (alternating
     first/reverse order). stylesheet.css'te RESPONSIVE KURAL HİÇ YOK →
     mobilde image + content yan yana cramped. ≤767'de column'a çeviriyoruz.

   Dokunulmayanlar:
     - #ff920f icon bg, #ebebeb pill border, #f3f0f5 intro bg, #171717
       h2 text, #151515 pill-top, #fff card bg
     - Icon hover (translateY -5 + rotate -10deg)
     - Pill hover (translateY -5, shadow, border-color #ff920f)
     - Border-radius 20/22/23
     - `.--first`/`.--reverse` order (desktop alternating; mobilde stack'te
       anlamsız, media her satırda üstte kalsın)
   ========================================================================== */

/* ---------- 15a. SERVICE PAGE BASE + service-container h1 ---------------- */
@media (max-width: 1199.98px) {
    .service-page .service-page-content {
        padding-top: 60px;
    }

    .service-page .service-container h1 {
        font-size: 32px;
        padding: 28px 0;
    }
}

@media (max-width: 991.98px) {
    .service-page .service-page-content {
        padding-top: 50px;
    }

    .service-page .service-container h1 {
        font-size: 28px;
        padding: 24px 0;
    }
}

@media (max-width: 767.98px) {
    .service-page .service-page-content {
        padding-top: 40px;
    }

    .service-page .service-container h1 {
        font-size: 24px;
        padding: 20px 0;
    }
}

@media (max-width: 575.98px) {
    .service-page .service-page-content {
        padding-top: 30px;
    }

    .service-page .service-container h1 {
        font-size: 22px;
        padding: 16px 0;
    }
}

@media (max-width: 374.98px) {
    .service-page .service-page-content {
        padding-top: 24px;
    }

    .service-page .service-container h1 {
        font-size: 20px;
        padding: 14px 0;
    }
}


/* ---------- 15b. SERVICE PAGE CONTENT CONTAINER (alternating rows) ------- */
/*
   stylesheet.css:9519 flex row alternating — responsive HİÇ yok.
   ≤767'de column'a geçer, media tam genişlikte üstte kalır.
*/
@media (max-width: 1199.98px) {
    .service-page-content__container {
        gap: 30px;
        padding: 28px 0;
    }

    .service-page-content__container__content h2 {
        font-size: 26px;
        margin-bottom: 22px;
    }
}

@media (max-width: 991.98px) {
    .service-page-content__container {
        gap: 24px;
        padding: 24px 0;
    }

    .service-page-content__container__content h2 {
        font-size: 24px;
        margin-bottom: 18px;
    }
}

/* --- STACK: ≤767.98px --------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Flex row → column; media üstte, content altta (alternating mantığı
       mobilde anlamsız, img her satırda üstte kalsın). */
    .service-page-content__container {
        flex-direction: column;
        gap: 18px;
        padding: 20px 0;
    }
    .hizmetler-intro::after {
        height: 10px;
    }

    /* Media tam genişlik üstte */
    .service-page-content__container .service-page-content__container__media {
        flex: 0 0 auto;
        width: 100%;
        order: 0;
        max-width: 560px;
        margin: 0 auto;
    }

    .service-page-content__container__media img {
        max-width: 100%;
        height: auto;
        min-height: unset;
    }

    /* Content tam genişlik */
    .service-page-content__container__content {
        width: 100%;
    }

    .service-page-content__container__content h2 {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

@media (max-width: 575.98px) {
    .service-page-content__container {
        gap: 14px;
        padding: 16px 0;
    }

    .service-page-content__container__content h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }
}

@media (max-width: 374.98px) {
    .service-page-content__container {
        gap: 12px;
        padding: 12px 0;
    }

    .service-page-content__container__content h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}


/* ---------- 15c. HİZMETLER INTRO — ek ayarlar ----------------------------- */
/*
   stylesheet.css ≤1199, ≤991, ≤575 için intro responsive var ama:

   BUG (stylesheet.css:9462 + 9483): `.hizmetler-intro__text` hedefliyor ama
   `.hizmetler-intro__text p { font-size: 20 }` (stylesheet.css:9352) daha
   specific olduğu için p elementine ULAŞMIYOR — p tüm ekranlarda 20px
   kalıyor. Burada `.hizmetler-intro__text p` seçicisi ile düzgün
   override'lıyoruz.

   Gap'ler: ≤767 (4-col → 2-col erken geçiş), ≤374 (2-col → 1-col stack).
*/

/* === HİZMETLER-INTRO TEXT p (tüm breakpoint'lerde doğru hedef) === */
/* stylesheet.css:9352 `.hizmetler-intro__text p { font-size: 20 }` override */
@media (max-width: 1199.98px) {
    .hizmetler-intro__text p {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media (max-width: 991.98px) {
    .hizmetler-intro__text p {
        font-size: 16px;
        line-height: 1.55;
        margin: 0;
    }
}

@media (max-width: 767.98px) {
    /* 4-col sıkışık olmaya başladığında erken 2-col'a geç */
    .hizmetler-intro__features {
        gap: 30px 20px;
    }

    .hizmetler-intro__feature {
        width: calc(50% - 10px);
        max-width: none;
    }

    .hizmetler-intro__text-card {
        padding: 28px 26px;
        margin-bottom: 40px;
    }

    /* Text p — gerçek hedef (p element'ine ulaşan kural) */
    .hizmetler-intro__text p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Icon smooth geçiş: 69 → 66 (≤575'te 64'e iniyor stylesheet.css'te) */
    .hizmetler-intro__icon {
        width: 66px;
        height: 66px;
    }

    .hizmetler-intro__pill {
        padding: 22px 16px 12px;
    }

    .hizmetler-intro__pill-top {
        font-size: 15px;
    }
}

@media (max-width: 575.98px) {
    /* stylesheet.css:9483 `__text { font-size: 14 }` p'ye ulaşmıyor — fix */
    .hizmetler-intro__text p {
        font-size: 14px;
        line-height: 1.55;
    }
}

@media (max-width: 374.98px) {
    /* Çok dar ekranda 2-col bile cramped — tek sütun stack */
    .hizmetler-intro {
        padding: 30px 0 40px;
    }

    .hizmetler-intro__text-card {
        padding: 20px 16px;
        margin-bottom: 32px;
        border-radius: 14px;
    }

    .hizmetler-intro__text p {
        font-size: 13px;
        line-height: 1.55;
    }

    .hizmetler-intro__features {
        gap: 18px;
    }

    .hizmetler-intro__feature {
        width: 100%;
        max-width: 260px;
    }

    .hizmetler-intro__icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .hizmetler-intro__pill {
        padding: 18px 14px 10px;
    }

    .hizmetler-intro__pill-top {
        font-size: 14px;
    }
}


/* ---------- 15d. SERVICE PAGE CONTENT — HTML METİN (p/ul/strong) --------- */
/*
   `.service-page-content__container__content` içindeki html text
   (GenericHelper::GetHtmlText'ten gelen) `.page .page-content p` kuralı
   (stylesheet.css:2459 font:17 lh:1.5) ile stillenir. responsive.css'teki
   `@media (max-width: 768) .seo-page .seo-page-content p { font:16 }`
   (satır 533) bizim markup'ta `.seo-page-content` OLMADIĞI için
   çalışmıyor. Mobilde okunabilirlik için eksik scale'i biz ekliyoruz.
*/
@media (max-width: 767.98px) {
    /* Container içi p scale — cascade'den gelen 17 → 15.5 */
    .service-page-content__container__content p,
    .service-page .service-page-content p {
        font-size: 15.5px;
        line-height: 1.55;
    }

    /* Liste/strong default'u koru, sadece font inherit etsin */
    .service-page-content__container__content li {
        font-size: 15.5px;
        line-height: 1.6;
    }
}

@media (max-width: 575.98px) {
    .service-page-content__container__content p,
    .service-page .service-page-content p {
        font-size: 14.5px;
    }

    .service-page-content__container__content li {
        font-size: 14.5px;
    }
}

@media (max-width: 374.98px) {
    .service-page-content__container__content p,
    .service-page .service-page-content p {
        font-size: 13.5px;
    }

    .service-page-content__container__content li {
        font-size: 13.5px;
    }
}


/* ==========================================================================
   16. PAKETLER (Web Sitesi Paketleri — Paketler/Index.php + partial'lar)
   --------------------------------------------------------------------------
   İlgili partial'lar:
     - Paketler/Header.php       → PageHeader slot ✓ section 11 covers
     - Paketler/FeaturesCard.php → .feature-cards + tooltip
     - Paketler/Timer.php        → .timer (package-page-header içinde)
     - Paketler/PackagesCard.php → .packages.home-packages ✓ section 5 covers
     - Paketler/Packages.php     → comparison table (responsive.css kısmen)
     - Paketler/FeaturesNew.php  → .showcase-section (inline responsive OK)
     - Paketler/PageContent.php  → .package-page-content (SIFIR responsive)

   Ele alınan eksikler:
     (A) .feature-card-tooltip edge-overflow (ilk/son karta yaklaşınca taşıyor)
     (B) .feature-card content scale (768-1199'da cramped)
     (C) .timer mobil tipografi scale
     (D) .package-page-content HİÇ RESPONSIVE YOK — padding 160/0/110
         desktop değer mobilde devasa boşluk yaratıyor

   Dokunulmayanlar: Tooltip/border renkleri, gradient border, timer bg-image,
   package-page-content bg (#f3f0f5), hover animasyonları.
   ========================================================================== */

/* ---------- 16a. FEATURE CARD TOOLTIP — edge overflow fix ---------------- */
/* Stats tooltip pattern — ilk/son karta göre tooltip yönünü değiştir. */
.feature-card:first-child .feature-card-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0) translateY(8px);
}

.feature-card:first-child:hover .feature-card-tooltip,
.feature-card:first-child.is-active .feature-card-tooltip {
    transform: translateX(0) translateY(0);
}

.feature-card:last-child .feature-card-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
}

.feature-card:last-child:hover .feature-card-tooltip,
.feature-card:last-child.is-active .feature-card-tooltip {
    transform: translateX(0) translateY(0);
}


/* ---------- 16b. FEATURE CARDS — content scale ---------------------------- */
/* stylesheet.css: ≤1200 sadece tooltip, ≤768 2-col layout.
   Gap: ≤1199 5-col'da content cramped, ≤991 daha, ≤374 1-col fallback. */
@media (max-width: 1199.98px) {
    .feature-cards {
        padding: 90px 0 0 0;
    }

    .feature-cards-row {
        gap: 16px;
    }

    .feature-card-inner {
        padding: 22px 14px 18px;
    }

    .feature-card-title {
        font-size: 20px;
    }

    .feature-card-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .feature-cards {
        padding: 70px 0 0 0;
    }

    .feature-card-inner {
        padding: 20px 12px 16px;
        min-height: 170px;
    }

    .feature-card-title {
        font-size: 19px;
    }

    .feature-card-subtitle {
        font-size: 15px;
    }
}

@media (max-width: 374.98px) {
    .feature-cards {
        padding: 50px 0 0 0;
    }

    .feature-cards-row {
        gap: 10px;
    }

    .feature-card {
        width: 100%;
        max-width: 260px;
    }

    .feature-card-inner {
        min-height: 140px;
        padding: 16px 12px 14px;
    }

    .feature-card-title {
        font-size: 16px;
    }

    .feature-card-subtitle {
        font-size: 13px;
        margin-top: 6px;
    }

    .feature-card-tooltip {
        min-width: 220px;
        font-size: 13px;
        padding: 10px 14px;
    }
}


/* ---------- 16c. TIMER (package-page-header içinde) ---------------------- */
/* stylesheet.css'te hiç responsive yok. Mobilde tipografi scale. */
@media (max-width: 767.98px) {
    .package-page-header .page-header-content .timer {
        margin-top: 20px;
    }

    .package-page-header .page-header-content .timer .timer-header {
        font-size: 18px;
        padding: 8px 0;
    }

    .package-page-header .page-header-content .timer .timer-body {
        padding: 12px;
    }

    .package-page-header .page-header-content .timer .timer-body .timer-col {
        padding-right: 10px;
        margin-right: 6px;
    }

    .package-page-header .page-header-content .timer .timer-body .timer-col::after {
        font-size: 18px;
    }

    .package-page-header .page-header-content .timer-text {
        font-size: 14px;
    }
}

@media (max-width: 374.98px) {
    .package-page-header .page-header-content .timer .timer-header {
        font-size: 16px;
    }

    .package-page-header .page-header-content .timer .timer-body .timer-col {
        padding-right: 6px;
        margin-right: 4px;
    }

    .package-page-header .page-header-content .timer-text {
        font-size: 13px;
    }
}


/* ---------- 16d. PACKAGE PAGE CONTENT (PageContent.php) ------------------ */
/* stylesheet.css:9275 SIFIR RESPONSIVE — kritik padding 160/0/110 + font'lar
   mobilde ezilmez. Full scale kademeli uygulanır. */
@media (max-width: 1199.98px) {
    .package-page-content {
        padding: 140px 0 90px 0;
    }

    .package-page-content h2,
    .package-page-content-title {
        font-size: 30px;
        margin-bottom: 28px;
    }

    .package-page-content h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .package-page-content p,
    .package-page-content-description {
        font-size: 17px;
        margin-bottom: 36px;
    }

    .package-page-content ul,
    .package-page-content ol {
        font-size: 17px;
    }
}

@media (max-width: 991.98px) {
    .package-page-content {
        padding: 100px 0 70px 0;
    }

    .package-page-content h2,
    .package-page-content-title {
        font-size: 28px;
        margin-bottom: 22px;
    }

    .package-page-content h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .package-page-content p,
    .package-page-content-description {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .package-page-content ul,
    .package-page-content ol {
        font-size: 16px;
        padding-left: 32px;
    }
}

@media (max-width: 767.98px) {
    .package-page-content {
        padding: 70px 0 50px 0;
    }

    .package-page-content h2,
    .package-page-content-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .package-page-content h3 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .package-page-content p,
    .package-page-content-description {
        font-size: 15px;
        margin-bottom: 22px;
        line-height: 1.6;
    }

    .package-page-content ul,
    .package-page-content ol {
        font-size: 15px;
        padding-left: 26px;
        line-height: 1.6;
    }
}

@media (max-width: 575.98px) {
    .package-page-content {
        padding: 50px 0 40px 0;
    }

    .package-page-content h2,
    .package-page-content-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .package-page-content h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .package-page-content p,
    .package-page-content-description {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .package-page-content ul,
    .package-page-content ol {
        font-size: 14px;
        padding-left: 22px;
    }
}

@media (max-width: 374.98px) {
    .package-page-content {
        padding: 40px 0 30px 0;
    }

    .package-page-content h2,
    .package-page-content-title {
        font-size: 18px;
    }

    .package-page-content h3 {
        font-size: 16px;
    }

    .package-page-content p,
    .package-page-content-description {
        font-size: 13px;
    }

    .package-page-content ul,
    .package-page-content ol {
        font-size: 13px;
        padding-left: 18px;
    }
}


/* ==========================================================================
   17. FİYAT TEKLİFİ (Offer — FiyatTeklifi/Index.php)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/FiyatTeklifi/Index.php
     - stylesheet.css satır 4662-4697 (offer-page-content h1/h2/h3/p)
     - stylesheet.css satır 6748-6781 (offer-page-content, offer-form, form-title)
     - stylesheet.css satır 9509 (offer-page page-wrapper)
     - responsive.css satır 345 (≤992 offer-form max-width 40%)
     - responsive.css satır 441, 509, 526-533 (≤768 h1/h2/p, offer-form
       button width 100%)
     - responsive.css satır 1166-1180 (≤768 offer-container flex column —
       markup'ta YOK dead rule; offer-form max-width 100%; offer-page-content
       padding)
     - responsive.css satır 1428/1543/1549 (≤500/390/350 form-title)

   Yapı (contact-page ile çok benzer ama offer-page):
     .page.offer-page
       .container
         .page-wrapper (bg #fff, radius 20, shadow, padding 26/30, flex row)
           .page-content.offer-page-content.contact-page-content (sol)
           .form.contact-form.offer-form (sağ, flex 0 0 50%, bg #fafafa)
             h2.form-title
             inputs
             btnOffer.green-btn-3 (yeşil #2bb528)

   Kritik sorunlar:
     (A) .page-wrapper flex row kalıyor mobilde — contact ile aynı
         override gerek (column stack).
     (B) .offer-form { flex: 0 0 50% } — responsive.css max-width 100%
         etse bile flex-basis 50% constrain ediyor. ≤767'de flex 0 0 100%
         override şart.
     (C) form-title 22 default → ≤500 18. Gap 501-767.
     (D) .green-btn-3 font 20 / line-height 41 scale yok.

   Dokunulmayanlar:
     - #2bb528 yeşil button (hover #000), #1a1a1a text, #fafafa form bg
     - page-wrapper shadow + radius 20
     - Form input stilleri
     - responsive.css'te mevcut h1/h2/p scale (kabul ediyoruz)
   ========================================================================== */

/* --- Tablet yatay: ≤1199.98px -------------------------------------------- */
@media (max-width: 1199.98px) {
    .offer-page .page-wrapper {
        padding: 24px 24px;
    }

    .offer-page .offer-form,
    .offer-page .offer-form.offer-form {
        padding: 28px 36px;
    }

    .offer-page .offer-form .form-title {
        font-size: 21px;
    }
}

/* --- Tablet dikey: ≤991.98px --------------------------------------------- */
/*
   responsive.css:345 `.offer-form { max-width: 40% }` override — 50%'ye
   çıkarıyoruz (daha dengeli).
*/
@media (max-width: 991.98px) {
    .offer-page .page-wrapper {
        padding: 22px 22px;
    }

    .offer-page .offer-page-content {
        padding: 0 20px 0 0;
    }

    .offer-page .form.offer-form {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 24px 28px;
    }

    .offer-page .offer-form .form-title {
        font-size: 20px;
    }

    /* Green-btn-3 tablet scale — button.css default 20 line 41 */
    .offer-page .btnOffer.green-btn-3,
    .offer-page .green-btn-3 {
        font-size: 18px;
        line-height: 40px;
    }
}

/* --- Mobil: ≤767.98px ---------------------------------------------------- */
/*
   KRİTİK: page-wrapper column stack + offer-form flex:0 0 100% override.
   responsive.css:1174 max-width 100% yapıyor ama flex-basis 50% hala
   constrain ediyordu.
*/
@media (max-width: 767.98px) {
    .offer-page .page-wrapper {
        flex-direction: column;
        padding: 20px 18px;
    }

    .offer-page .offer-page-content {
        padding: 0 0 20px 0;
    }

    /* flex-basis override — form tam genişlik */
    .offer-page .form.offer-form,
    .offer-page .offer-form {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 22px 18px;
    }

    .offer-page .offer-form .form-title {
        font-size: 19px;
        margin-bottom: 16px;
    }

    /* Green button — responsive.css zaten width:100% yapıyor.
       Font ve line-height ince ayar. */
    .offer-page .btnOffer.green-btn-3,
    .offer-page .green-btn-3 {
        font-size: 17px;
        line-height: 42px;
        border-radius: 10px;
    }
}

/* --- Telefon: ≤575.98px -------------------------------------------------- */
@media (max-width: 575.98px) {
    .offer-page .page-wrapper {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .offer-page .form.offer-form,
    .offer-page .offer-form {
        padding: 18px 14px;
        border-radius: 10px;
    }

    .offer-page .offer-form .form-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .offer-page .btnOffer.green-btn-3,
    .offer-page .green-btn-3 {
        font-size: 16px;
        line-height: 40px;
    }
}

/* --- Çok küçük telefon: ≤374.98px ---------------------------------------- */
@media (max-width: 374.98px) {
    .offer-page .page-wrapper {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .offer-page .form.offer-form,
    .offer-page .offer-form {
        padding: 16px 12px;
    }

    .offer-page .offer-form .form-title {
        font-size: 16px;
    }

    .offer-page .btnOffer.green-btn-3,
    .offer-page .green-btn-3 {
        font-size: 15px;
        line-height: 38px;
    }
}


/* ==========================================================================
   18. CUSTOM-PAGE-CONTENT TEXT — DATA TABLE + H1 (DB'den gelen HTML)
   --------------------------------------------------------------------------
   Örnek içerik: Banka Bilgilerimiz sayfası — .custom-page-content__text
   içinde table + h1. stylesheet.css'te bu tabloya özel kural yok, CKEditor
   gibi editörlerden gelen inline style'lı markup.

   Strateji:
     - ≥768: Default 2-col tablo, inline style'lar (font-size:20 span)
       korunur (desktop'ta intended look).
     - 576-767: Padding sıkı + IBAN gibi uzun string için word-break.
     - ≤575: KART MODU — thead gizli, her tr ayrı kart, td'ler alt alta.
       İlk td (bank adı) vurgu arkaplanı.

   Dokunulmayanlar:
     - Tablo içindeki inline style="font-size:20" (editör tercihi)
     - İçerik metni (strong, br, span)
     - .custom-page-content__text p için section 12'deki scale (zaten var)
   ========================================================================== */

/* ---------- 18a. H1 inside custom-page-content__text --------------------- */
/*
   stylesheet.css'te bu scope'ta h1 için kural yok — browser default
   ~32px. Mobilde kademeli azalt.
*/
@media (max-width: 991.98px) {
    .custom-page-content__text h1 {
        font-size: 26px;
    }
}

@media (max-width: 767.98px) {
    .custom-page-content__text h1 {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

@media (max-width: 575.98px) {
    .custom-page-content__text h1 {
        font-size: 20px;
        margin-bottom: 12px;
    }
}

@media (max-width: 374.98px) {
    .custom-page-content__text h1 {
        font-size: 18px;
    }
}


/* ---------- 18b. TABLE (data tables like Banka Bilgileri) ---------------- */
/*
   Base güvence — cellpadding HTML attr'ı yerine CSS ile tutarlı padding,
   border-collapse ile temiz çizgiler.
*/
.custom-page-content__text table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px;
}

.custom-page-content__text th,
.custom-page-content__text td {
    text-align: left;
    border: 1px solid #e0e0e0;
    padding: 12px 14px;
    vertical-align: top;
}

.custom-page-content__text thead th {
    background: #f5f5f5;
    font-weight: 700;
    color: #1e1e1e;
}

/* --- Tablet dikey: ≤991.98px ------------------------------------------- */
@media (max-width: 991.98px) {
    .custom-page-content__text th,
    .custom-page-content__text td {
        padding: 10px 12px;
    }
}

/* --- Mobil: ≤767.98px --------------------------------------------------- */
@media (max-width: 767.98px) {
    .custom-page-content__text th,
    .custom-page-content__text td {
        padding: 10px;
        font-size: 14px;
    }

    /* IBAN gibi uzun aralıksız string'ler için word-break güvencesi */
    .custom-page-content__text td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Inline font-size:20 span'ı (bank adı) mobilde biraz küçül */
    .custom-page-content__text td span[style*="font-size"] {
        font-size: 17px !important;
    }
}

/* --- Telefon: ≤575.98px (KART MODU) ------------------------------------- */
/*
   Tablo → her tr bir kart. thead gizli (screen reader için korunur mu
   tartışılır, ama görsel temizlik için display:none). td'ler block, ilk
   td (bank adı) vurgu arkaplanı ile "kart başlığı" gibi.
*/
@media (max-width: 575.98px) {
    .custom-page-content__text table,
    .custom-page-content__text thead,
    .custom-page-content__text tbody,
    .custom-page-content__text tr,
    .custom-page-content__text th,
    .custom-page-content__text td {
        display: block;
        width: 100%;
    }

    /* thead gizle — tek kolonlu cards için label gereksiz (bank adı zaten
       ilk td'de vurgulu) */
    .custom-page-content__text thead {
        display: none;
    }

    /* Her tr bir kart */
    .custom-page-content__text tr {
        margin-bottom: 14px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }

    /* td block — border zaten tr'de, iç td'lerde sadece alt ayıracı */
    .custom-page-content__text td {
        border: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 12px 14px;
    }

    .custom-page-content__text tr td:last-child {
        border-bottom: none;
    }

    /* İlk td (bank adı) kart başlığı gibi — arkaplan vurgu */
    .custom-page-content__text tr td:first-child {
        background: #f5f5f5;
        padding: 10px 14px;
    }

    /* Bank adı span'ı — inline font-size:20 korunur ama biraz dengele */
    .custom-page-content__text td span[style*="font-size"] {
        font-size: 17px !important;
    }
}

/* --- Çok küçük telefon: ≤374.98px -------------------------------------- */
@media (max-width: 374.98px) {
    .custom-page-content__text td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .custom-page-content__text tr td:first-child {
        padding: 9px 12px;
    }

    .custom-page-content__text td span[style*="font-size"] {
        font-size: 16px !important;
    }
}


/* ==========================================================================
   19. SEO / BLOG (Seo/Index.php list + Seo/Detail.php)
   --------------------------------------------------------------------------
   İlgili dosyalar:
     - app/areas/ui/view/Seo/Index.php (list)
     - app/areas/ui/view/Seo/Detail.php (detail)
     - stylesheet.css 4605-5200 (seo-page, seo-page-content, h1/h2/h3/p,
       post-detail, sub-links, post-review, comments)
     - stylesheet.css 5109-5162 (seo-page banner sidebar)
     - stylesheet.css 9644-9745 (seo-page-content-list + cards)
     - stylesheet.css 9755-9773 (.back link)
     - responsive.css'te kapsamlı: ≤768 pad, h1 24, h2 22, p 16,
       container column, banner hide, ≤500 form-title, vs.

   Mevcut gap'ler (responsive.css dolmadığı yerler):
     (A) ≤992-1199 aralığı — seo-page-content padding, h1/h2/h3 scale YOK
     (B) List cards (.seo-page-content-list-item-*) — padding/title/text
         mobilde scale yok (sadece grid 2-col→1-col @600 var)
     (C) .back link — font/margin scale yok
     (D) h3 (sub-title) scale yok (≤768 sadece ana header'lar)

   Dokunulmayanlar:
     - Renkler (beyaz kart, #ffa200 back link, #602f9d hover,
       #9441e5→#fe701a similar gradient, gri bg #f5f7f8)
     - Card shadow + radius (12, 20)
     - Hover animations (translateY -4, scale 1.05, gradient opacity)
     - responsive.css'te mevcut ≤768 kuralları (container column, banner
       hide, h1/h2/p scale) — üzerine gitmiyoruz
   ========================================================================== */

/* ---------- 19a. SEO-PAGE-CONTENT wrapper padding (gap 992-1199) --------- */
@media (max-width: 1199.98px) {
    .seo-page .seo-page-content {
        padding: calc(40px - 1rem) 40px 36px 40px;
    }
}

@media (max-width: 991.98px) {
    .seo-page .seo-page-content {
        padding: calc(30px - 1rem) 28px 28px 28px;
        border-radius: 16px;
    }
}


/* ---------- 19b. HEADINGS scale (gap 992-1199) ---------------------------- */
@media (max-width: 1199.98px) {
    .seo-page .seo-page-content h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .seo-page .seo-page-content h2 {
        font-size: 19px;
    }

    .seo-page-content h3 {
        font-size: 24px;
    }
}

@media (max-width: 991.98px) {
    .seo-page .seo-page-content h1 {
        font-size: 26px;
    }

    .seo-page-content h3 {
        font-size: 22px;
    }
}

/* h3 ≤768 scale (responsive.css h1/h2 ama h3 boş bırakmış) */
@media (max-width: 767.98px) {
    .seo-page-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 575.98px) {
    .seo-page .seo-page-content h1 {
        font-size: 22px;
    }

    .seo-page-content h3 {
        font-size: 18px;
    }
}

@media (max-width: 374.98px) {
    .seo-page .seo-page-content h1 {
        font-size: 20px;
    }

    .seo-page-content h3 {
        font-size: 17px;
    }
}


/* ---------- 19c. SEO-PAGE-CONTENT-LIST cards (LIST page) ---------------- */
/*
   stylesheet.css 2-col grid default, ≤1024 2-col (aynı), ≤600 1-col.
   Kart içi padding/font scale yok — mobilde ekliyoruz.
*/
@media (max-width: 991.98px) {
    .seo-page-content-list {
        padding: 32px 0;
    }

    .seo-page-content-list-item-content {
        padding: 18px 20px 20px;
        gap: 8px;
    }

    .seo-page-content-list-item-title {
        font-size: 16px;
    }

    .seo-page-content-list-item-text {
        font-size: 13.5px;
    }
}

@media (max-width: 767.98px) {
    .seo-page-content-list-item-content {
        padding: 16px 18px 18px;
    }

    .seo-page-content-list-item-title {
        font-size: 15px;
    }

    .seo-page-content-list-item-text {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 374.98px) {
    .seo-page-content-list {
        padding: 20px 0;
        gap: 12px;
    }

    .seo-page-content-list-item-content {
        padding: 14px 14px 14px;
    }

    .seo-page-content-list-item-title {
        font-size: 14px;
    }

    .seo-page-content-list-item-text {
        font-size: 12.5px;
    }

    .seo-page-content-list-item-btn {
        font-size: 12px;
    }
}


/* ---------- 19d. .back link (DETAIL page) --------------------------------- */
@media (max-width: 767.98px) {
    .seo-page .seo-page-content .back {
        font-size: 13px;
        margin-bottom: 14px;
        gap: 8px;
    }
}

@media (max-width: 374.98px) {
    .seo-page .seo-page-content .back {
        font-size: 12px;
        margin-bottom: 10px;
    }
}


/* ---------- 19e. SEO-SIMILAR-CONTENTS (banner hide ≤768, deskten sadece) - */
/*
   Banner responsive.css'te ≤768'de `display: none !important`. Yani
   similar-contents mobilde GÖRÜNMEZ. Küçük ekran scale gereksiz.
   Sadece 992-1199 aralığında desktop'ta sidebar daralıyorsa ufak ayar:
*/
@media (max-width: 1199.98px) {
    .seo-similar-contents a {
        font-size: 14px;
        padding: 14px 12px;
    }

    .seo-similar-contents ul {
        gap: 7px;
    }
}