/* ==========================================================================
   TEMA: TEKNOMART — ELEKTRONİK PAZARYERİ
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/teknomart/shop/layouts/app.blade.php)
   `css/shop.css` dosyasını YÜKLEMEZ. Bu yüzden burada kendi sıfırlaması, kendi
   ızgarası, kendi tipografisi ve çekirdekten devralınan PAYLAŞILAN bileşen
   sınıflarının (.container, .btn, .badge, .panel, .field, .pgrid, .cartitem,
   .summary, .datatable, .pagination, .table-scroll, .steps, .accnav …)
   TEKNOMART dilinde yeniden çizimi vardır. O adlar korunuyor çünkü tema
   yalnızca YEDİ görünümü eziyor; sepet, ödeme, hesabım, üyelik, blog,
   iletişim, koleksiyon, kampanya, karşılaştırma, bayi ve sektör modülü
   sayfaları ÇEKİRDEK görünümlerdir ve o sözlüğü kullanır. Karşılığı olmayan
   bir sınıf o sayfalarda STİLSİZ kalırdı — hata yok, log yok, mağazanın
   yarısı bozuk.

   UYUMLULUK LİSTESİ ÖLÇÜMDEN GELDİ, elle yazılmadı: `resources/views/shop/**`
   içindeki EZİLMEYEN görünümlerin kullandığı sınıflar ile `css/shop.css`
   içinde tanımlı sınıfların kesişimi alındı — 100 sınıf. Hepsi aşağıdaki
   "ÇEKİRDEK SINIF UYUMLULUK KATMANI" bölümünde karşılanıyor.

   Yaprak CSS dosyaları (shop-karsilastirma, shop-birim, shop-dijital,
   shop-teslimat, shop-sepet-zekasi, shop-blog, shop-koleksiyon, shop-bayi,
   shop-elektronik, shop-oto, shop-kuyumcu, shop-parti, shop-yapi,
   shop-abonelik, shop-listeler) renkleri `var(--…)` ile okuyor. Bu yüzden
   aşağıdaki :root sözlüğü o dosyaların OKUDUĞU BÜTÜN belirteçleri tanımlar
   (ölçüldü: 48 belirteç). Tanımlanmasaydı karşılaştırma şeridi, birim fiyat
   satırı, teslimat slotu ve sepet zekâsı kutuları RENKSİZ kalırdı.

   KARAKTER: yoğun pazaryeri. Geniş kapsayıcı (1400px), 6 KOLONLUK ürün
   ızgarası, koyu lacivert kimlik şeridi, mavi aksiyon, turkuaz ve limon
   vurgular, köşeli kırmızı indirim rozeti.

   RENK ROLLERİ SABİTTİR: zemin belirteçleri (--page-bg, --card-bg, --surface,
   --primary-soft, --accent-soft, --border, --border-strong, --control-border)
   METİN rengi olarak KULLANILMAZ; ön plan belirteçleri (--title, --text,
   --muted, --on-primary, --on-accent) zemin olarak kullanılmaz.

   KONTRAST — HESAPLANDI (WCAG 2.1 bağıl parlaklık formülü):
     #12206b üzerine #ffffff başlık metni ............ 14,54:1  (AAA)
     #12206b üzerine #c8f542 limon fiyat ............. 11,49:1  (AAA)
     #12206b üzerine #c3cdf2 soluk başlık metni ....... 9,23:1  (AAA)
     #12206b üzerine #22c5c5 turkuaz vurgu ............ 6,83:1  (AA)
     #0b1230 üzerine #ffffff koyu panel metni ........ 18,37:1  (AAA)
     #0b1230 üzerine #c8f542 limon fiyat ............. 14,51:1  (AAA)
     #0b1230 üzerine #a9b2cc koyu panel soluk metni ... 8,68:1  (AAA)
     #0b1230 üzerine #22c5c5 turkuaz vurgu ............ 8,62:1  (AAA)
     #1a4fd6 üzerine #ffffff mavi düğme ............... 6,70:1  (AA)
     #1743b4 üzerine #ffffff mavi düğme :hover ........ 8,41:1  (AAA)
     #22c5c5 üzerine #0b1230 TURKUAZ KART (koyu metin)  8,62:1  (AAA)
     #c8f542 üzerine #12206b limon zemin (koyu metin)  11,49:1  (AAA)
     #d11f1f üzerine #ffffff kırmızı rozet ............ 5,35:1  (AA)
     #ffffff üzerine #c81e1e kırmızı indirimli fiyat .. 5,74:1  (AA)
     #f2f4f9 üzerine #c81e1e kırmızı fiyat (yüzey) .... 5,21:1  (AA)
     #ffffff üzerine #0b1230 başlık .................. 18,37:1  (AAA)
     #ffffff üzerine #333a52 gövde metni ............. 11,24:1  (AAA)
     #ffffff üzerine #5b6480 soluk metin .............. 5,87:1  (AA)
     #f2f4f9 üzerine #5b6480 soluk metin (yüzey) ...... 5,33:1  (AA)
     #f2f4f9 üzerine #333a52 gövde metni (yüzey) ..... 10,22:1  (AAA)
     #e8edfb üzerine #12206b açık mavi şerit metni ... 12,42:1  (AAA)
     #e8edfb üzerine #333a52 açık mavi şerit gövde .... 9,60:1  (AAA)
     #e8edfb üzerine #5b6480 açık mavi şerit soluk .... 5,01:1  (AA)
     #ffffff üzerine #1743b4 mavi bağlantı ............ 8,41:1  (AA)
     #ffffff üzerine #0a7070 turkuaz metin (--accent) . 5,89:1  (AA)
     #ffffff üzerine #0f7a3d "Stokta var" ............. 5,42:1  (AA)
     #ffffff üzerine #8a5d00 uyarı metni .............. 5,76:1  (AA)
     #ffffff üzerine #767e94 denetim kenarlığı ........ 4,05:1  (WCAG 1.4.11)
     #f2f4f9 üzerine #767e94 denetim kenarlığı (yüzey)  3,68:1  (WCAG 1.4.11)

   TURKUAZ BEYAZ METİN TAŞIMAZ — ÖLÇÜLDÜ: #22c5c5 üzerine beyaz 2,13:1.
   Referans görüntüdeki turkuaz tanıtım kartı beyaz metin kullanıyor; burada o
   kart KOYU MÜREKKEP metin taşır (#0b1230, 8,62:1). Turkuazı koyultmak kartın
   imza rengini yok ederdi. Turkuaz METİN gerektiğinde ayrı belirteç: --accent
   #0a7070 (beyaz zeminde 5,89:1).

   LİMON (#c8f542) DA BEYAZLA KULLANILMAZ: beyaz üzerine limon 1,27:1. Limon
   YALNIZCA koyu zeminde METİN, ya da koyu metin taşıyan ZEMİN olarak geçer.

   FOTOĞRAF ÜSTÜNE AÇIK METİN — TEK YER: gradyan kelime bandı (.tk-ses).
   Orada fotoğrafın üstüne SABİT bir perde basılır (#0b1230, %86 opaklık) ve
   kontrast PERDEYLE ölçülür.

   ÖLÇÜM YÖNTEMİ (tahmin değil): bant-ses.webp tarayıcıda bir tuvale çizildi,
   BÜTÜN piksellerin bağıl parlaklığı hesaplandı ve EN AÇIK piksel bulundu —
   rgb(255,255,255). Perde altında o piksel rgb(45,51,77)'ye iniyor; yani
   metnin görebileceği EN KÖTÜ zemin bu. O zemine karşı ölçülenler:
     gradyanın en koyu durağı #7aa2ff .......... 4,99:1
     gradyanın orta durağı    #22c5c5 .......... 5,83:1
     gradyanın son durağı     #c8f542 .......... 9,81:1  (destek yoksa metin bu)
     açıklama metni           #dfe4f3 .......... 9,77:1
     beyaz kenarlıklı düğme   #ffffff ......... 12,41:1
   Kelime 132px/800 (büyük metin, eşik 3:1); açıklama gövde metni (eşik 4,5:1).
   Fotoğrafın en KOYU pikselinde aynı değerler 7,59 / 8,87 / 14,92 / 14,86 /
   18,89 oluyor — yani hiçbir noktada eşik altına inilmiyor.

   (Bu blokta önce "perdenin en açık noktası #262c46, oran 5,11:1" yazıyordu;
   ölçüm o sayıyı doğrulamadı ve gerçek değerle değiştirildi.)

   Manşet, kategori döşemesi ve koyu paneller metni fotoğrafın ÜSTÜNE değil
   YANINA/ALTINA koyar; orada perde gerekmez.
   ========================================================================== */

:root {
  /* --- Tipografi: TEK AİLE, sıkı ticari sans. Serif YOK. --- */
  --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: -0.02em;
  --heading-transform: none;

  /* --- Ham palet --- */
  --tk-mur-900: #0b1230;
  --tk-lacivert-800: #12206b;
  --tk-lacivert-700: #17297f;
  --tk-lacivert-600: #1c3399;
  --tk-mavi-700: #1743b4;
  --tk-mavi-600: #1a4fd6;
  --tk-mavi-100: #d6ddf7;
  --tk-mavi-050: #e8edfb;
  --tk-turkuaz-500: #22c5c5;
  --tk-turkuaz-700: #0a7070;
  --tk-turkuaz-050: #e2f7f7;
  --tk-kirmizi-700: #b31818;
  --tk-kirmizi-600: #d11f1f;
  --tk-kirmizi-500: #e02b2b;
  --tk-kirmizi-050: #fdeaea;
  --tk-limon-400: #c8f542;
  --tk-cizgi: #dbe0ec;
  --tk-cizgi-koyu: #c2c9da;
  --tk-yuzey: #f2f4f9;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #1a4fd6;
  --accent: #0a7070;
  --title: #0b1230;
  --text: #333a52;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #dbe0ec;
  --radius: 8px;
  --card-radius: 6px;
  --btn-radius: 6px;
  --container: 1400px;

  --primary-strong: #12206b;
  --primary-hover: #1743b4;
  --primary-focus: #1c3399;
  --primary-line: #b9c5ef;
  --primary-soft: #e8edfb;
  --on-primary: #ffffff;

  --accent-strong: #0a6a6a;
  --accent-light: #22c5c5;
  --accent-soft: #e2f7f7;
  /* --on-accent yalnızca --accent (#0a7070) ZEMİNİYLE kullanılır: 5,89:1.
     TURKUAZ (#22c5c5) zeminde beyaz 2,13:1 kalır ve orada koyu mürekkep
     metin basılır (.tk-tanitim__kart--turkuaz). */
  --on-accent: #ffffff;

  /*
   | SOLUK METİN GRİ ZEMİNE KARŞI DA ÖLÇÜLDÜ, YALNIZCA BEYAZA KARŞI DEĞİL.
   | Bu temada soluk metnin çoğu (KDV notu, kart altı bilgi, sıralama etiketi,
   | sayfalama, sepet/ödeme yardımcı metinleri) --surface (#f2f4f9) ya da açık
   | mavi şerit (#e8edfb) üstünde duruyor. #5b6480 → beyazda 5,87:1 ·
   | #f2f4f9 üstünde 5,33:1 · #e8edfb üstünde 5,01:1. Üçü de 4,5'in üstünde.
   */
  --muted: #5b6480;
  --border-strong: #c2c9da;
  --surface: #f2f4f9;
  --white: #ffffff;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği >= 3:1.
     Panelden AYARLANAMAZ (config/themes.php `adjustable` listesinde yok);
     beyaz zeminde 4,05:1, yüzey zemininde 3,68:1 ölçüldü.
     --border yalnızca DEKORATİF çizgidir. */
  --control-border: #767e94;
  --control-border-strong: #565e75;

  --success: #0f7a3d;
  --danger: #d11f1f;
  --warning: #8a5d00;

  --radius-sm: 4px;
  --radius-lg: 14px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.08);
  --shadow: 0 6px 18px rgba(11, 18, 48, 0.10);
  --shadow-lg: 0 20px 46px rgba(11, 18, 48, 0.18);
  --card-shadow: 0 1px 2px rgba(11, 18, 48, 0.06);
  --card-hover-shadow: 0 10px 24px rgba(11, 18, 48, 0.14);

  --btn-height: 44px;
  --btn-tracking: 0.01em;
  --btn-transform: none;
  --section-space: 40px;
  --ease: cubic-bezier(0.3, 0, 0.2, 1);

  --tk-kenar: clamp(14px, 2.6vw, 26px);
  --tk-dokunma: 44px;
  /* Yapışkan süzgeç kolonu ve atlama bağlantısı bu değerin altına yerleşir. */
  --tk-tepe-yuk: 116px;
}

/* ==================== SIFIRLAMA ==================== */

*, *::before, *::after { box-sizing: border-box; }

/* BELGENİN YAZI TİPİ KÖKTE AÇIKÇA BİLDİRİLİR (var() ardına saklanmaz):
   hem var() desteklemeyen bağlamlar (bazı tarayıcı form denetimleri) hem de
   `php artisan cea:tasarim-ayrisma` tipografi ölçümü doğru aileyi görsün. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  scroll-padding-top: 20px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--title);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--heading-tracking);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Tarayıcı varsayılanı `figure { margin: 1em 40px }`: sıfırlanmazsa bölüm
   fotoğrafları kendi kutusunun içinde 40px sağa kayar. */
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
del { color: var(--muted); }
strong, b { font-weight: 800; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

/* Odak halkası HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmeli. */
:focus-visible {
  outline: 3px solid var(--tk-mavi-600);
  outline-offset: 2px;
}

/* Koyu zeminlerde mavi halka görünmez kalırdı; orada limon halka kullanılır. */
.tk-tepe__ust :focus-visible,
.tk-ekran :focus-visible,
.tk-ses :focus-visible,
.tk-firsat :focus-visible,
.tk-ikili__panel :focus-visible,
.tk-alt :focus-visible {
  outline-color: var(--tk-limon-400);
}

main { display: block; min-height: 40vh; }

/* Font Awesome ikonları satır içi akar; svg/img sıfırlaması onları etkilemesin. */
.fa-solid, .fa-regular, .fa-brands { display: inline-block; line-height: 1; }

/* ==================== YARDIMCI ==================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.text-danger { color: var(--tk-kirmizi-700); }
.text-success { color: var(--success); }

.tk-atla {
  display: none;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 0 14px;
  border: 2px solid var(--tk-mavi-600);
  border-radius: var(--btn-radius);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tk-mavi-700);
}

/*
 | İÇERİĞE GEÇ — KLAVYE ATLAMA BAĞLANTISI (WCAG 2.4.1).
 |
 | .tk-atla'DAN AYRI BİR SINIF, BİLEREK: .tk-atla dar ekranda GÖRÜNÜR olan ve
 | liste sayfasında süzgece giden bağlantıdır (bkz. 1040px kuralı). Buradaki
 | bağlantı ise başlığın iki katmanını + mega paneli + yatay menüyü atlar ve
 | YALNIZCA odaklandığında görünür. İkisini tek sınıfta toplamak, süzgeç
 | bağlantısını masaüstünde de görünmez yapardı.
 |
 | Gizleme `display:none` DEĞİL: display:none bir bağlantıyı sekme sırasından da
 | çıkarır, yani atlama bağlantısı hiç odaklanamaz ve amacını kaybeder.
 */
.tk-gec {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 0 16px;
  border: 2px solid var(--tk-lacivert-800);
  border-radius: var(--btn-radius);
  background: #ffffff;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--tk-lacivert-800);
}

/* :focus DE yazılır, yalnızca :focus-visible DEĞİL — eski tarayıcıda
   :focus-visible tanınmazsa kural bütünüyle atılır ve bağlantı ekranın dışında
   kalırdı; o zaman klavye kullanıcısı odaklandığı ögeyi GÖREMEZ. */
.tk-gec:focus,
.tk-gec:focus-visible { left: 12px; top: 12px; text-decoration: none; }

/* ==================== KAPSAYICI ==================== */

.tk-kap, .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--tk-kenar), env(safe-area-inset-left, 0px)) max(var(--tk-kenar), env(safe-area-inset-right, 0px));
}

/* ==================== DÜĞMELER ==================== */

.tk-dugme, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 9px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--tk-mavi-600);
  color: var(--on-primary);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.tk-dugme:hover, .btn:hover { text-decoration: none; background: var(--tk-mavi-700); }
.tk-dugme:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Çekirdek görünümlerin kullandığı değişkeler (sepet, ödeme, hesabım …) */
.btn--navy, .btn--primary, .tk-dugme--mavi {
  background: var(--tk-mavi-600);
  border-color: var(--tk-mavi-600);
  color: var(--on-primary);
}

.btn--navy:hover, .btn--primary:hover, .tk-dugme--mavi:hover {
  background: var(--tk-mavi-700);
  border-color: var(--tk-mavi-700);
}

/* "gold" çekirdekte altın bir aksiyon düğmesiydi; teknomart'ta KOYU LACİVERT
   birincil satın alma düğmesidir (beyaz metin 14,54:1). */
.btn--gold, .tk-dugme--lacivert {
  background: var(--tk-lacivert-800);
  border-color: var(--tk-lacivert-800);
  color: #ffffff;
}

.btn--gold:hover, .tk-dugme--lacivert:hover {
  background: var(--tk-lacivert-700);
  border-color: var(--tk-lacivert-700);
}

.btn--outline, .tk-dugme--cerceve {
  background: var(--card-bg);
  border-color: var(--control-border);
  color: var(--title);
}

.btn--outline:hover, .tk-dugme--cerceve:hover {
  background: var(--tk-yuzey);
  border-color: var(--control-border-strong);
}

.btn--ghost, .tk-dugme--sade {
  background: transparent;
  border-color: transparent;
  color: var(--tk-mavi-700);
}

.btn--ghost:hover, .tk-dugme--sade:hover { background: var(--primary-soft); }

/* Beyaz kenarlıklı düğme — koyu ve renkli panellerin içinde. */
.tk-dugme--beyazcerceve {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.tk-dugme--beyazcerceve:hover { background: rgba(255, 255, 255, 0.16); border-color: #ffffff; }

/* Turkuaz kart KOYU metin taşır (beyaz 2,13:1'de kalıyordu). */
.tk-dugme--koyucerceve {
  background: transparent;
  border-color: var(--tk-mur-900);
  color: var(--tk-mur-900);
}

.tk-dugme--koyucerceve:hover { background: rgba(11, 18, 48, 0.12); border-color: var(--tk-mur-900); }

.btn--sm, .tk-dugme--kucuk { min-height: var(--tk-dokunma); padding: 6px 14px; font-size: 14px; }
.btn--lg, .tk-dugme--buyuk { min-height: 52px; padding: 13px 26px; font-size: 16.5px; }
.btn--block, .tk-dugme--blok { display: flex; width: 100%; }

/* ==================== ROZETLER ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--tk-yuzey);
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.badge--danger { background: var(--tk-kirmizi-600); color: #ffffff; }
.badge--gold { background: var(--tk-kirmizi-600); color: #ffffff; }
.badge--info { background: var(--tk-mavi-600); color: #ffffff; }
.badge--success { background: var(--success); color: #ffffff; }
.badge--warning { background: var(--warning); color: #ffffff; }
.badge--muted { background: var(--tk-yuzey); color: var(--muted); }

/* ==================== UYARI ŞERİTLERİ ==================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--tk-mavi-600);
  border-radius: var(--radius-sm);
  background: var(--tk-yuzey);
  font-size: 14.5px;
  color: var(--text);
}

.alert--success { border-left-color: var(--success); background: #eef8f2; }
.alert--error { border-left-color: var(--tk-kirmizi-600); background: var(--tk-kirmizi-050); }
.alert--info { border-left-color: var(--tk-mavi-600); background: var(--primary-soft); }

/* ==========================================================================
   BAŞLIK — İKİ KATMAN
   --------------------------------------------------------------------------
   1) KOYU LACİVERT yüksek şerit: solda kalın kelime markası · ORTADA ÇOK GENİŞ
      arama kutusu (sağ ucunda BÜYÜTEÇ İKONU; yazılı "ARA" düğmesi YOK) ·
      sağda yatay "Hesabım" ve "Sepet" blokları.
   2) AÇIK MAVİ ince şerit: solda "Bölümler" açılır MEGA paneli, ortada yatay
      menü, sağda iki tanıtım bağlantısı.
   ========================================================================== */

.tk-tepe { position: relative; z-index: 40; }

.tk-tepe__ust { background: var(--tk-lacivert-800); }

.tk-tepe__ic {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-height: 72px;
  padding-block: 10px;
}

.tk-marka {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tk-dokunma);
  flex: 0 0 auto;
  color: #ffffff;
}

.tk-marka:hover { text-decoration: none; }

.tk-marka__isaret {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--tk-limon-400);
  color: var(--tk-lacivert-800);
  font-size: 17px;
}

.tk-marka__ad {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* --- ÇOK GENİŞ ARAMA: başlığın ortasında, esneyen kolon --- */

.tk-arama {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
}

/*
 | SEÇİCİ ÖZGÜLLÜĞÜ — ÖLÇÜLEREK DÜZELTİLDİ.
 |
 | Bu kural önce `.tk-arama input` yazılmıştı: özgüllüğü (0,1,1). Dosyanın çok
 | aşağısındaki genel form kuralı `input[type="search"]` de (0,1,1) ve SONRA
 | geldiği için KAZANIYORDU. Sonuç: buradaki `padding-right: 52px` düşüyor,
 | genel kuralın `padding: 9px 12px` değeri geçiyor ve uzun arama metni sağdaki
 | BÜYÜTEÇ İKONUNUN ALTINA giriyordu.
 |
 | Öznitelik seçicisi eklenince özgüllük (0,2,1) olur ve kaynak sırası önemsiz
 | hâle gelir.
 */
.tk-arama input[type="search"] {
  width: 100%;
  min-width: 0;
  /* 44px ALTINA İNMEZ: alan bir dokunma hedefidir ve içindeki gönder düğmesi
     de 44px. 42px yazılıydı; vuruş testinde (elementFromPoint) 42px ölçüldü. */
  min-height: var(--tk-dokunma);
  padding: 8px 52px 8px 16px;
  border: 1.5px solid var(--tk-lacivert-600);
  border-radius: var(--radius);
  background: #ffffff;
  font-family: var(--font-body);
  /* 16px ALTINA İNMEZ: iOS Safari küçük yazılı alana odaklanınca sayfayı
     zorla yakınlaştırır ve kullanıcı geri çıkamaz. */
  font-size: 16px;
  color: var(--title);
}

.tk-arama input[type="search"]::placeholder { color: var(--muted); }

.tk-arama__gonder {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--tk-dokunma);
  min-height: var(--tk-dokunma);
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  color: var(--tk-lacivert-800);
  font-size: 17px;
  cursor: pointer;
}

.tk-arama__gonder:hover { color: var(--tk-mavi-700); }

/* --- SAĞ EYLEMLER: yatay ikon + metin --- */

.tk-eylemler { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.tk-eylem {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tk-dokunma);
  min-width: var(--tk-dokunma);
  padding: 0 11px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
}

.tk-eylem:hover { text-decoration: none; background: var(--tk-lacivert-700); }
.tk-eylem__ikon { font-size: 18px; }

.tk-eylem__sayi {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding-inline: 5px;
  border-radius: var(--pill);
  background: var(--tk-limon-400);
  color: var(--tk-lacivert-800);
  font-size: 12px;
  font-weight: 800;
}

.tk-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--tk-dokunma);
  min-height: var(--tk-dokunma);
  border: 1.5px solid var(--tk-lacivert-600);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #ffffff;
  font-size: 19px;
  cursor: pointer;
}

/* --- 2. KATMAN: AÇIK MAVİ İNCE ŞERİT --- */

.tk-tepe__alt {
  border-bottom: 1px solid var(--tk-mavi-100);
  background: var(--tk-mavi-050);
}

.tk-tepe__alt-ic {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  min-height: 44px;
}

/* BÖLÜMLER — açılır mega panel. <details> kullanılıyor: JavaScript KAPALIYKEN
   de açılır (tarayıcının kendi davranışı), yani menü JS'e bağlı değil. */
.tk-bolum { position: relative; flex: 0 0 auto; }

.tk-bolum > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tk-dokunma);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--tk-lacivert-800);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.tk-bolum > summary::-webkit-details-marker { display: none; }
.tk-bolum > summary:hover { background: var(--tk-lacivert-700); }

.tk-bolum__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 210px));
  gap: 4px 22px;
  width: max-content;
  max-width: min(760px, calc(100vw - 2 * var(--tk-kenar)));
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
}

.tk-bolum__grup { min-width: 0; }

.tk-bolum__bas {
  display: flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tk-lacivert-800);
}

.tk-bolum__bag {
  display: flex;
  align-items: center;
  /* Mega paneldeki alt kategori bağlantıları da dokunma hedefidir (36px'ti). */
  min-height: var(--tk-dokunma);
  font-size: 14px;
  color: var(--text);
}

.tk-bolum__bag:hover { color: var(--tk-mavi-700); }

.tk-menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
}

.tk-menu__bag {
  display: inline-flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--tk-lacivert-800);
}

.tk-menu__bag:hover { text-decoration: none; background: var(--tk-mavi-100); }
.tk-menu__bag--vurgu { color: var(--tk-kirmizi-700); font-weight: 800; }

.tk-tanit { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.tk-tanit__bag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tk-dokunma);
  padding: 0 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tk-lacivert-800);
}

.tk-tanit__bag:hover { text-decoration: none; background: var(--tk-mavi-100); }
.tk-tanit__bag--kirmizi { color: var(--tk-kirmizi-700); }

/* --- MOBİL MENÜ --- */

.tk-mobmenu { display: none; padding-block: 12px; }
.tk-mobmenu.is-open { display: block; }

.tk-mobmenu > a,
.tk-mobmenu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--title);
  cursor: pointer;
}

.tk-mobmenu details > a {
  display: flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 4px 4px 4px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--text);
}

.tk-mobmenu .tk-arama { max-width: none; margin-bottom: 12px; }
.tk-mobmenu .tk-arama input { border-color: var(--control-border); }

/* ==========================================================================
   ANA SAYFA — 1) DAİRE KATEGORİ ŞERİDİ
   ========================================================================== */

.tk-daire { padding-block: 22px; border-bottom: 1px solid var(--border); }

.tk-daire__liste {
  display: flex;
  gap: clamp(10px, 1.6vw, 22px);
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tk-daire__liste:focus-visible { outline: 3px solid var(--tk-mavi-600); outline-offset: 4px; }

.tk-daire__oge { flex: 0 0 auto; }

.tk-daire__bag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 96px;
  min-height: var(--tk-dokunma);
  text-align: center;
}

.tk-daire__bag:hover { text-decoration: none; }
.tk-daire__bag:hover .tk-daire__cerceve { border-color: var(--tk-mavi-600); }
.tk-daire__bag:hover .tk-daire__ad { color: var(--tk-mavi-700); }

.tk-daire__cerceve {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--pill);
  background: var(--tk-yuzey);
  transition: border-color 0.16s var(--ease);
}

.tk-daire__cerceve img { width: 100%; height: 100%; object-fit: cover; }

/* Kategori görseli YOKKEN fotoğraf UYDURULMAZ: baş harf basılır. */
.tk-daire__harf {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: var(--tk-lacivert-800);
}

.tk-daire__ad {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--title);
  /* İki satır: referansta kategori adları iki satıra kırılıyor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   2) MANŞET — SOL METİN / SAĞ FOTOĞRAF, DURAKLATILABİLİR
   ========================================================================== */

.tk-manset { padding-block: 26px; }

.tk-manset__kutu {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--tk-yuzey);
}

.tk-manset__slayt {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 52px);
}

.tk-manset__slayt[hidden] { display: none; }

.tk-manset__etiket {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--tk-mavi-700);
}

.tk-manset__baslik {
  margin-bottom: 14px;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.06;
}

.tk-manset__alt {
  max-width: 44ch;
  margin-bottom: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.tk-manset__foto {
  display: grid;
  place-items: center;
  min-width: 0;
}

.tk-manset__foto img {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 13 / 8;
  object-fit: contain;
}

/*
 | MANŞET DENETİMİ — İLERİCİ ZENGİNLEŞTİRME (vitrin sekmeleriyle aynı sözleşme).
 |
 | VARSAYILAN GİZLİ: JavaScript çalışmıyorsa slaytların hepsi ALT ALTA basılır
 | (`.tk-manset__slayt` üzerinde `hidden` yalnızca JS tarafından konur), yani
 | içerik kaybolmaz. O durumda "önceki / sonraki / duraklat" düğmeleri hiçbir
 | işe yaramaz; çalışmayan bir denetim basmak yanlış vaattir.
 |
 | JS bölüme `tk-manset--js` sınıfını ekleyince şerit görünür olur.
 */
.tk-manset__denetim { display: none; }

.tk-manset--js .tk-manset__denetim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 18px;
}

.tk-manset__ok,
.tk-manset__dur {
  display: inline-grid;
  place-items: center;
  width: var(--tk-dokunma);
  height: var(--tk-dokunma);
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: #ffffff;
  color: var(--title);
  font-size: 13px;
  cursor: pointer;
}

.tk-manset__ok:hover,
.tk-manset__dur:hover { border-color: var(--tk-mavi-600); color: var(--tk-mavi-700); }

.tk-manset__sayac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: var(--tk-dokunma);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--title);
}

/* ==========================================================================
   3) ÜÇ RENKLİ TANITIM KARTI
   ========================================================================== */

.tk-tanitim { padding-block: 8px 34px; }

.tk-tanitim__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tk-tanitim__kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 132px);
  gap: 14px;
  align-items: center;
  min-height: 190px;
  padding: 22px;
  border-radius: var(--radius-lg);
}

.tk-tanitim__kart--lacivert { background: var(--tk-lacivert-800); color: #ffffff; }
.tk-tanitim__kart--mavi { background: var(--tk-mavi-600); color: #ffffff; }

/*
 | TURKUAZ KART KOYU METİN TAŞIR — ÖLÇÜLDÜ.
 | Referans görüntüde turkuaz kartın metni beyaz; #22c5c5 üzerine beyaz
 | 2,13:1 ediyor, yani AA'nın (4,5:1) çok altında. Turkuazı koyultmak kartın
 | imza rengini yok ederdi; bu yüzden metin koyu mürekkep (#0b1230, 8,62:1).
 */
.tk-tanitim__kart--turkuaz { background: var(--tk-turkuaz-500); color: var(--tk-mur-900); }

.tk-tanitim__baslik {
  margin-bottom: 12px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 800;
  line-height: 1.16;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tk-tanitim__etiket {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.92;
}

.tk-tanitim__fiyat {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* LİMON YALNIZCA KOYU ZEMİNDE: lacivert 11,49:1 · mavi 5,30:1. */
  color: var(--tk-limon-400);
}

/* Turkuaz zemin AÇIK: limon orada 1,44:1'de kalırdı, fiyat koyu mürekkep. */
.tk-tanitim__kart--turkuaz .tk-tanitim__fiyat { color: var(--tk-mur-900); }

.tk-tanitim__foto { min-width: 0; }

.tk-tanitim__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ==========================================================================
   BÖLÜM BAŞLIĞI (ortak)
   ========================================================================== */

.tk-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 18px;
}

.tk-bas__baslik { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; }

.tk-bas__bag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tk-dokunma);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--tk-mavi-700);
}

/* ==========================================================================
   4) SEKMELİ VİTRİN + 5) 6 KOLON ÜRÜN IZGARASI
   --------------------------------------------------------------------------
   İLERİCİ ZENGİNLEŞTİRME: sekme şeridi VARSAYILAN OLARAK GİZLİ ve bütün
   paneller AÇIK. JavaScript çalışırsa bölüme `tk-vitrin--js` sınıfı eklenir;
   o zaman şerit görünür olur ve panelleri JS `hidden` niteliğiyle yönetir.
   Böylece JS kapalıyken çalışmayan bir denetim BASILMAZ.
   ========================================================================== */

.tk-vitrin { padding-block: 12px 36px; }
.tk-vitrin__sekmeler { display: none; gap: 4px; }
.tk-vitrin--js .tk-vitrin__sekmeler { display: flex; flex-wrap: wrap; }

.tk-vitrin__sekme {
  min-height: var(--tk-dokunma);
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.tk-vitrin__sekme:hover { color: var(--title); }

.tk-vitrin__sekme[aria-selected="true"] {
  border-bottom-color: var(--tk-lacivert-800);
  color: var(--title);
}

.tk-vitrin__panel[hidden] { display: none; }
.tk-vitrin__panel-bas { margin-bottom: 12px; font-size: 16px; font-weight: 800; }
.tk-vitrin--js .tk-vitrin__panel-bas { display: none; }

.tk-izgara {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

.tk-izgara--dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   ÜRÜN KARTI
   --------------------------------------------------------------------------
   ANATOMİ (referans sırası): sol üstte KÖŞELİ KIRMIZI rozet · ürün görseli ·
   marka (çok küçük, gri, BÜYÜK HARF) · ürün adı 2 satır · RENK KUTUCUKLARI ·
   KIRMIZI fiyat + üstü çizili eski fiyat · yıldız satırı + değerlendirme
   sayısı (YALNIZCA gerçek yorum varsa) · "Sepete ekle" düğmesi.
   ========================================================================== */

.tk-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card-bg);
  transition: box-shadow 0.16s var(--ease);
}

.tk-kart:hover { box-shadow: var(--card-hover-shadow); }

.tk-kart__foto {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px 14px 6px;
  min-height: 0;
}

.tk-kart__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.tk-kart__bos {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--tk-yuzey);
  font-size: 12.5px;
  color: var(--muted);
}

/* İMZA: KÖŞELİ (yuvarlatılmamış) KIRMIZI rozet, sol ÜST köşede. */
.tk-kart__rozet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 4px 9px;
  background: var(--tk-kirmizi-600);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tk-kart__isaretler { position: absolute; bottom: 6px; right: 8px; z-index: 2; }

.tk-kart__fav {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tk-dokunma);
  height: var(--tk-dokunma);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: #ffffff;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.tk-kart__fav[aria-pressed="true"] { color: var(--tk-kirmizi-600); border-color: var(--tk-kirmizi-600); }

.tk-kart__govde { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 12px; }

.tk-kart__marka {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.tk-kart__ad { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }

/*
 | AD BAĞLANTISI 44px'E TAMAMLANIR.
 |
 | İki satıra kırpılmış ad 13,5px × 1,35 ≈ 36px yer kaplıyor; vuruş testinde
 | tek satırlık adlarda 18px ölçülüyordu. Fotoğraf bağlantısı aynı ürüne
 | gidiyor ve 44px'in çok üstünde — yani WCAG'in "eşdeğer denetim" istisnası
 | uygulanabilirdi — ama bu depoda aynı gerekçeyle bırakılan iki hedef
 | (.krs-serit__urun, .krs-kolon__ad) düşman denetiminde bulgu olarak geri
 | döndü. Kart yalnızca birkaç piksel uzuyor.
 */
.tk-kart__ad a {
  display: -webkit-box;
  min-height: var(--tk-dokunma);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--title);
}

.tk-kart__ad a:hover { color: var(--tk-mavi-700); text-decoration: underline; }

/* RENK KUTUCUKLARI — gerçek varyant renklerinden; renk verisi yoksa basılmaz. */
.tk-kart__renkler { display: flex; align-items: center; gap: 5px; }

.tk-kart__renk {
  width: 12px;
  height: 12px;
  border: 1px solid var(--tk-cizgi-koyu);
  border-radius: var(--pill);
}

.tk-kart__renk-artik { font-size: 11px; font-weight: 700; color: var(--muted); }

.tk-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }

.tk-kart__fiyat strong {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--title);
}

/* İndirimli fiyat KIRMIZI: beyaz üzerine #c81e1e 5,74:1. */
.tk-kart__fiyat strong.tk-indirimli { color: var(--tk-kirmizi-700); }
.tk-kart__fiyat del { font-size: 13px; }

.tk-kart__puan { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
/* YILDIZ ALTINI — BAĞIMSIZ DENETİMDE DÜZELTİLDİ.
   Önceki değer #b8860b beyaz zeminde 3,25:1 veriyordu; yıldızlar puanı GÖREN
   kullanıcıya taşıyan tek görsel gösterim olduğu için WCAG 1.4.3 gereği
   4,5:1 şart (12–15px, büyük punto istisnası geçerli değil).
   #8a6a00 beyazda 5,07:1 — dört kullanım yerinde de aynı belirteç. */
.tk-kart__yildiz { color: #8a6a00; font-size: 12px; letter-spacing: 0.5px; }
.tk-kart__stok { font-size: 11.5px; font-weight: 700; }
.tk-kart__ayak { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding: 0 14px 14px; }

/* Referansta bir kart MAVİ DOLGULU vurgulu durumda: ilk kart. */
.tk-kart--vurgu .tk-dugme--gri { background: var(--tk-mavi-600); border-color: var(--tk-mavi-600); color: #ffffff; }
.tk-kart--vurgu .tk-dugme--gri:hover { background: var(--tk-mavi-700); border-color: var(--tk-mavi-700); }

.tk-dugme--gri {
  background: var(--tk-yuzey);
  border-color: var(--control-border);
  color: var(--title);
}

.tk-dugme--gri:hover { background: var(--tk-mavi-100); border-color: var(--tk-mavi-600); }

/* ==========================================================================
   6) KOYU KATEGORİ VİTRİNİ
   ========================================================================== */

.tk-ekran { padding-block: clamp(30px, 4vw, 56px); background: var(--tk-mur-900); color: #ffffff; }
.tk-ekran__ic { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

.tk-ekran__ustbas {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--tk-turkuaz-500);
}

.tk-ekran__baslik { font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; color: #ffffff; }

.tk-ekran__haplar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.tk-ekran__hap {
  display: inline-flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--pill);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
}

.tk-ekran__hap:hover { text-decoration: none; background: rgba(255, 255, 255, 0.16); border-color: #ffffff; }

.tk-ekran__foto { width: 100%; max-width: 900px; }

.tk-ekran__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 45 / 22;
  object-fit: cover;
  border-radius: var(--radius);
}

.tk-ekran__slogan { max-width: 58ch; font-size: 15.5px; line-height: 1.6; color: #d9dff1; }

/* ==========================================================================
   7) GRADYAN KELİME BANDI
   --------------------------------------------------------------------------
   FOTOĞRAF ÜSTÜNE AÇIK METİN — PERDE ZORUNLU. Perde SABİT bir renk katmanıdır
   (fotoğrafın parlaklığına bağlı değil): #0b1230 %86 opaklık. Fotoğrafın en
   açık pikseli bile perdeden sonra #262c46'yı geçemiyor; gradyanın en koyu
   durağı #7aa2ff o zeminde 5,11:1 (büyük metin eşiği 3:1).
   ========================================================================== */

.tk-ses { position: relative; overflow: hidden; background: var(--tk-mur-900); }

.tk-ses__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SABİT PERDE — kontrast bununla ölçüldü. */
.tk-ses__perde { position: absolute; inset: 0; background: rgba(11, 18, 48, 0.86); }

.tk-ses__ic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: clamp(40px, 6vw, 92px);
  text-align: center;
}

.tk-ses__kelime {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(38px, 11vw, 132px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
  /* GERİYE DÜŞÜŞ: background-clip:text desteklenmezse metin LİMON kalır
     (perde üstünde 12,49:1). Şeffaf metin yalnızca destek varsa. */
  color: var(--tk-limon-400);
  overflow-wrap: anywhere;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .tk-ses__kelime {
    background: linear-gradient(96deg, #7aa2ff 0%, #22c5c5 46%, #c8f542 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.tk-ses__alt { max-width: 56ch; font-size: 15.5px; line-height: 1.65; color: #dfe4f3; }

/* ==========================================================================
   8) KOYU FIRSAT BLOĞU
   ========================================================================== */

.tk-firsat { padding-block: clamp(30px, 4vw, 54px); background: var(--tk-lacivert-800); color: #ffffff; }

.tk-firsat__ic {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.tk-firsat__baslik { margin-bottom: 12px; font-size: clamp(24px, 3vw, 38px); font-weight: 800; color: #ffffff; }
.tk-firsat__alt { margin-bottom: 20px; font-size: 15px; line-height: 1.6; color: #c3cdf2; }

.tk-firsat__urunler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/*
 | KOYU BLOKTA BÖLÜM BAĞLANTISI LİMON OLUR — ÖLÇÜLDÜ.
 |
 | `.tk-bas__bag` varsayılan olarak --tk-mavi-700 (#1743b4) ve BEYAZ zemin için
 | biçimlendi (8,41:1). Fırsat bloğunun zemini lacivert (#12206b): aynı mavi
 | orada 1,73:1'de kalıyor — okunmuyor. Limon aynı zeminde 11,49:1.
 | (Tarayıcıda getComputedStyle + WCAG bağıl parlaklık ile ölçüldü.)
 */
.tk-firsat .tk-bas__bag { color: var(--tk-limon-400); }
.tk-firsat .tk-bas__bag:hover { color: #ffffff; }

/* Koyu zeminde kart: kendi zeminini KORUR (beyaz kart) — koyu blokta beyaz
   kartlar referansın da yaptığı şey ve kart içi kontrast ölçümü değişmez. */

/* ==========================================================================
   9) ASİMETRİK SEÇİLİ VİTRİN
   --------------------------------------------------------------------------
   EŞİT IZGARA DEĞİL: sol kolonda 1 UZUN kart + 1 kart, ORTADA büyük kare
   fotoğraf, sağ kolonda 2 kart.
   ========================================================================== */

.tk-secili { padding-block: clamp(28px, 3.6vw, 48px); }

.tk-secili__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: stretch;
}

.tk-secili__uzun { grid-column: 1; grid-row: 1 / span 2; }
.tk-secili__kisa { grid-column: 3; }
.tk-secili__buyuk { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }

.tk-secili__buyuk-bag {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
}

.tk-secili__buyuk-bag img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.tk-secili__uzun .tk-kart,
.tk-secili__kisa .tk-kart {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ==========================================================================
   10) KUPON ŞERİDİ (mavi)
   ========================================================================== */

.tk-kupon { padding-block: clamp(24px, 3vw, 40px); background: var(--tk-mavi-600); color: #ffffff; }

.tk-kupon__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}

.tk-kupon__ustbas {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  /* Limon mavi zeminde 5,30:1. */
  color: var(--tk-limon-400);
}

.tk-kupon__satir { font-size: 15.5px; line-height: 1.55; color: #ffffff; }

.tk-kupon__kod {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--tk-lacivert-800);
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tk-kupon__not { font-size: 12.5px; color: #dbe4fb; }

/* ==========================================================================
   11) MÜŞTERİ YORUMLARI (yalnızca GERÇEK yorum varsa basılır)
   ========================================================================== */

.tk-yorum { padding-block: clamp(28px, 3.6vw, 48px); background: var(--tk-yuzey); }

.tk-yorum__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tk-yorum__kart {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.tk-yorum__yildiz { color: #8a6a00; font-size: 15px; letter-spacing: 1px; }
.tk-yorum__baslik { font-size: 16.5px; font-weight: 800; }
.tk-yorum__metin { font-size: 14.5px; line-height: 1.6; color: var(--text); }

.tk-yorum__urun {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.tk-yorum__urun img {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.tk-yorum__urun-ad { font-size: 13.5px; font-weight: 700; color: var(--title); }
.tk-yorum__kisi { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   12) İKİ KOYU PANEL
   ========================================================================== */

.tk-ikili { padding-block: clamp(28px, 3.6vw, 48px); }

.tk-ikili__izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tk-ikili__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--tk-mur-900);
  color: #ffffff;
}

.tk-ikili__panel--lacivert { background: var(--tk-lacivert-800); }
.tk-ikili__baslik { margin-bottom: 10px; font-size: clamp(19px, 2vw, 26px); font-weight: 800; color: #ffffff; }
.tk-ikili__alt { margin-bottom: 18px; font-size: 14.5px; line-height: 1.6; color: #c3cdf2; }
.tk-ikili__foto { min-width: 0; }

.tk-ikili__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 18 / 11;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ==========================================================================
   13) MARKA ŞERİDİ (yalnızca GERÇEK marka kaydı varsa basılır)
   ========================================================================== */

.tk-markalar { padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--border); }

.tk-markalar__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

.tk-markalar__bag {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 14px;
  background: var(--card-bg);
  text-align: center;
}

.tk-markalar__bag:hover { text-decoration: none; background: var(--tk-yuzey); }
.tk-markalar__bag img { max-height: 46px; width: auto; object-fit: contain; }

/* Marka logosu YÜKLENMEMİŞSE tescilli bir logo UYDURULMAZ: adın kendisi
   kelime markası olarak basılır. */
.tk-markalar__ad {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--tk-lacivert-800);
}

/* ==========================================================================
   15) BLOG KARTLARI
   ========================================================================== */

.tk-gunluk { padding-block: clamp(28px, 3.6vw, 48px); }

.tk-gunluk__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.tk-gunluk__kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.tk-gunluk__foto { background: var(--tk-yuzey); }

.tk-gunluk__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tk-gunluk__bos { display: grid; place-items: center; aspect-ratio: 16 / 9; font-size: 12.5px; color: var(--muted); }
.tk-gunluk__govde { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.tk-gunluk__tarih { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--tk-mavi-700); }
.tk-gunluk__baslik { font-size: 16.5px; font-weight: 800; line-height: 1.3; }

/* Blog kartının başlık bağlantısı tek satırlık yazılarda 21px kalıyordu. */
.tk-gunluk__baslik a { display: flex; align-items: center; min-height: var(--tk-dokunma); }
.tk-gunluk__ozet { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ==========================================================================
   KIRINTI YOLU — TAM GENİŞLİK GRİ ŞERİT (ürün ve liste sayfası)
   ========================================================================== */

.tk-kirinti { border-bottom: 1px solid var(--border); background: var(--tk-yuzey); }

.tk-kirinti__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  min-height: 48px;
  font-size: 13px;
  color: var(--muted);
}

.tk-kirinti__ic a,
.tk-kirinti__ic > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tk-dokunma);
}

/*
 | BAĞLANTI BİR DOKUNMA HEDEFİDİR, AYRAÇ DEĞİLDİR.
 |
 | Önceki hâlde min-width HER İKİSİNE de 24px veriliyordu; vuruş testinde
 | kısa kategori adlarında (örn. "TV") 30px'in altına düşen hedefler ölçüldü.
 | Artık yalnızca BAĞLANTI 44px'e tamamlanır; "/" ayracı ve "bulunduğunuz
 | sayfa" metni tıklanabilir değildir, onlara genişlik dayatmak trenin
 | okunurluğunu bozardı.
 */
.tk-kirinti__ic a { min-width: var(--tk-dokunma); }

.tk-kirinti__ic a:hover { color: var(--tk-mavi-700); }
.tk-kirinti__ic [aria-current="page"] { font-weight: 700; color: var(--title); }

/* ==========================================================================
   LİSTE SAYFASI — SÜZGEÇ SOLDA VE YAPIŞKAN
   ========================================================================== */

.tk-liste { padding-block: 26px 52px; }

.tk-liste__duzen {
  display: grid;
  grid-template-columns: minmax(0, 276px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.tk-liste__yan { position: sticky; top: 16px; min-width: 0; }
.tk-liste__sonuc { min-width: 0; }

.tk-liste__baslik { margin-bottom: 6px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; }
.tk-liste__aciklama { max-width: 70ch; margin-bottom: 18px; font-size: 14.5px; color: var(--muted); }

.tk-suzgec {
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.tk-suzgec__bas {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--title);
}

.tk-suzgec__grup { padding: 14px 16px; border-bottom: 1px solid var(--border); }

.tk-suzgec__baslik {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tk-lacivert-800);
}

.tk-suzgec__liste { display: flex; flex-direction: column; gap: 2px; }

.tk-suzgec__liste a {
  display: flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
}

.tk-suzgec__liste a:hover,
.tk-suzgec__liste a.is-active { text-decoration: none; background: var(--primary-soft); color: var(--tk-mavi-700); }

.tk-suzgec__alt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }

/* Süzgeç alanının etiketi — çekirdeğin `.field label` kuralının tema karşılığı.
   `.tk-alan` yalnızca bileşik seçicide (girdi/seçim/metin alanı) tanımlıydı,
   bu yüzden etiketler biçimsiz kalıyordu. */
.tk-alan label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--title);
}

.tk-sonucbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
  font-size: 14px;
}

.tk-sonucbar__form { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   ÜRÜN SAYFASI
   ========================================================================== */

.tk-urun { padding-block: 26px 20px; }

.tk-urun__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.tk-foto { min-width: 0; }

.tk-foto__ana {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.tk-foto__ana img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.tk-foto__bos { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--tk-yuzey); color: var(--muted); }

/* YATAY küçük resim şeridi (dikey şerit tunga'nın, 2x2 ızgara decorico'nun). */
.tk-foto__serit { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }

.tk-foto__kucuk {
  flex: 0 0 auto;
  width: 76px;
  min-height: var(--tk-dokunma);
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
}

.tk-foto__kucuk.is-active { border-color: var(--tk-mavi-600); }
.tk-foto__kucuk img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

.tk-bilgi { min-width: 0; }
/* Marka bağlantısı ürün sayfasında TEK BAŞINA duran bir hedeftir; 28px'ti ve
   vuruş testinde 36x28 ölçüldü. Kısa marka adlarında da 44x44'e tamamlanır. */
.tk-bilgi__marka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tk-dokunma);
  min-width: var(--tk-dokunma);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.tk-bilgi__ad { margin-bottom: 12px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; }

.tk-bilgi__kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--muted);
}

.tk-bilgi__ozet { margin-bottom: 18px; font-size: 15px; line-height: 1.6; }

.tk-bilgi__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--tk-kirmizi-500);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
}

.tk-bilgi__fiyat strong {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tk-kirmizi-700);
}

.tk-bilgi__kdv { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }
.tk-bilgi__stok { margin-bottom: 14px; font-size: 14px; font-weight: 700; }

.tk-bilgi__guven { display: grid; gap: 8px; margin-top: 18px; padding: 15px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--tk-yuzey); }
.tk-bilgi__guven li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tk-bilgi__guven i { flex: 0 0 auto; width: 18px; text-align: center; color: var(--tk-mavi-700); }

.tk-adet { display: inline-flex; align-items: stretch; border: 1.5px solid var(--control-border); border-radius: var(--radius); background: var(--card-bg); }

.tk-adet button {
  display: grid;
  place-items: center;
  /* `flex: 0 0` — DARALMAZ. Vuruş testinde bu düğmeler 30x44 ölçüldü: alan
     100% genişlik alınca kutuyu doldurmuş ve iki düğmeyi ezmişti. */
  flex: 0 0 var(--tk-dokunma);
  width: var(--tk-dokunma);
  min-height: var(--tk-dokunma);
  border: 0;
  background: transparent;
  color: var(--title);
  font-size: 18px;
  cursor: pointer;
}

.tk-adet button:disabled { opacity: 0.45; cursor: not-allowed; }

/*
 | ÖZGÜLLÜK: `.tk-adet input` (0,1,1) dosyanın aşağısındaki genel
 | `input[type="number"] { width: 100% }` kuralına (0,1,1, SONRA geliyor)
 | yeniliyordu. Öznitelik seçicisiyle (0,2,1) kural geri kazanıyor; ayrıca
 | flex tabanı sabitlenerek alan artır/azalt düğmelerini ezemez hâle geldi.
 */
.tk-adet input[type="number"] {
  flex: 0 0 62px;
  width: 62px;
  min-width: 0;
  min-height: var(--tk-dokunma);
  border: 0;
  border-inline: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-heading);
  /* 16px altına inmez (iOS zorla yakınlaştırma). */
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--title);
}

.tk-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 14px; }
.tk-not { margin-bottom: 14px; font-size: 13px; color: var(--muted); }

.tk-secenek { margin-bottom: 16px; }
.tk-secenek__baslik { margin-bottom: 8px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title); }
.tk-secenek__liste { display: flex; flex-wrap: wrap; gap: 8px; }

.tk-secenek__liste label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tk-dokunma);
  padding: 0 14px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 14px;
  cursor: pointer;
}

.tk-secenek__liste label:has(input:checked) { border-color: var(--tk-mavi-600); background: var(--primary-soft); }
.tk-secenek__liste input { width: 16px; height: 16px; accent-color: var(--tk-mavi-600); }

.tk-swatch, .swatch { width: 16px; height: 16px; border: 1px solid var(--tk-cizgi-koyu); border-radius: var(--pill); }

/* --- TAM GENİŞLİK TEKNİK ÖZELLİK TABLOSU --- */

.tk-teknik { padding-block: clamp(28px, 3.6vw, 46px); background: var(--tk-yuzey); }
.tk-teknik__baslik { margin-bottom: 16px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; }

/* Kabı KAYAR ve KLAVYEYLE ODAKLANABİLİR: tabloya display:block VERİLMEZ. */
.tk-teknik__kap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.tk-teknik__kap:focus-visible { outline: 3px solid var(--tk-mavi-600); outline-offset: 2px; }

.tk-teknik table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tk-teknik th, .tk-teknik td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tk-teknik th { width: 34%; background: var(--tk-yuzey); font-family: var(--font-heading); font-weight: 800; color: var(--title); }
.tk-teknik tr:last-child th, .tk-teknik tr:last-child td { border-bottom: 0; }

.tk-metin { padding-block: clamp(26px, 3.4vw, 44px); }
.tk-metin__baslik { margin-bottom: 14px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; }

.tk-yorumlar { padding-block: clamp(26px, 3.4vw, 44px); border-top: 1px solid var(--border); }

.tk-yorumlar__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
}

.tk-yorumlar__oge { padding: 16px 0; border-bottom: 1px solid var(--border); }
.tk-yorumlar__oge strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--title); }
.tk-yorumlar__oge p { font-size: 14.5px; line-height: 1.6; }
.tk-yorumlar__bas .muted { font-size: 13px; }
.tk-yorumlar__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.tk-yorumlar__kisi { font-family: var(--font-heading); font-size: 14.5px; font-weight: 800; color: var(--title); }

.tk-oneri { padding-block: clamp(26px, 3.4vw, 46px); }

/* ==========================================================================
   BÜLTEN + ALT BİLGİ
   ========================================================================== */

.tk-bulten { padding-block: clamp(24px, 3vw, 40px); background: var(--tk-mavi-050); border-top: 1px solid var(--tk-mavi-100); }

.tk-bulten__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 18px clamp(20px, 3vw, 40px);
  align-items: center;
}

.tk-bulten__baslik { margin-bottom: 5px; font-size: clamp(18px, 2vw, 24px); font-weight: 800; }
.tk-bulten__alt { font-size: 14px; color: var(--muted); }
.tk-bulten__form { display: flex; gap: 8px; }

/* Aynı özgüllük gerekçesi: `input[type="email"]` genel kuralı sonra geliyor. */
.tk-bulten__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tk-dokunma);
  padding: 8px 14px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
}

.tk-bulten__durum { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

.tk-alt { padding-top: clamp(30px, 4vw, 52px); background: var(--tk-mur-900); color: #d9dff1; }

.tk-alt__kolonlar {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: 34px;
}

.tk-alt h4 { margin-bottom: 12px; font-size: 15px; font-weight: 800; letter-spacing: 0.05em; color: #ffffff; }
.tk-alt p { font-size: 14px; line-height: 1.6; color: #a9b2cc; }
.tk-alt__bag { display: flex; flex-direction: column; margin-top: 10px; }

.tk-alt__bag a {
  display: flex;
  align-items: center;
  /* 38px yazılıydı; alt bilgi bağlantıları tek başına duran hedeflerdir ve
     vuruş testinde 38px ölçüldü. Kolon biraz uzuyor, hedef 44px'e çıkıyor. */
  min-height: var(--tk-dokunma);
  font-size: 14px;
  color: #d9dff1;
}

.tk-alt__bag a:hover { color: var(--tk-limon-400); }
.tk-alt__rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.tk-alt__rozetler li {
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
}

.tk-alt__telif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  color: #a9b2cc;
}

.tk-alt__odeme { display: flex; flex-wrap: wrap; gap: 6px; }

.tk-alt__odeme li {
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK KATMANI — EZİLMEYEN SAYFALAR
   ==========================================================================
   NİÇİN GEREKLİ: teknomart yedi görünümü eziyor; GERİ KALANLAR çekirdekten
   geliyor (sepet, ödeme, hesabım, üyelik, blog, iletişim ve sözleşme
   sayfaları, kampanya listesi, karşılaştırma, koleksiyon, bayi, oto araç
   seçici, garanti sorgulama, takas, tema mağazası). O sayfalar `css/shop.css`
   yüklenmediği için burada karşılığı olmayan bir sınıf STİLSİZ kalır:
   kapsayıcı genişliği kaybolur, sepet satırı yığılır, ödeme adım şeridi düz
   metne döner. Hata yok, log yok — mağazanın yarısı bozuk görünür.

   Liste ÖLÇÜMDEN geldi (100 sınıf), elle yazılmadı.
   ========================================================================== */

.section { padding-block: clamp(26px, 3.6vw, 44px); }
.section--surface { background: var(--tk-yuzey); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tk-lacivert-800);
}

.section-head h2, .section-head h3 { font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; }
.section-head p { font-size: 14px; color: var(--muted); }

.eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tk-mavi-700);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  padding-block: 10px;
  font-size: 13px;
  color: var(--muted);
}

.breadcrumb a,
.breadcrumb > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tk-dokunma);
}

/* Aynı gerekçe .tk-kirinti__ic'te yazılı: hedef bağlantıdır, ayraç değil. */
.breadcrumb a { min-width: var(--tk-dokunma); }

.breadcrumb a:hover { color: var(--tk-mavi-700); }
.breadcrumb [aria-current="page"] { font-weight: 700; color: var(--title); }

.panel {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/* h3 DE yazılır: ürün sayfasında h1 ürün adı, bölüm başlığı h2 olduğu için
   panel başlığı h3 seviyesindedir; çekirdek görünümlerde h2 kullanılıyor. */
.panel h2, .panel h3 { margin-bottom: 4px; font-size: 18px; }
.panel__desc { margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.panel--sss { margin: 0 0 10px; padding: 4px 18px; }

/*
 | TELEFON VE E-POSTA BAĞLANTILARI — VURUŞ TESTİYLE ÖLÇÜLDÜ.
 | /iletisim ÇEKİRDEK bir görünümdür (bu tema onu EZMEZ) ve iletişim
 | bilgilerini `<li style="display:flex">` içinde tek başına duran bağlantılar
 | olarak basar; yükseklikleri 44px'in altında kalıyordu. Bunlar bir cümlenin
 | içinde akan bağlantı DEĞİL (WCAG 2.5.5 satır içi istisnası uygulanmaz).
 | Düzeltme çekirdek görünümde değil, temanın kendi stil dosyasında.
 */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tk-dokunma);
}

.prose { font-size: 16px; line-height: 1.72; }
.prose h2 { margin: 24px 0 8px; font-size: 20px; }
.prose h3 { margin: 18px 0 8px; font-size: 17.5px; }
.prose p { margin-bottom: 12px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--tk-mavi-700); text-decoration: underline; }
.prose img { border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--border); }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.catcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.catcard:hover { text-decoration: none; border-color: var(--tk-mavi-600); box-shadow: var(--card-hover-shadow); }
.catcard strong { font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--title); }
.catcard span { font-size: 13px; color: var(--muted); }

/* Çekirdek ana sayfa bloğu (hero) — ezilmeyen bir sayfa onu çağırırsa. */
.hero { padding-block: clamp(26px, 4.6vw, 52px); background: var(--tk-yuzey); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--tk-lacivert-800);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }

.hero__card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 14px;
}

.hero__card-icon { flex: 0 0 auto; stroke: var(--tk-mavi-600); }

/* --- form alanları --- */

.field { margin-bottom: 14px; }

.field label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--title);
}

.field input,
.field select,
.field textarea,
.tk-alan input,
.tk-alan select,
.tk-alan textarea,
select, textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], input[type="url"] {
  width: 100%;
  min-width: 0;
  min-height: var(--tk-dokunma);
  padding: 9px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-family: var(--font-body);
  /* 16px ALTINA İNMEZ (iOS Safari zorla yakınlaştırma). */
  font-size: 16px;
  color: var(--title);
}

.field input:focus, .field select:focus, .field textarea:focus,
select:focus, textarea:focus, input:focus { border-color: var(--tk-mavi-600); }

.field textarea, textarea { min-height: 110px; resize: vertical; }
.field-error { font-size: 13px; color: var(--tk-kirmizi-700); }
.field-row, .tk-alan-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Yerel onay kutusu 18px kalır (appearance:none ile yeniden çizmek yüksek
   kontrast kipini bozar); dokunma hedefi SARAN ETİKETTİR. */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tk-dokunma);
  font-size: 14.5px;
  cursor: pointer;
}

.check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--tk-mavi-600); }

.radio-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--tk-dokunma);
  padding: 13px 15px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

.radio-card:has(input:checked) { border-color: var(--tk-mavi-600); background: var(--primary-soft); }
.radio-card input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--tk-mavi-600); }
.radio-card__price { margin-left: auto; font-family: var(--font-heading); font-weight: 800; color: var(--title); }

.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--control-border); border-radius: var(--radius); background: var(--card-bg); }

.qty button {
  display: grid;
  place-items: center;
  width: var(--tk-dokunma);
  min-height: var(--tk-dokunma);
  border: 0;
  background: transparent;
  color: var(--title);
  font-size: 18px;
  cursor: pointer;
}

.qty button:disabled { opacity: 0.45; cursor: not-allowed; }

.qty input {
  width: 62px;
  min-width: 0;
  min-height: var(--tk-dokunma);
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1 1 auto; min-width: 0; }

/* --- sepet --- */

.cartlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.cartlist { display: flex; flex-direction: column; gap: 12px; }

.cartitem {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, auto);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.cartitem__img { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cartitem__img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.cartitem__name { font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--title); }
.cartitem__meta { font-size: 13px; color: var(--muted); }
.cartitem__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.cartitem__total { font-family: var(--font-heading); font-size: 18px; font-weight: 800; color: var(--title); }

.summary {
  padding: 18px;
  border: 2px solid var(--tk-lacivert-800);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 7px; font-size: 15px; }

.summary__row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--title);
}

.summary__note { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* --- ödeme --- */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.steps { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; }
.steps__item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }

.steps__no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
}

.steps__item.is-active { font-weight: 800; color: var(--title); }
.steps__item.is-active .steps__no { border-color: var(--tk-mavi-600); background: var(--tk-mavi-600); color: #ffffff; }

.success-box {
  padding: 26px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius);
  background: var(--primary-soft);
  text-align: center;
}

.success-box__icon { display: inline-grid; place-items: center; margin-bottom: 12px; color: var(--tk-mavi-700); }

/* --- hesabım --- */

.acclayout { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px; align-items: start; }
.accnav { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }

.accnav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tk-dokunma);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.accnav a:hover, .accnav a.is-active { text-decoration: none; background: var(--primary-soft); color: var(--tk-mavi-700); }

.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.addr-grid--bosluklu { gap: 20px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; }

/* --- liste (ezilmeyen liste görünümleri) --- */

.listlayout { display: grid; grid-template-columns: minmax(0, 276px) minmax(0, 1fr); gap: 20px; align-items: start; }
.listlayout--tek { grid-template-columns: minmax(0, 1fr); }

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
  font-size: 14px;
}

.filters { padding: 4px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.filters h3 { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; font-weight: 800; }
.filters__group { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.filters__title { margin-bottom: 8px; font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tk-lacivert-800); }
.filters__list { display: flex; flex-direction: column; gap: 2px; }

.filters__list a {
  display: flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
}

.filters__list a:hover, .filters__list a.is-active { text-decoration: none; background: var(--primary-soft); color: var(--tk-mavi-700); }

.empty {
  padding: 44px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
  text-align: center;
}

/* Boş sonuç kutusunun başlığı h2 de olabilir: liste sayfasında h1 sayfa
   başlığıdır ve bir sonraki düzey h2'dir; çekirdek görünümlerde h3 kullanılıyor.
   İki yazımın da aynı görünmesi gerekiyor. */
.empty h2, .empty h3 { margin-bottom: 8px; font-size: 20px; }
.empty p { margin-bottom: 16px; }

/* --- rapor / istatistik kartları --- */

.statcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.statcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.statcard { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.statcard strong { display: block; font-family: var(--font-heading); font-size: 23px; font-weight: 800; color: var(--title); }
.statcard span { font-size: 13px; color: var(--muted); }

/* --- galeri / ürün özellikleri (ezilmeyen görünümler: koleksiyon, kombin) --- */

.gallery__main { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }

.gallery__thumb {
  flex: 0 0 auto;
  min-height: var(--tk-dokunma);
  min-width: var(--tk-dokunma);
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
}

.gallery__thumb.is-active { border-color: var(--tk-mavi-600); }

.pfeatures { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--tk-yuzey); }
.pfeatures li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.pfeatures svg { flex: 0 0 auto; stroke: var(--tk-mavi-600); }

/* --- ürün kartı (ezilmeyen görünümler çekirdek kartı çağırabilir) --- */

.pcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); overflow: hidden; }
.pcard__media { position: relative; display: grid; place-items: center; padding: 14px; }
.pcard__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.pcard__flags { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; }

.pcard__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: var(--tk-dokunma);
  height: var(--tk-dokunma);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: #ffffff;
  cursor: pointer;
}

.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 4px 14px 12px; }
.pcard__brand { font-family: var(--font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }
.pcard__name { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--title); }
.pcard__rating { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.pcard__stars { color: #8a6a00; }
.pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.pcard__price strong { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--title); }
.pcard__foot { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding: 0 14px 14px; }
.pcard__stock { font-size: 11.5px; font-weight: 700; }

/* --- ürün detayı (ezilmeyen sektör görünümleri: kuyumcu, oto) --- */

.pdetail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 40px); align-items: start; }
.pinfo h1 { margin-bottom: 12px; font-size: clamp(22px, 2.6vw, 32px); }
.pinfo__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); }

.pinfo__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--tk-kirmizi-500);
  border-radius: var(--radius);
  background: var(--tk-yuzey);
}

.pinfo__price strong { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--tk-kirmizi-700); }
.pinfo__tax { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }
.qtyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 14px; }
.qty-not { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.optgroup { margin-bottom: 16px; }
.optgroup__title { margin-bottom: 8px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--title); }
.optlist { display: flex; flex-wrap: wrap; gap: 8px; }

.optlist label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tk-dokunma);
  padding: 0 14px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 14px;
  cursor: pointer;
}

.reviews-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; }
.review { padding: 14px 0; border-bottom: 1px solid var(--border); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.review__author { font-family: var(--font-heading); font-size: 14.5px; font-weight: 800; color: var(--title); }
.stars { color: #8a6a00; }

.tabs { margin-top: 28px; }
.tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--border); }

.tabs__btn {
  min-height: var(--tk-dokunma);
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.tabs__btn.is-active { border-bottom-color: var(--tk-lacivert-800); color: var(--title); }
.tabs__panel { display: none; padding-top: 20px; }
.tabs__panel.is-active { display: block; }

/* --- sayfalama --- */

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tk-dokunma);
  min-height: var(--tk-dokunma);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.pagination a:hover { text-decoration: none; border-color: var(--tk-mavi-600); color: var(--tk-mavi-700); }
.pagination .is-current { border-color: var(--tk-lacivert-800); background: var(--tk-lacivert-800); color: #ffffff; }
.pagination .is-disabled { background: var(--tk-yuzey); color: var(--muted); }

/* --- tablolar --- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); }
.table-scroll:focus-visible { outline: 3px solid var(--tk-mavi-600); outline-offset: 2px; }

.datatable, .kargo-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.datatable th, .datatable td, .kargo-tablo th, .kargo-tablo td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.datatable th, .kargo-tablo th { background: var(--tk-yuzey); font-family: var(--font-heading); font-weight: 800; color: var(--title); }
.datatable tbody tr:hover, .kargo-tablo tbody tr:hover { background: var(--primary-soft); }

/* --- tema önizleme şeridi (panel personeli) --- */

.tema-onizleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px clamp(14px, 2.6vw, 26px);
  background: var(--tk-limon-400);
  color: var(--tk-lacivert-800);
  font-size: 14px;
}

.tema-onizleme__metin { font-weight: 800; }
.tema-onizleme__ayrinti { font-size: 13px; }
.tema-onizleme__eylemler { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tk-dokunma);
  padding: 0 14px;
  border: 1.5px solid var(--tk-lacivert-800);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tk-lacivert-800);
  cursor: pointer;
}

.tema-onizleme__btn--birincil { background: var(--tk-lacivert-800); color: #ffffff; }

/* ==================================================================
   DUYARLILIK — ONAYLI KIRILMA NOKTALARI
   ------------------------------------------------------------------
   Kullanılan noktalar DuyarlilikTest::KIRILMA_NOKTALARI listesindedir:
   1100 · 1040 · 901 · 900 · 720 · 641 · 640 · 560 · 420.
   Yeni nokta EKLENMEDİ.
   ================================================================== */

/* Masaüstü: mobil menü hiç görünmez. */
@media (min-width: 901px) {
  .tk-mobmenu { display: none; }
  .tk-mobmenu.is-open { display: none; }
}

/* 1100 ve altı: 6 kolon ızgara 4 kolona iner; yan kolonlu düzenler tek kolon. */
@media (max-width: 1100px) {
  .tk-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tk-firsat__urunler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-firsat__ic { grid-template-columns: minmax(0, 1fr); }
  .tk-urun__duzen { grid-template-columns: minmax(0, 1fr); }
  .tk-yorumlar__duzen { grid-template-columns: minmax(0, 1fr); }
  .tk-bulten__ic { grid-template-columns: minmax(0, 1fr); }
  .checkout, .cartlayout, .contact-grid, .listlayout, .acclayout { grid-template-columns: minmax(0, 1fr); }
  .pdetail, .reviews-layout { grid-template-columns: minmax(0, 1fr); }
  .pgrid, .pgrid--4, .pgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__cards, .statcards, .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1040 ve altı: liste sayfası tek kolon; süzgeç yapışkanlıktan çıkar ve
   dar ekranda süzgece giden atlama bağlantısı görünür olur. */
@media (max-width: 1040px) {
  .tk-liste__duzen { grid-template-columns: minmax(0, 1fr); }
  .tk-liste__yan { position: static; order: 2; }
  .tk-liste__sonuc { order: 1; }
  .tk-atla { display: inline-flex; }
  .tk-secili__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-secili__uzun { grid-column: 1; grid-row: 1; }
  .tk-secili__buyuk { grid-column: 2; grid-row: 1; }
  .tk-secili__kisa { grid-column: auto; grid-row: auto; }
  .tk-ikili__izgara { grid-template-columns: minmax(0, 1fr); }
}

/* 900 ve altı: başlık mobil kipe geçer. */
@media (max-width: 900px) {
  .tk-burger { display: inline-flex; }
  .tk-tepe__ic { flex-wrap: wrap; min-height: 0; padding-block: 12px; }
  .tk-arama { order: 3; flex: 1 1 100%; max-width: none; }
  .tk-marka { margin-right: auto; }
  .tk-eylem__yazi { display: none; }
  .tk-eylem { padding: 0 9px; }
  .tk-tepe__alt-ic { flex-wrap: wrap; }
  .tk-tanit { flex: 1 1 100%; justify-content: flex-start; }
  .tk-bolum__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(560px, calc(100vw - 2 * var(--tk-kenar))); }

  .tk-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-manset__slayt { grid-template-columns: minmax(0, 1fr); }
  .tk-manset__foto { order: -1; }
  .tk-tanitim__izgara { grid-template-columns: minmax(0, 1fr); }
  .tk-yorum__izgara { grid-template-columns: minmax(0, 1fr); }
  .tk-gunluk__izgara { grid-template-columns: minmax(0, 1fr); }
  .tk-markalar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-alt__kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-ikili__panel { grid-template-columns: minmax(0, 1fr); }
  .tk-ikili__foto { order: -1; }
}

/* 720 ve altı */
@media (max-width: 720px) {
  .pgrid, .pgrid--3, .pgrid--4, .pgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-teknik th { width: 44%; }
  .tk-alt__telif { justify-content: flex-start; }
}

/* 641 üstü: sepet satırı üç kolonlu kalır (aşağıdaki 640 kuralının karşılığı) */
@media (min-width: 641px) {
  .cartitem { align-items: center; }
}

/* 640 ve altı */
@media (max-width: 640px) {
  .tk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-secili__izgara { grid-template-columns: minmax(0, 1fr); }
  .tk-secili__uzun, .tk-secili__buyuk, .tk-secili__kisa { grid-column: 1; grid-row: auto; }
  .tk-manset__slayt { padding: 20px; }
  .cartitem { grid-template-columns: minmax(0, 68px) minmax(0, 1fr); }
  .cartitem__right { grid-column: 1 / -1; align-items: stretch; }
  .field-row, .tk-alan-satir { grid-template-columns: minmax(0, 1fr); }
  .tk-kupon__ic { flex-direction: column; align-items: flex-start; }
}

/* 560 ve altı */
@media (max-width: 560px) {
  .tk-alt__kolonlar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .catgrid, .addr-grid, .hero__cards, .statcards, .statcards--3 { grid-template-columns: minmax(0, 1fr); }
  .tk-bolum { flex: 1 1 100%; }
  .tk-bolum > summary { justify-content: center; }
  .tk-bolum__panel { grid-template-columns: minmax(0, 1fr); left: 0; right: 0; width: auto; max-width: none; }
  .tk-firsat__urunler { grid-template-columns: minmax(0, 1fr); }
}

/*
 | 420 ve altı: en dar bantta marka alt yazısı ve kart marka satırı incelir.
 |
 | ÜRÜN IZGARASI BURADA TEK KOLONA İNMEZ — kardeş temada ölçülen gerekçeyle
 | aynı: iki kolonda kart genişliği 320px'lik ekranda (320 − 28 dolgu − 1
 | çizgi) ÷ 2 ≈ 145px kalıyor; kart adı iki satıra kırpıldığı ve düğme tam
 | genişlik olduğu için okunur ve dokunulabilir kalıyor. Tek kolonda ana
 | sayfanın belge yüksekliği iki katına çıkar.
 */
@media (max-width: 420px) {
  .tk-marka__ad { font-size: 18px; }
  .tk-marka__isaret { width: 30px; height: 30px; font-size: 15px; }
  .tk-kart__foto { padding: 10px 8px 4px; }
  .tk-kart__govde, .tk-kart__ayak { padding-inline: 9px; }
  .tk-kart__marka { font-size: 10px; }
  .tk-kart__ad { font-size: 13px; }
  .tk-daire__bag { width: 82px; }
  .tk-daire__cerceve { width: 58px; height: 58px; }
  .tk-teknik th, .tk-teknik td { padding: 10px 12px; }
}

/* Kısa/yatay ekran: yapışkan süzgeç kolonu AKIŞA döner (onaylı yükseklik
   noktası: 480px), yoksa ekranın tamamını kaplar. */
@media (max-height: 480px) {
  .tk-liste__yan { position: static; }
}

/* ==================================================================
   HAREKETİ AZALT (WCAG 2.3.3)
   ------------------------------------------------------------------
   Süreleri sıfırlamak YETMEZ: manşetin otomatik geçişi ayrıca JavaScript
   tarafında HİÇ BAŞLAMAZ (public/js/tema-teknomart.js matchMedia ile
   sorar), yani hareket burada yalnızca görsel olarak değil KAYNAĞINDA da
   kapatılır. Bu temada sonsuz döngülü kayan şerit (marquee) YOKTUR.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  html { scroll-behavior: auto; }
}


/* ==========================================================================
   REKLAM YUVASI — TEKNOMART DİLİNDE
   ==========================================================================
   TABAN BU DOSYADA DEĞİL: `public/css/reklam.css` (R1 kolu) `.reklam`,
   `.reklam__etiket`, `.reklam__birim` ve `.reklam--bos` kurallarını
   tanımlar; yer ayırma (`--reklam-yer`), asgari mesafe tabanı (24px) ve
   dolmayan yuvanın çöküşü ORADADIR ve BURADA TEKRARLANMAZ. Bu bölüm
   yalnızca temanın kendi ritmini ve kendi tipografisini uygular.

   O dosya reklam basılacaksa `@stack('head')` üzerinden yükleniyor; bu
   temanın düzeni `@stack('head')` taşıdığı için taban kurallar burada da
   geçerli. (Tema `css/shop.css` yüklemez, ama `reklam.css` yaprak bir
   dosyadır ve sıfırlama içermez — iki sıfırlama üst üste binmez.)

   KART GÖRÜNÜMÜ VERİLMEZ — BİLEREK: zemin, çerçeve, gölge ve yuvarlatma
   bir arada reklamı ÜRÜN KARTINA benzetir; bu AdSense'in ayrı bir
   yasağıdır ve mağaza sahibinin hesabını kapattırır. Temalar birbirinden
   ZEMİNLE değil, BOŞLUK RİTMİ · AYIRICI ÇİZGİ · ETİKET TİPOGRAFİSİ ve
   ÖLÇÜ ile ayrışır.

   SABİT GENİŞLİK YOK: yalnızca `max-width` kullanılır. Duyarlılık kapısı
   9 genişlikte (320·360·390·414·768·1024·1280·1440·1920) yatay kaydırmayı
   SIFIR ölçüyor; sabit bir genişlik ya da `min-width: <px>` o kapıyı
   düşürürdü.

   GEÇİŞ KISAYOLU `all` DEĞERİYLE YAZILMAZ (depo kuralı; DuyarlilikTest
   `transition` bildirimini `all` ile arayıp düşürür — bu satır ilk
   yazımda kuralı ANLATIRKEN kalıbı da içerdiği için kapı 13 dosyada
   birden düştü, ÖLÇÜLDÜ). Bu bölümde hiç geçiş bildirimi yok.
   ========================================================================== */

/*
 * TEKNOMART — TEKNOLOJİ: DAR BOŞLUK, KUTU İÇİNDE DEĞİL ÜSTÜNDE ETİKET.
 *
 * Bu tema yoğun bir pazaryeridir; bölümler arası boşluk kısa. Yuva 32px
 * ile ayrılır ve ayırıcı olarak ÜSTTE lacivert 3px'lik KISA bir çubuk
 * kullanır (tam genişlik çizgi DEĞİL) — temanın bölüm başlıklarındaki
 * kısa vurgu çubuğuyla aynı dil.
 */
[data-tema='teknomart'] .reklam {
  --reklam-bosluk: 32px;

  padding-top: 14px;
  background-image: none;
}

/*
 * KENAR ÇUBUĞU YUVASI BU TEMADA KULLANILMIYOR — kural yine de duruyor.
 * Kategori yuvası ölçüm sonucu sonuç kolonuna taşındı (gerekçe
 * themes/teknomart/shop/category.blade.php içinde: orion ile aynı yapısal
 * noktaya aynı ögeyi koymak liste yüzeyindeki yapı benzerliğini 0,67'den
 * 0,73'e çıkarmıştı). Mağaza sahibi panelden kenar çubuğu yuvasını açarsa
 * (ör. blog ya da koleksiyon yüzeyinde) bu değer geçerli olur.
 */
[data-tema='teknomart'] .reklam--kenar-cubugu {
  --reklam-bosluk: 64px;
}

[data-tema='teknomart'] .reklam__etiket {
  position: relative;
  padding-top: 10px;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  opacity: 1;
}

[data-tema='teknomart'] .reklam__etiket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--primary);
}

[data-tema='teknomart'] .reklam--bos {
  padding-top: 0;
}

[data-tema='teknomart'] .reklam--bos .reklam__etiket::before {
  display: none;
}

@media (max-width: 1040px) {
  [data-tema='teknomart'] .reklam--kenar-cubugu {
    --reklam-bosluk: 36px;
  }
}