/* ==========================================================================
   Ürün sayfası bileşenleri (urun-*)
   --------------------------------------------------------------------------
   Ürün sayfalarının paylaşılan sınıf sözleşmesi. İçerik yazarları çekirdek
   bloklara (group / columns / heading / paragraph / list / image / details /
   table / html) yalnızca buradaki sınıfları verir; görünüm tek yerden,
   bu dosyadan gelir.

   Bileşenler:
     urun-bolum        bölüm sarmalayıcı  (--acik açık gri · --koyu lacivert · --orta ortalı başlık)
     urun-etiket       bölüm üstü küçük büyük-harf başlık
     urun-giris-metni  bölümün giriş paragrafı
     urun-kartlar      yetenek kartları   (--2 · --3 · --4)  › urun-kart, urun-kart__ikon
     urun-ozellik      metin + ekran satırı (--ters yer değiştirir)
     urun-ekran        ekran görüntüsü çerçevesi (--mobil telefon çerçevesi)
     urun-logo         küçük logo · urun-logolar logo sırası
     urun-adimlar      numaralı adımlar   › urun-adim
     urun-rakamlar     rakam kutuları     › urun-rakam, urun-rakam__deger
     urun-liste        onay işaretli liste (--yok çarpı · --2 iki sütun)
     urun-tablo        karşılaştırma tablosu
     urun-sss          sık sorulan sorular (details/summary)
     urun-alinti       alıntı kartı
     urun-kanallar     kanal çipleri

   Her seçici bu sınıfların altındadır; sitenin başka hiçbir yeri değişmez.
   Tek istisna en alttaki "mevcut sayfalardaki büyük logolar" bloğu, o da
   yalnız .entry-content içindeki belirli görselleri hedefler.

   Tasarım dili: lacivert mürekkep, beyaz kâğıt, tek imza vuruşu kırmızı;
   altı renkli amblem yalnız küçük noktalarda (çip noktası, rakam kutusu
   kenarı, çerçeve düğmeleri) görünür — süs değil, marka izi.

   Yükleme: main.css → style.css → cta.css sonrası ('tecmony-cta' bağımlı).
   main.css ile aynı anda düzenlenmemesi için ayrı dosya.
   ========================================================================== */

:root {
  --urun-lacivert: #070346;
  --urun-lacivert-2: #0d0a5c;
  --urun-kirmizi: #d95350;
  --urun-kirmizi-metin: #c4423f;   /* beyazda 5.0 : AA */
  --urun-vurgu: #fd6151;
  --urun-metin: #3c4257;           /* gövde: beyazda 9.6 */
  --urun-metin-soluk: #6b6b6b;     /* açıklama: beyazda 5.3 */
  --urun-cizgi: #e6e8f0;
  --urun-cizgi-koyu: #d3d7e3;
  --urun-zemin-acik: #f6f8fb;
  --urun-lacivert-tint: rgba(7, 3, 70, 0.06);
  --urun-yesil: #2e9e6b;           /* onay işareti; beyazda 3.4 (grafik, metin değil) */
  --urun-baslik: var(--font-heading, 'Poppins', sans-serif);
  --urun-govde: var(--font-body, 'Open Sans', sans-serif);
  --urun-genislik: var(--max-width, 1140px);
  --urun-radius: 14px;
  --urun-golge: 0 24px 48px -30px rgba(7, 3, 70, 0.45);
  --urun-gecis: 0.22s ease;
  /* amblem renkleri, amblemdeki sırayla */
  --amb-1: #c0272d;
  --amb-2: #f6921e;
  --amb-3: #fbed21;
  --amb-4: #39b44a;
  --amb-5: #29aae1;
  --amb-6: #92278e;
}

/* ==========================================================================
   1. Bölüm sarmalayıcı — urun-bolum
   --------------------------------------------------------------------------
   Düz bölüm: beyaz, yalnız dikey boşluk. --acik ve --koyu kenardan kenara
   zemin alır (urun-giris ile aynı 100vw tekniği; body overflow-x zaten
   gizli) ve içeriği 1140px'te tutar. Yazı düzeni bloklarının çocuklara
   verdiği 24px üst boşluk burada bileşen aralığına çevrilir.
   ========================================================================== */
.urun-bolum {
  position: relative;
  padding-block: clamp(52px, 7vw, 88px);
  padding-inline: 0 !important;
  margin-block: 0 !important;
}

/* Bölüm içi her çocuk sayfa genişliğinde ortalanır. WordPress'in kendi
   kısıtlı düzeni de bunu yapar; yazar "default" düzen seçerse de bozulmasın. */
.urun-bolum > :where(:not(.alignfull)) {
  max-width: var(--urun-genislik);
  margin-left: auto;
  margin-right: auto;
}

/* Düz bölümler art arda gelirse aralarına ince bir çizgi. */
.urun-bolum:not(.urun-bolum--acik):not(.urun-bolum--koyu)
  + .urun-bolum:not(.urun-bolum--acik):not(.urun-bolum--koyu) {
  border-top: 1px solid var(--urun-cizgi);
}

/* Zeminli bölümler: bölüm 1140px'te, akışta kalır; zemin ::before ile
   viewport genişliğinde arkasına serilir. Böylece başlık, giriş metni ve
   bileşenler düz bölümlerdekiyle aynı sol kenarda durur — 100vw + negatif
   kenar tekniğinde başlık sayfa kenarına kayıyordu (v1'de ölçüldü). Yarım
   kaydırma çubuğu payı body'nin overflow-x: hidden'ı ile kırpılır. */
.urun-bolum--acik,
.urun-bolum--koyu {
  isolation: isolate;
}

.urun-bolum--acik::before,
.urun-bolum--koyu::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.urun-bolum--acik::before {
  background: var(--urun-zemin-acik);
  border-top: 1px solid var(--urun-cizgi);
  border-bottom: 1px solid var(--urun-cizgi);
}

.urun-bolum--acik + .urun-bolum--acik::before { border-top: 0; }
.urun-bolum--koyu + .urun-bolum--acik::before { border-top: 0; }
.urun-bolum--acik + .urun-bolum--koyu { margin-top: -1px !important; }

.urun-bolum--koyu { color: #fff; }

.urun-bolum--koyu::before {
  background-color: var(--urun-lacivert);
  background-image:
    radial-gradient(55% 80% at 100% 0%, rgba(217, 83, 80, 0.18), transparent 70%),
    url('../images/banner-deseni.svg');
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-position: right top, center;
}

/* --- Bölüm başlığı: etiket › h2 › giriş metni ------------------------------ */
.urun-bolum > .urun-etiket,
.urun-etiket {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px !important;
  font-family: var(--urun-baslik);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--urun-kirmizi-metin);
  line-height: 1.4;
}

.urun-etiket::before {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.urun-bolum > h2 {
  margin: 0 0 18px !important;
  max-width: 24ch;
  font-family: var(--urun-baslik);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -1.2px;
  color: var(--urun-lacivert);
}

.urun-bolum > .urun-giris-metni,
.urun-giris-metni {
  margin: 0 0 44px !important;
  max-width: 64ch;
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.65;
  color: var(--urun-metin);
}

/* Giriş metni yoksa başlıktan sonraki ilk bileşen aynı aralığı alır. */
.urun-bolum > h2 + :not(.urun-giris-metni):not(p) {
  margin-top: 40px !important;
}

/* Bölüm içinde ikinci bir bileşen (ör. kartlardan sonra logo sırası) */
.urun-bolum > :is(.urun-kartlar, .urun-ozellik, .urun-adimlar, .urun-rakamlar,
                  .urun-tablo, .urun-sss, .urun-logolar, .urun-kanallar,
                  .urun-alinti, .urun-ekran, .urun-liste)
  + :is(.urun-kartlar, .urun-ozellik, .urun-adimlar, .urun-rakamlar,
        .urun-tablo, .urun-sss, .urun-logolar, .urun-kanallar,
        .urun-alinti, .urun-ekran, .urun-liste) {
  margin-top: clamp(40px, 5vw, 64px) !important;
}

/* Ortalı başlık düzeni: kısa, tek cümlelik bölümler için. */
.urun-bolum--orta { text-align: center; }
.urun-bolum--orta > .urun-etiket { justify-content: center; }
.urun-bolum--orta > h2,
.urun-bolum--orta > .urun-giris-metni { margin-left: auto !important; margin-right: auto !important; }

/* Koyu bölümde renkler */
.urun-bolum.urun-bolum--koyu > h2,
.urun-bolum--koyu h3,
.urun-bolum--koyu h4 { color: #fff; }
.urun-bolum--koyu > .urun-etiket { color: var(--urun-vurgu); }
.urun-bolum--koyu > .urun-giris-metni,
.urun-bolum--koyu p { color: rgba(255, 255, 255, 0.82); }
.urun-bolum--koyu a:not(.wp-block-button__link) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }

/* Bölüm içindeki düğme sırası (isteğe bağlı) */
.urun-bolum > .wp-block-buttons { margin-top: 36px !important; }

/* ==========================================================================
   2. Yetenek kartları — urun-kartlar › urun-kart
   --------------------------------------------------------------------------
   Kart: beyaz, ince çerçeve, sol üstte kısa kırmızı işaret (bölüm etiketiyle
   aynı vuruş), lacivert ikon kutusu, h3 + p (+ liste). Üzerine gelince
   çerçeve koyulaşır ve kart 2px yükselir; gölge yalnız o anda.
   ========================================================================== */
.urun-kartlar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.urun-kartlar.urun-kartlar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urun-kartlar.urun-kartlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.urun-kartlar.urun-kartlar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* Izgara çocukları yazı düzeni ritmini almaz (WP: margin-block-start 24px,
   margin-inline auto !important — ikincisi ızgarada kartı daraltır). */
.urun-kartlar > * {
  margin: 0 !important;
  max-width: none !important;
  min-width: 0;
}

.urun-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px 26px !important;
  background: #fff;
  border: 1px solid var(--urun-cizgi);
  border-radius: var(--urun-radius);
  transition: border-color var(--urun-gecis), transform var(--urun-gecis), box-shadow var(--urun-gecis);
}

.urun-kart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 26px;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--urun-kirmizi);
}

.urun-kart:hover,
.urun-kart:focus-within {
  border-color: rgba(7, 3, 70, 0.28);
  transform: translateY(-2px);
  box-shadow: var(--urun-golge);
}

.urun-kart > * { margin: 0 !important; max-width: none !important; }

.urun-kart__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px !important;
  border-radius: 11px;
  background: var(--urun-lacivert-tint);
  color: var(--urun-lacivert);
}

.urun-kart__ikon svg,
.urun-kart__ikon i {
  width: 22px;
  height: 22px;
  font-size: 20px;
  line-height: 1;
}

.urun-kart h3,
.urun-kart h4 {
  margin: 0 0 8px !important;
  font-family: var(--urun-baslik);
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--urun-lacivert);
}

.urun-kart p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--urun-metin-soluk);
}

.urun-kart p + p { margin-top: 10px !important; }

.urun-kart ul,
.urun-kart ol {
  margin: 14px 0 0 !important;
  padding-left: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--urun-metin);
}

.urun-kart li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.urun-kart li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urun-kirmizi);
}

.urun-kart a:not(.wp-block-button__link) {
  color: var(--urun-kirmizi-metin);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 66, 63, 0.35);
}
.urun-kart a:not(.wp-block-button__link):hover { border-bottom-color: currentColor; }

/* Kartın sonunda "devamı" bağlantısı: alta yapışır. */
.urun-kart > p:last-child > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  border-bottom: 0;
}
.urun-kart > p:last-child > a:only-child::after {
  content: '\2192';
  transition: transform var(--urun-gecis);
}
.urun-kart > p:last-child > a:only-child:hover::after { transform: translateX(3px); }

/* Koyu bölümde kart */
.urun-bolum--koyu .urun-kart {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.urun-bolum--koyu .urun-kart:hover,
.urun-bolum--koyu .urun-kart:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.urun-bolum--koyu .urun-kart::before { background: var(--urun-vurgu); }
.urun-bolum--koyu .urun-kart__ikon { background: rgba(255, 255, 255, 0.1); color: #fff; }
.urun-bolum--koyu .urun-kart p,
.urun-bolum--koyu .urun-kart li { color: rgba(255, 255, 255, 0.78); }
.urun-bolum--koyu .urun-kart li::before { background: var(--urun-vurgu); }
.urun-bolum--koyu .urun-kart a:not(.wp-block-button__link) { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }

/* Açık gri bölümde kartların çerçevesi biraz daha koyu, aksi hâlde kaybolur. */
.urun-bolum--acik .urun-kart { border-color: var(--urun-cizgi-koyu); }

/* ==========================================================================
   3. Özellik satırı — urun-ozellik (metin + ekran)
   --------------------------------------------------------------------------
   Çekirdek "columns" bloğu (ya da iki çocuklu grup) ızgaraya çevrilir; böylece
   kırılma noktaları ve sıra tek yerden yönetilir. Metin 5, görsel 6 pay.
   ========================================================================== */
.urun-ozellik {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.urun-ozellik > * {
  margin: 0 !important;
  max-width: none !important;
  min-width: 0;
  flex: none;
}

.urun-ozellik--ters > :first-child { order: 2; }
.urun-ozellik--ters > :last-child { order: 1; }

.urun-ozellik .urun-etiket { margin-bottom: 12px !important; }

.urun-ozellik h3,
.urun-ozellik h2 {
  margin: 0 0 14px !important;
  font-family: var(--urun-baslik);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--urun-lacivert);
}

.urun-ozellik p {
  margin: 0 0 14px !important;
  font-size: 16px;
  line-height: 1.7;
  color: var(--urun-metin);
}
.urun-ozellik p:last-child { margin-bottom: 0 !important; }

.urun-ozellik .urun-liste { margin-top: 18px !important; }

.urun-ozellik + .urun-ozellik { margin-top: clamp(56px, 7vw, 96px) !important; }

/* Ardışık özellik satırları otomatik olarak sırayı değiştirsin diye
   yazarın --ters yazması gerekmez; ama yazdıysa o kazanır. */
.urun-ozellik:nth-of-type(even):not(.urun-ozellik--ters) > :first-child { order: 2; }
.urun-ozellik:nth-of-type(even):not(.urun-ozellik--ters) > :last-child { order: 1; }

.urun-bolum--koyu .urun-ozellik h3,
.urun-bolum--koyu .urun-ozellik h2 { color: #fff; }
.urun-bolum--koyu .urun-ozellik p { color: rgba(255, 255, 255, 0.82); }

/* ==========================================================================
   4. Ekran görüntüsü — urun-ekran
   --------------------------------------------------------------------------
   Görsel bir tarayıcı çerçevesine oturur: üstte lacivert şerit ve amblemin
   ilk üç rengiyle üç düğme, altta ince çizgi ve altyazı. Görsel asla çerçeveyi
   taşırmaz; uzun ekranlar üstten kırpılır (nesnenin en bilgilendirici kısmı
   üst bölümdür). Genişlik konteyneri aşmaz, yükseklik 600px'i geçmez.
   ========================================================================== */
.urun-ekran {
  display: block;
  margin: 0 auto !important;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--urun-cizgi-koyu);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--urun-golge);
}

.urun-ekran::before {
  content: '';
  display: block;
  height: 30px;
  background:
    radial-gradient(circle at 16px 50%, var(--amb-1) 0 4px, transparent 5px),
    radial-gradient(circle at 32px 50%, var(--amb-2) 0 4px, transparent 5px),
    radial-gradient(circle at 48px 50%, var(--amb-4) 0 4px, transparent 5px),
    var(--urun-lacivert);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.urun-ekran img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
}

/* WP'nin görsel bloğu figcaption'a kendi kenar boşluğunu verir */
.urun-ekran figcaption,
.urun-ekran .wp-element-caption {
  margin: 0 !important;
  padding: 10px 16px;
  border-top: 1px solid var(--urun-cizgi);
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--urun-metin-soluk);
}

/* Bölümün doğrudan çocuğu olarak tek başına duran ekran: biraz dar ve ortalı */
.urun-bolum > .urun-ekran { max-width: min(100%, 980px); }
.urun-bolum > .urun-ekran img { max-height: 560px; }

/* Özellik satırı içinde daha kısa */
.urun-ozellik .urun-ekran img { max-height: 440px; }

/* Telefon çerçevesi: dikey mobil ekranlar için (CallGem mobil vb.) */
.urun-ekran--mobil {
  width: min(100%, 300px);
  border-radius: 28px;
  border-width: 6px;
  border-color: var(--urun-lacivert);
  box-shadow: 0 30px 50px -28px rgba(7, 3, 70, 0.55);
}
.urun-ekran--mobil::before {
  height: 22px;
  background: var(--urun-lacivert);
  border-bottom: 0;
}
.urun-ekran--mobil img { max-height: 620px; object-position: top center; }
.urun-ekran--mobil figcaption { text-align: center; }

/* Yan yana iki-üç ekran */
.urun-ekranlar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}
.urun-ekranlar > * { margin: 0 !important; max-width: none !important; }
.urun-ekranlar .urun-ekran img { aspect-ratio: 16 / 10; max-height: 340px; }

.urun-bolum--koyu .urun-ekran { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.urun-bolum--koyu .urun-ekran::before { background-color: var(--urun-lacivert-2); background-image:
    radial-gradient(circle at 16px 50%, var(--amb-1) 0 4px, transparent 5px),
    radial-gradient(circle at 32px 50%, var(--amb-2) 0 4px, transparent 5px),
    radial-gradient(circle at 48px 50%, var(--amb-4) 0 4px, transparent 5px); }

/* ==========================================================================
   5. Logolar — urun-logo · urun-logolar
   --------------------------------------------------------------------------
   Bir logo asla sayfanın konusu değildir; 44px'ten yüksek, 180px'ten geniş
   olamaz. Sırada her logo beyaz, ince çerçeveli bir kutuda; renksiz ve %70
   durur, üzerine gelince renklenir. Gri zeminli bölümde kutu beyaz kalır.
   ========================================================================== */
.urun-logolar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.urun-logolar > * { margin: 0 !important; max-width: none !important; }

.urun-logolar > .urun-logo,
.urun-logolar > .wp-block-image,
.urun-logolar > figure,
.urun-logolar > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid var(--urun-cizgi);
  border-radius: 10px;
  transition: border-color var(--urun-gecis);
}
.urun-logolar > :hover { border-color: var(--urun-cizgi-koyu); }

/* Logo görselinin kendisi: figure.urun-logo > img ya da img.urun-logo */
.urun-logo img,
img.urun-logo,
.urun-logolar img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 44px !important;
  max-width: 180px !important;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--urun-gecis), opacity var(--urun-gecis);
}
.urun-logolar > :hover img,
.urun-logo:hover img,
img.urun-logo:hover { filter: none; opacity: 1; }

/* Yalnız başına duran küçük logo (ör. paragraf yanı) */
figure.urun-logo { margin: 0 !important; display: inline-block; }
figure.urun-logo figcaption { display: none; }

/* Sıra başlığı: "Entegrasyonlar", "Sertifikalar" gibi kısa bir etiket
   sıranın önünde durabilir. */
.urun-logolar > .urun-logolar__baslik {
  flex: 0 0 auto;
  padding: 0 !important;
  border: 0;
  min-height: 0;
  margin-right: 8px !important;
  font-family: var(--urun-baslik);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--urun-metin-soluk);
}

.urun-bolum--koyu .urun-logolar > * { background: #fff; border-color: transparent; }

/* ==========================================================================
   6. Adımlar — urun-adimlar › urun-adim
   --------------------------------------------------------------------------
   ol.urun-adimlar > li  ya da  .urun-adimlar > .urun-adim (h3 + p).
   Numara lacivert bir rozette; rozetler arasında ince çizgi (masaüstünde
   yatay, mobilde dikey) akışı gösterir.
   ========================================================================== */
.urun-adimlar {
  counter-reset: urun-adim;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.urun-adimlar > * {
  position: relative;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  counter-increment: urun-adim;
  min-width: 0;
}

.urun-adimlar > *::before {
  content: counter(urun-adim, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--urun-lacivert);
  color: #fff;
  font-family: var(--urun-baslik);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* rozetler arası bağlantı çizgisi */
.urun-adimlar > *::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 56px;
  right: -24px;
  height: 1px;
  background: var(--urun-cizgi-koyu);
}
.urun-adimlar > :last-child::after { display: none; }

.urun-adimlar h3,
.urun-adimlar h4,
.urun-adimlar > li > strong:first-child {
  display: block;
  margin: 0 0 8px !important;
  font-family: var(--urun-baslik);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--urun-lacivert);
}

.urun-adimlar p,
.urun-adimlar > li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--urun-metin-soluk);
}
.urun-adimlar p { margin: 0 !important; }

.urun-bolum--koyu .urun-adimlar > *::before { background: #fff; color: var(--urun-lacivert); }
.urun-bolum--koyu .urun-adimlar > *::after { background: rgba(255, 255, 255, 0.2); }
.urun-bolum--koyu .urun-adimlar p,
.urun-bolum--koyu .urun-adimlar > li { color: rgba(255, 255, 255, 0.78); }
.urun-bolum--koyu .urun-adimlar h3,
.urun-bolum--koyu .urun-adimlar > li > strong:first-child { color: #fff; }

/* Dikey akış varyantı: uzun açıklamalı, 3'ten fazla adım */
.urun-adimlar--dikey { grid-template-columns: 1fr; gap: 0; }
.urun-adimlar--dikey > * {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 22px;
  padding-bottom: 32px !important;
}
.urun-adimlar--dikey > *::before { grid-row: 1 / span 2; margin: 0; }
.urun-adimlar--dikey > *::after {
  top: 52px; bottom: 8px; left: 22px; right: auto; width: 1px; height: auto;
}
.urun-adimlar--dikey > :last-child { padding-bottom: 0 !important; }

/* ==========================================================================
   7. Rakamlar — urun-rakamlar › urun-rakam › urun-rakam__deger
   --------------------------------------------------------------------------
   Rakam yalnız kaynağı varsa yazılır (bkz. TASARIM.md). Kutu: açık zemin,
   solda amblem renginde 3px şerit (sırayla altı renk), büyük Poppins rakam,
   küçük etiket. Kaynak notu için urun-rakam__kaynak.
   ========================================================================== */
.urun-rakamlar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.urun-rakamlar.urun-rakamlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.urun-rakamlar.urun-rakamlar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.urun-rakamlar > * { margin: 0 !important; max-width: none !important; min-width: 0; }

.urun-rakam {
  position: relative;
  padding: 24px 24px 22px 28px !important;
  background: var(--urun-zemin-acik);
  border: 1px solid var(--urun-cizgi);
  border-radius: 12px;
  overflow: hidden;
}
.urun-rakam::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--amb-1);
}
.urun-rakam:nth-child(6n+2)::before { background: var(--amb-2); }
.urun-rakam:nth-child(6n+3)::before { background: var(--amb-3); }
.urun-rakam:nth-child(6n+4)::before { background: var(--amb-4); }
.urun-rakam:nth-child(6n+5)::before { background: var(--amb-5); }
.urun-rakam:nth-child(6n+6)::before { background: var(--amb-6); }

.urun-rakam > * { margin: 0 !important; max-width: none !important; }

.urun-rakam__deger {
  display: block;
  font-family: var(--urun-baslik);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--urun-lacivert);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.urun-rakam p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--urun-metin);
}
.urun-rakam p:has(> .urun-rakam__deger) { line-height: 1; }

.urun-rakam__kaynak,
.urun-rakam small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--urun-metin-soluk);
}

.urun-bolum--acik .urun-rakam { background: #fff; border-color: var(--urun-cizgi-koyu); }
.urun-bolum--koyu .urun-rakam { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.urun-bolum--koyu .urun-rakam__deger { color: #fff; }
.urun-bolum--koyu .urun-rakam p { color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   8. Onay listesi — urun-liste (--yok · --2)
   ========================================================================== */
.urun-liste {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}
.urun-liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

.urun-liste > li {
  position: relative;
  margin: 0 !important;
  padding-left: 32px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--urun-metin);
}

.urun-liste > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: rgba(46, 158, 107, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e9e6b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.urun-liste--yok > li { color: var(--urun-metin-soluk); }
.urun-liste--yok > li::before {
  background-color: rgba(107, 107, 107, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  background-size: 11px;
}

.urun-liste strong { color: var(--urun-lacivert); font-weight: 600; }

.urun-bolum--koyu .urun-liste > li { color: rgba(255, 255, 255, 0.85); }
.urun-bolum--koyu .urun-liste > li::before { background-color: rgba(255, 255, 255, 0.12); }
.urun-bolum--koyu .urun-liste strong { color: #fff; }

/* Dahil / hariç yan yana: iki liste bir sarmalayıcıda */
.urun-liste-cift {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.urun-liste-cift > * { margin: 0 !important; max-width: none !important; }
.urun-liste-cift > .wp-block-group {
  padding: 24px 26px !important;
  background: #fff;
  border: 1px solid var(--urun-cizgi-koyu);
  border-radius: var(--urun-radius);
}
.urun-liste-cift h3,
.urun-liste-cift h4 {
  margin: 0 0 14px !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--urun-lacivert);
}

/* ==========================================================================
   9. Karşılaştırma tablosu — urun-tablo
   --------------------------------------------------------------------------
   figure.wp-block-table.urun-tablo > table. Figure yatayda kayar (sayfa değil);
   ilk sütun kaydırma sırasında yerinde kalır. Başlık lacivert, satırlar zebra.
   Çekirdek tablo bloğu hücreye sınıf vermeye izin vermez; bu yüzden kural
   İKİNCİ sütunu "bizim ürün" sayar ve kırmızıyla vurgular (tabloyu öyle
   kurun). Vurgu istenmiyorsa figure'e urun-tablo--vurgusuz. ✓ / ✕ düz metin
   olarak yazılır; veri sütunları ortalanır. wp:html ile yazılan tablolarda
   td.evet / td.hayir ek renk alır.
   ========================================================================== */
.urun-tablo {
  margin: 0 !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--urun-cizgi-koyu);
  border-radius: 12px;
  background: #fff;
  scrollbar-width: thin;
}

.urun-tablo table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--urun-metin);
}

.urun-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 18px;
  background: var(--urun-lacivert);
  color: #fff;
  font-family: var(--urun-baslik);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
  white-space: nowrap;
}

.urun-tablo:not(.urun-tablo--vurgusuz) thead th:nth-child(2),
.urun-tablo thead th.urun-tablo__biz {
  background: var(--urun-kirmizi-metin);
}
.urun-tablo:not(.urun-tablo--vurgusuz) tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--urun-lacivert);
}

.urun-tablo tbody td,
.urun-tablo tbody th {
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--urun-cizgi);
  vertical-align: top;
  background: #fff;
}
.urun-tablo tbody tr:nth-child(even) > * { background: #fafbfd; }
.urun-tablo tbody tr:last-child > * { border-bottom: 0; }

/* ilk sütun: satır başlığı, yatay kaydırmada sabit */
.urun-tablo tbody > tr > :first-child,
.urun-tablo thead > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 600;
  color: var(--urun-lacivert);
  box-shadow: 1px 0 0 var(--urun-cizgi);
}
.urun-tablo thead > tr > :first-child { z-index: 3; color: #fff; background: var(--urun-lacivert); box-shadow: none; }

.urun-tablo thead th:nth-child(n+2),
.urun-tablo tbody td:nth-child(n+2) { text-align: center; color: var(--urun-metin); }

/* ✓ ve ✕ hücreleri: yazar yalnız o karakteri yazar */
.urun-tablo td.evet,
.urun-tablo td.hayir { font-weight: 700; text-align: center; }
.urun-tablo td.evet { color: var(--urun-yesil); }
.urun-tablo td.hayir { color: #b0b5c3; }

.urun-tablo figcaption {
  padding: 10px 18px;
  border-top: 1px solid var(--urun-cizgi);
  font-size: 13px;
  color: var(--urun-metin-soluk);
  text-align: left;
}

/* kaydırılabilir olduğunu söyleyen ipucu (mobilde görünür) */
.urun-tablo::after {
  content: 'Tabloyu yana kaydırın \2192';
  display: none;
  padding: 8px 18px;
  font-size: 12px;
  color: var(--urun-metin-soluk);
  border-top: 1px solid var(--urun-cizgi);
}
html[lang^="en"] .urun-tablo::after { content: 'Scroll sideways \2192'; }

/* ==========================================================================
   10. SSS — urun-sss › details
   --------------------------------------------------------------------------
   Çekirdek details bloğu. Özet satırının sağında +/− (kırmızı halka),
   açılınca − olur. Ardışık maddeler tek ince çizgiyle ayrılır.
   ========================================================================== */
.urun-sss {
  border-top: 1px solid var(--urun-cizgi-koyu);
}

.urun-sss > * { margin: 0 !important; max-width: none !important; }

.urun-sss details,
.urun-sss .wp-block-details {
  margin: 0 !important;
  border-bottom: 1px solid var(--urun-cizgi-koyu);
}

.urun-sss summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--urun-baslik);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--urun-lacivert);
  transition: color var(--urun-gecis);
}
.urun-sss summary::-webkit-details-marker { display: none; }
.urun-sss summary::marker { content: ''; }

.urun-sss summary::after {
  content: '+';
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--urun-kirmizi);
  color: var(--urun-kirmizi-metin);
  font-family: var(--urun-baslik);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--urun-gecis), background-color var(--urun-gecis), color var(--urun-gecis);
}

.urun-sss summary:hover { color: var(--urun-kirmizi-metin); }
.urun-sss summary:hover::after { background: var(--urun-kirmizi); color: #fff; }

.urun-sss details[open] > summary::after {
  content: '\2212';
  transform: rotate(180deg);
  background: var(--urun-lacivert);
  border-color: var(--urun-lacivert);
  color: #fff;
}

.urun-sss details > :not(summary) {
  padding: 0 60px 22px 0;
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--urun-metin);
}
.urun-sss details > :not(summary) + :not(summary) { padding-top: 0; margin-top: -8px !important; }
.urun-sss details p { margin: 0 !important; }
.urun-sss details ul { margin: 8px 0 0 !important; padding-left: 20px; }

/* Bölüm başlığı solda, SSS sağda: iki sütunlu düzen */
.urun-sss-ikili {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.urun-sss-ikili > * { margin: 0 !important; max-width: none !important; }
.urun-sss-ikili .urun-giris-metni { margin-bottom: 0 !important; }

.urun-bolum--koyu .urun-sss,
.urun-bolum--koyu .urun-sss details { border-color: rgba(255, 255, 255, 0.16); }
.urun-bolum--koyu .urun-sss summary { color: #fff; }
.urun-bolum--koyu .urun-sss summary::after { border-color: var(--urun-vurgu); color: var(--urun-vurgu); }
.urun-bolum--koyu .urun-sss details > :not(summary) { color: rgba(255, 255, 255, 0.82); }

/* ==========================================================================
   11. Alıntı — urun-alinti
   --------------------------------------------------------------------------
   Yalnız gerçek bir müşteri sözü için. Grup ya da quote bloğu; ilk paragraf
   söz, son paragraf (ya da cite) kaynak.
   ========================================================================== */
.urun-alinti {
  /* .wp-block-quote'un çekirdek sol çizgisi ve italiği sıfırlanır */
  position: relative;
  padding: 36px 40px 32px 44px !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--urun-cizgi-koyu);
  border-left: 4px solid var(--urun-kirmizi);
  border-radius: var(--urun-radius);
  box-shadow: none;
  font-style: normal;
}

.urun-alinti::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: 30px;
  font-family: var(--urun-baslik);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: rgba(217, 83, 80, 0.16);
  pointer-events: none;
}

.urun-alinti > * { margin: 0 !important; max-width: none !important; }

.urun-alinti > p:first-of-type,
.urun-alinti > blockquote p {
  position: relative;
  font-family: var(--urun-baslik);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--urun-lacivert);
}

.urun-alinti > p:last-of-type:not(:first-of-type),
.urun-alinti cite,
.urun-alinti .urun-alinti__kaynak {
  display: block;
  margin-top: 18px !important;
  font-family: var(--urun-govde);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--urun-metin);
}
.urun-alinti > p:last-of-type:not(:first-of-type)::before,
.urun-alinti cite::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--urun-kirmizi);
}
.urun-alinti cite span,
.urun-alinti .urun-alinti__kaynak span { font-weight: 400; color: var(--urun-metin-soluk); }

.urun-bolum--koyu .urun-alinti { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); border-left-color: var(--urun-vurgu); }
.urun-bolum--koyu .urun-alinti > p:first-of-type { color: #fff; }
.urun-bolum--koyu .urun-alinti > p:last-of-type:not(:first-of-type),
.urun-bolum--koyu .urun-alinti cite { color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   12. Kanallar — urun-kanallar
   --------------------------------------------------------------------------
   Grup içinde paragraflar ya da liste. Her çip önünde amblem renklerinden
   biri sırayla; altı kanaldan sonra baştan başlar.
   ========================================================================== */
.urun-kanallar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.urun-kanallar > p,
.urun-kanallar > li,
.urun-kanallar > span {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  max-width: none !important;
  padding: 8px 16px 8px 13px;
  background: #fff;
  border: 1px solid var(--urun-cizgi-koyu);
  border-radius: 999px;
  font-family: var(--urun-baslik);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--urun-lacivert);
  white-space: nowrap;
}

.urun-kanallar > *::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amb-1);
}
.urun-kanallar > :nth-child(6n+2)::before { background: var(--amb-2); }
.urun-kanallar > :nth-child(6n+3)::before { background: var(--amb-3); }
.urun-kanallar > :nth-child(6n+4)::before { background: var(--amb-4); }
.urun-kanallar > :nth-child(6n+5)::before { background: var(--amb-5); }
.urun-kanallar > :nth-child(6n+6)::before { background: var(--amb-6); }

.urun-kanallar > .urun-kanallar__baslik {
  padding: 0 !important;
  border: 0;
  background: none;
  margin-right: 8px !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--urun-metin-soluk);
}
.urun-kanallar > .urun-kanallar__baslik::before { display: none; }

.urun-bolum--koyu .urun-kanallar > * { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; }

/* ==========================================================================
   13. Odak, hareket, yazdırma
   ========================================================================== */
.urun-sss summary:focus-visible,
.urun-kart a:focus-visible,
.urun-tablo:focus-visible,
.urun-logolar a:focus-visible,
.urun-bolum a:focus-visible {
  outline: 2px solid var(--urun-lacivert);
  outline-offset: 3px;
  border-radius: 4px;
}
.urun-bolum--koyu .urun-sss summary:focus-visible,
.urun-bolum--koyu a:focus-visible,
.urun-bolum--koyu .urun-tablo:focus-visible {
  outline-color: var(--amb-3);
}

@media (prefers-reduced-motion: reduce) {
  .urun-kart,
  .urun-kart a::after,
  .urun-logolar > *,
  .urun-logolar img,
  .urun-sss summary,
  .urun-sss summary::after { transition: none !important; }
  .urun-kart:hover { transform: none; }
}

@media print {
  .urun-bolum--acik,
  .urun-bolum--koyu {
    width: auto;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    background: none !important;
    color: #000;
    border: 0;
  }
  .urun-bolum--koyu > h2,
  .urun-bolum--koyu h3,
  .urun-bolum--koyu p,
  .urun-bolum--koyu li,
  .urun-bolum--koyu summary { color: #000 !important; }
  .urun-bolum { padding-block: 24px; break-inside: avoid-page; }
  .urun-kart,
  .urun-rakam,
  .urun-alinti,
  .urun-ekran,
  .urun-sss details { break-inside: avoid; box-shadow: none !important; }
  .urun-ekran::before { display: none; }
  .urun-ekran img { max-height: none; }
  .urun-logolar img { filter: none; opacity: 1; }
  .urun-tablo { overflow: visible; border: 0; }
  .urun-tablo table { min-width: 0; font-size: 12px; }
  .urun-tablo thead th { background: #eee !important; color: #000 !important; position: static; }
  .urun-tablo::after { display: none !important; }
  .urun-sss summary::after { display: none; }
}

/* ==========================================================================
   14. Duyarlı — 1366 / 1024 / 768 / 390
   ========================================================================== */
@media (max-width: 1100px) {
  .urun-kartlar.urun-kartlar--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urun-rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urun-rakamlar.urun-rakamlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .urun-kartlar,
  .urun-kartlar.urun-kartlar--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  .urun-ozellik { grid-template-columns: 1fr; gap: 28px; }
  /* Mobilde her zaman metin üstte, ekran altta */
  .urun-ozellik > :first-child,
  .urun-ozellik--ters > :first-child,
  .urun-ozellik:nth-of-type(even) > :first-child { order: 1; }
  .urun-ozellik > :last-child,
  .urun-ozellik--ters > :last-child,
  .urun-ozellik:nth-of-type(even) > :last-child { order: 2; }
  .urun-ozellik .urun-ekran img { max-height: 380px; }

  .urun-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* iki sütunda satır sonundaki rozetin çizgisi boşluğa uzanmasın */
  .urun-adimlar:not(.urun-adimlar--dikey) > :nth-child(2n)::after { display: none; }

  .urun-sss-ikili { grid-template-columns: 1fr; gap: 24px; }
  .urun-liste-cift { grid-template-columns: 1fr; }
  .urun-tablo::after { display: block; }
}

@media (max-width: 600px) {
  .urun-bolum { padding-block: 44px; }
  .urun-bolum > h2 { font-size: 26px; letter-spacing: -0.8px; max-width: none; }
  .urun-bolum > .urun-giris-metni { margin-bottom: 32px !important; font-size: 16px; }

  .urun-kartlar,
  .urun-kartlar.urun-kartlar--2,
  .urun-kartlar.urun-kartlar--3,
  .urun-kartlar.urun-kartlar--4 { grid-template-columns: 1fr; gap: 14px; }
  .urun-kart { padding: 24px 22px 22px !important; }
  .urun-kart::before { left: 22px; }

  .urun-ekran { border-radius: 10px; }
  .urun-ekran::before { height: 24px; background-size: auto; }
  .urun-ekran img,
  .urun-bolum > .urun-ekran img,
  .urun-ozellik .urun-ekran img { max-height: 300px; }
  .urun-ekranlar { grid-template-columns: 1fr; }

  .urun-logolar { gap: 8px; }
  .urun-logolar > .urun-logo,
  .urun-logolar > .wp-block-image,
  .urun-logolar > figure,
  .urun-logolar > a { min-height: 56px; padding: 10px 16px; }
  .urun-logo img,
  img.urun-logo,
  .urun-logolar img { max-height: 36px !important; max-width: 140px !important; }

  .urun-adimlar { grid-template-columns: 1fr; gap: 0; }
  .urun-adimlar > * {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    padding-bottom: 26px !important;
  }
  .urun-adimlar > *::before { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; font-size: 13px; }
  .urun-adimlar > *::after { display: block; top: 48px; bottom: 6px; left: 20px; right: auto; width: 1px; height: auto; }
  .urun-adimlar > :last-child::after { display: none; }
  .urun-adimlar > :last-child { padding-bottom: 0 !important; }

  .urun-rakamlar,
  .urun-rakamlar.urun-rakamlar--2,
  .urun-rakamlar.urun-rakamlar--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .urun-rakam { padding: 18px 16px 16px 20px !important; }
  .urun-rakam__deger { font-size: 30px; letter-spacing: -1px; }
  .urun-rakam p { font-size: 13px; }

  .urun-liste--2 { grid-template-columns: 1fr; }
  .urun-liste > li { font-size: 15px; }

  .urun-tablo table { font-size: 13.5px; min-width: 560px; }
  .urun-tablo thead th { padding: 12px 14px; }
  .urun-tablo tbody td,
  .urun-tablo tbody th { padding: 11px 14px; }

  .urun-sss summary { font-size: 15.5px; padding: 16px 0; gap: 16px; }
  .urun-sss summary::after { width: 26px; height: 26px; font-size: 18px; }
  .urun-sss details > :not(summary) { padding-right: 0; font-size: 15px; }

  .urun-alinti { padding: 30px 22px 26px 26px !important; }
  .urun-alinti::before { left: 16px; font-size: 72px; }

  .urun-kanallar > p,
  .urun-kanallar > li,
  .urun-kanallar > span { font-size: 13px; padding: 7px 13px 7px 11px; }
}

/* ==========================================================================
   15. Mevcut sayfalardaki büyük logolar (içerik değiştirilmeden)
   --------------------------------------------------------------------------
   Ölçüldü (1366px, 2026-09-24):
     /wasend/  img.wa-logo  wasend-logo.png     → 480×144 (doğal boyut, stil yok)
     /wadesk/  wadesk-banner.png (660×272)      → tam genişlikte tagline'lı görsel
   İkisi de sayfanın başında ürün adının yanında logo görevi görüyor; kural
   onları küçültür, oranlarını korur. Tema başlığındaki site logosu
   (.custom-logo) ve altbilgi logosu .entry-content dışında olduğu için
   etkilenmez. Referans duvarındaki ref-*.png görseller inline 50px ile
   zaten küçüktür, dokunulmaz.
   ========================================================================== */
.entry-content img.wa-logo,
.entry-content .wp-block-image img[src*="-logo."],
.entry-content .wp-block-image img[src*="-logo-"],
.entry-content .wp-block-image img[src*="_logo."] {
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 44px !important;
  max-width: 180px !important;
  margin-bottom: 8px;
}

.entry-content .wp-block-image img[src*="wadesk-banner"] {
  width: auto !important;
  height: auto !important;
  max-width: 320px !important;
}

@media (max-width: 600px) {
  .entry-content img.wa-logo,
  .entry-content .wp-block-image img[src*="-logo."],
  .entry-content .wp-block-image img[src*="-logo-"],
  .entry-content .wp-block-image img[src*="_logo."] { max-height: 36px !important; max-width: 150px !important; }
  .entry-content .wp-block-image img[src*="wadesk-banner"] { max-width: 260px !important; }
}


/* ──────────────────────────────────────────────────────────────────────────
   Lead additions (2026-09-24)
   ────────────────────────────────────────────────────────────────────────── */
/* Header cells after the first were inheriting the body text colour from the
   centring rule above: grey on navy, unreadable. */
.urun-tablo thead th:nth-child(n+2) { color: #fff; }

/* A feature row whose screenshot does not exist yet collapses to text only,
   instead of leaving an empty frame. */
.urun-ozellik--tek { grid-template-columns: minmax(0, 1fr); }
.urun-ozellik--tek > * { max-width: 760px !important; }

/* The row's caption is a sentence, not a chip: give it its own line so the
   chips wrap under it instead of pushing the page sideways on phones
   (WaSend measured 171px of horizontal overflow at 390px). */
.urun-kanallar > .urun-kanallar__baslik {
  flex: 1 1 100% !important;
  white-space: normal !important;
  max-width: 100% !important;
}
.urun-kanallar > * { max-width: 100%; }