/* ==========================================================================
   Tek tasarım — 10 sitenin tamamı bu şablonu kullanır.
   Karakter: lacivert + pirinç, serif başlık / sans gövde, hairline çizgiler,
   bol boşluk. Üst segment bir tedarikçi gibi dursun; "ucuz katalog" değil.

   Dışarıdan yazı tipi İNDİRİLMEZ: fonts.googleapis.com'a istek hem sayfayı
   geciktirir hem de her sitede aynı istek demektir. Sistem yığını kullanılıyor,
   ağırlık ve harf aralığı ile karakter veriliyor.

   Site başına değişen tek şey site kaydından gelir (ad, logo, vurgu rengi);
   dosyada hiçbir yerde alan adı ya da marka adı yazmaz.
   ========================================================================== */

:root {
  --ink:    #121417;
  --ink-2:  #4d535b;
  --ink-3:  #868d95;

  --line:   #e3e5e8;
  --line-2: #f0f1f3;

  --bg:     #ffffff;
  --bg-2:   #f5f6f7;
  /* Sayfa zemini artık saf beyaz DEĞİL: kartlar ve paneller beyaz kalınca
     aralarındaki hafif gri, içeriği kendiliğinden gruplar. Beyaz üstüne
     beyaz kart koyduğumuzda sayfa "boş" görünüyordu. */
  /* Gövde zemini SAF BEYAZ: keskin/teknik duruş istendi. Kartlar zeminden
     gölgeyle değil, 1px çizgiyle ayrılıyor. Alt bantlar gri (bg-2). */
  --kagit:  #ffffff;

  /* Koyu kat yalnız ALTBİLGİ: siyah yerine koyu lacivert, mavi ile aynı
     aileden olsun. Başlık beyaz kalıyor. */
  --koyu:   #10233d;
  --koyu-2: #16304f;
  --koyu-3: #9fb0c4;   /* koyu zeminde ikincil yazı */

  /* Vurgu rengi yalnız küçük yüzeylerde: arama düğmesi, etkin menü çizgisi,
     bölüm başlığı çizgisi, bağlantı hover. Eylem düğmeleri antrasit. */
  /* Beyaz + mavi: zemin beyaz kalır, mavi yalnız eylem ve vurguda.
     --accent dolgu (düğme, çizgi), --accent-dark beyaz zeminde YAZI için
     (6,5:1 kontrast). İkisini karıştırma: açık mavi yazı okunmuyor. */
  --accent:      #1559b0;
  --accent-dark: #11498f;
  --accent-soft: #eef4fc;

  --r: 2px;   /* keskin köşe: düğme, input, kart */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --golge:   0 1px 2px rgba(26, 31, 38, .05), 0 6px 18px -8px rgba(26, 31, 38, .12);
  --golge-2: 0 2px 4px rgba(26, 31, 38, .06), 0 14px 32px -12px rgba(26, 31, 38, .22);

  --w: 1240px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--kagit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 22px; }

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------------------------------------------------------------- ÜST BAR */
/* Koyu ince şerit — topband ile birlikte tek bir koyu kat oluşturur. */
/* Üst bar da beyaz; başlık katı tek parça açık yüzey. */
.utilbar {
  background: var(--bg); border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-3);
}
.utilbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 32px; gap: 16px; }
.utilbar a { color: var(--ink-2); }
.utilbar a:hover { color: var(--ink); }
.utilbar-links { display: flex; gap: 22px; align-items: center; }
.utilbar-links span { display: inline-flex; align-items: center; gap: 7px; }
.utilbar svg { opacity: .6; }

.langpick { display: flex; gap: 2px; }
.langpick a {
  padding: 3px 8px; border-radius: 3px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--koyu-3);
}
.langpick a:hover { background: rgba(255,255,255,.08); color: #fff; }
.langpick a[aria-current="true"] { background: rgba(255,255,255,.12); color: #fff; }

/* Telefonu göster — numara HTML'de YOK, tıklamadan sonra uç noktadan gelir.
   Düğme ile açılan bağlantı aynı yerde durur, zıplama olmaz. */
/* Düğme üç yerde geçiyor: üst bar (koyu), altbilgi (koyu) ve iletişim
   tablosu (beyaz). Varsayılan AÇIK zemine göre; koyu katlar override ediyor.
   font-family açıkça veriliyor: iletişim tablosunun hücresi mono. */
.tel-ac {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0;
  font: inherit; font-family: var(--sans); font-size: 13px;
  color: var(--accent-dark);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.tel-ac:hover { color: var(--ink); }
.utilbar .tel-ac, .foot .tel-ac { font-size: 12.5px; color: var(--koyu-3); text-decoration-color: rgba(255,255,255,.25); }
.utilbar .tel-ac:hover, .foot .tel-ac:hover { color: #fff; text-decoration-color: var(--accent); }
.tel-ac[aria-busy="true"] { opacity: .6; cursor: progress; }

/* Devre dışı düğme. 2026-10-22: teklif modalında gönderim sırasında düğme
   `disabled` oluyordu ama GÖRÜNÜMÜ hiç değişmiyordu — kullanıcı tıkladığını
   anlamıyor, tekrar basmaya çalışıyordu. pointer-events kapatılmıyor ki
   imleç "işlem sürüyor" göstersin. */
.btn:disabled,
.btn[disabled] {
  opacity: .6;
  cursor: progress;
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Gönderim sürerken formun tamamı donuk: alanlar da yazılamaz görünsün. */
.form[aria-busy="true"] { opacity: .9; }
.form[aria-busy="true"] input,
.form[aria-busy="true"] textarea,
.form[aria-busy="true"] select { pointer-events: none; }
/* Numaranın metni bu dosyada DEĞİL: site kaydından gelip dosyanın sonuna
   eklenen `.tel-no::after` / `.tel-no2::after` kuralları veriyor
   (tel_css(), core/site.php). Burada yalnız biçim var. */
.tel-no, .tel-no2 { font-variant-numeric: tabular-nums; }
.tel-no2 { font-size: 12.5px; color: var(--koyu-3); }
.foot .tel-no2 { color: var(--koyu-3); }
.spectable .tel-no2 { color: var(--ink); font-size: 13px; }
.tel-acik { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.tel-acik a { color: var(--ink); font-weight: 600; }
.utilbar .tel-acik a, .foot .tel-acik a { color: #fff; }

/* ----------------------------------------------------------------- HEADER */
/* Koyu topband: logo beyaz, arama alanı tek parlak öğe. Açık zeminli
   başlıktan farkı, sayfanın üstünde net bir "kurumsal kat" oluşturması. */
/* KOMPAKT: başlık üç kat (üst şerit + topband + menü) ama toplam yüksekliği
   düşük tutuluyor — katalogda asıl iş ürün ızgarasında, başlık ekranın
   üçte birini yemesin. Eskiden 26px dolgu + 40px logo ile ~190px idi. */
/* BEMBEYAZ başlık: koyu kat yok, ayrım ince çizgiyle. Sayfa açıldığında
   ilk görünen şey katalog oluyor, kurumsal bir "bant" değil. */
.topband {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topband .wrap {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  align-items: center; gap: 36px;
  padding-top: 14px; padding-bottom: 14px;
}

.logo { display: inline-block; }
.logo:hover { color: var(--accent-dark); }
/* Logo = altigen isaret + site adi (core/logo.php). Baslikta acik zemin,
   altbilgide koyu zemin: iki renk seti. */
.logo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { display: block; flex: 0 0 auto; fill: var(--accent); }
.foot .logo-mark { fill: #fff; }
.logo-tag {
  display: block; margin-top: 6px; font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase;
}
.foot-brand { display: block; margin-bottom: 16px; }

/* Arama alanı başlığın tamamını kaplar — katalogda asıl giriş noktası burası. */
/* Arama alanı başlığın tamamını kaplar ve koyu katın tek parlak öğesidir.
   Düğme burada PİRİNÇ: lacivert zeminde lacivert düğme görünmüyor. Yazısı
   koyu, beyaz değil — pirinç üstünde beyaz yazının kontrastı yetersiz. */
.findbar { display: flex; width: 100%; border-radius: var(--r); }
.findbar input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r);
  padding: 10px 14px; font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.findbar input::placeholder { color: var(--ink-3); }
.findbar input:focus { outline: 0; border-color: var(--accent); }
.findbar button {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; border-radius: 0 var(--r) var(--r) 0;
  background: var(--accent); color: #fff;
  padding: 0 22px; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.findbar button:hover { background: var(--accent-dark); }

/* -------------------------------------------------------------------- NAV */
.navbar { border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 1px 0 rgba(26,31,38,.03); }
.navbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.navbar a {
  display: block; padding: 11px 0; color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.navbar a:hover { color: var(--ink); }
.navbar a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------- KIRINTI YOLU */
.trail { font-size: 12.5px; color: var(--ink-3); padding: 14px 0 0; }
.trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.trail li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.trail a { color: var(--ink-3); }
.trail a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ DÜZEN */
.cols {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px; align-items: start; padding: 22px 0 64px;
}

/* ---------------------------------------------------------------- SOL SÜTUN */
.sidecol { position: sticky; top: 24px; }

/* Panel beyaz kart: kâğıt zeminde kendi bloğu olsun. */
.box {
  margin-bottom: 28px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 16px 16px 14px;
}
/* Panel bir <details>; masaüstünde hep açık ve tıklanamaz durmalı, yoksa
   kullanıcı başlığa basınca sol kolon kapanıyor. Ok işareti yalnız mobilde. */
.box > summary { list-style: none; cursor: default; pointer-events: none; }
.box > summary::-webkit-details-marker { display: none; }
.box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.box-head h2,
.box-head .box-title {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.box-head .count { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.vendorlist { list-style: none; margin: 0; padding: 0; }
.vendorlist a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 2px;
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.vendorlist a:hover { background: var(--bg-2); }
.vendorlist a:hover { color: var(--accent); }
.vendorlist a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.vendorlist .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.box-end { margin-top: 12px; }
.box-end a { font-size: 12.5px; color: var(--accent); }

.sidecol-cta { border-top: 1px solid var(--line); padding-top: 20px; }
.sidecol-cta h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.sidecol-cta p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------------- BAŞLIK */
/* Serif başlık: katalogdaki tek serif öğe. Sans gövdenin yanında yaşlı ve
   oturmuş bir tedarikçi izlenimi veriyor, bedeli sıfır (sistem yazı tipi). */
.pagetitle { margin: 0 0 40px; max-width: 68ch; }
.pagetitle h1 {
  margin: 0 0 10px; font-family: var(--display);
  font-size: clamp(25px, 3.4vw, 32px); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.22;
}
.pagetitle p { margin: 0; color: var(--ink-2); font-size: 15px; }

.blockhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 48px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.blockhead:first-child { margin-top: 0; }
.blockhead h2 {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.blockhead .count, .blockhead a { font-size: 12px; color: var(--ink-3); }
.blockhead a:hover { color: var(--accent); }

/* -------------------------------------------------------------- ÜRÜN IZGARA */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; }

.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Hover: kart hafifçe kalkar, altına yumuşak gölge düşer, üstündeki mavi
   çizgi SOLDAN açılır. Yalnız kenarlık rengini değiştirmek (önceki hâli)
   ızgarada fark edilmiyordu. Gölge mavi-siyah, nötr gri değil: lacivert
   altbilgiyle aynı aileden. */
.tile:hover {
  border-color: #c3d3e8;
  box-shadow: 0 14px 28px -16px rgba(16, 35, 61, .35),
              0 2px 6px rgba(16, 35, 61, .06);
  transform: translateY(-3px);
}
/* Çizgi SABİT: soldan açılan animasyon kaldırıldı (kullanıcı kararı).
   Hover'da tam genişlikte, anında beliriyor — hareket yok. */
.tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); opacity: 0;
}
.tile:hover::after { opacity: 1; }
.tile-hit { position: absolute; inset: 0; z-index: 1; }

.tile-shot {
  aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--line-2);
  display: grid; place-items: center; overflow: hidden;
}
.tile-shot img { width: 100%; height: 100%; object-fit: contain; padding: 16px;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.tile:hover .tile-shot img { transform: scale(1.06); }
.noimg { display: grid; place-items: center; gap: 10px; color: var(--ink-3); text-align: center; }
.noimg svg { width: 26px; height: 26px; opacity: .3; }
.noimg span { font-size: 11.5px; }
/* Izgarada yalnız ikon kalsın — 24 kartta tekrarlayan aynı yazı gürültü yapıyor. */
.tile-shot .noimg span { display: none; }

.tile-body { padding: 14px 16px 15px; display: flex; flex-direction: column; flex: 1; }
.tile-vendor {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 6px;
}
.tile-name {
  margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.5em * 2);
}
.tile:hover .tile-name { color: var(--accent); }
.tile-code {
  /* Ayrı çizgili kutu görünümü kaldırıldı — kartı ikiye bölüyor ve boş
     görünmesine sebep oluyordu. Kod artık başlığın altında ikincil satır. */
  margin-top: auto; padding-top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------- BOŞLUK */
.empty { padding: 56px 0; text-align: center; color: var(--ink-2); }
.empty h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.empty p { margin: 0; font-size: 14px; }

/* --------------------------------------------------------------- SAYFALAMA */
.pager { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 48px 0 0; }
.pager a, .pager span {
  min-width: 34px; padding: 7px 10px; text-align: center;
  font-size: 13px; color: var(--ink-2); border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.pager .now { color: #fff; font-weight: 700; }
.pager .gap { color: var(--ink-3); min-width: 16px; padding: 7px 3px; }

/* ------------------------------------------------------------- ÜRÜN DETAYI */
.sheet { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: start; }
.sheet-shot {
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.sheet-shot img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }

.sheet h1 {
  margin: 0 0 20px; font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 27px); font-weight: 600;
  letter-spacing: -.012em; line-height: 1.3;
}
.sheet .mfrlink {
  display: inline-block; margin-bottom: 10px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.sheet .mfrlink:hover { color: var(--accent); }

.spectable { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.spectable th, .spectable td {
  padding: 9px 0; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.spectable th { width: 40%; color: var(--ink-3); font-weight: 400; padding-right: 16px; }
.spectable td { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

/* Tam genişlik. Önce 72ch ile sınırlıydı (okunabilirlik için dar kolon),
   ama ürün açıklaması sayfanın tek metin bloğu ve sağında koca bir boşluk
   kalıyordu. */
.prose { color: var(--ink-2); font-size: 15px; line-height: 1.72; max-width: none; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }

/* Eylem düğmesi turuncu ve BÜYÜK HARF; gölge yok, köşe keskin — sayfanın
   geri kalanı siyah-beyaz olduğu için tek renk öğesi düğme. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--r); padding: 11px 24px;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #11498f; border-color: #11498f; color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--ink); color: var(--ink); }
.btn-block { width: 100%; display: flex; }
.btn-sm { padding: 8px 14px; font-size: 11px; }

/* --------------------------------------------------------------- ALT ŞERİT */
.band { border-top: 1px solid var(--line); padding: 40px 0 44px; background: var(--bg-2); }
.band-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.band-head h2 {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.band-head a { font-size: 12.5px; color: var(--ink-2); }
.band-head a:hover { color: var(--accent); }

/* Marka dizini: serbest akan link yığını yerine hizalı sütunlar. */
/* Footer marka etiketleri. Eskiden 6 sütunlu sayı tablosuydu ve muhasebe
   defterine benziyordu; şimdi akan etiketler, ad öne çıkıyor. */
.vendortags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vendortags a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .15s, color .15s;
}
.vendortags a:hover { color: var(--accent); border-color: var(--accent); }
.vendortags em {
  font-style: normal; font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vendortags .more a { border-style: dashed; color: var(--ink-3); }

.vendorgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 32px;
}
.vendorgrid a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.vendorgrid a:hover { color: var(--accent); }
.vendorgrid em {
  font-style: normal; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* Marka listesi sayfasındaki harf grupları da aynı dizin düzenini kullanır. */
.vendorcols {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 32px; margin-bottom: 8px;
}
.vendorcols a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.vendorcols a:hover { color: var(--accent); }

/* A-Z harf dizini */
/* A-Z tek satır. Sarmak yerine dar ekranda yatay kayar — 27 harf alt alta
   dökülünce dizin blok gibi görünüyor ve sayfayı aşağı itiyordu. */
.letterbar {
  display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 28px;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px;
}
.letterbar a { flex: 0 0 auto; }
.letterbar a {
  /* 27 düğme içerik sütununa sığsın diye dar: 30px+9px yan boşlukta Y ve Z
     taşıyordu. Genişlik esnetilmiyor, taşarsa satır yatay kayıyor. */
  min-width: 25px; padding: 5px 5px; text-align: center;
  font-size: 12px; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 2px;
}
.letterbar a:first-child { padding-left: 10px; padding-right: 10px; }
.letterbar a:hover { color: var(--accent); border-color: var(--accent); }
.letterbar a[aria-current] {
  color: #fff; background: var(--ink); border-color: var(--ink); font-weight: 500;
}

/* -------------------------------------------------------------------- CTA */
.closer {
  border-top: 1px solid var(--line); margin-top: 64px; padding-top: 32px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.closer h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.closer p { margin: 0; color: var(--ink-2); font-size: 13.5px; max-width: 58ch; }

/* ----------------------------------------------------------------- FOOTER */
/* Koyu altbilgi — topband ile sayfayı iki koyu kat arasına alır. */
.foot {
  background: var(--koyu); border-top: 3px solid var(--accent);
  padding: 52px 0 0; font-size: 13.5px; color: var(--koyu-3);
}
.foot h3 {
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px;
}
.foot a { color: var(--koyu-3); }
.foot a:hover { color: #fff; }
.foot-cols { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot p { margin: 0; line-height: 1.75; max-width: 42ch; }
.foot-end {
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0;
  font-size: 12px; color: rgba(159,176,196,.75);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- WHATSAPP */
.wabtn {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  opacity: .85;
}
.wabtn:hover { opacity: 1; background: var(--ink); color: #fff; }
.wabtn svg { width: 21px; height: 21px; }

/* ------------------------------------------------- TEK KOLON (form sayfası) */
.onecol { max-width: 640px; margin: 0 auto; padding: 36px 0 80px; }

/* Ürün özeti şeridi — kutu içinde kutu yerine düz bir satır. */
.reqitem {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 32px; background: var(--bg-2);
}
.reqitem:hover { border-color: var(--ink-3); }
.reqitem-shot {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden; color: var(--ink-3);
}
.reqitem-shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.reqitem-shot svg { width: 22px; height: 22px; opacity: .35; }
.reqitem-txt { display: grid; gap: 2px; min-width: 0; }
.reqitem-vendor {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.reqitem-name {
  font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reqitem-code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ------------------------------------------------------------------- FORM */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.field label i { color: var(--accent-dark); font-style: normal; }
.field input, .field textarea {
  border: 1px solid var(--line); border-radius: 2px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; line-height: 1.4;
  background: var(--bg); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: #cf5a4f; }
.field textarea { min-height: 84px; resize: vertical; }
.err { font-size: 11px; color: #b02a1f; font-style: normal; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-end {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--line-2); padding-top: 16px; margin-top: 2px;
}
.backlink { font-size: 13px; color: var(--ink-3); }
.backlink:hover { color: var(--accent); }

.note { padding: 11px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 22px; }
.note-good  { background: #f2f8f4; color: #17683d; border: 1px solid #d6ebde; }
.note-bad { background: #fdf4f4; color: #a4271f; border: 1px solid #f0d7d5; }

/* -------------------------------------------------------------- DUYARLILIK */
@media (max-width: 1024px) {
  .cols { grid-template-columns: 1fr; gap: 40px; }
  /* Tek sütuna düşünce sol kolon içeriğin ÜSTÜNE biniyordu: ürün sayfasında
     kullanıcı önce 25 marka görüyor, ürünü görmek için aşağı iniyordu.
     DOM sırası korunuyor (linkler yerinde), yalnız görsel sıra değişiyor. */
  .sidecol { position: static; order: 2; }
  .box { margin-bottom: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  /* Mobilde katlanabilir: başlık tıklanır, ok işareti çıkar. */
  .box > summary { cursor: pointer; pointer-events: auto; }
  .box-head { margin-bottom: 0; }
  .box[open] .box-head { margin-bottom: 12px; }
  .box-head h2::after,
  .box-head .box-title::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .box[open] .box-head h2::after { transform: translateY(1px) rotate(-135deg); }
  .sheet { grid-template-columns: 1fr; gap: 32px; }
  .sheet-shot { max-width: 380px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .topband .wrap { grid-template-columns: 1fr; gap: 16px; }
  .topband-cta { display: none; }
  /* Telefon ve e-posta dar ekranda da kalsın — eskiden e-posta gizleniyordu,
     oysa mobilde en çok ihtiyaç duyulan iki bilgiden biri. Yer açmak için
     yazı, boşluk ve ikonlar küçülüyor. 380px altında e-posta düşer. */
  .utilbar { font-size: 11.5px; }
  .utilbar .wrap { gap: 10px; }
  .utilbar-links { gap: 12px; }
  .utilbar-links svg { display: none; }
  /* Menü yatay KAYMAZ: dar ekranda harf aralığı ve punto küçülüp dört
     bağlantı da satıra sığıyor (320px'te bile). Kaydırmalı menüde
     "İLETİŞİM" ekranın dışında kalıyor ve kimse sağa sürüklemiyordu.
     Sığmayacak kadar çok bağlantı eklenirse alt satıra iner. */
  .navbar ul {
    gap: 10px; flex-wrap: wrap; justify-content: space-between;
    overflow: visible;
  }
  .navbar a {
    white-space: nowrap; padding: 12px 0;
    font-size: 10.5px; letter-spacing: .06em;
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px 10px; }
  .pagetitle h1 { font-size: 19px; }
  .duo { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; gap: 28px; }
}

@media print {
  .utilbar, .navbar, .sidecol, .wabtn, .closer, .foot, .band { display: none; }
}

/* ------------------------------------------------------------- MARKA BAŞLIĞI */
/* Eskiden düz bir h1 + paragraftı, sayfa kimliksiz duruyordu. */
.vendorhead {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px;
  align-items: start; margin: 0 0 36px; padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.vendorhead-badge {
  display: grid; place-items: center; width: 62px; height: 62px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent);
  font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.vendorhead h1 {
  margin: 0 0 7px; font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
}
.vendorhead h1 span { font-size: 15px; font-weight: 400; color: var(--ink-3); }
.vendorhead p { margin: 0; color: var(--ink-2); font-size: 13.5px; max-width: 72ch; }

.vendorhead-nums { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 0; }
.vendorhead-nums div { display: flex; flex-direction: column-reverse; gap: 1px; }
.vendorhead-nums dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.vendorhead-nums dd {
  margin: 0; font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* --------------------------------------------------------------- KAYAN ŞERİT */
/* JS yok. Liste iki kez basılır, animasyon %50'de başa döner; ikinci kopya
   birincinin bittiği yerden devam ettiği için dönüş noktası görünmez. */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2); overflow: hidden; padding: 16px 0 18px;
  /* kenarlarda yumuşak geçiş — şerit çerçeveye çarparak kesilmesin */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.ticker-head h2 {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.ticker-head span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Gerçek yatay kaydırma — sürükleme ile aynı değeri paylaşsın diye
   transform animasyonu değil scrollLeft kullanılıyor (bkz. assets/js/serit.js). */
.ticker-view {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; touch-action: pan-x pan-y;
}
.ticker-view::-webkit-scrollbar { display: none; }
.ticker-view.suruk { cursor: grabbing; }
/* Sürüklerken metin seçilmesin — imleç yazıyı boyayıp bırakıyordu. */
.ticker-view.suruk * { user-select: none; }
.ticker-track { display: flex; width: max-content; }

.ticker-list { list-style: none; margin: 0; padding: 0; display: flex; }
.ticker-list a {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 26px 6px 6px; margin-right: 10px;
  border-right: 1px solid var(--line); color: var(--ink-2);
}
.ticker-list img {
  width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 3px;
}
.ticker-list span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ticker-list em {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.ticker-list b {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink);
  white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
}
.ticker-list a:hover b { color: var(--accent); }

/* Sürüklenirken görsellerin kendi sürükleme davranışı devreye girmesin. */
.ticker-list img { -webkit-user-drag: none; user-select: none; }

@media (max-width: 700px) {
  .vendorhead { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .vendorhead-badge { width: 48px; height: 48px; font-size: 20px; }
  .vendorhead h1 { font-size: 20px; }
  .vendorhead-nums { gap: 18px; }
}

/* --------------------------------------------------------------- ÇEREZ BANDI */
/* Alta sabit, dar bir şerit. Ekranı kaplayan karartma kullanılmadı: içeriği
   okumayı engelleyen onay pencereleri hem sinir bozucu hem de gereksiz —
   karar verilene kadar zaten hiçbir çerez yazılmıyor. */
.consentbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(26, 31, 38, .07);
}
.consentbar[hidden] { display: none; }
.consentbar-in {
  max-width: var(--w); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.consentbar p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 78ch; }
.consentbar strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.consentbar a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consentbar-act { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 760px) {
  .consentbar-in { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 20px; }
  .consentbar-act { justify-content: flex-end; }
}

/* Çok dar ekran: e-posta metni telefonla yan yana sığmıyor, e-posta düşer.
   Bağlantı footer'da ve iletişim sayfasında duruyor. */
@media (max-width: 380px) {
  .utilbar-links span:not(:first-child) { display: none; }
}


/* ==========================================================================
   Tipografi ve kontrast geçişi — koyu kat + serif başlık düzeninin
   tamamlayıcısı. Ayrı blok, çünkü hepsi aynı karardan çıkıyor.
   ========================================================================== */

/* Altın-bej (#b8964f) beyaz zeminde 13-14px yazı için ~3:1 veriyor; WCAG AA
   4,5:1 istiyor. Dolgu ve çizgi olarak açık ton kalıyor, YAZI olarak koyu
   ton (#8a6d2f, ~5:1) kullanılıyor. Koyu zeminli yerler (utilbar, foot) ayrı. */
a:hover,
.box-end a,
.consentbar a,
.field label i,
.vendorlist a:hover,
.blockhead a:hover,
.vendortags a:hover,
.vendorgrid a:hover,
.vendorcols a:hover,
.letterbar a:hover,
.backlink:hover,
.pager a:hover,
.band-head a:hover,
.sheet .mfrlink:hover,
.tile:hover .tile-name,
.ticker-list a:hover b { color: var(--accent-dark); }

/* Başlık ailesi: sayfa başlığı, ürün adı, marka adı ve kapanış çağrısı aynı
   serif yüzü paylaşır — küçük büyük harf etiketler sans kalır. */
.vendorhead h1, .closer h2, .empty h3 { font-family: var(--display); font-weight: 600; }
.vendorhead h1 { font-size: clamp(23px, 2.8vw, 29px); letter-spacing: -.015em; }
.closer h2 { font-size: 21px; letter-spacing: -.01em; }
.empty h3 { font-size: 19px; }
.prose { font-size: 15px; }

/* Bölüm başlığı: etiketin soluna kısa pirinç çizgi. Tek renk vurgusu
   başlığı sayfada bir "bölüm" gibi oturtuyor. */
.blockhead h2, .band-head h2, .ticker-head h2, .box-head h2 {
  display: flex; align-items: center; gap: 10px; color: var(--ink);
  letter-spacing: .11em;
}
.blockhead h2::before, .band-head h2::before,
.ticker-head h2::before, .box-head h2::before {
  content: ""; width: 18px; height: 2px; background: var(--accent); flex: 0 0 auto;
}

/* Marka başlığındaki harf kutusu: açık mavi yerine koyu kat + pirinç harf. */
.vendorhead-badge {
  background: var(--accent-soft); border-color: var(--line); color: var(--accent-dark);
  box-shadow: var(--golge);
}

/* Etkin sayfa ve A-Z seçili harf lacivert dolgu alır (--ink zaten lacivert). */
.pager .now { background: var(--accent); color: #fff; }

/* Alt bantlar: kartların beyazıyla ayrışsın diye hafif gri zemin. */
.band, .ticker { background: var(--bg-2); }

/* Yüzen WhatsApp düğmesi: lacivert daire, pirinç çerçeve. */
.wabtn {
  background: var(--koyu); opacity: 1; box-shadow: var(--golge-2);
  width: 46px; height: 46px; border: 0;
}
.wabtn:hover { background: var(--koyu-2); }
/* Logo dosyası tanımlı değilse sitenin adı yazıyla basılıyor (core/logo.php).
   Koyu zeminde beyaz, ilk kelime pirinç değil — ad tek parça okunsun. */
/* Ürün başlığının altındaki tip metni: h1'den çıkarıldı (h1 artık yalnız
   marka + kod), ama ürünün ne olduğu ekranda görünmeye devam ediyor. */
.lead-tip {
  margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2);
}

/* Logo dosyası yoksa site adı yazıyla basılır (core/logo.php).
   Başlık beyaz zemin → siyah yazı; altbilgi koyu → beyaz yazı. */
.logo-ad {
  display: inline-block; color: var(--ink); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
}
.logo:hover .logo-ad { color: var(--ink); }
.foot .logo-ad { color: #fff; }

/* .wabtn artık <button>: tarayıcı dolgusu ve yazı tipi sıfırlanıyor. */
button.wabtn { padding: 0; font: inherit; cursor: pointer; }

/* Yazdırma: koyu katlar mürekkep yakıyor. */
@media print {
  .topband, .foot { background: #fff !important; border-color: #000 !important; }
  .logo-mark { fill: #000; }
}


/* ==========================================================================
   Teklif modalı — ürün sayfası. Native <dialog>: odak tuzağı, Esc ve zemin
   karartması tarayıcıdan geliyor, JS'e kalan yalnız açmak/kapatmak.
   ========================================================================== */
/* KOMPAKT: modal bir form kutusu, sayfa değil. Genişlik 520, iç boşluklar
   dar; amaç ekranı kaplamadan tüm alanların tek bakışta görünmesi. */
.modal {
  padding: 0; border: 0; border-radius: 2px;
  width: min(520px, calc(100vw - 28px));
  background: var(--bg); color: var(--ink);
  box-shadow: 0 18px 50px -12px rgba(18, 20, 23, .5);
}
.modal::backdrop { background: rgba(26, 31, 38, .55); }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: 16px; letter-spacing: -.01em;
}
.modal-kapat {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font: inherit; font-size: 22px; line-height: 1; color: var(--ink-3);
}
.modal-kapat:hover { color: var(--ink); }

.modal-govde { padding: 14px 16px 16px; max-height: min(74vh, 600px); overflow-y: auto; }

/* Ürün satırı: modal hangi ürün için açıldığını söylemeli. */
.modal-urun {
  margin: 0 0 14px; padding: 9px 11px;
  background: var(--bg-2); border-radius: 2px;
  display: grid; gap: 1px;
}
.modal-urun em {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark);
}
.modal-urun b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.modal-urun span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* Modalda "← Ürünler" bağlantısının işi yok: zaten ürün sayfasındayız. */
.modal .backlink { display: none; }
.modal .form { gap: 12px; }
.modal .duo { gap: 12px; }
.modal .field textarea { min-height: 70px; }
.modal .form-end { justify-content: flex-end; }

@media (max-width: 560px) {
  .modal { width: calc(100vw - 20px); }
  .modal-govde { padding: 16px; max-height: 78vh; }
  .modal .duo { grid-template-columns: 1fr; }
}

.field-dar { max-width: 150px; }


/* ---- Ürün kartı hover'ının son rötuşları (renk bloğundan SONRA gelmeli) ---- */
.tile:hover .tile-name {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Üretici kodu hover'da griden koyuya: kart bütün olarak canlanıyor. */
.tile-code { transition: color .2s; }
.tile:hover .tile-code { color: var(--ink-2); }

/* Dokunmatik ekranda :hover tıklamadan sonra üstünde kalıyor; kart yükselmiş
   ve gölgeli donuyordu. Yalnız gerçek işaretçi varsa uygulanır. */
@media (hover: none) {
  .tile:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .tile:hover::after { opacity: 0; }
  .tile:hover .tile-shot img { transform: none; }
  .tile:hover .tile-name { text-decoration: none; }
}


/* ==========================================================================
   Markalar sayfasi — tam genislik, kart izgarasi.
   Sol marka kolonu bu sayfada basilmiyor (sayfanin kendisi o liste).
   ========================================================================== */
.genis { padding: 22px 0 64px; }

.markagrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.markakart {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 11px 13px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.markakart:hover {
  border-color: #c3d3e8; transform: translateY(-2px);
  box-shadow: 0 10px 20px -14px rgba(16, 35, 61, .35);
}
/* Bas harf rozeti: uzun listede goz hizalamasi icin. */
.markakart-harf {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.markakart-txt { display: grid; gap: 1px; min-width: 0; }
.markakart-txt b {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.markakart:hover .markakart-txt b { color: var(--accent-dark); }
.markakart-txt em {
  font-style: normal; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* A-Z dizini: secili harf dolu kutu, digerleri cizgili. */
.letterbar a {
  min-width: 30px; padding: 6px 7px; background: var(--bg);
  border-color: var(--line); font-weight: 600;
}
.letterbar a:first-child { padding-left: 12px; padding-right: 12px; }
.letterbar a[aria-current] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

@media (max-width: 700px) {
  .genis { padding: 16px 0 48px; }
  .markagrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .markakart { padding: 9px 10px; gap: 9px; }
  .markakart-harf { width: 28px; height: 28px; font-size: 12px; }
}
@media (max-width: 420px) {
  .markagrid { grid-template-columns: 1fr; }
}

.tel-no::after{content:"+90 (322) 911 01 24"}.tel-no2::after{content:"+90 551 885 80 56"}