/* ==========================================================================
   ASAN — TEMA GENELİ TASARIM KATMANI
   --------------------------------------------------------------------------
   Tasarım yönü: "Trust & Authority" (kurumsal güven)
     Belgelendirme sektöründe satın alma kararı GÜVEN ile verilir. Bu yüzden
     gösterişli efekt yerine; net hiyerarşi, sakin kurumsal renk, ölçülebilir
     bilgi (yıl, firma sayısı, akreditasyon) ve okunaklı tipografi önceliklidir.

   Tipografi: Lexend (başlık) + Source Sans 3 (gövde)
     Lexend okunabilirlik araştırmaları için tasarlanmış, kurumsal ama
     karaktersiz olmayan bir aile. İkisi de latin-ext kapsar -> Türkçe tam.

   Bu dosya EN SON yüklenir ve tema dosyalarını değiştirmeden görünümü kurar.
   Devre dışı bırakmak için: includes/custom/asan-tema.php içinde
   'asan-tema' enqueue satırını yoruma alın.
   ========================================================================== */

:root {
    /* ── Marka ──────────────────────────────────────────────── */
    --asan-marka:        #006EB5;   /* mevcut kurumsal mavi — korundu */
    --asan-marka-koyu:   #005490;
    --asan-marka-acik:   #2E90D9;
    --asan-marka-soluk:  #E8F2FA;

    /* ── Nötr ölçek (kurumsal, mavimsi gri) ─────────────────── */
    --asan-lacivert:     #0F2138;
    --asan-metin:        #1B2B3F;
    --asan-metin-orta:   #46586E;
    --asan-metin-soluk:  #6B7C91;
    --asan-cizgi:        #E3E9F0;
    --asan-cizgi-koyu:   #CBD6E2;
    --asan-zemin:        #F6F9FC;
    --asan-beyaz:        #FFFFFF;

    /* ── Destek renkleri ────────────────────────────────────── */
    --asan-yesil:        #1B9E5A;
    --asan-wa:           #25D366;
    --asan-uyari:        #B45309;

    /* ── Tipografi ──────────────────────────────────────────── */
    --asan-font-baslik: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --asan-font-govde:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Ölçü sistemi ───────────────────────────────────────── */
    --asan-r-sm: 8px;
    --asan-r:    12px;
    --asan-r-lg: 16px;
    --asan-golge-sm: 0 1px 2px rgba(15,33,56,.06), 0 2px 8px rgba(15,33,56,.05);
    --asan-golge:    0 2px 6px rgba(15,33,56,.06), 0 8px 24px rgba(15,33,56,.08);
    --asan-golge-lg: 0 8px 20px rgba(15,33,56,.08), 0 24px 48px rgba(15,33,56,.12);
    --asan-gecis: 200ms cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   1. TEMEL TİPOGRAFİ
   Not: Tema seçenekleri (Redux) başlık boyutlarını "!important" ile basıyor.
   Bu yüzden burada da !important + bir tık yüksek özgüllük kullanılır.
   ========================================================================== */

html body,
body {
    font-family: var(--asan-font-govde);
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--asan-metin-orta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html body p { line-height: 1.75; margin-bottom: 1.1em; }

/* Okunabilir satır uzunluğu — içerik alanlarında 65-75 karakter */
.entry-content p,
.blog_dtl_content p,
.page_content p { max-width: 72ch; }

/* ── Başlıklar ──────────────────────────────────────────────────────────
   ÖNEMLİ DERS: Buraya önce global font-size !important kuralları yazılmıştı.
   Tema ve Elementor bileşenlerinin bir kısmı SABİT GENİŞLİKLİ kutulara sahip
   (sayaç kartları, video kartı, fun-facts). Yazıyı büyütünce metin kutudan
   taşıp kelime ortasından bölünüyordu: "BAŞARILI BELGELEN/DİRME",
   "Belgelendirm/e". Bu yüzden GLOBAL BOYUT ARTIK DEĞİŞTİRİLMİYOR.

   Değişen tek şey yazı AİLESİ ve Türkçe aksanlara uygun satır aralığı.
   Boyut yalnızca kapsayıcısını kendimizin kurduğu yerlerde ayarlanır
   (sayfa başlığı, blog kartı, hizmet kartı, bölüm başlığı).

   .elementor-heading-title BİLEREK DIŞARIDA: hero'daki el yazısı başlık
   ve Elementor'da özel font seçilmiş bloklar korunsun.
   ---------------------------------------------------------------------- */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    font-family: var(--asan-font-baslik) !important;
    color: var(--asan-lacivert);
    letter-spacing: -.015em;
}

/* Türkçe aksan payı — büyük "İ" noktası ve "ğ ü ö ş ç" işaretleri sığsın.
   Yalnızca satır aralığı; boyuta dokunulmuyor, taşma riski yok. */
html body h1 { line-height: 1.24; }
html body h2 { line-height: 1.28; }
html body h3 { line-height: 1.36; }
html body h4 { line-height: 1.42; }
html body h5,
html body h6 { line-height: 1.5; }

/* Uzun Türkçe kelimeler dar kutularda kelime ortasından bölünmesin */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .serheading, html body .title_sections .title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Tema her h2'nin altına mutlak konumlu dekoratif çubuk basıyordu
   (h2::after — bottom:-8px). Alt satıra biniyor ve rastgele yerlerde
   beliriyordu. Sadece bölüm başlıklarında, kontrollü şekilde bırakıldı. */
html body h2::after,
html body h2::before { content: none !important; display: none !important; }

/* ── Üst etiket (eyebrow) ───────────────────────────────────────────────
   "Aşan Danışmanlık" gibi üst etiketler mavi + ALTI ÇİZİLİ basılıyordu;
   link sanılıyordu. Link değiller — etiket görünümüne alındı. */
html body .before_title,
html body .title_sections .before_title,
html body .sub_title,
html body .sub-title,
html body .subtitle {
    font-family: var(--asan-font-baslik) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--asan-marka) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    display: inline-block;
    margin-bottom: 10px;
}

/* Bağlantılar */
html body a { color: var(--asan-marka); transition: color var(--asan-gecis); }
html body a:hover { color: var(--asan-marka-koyu); }

/* ==========================================================================
   2. ÜST BAR
   --------------------------------------------------------------------------
   DİKKAT: Temanın kendi yerleşimi KORUNUR, sadece renk/ölçü değişir.
   Tema şu yapıyı kullanıyor:
       .top_inner            -> display:table
       .common_css           -> display:table-cell; line-height:50px
       .contntent            -> display:inline-block; margin:0 25px
       .contntent i          -> position:absolute; left:-25px   (ikon SOL MARJDA durur)
   Daha önce buraya flex + margin:0 uygulanmıştı; ikonlar sol marj yok olunca
   metnin ÜSTÜNE düşüyordu ("İstanbul / Mer⌖z", "com☎"). Layout'a dokunulmuyor.
   ========================================================================== */

.top_bar,
.top_bar.style_two {
    background: var(--asan-lacivert) !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 6px 0 !important;
}
.top_bar .top_inner .common_css { line-height: 42px !important; }

/* Temanın ikon yerleşimi marja bağımlıydı (i { left:-25px }, .contntent { margin:0 25px }).
   Marj herhangi bir sebeple değişirse ikon metnin üstüne düşüyordu.
   İkon artık öğenin KENDİ padding'ine yerleşir — marjdan tamamen bağımsız. */
.top_bar .top_inner .common_css .contntent {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 18px !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    vertical-align: middle !important;
}
.top_bar .top_inner .common_css .contntent:last-child { margin-right: 0 !important; }

/* İkonu olan öğelerde ikon için yer aç */
.top_bar .top_inner .common_css .contntent.address,
.top_bar .top_inner .common_css .contntent.email,
.top_bar .top_inner .common_css .contntent.gsm { padding-left: 22px !important; }

.top_bar .top_inner .common_css .contntent.address > i,
.top_bar .top_inner .common_css .contntent.email > i,
.top_bar .top_inner .common_css .contntent.gsm > i {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    margin: 0 !important;
    line-height: 1 !important;
}

/* Yalnızca tipografi ve renk */
.top_bar .top_inner .common_css .contntent .text,
.top_bar .top_inner .common_css .contntent .text a,
.top_bar .top_inner .common_css .contntent .text span {
    font-family: var(--asan-font-govde) !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,.82) !important;
}
.top_bar .top_inner .common_css .contntent .text a:hover { color: #fff !important; }
.top_bar .top_inner .common_css .contntent i {
    color: var(--asan-marka-acik) !important;
    font-size: 14px !important;
}

/* Slogan — header.php'den taşındı. İkonu yok, bu yüzden sol marjı gerekmiyor. */
.top_bar .asan-ust-slogan { margin-left: 0 !important; }
.top_bar .asan-ust-slogan .text span {
    color: rgba(255,255,255,.55) !important;
    font-size: 13px !important;
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,.13);
}

/* WhatsApp CTA — bardaki diğer öğelerle aynı ölçekte, baskın değil */
.top_bar .asan-ust-wa { margin-left: 0 !important; }
.top_bar .asan-ust-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(37,211,102,.55);
    color: #46E07F !important;
    font-family: var(--asan-font-baslik) !important;
    font-weight: 600;
    font-size: 12.5px !important;
    line-height: 1 !important;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background-color var(--asan-gecis), color var(--asan-gecis), border-color var(--asan-gecis);
}
.top_bar .asan-ust-wa-link:hover {
    background: var(--asan-wa);
    border-color: var(--asan-wa);
    color: #fff !important;
}

/* Sosyal ikonlar — tema onları .media .text a olarak basıyor */
.top_bar .top_inner .common_css .media .text a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.85) !important;
    margin-right: 6px !important;
    transition: background-color var(--asan-gecis), color var(--asan-gecis);
}
.top_bar .top_inner .common_css .media .text a:hover { background: var(--asan-marka) !important; color: #fff !important; }

/* Mesai bilgisi — buton gibi değil, bilgi rozeti gibi */
.top_bar.style_two .top_inner .common_css .cbutton a {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.75) !important;
    font-family: var(--asan-font-govde) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    min-height: 30px !important;
    line-height: 28px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    text-transform: none !important;
    cursor: default;
    pointer-events: none;
}

/* Dar ekranda tema zaten bloklara dönüştürüyor; slogan yer kaplamasın */
/* Slogan bar'ı iki satıra düşürmesin — dar ekranda gizlenir.
   Bilgi kaybı değil: aynı ifade sayfa başlığı ve meta açıklamada da geçiyor. */
@media (max-width: 1399px) {
    /* Özgüllük NOT: yukarıdaki .top_bar .top_inner .common_css .contntent kuralı
       0,4,0 ağırlığında ve !important taşıyor. Gizleme kuralı da aynı zincirde
       yazılmazsa kaybediyor. */
    .top_bar .top_inner .common_css .contntent.asan-ust-slogan { display: none !important; }
}
@media (max-width: 991px) {
    .top_bar .top_inner .common_css { line-height: normal !important; }
    .top_bar .asan-ust-wa-link { font-size: 12px !important; padding: 7px 12px; }
}

/* ==========================================================================
   3. ANA HEADER VE MENÜ
   ========================================================================== */

/* NOT: Header arka planına dokunulmuyor. Tema, sayfa başlığı görselinin
   üzerine şeffaf header bindiriyor; zorla beyaz yapmak bu tasarımı bozar. */

/* Menü tipografisi */
html body .main-menu .navigation > li > a,
html body .navbar-nav > li > a {
    font-family: var(--asan-font-baslik) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    color: var(--asan-lacivert) !important;
    transition: color var(--asan-gecis);
}
html body .main-menu .navigation > li > a:hover,
html body .main-menu .navigation > li.current-menu-item > a,
html body .main-menu .navigation > li.current_page_item > a {
    color: var(--asan-marka) !important;
}

/* Aktif sayfa göstergesi */
.main-menu .navigation > li { position: relative; }
.main-menu .navigation > li.current-menu-item::after,
.main-menu .navigation > li.current_page_item::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--asan-marka);
}

/* Açılır menüler */
html body .main-menu .navigation li .dropdown-menu,
html body .main-menu .navigation li ul {
    border: 1px solid var(--asan-cizgi) !important;
    border-radius: var(--asan-r) !important;
    box-shadow: var(--asan-golge-lg) !important;
    padding: 8px !important;
    overflow: hidden;
}
html body .main-menu .navigation li ul li a {
    font-family: var(--asan-font-govde) !important;
    font-size: 14.5px !important;
    border-radius: var(--asan-r-sm);
    padding: 9px 12px !important;
    color: var(--asan-metin) !important;
    border-bottom: 0 !important;
    transition: background-color var(--asan-gecis), color var(--asan-gecis);
}
html body .main-menu .navigation li ul li a:hover {
    background: var(--asan-marka-soluk) !important;
    color: var(--asan-marka) !important;
    padding-left: 16px !important;
}

/* Header'daki "Bizi Arayın" telefon bloğu */
.header_contnet_info .content .title,
.call_us .title { font-size: 12.5px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--asan-metin-soluk) !important; }
.header_contnet_info .content a,
.call_us a { font-family: var(--asan-font-baslik) !important; font-weight: 700 !important; color: var(--asan-lacivert) !important; }
.header_contnet_info .content a:hover,
.call_us a:hover { color: var(--asan-marka) !important; }

/* ==========================================================================
   4. SAYFA BAŞLIĞI BANNER'I
   Başlık artık semantik olarak H1 (SEO düzeltmesi). Görsel boyut, tema
   seçeneğindeki tercihe göre sınıflarla korunur.
   ========================================================================== */

html body .title_page {
    font-family: var(--asan-font-baslik) !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.026em;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 10px;
}
html body .title_page--h2 { font-size: clamp(25px, 2.7vw, 35px) !important; }
html body .title_page--h3 { font-size: clamp(22px, 2.2vw, 29px) !important; }
html body .title_page--h4 { font-size: clamp(20px, 1.8vw, 25px) !important; }
html body .title_page--h5 { font-size: clamp(19px, 1.6vw, 22px) !important; }
html body .title_page--h6 { font-size: clamp(18px, 1.4vw, 20px) !important; }
html body .title_page .extra_tit {
    display: block;
    font-size: 16px !important;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255,255,255,.78) !important;
    margin-top: 10px;
    text-transform: none;
}

/* Ekmek kırıntısı */
.breadcrumbs.creote ul li,
.breadcrumbs.creote ul li a {
    font-family: var(--asan-font-govde) !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.72) !important;
}
.breadcrumbs.creote ul li a:hover { color: #fff !important; }

/* Banner okunabilirliği: görsel üstünde metin kontrastı */
.page_header_content { position: relative; z-index: 2; }
.banner_title_inner { padding: 18px 0; }

/* ==========================================================================
   5. BUTONLAR
   ========================================================================== */

html body .theme-btn,
html body .elementor-button,
html body button[type="submit"],
html body input[type="submit"] {
    font-family: var(--asan-font-baslik) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: -.005em;
    border-radius: var(--asan-r) !important;
    min-height: 46px;              /* dokunma hedefi >= 44px */
    padding: 12px 26px !important;
    transition: background-color var(--asan-gecis), box-shadow var(--asan-gecis), transform var(--asan-gecis) !important;
}
html body .theme-btn:hover,
html body .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,110,181,.28);
}
html body .theme-btn.one,
html body .elementor-button {
    background: var(--asan-marka) !important;
    color: #fff !important;
    border-color: var(--asan-marka) !important;
}

/* ==========================================================================
   6. BÖLÜM VE KARTLAR
   ========================================================================== */

.widgets_grid_box,
.blog_grid_box,
.service_box.style_one,
.project_box,
.team_box {
    border-radius: var(--asan-r-lg);
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.blog_grid_box:hover,
.service_box.style_one:hover { transform: translateY(-3px); box-shadow: var(--asan-golge-lg); }

/* Kenar çubuğu bileşenleri */
.widgets_grid_box {
    background: var(--asan-beyaz);
    border: 1px solid var(--asan-cizgi);
    box-shadow: var(--asan-golge-sm);
}
html body .widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em;
    color: var(--asan-lacivert) !important;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--asan-cizgi);
    position: relative;
}
html body .widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 44px; height: 2px;
    background: var(--asan-marka);
}

/* ==========================================================================
   7. FORMLAR
   ========================================================================== */

html body input[type="text"], html body input[type="email"],
html body input[type="tel"],  html body input[type="url"],
html body input[type="search"], html body input[type="password"],
html body input[type="number"], html body select, html body textarea {
    font-family: var(--asan-font-govde) !important;
    font-size: 16px !important;      /* iOS'ta odakta zoom olmasın */
    color: var(--asan-metin) !important;
    background: var(--asan-beyaz);
    border: 1.5px solid var(--asan-cizgi-koyu) !important;
    border-radius: var(--asan-r) !important;
    min-height: 46px;
    padding: 11px 14px !important;
    transition: border-color var(--asan-gecis), box-shadow var(--asan-gecis);
}
html body input:focus, html body select:focus, html body textarea:focus {
    outline: none;
    border-color: var(--asan-marka) !important;
    box-shadow: 0 0 0 3px rgba(0,110,181,.14) !important;
}
html body ::placeholder { color: var(--asan-metin-soluk); opacity: 1; }
/* Etiketler yalnızca kendi kurduğumuz formlarda ölçeklenir; Elementor/eklenti
   formlarının kendi tipografisine dokunulmaz. */
html body .asan-kmp label,
html body .wpcf7 label,
html body .comment-form label,
html body .search-form label { font-family: var(--asan-font-baslik); font-size: 14px; font-weight: 600; color: var(--asan-metin); }

/* Yazar kutusundaki etiket (H6'dan SPAN'a çevrildi) */
.asan-meta-label {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--asan-marka);
    margin-bottom: 4px;
}

/* ==========================================================================
   8. ERİŞİLEBİLİRLİK
   ========================================================================== */

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible {
    outline: 3px solid var(--asan-marka-acik) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* Koyu zeminlerde odak halkası görünür kalsın */
.top_bar a:focus-visible,
.page_header_content a:focus-visible,
footer a:focus-visible { outline-color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
    html body *, html body *::before, html body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   9. MOBİL
   ========================================================================== */

@media (max-width: 991px) {
    /* NOT: üst barın yerleşimi tema tarafından yönetiliyor (display:table).
       Buraya flex uygulamak ikonların metnin üstüne düşmesine yol açıyordu. */
    html body .title_page { font-size: clamp(24px, 6vw, 32px) !important; }
}

@media (max-width: 640px) {
    html body { font-size: 16px; }
    html body h1 { letter-spacing: -.022em; }
    html body h2 { letter-spacing: -.018em; }
    .top_bar { font-size: 13px; }
    .top_bar .contntent .text, .top_bar .contntent .text a { font-size: 13px; }
    /* Dokunma hedefleri */
    html body .theme-btn, html body .elementor-button { min-height: 48px; width: auto; }
    .top_bar .media .text a { width: 34px; height: 34px; }
}


/* ==========================================================================
   10. BÖLÜM BAŞLIK BLOĞU (creote-title bileşeni)
   Başlık artık semantik H2 (asan-tema.php içindeki filtre ile).
   ========================================================================== */
html body .title_sections .title,
html body .title_all_box .title {
    font-family: var(--asan-font-baslik) !important;
    font-size: clamp(25px, 2.7vw, 35px) !important;
    line-height: 1.26 !important;
    letter-spacing: -.024em;
    font-weight: 800 !important;
    color: var(--asan-lacivert) !important;
    margin: 0 0 14px;
}
html body .title_all_box.dark_color .title { color: var(--asan-lacivert) !important; }
html body .title_all_box.light_color .title,
html body .title_all_box.white_color .title { color: #fff !important; }

/* Üst etiket: mavi + altı çizili -> link sanılıyordu */
html body .before_title {
    font-family: var(--asan-font-baslik) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--asan-marka) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
/* Etiketin önüne kısa bir marka çizgisi — "link" algısını tamamen kırar */
html body .before_title::before {
    content: "";
    width: 22px; height: 2px;
    background: var(--asan-marka);
    border-radius: 2px;
    flex-shrink: 0;
}
html body .title_all_box.light_color .before_title,
html body .title_all_box.white_color .before_title { color: #7FC4F0 !important; }
html body .title_all_box.light_color .before_title::before,
html body .title_all_box.white_color .before_title::before { background: #7FC4F0; }

html body .title_sections p,
html body .title_all_box p { color: var(--asan-metin-orta); max-width: 68ch; }

/* ==========================================================================
   11. BLOG LİSTELEME — modern kart ızgarası
   Sitenin Google'dan en çok trafik alan bölümü. Kartlar özet, kategori,
   okuma süresi ve net bir "devam" eylemi taşır.
   ========================================================================== */

.asan-blog-card-wrap { display: flex !important; margin-bottom: 28px; }

html body .asan-blog-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--asan-beyaz) !important;
    border: 1px solid var(--asan-cizgi) !important;
    border-radius: var(--asan-r-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--asan-golge-sm) !important;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis), border-color var(--asan-gecis);
}
html body .asan-blog-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--asan-marka-acik) !important;
    box-shadow: var(--asan-golge-lg) !important;
}

/* ── Görselli kapak ─────────────────────────────────────────── */
.asan-card-img {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: var(--asan-zemin) !important;
}
.asan-card-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform 500ms cubic-bezier(.4,0,.2,1);
}
.asan-blog-card:hover .asan-card-img img { transform: scale(1.05) !important; }

/* ── Tipografik kapak (özgün görsel yokken) ─────────────────── */
.asan-card-kapak {
    position: relative !important;
    aspect-ratio: 16 / 7 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 140% at 10% 0%, rgba(46,144,217,.35) 0%, rgba(46,144,217,0) 55%),
        linear-gradient(135deg, var(--asan-lacivert) 0%, #143a5e 60%, var(--asan-marka-koyu) 100%) !important;
    overflow: hidden !important;
}
.asan-card-kapak-desen {
    position: absolute !important; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.asan-card-kapak-kod {
    position: relative !important;
    z-index: 1;
    font-family: var(--asan-font-baslik);
    font-size: clamp(20px, 2.4vw, 27px) !important;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff !important;
    text-align: center;
    padding: 0 16px !important;
}

/* Kategori rozeti — her iki kapak tipinde de */
.asan-card-kategori {
    position: absolute !important;
    left: 14px; top: 14px;
    z-index: 2;
    background: rgba(255,255,255,.94) !important;
    color: var(--asan-marka-koyu) !important;
    font-family: var(--asan-font-baslik);
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    backdrop-filter: blur(4px);
}

/* ── Kart gövdesi ───────────────────────────────────────────── */
html body .asan-blog-card .content_box {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    padding: 22px 22px 20px !important;
    background: transparent !important;
}
html body .asan-post-meta {
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
html body .asan-meta-date,
html body .asan-meta-read {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: var(--asan-font-govde);
    font-size: 13px !important;
    font-weight: 500;
    color: var(--asan-metin-soluk) !important;
}
html body .asan-meta-date svg,
html body .asan-meta-read svg { color: var(--asan-marka-acik) !important; flex-shrink: 0; }

html body .asan-blog-card h2.title {
    font-size: 19.5px !important;
    line-height: 1.42 !important;
    letter-spacing: -.018em;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
}
html body .asan-blog-card h2.title a { color: var(--asan-lacivert) !important; }
html body .asan-blog-card:hover h2.title a { color: var(--asan-marka) !important; }

html body .asan-card-ozet {
    font-size: 15px !important;
    line-height: 1.68 !important;
    color: var(--asan-metin-orta) !important;
    margin: 0 0 18px !important;
    flex: 1 1 auto;
}

.asan-card-alt {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--asan-cizgi);
}
.asan-card-devam {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    font-family: var(--asan-font-baslik);
    font-size: 14.5px !important;
    font-weight: 700;
    color: var(--asan-marka) !important;
    transition: gap var(--asan-gecis);
}
.asan-blog-card:hover .asan-card-devam { gap: 12px; }

/* Kartın tamamı tıklanabilir (erişilebilir: gerçek link başlıkta) */
.asan-card-fulllink { position: absolute !important; inset: 0; z-index: 3; }
.asan-blog-card:focus-within { border-color: var(--asan-marka) !important; box-shadow: var(--asan-golge-lg) !important; }

/* ==========================================================================
   12. LİSTELEME İÇİ CTA BANDI
   ========================================================================== */

.asan-liste-cta {
    grid-column: 1 / -1;
    width: 100%;
    margin: 6px 0 34px;
    padding: 30px 34px;
    border-radius: var(--asan-r-lg);
    background:
        radial-gradient(120% 160% at 88% 0%, rgba(46,144,217,.28) 0%, rgba(46,144,217,0) 60%),
        linear-gradient(120deg, var(--asan-lacivert) 0%, #143a5e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    box-shadow: var(--asan-golge);
}
.asan-liste-cta-metin { flex: 1 1 320px; }
.asan-liste-cta-etiket {
    display: inline-block;
    font-family: var(--asan-font-baslik);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #7FC4F0; margin-bottom: 7px;
}
html body .asan-liste-cta h3 {
    font-size: 22px !important;
    line-height: 1.32 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
}
.asan-liste-cta p { margin: 0 !important; color: rgba(255,255,255,.76) !important; font-size: 15px !important; }
.asan-liste-cta-butonlar { display: flex; gap: 11px; flex-wrap: wrap; }
.asan-liste-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    padding: 13px 22px;
    border-radius: var(--asan-r);
    min-height: 46px;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.asan-liste-cta-btn:hover { transform: translateY(-2px); }
.asan-liste-cta-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-liste-cta-ara:hover { background: #EAF3FA; color: var(--asan-marka-koyu) !important; }
.asan-liste-cta-wa { background: var(--asan-wa); color: #fff !important; }
.asan-liste-cta-wa:hover { background: #1EBE5B; color: #fff !important; }

/* ==========================================================================
   13. BLOG DETAY — okuma deneyimi
   ========================================================================== */

.blog_dtl_content,
.single-post .entry-content,
.post_content_box {
    font-size: 17px;
    line-height: 1.82;
    color: var(--asan-metin-orta);
}
.blog_dtl_content > p,
.post_content_box > p { max-width: 70ch; margin-bottom: 1.25em; }

/* İçerik içi başlıklar — okuma akışında net duraklar */
html body .blog_dtl_content h2,
html body .post_content_box h2 {
    font-size: 27px !important;
    line-height: 1.3 !important;
    margin: 2em 0 .7em !important;
    padding-top: .3em;
    position: relative;
}
html body .blog_dtl_content h2::before,
html body .post_content_box h2::before {
    content: "";
    display: block;
    width: 40px; height: 3px;
    background: var(--asan-marka);
    border-radius: 3px;
    margin-bottom: 16px;
}
html body .blog_dtl_content h3,
html body .post_content_box h3 { font-size: 21px !important; margin: 1.7em 0 .6em !important; }
html body .blog_dtl_content h4,
html body .post_content_box h4 { font-size: 18.5px !important; margin: 1.5em 0 .5em !important; }

/* Listeler */
.blog_dtl_content ul li,
.post_content_box ul li { position: relative; padding-left: 26px; margin-bottom: 10px; list-style: none; }
.blog_dtl_content ul li::before,
.post_content_box ul li::before {
    content: "";
    position: absolute; left: 0; top: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--asan-marka);
}
.blog_dtl_content ol,
.post_content_box ol { padding-left: 22px; }
.blog_dtl_content ol li,
.post_content_box ol li { margin-bottom: 10px; padding-left: 6px; }

/* Alıntı */
.blog_dtl_content blockquote,
.post_content_box blockquote {
    margin: 1.8em 0;
    padding: 22px 26px;
    border-left: 4px solid var(--asan-marka);
    border-radius: 0 var(--asan-r) var(--asan-r) 0;
    background: var(--asan-marka-soluk);
    font-size: 18px;
    line-height: 1.7;
    color: var(--asan-lacivert);
}
.blog_dtl_content blockquote p:last-child { margin-bottom: 0; }

/* Tablolar — mobilde yatay kaydırılabilir */
.blog_dtl_content table,
.post_content_box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    margin: 1.6em 0;
}
.blog_dtl_content th,
.post_content_box th {
    background: var(--asan-lacivert);
    color: #fff;
    font-family: var(--asan-font-baslik);
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
}
.blog_dtl_content td,
.post_content_box td { padding: 11px 14px; border-bottom: 1px solid var(--asan-cizgi); }
.blog_dtl_content tr:nth-child(even) td { background: var(--asan-zemin); }

/* İçerik görselleri */
.blog_dtl_content img,
.post_content_box img { border-radius: var(--asan-r); height: auto; }

/* İçerik içi bağlantılar — SEO için iç linkler belirgin olmalı */
.blog_dtl_content a:not(.theme-btn):not([class*="asan-"]),
.post_content_box a:not(.theme-btn):not([class*="asan-"]) {
    color: var(--asan-marka);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 600;
}
.blog_dtl_content a:hover:not(.theme-btn) { color: var(--asan-marka-koyu); text-decoration-thickness: 2px; }

/* ==========================================================================
   14. KENAR ÇUBUĞU — yapışkan CTA kartı
   ========================================================================== */

.asan-yan-cta {
    position: sticky;
    top: 100px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(46,144,217,.3) 0%, rgba(46,144,217,0) 60%),
        linear-gradient(150deg, var(--asan-lacivert) 0%, #143a5e 100%);
    color: #fff;
    border-radius: var(--asan-r-lg);
    padding: 26px 24px;
    box-shadow: var(--asan-golge-lg);
    margin-bottom: 28px;
}
.asan-yan-cta-etiket {
    display: inline-block;
    font-family: var(--asan-font-baslik);
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #7FC4F0; margin-bottom: 8px;
}
html body .asan-yan-cta h3 {
    font-size: 20px !important;
    line-height: 1.32 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
}
.asan-yan-cta p { font-size: 14.5px !important; line-height: 1.6 !important; color: rgba(255,255,255,.76) !important; margin: 0 0 16px !important; }
.asan-yan-cta-fiyat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-left: 3px solid #7FC4F0;
    border-radius: var(--asan-r-sm);
    padding: 11px 14px;
    margin-bottom: 16px;
}
.asan-yan-cta-fiyat span { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.asan-yan-cta-fiyat strong { display: block; font-family: var(--asan-font-baslik); font-size: 22px; font-weight: 800; color: #fff; }
.asan-yan-cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    padding: 13px 18px;
    border-radius: var(--asan-r);
    min-height: 48px;
    margin-bottom: 9px;
    transition: transform var(--asan-gecis), background-color var(--asan-gecis);
}
.asan-yan-cta-btn:hover { transform: translateY(-2px); }
.asan-yan-cta-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-yan-cta-wa  { background: var(--asan-wa); color: #fff !important; }
.asan-yan-cta-not { font-size: 12.5px !important; text-align: center; margin: 10px 0 0 !important; color: rgba(255,255,255,.55) !important; }

/* Kenar çubuğu bileşenleri */
html body .sidebar .widgets_grid_box,
html body .all_side_bar .widgets_grid_box { margin-bottom: 26px; padding: 22px; }

/* ==========================================================================
   15. BLOG RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .asan-yan-cta { position: static; }
    .asan-liste-cta { padding: 26px 22px; }
}
@media (max-width: 640px) {
    html body .asan-blog-card .content_box { padding: 18px 18px 16px !important; }
    html body .asan-blog-card h2.title { font-size: 18px !important; }
    .asan-liste-cta { flex-direction: column; align-items: flex-start; text-align: left; }
    .asan-liste-cta-butonlar { width: 100%; }
    .asan-liste-cta-btn { flex: 1 1 100%; justify-content: center; }
    .blog_dtl_content, .post_content_box { font-size: 16.5px; }
    html body .blog_dtl_content h2, html body .post_content_box h2 { font-size: 23px !important; }
    /* Tablolar taşmasın */
    .blog_dtl_content table, .post_content_box table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ==========================================================================
   16. HİZMET KARTLARI — YALNIZCA style_one
   --------------------------------------------------------------------------
   DİKKAT: creote-service-box-v1 bileşeninin birden fazla stili var.
     style_one   : görselli liste kartı (hizmet sayfaları)  <- burası
     style_three : ikonlu kart (anasayfa) — ikon MUTLAK konumlu, başlık
                   ona yer açan bir üst boşluğa dayanıyor
   Kurallar önce stil ayrımı yapmadan yazılmıştı; style_three'ün üst boşluğu
   ezilince ikon başlığın üstüne biniyordu. Tüm seçiciler .style_one'a
   sabitlendi; diğer stiller temanın kendi tasarımıyla çalışır.
   Hizmet listeleme sayfaları arama motorundan en çok trafik alan
   ikinci bölüm. Kartlar tıklanabilirliği net, taranabilir ve
   eylem çağrısı taşıyacak şekilde yeniden kurgulandı.
   ========================================================================== */

html body .service_box.style_one { margin-bottom: 26px; }

html body .service_box.style_one .service_content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--asan-beyaz);
    border: 1px solid var(--asan-cizgi);
    border-radius: var(--asan-r-lg);
    overflow: hidden;
    box-shadow: var(--asan-golge-sm);
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis), border-color var(--asan-gecis);
}
html body .service_box.style_one:hover .service_content {
    transform: translateY(-4px);
    border-color: var(--asan-marka-acik);
    box-shadow: var(--asan-golge-lg);
}

/* Görsel — sabit oran, kırpma */
/* Tema seçicisi .service_box.style_one .service_content .image.image_fit
   (özgüllük 0,5,0) — buradaki zincir en az onun kadar uzun olmalı. */
html body .service_box.style_one .service_content .image,
html body .service_box.style_one .service_content .image.image_fit,
html body .service_box.style_one .image,
html body .service_box.style_one .image_fit {
    position: relative;
    aspect-ratio: 3 / 2;
    height: auto !important;      /* tema "height:100%" veriyordu */
    width: 100% !important;
    overflow: hidden;
    background: var(--asan-zemin);
    margin: 0 !important;
    border-radius: 0 !important;
}
html body .service_box.style_one .service_content .image.image_fit img,
html body .service_box.style_one .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    display: block;
    transition: transform 500ms cubic-bezier(.4,0,.2,1) !important;
}
/* HOVER — bu kartların görsellerinde YAZI gömülü (ISO/CE kapak grafikleri).
   Zoom, gömülü yazıyı kırpıyor; temanın mavi kayan panelleri de üstünü
   kapatıp okunmaz hale getiriyordu. İkisi de kapatıldı; hover artık sakin:
   kart yükselir, kenarlık ve başlık rengi değişir. */
html body .service_box.style_one:hover .image img,
html body .service_box.style_one .service_content:hover .image img {
    transform: none !important;
}
html body .service_box.style_one .service_content .image.image_fit::before,
html body .service_box.style_one .service_content .image.image_fit::after,
html body .service_box.style_one .service_content:hover .image.image_fit::before,
html body .service_box.style_one .service_content:hover .image.image_fit::after {
    display: none !important;
    content: none !important;
}

/* NOT: Buraya görsel üstüne gradyan katman yazılmıştı ve KALDIRILDI.
   Tema, kart görselinde hover animasyonu için hem ::before hem ::after
   kullanıyor (iki yarım panel soldan/sağdan içeri kayıyor):
       .image_fit::before { width:50%; left:-50%  }  -> hover: left:0
       .image_fit::after  { width:50%; right:-50% }  -> hover: right:0
   ::after'a tam kaplayan gradyan yazmak sağdaki paneli ele geçiriyor ve
   hover'da görsel dağılıyordu. Temanın animasyonu olduğu gibi bırakıldı. */

/* İçerik */
html body .service_box.style_one .content_inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 22px 20px !important;
    text-align: left !important;
}
html body .service_box.style_one .serheading,
html body .service_box.style_one h2.serheading,
html body .service_box.style_one h3.serheading {
    font-family: var(--asan-font-baslik) !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    letter-spacing: -.018em;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
}
html body .service_box.style_one .serheading a { color: var(--asan-lacivert) !important; }
html body .service_box.style_one:hover .serheading a { color: var(--asan-marka) !important; }
/* Başlıklarda zorlanmış satır sonu dar ekranda garip kırılıyor */
html body .service_box.style_one .serheading br { display: none; }

html body .service_box.style_one .content_inner p {
    font-size: 15px !important;
    line-height: 1.68 !important;
    color: var(--asan-metin-orta) !important;
    margin: 0 0 18px !important;
    flex: 1 1 auto;
}

/* "Hemen İncele" — düz link yerine net bir eylem */
/* ÖZGÜLLÜK NOTU: tema bu bağlantıyı şu zincirle stilliyor —
   .service_box.style_one .service_content .content_inner a.read_more::after
   (0,5,2). Daha kısa bir seçici kaybediyor; bu yüzden zincir eşitlendi.
   Temanın ::after'ı FontAwesome "\f105" ile position:absolute; right:-16px
   basıyordu — kartın sağında serbest gezen "›" oku bundandı. */
html body .service_box.style_one .read_more,
html body .service_box.style_one .service_content .content_inner a.read_more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--asan-cizgi);
    font-family: var(--asan-font-baslik) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--asan-marka) !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    transition: gap var(--asan-gecis);
}
html body .service_box.style_one .read_more::after,
html body .service_box.style_one .service_content .content_inner a.read_more::after {
    content: "" !important;
    /* Tema bu ::after'ı position:absolute; right:-16px; top:-4px ile
       konumlandırıyordu (FontAwesome "\f105"). Sıfırlanmazsa ok kartın
       sağına fırlıyor — ekranda serbest gezen "›" bundandı. */
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    font-family: inherit !important;
    width: 14px; height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .service_box.style_one:hover .read_more,
html body .service_box.style_one .service_content:hover .content_inner a.read_more { gap: 12px; }
/* Temanın oku ::BEFORE'da: content:"\f105" (FontAwesome), position:absolute,
   right:-16px. Ben ::after'ı ezmiştim, bu yüzden tema oku kartın sağında
   ayrıca duruyordu (FontAwesome yüklenmediğinde boş kutu "□" olarak).
   ::before tamamen kapatılır — ok artık yalnızca bizim SVG maskemiz. */
html body .service_box.style_one .read_more::before,
html body .service_box.style_one .service_content .content_inner a.read_more::before,
html body .service_box.style_one .service_content .content_inner a.read_more:hover::before,
html body .service_box.style_one.light_color .service_content a.read_more::before {
    content: none !important;
    display: none !important;
}

/* Kartın tamamı tıklanabilir; klavye odağı görünür kalsın */
.asan-card-overlay-link { position: absolute; inset: 0; z-index: 3; }
html body .service_box.style_one .service_content:focus-within {
    border-color: var(--asan-marka);
    box-shadow: var(--asan-golge-lg);
}

/* Koyu zeminli varyant */
html body .service_box.style_one.light_color .service_content,
html body .service_box.style_one.white_color .service_content {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
html body .service_box.style_one.light_color .serheading a { color: #fff !important; }
html body .service_box.style_one.light_color .content_inner p { color: rgba(255,255,255,.74) !important; }

/* ==========================================================================
   17. ANİMASYONLAR
   Sitede AOS + animate.css birlikte çalışıyor; tek sayfada 200'ü aşkın
   kayan öğe vardı. Süre ve mesafe düşürülerek kaydırma akıcı hale getirildi;
   animasyon tamamen kapatılmadı, sadece sakinleştirildi.
   ========================================================================== */

html body [data-aos] {
    transition-duration: 420ms !important;
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
/* Uzun kaymalar yerine kısa, kurumsal bir yükselme */
html body [data-aos="fade-up"]    { transform: translate3d(0, 22px, 0); }
html body [data-aos="fade-down"]  { transform: translate3d(0, -22px, 0); }
html body [data-aos="fade-left"]  { transform: translate3d(-22px, 0, 0); }
html body [data-aos="fade-right"] { transform: translate3d(22px, 0, 0); }
html body [data-aos].aos-animate  { transform: translate3d(0, 0, 0); }

/* Elementor animasyonları da kısaltılır */
html body .animated {
    animation-duration: 500ms !important;
    animation-fill-mode: both;
}

/* Izgara içindeki kartlarda gecikme kademesi sıfırlanır — 59 kartın
   sırayla belirmesi sayfayı yavaş hissettiriyordu */
html body .service_box[data-aos],
html body .asan-blog-card-wrap [data-aos] { transition-delay: 0ms !important; }

/* GÜVENLİK AĞI: JS gelmezse içerik yine de görünür olsun.
   .elementor-invisible opacity:0 basıyordu; 4 sn sonra kendiliğinden açılır. */
@keyframes asanGorunurOl { to { opacity: 1; } }
html body .elementor-invisible {
    animation: asanGorunurOl 1ms linear 4s forwards;
}

/* Hareket azaltma tercihi: her şey anında görünür */
@media (prefers-reduced-motion: reduce) {
    html body [data-aos],
    html body .elementor-invisible,
    html body .animated {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   18. HİZMET KARTLARI RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
    html body .service_box.style_one .content_inner { padding: 18px 18px 16px !important; }
    html body .service_box.style_one .serheading { font-size: 17.5px !important; }
    html body .service_box.style_one .service_content .image,
    html body .service_box.style_one .service_content .image.image_fit,
    html body .service_box.style_one .image,
    html body .service_box.style_one .image_fit { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   19. [asan_quote_cta] BLOĞU — dar kapsayıcı uyumu
   --------------------------------------------------------------------------
   Blok geniş, iki sütunlu bir alan için tasarlanmıştı: padding 48/52px, sabit
   yazı boyutları, hiç duyarlı kural yok. Blog detayda kenar çubuğuna (~330px)
   yerleştirilince rozetler alt alta diziliyor, başlık üç satıra bölünüyor ve
   blok eziliyordu.

   Çözüm EKRAN genişliğine değil KAPSAYICI genişliğine bakar:
     - yüzdeli padding  -> kutu daraldıkça iç boşluk da daralır
     - container query  -> yazı ve butonlar kutuya göre ölçeklenir
   Böylece aynı kısa kod hem tam genişlikte hem kenar çubuğunda doğru görünür.
   ========================================================================== */

html body .asan-qcta {
    container-type: inline-size;
    padding: clamp(20px, 5%, 48px) clamp(16px, 5%, 52px) !important;
    gap: clamp(16px, 3%, 36px) !important;
    border-radius: clamp(14px, 2.2%, 24px) !important;
    margin: clamp(26px, 4%, 56px) 0 !important;
}
html body .asan-qcta-left,
html body .asan-qcta-right {
    flex: 1 1 240px !important;
    min-width: 0 !important;
}

/* Kutu 620px'in altına inince tek sütuna geç */
@container (max-width: 620px) {
    html body .asan-qcta { flex-direction: column; align-items: stretch; }
    html body .asan-qcta-left,
    html body .asan-qcta-right { flex: 1 1 auto !important; width: 100%; }
    html body .asan-qcta-btn { width: 100%; justify-content: center; }
}

/* Kenar çubuğu genişliği (~420px altı): tipografiyi de küçült */
@container (max-width: 420px) {
    html body .asan-qcta-title    { font-size: 21px !important; line-height: 1.3 !important; }
    html body .asan-qcta-desc     { font-size: 14.5px !important; line-height: 1.6 !important; }
    html body .asan-qcta-badges   { gap: 6px !important; }
    html body .asan-qcta-badge    { font-size: 11.5px !important; padding: 4px 9px !important; }
    html body .asan-qcta-price-val{ font-size: 23px !important; }
    html body .asan-qcta-price    { padding: 12px 14px !important; }
    html body .asan-qcta-btn      { font-size: 14.5px !important; padding: 12px 14px !important; min-height: 46px; }
}

/* Container query desteklemeyen tarayıcılar için ekran tabanlı yedek */
@supports not (container-type: inline-size) {
    @media (max-width: 991px) {
        html body .asan-qcta { flex-direction: column; align-items: stretch; }
        html body .asan-qcta-btn { width: 100%; justify-content: center; }
    }
}

/* Kenar çubuğundaki bloklar taşmasın */
html body .all_side_bar .asan-qcta,
html body .side_bar .asan-qcta,
html body .widget-area .asan-qcta { margin: 0 0 26px !important; }

/* ==========================================================================
   20. HERO EL YAZISI BAŞLIĞI
   --------------------------------------------------------------------------
   "Kalitenizi Belgelendirelim" bilinçli bir marka tercihi — el yazısı korunur.
   Yapılan: fontun kendisine DOKUNULMADAN sunumu iyileştirildi.
   El yazısı fontlar geniş çıkıntılara sahiptir; sıkı satır aralığında
   harfler kesilir. Ayrıca düz zeminde ağırlığı kaybolur.
   ========================================================================== */

html body .elementor-widget-heading .elementor-heading-title {
    /* font-family BİLEREK YOK — Elementor'daki seçim korunuyor */
    line-height: 1.28;
    letter-spacing: .005em;
    padding-bottom: .08em;            /* alt çıkıntılar kesilmesin */
    text-wrap: balance;
}

/* Koyu/mavi zeminde derinlik: yumuşak gölge + hafif ışık */
.elementor-section:not(.elementor-section-boxed) .elementor-heading-title,
[class*="elementor-element"] .elementor-heading-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}

/* ==========================================================================
   21. BLOG DETAY — ODAKLI ŞABLON
   ========================================================================== */

/* Odaklı yazıda kenar çubuğu yok; sütun tam genişlik */
.asan-odakli-yazi .asan-odak-alan { width: 100%; max-width: 100%; flex: 0 0 100%; }
.asan-odakli-yazi #secondary,
.asan-odakli-yazi .all_side_bar { display: none !important; }

/* Okuma ilerleme çubuğu */
.asan-okuma-cubugu {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}
.asan-okuma-cubugu span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--asan-marka), #7FC4F0);
    will-change: transform;
}

/* ── HERO ────────────────────────────────────────────────────────────── */
.asan-yazi-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 0 44px;
    padding: clamp(34px, 5%, 62px) clamp(20px, 5%, 64px);
    background:
        radial-gradient(120% 150% at 88% 0%, rgba(46,144,217,.30) 0%, rgba(46,144,217,0) 58%),
        linear-gradient(135deg, var(--asan-lacivert) 0%, #143a5e 62%, var(--asan-marka-koyu) 100%);
    color: #fff;
    text-align: center;
}
.asan-yazi-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.asan-yazi-hero-ic { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }

.asan-yazi-yol {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    font-size: 13.5px;
    margin-bottom: 18px;
    color: rgba(255,255,255,.55);
}
.asan-yazi-yol a { color: rgba(255,255,255,.72) !important; }
.asan-yazi-yol a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }

.asan-yazi-kategori {
    display: inline-block;
    background: rgba(127,196,240,.16);
    border: 1px solid rgba(127,196,240,.34);
    color: #A9DBFA;
    font-family: var(--asan-font-baslik);
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 999px;
    margin-bottom: 16px;
}

html body .asan-yazi-baslik {
    font-family: var(--asan-font-baslik) !important;
    font-size: clamp(26px, 3.4vw, 42px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.024em;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 20px !important;
    text-wrap: balance;
}

.asan-yazi-meta {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 20px;
    font-size: 14px;
    color: rgba(255,255,255,.68);
}
.asan-yazi-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.asan-yazi-meta svg { color: #7FC4F0; flex-shrink: 0; }

.asan-yazi-hero-cta {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 11px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.14);
}
.asan-yazi-hero-cta-metin { font-size: 14.5px; color: rgba(255,255,255,.7); margin-right: 4px; }
.asan-yazi-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--asan-font-baslik);
    font-size: 14.5px; font-weight: 700;
    padding: 11px 20px;
    border-radius: 10px;
    min-height: 44px;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.asan-yazi-hero-btn:hover { transform: translateY(-2px); }
.asan-yazi-hero-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-yazi-hero-wa  { background: var(--asan-wa); color: #fff !important; }

/* ── ORTALANMIŞ OKUMA SÜTUNU ─────────────────────────────────────────── */
.asan-yazi-govde { min-width: 0; }   /* 3 sütunlu ızgarada taşmayı önler */
.asan-yazi-gorsel { margin: 0 0 34px; }
.asan-yazi-gorsel img { width: 100%; height: auto; border-radius: 16px; display: block; }

.asan-single-body { font-size: 17.5px; line-height: 1.85; color: var(--asan-metin-orta); }
.asan-single-body > p { margin-bottom: 1.3em; }
html body .asan-single-body h2 { font-size: 27px !important; margin: 2em 0 .7em !important; scroll-margin-top: 96px; }
html body .asan-single-body h3 { font-size: 21px !important; margin: 1.7em 0 .55em !important; scroll-margin-top: 96px; }

/* ── İÇİNDEKİLER ─────────────────────────────────────────────────────── */
.asan-toc {
    background: var(--asan-zemin);
    border: 1px solid var(--asan-cizgi);
    border-left: 3px solid var(--asan-marka);
    border-radius: 0 14px 14px 0;
    padding: 22px 24px;
    margin: 0 0 34px;
}
.asan-toc-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.asan-toc-ust svg { color: var(--asan-marka); flex-shrink: 0; }
html body .asan-toc-baslik {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    margin: 0 !important;
    color: var(--asan-lacivert) !important;
    flex: 1 1 auto;
}
.asan-toc-tus {
    background: none; border: 0; padding: 4px 8px;
    font-family: var(--asan-font-baslik);
    font-size: 13px; font-weight: 600;
    color: var(--asan-marka); cursor: pointer;
    border-radius: 6px;
}
.asan-toc-tus:hover { background: rgba(0,110,181,.08); }
.asan-toc-liste { margin: 0; padding: 0 0 0 20px; }
.asan-toc-liste li { margin-bottom: 8px; font-size: 15.5px; }
.asan-toc-liste li::marker { color: var(--asan-marka); font-weight: 700; }
.asan-toc-liste a { color: var(--asan-metin) !important; text-decoration: none !important; }
.asan-toc-liste a:hover { color: var(--asan-marka) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.asan-toc-liste[hidden] { display: none; }

/* ── MAKALE İÇİ CTA ──────────────────────────────────────────────────── */
.asan-ici-cta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--asan-marka-soluk) 0%, #F4F9FD 100%);
    border: 1px solid rgba(0,110,181,.18);
    border-radius: 14px;
    padding: 20px 22px;
    margin: 2em 0;
}
.asan-ici-cta-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--asan-marka);
    color: #fff;
}
.asan-ici-cta-metin { flex: 1 1 260px; }
.asan-ici-cta-metin strong {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 16.5px; font-weight: 700;
    color: var(--asan-lacivert);
    margin-bottom: 3px;
}
.asan-ici-cta-metin span { font-size: 14.5px; line-height: 1.55; color: var(--asan-metin-orta); }
.asan-ici-cta-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--asan-marka);
    color: #fff !important;
    font-family: var(--asan-font-baslik);
    font-size: 14.5px; font-weight: 700;
    padding: 12px 22px;
    border-radius: 10px;
    min-height: 46px;
    transition: background-color var(--asan-gecis), transform var(--asan-gecis);
}
.asan-ici-cta-btn:hover { background: var(--asan-marka-koyu); color: #fff !important; transform: translateY(-2px); }

/* ── YAZAR ───────────────────────────────────────────────────────────── */
.asan-author-card {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--asan-zemin);
    border: 1px solid var(--asan-cizgi);
    border-radius: 14px;
    padding: 20px 22px;
    margin: 36px 0 0;
}
.asan-author-card img { border-radius: 50%; flex-shrink: 0; }
.asan-author-label {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--asan-marka);
    margin-bottom: 2px;
}
.asan-author-info strong { display: block; font-family: var(--asan-font-baslik); font-size: 17px; color: var(--asan-lacivert); }
.asan-author-info p { font-size: 14.5px; line-height: 1.6; color: var(--asan-metin-orta); margin: 6px 0 0; }

/* ── İLGİLİ HİZMETLER (bağlam içi iç link) ───────────────────────────── */
.asan-ilgili-hizmet,
.asan-ilgili-makale {
    max-width: 1020px;
    margin: 56px auto 0;
}
.asan-ilgili-ust { text-align: center; margin-bottom: 28px; }
.asan-ilgili-etiket {
    display: inline-block;
    font-family: var(--asan-font-baslik);
    font-size: 12px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--asan-marka);
    margin-bottom: 8px;
}
html body .asan-ilgili-ust h2 {
    font-size: clamp(23px, 2.4vw, 30px) !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    color: var(--asan-lacivert) !important;
}

.asan-ilgili-grid,
.asan-makale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.asan-ilgili-kart {
    display: flex;
    flex-direction: column;
    background: var(--asan-beyaz);
    border: 1px solid var(--asan-cizgi);
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: var(--asan-golge-sm);
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis), border-color var(--asan-gecis);
}
.asan-ilgili-kart:hover {
    transform: translateY(-4px);
    border-color: var(--asan-marka-acik);
    box-shadow: var(--asan-golge-lg);
}
.asan-ilgili-kod {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,110,181,.1);
    color: var(--asan-marka);
    font-family: var(--asan-font-baslik);
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 7px;
    margin-bottom: 12px;
}
html body .asan-ilgili-kart h3 {
    font-size: 17.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    color: var(--asan-lacivert) !important;
}
.asan-ilgili-kart:hover h3 { color: var(--asan-marka) !important; }
.asan-ilgili-kart p { font-size: 14.5px; line-height: 1.62; color: var(--asan-metin-orta); margin: 0 0 16px; flex: 1 1 auto; }
.asan-ilgili-devam {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: auto;
    font-family: var(--asan-font-baslik);
    font-size: 14px; font-weight: 700;
    color: var(--asan-marka);
    transition: gap var(--asan-gecis);
}
.asan-ilgili-kart:hover .asan-ilgili-devam { gap: 12px; }

/* ── KAPANIŞ CTA ─────────────────────────────────────────────────────── */
.asan-kapanis-cta {
    max-width: 1020px;
    margin: 56px auto 0;
    padding: clamp(30px, 4%, 46px) clamp(22px, 4%, 48px);
    border-radius: 20px;
    background:
        radial-gradient(120% 150% at 90% 0%, rgba(46,144,217,.3) 0%, rgba(46,144,217,0) 58%),
        linear-gradient(130deg, var(--asan-lacivert) 0%, #143a5e 100%);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    box-shadow: var(--asan-golge-lg);
}
.asan-kapanis-etiket {
    display: inline-block;
    font-family: var(--asan-font-baslik);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #7FC4F0; margin-bottom: 8px;
}
html body .asan-kapanis-cta h2 {
    font-size: clamp(21px, 2.2vw, 27px) !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
}
.asan-kapanis-cta p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.76); margin: 0; max-width: 56ch; }
.asan-kapanis-butonlar { display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.asan-kapanis-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    padding: 13px 20px;
    border-radius: 12px;
    min-height: 52px;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.asan-kapanis-btn small { display: block; font-size: 12.5px; font-weight: 500; opacity: .8; }
.asan-kapanis-btn:hover { transform: translateY(-2px); }
.asan-kapanis-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-kapanis-wa  { background: var(--asan-wa); color: #fff !important; }

/* ── İLGİLİ MAKALELER ────────────────────────────────────────────────── */
.asan-makale-kart {
    display: flex;
    flex-direction: column;
    background: var(--asan-beyaz);
    border: 1px solid var(--asan-cizgi);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--asan-golge-sm);
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis), border-color var(--asan-gecis);
}
.asan-makale-kart:hover { transform: translateY(-4px); border-color: var(--asan-marka-acik); box-shadow: var(--asan-golge-lg); }
.asan-makale-gorsel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--asan-zemin); }
.asan-makale-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.4,0,.2,1); }
.asan-makale-kart:hover .asan-makale-gorsel img { transform: scale(1.05); }
.asan-makale-kapak {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--asan-lacivert), var(--asan-marka-koyu));
}
.asan-makale-kapak span {
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.9);
    padding: 0 14px; text-align: center;
}
.asan-makale-govde { display: block; padding: 18px 18px 20px; }
.asan-makale-meta { display: block; font-size: 12.5px; color: var(--asan-metin-soluk); margin-bottom: 7px; }
.asan-makale-baslik {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 16.5px; font-weight: 700; line-height: 1.42;
    color: var(--asan-lacivert);
}
.asan-makale-kart:hover .asan-makale-baslik { color: var(--asan-marka); }
.asan-makale-tumu { text-align: center; margin: 26px 0 0; }
.asan-makale-tumu a {
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    color: var(--asan-marka);
    text-decoration: underline; text-underline-offset: 4px;
}

.asan-yazi-yorum { margin-top: 56px; }
.asan-yazi-etiket { margin-top: 32px; }

/* ── BLOG DETAY RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .asan-ilgili-grid, .asan-makale-grid { grid-template-columns: repeat(2, 1fr); }
    .asan-kapanis-cta { grid-template-columns: 1fr; }
    .asan-kapanis-butonlar { min-width: 0; flex-direction: row; flex-wrap: wrap; }
    .asan-kapanis-btn { flex: 1 1 220px; justify-content: center; }
}
@media (max-width: 640px) {
    .asan-yazi-hero { border-radius: 14px; margin-bottom: 30px; }
    .asan-yazi-hero-cta { flex-direction: column; align-items: stretch; }
    .asan-yazi-hero-cta-metin { text-align: center; margin: 0 0 4px; }
    .asan-yazi-hero-btn { justify-content: center; width: 100%; }
    .asan-single-body { font-size: 16.5px; }
    html body .asan-single-body h2 { font-size: 23px !important; }
    .asan-toc { padding: 18px 18px; border-radius: 0 12px 12px 0; }
    .asan-ici-cta { flex-direction: column; align-items: stretch; gap: 14px; }
    /* Sütun yönünde flex-basis MAIN eksen = YÜKSEKLİK olur. Yatay için yazılan
       "flex: 1 1 260px" burada metni 260px yüksekliğe zorluyordu. */
    .asan-ici-cta-metin { flex: 0 0 auto; }
    .asan-ici-cta-ikon  { flex: 0 0 auto; }
    .asan-ici-cta-btn   { width: 100%; flex: 0 0 auto; }
    .asan-ilgili-grid, .asan-makale-grid { grid-template-columns: 1fr; }
    .asan-kapanis-butonlar { flex-direction: column; }
    .asan-kapanis-btn { flex: 0 0 auto; }
    .asan-author-card { flex-direction: column; }
}

/* ==========================================================================
   22. ODAKLI YAZIDA HEADER VE HERO İLİŞKİSİ
   --------------------------------------------------------------------------
   Temanın ana header satırı (.header.header_default) MUTLAK konumludur;
   sayfa başlığı banner'ının ÜZERİNE binmek için öyle tasarlanmış ve menü
   yazıları beyazdır. Odaklı blog şablonunda banner kaldırılınca header
   beyaz zemin üstünde kaldı: menü beyaz-üstüne-beyaz olduğu için görünmez oldu.

   Çözüm kampanya şablonuyla AYNI: hero tam genişlik olur ve header'ın
   ARKASINA geçer. header.php'de blog tekil sayfası da 'no-container' /
   'no-row' listesine eklendi; burada hero'ya header yüksekliği kadar
   iç üst boşluk verilir.

   Ölçüm: header absolute, yükseklik 102px, üst bar 59px.
   ========================================================================== */

/* Tam genişlik akış — kapsayıcı header.php'de kaldırıldı.
   Bootstrap'in .col-lg-12 sınıfı 15px yan padding veriyor; hero'nun kenardan
   kenara olması için özgüllüğü yükseltilerek sıfırlanır. */
.asan-odakli-yazi #content > .no-container { width: 100%; max-width: 100%; padding: 0; margin: 0; }
.asan-odakli-yazi #content .no-row { margin-left: 0; margin-right: 0; }
.asan-odakli-yazi #content #primary.asan-odak-alan {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

/* HERO: kenardan kenara, header'ın arkasında */
.asan-odakli-yazi .asan-yazi-hero {
    border-radius: 0;
    margin: 0 0 48px;
    /* Masaüstünde header (102px) + üst bar payı kadar iç boşluk */
    padding-top: 168px;
    padding-bottom: 64px;
}
.asan-odakli-yazi .asan-yazi-hero-ic { padding-left: 20px; padding-right: 20px; }

/* Header her zaman hero'nun ÜSTÜNDE çizilsin */
.asan-odakli-yazi .header_area,
.asan-odakli-yazi .header.header_default { z-index: 200; }
.asan-odakli-yazi #primary { z-index: 1; }

/* Hero dışındaki bloklar ortalanır ve kenar boşluğu alır */
.asan-odakli-yazi .asan-yazi-govde,
.asan-odakli-yazi .asan-ilgili-hizmet,
.asan-odakli-yazi .asan-kapanis-cta,
.asan-odakli-yazi .asan-ilgili-makale { padding-left: 20px; padding-right: 20px; }


/* Mobilde header mutlak değil (relative) — fazladan pay gerekmez */
@media (max-width: 991px) {
    .asan-odakli-yazi .asan-yazi-hero {
        padding-top: clamp(34px, 7vw, 56px);
        padding-bottom: clamp(30px, 6vw, 48px);
        margin-bottom: 34px;
    }
}
@media (min-width: 1600px) {
    .asan-odakli-yazi .asan-yazi-hero { padding-top: 180px; }
}

/* ==========================================================================
   23. BLOG DETAY — 3 SÜTUNLU DÜZEN
   --------------------------------------------------------------------------
   Sol ray : içindekiler, yazıyı takip eder ve okunan bölümü vurgular
   Orta    : makale (65-75 karakter satır uzunluğu korunur)
   Sağ ray : yapışkan teklif kartı
   1200px altında raylar kapanır, tek sütuna iner.
   ========================================================================== */

.asan-yazi-duzen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 1200px) {
    .asan-yazi-duzen {
        grid-template-columns: 250px minmax(0, 1fr) 300px;
        gap: 44px;
        align-items: start;
    }
    /* İçindekiler yoksa sol ray da olmasın */
    .asan-yazi-duzen.asan-tocsuz { grid-template-columns: minmax(0, 1fr) 300px; }

    .asan-sol-ray, .asan-sag-ray { position: sticky; top: 104px; }
    .asan-sol-ray { align-self: start; }
}

/* Orta sütun okunabilirlik sınırı — geniş ekranda satır uzamasın */
.asan-yazi-govde { max-width: 760px; margin-inline: auto; width: 100%; }

/* ── SOL RAY: İÇİNDEKİLER ────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .asan-toc {
        background: transparent;
        border: 0;
        border-left: 2px solid var(--asan-cizgi);
        border-radius: 0;
        padding: 2px 0 2px 18px;
        margin: 0;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .asan-toc-tus { display: none; }   /* rayda açma/kapama gereksiz */
    .asan-toc-liste { padding-left: 0; list-style: none; counter-reset: toc; }
    .asan-toc-liste li { counter-increment: toc; margin-bottom: 2px; }
    .asan-toc-liste a {
        display: block;
        position: relative;
        padding: 8px 10px 8px 26px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--asan-metin-soluk) !important;
        transition: color var(--asan-gecis), background-color var(--asan-gecis);
    }
    .asan-toc-liste a::before {
        content: counter(toc);
        position: absolute;
        left: 8px; top: 8px;
        font-family: var(--asan-font-baslik);
        font-size: 11.5px; font-weight: 700;
        color: var(--asan-cizgi-koyu);
        transition: color var(--asan-gecis);
    }
    .asan-toc-liste a:hover {
        background: var(--asan-zemin);
        color: var(--asan-metin) !important;
        text-decoration: none !important;
    }
    /* Okunan bölüm */
    .asan-toc-liste a.aktif {
        background: var(--asan-marka-soluk);
        color: var(--asan-marka-koyu) !important;
        font-weight: 600;
    }
    .asan-toc-liste a.aktif::before { color: var(--asan-marka); }
    .asan-toc-liste a.aktif::after {
        content: "";
        position: absolute;
        left: -20px; top: 8px; bottom: 8px;
        width: 2px;
        border-radius: 2px;
        background: var(--asan-marka);
    }
}

/* ── SAĞ RAY ─────────────────────────────────────────────────────────── */
.asan-sag-ray { min-width: 0; }
@media (max-width: 1199px) {
    .asan-sag-ray { max-width: 520px; margin: 40px auto 0; width: 100%; }
    .asan-sag-ray .asan-yan-cta { position: static; }
    /* Mobilde içindekiler yazının üstünde, açılır kutu olarak */
    .asan-sol-ray { order: -1; margin-bottom: 26px; }
}

/* ── ALT BLOKLARIN GENİŞLİĞİ ─────────────────────────────────────────── */
.asan-ilgili-hizmet,
.asan-kapanis-cta,
.asan-ilgili-makale { max-width: 1160px; }

/* "Tüm makaleleri görüntüle" altına nefes payı — footer'a yapışmasın */
.asan-ilgili-makale { margin-bottom: 90px; }
.asan-makale-tumu { margin-top: 30px; }
@media (max-width: 640px) {
    .asan-ilgili-makale { margin-bottom: 60px; }
}

/* Kart kapaklarında logo görselleri artık tipografik kapağa düşüyor;
   yine de gelen görseller tutarlı görünsün diye zemin verilir */
.asan-makale-gorsel { background: var(--asan-lacivert); }

/* ==========================================================================
   24. TÜM SAYFALARDA ORTAK HERO
   --------------------------------------------------------------------------
   Temanın fotoğraflı sayfa başlığı banner'ının yerini alır. Hero, temanın
   banner kancasına bağlı olduğu için #content'ten ÖNCE ve kapsayıcı DIŞINDA
   basılır — doğal olarak tam genişliktedir.

   Ana header satırı mutlak konumlu (yükseklik 102px) ve menü yazıları beyaz;
   bu yüzden hero'ya header kadar iç üst boşluk verilir, menü hero'nun koyu
   zemini üzerinde okunur kalır.
   ========================================================================== */

.asan-sayfa-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 150% at 88% 0%, rgba(46,144,217,.30) 0%, rgba(46,144,217,0) 58%),
        linear-gradient(135deg, var(--asan-lacivert) 0%, #143a5e 62%, var(--asan-marka-koyu) 100%);
    color: #fff;
    text-align: center;
    padding: 168px 20px 66px;
}
.asan-sayfa-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.asan-sayfa-hero-ic { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

/* Ekmek kırıntısı — temanın kendi çıktısı hero rengine uyarlanır */
.asan-sayfa-yol { margin-bottom: 16px; font-size: 13.5px; }
.asan-sayfa-yol ul,
.asan-sayfa-yol ol {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
}
.asan-sayfa-yol li,
.asan-sayfa-yol span { color: rgba(255,255,255,.55) !important; font-size: 13.5px !important; }
.asan-sayfa-yol a { color: rgba(255,255,255,.75) !important; }
.asan-sayfa-yol a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }

.asan-sayfa-etiket {
    display: inline-block;
    background: rgba(127,196,240,.16);
    border: 1px solid rgba(127,196,240,.34);
    color: #A9DBFA;
    font-family: var(--asan-font-baslik);
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 999px;
    margin-bottom: 16px;
}

html body .asan-sayfa-baslik {
    font-family: var(--asan-font-baslik) !important;
    font-size: clamp(27px, 3.4vw, 44px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.024em;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    text-wrap: balance;
}

.asan-sayfa-hero-cta {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 11px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.14);
}
.asan-sayfa-hero-cta-metin { font-size: 14.5px; color: rgba(255,255,255,.7); margin-right: 4px; }
.asan-sayfa-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--asan-font-baslik);
    font-size: 14.5px; font-weight: 700;
    padding: 11px 20px;
    border-radius: 10px;
    min-height: 44px;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.asan-sayfa-hero-btn:hover { transform: translateY(-2px); }
.asan-sayfa-hero-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-sayfa-hero-wa  { background: var(--asan-wa); color: #fff !important; }

/* İçerik hero'nun hemen altından başlasın */
.asan-hero-var #content { padding-top: 46px; }

/* Mobilde ana header mutlak değil — fazladan pay gerekmez */
@media (max-width: 991px) {
    .asan-sayfa-hero { padding-top: clamp(36px, 7vw, 56px); padding-bottom: clamp(30px, 6vw, 48px); }
    .asan-sayfa-hero-cta { flex-direction: column; align-items: stretch; }
    .asan-sayfa-hero-cta-metin { text-align: center; margin: 0 0 4px; }
    .asan-sayfa-hero-btn { justify-content: center; width: 100%; }
    .asan-hero-var #content { padding-top: 34px; }
}
@media (min-width: 1600px) {
    .asan-sayfa-hero { padding-top: 180px; }
}

/* ==========================================================================
   25. YAPIŞKAN RAYLARIN ÇALIŞMASI  (kritik)
   --------------------------------------------------------------------------
   Tema, üst sarmalayıcılara yatay taşmayı kesmek için "overflow: hidden"
   veriyor:
       .page_wapper              { overflow: hidden }
       .page_wapper #wrapper_full{ overflow: hidden }

   overflow:hidden bir kaydırma kabı (scroll container) oluşturur ve
   İÇİNDEKİ TÜM position:sticky öğelerini ETKİSİZ kılar. Sol içindekiler
   rayı ile sağ CTA rayının takip etmemesinin sebebi buydu.

   Çözüm: "overflow-x: clip" + "overflow-y: visible".
   clip, hidden gibi keser ama kaydırma kabı OLUŞTURMAZ; sticky çalışır.
   (hidden + visible kombinasyonu geçersizdir, ikisi de auto'ya döner —
    bu yüzden özellikle clip kullanılıyor.)
   ========================================================================== */

@media (min-width: 1200px) {
    .asan-odakli-yazi .page_wapper,
    .asan-odakli-yazi #wrapper_full,
    .asan-odakli-yazi .page_wapper #wrapper_full,
    .asan-odakli-yazi .content_all_warpper,
    .asan-odakli-yazi #content,
    .asan-odakli-yazi #content > .no-container,
    .asan-odakli-yazi #content .no-row,
    .asan-odakli-yazi #primary,
    .asan-odakli-yazi #main {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Rayların yapışabilmesi için ızgara satırının yüksekliği içerikten gelir */
    .asan-yazi-duzen { align-items: start; }
    .asan-sol-ray,
    .asan-sag-ray {
        position: sticky;
        top: 104px;
        align-self: start;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Kendi içinde kaydırma çubuğu görünmesin (içerik sığdığında) */
    .asan-sol-ray, .asan-sag-ray { scrollbar-width: thin; }
}

/* overflow:clip desteklenmiyorsa (eski Safari) yatay taşmayı body seviyesinde kes */
@supports not (overflow: clip) {
    @media (min-width: 1200px) {
        .asan-odakli-yazi .page_wapper,
        .asan-odakli-yazi #wrapper_full { overflow: visible; }
        html.asan-tasma-kes, body.asan-odakli-yazi { overflow-x: hidden; }
    }
}

/* MOBİL: raylar yapışkan DEĞİL — içerik akışında normal yerlerinde dursun */
@media (max-width: 1199px) {
    .asan-sol-ray,
    .asan-sag-ray {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .asan-sag-ray .asan-yan-cta,
    .asan-sol-ray .asan-toc { position: static !important; }
}

/* ==========================================================================
   26. KURUMSAL FOOTER
   --------------------------------------------------------------------------
   Eski "Footer Eleven" (Elementor) yerine geçer. Üç bölüm:
   CTA bandı → sütunlar → alt bar. Tüm sayfalarda aynı.
   ========================================================================== */

.asan-footer { background: var(--asan-lacivert); color: rgba(255,255,255,.72); }
.asan-footer-ic { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ── CTA bandı ─────────────────────────────────────────────────────────── */
.asan-footer-cta {
    background:
        radial-gradient(110% 180% at 85% 0%, rgba(46,144,217,.34) 0%, rgba(46,144,217,0) 60%),
        linear-gradient(120deg, var(--asan-marka-koyu) 0%, #10416d 100%);
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.asan-footer-cta-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
    padding-top: 38px; padding-bottom: 38px;
}
html body .asan-footer-cta h2 {
    font-size: clamp(20px, 2.1vw, 27px) !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
}
.asan-footer-cta p { margin: 0; font-size: 15.5px; color: rgba(255,255,255,.76); max-width: 60ch; }
.asan-footer-cta-butonlar { display: flex; gap: 11px; flex-wrap: wrap; }
.asan-footer-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    padding: 13px 22px;
    border-radius: 12px;
    min-height: 48px;
    transition: transform var(--asan-gecis), box-shadow var(--asan-gecis);
}
.asan-footer-btn:hover { transform: translateY(-2px); }
.asan-footer-btn-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-footer-btn-wa  { background: var(--asan-wa); color: #fff !important; }

/* ── Sütunlar ──────────────────────────────────────────────────────────── */
.asan-footer-govde { padding: 56px 0 44px; }
.asan-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 44px;
}

.asan-footer-logo {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 21px; font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 14px;
}
.asan-footer-marka p { font-size: 15px; line-height: 1.7; margin: 0 0 18px; color: rgba(255,255,255,.66); }

.asan-footer-rozet { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.asan-footer-rozet li {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,.8);
}

.asan-footer-sosyal { display: flex; gap: 9px; }
.asan-footer-sosyal a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85) !important;
    transition: background-color var(--asan-gecis), transform var(--asan-gecis);
}
.asan-footer-sosyal a:hover { background: var(--asan-marka); color: #fff !important; transform: translateY(-2px); }

html body .asan-footer-sutun h3 {
    font-family: var(--asan-font-baslik) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff !important;
    margin: 0 0 16px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: relative;
}
html body .asan-footer-sutun h3::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 34px; height: 2px; background: var(--asan-marka-acik);
}
.asan-footer-sutun ul { list-style: none; margin: 0; padding: 0; }
.asan-footer-sutun li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
.asan-footer-sutun a { color: rgba(255,255,255,.68) !important; transition: color var(--asan-gecis), padding-left var(--asan-gecis); }
.asan-footer-sutun a:hover { color: #fff !important; padding-left: 5px; }

/* İletişim sütunu */
.asan-footer-iletisim li { margin-bottom: 14px; }
.asan-footer-iletisim li > span {
    display: block;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-bottom: 3px;
}
.asan-footer-iletisim li > a,
.asan-footer-iletisim li > strong { font-size: 15.5px; font-weight: 600; color: #fff !important; }
.asan-footer-iletisim address { font-style: normal; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); }
.asan-footer-yol {
    display: inline-block; margin-top: 5px;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--asan-marka-acik) !important;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ── Alt bar ───────────────────────────────────────────────────────────── */
.asan-footer-alt { border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.16); }
.asan-footer-alt-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding-top: 20px; padding-bottom: 20px;
}
.asan-footer-telif { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.5); }
.asan-footer-yasal { display: flex; gap: 22px; flex-wrap: wrap; }
.asan-footer-yasal a { font-size: 13.5px; color: rgba(255,255,255,.6) !important; }
.asan-footer-yasal a:hover { color: #fff !important; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .asan-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .asan-footer-marka { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .asan-footer-cta-ic { flex-direction: column; align-items: stretch; padding-top: 30px; padding-bottom: 30px; }
    .asan-footer-cta-butonlar { flex-direction: column; }
    .asan-footer-btn { justify-content: center; width: 100%; }
    .asan-footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .asan-footer-govde { padding: 40px 0 34px; }
    .asan-footer-alt-ic { flex-direction: column; align-items: flex-start; }
    .asan-footer-yasal { gap: 16px; }
}

/* ==========================================================================
   27. MOBİL HEADER
   --------------------------------------------------------------------------
   Üst bar e-posta ve telefonu ALT ALTA, ortalanmış basıyordu — iki satır
   dolusu dikey alan harcanıyordu. Tek satıra alındı ve masaüstü üst barla
   aynı kurumsal lacivert zemine geçirildi.
   ========================================================================== */

@media (max-width: 991px) {

    .mobile_header .top_bar_moblie {
        background: var(--asan-lacivert) !important;
        padding: 8px 0 !important;
    }
    .mobile_header .top_bar_moblie .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 20px;
    }
    .mobile_header .top_bar_moblie .mail_id,
    .mobile_header .top_bar_moblie .phone_no { margin: 0 !important; padding: 0 !important; }
    .mobile_header .top_bar_moblie a {
        display: inline-flex; align-items: center; gap: 7px;
        font-family: var(--asan-font-govde);
        font-size: 13.5px !important;
        color: rgba(255,255,255,.85) !important;
        white-space: nowrap;
    }
    .mobile_header .top_bar_moblie i { color: var(--asan-marka-acik) !important; font-size: 14px; }

    /* Logo + buton + hamburger satırı */
    .mobile_header .bottom_content { padding: 10px 0 !important; background: #fff; }
    .mobile_header .bottom_content .d-flex { justify-content: space-between; gap: 12px; }
    .mobile_header .mobile_logo img { max-height: 46px; width: auto; }
    .mobile_header .bottom_content ul {
        display: flex; align-items: center; gap: 10px;
        margin: 0; padding: 0; list-style: none;
    }
    .mobile_header .bottom_content .theme-btn.one {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14.5px !important;
        border-radius: 10px !important;
        white-space: nowrap;
    }

    /* Hamburger — dokunma hedefi 44px, çizgiler daha net */
    .mobile_header .hamburger_menu,
    .mobile_header .navbar_togglers {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px; height: 44px;
        border-radius: 10px;
        background: var(--asan-zemin);
        cursor: pointer;
        transition: background-color var(--asan-gecis);
    }
    .mobile_header .hamburger_menu:hover { background: var(--asan-cizgi); }
    .mobile_header .hamburger_menu .line {
        display: block;
        width: 20px; height: 2px;
        border-radius: 2px;
        background: var(--asan-lacivert);
        transition: transform var(--asan-gecis), opacity var(--asan-gecis);
    }
    /* Açıkken çarpıya dönüşsün */
    .mobile_header .hamburger_menu.is-active .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile_header .hamburger_menu.is-active .line:nth-child(2) { opacity: 0; }
    .mobile_header .hamburger_menu.is-active .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   28. AÇILIR MOBİL MENÜ (off-canvas)
   --------------------------------------------------------------------------
   Panel kimliksizdi: logo yok, düz liste, alt yarısı boş. Marka başlığı,
   daha büyük dokunma hedefleri ve altta iletişim CTA'sı eklendi.
   ========================================================================== */

.crt_mobile_menu .menu-box {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    box-shadow: 0 0 60px rgba(12,31,63,.28);
}
.crt_mobile_menu .menu-backdrop { background: rgba(12,31,63,.55); backdrop-filter: blur(2px); }

/* Kapat düğmesi */
.crt_mobile_menu .close-btn {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 5;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--asan-zemin);
    color: var(--asan-lacivert);
    font-size: 15px;
    transition: background-color var(--asan-gecis), transform var(--asan-gecis);
}
.crt_mobile_menu .close-btn:hover { background: var(--asan-cizgi); transform: rotate(90deg); }

/* Marka başlığı */
.asan-mm-ust {
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--asan-cizgi);
}
.asan-mm-logo { display: inline-block; max-width: 190px; }
.asan-mm-logo img { max-height: 46px; width: auto; display: block; }
.asan-mm-logo span {
    font-family: var(--asan-font-baslik);
    font-size: 19px; font-weight: 800;
    color: var(--asan-lacivert);
}

/* Arama */
.crt_mobile_menu form { padding: 18px 22px 6px; position: relative; }
.crt_mobile_menu form .search {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--asan-cizgi-koyu) !important;
    border-radius: 12px !important;
    padding: 0 52px 0 16px !important;
    font-size: 16px !important;
    background: #fff;
}
.crt_mobile_menu form .search:focus {
    border-color: var(--asan-marka) !important;
    box-shadow: 0 0 0 3px rgba(0,110,181,.13) !important;
}
.crt_mobile_menu form .sch_btn {
    position: absolute;
    right: 28px; top: 24px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 9px;
    background: var(--asan-marka);
    color: #fff;
}

/* Menü listesi */
.crt_mobile_menu .menu-outer { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 14px; }
.crt_mobile_menu .navbar_nav { list-style: none; margin: 0; padding: 0; }
.crt_mobile_menu .navbar_nav > li { border-bottom: 1px solid var(--asan-cizgi); }
.crt_mobile_menu .navbar_nav > li:last-child { border-bottom: 0; }
.crt_mobile_menu .navbar_nav li a {
    display: block;
    font-family: var(--asan-font-baslik) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--asan-lacivert) !important;
    padding: 14px 10px !important;    /* dokunma hedefi >= 44px */
    border-radius: 8px;
    transition: background-color var(--asan-gecis), color var(--asan-gecis);
}
.crt_mobile_menu .navbar_nav li a:hover,
.crt_mobile_menu .navbar_nav li.current-menu-item > a {
    background: var(--asan-marka-soluk);
    color: var(--asan-marka) !important;
}

/* Alt menülü satırlar: bağlantı ve ok düğmesi AYNI SATIRDA.
   main.js şunu ekliyor: li.dropdown > div.dropdown-btn (açıkken .open)
   Bağlantı display:block olduğu için düğme alt satıra düşüyordu. */
.crt_mobile_menu .navbar_nav > li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.crt_mobile_menu .navbar_nav > li > a { flex: 1 1 auto; min-width: 0; }
.crt_mobile_menu .navbar_nav > li > .dropdown-btn { flex: 0 0 auto; margin-left: 8px; }
.crt_mobile_menu .navbar_nav > li > ul { flex: 1 1 100%; }

.crt_mobile_menu .navbar_nav .dropdown-btn {
    width: 38px; height: 38px;
    border: 1px solid var(--asan-cizgi-koyu);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--asan-metin-orta);
    cursor: pointer;
    font-size: 13px;
    transition: background-color var(--asan-gecis), border-color var(--asan-gecis),
                color var(--asan-gecis), transform var(--asan-gecis);
}
.crt_mobile_menu .navbar_nav .dropdown-btn:hover {
    border-color: var(--asan-marka);
    color: var(--asan-marka);
}
.crt_mobile_menu .navbar_nav .dropdown-btn.open {
    background: var(--asan-marka);
    border-color: var(--asan-marka);
    color: #fff;
    transform: rotate(180deg);
}

/* Alt menü — jQuery inline display ile açıp kapadığı için display'e DOKUNULMAZ */
.crt_mobile_menu .navbar_nav ul.dropdown-menu {
    list-style: none;
    margin: 0 0 10px;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--asan-cizgi);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.crt_mobile_menu .navbar_nav ul.dropdown-menu li { border: 0; display: block; }
.crt_mobile_menu .navbar_nav ul.dropdown-menu li a {
    font-family: var(--asan-font-govde) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--asan-metin-orta) !important;
    padding: 11px 10px !important;
}
.crt_mobile_menu .navbar_nav ul.dropdown-menu li a:hover {
    background: var(--asan-zemin);
    color: var(--asan-marka) !important;
}

/* ── Alt CTA bloğu ─────────────────────────────────────────────────────── */
.asan-mm-alt {
    margin-top: auto;
    padding: 18px 22px 22px;
    background: var(--asan-lacivert);
    color: rgba(255,255,255,.72);
}
.asan-mm-alt-etiket {
    display: block;
    font-family: var(--asan-font-baslik);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
    color: #7FC4F0;
    margin-bottom: 11px;
}
.asan-mm-butonlar { display: grid; gap: 9px; }
.asan-mm-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px;
    border-radius: 11px;
    font-family: var(--asan-font-baslik);
    font-size: 15px; font-weight: 700;
    transition: transform var(--asan-gecis);
}
.asan-mm-btn:active { transform: scale(.98); }
.asan-mm-ara { background: #fff; color: var(--asan-marka-koyu) !important; }
.asan-mm-wa  { background: var(--asan-wa); color: #fff !important; }

.asan-mm-bilgi { list-style: none; margin: 14px 0 0; padding: 0; text-align: center; }
.asan-mm-bilgi li { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.asan-mm-bilgi a { color: rgba(255,255,255,.78) !important; }

/* ==========================================================================
   29. MOBİL HEADER — TEMA KURALLARININ EZİLMESİ
   --------------------------------------------------------------------------
   assets/css/scss/elements/mobile.css içindeki şu kurallar sorun çıkarıyordu:
     .top_bar_moblie a            { display:block; min-width:100% }  -> alt alta
     .bottom_content .d-flex div  { min-width:50% }                  -> buton devasa
     .mobile_logo img             { width:150px }                    -> logo yayılıyor
     .hamburger_menu              { top:14px }                       -> hizasız
     .hamburger_menu .line        { background-color: var(--menu-color) }
                                    --menu-color BEYAZ -> açık zeminde görünmez
   Aynı özgüllükte yazıldıkları için burada zincir uzatılıp !important veriliyor.
   ========================================================================== */

@media (max-width: 991px) {

    /* Üst bar: e-posta + telefon TEK SATIRDA */
    .mobile_header .top_bar_moblie a {
        display: inline-flex !important;
        min-width: 0 !important;
        width: auto !important;
        text-align: left !important;
    }
    .mobile_header .top_bar_moblie div { text-align: center !important; }
    .mobile_header .top_bar_moblie .mail_id { margin-bottom: 0 !important; }

    /* Logo + buton + hamburger satırı: sabit %50 genişlikler kaldırılır */
    .mobile_header .bottom_content .d-flex > div { min-width: 0 !important; }
    .mobile_header .bottom_content .d-flex > div:first-child { flex: 0 1 auto; }
    .mobile_header .bottom_content .d-flex > div:last-child  { flex: 0 0 auto; }
    .mobile_header .bottom_content ul li { margin-left: 10px !important; }

    /* Logo: en-boy oranı korunur, yayılmaz */
    .mobile_header .mobile_logo img,
    .mobile_header .logo_box .logo img {
        width: auto !important;
        max-width: 148px !important;
        max-height: 42px !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }
    .mobile_header .mobile_logo { min-width: 0 !important; padding: 0 !important; border-bottom: 0 !important; }

    /* İletişim butonu: orantılı */
    .mobile_header .bottom_content .d-flex .theme-btn,
    .mobile_header .bottom_content ul li .theme-btn {
        min-height: 42px !important;
        height: auto !important;
        line-height: 1.2 !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        white-space: nowrap;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Hamburger: hizalı, görünür ve dokunulabilir */
    .mobile_header .bottom_content .d-flex .nav_menu_mb { height: auto !important; }
    .mobile_header .hamburger_menu,
    .mobile_header .navbar_togglers.hamburger_menu {
        top: 0 !important;
        float: none !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 10px;
        background: var(--asan-zemin) !important;
        border: 1px solid var(--asan-cizgi);
        cursor: pointer;
    }
    .mobile_header .hamburger_menu::before { display: none !important; }
    .mobile_header .hamburger_menu .line,
    .mobile_header .navbar_togglers.hamburger_menu .line {
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 2px;
        /* --menu-color beyazdı; açık zeminde görünmüyordu */
        background: var(--asan-lacivert) !important;
        background-color: var(--asan-lacivert) !important;
    }
    .mobile_header .hamburger_menu.is-active .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile_header .hamburger_menu.is-active .line:nth-child(2) { opacity: 0; }
    .mobile_header .hamburger_menu.is-active .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   30. MOBİL MEGA MENÜ
   --------------------------------------------------------------------------
   Mega menü içeriği tam bir Elementor bölümü (section > column > widget).
   390px'lik panele sığmayınca beyaz kart, geniş boşluklar ve büyük ok
   ikonlarıyla dağılıyordu. Panelde Elementor dekorasyonu düzleştirilir,
   içerik sade bir bağlantı listesine indirgenir.
   ========================================================================== */

.crt_mobile_menu .mega_menu > .dropdown-menu { padding: 4px 0 8px 12px !important; }

/* Elementor kabuklarını düzleştir */
.crt_mobile_menu .mega_menu .elementor-section,
.crt_mobile_menu .mega_menu .elementor-container,
.crt_mobile_menu .mega_menu .elementor-column,
.crt_mobile_menu .mega_menu .elementor-widget-wrap,
.crt_mobile_menu .mega_menu .elementor-widget,
.crt_mobile_menu .mega_menu .elementor-widget-container {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
}
.crt_mobile_menu .mega_menu .elementor-container { display: block !important; }
.crt_mobile_menu .mega_menu .elementor-column { flex: 1 1 100% !important; }

/* Başlıklar */
.crt_mobile_menu .mega_menu .elementor-widget-heading .elementor-heading-title,
.crt_mobile_menu .mega_menu .widget_title,
.crt_mobile_menu .mega_menu h4,
.crt_mobile_menu .mega_menu h5 {
    font-family: var(--asan-font-baslik) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    color: var(--asan-metin-soluk) !important;
    margin: 14px 0 6px !important;
    padding: 0 !important;
}

/* Bağlantı listesi — sade satırlar */
.crt_mobile_menu .mega_menu ul,
.crt_mobile_menu .mega_menu .list_items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
.crt_mobile_menu .mega_menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
}
.crt_mobile_menu .mega_menu li a,
.crt_mobile_menu .mega_menu .list_items a {
    display: block !important;
    font-family: var(--asan-font-govde) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: var(--asan-metin-orta) !important;
    padding: 11px 10px !important;
    margin: 0 !important;
    border-radius: 8px;
    background: none !important;
}
.crt_mobile_menu .mega_menu li a:hover {
    background: var(--asan-zemin) !important;
    color: var(--asan-marka) !important;
}

/* Dekoratif ikonlar (↳ okları) mobilde yer kaplıyordu */
.crt_mobile_menu .mega_menu li a i,
.crt_mobile_menu .mega_menu li a svg,
.crt_mobile_menu .mega_menu .list_items i,
.crt_mobile_menu .mega_menu .elementor-icon,
.crt_mobile_menu .mega_menu .elementor-widget-image { display: none !important; }

/* Mega menü başlığındaki ok — normal menülerle aynı görünsün */
.crt_mobile_menu .navbar_nav > li.mega_menu > a > .fa,
.crt_mobile_menu .navbar_nav > li.mega_menu > a > span.fa {
    float: right;
    margin-left: 8px;
    color: var(--asan-metin-soluk);
}


/* ==========================================================================
   31. HERO EKMEK KIRINTISI — AYRAÇ
   creote_breadcrumb() düz <ul><li> basıyor, ayraç karakteri YOK; temanın
   ayracı kendi sarmalayıcı sınıfına bağlı ve hero'da o sınıf bulunmuyordu.
   Ayraç burada CSS ile eklenir (metin seçilebilirliğini bozmadan).
   ========================================================================== */
.asan-sayfa-yol .breadcrumb,
.asan-sayfa-yol ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.asan-sayfa-yol li { display: inline-flex; align-items: center; }
.asan-sayfa-yol li + li::before {
    content: "›";
    display: inline-block;
    margin: 0 9px;
    color: rgba(255,255,255,.4);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}
.asan-sayfa-yol li.active { color: rgba(255,255,255,.9) !important; }

/* ==========================================================================
   32. MASAÜSTÜ HEADER — YERLEŞİM  (header_default style_two)
   --------------------------------------------------------------------------
   Tema yapısı Bootstrap sütunlarına dayanıyor:
       .row > .logo_column(col-lg-4)  > .header_log_outer > .header_logo_box + .phone_box
             > .menu_column(col-lg-8) > .header_content_collapse > menü
   Yani logo ve telefon SOLDA aynı sütunda, menü sağda kalıyordu; menü ortalı
   değildi ve telefon logoya yapışıktı.

   Hedef: logo SOL · menü ORTA · iletişim SAĞ.
   Sütunları yıkmadan çözmek için .logo_column ve .header_log_outer
   "display: contents" yapılır — böylece logo ve telefon doğrudan .row'un
   flex öğesi olur ve order ile yerleştirilebilir. Markup'a dokunulmaz.
   ========================================================================== */

@media (min-width: 992px) {

    html body .header.header_default.style_two .row {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 28px;
        margin: 0;
    }

    /* Sütun kabuklarını saydamlaştır: çocukları .row'un öğesi olur */
    html body .header.header_default.style_two .logo_column,
    html body .header.header_default.style_two .header_log_outer {
        display: contents;
    }

    /* 1 — LOGO (sol) */
    html body .header.header_default.style_two .header_logo_box {
        order: 1;
        flex: 0 0 auto;
        padding: 0;
    }
    html body .header.header_default.style_two .header_logo_box .logo img {
        max-height: 52px;
        width: auto;
        display: block;
    }

    /* 2 — MENÜ (orta) */
    html body .header.header_default.style_two .menu_column {
        order: 2;
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        display: flex;
        justify-content: center;
        padding: 0;
    }
    html body .header.header_default.style_two .header_content_collapse { width: auto; }
    html body .header.header_default.style_two .header_menu_box .navbar_nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }
    html body .header.header_default.style_two .navbar_nav > li > a { padding: 10px 14px !important; }

    /* 3 — İLETİŞİM (sağ) */
    html body .header.header_default.style_two .phone_box {
        order: 3;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0 !important;
        padding: 9px 16px;
        border-radius: 12px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.14);
        transition: background-color var(--asan-gecis), border-color var(--asan-gecis);
    }
    html body .header.header_default.style_two .phone_box:hover {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.24);
    }
    html body .header.header_default.style_two .phone_box i {
        position: static !important;
        font-size: 21px;
        color: #7FC4F0;
        flex-shrink: 0;
    }
    html body .header.header_default.style_two .phone_box .text { text-align: left; }
    html body .header.header_default.style_two .phone_box .text small {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: rgba(255,255,255,.55);
        margin-bottom: 1px;
    }
    html body .header.header_default.style_two .phone_box .text a {
        font-family: var(--asan-font-baslik) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-decoration: none !important;
        white-space: nowrap;
    }
    html body .header.header_default.style_two .phone_box .text a:hover { color: #7FC4F0 !important; }

    /* Dar masaüstünde menü sıkışmasın */
    @media (max-width: 1300px) {
        html body .header.header_default.style_two .row { gap: 16px; }
        html body .header.header_default.style_two .navbar_nav > li > a { padding: 10px 10px !important; }
        html body .header.header_default.style_two .phone_box .text small { display: none; }
    }
}

/* ==========================================================================
   33. HEADER — KAPSÜL MENÜ, TEKLİF AL, TOGGLER KALDIRMA
   ========================================================================== */

/* Contact toggler kaldırıldı.
   Canlı işaretlemede iki adet var: masaüstü header'ında (icon-setup-dots)
   ve yapışkan header'da (icon-bar). Mobil hamburger AYRI bir öğedir
   (.navbar_togglers) — ona dokunulmaz. Butonu saran <li> de kapatılır ki
   geride boş bir dolgu kalmasın. */
.contact-toggler { display: none !important; }
.header_right_content li:has(> .contact-toggler) { display: none !important; }

@media (min-width: 992px) {

    /* ── MENÜ KAPSÜLÜ ───────────────────────────────────────────────────
       Menü şeffaf bir kapsülün içine alındı; öğe araları daraltıldı. */
    html body .header.header_default.style_two .header_menu_box .navbar_nav {
        gap: 4px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    /* Tema her li'ye "margin: 0 40px 0 0" ve "padding: 20px 0" veriyor;
       kapsül içinde bu araları aşırı açıyor ve kapsülü şişiriyordu. */
    html body .header.header_default.style_two .navbar_nav > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Tema açılır menü okunu li'nin DIŞINA koyuyor (right:-31px); eskiden
       li'nin 40px sağ margin'i bunu gizliyordu. Margin sıfırlanınca ok
       komşu menü öğesinin üstüne düşüyordu. Ok linkin içine alınır ve
       çarpmaması için o linke sağdan ek boşluk verilir. */
    html body .header.header_default.style_two .navbar_nav > li > .dropdown-btn {
        right: 3px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }
    /* Yalnızca .dropdown-btn'li öğeler. Mega menüde ok, main.js tarafından
       linkin İÇİNE inline <span> olarak ekleniyor; oraya ek boşluk vermek
       oku metinden koparırdı. */
    html body .header.header_default.style_two .navbar_nav > li.dropdown:not(.mega_menu) > a {
        padding-right: 28px !important;
    }

    html body .header.header_default.style_two .navbar_nav > li > a {
        padding: 9px 15px !important;
        border-radius: 999px;
        font-size: 15px !important;
        transition: background-color var(--asan-gecis), color var(--asan-gecis);
    }
    html body .header.header_default.style_two .navbar_nav > li > a:hover,
    html body .header.header_default.style_two .navbar_nav > li.current-menu-item > a,
    html body .header.header_default.style_two .navbar_nav > li.current_page_item > a {
        background: rgba(255,255,255,.14);
        color: #fff !important;
    }
    /* Kapsül içinde alt çizgi göstergesi gereksiz */
    html body .header.header_default.style_two .navbar_nav > li.current-menu-item::after,
    html body .header.header_default.style_two .navbar_nav > li.current_page_item::after { display: none; }

    /* ── LOGO ───────────────────────────────────────────────────────────
       Tema logoya sabit genişlik veriyordu; oran korunur. */
    html body .header.header_default.style_two .header_logo_box .logo img {
        width: auto !important;
        max-width: 190px !important;
        max-height: 46px !important;
        height: auto !important;
        object-fit: contain;
    }

    /* ── SAĞ AKSİYON ALANI ─────────────────────────────────────────────── */
    html body .header.header_default.style_two .row { gap: 20px; }

    /* Telefon bloğu sadeleşti — buton onun yanında duracak */
    html body .header.header_default.style_two .phone_box {
        order: 3;
        background: none;
        border: 0;
        padding: 0 2px 0 0;
    }
    html body .header.header_default.style_two .phone_box:hover { background: none; border: 0; }

    html body .header.header_default.style_two .asan-header-teklif {
        order: 4;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 20px;
        border-radius: 999px;
        background: #fff;
        color: var(--asan-marka-koyu) !important;
        font-family: var(--asan-font-baslik);
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
        min-height: 44px;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        transition: transform var(--asan-gecis), box-shadow var(--asan-gecis), background-color var(--asan-gecis);
    }
    html body .header.header_default.style_two .asan-header-teklif:hover {
        transform: translateY(-2px);
        background: #EAF3FA;
        color: var(--asan-marka-koyu) !important;
        box-shadow: 0 10px 26px rgba(0,0,0,.24);
    }

    @media (max-width: 1400px) {
        html body .header.header_default.style_two .row { gap: 14px; }
        html body .header.header_default.style_two .navbar_nav > li > a { padding: 9px 11px !important; font-size: 14.5px !important; }
        html body .header.header_default.style_two .phone_box .text small { display: none; }
    }
    @media (max-width: 1200px) {
        html body .header.header_default.style_two .phone_box { display: none; }
    }
}



/* ==========================================================================
   34. BELGE ŞABLONU — SAYFA SIDEBAR'I VE TAM GENİŞLİK BÖLÜMLER
   --------------------------------------------------------------------------
   Belge sayfalarının içeriği Elementor ile "metin + sidebar" iki sütun
   olarak kurulmuş, altında da tam genişlik pazarlama bölümleri var.
   PHP tarafında (asan_belge_parcala) içerik üçe ayrılır; burada taşınan
   iki parça yeni yerlerine göre biçimlendirilir.
   ========================================================================== */

/* ── Sayfanın kendi sidebar'ı → sağ rayda kart yığını ─────────────────────
   Bu blok, Elementor şablonunun (post-7018.css) !important'lı kurallarıyla
   yarışır; bu yüzden seçiciler .asan-yan-sayfa + .elementor ile
   özgüllük bakımından onların üstüne çıkarılmıştır.

   TASARIM KARARI: dış kart YOK. Şablonun içinde zaten kendi beyaz kartı
   olan widget'lar var (bağlantı listesi, iletişim kutuları); hepsini bir
   kartın içine almak "kart içinde kart" görüntüsü ve hizasızlık yaratıyordu.
   Artık her widget kendi kartı; alttaki CTA kartıyla aynı dilde. */
.asan-yan-sayfa {
    position: relative;
    margin-bottom: 22px;
}

/* Elementor sütun genişlikleri ve şablondan gelen dikey ayraç/kaydırma
   sıfırlanır. bf28cd8 kapsayıcısında "border-left: .2px" + "margin-left: 20px"
   var: iki sütunlu düzende makaleyi sidebar'dan ayıran çizgiydi, rayda
   kartın dibine yapışık ince bir çizgi ve 20px'lik kayma olarak kalıyordu. */
.asan-yan-sayfa .elementor .elementor-element.e-con,
.asan-yan-sayfa .elementor .e-con-inner,
.asan-yan-sayfa .elementor .elementor-widget-wrap,
.asan-yan-sayfa .elementor .elementor-container,
.asan-yan-sayfa .elementor .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
}
.asan-yan-sayfa .elementor .elementor-element.e-con {
    --margin-left: 0px;
    --margin-right: 0px;
    --border-left-width: 0px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.asan-yan-sayfa .elementor-widget:not(:last-child) { margin-bottom: 0 !important; }

/* ── Başlık: kart bandı değil, kartların üstünde sade bir başlık ── */
.asan-yan-sayfa .title_all_box {
    margin: 0 0 4px !important;
    padding: 0 2px !important;
    background: none !important;
    border: 0 !important;
}
.asan-yan-sayfa .title_sections { text-align: left !important; margin: 0 !important; }
.asan-yan-sayfa .before_title {
    display: block;
    margin: 0 0 2px !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--asan-marka) !important;
}
.asan-yan-sayfa .title_sections .title,
.asan-yan-sayfa .title_sections h2,
.asan-yan-sayfa .title_sections h3 {
    margin: 0 !important;
    font-family: var(--asan-font-baslik);
    font-size: 18px !important;
    line-height: 1.3 !important;
    color: var(--asan-marka-koyu) !important;
}
.asan-yan-sayfa .title_all_box .devider,
.asan-yan-sayfa .title_all_box .sub_title,
.asan-yan-sayfa .title_all_box p { display: none !important; }

/* ── Bağlantı listesi: kendi kartı ─────────────────────────────────────
   Şablon bu widget'a "padding: 40px 30px" veriyordu; satır ayraçları
   kartın kenarlarıyla hizalanmıyor, içeriden başlıyordu. */
.asan-yan-sayfa .elementor .widget.widget_nav_menu {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--asan-cizgi) !important;
    border-radius: var(--asan-r) !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}
/* Kesilen satır "bozuk" değil "kaydırılabilir" okunsun */
.asan-yan-sayfa .elementor .widget.widget_nav_menu::after {
    content: "";
    position: absolute;
    left: 1px; right: 1px; bottom: 1px;
    height: 40px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
}
.asan-yan-sayfa .elementor .widget > h2,
.asan-yan-sayfa .elementor .widget .widget-title { display: none !important; }

.asan-yan-sayfa .elementor .widget.widget_nav_menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--asan-cizgi) transparent;
}
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul::-webkit-scrollbar { width: 6px; }
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul::-webkit-scrollbar-thumb {
    background: var(--asan-cizgi);
    border-radius: 3px;
}

/* Satırlar: şablonun 13px margin/padding + border-top dayatması sıfırlanır,
   ayraç kartın tam genişliğine oturur. */
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li + li {
    border-top: 1px solid var(--asan-cizgi) !important;
}
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li::before { display: none !important; }

.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li a {
    display: block;
    padding: 10px 16px 10px 14px !important;
    font-family: var(--asan-font-govde);
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500;
    color: var(--asan-metin) !important;
    border-left: 3px solid transparent;
    transition: background-color var(--asan-gecis), color var(--asan-gecis), border-color var(--asan-gecis);
}
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li a:hover {
    background: var(--asan-zemin);
    color: var(--asan-marka) !important;
    border-left-color: var(--asan-marka);
}
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li.current-menu-item > a,
.asan-yan-sayfa .elementor .widget.widget_nav_menu ul li.current_page_item > a {
    background: var(--asan-zemin);
    color: var(--asan-marka-koyu) !important;
    font-weight: 700;
    border-left-color: var(--asan-marka);
}

/* ── Şablondaki iletişim kutuları: CTA kartıyla aynı dilde ── */
.asan-yan-sayfa .elementor .elementor-widget-creote-contact-box-v1 + .elementor-widget-creote-contact-box-v1 { margin-top: 0 !important; }

/* ── Yapışkanlık ─────────────────────────────────────────────────────────
   Rayın tamamı yapışkan olsaydı sidebar listesiyle birlikte ekrandan
   taşar, alt kısmı okunamazdı. Bu yüzden ray akışta kalır, yalnızca
   CTA kartı yapışır. */
@media (min-width: 1200px) {
    /* Ray kendi kaydırma kabı OLMAMALI: aksi halde içindeki yapışkan CTA
       viewport'a değil rayın scrollport'una göre konumlanır ve altındaki
       sidebar kartının üstüne biner. */
    .asan-belge-sayfa .asan-sag-ray {
        position: static;
        max-height: none;
        overflow: visible;
        /* Izgara satırının tamamına uzat. Aksi halde ray yalnızca kendi
           içeriği kadar yüksek olur; en altta duran CTA'nın yapışacak
           yolu ~28px'e düşer ve yapışkanlık fiilen çalışmaz. */
        align-self: stretch;
    }
    .asan-belge-sayfa .asan-sag-ray .asan-yan-cta {
        position: sticky;
        top: 104px;
        z-index: 5; /* Elementor kutuları position:relative; CTA üstte kalsın */
    }
}

/* Sidebar sütunu içerikten ayrıldığında geriye kalan makale sütunu, iki
   sütunluyken aldığı yüzde genişlikte kalıyor ve sağında koca bir boşluk
   bırakıyordu. :only-child sayesinde bu kural YALNIZCA sidebar gerçekten
   çıkarılmışsa (tek sütun kaldıysa) devreye girer. */
.asan-belge-sayfa .asan-single-body .e-con-inner > .elementor-element.e-con:only-child,
.asan-belge-sayfa .asan-single-body .elementor-container > .elementor-column:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
}

/* ── Sayfanın tam genişlik bölümleri → 3 sütunun altında ─────────────────── */
.asan-belge-ek {
    margin-top: 60px;
    width: 100%;
}
.asan-belge-ek > .elementor { width: 100%; }
/* Ayrıştırma sonrası ilk bölümün üst boşluğu iki katına çıkmasın */
.asan-belge-ek > .elementor > .elementor-element:first-child { margin-top: 0 !important; }

@media (max-width: 1199px) {
    .asan-belge-ek { margin-top: 44px; }
    /* Ray tek sütuna indiğinde sidebar kartı da normal akışta kalsın */
    .asan-yan-sayfa { max-width: 520px; margin-inline: auto; }
}

/* ==========================================================================
   35. ODAKLI ŞABLONLARDA HERO'NUN HEADER'IN ARKASINA OTURMASI
   --------------------------------------------------------------------------
   Tema #content'e "padding: 100px 0 70px" veriyor. Bu şablonlarda header
   position:absolute olduğu için o 100px, header'ın altında boş beyaz bir
   bant bırakıyor ve beyaz menü yazıları beyaz zemine düşüyordu.
   Hero'nun kendi padding-top'ı (168px) zaten header payını içeriyor.
   ========================================================================== */
.asan-odakli-yazi #content { padding-top: 0; }