/* =============================================================================
   MOBİL KATMAN — tasarımda karşılığı OLMAYAN, ölçümle gerekçelendirilmiş kurallar.

   NEDEN VAR: Claude Design handoff'u masaüstü-only. `.dc.html` kaynaklarının
   hiçbirinde @media yok (Site Header/Footer, İletişim, Eğitmenlerimiz,
   Akreditasyonlarımız, Blog, Nasıl Sertifika Alırım, SSS, Eğitimler,
   Eğitim Detay = 0 adet; Hakkımızda ve Ana Sayfa = 1'er adet). Yerleşimler
   satır içi `display:flex` / `grid-template-columns` ile sabit.

   KURAL: masaüstü (>=1024px) görünümü DEĞİŞMEZ; her şey @media içinde.
   Tasarımdan gelen inline style'lar stylesheet'i yendiği için, inline yazılmış
   bir özelliği ezen her kuralda `!important` zorunludur.

   Bu dosya sayfaya özel stillerden ÖNCE yüklenir; bir sayfanın kendi mobil
   kuralı burayı ezmek isterse (aynı !important) sonra geldiği için kazanır.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1) LAYOUT VIEWPORT'UN GENİŞLEMESİ  — en kritik hata.

   ÖLÇÜM (390px cihaz, staging + yerel, birebir aynı):
     /akreditasyonlarimiz/      innerWidth 675px  → sayfa %58 ölçekle çiziliyor
     /iptal-ve-iade-kosullari/  innerWidth 635px
     /on-bilgilendirme-formu/   innerWidth 635px
     /nasil-sertifika-alirim/   innerWidth 559px
     /blog/                     innerWidth 449px
     /hakkimizda/               innerWidth 438px
     /iletisim/                 innerWidth 394px
     /egitmenlerimiz/           innerWidth 392px
   İçerik cihazdan genişse mobil tarayıcı layout viewport'u BÜYÜTÜR; sayfa
   küçültülerek çizilir, 11px yazı fiilen ~6px olur.

   Taşıranlar dekoratif/mutlak konumlu öğeler: `span[data-orb]` (600x600px blur
   yuvarlakları), `position:absolute` figür kaymaları, sarmalayamayan
   `white-space:nowrap` metinler.

   `overflow-x: clip` (hidden DEĞİL): clip kaydırma kabı OLUŞTURMAZ, bu yüzden
   header'ın `position:sticky` davranışı bozulmaz. Ölçüldü: beş sayfada da
   innerWidth 390'a döndü.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app { overflow-x: clip; }
}

/* -----------------------------------------------------------------------------
   2) Sepet açılırı ekranın SOLUNDAN taşıyordu.
   Ölçüm: her sayfada `.fes-cart-flyout` sol:-24px sağ:328px (inline
   `width:352px; right:0`; ebeveynin sağ kenarı 328px olunca sol -24'e düşüyor).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	/*
	 * DÜZELTME (ikinci tur): önce `left/right:12px` ile viewport'a yaymayı
	 * denemiştim; yanlıştı. Panel `position:absolute` ve kapsayıcı bloğu
	 * `.fes-hdr__cart` — sepet butonu sade ikona çevrilince o kap 44px'e
	 * indi, panel de 30px'e çöktü (ölçüldü).
	 *
	 * ASIL SORUN KONUM DEĞİL ETKİLEŞİM: panel yalnız `:hover` /
	 * `:focus-within` ile açılıyor (chrome-header.css). Dokunmatikte hover
	 * yoktur; mobil tarayıcılar dokunuşta sahte hover üretip paneli bir an
	 * gösteriyor, aynı anda bağlantı `/sepet/`e gidiyor — kullanıcı bunu
	 * "mini cart bozuk görünüyor" olarak bildirdi.
	 *
	 * Dar ekranda panel TAMAMEN kapatılır: sepet ikonuna dokunmak doğrudan
	 * sepet sayfasına götürür (mobilde beklenen davranış). Masaüstünde
	 * açılır sepet aynen çalışmaya devam eder.
	 */
	.fes-app .fes-hdr__cart > [data-dd-panel] { display: none !important; }
}

/* -----------------------------------------------------------------------------
   3) 12px altı yazı — mobilde okunaksız.
   Envanter (inline): 10px ×2, 10.5px ×5, 11px ×14, 11.5px ×37.
   Tabanı 12px'e çekiyoruz; tipografik hiyerarşi korunuyor çünkü bu boyutlar
   zaten en alt kademe (etiket/rozet/üst başlık).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.fes-app [style*="font-size:10px"],
	.fes-app [style*="font-size:10.5px"],
	.fes-app [style*="font-size:11px"],
	.fes-app [style*="font-size:11.5px"] { font-size: 12px !important; }
}

/* -----------------------------------------------------------------------------
   4) Dokunma hedefleri — WCAG 2.2 "Target Size (Minimum)" 24px, iOS/Android
   kılavuzu 44px. Ölçüm: sayfa başına 30–44 adet 44px altı hedef.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {

	/* Katalog kategori filtresi: onay kutusu 16x16px'di, parmakla isabet
	   ettirilemiyordu. Kutunun kendisi büyütülüyor VE etiket satırının tamamı
	   44px yüksekliğinde tıklanabilir alana çevriliyor. */
	.fes-app [data-fes-page="courses"] label:has(input[name="kategori"]) {
		min-height: 44px !important;
		padding-block: 4px !important;
	}
	.fes-app input[name="kategori"] {
		width: 20px !important;
		height: 20px !important;
		flex: 0 0 auto !important;
	}

	/* Şifre görünürlük düğmesi (22x22) ve "beni hatırla" (17x17). */
	.fes-app [data-fes-pw-toggle],
	.fes-app .woocommerce-form-login__rememberme input,
	.fes-app input[type="checkbox"] { min-width: 20px; min-height: 20px; }

	.fes-app [data-fes-pw-toggle] {
		width: 44px !important; height: 44px !important;
		display: inline-flex !important; align-items: center; justify-content: center;
	}

	/* Footer bağlantıları 17–19px yükseklikteydi; satır yüksekliğiyle 44px'e
	   çıkarılıyor, görsel boyut (font-size) DEĞİŞMİYOR. */
	.fes-app .fes-ftr a,
	.fes-app nav[aria-label] a { min-height: 44px; display: inline-flex; align-items: center; }

	/* Sayfalama okları 18x44px'di. */
	.fes-app [data-fes-page="blog"] nav a,
	.fes-app [data-fes-page="courses"] nav a { min-width: 44px; justify-content: center; }

	/* KVKK / sözleşme onay kutuları flex içinde 13px'e sıkışıyordu. */
	.fes-app label > input[type="checkbox"] { flex: 0 0 auto !important; }
}

/* -----------------------------------------------------------------------------
   5) ÇOK KOLONLU IZGARALAR — mobilde çökmüyor, SIKIŞIYORdu.

   Bu yüzden yatay taşma testi de yanılmıştı: yerleşim taşmıyor, çocuklar
   ezilerek sığıyor. Ölçülen en dar çocuk genişlikleri (390px):
     /blog/    6 kolonlu kategori ızgarası ....  2px
     /blog/    kenar çubuğu (236px + 1fr) .... 46px
     /hakkimizda/ 4 kolonlu değerler ......... 60px
     /hakkimizda/ hero (1fr + 320-520px) ..... metin kolonu ~150px (kelime/satır)
     /egitmenlerimiz/ 4 kolonlu ×3 ........ 60-63px
     /nasil-sertifika-alirim/ 2 kolonlu ...... 32px
     /iletisim/ 3 kolonlu ..................... 90px
     /akreditasyonlarimiz/ 4 kolonlu ........ 122px

   YAKLAŞIM: hepsini tek kolona indir, ikon+metin satırlarını HARİÇ TUT.
   Hariç tutulanlar — İLK KOLONU DAR (<=56px) OLAN ikon/rozet satırları.
   Liste, partial'lardaki TÜM `grid-template-columns` tanımları sayılarak
   çıkarıldı; tahmin değil:
     `48px 1fr`                  ×4  — ikon + metin
     `52px 1fr auto`             ×1  — ikon + metin + aksiyon
     `56px minmax(0, 1fr)`       ×1  — hero arama kutusu (ikon + etiket/alan)
     `56px minmax(0, 1fr) auto`  ×1  — aynısı + buton
     `auto 1fr auto`             ×1
     `auto minmax(0, 1fr)`       ×4  — rozet + metin
     `auto-fit`                      — zaten akışkan
     tek kolonlu `minmax(0, 1fr)`    — dokunacak bir şey yok

   DİKKAT: `236px …` ve `252px …` de piksel başlıyor ama bunlar KENAR ÇUBUĞU,
   ikon değil — tek kolona İNMELİ, hariç tutulmadılar.

   0.7.0'da hariç tutma listesi eksikti: `56px minmax(0, 1fr)` yakalanmayınca
   ana sayfa hero'sundaki arama kutusu tek kolona düştü ve ikon/etiket/alan
   üst üste dizildi (kullanıcı bildirdi, ölçümle doğrulandı).
   Liste yerine "hepsi eksi hariç tutulanlar" seçildi: tasarımdaki ızgara
   tanımı PHP ile üretilenler de dahil (`repeat(<?php count() ?>, …)`) hepsi
   yakalansın, yeni bir bölüm eklenince kural güncellenmek zorunda kalmasın.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app [style*="grid-template-columns"]:not([style*="grid-template-columns:48px 1fr"]):not([style*="grid-template-columns:52px 1fr auto"]):not([style*="grid-template-columns:56px minmax(0, 1fr)"]):not([style*="grid-template-columns:auto 1fr auto"]):not([style*="grid-template-columns:auto minmax(0, 1fr)"]):not([style*="auto-fit"]):not([style*="grid-template-columns:minmax(0, 1fr);"]) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Tablet (768–1023px): 3 ve 4 kolonlu kart ızgaraları tek kolonda gereksiz
   uzuyor; iki kolon hem okunur hem sayfa boyunu makul tutuyor. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.fes-app [style*="grid-template-columns:repeat(3"],
	.fes-app [style*="grid-template-columns:repeat(4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -----------------------------------------------------------------------------
   6) Tek kolona inince bozulan yardımcı kurallar.
   - Sabit piksel genişlikli içerik öğeleri (ör. `aside > img { width:298px }`)
     artık kabına sığmalı.
   - `white-space:nowrap` metinler tek kolonda taşıyor; sarmalayabilsinler.
     Rozet/etiket görünümü bozulmasın diye YALNIZ uzun metinler hedeflenmiyor,
     kural geneldir ama nowrap zaten sadece kısa etiketlerde kullanılmış.
   - Mutlak konumlu figür kaymaları (figcaption `left:-20px`) dar ekranda
     kabın dışına taşıyordu.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app img,
	.fes-app video { max-width: 100% !important; height: auto; }

	/*
	 * SVG'ler bu kuralın DIŞINDA. 0.7.0'da `svg { max-width:100%; height:auto }`
	 * yazmıştım ve `width="22" height="22"` öznitelikli header ikonlarını
	 * 12x12px'e ezdi (ölçüldü: hamburger ve arama ikonu 44x44 dokunma alanı
	 * içinde 12x12 çizim). Yalnız ÖZNİTELİKSİZ, akışkan SVG'ler sınırlanır.
	 */
	.fes-app svg:not([width]) { max-width: 100%; }

	.fes-app [style*="white-space:nowrap"] { white-space: normal !important; }
}

/* -----------------------------------------------------------------------------
   7) Kalan mobil düzeltmeleri (ilk turdan sonra ölçülerek bulundu).

   a) `font-size:clamp(10px, .78vw, 11.5px)` — viewport'a bağlı clamp'in ALT
      sınırı 390px'te devreye giriyor ve rozet 10px'e iniyor. Sabit değerleri
      hedefleyen kural (3. madde) clamp ifadesini yakalamıyordu.
   b) Footer sosyal ikonları 38x44px kalmıştı (yükseklik düzeldi, genişlik değil).
   c) Üst şeritteki telefon bağlantısı 118x17px — en sık kullanılan dönüşüm
      bağlantısı ve en küçük hedeflerden biriydi.
   d) "İçeriğe geç" atlama bağlantısı 1x1px; bu KASITLI (yalnız odaklanınca
      görünür) — dokunma hedefi kuralının dışında bırakılıyor, "düzeltilmiyor".
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.fes-app [style*="font-size:clamp(10px"],
	.fes-app [style*="font-size:clamp(11px"],
	.fes-app [style*="font-size:clamp(11.5px"] { font-size: 12px !important; }
}

@media (max-width: 1023.98px) {
	.fes-app .fes-ftr a[aria-label],
	.fes-app footer a[aria-label] { width: 44px !important; height: 44px !important; }

	.fes-app .fes-hdr__topbar a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* -----------------------------------------------------------------------------
   8) TİPOGRAFİ ÖLÇEĞİ — başlıklar masaüstü boyutlarıyla geliyordu.

   Tasarımda @media yok; h1/h2/h3 satır içi sabit piksel alıyor ve 390px'te
   aynen basılıyordu. ÖLÇÜLDÜ (390px):
     /hakkimizda/ H1 38px → 4 satır
     ana sayfa    H2 40px → 2 satır, H2 38px → 5 satır
   Envanter (satır içi, h1/h2): 26px ×39 · 32px ×6 · 36px ×3 · 40px ×6 ·
   42px ×1 · 44px ×2 · 60px ×1.

   Her boyut KENDİ clamp'ine eşleniyor; tek bir genel kural yazsaydım 40px'lik
   ve 26px'lik başlıklar aynı boya inip tipografik hiyerarşi düzleşirdi.
   Üst sınır masaüstü değeri: >=1024px'te hiçbir şey değişmez.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app :is( h1, h2, h3 )[style*="font-size:26px"] { font-size: clamp(20px, 5.6vw, 26px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:32px"] { font-size: clamp(22px, 6.4vw, 32px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:36px"] { font-size: clamp(23px, 6.9vw, 36px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:38px"] { font-size: clamp(24px, 7.1vw, 38px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:40px"] { font-size: clamp(25px, 7.4vw, 40px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:42px"] { font-size: clamp(25px, 7.6vw, 42px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:44px"] { font-size: clamp(26px, 7.8vw, 44px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:60px"] { font-size: clamp(30px, 9vw, 60px) !important; }

	/* Sıkı satır aralıkları küçük boyutta harfleri birbirine yapıştırıyor. */
	.fes-app :is( h1, h2 )[style*="line-height:1.0"],
	.fes-app :is( h1, h2 )[style*="line-height:1.1"] { line-height: 1.14 !important; }
}

/* -----------------------------------------------------------------------------
   9) BÖLÜM KABI YAN DOLGUSU — mobilde 40px fazla.

   Tasarımın sayfa kabı `max-width:1280px; padding:0 40px` (59 yerde). 1440px'te
   doğru, 390px'te içeriğe yalnız 310px kalıyor ve sayfa dar/sıkışık duruyor.
   20px'e çekiliyor; 640px üstünde kademeli olarak tasarım değerine dönüyor.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app [style*="max-width:1280px"] {
		padding-left: clamp(18px, 5vw, 40px) !important;
		padding-right: clamp(18px, 5vw, 40px) !important;
	}
}

/* -----------------------------------------------------------------------------
   8b) clamp() ile yazılmış başlıklar — ALT SINIR mobilde tuzağa dönüşüyor.

   Tasarım bazı başlıklarda `font-size:clamp(34px, 3.4vw, 48px)` kullanıyor.
   390px'te 3.4vw = 13px, yani değer ALT SINIRA (34px) kilitleniyor; clamp
   masaüstünü küçültmek için yazılmış, mobili düşünmüyor. 8. maddedeki sabit
   piksel kuralları bunları YAKALAMIYOR (ölçüldü: /hakkimizda/ H1 38px kaldı).

   Envanter (satır içi, h1/h2/h3), alt sınıra göre:
     28px ×1 · 30px ×3 · 32px ×1 · 34px ×8 · 36px ×6 · 38px ×5
   Üst sınır olarak alt sınırın kendisi alınıyor: >=1024px'te tasarımın kendi
   clamp'i zaten daha büyük değer üretiyor ve bu blok çalışmıyor.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(28px"] { font-size: clamp(21px, 5.9vw, 28px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(30px"] { font-size: clamp(22px, 6.2vw, 30px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(32px"] { font-size: clamp(22px, 6.4vw, 32px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(34px"] { font-size: clamp(23px, 6.7vw, 34px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(36px"] { font-size: clamp(23px, 6.9vw, 36px) !important; }
	.fes-app :is( h1, h2, h3 )[style*="font-size:clamp(38px"] { font-size: clamp(24px, 7.1vw, 38px) !important; }
}

/* -----------------------------------------------------------------------------
   10) ADIM GÖSTERGESİ (Sepet → Ödeme → Panel Erişimi)

   `.fes-steps` üç durak ve aralarında 44px'lik bağlayıcı çizgilerden oluşuyor;
   `flex-wrap:wrap` olduğu için dar ekranda son durak ("Panel Erişimi") alt
   satıra düşüyordu (kullanıcı bildirdi). Bağlayıcı çizgiler mobilde gizlenip
   boşluk daraltılınca üç durak da tek satıra sığıyor.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.fes-app .fes-steps {
		gap: 10px !important;
		justify-content: space-between;
	}

	.fes-app .fes-steps > span[aria-hidden="true"] { display: none !important; }
	.fes-app .fes-steps > span { font-size: 12px !important; }
}

/* -----------------------------------------------------------------------------
   11) YAPIŞKAN (`position:sticky`) ÖĞELER MOBİLDE İPTAL.

   Tasarım masaüstünde yan panelleri/menüleri kaydırma boyunca sabit tutuyor.
   Tek kolona inen mobilde bu panel EKRANDA ASILI KALIP içeriğin üstüne
   biniyor — kullanıcı blog arşivinde bildirdi ("Okuduklarını uygulamaya dök"
   kutusu sabit kalıp yazıların üstüne çıkıyor).

   TARANDI: satır içi `position:sticky` kullanan 11 öğe, 8 sayfa tipinde:
     blog · post · courses · course · faq (×2) · legal (×5)
   Bunlardan yalnız course / courses / faq için mobil iptali yazılmıştı;
   blog, post ve beş yasal sayfa açıkta kalmıştı. Tek tek yamamak yerine
   genel kural: dar ekranda hiçbir şey yapışkan kalmaz.

   HEADER ETKİLENMEZ: o `position:fixed` kullanıyor (chrome/header.php),
   bu kural yalnız `sticky` olanları hedefler.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app [style*="position:sticky"] {
		position: static !important;
		top: auto !important;
	}
}

/* -----------------------------------------------------------------------------
   12) MOBİL YOĞUNLUK PAKETİ (müşteri geri bildirimi, ~%35 sıkılaştırma)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	/* a) Bölüm araları. Ölçülen tasarım değerleri 96–116px dikey dolgu;
	   390px'te sayfayı gereksiz uzatıyordu. clamp ile ~%35 azaltılıyor
	   (390px'te ~70px). >=768px'te dokunulmaz. */
	.fes-app section[style*="padding:104px 0 112px"],
	.fes-app section[style*="padding:96px 0 112px"],
	.fes-app section[style*="padding:112px 0 104px"],
	.fes-app section[style*="padding:110px 0 116px"],
	.fes-app section[style*="padding:110px 0 104px"] {
		padding-top: clamp(52px, 18vw, 72px) !important;
		padding-bottom: clamp(52px, 18vw, 72px) !important;
	}

	/* b) Footer: gövde ve alt şerit aynı oranda. */
	.fes-app [style*="padding:60px 0 56px"] {
		padding-top: 38px !important;
		padding-bottom: 34px !important;
	}
	.fes-app [style*="padding:22px 0 30px"] {
		padding-top: 14px !important;
		padding-bottom: 18px !important;
	}

	/* c) Güven şeridi (12.000+ mezun · 30.000+ saat · %98 memnuniyet).
	   Tasarım `repeat(auto-fit, minmax(210px,1fr))` kullanıyor; 390px'te
	   kullanılabilir genişlik 310px olduğu için TEK kolon sığıyor ve üç
	   bilgi alt alta diziliyordu (kullanıcı bildirdi). Alt sınır düşürülüp
	   iki kolona alınıyor; `height:148px` sabit yüksekliği de serbest
	   bırakılıyor, yoksa iki satır taşardı. */
	.fes-app [style*="repeat(auto-fit, minmax(210px, 1fr))"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px 12px !important;
	}
	.fes-app section[style*="height:148px"] {
		height: auto !important;
		padding: 24px 0 !important;
	}

	/* d) Eğitim kartı: başlık ile "Online • Ömür boyu erişim" arası.
	   Başlıkta `min-height:70px` var — dört satırlık kart yüksekliklerini
	   ızgarada hizalamak için. Tek kolona inen mobilde hizalanacak komşu
	   yok, kısa başlıklarda altta boşluk bırakıyor. */
	.fes-app [data-fes-page="home"] h3[style*="min-height:70px"],
	.fes-app [data-fes-page="courses"] h3[style*="min-height:70px"] {
		min-height: 0 !important;
	}
}

/* -----------------------------------------------------------------------------
   13) Ana sayfa kısa hakkımızda görseli — kırpma odağı.

   ÖLÇÜLDÜ (sütun başına detay yoğunluğu, 1600x900 kaynak):
     %0–42   düz duvar, neredeyse hiç detay yok
     %45–98  ekibin tamamı; detay ağırlık merkezi %70

   Kutu `object-fit:cover` ile yanlardan kırpıyor ve pencere genişliği
   masaüstü ile mobilde ÇOK farklı — bu yüzden tek bir değer ikisine birden
   yetmiyor:
     1440px → kutu 543x492, görselin yalnız %62'si görünür
      390px → kutu 321x492, görselin yalnız %37'si görünür

   Masaüstü %88: pencere %34–96'yı gösterir. Soldaki ~%8 duvar bilerek
   bırakıldı — "Eğitim içeriklerimiz…" başlığı oraya biniyor, sakin zemin
   okunurluğu koruyor.

   Mobil %75: pencere %47–84'ü gösterir; duvar tamamen dışarıda kalır,
   el sıkışan çift ve sağdaki grup içeride.
   -------------------------------------------------------------------------- */
.fes-app img[src*="stats-teamwork"] { object-position: 88% center !important; }

@media (max-width: 767.98px) {
	.fes-app img[src*="stats-teamwork"] { object-position: 75% center !important; }
}

/* -----------------------------------------------------------------------------
   14) Güven şeridi (30.000+ / 12.000+ / %98 / Doğrulanabilir)

   ÖLÇÜLDÜ: 390px ekranda "Doğrulanabilir" metninin sağ kenarı 425px —
   35px TAŞIYOR. Sebep: sayı/etiket `font:700 24px` sabit ve her hücre
   `48px ikon + 1fr` ızgarasında; 175px'lik kolona sığmıyor.

   Müşteri ayrıca "sayılar küçültülüp tek satır olsun" dedi. 390px'te dört
   metriği yan yana koymak hücre başına ~85px bırakır — 48px ikonla mümkün
   değil. Bu yüzden: ikon küçülür, sayı ölçeklenir, etiket sarabilir ve
   480px üstünde dördü tek sıraya geçer.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.fes-app [aria-label="Güven göstergeleri"] > div {
		gap: 14px 10px !important;
		padding: 0 16px !important;
	}
	.fes-app [aria-label="Güven göstergeleri"] > div > div {
		grid-template-columns: 34px minmax(0, 1fr) !important;   /* inline 48px 1fr */
		gap: 9px !important;
		min-width: 0;
	}
	.fes-app [aria-label="Güven göstergeleri"] span[style*="border-radius:50%"] {
		width: 34px !important; height: 34px !important;
	}
	.fes-app [aria-label="Güven göstergeleri"] span[style*="border-radius:50%"] svg {
		width: 18px; height: 18px;
	}
	/* Sayı/başlık: sabit 24px yerine kutuya göre ölçeklenir. */
	.fes-app [aria-label="Güven göstergeleri"] strong {
		font-size: clamp(13px, 3.9vw, 18px) !important;
		line-height: 1.1 !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
		min-width: 0;
	}
	.fes-app [aria-label="Güven göstergeleri"] div > div > div > span {
		font-size: 10.5px !important;
		margin-top: 4px !important;
		white-space: normal !important;
	}
}

/* 480px üstünde dördü tek sıra — müşterinin "tek satır" talebi. */
@media (min-width: 480px) and (max-width: 767.98px) {
	.fes-app [aria-label="Güven göstergeleri"] > div {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* -----------------------------------------------------------------------------
   15) Hakkımızda görseli mobilde ekranın tamamını kaplıyordu.

   Müşteri (21.08.2026): "Bu görsel neredeyse tam ekran kaplıyor, küçültme
   yapılabilir." Satır içi `height:492px` sabit; 390x844 ekranda görsel tek
   başına ekranın ~%58'i.

   Yükseklik düşünce KIRPMA PENCERESİ de değişiyor: kutu 321x492 iken görselin
   yalnız %37'si görünüyordu, 321x340'ta %54'ü görünüyor. Odak %75 aynı kalıyor
   (bkz. 13. bölüm) — daha geniş pencerede de ekip kadrajda.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.fes-app img[src*="stats-teamwork"] {
		height: clamp(260px, 64vw, 360px) !important;   /* satır içi 492px */
	}
}

/* -----------------------------------------------------------------------------
   16) Blog listesinde yazılar arası boşluk (müşteri talebi).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app[data-fes-page="blog"] article + article,
	.fes-app[data-fes-page="blog"] [data-fes-post-card] + [data-fes-post-card] {
		margin-top: 22px;
	}
}

/* -----------------------------------------------------------------------------
   17) İlgili eğitim kartında eski/yeni fiyat çok bitişikti (müşteri talebi:
   "fiyatlar arasındaki boşluk artırılabilir ya da alt kısma alınabilir").
   -------------------------------------------------------------------------- */
.fes-app [data-fes-page="post"] del,
.fes-app [data-fes-page="course"] del { margin-right: 8px; }
.fes-app del + ins,
.fes-app del + span { margin-left: 4px; }