/* ==========================================================================
   Akpınar Rulman — Katalog modülü
   Mevcut assets/css/style.css'in ÜSTÜNE yüklenir.
   Kendi rengini TANIMLAMAZ; sitenin değişkenlerini kullanır
   (--bg-primary, --bg-secondary, --accent, --text-primary …) böylece
   koyu/açık tema anahtarı katalogda da çalışır.
   ========================================================================== */

/* ---------------------------------------------------------------- arama çubuğu
   Sitenin üst menüsü position:fixed ve 80px (mobilde 70px) yüksekliğinde.
   Çubuk eskiden menünün altına yapışıyordu (sticky); yedi açılır listeyle
   ekranın üçte birini kaplıyordu. 17 Ekim 2026'dan beri sayfayla kayar. */
.kat-bar {
  position: relative;
  z-index: 2;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.kat-bar-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kat-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.kat-head h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.kat-sp { flex: 1 }
.kat-stat {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kat-stat b { color: var(--accent); font-weight: 700 }

.kat-search { position: relative }
.kat-search > i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.kat-search input {
  width: 100%;
  padding: 15px 46px 15px 48px;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--form-input-bg);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  outline: none;
  transition: var(--transition-fast);
}
.kat-search input::placeholder { color: var(--text-secondary); opacity: .75 }
.kat-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-color);
}
.kat-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  display: none;
}
.kat-clear:hover { color: var(--accent) }

/* ---------------------------------------------------------------- marka düğmeleri
   Marka seçimi logolu düğmelerle; açılır listeler (ürün tipi, kapak tipi,
   iç çap, kullanım alanı, stok) 17 Ekim 2026'da kaldırıldı. Seri listesi
   yalnızca serisi olan ürünler varken görünür. */
.kat-filtreler {
  display: flex;
  gap: 10px 14px;
  align-items: flex-start;
  justify-content: space-between;
}
.kat-markalar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.kat-mchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 11px 0 5px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex: 0 0 auto;
}
.kat-mchip.tumu { padding: 0 14px }
.kat-mchip .sayi {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.kat-mchip:hover { border-color: rgba(var(--accent-rgb), .6) }
.kat-mchip.etkin {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3);
}
.kat-mchip.etkin .sayi { color: var(--accent) }
.kat-mchip .kat-logo { height: 30px; min-width: 56px; margin: 0 }
.kat-mchip .kat-logo img { height: 18px }
.kat-mchip .kat-logo.dik img { height: 27px }
.kat-fl-sag { display: flex; gap: 8px; align-items: center; flex: 0 0 auto }
.kat-fl-sag select {
  height: 42px;
  padding: 0 11px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  min-width: 130px;
  cursor: pointer;
  outline: none;
}
.kat-fl-sag select:focus { border-color: var(--accent) }
.kat-fl-sag select[hidden] { display: none }

/* Kategori sayfasında bütün rulmanlara dönüş */
.kat-geri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 5px 11px 5px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--bg-tertiary);
  border-radius: 999px;
  transition: var(--transition-fast);
}
.kat-geri i { font-size: 0.68rem }
.kat-geri:hover { color: var(--accent); border-color: var(--accent) }
.kat-sifirla {
  height: 42px;
  padding: 0 14px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
.kat-sifirla:hover { border-color: var(--accent); color: var(--accent) }

/* ---------------------------------------------------------------- marka tespiti */
.kat-tespit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: var(--border-radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.kat-tespit i { color: var(--accent); margin-top: 2px }
.kat-tespit b { color: var(--accent) }

/* ---------------------------------------------------------------- ızgara */
.kat-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.kat-kart {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.kat-kart:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: var(--card-shadow);
}
.kat-gorsel {
  aspect-ratio: 1;
  position: relative;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(165deg, var(--bg-tertiary), var(--bg-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.kat-gorsel svg { display: block; width: 100%; height: 100% }
/* Ürün fotoğrafları beyaz zeminli: alan da beyaz, fotoğraf kenara kadar */
.kat-gorsel.fotolu { background: #fff }
.kat-gorsel .yer {
  width: 40px; height: 40px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: katdon .8s linear infinite;
}
@keyframes katdon { to { transform: rotate(360deg) } }
.kat-govde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--glass-border);
  flex: 1;
}
/* Marka logosu beyaz plakada (marka şeridindeki rozetlerle aynı mantık:
   logo dosyaları kimi şeffaf SVG, kimi beyaz zeminli PNG). Logo dosyası
   olmayan markanın adı kendi renginde yazılır. */
.kat-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 60px;
  padding: 0 10px;
  margin: 0 0 9px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 6px;
  flex: 0 0 auto;
}
.kat-logo img {
  /* Yükseklik sabit, genişlik orandan: skf.svg'nin kendi boyu yok (yalnızca
     viewBox), "auto" ile 34x8 px'e büzülüyordu */
  display: block;
  height: 20px; width: auto;
  max-width: 88px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Kare logo (INA baklavası): plakanın boyunca, yoksa yazısı okunmuyor */
.kat-logo.dik { padding: 0 8px }
.kat-logo.dik img { height: 30px }
/* Markasız ürün: plaka görünmez, yeri durur */
.kat-logo.bos { visibility: hidden }
.kat-logo .mrk-ad {
  color: var(--mrk);
  font-size: 0.84rem;
  letter-spacing: .07em;
  padding-bottom: 3px;
}
.kat-logo .mrk-ad::after { height: 2px; background: var(--mrk) }
.kat-tur {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 3px;
}
.kat-ustbaslik {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.kat-kod {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  word-break: break-all;
}
.kat-olcu {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kat-etiketler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px }
.kat-etiket {
  font-size: 0.68rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 3px 7px;
  border-radius: 5px;
}
.kat-stok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: auto;
}
/* Stok rozeti kartın dibinde: kod ya da tür iki satıra inince de aynı sıradaki
   kartların rozetleri aynı hizada kalır */
.kat-bilgi { align-self: stretch; margin-bottom: 10px }
.kat-stok.var { background: var(--success-glow); color: var(--success) }
.kat-stok.az { background: rgba(var(--accent-rgb), .18); color: var(--accent) }
.kat-stok.yok { background: var(--danger-glow); color: var(--danger) }

.kat-bos { grid-column: 1/-1; text-align: center; padding: 70px 20px; color: var(--text-secondary) }
.kat-bos h3 { font-family: var(--font-display); color: var(--text-primary); margin-bottom: 10px }
.kat-daha {
  display: block;
  margin: 28px auto 0;
  padding: 13px 30px;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
.kat-daha:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .08) }

/* ---------------------------------------------------------------- ürün sayfası */
.urun-yol {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px 0 0;
}
.urun-yol a { color: var(--text-secondary); text-decoration: none }
.urun-yol a:hover { color: var(--accent) }
.urun-yol .ay { opacity: .45 }

.urun-duzen {
  display: grid;
  /* minmax(0, ...): sütun içindeki geniş tablo (muadil tablosu, min 440px) sütunu
     genişletmesin; tablo kendi kutusunda kayar. Yoksa telefonda görsel ve
     başlık ekrandan taşıyordu. */
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  gap: 40px;
  padding: 26px 0 60px;
  align-items: start;
}
@media (max-width: 900px) { .urun-duzen { grid-template-columns: minmax(0, 1fr); gap: 26px } }

.urun-gorsel {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.07), transparent 62%),
    linear-gradient(165deg, var(--bg-tertiary), var(--bg-primary));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 22px;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) { .urun-gorsel { position: static } }
.urun-gorsel svg { display: block; width: 100%; height: auto }
.urun-gorsel .not {
  margin-top: 16px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 11px 13px;
}

.urun-kod {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.urun-altbaslik { color: var(--text-secondary); font-size: 1rem; margin: 0 0 18px }
.urun-altbaslik strong { color: var(--text-primary) }
.urun-rozetler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px }
.urun-rozet {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.urun-rozet.tip {
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .4);
  color: var(--accent);
}
.urun-rozet.var { background: var(--success-glow); color: var(--success) }
.urun-rozet.az { background: rgba(var(--accent-rgb), .18); color: var(--accent) }
.urun-rozet.yok { background: var(--danger-glow); color: var(--danger) }

/* iletişim kutusu */
.urun-cta {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 20px;
  margin-bottom: 30px;
}
.urun-cta .etiket {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 13px;
}
.urun-cta-satir { display: flex; gap: 10px; flex-wrap: wrap }
/* dükkân konumu: yerel aramalarda (İkitelli, Esenler Oto Sanayi Sitesi) ürün sayfası da adresi anar */
.urun-cta-adres {
  margin: 14px 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.urun-cta-adres i { color: var(--accent); margin-right: 4px }
/* ürün açıklaması: katalog dışı ürünün metni ve koda özel kısa tanım */
.urun-aciklama { color: var(--text-secondary); line-height: 1.7; margin: 20px 0 4px; max-width: 72ch }
.urun-cta-adres a { color: var(--text-primary); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px }
.kat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.kat-btn-wa { background: #25d366; color: #06281a }
.kat-btn-wa:hover { background: #1eb455; color: #06281a; transform: translateY(-2px) }
.kat-btn-tel { background: var(--accent); color: var(--bg-primary) }
.kat-btn-tel:hover { background: var(--accent-hover); transform: translateY(-2px) }
.kat-btn-o {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--bg-tertiary);
}
.kat-btn-o:hover { border-color: var(--accent); color: var(--accent) }

/* tablolar */
.kat-basliksec {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 30px 0 12px;
}
.kat-tw {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
}
table.kat-t { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 440px }
table.kat-t th {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  text-align: left;
  padding: 11px 14px;
}
table.kat-t td {
  padding: 11px 14px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-primary);
  vertical-align: middle;
}
table.kat-t .mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--text-primary);
}
/* .kat-kopyala kaldirildi: muadil tablosundaki 'kopyala' butonlari istenmedi */

.kat-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 6px 18px;
  font-size: 0.92rem;
}
@media (max-width: 620px) { .kat-liste { grid-template-columns: 1fr } }
.kat-liste div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}
.kat-liste div:last-child { border-bottom: 0 }
.kat-liste span { color: var(--text-secondary) }
.kat-liste b { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-primary) }
.kat-yaklasik {
  color: var(--accent);
  cursor: help;
  border-bottom: 1px dotted var(--accent);
}

.kat-not {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 13px 16px;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-top: 16px;
}
.kat-not b { color: var(--text-primary) }
/* ürün sayfası: kapak tipleri karşılaştırması (kardeş ürün bağlantıları) */
.urun-fark a { color: var(--accent); font-weight: 600; text-decoration: none }
.urun-fark a:hover { text-decoration: underline }
.kat-not.uyari {
  background: rgba(var(--accent-rgb), .07);
  border-color: rgba(var(--accent-rgb), .28);
}

.kat-benzer { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px }

/* ---------------------------------------------------------------- mobil */
@media (max-width: 760px) {
  .kat-bar-in { padding: 14px 18px; gap: 11px }
  .kat-filtreler { flex-direction: column; align-items: stretch; gap: 10px }
  .kat-markalar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 2px 18px 4px;
    scrollbar-width: none;
  }
  .kat-markalar::-webkit-scrollbar { display: none }
  .kat-fl-sag select { flex: 1 1 auto }
  .kat-head h1 { font-size: 1.2rem }
  .kat-izgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
  .kat-govde { padding: 11px 12px 13px }
  .kat-kod { font-size: 0.9rem }
  .urun-duzen { padding: 18px 0 44px }
  .urun-cta-satir .kat-btn { flex: 1 1 auto }
}
@media (max-width: 430px) {
  .urun-cta-satir { flex-direction: column }
  .urun-cta-satir .kat-btn { width: 100% }
}

/* ==========================================================================
   ANA SAYFA — gerçek parça görselleri ve marka şeridi
   İkonlar (fa-gear, fa-circle-dot) ürün görseli yerine kullanılıyordu;
   rulman satan bir sitede ürünün kendisi görünmeli.
   ========================================================================== */

/* --- hero ürün görseli --- */
.hero-urun {
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
}
.hero-urun svg { display: block; width: 100%; height: auto }
.hero-yer {
  width: 46px; height: 46px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: katdon .8s linear infinite;
}
.hero-urun-alt {
  text-align: center;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-urun-kod {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.hero-urun-olcu { font-size: .82rem; color: var(--text-secondary) }

/* --- marka şeridi --- */
.marka-serit-bolum {
  padding: 34px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: var(--bg-secondary);
}
.marka-serit-baslik {
  text-align: center;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.marka-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;           /* 12 marka masaüstünde tek satıra sığsın (ORS eklendi, 17 Ekim 2026) */
  justify-content: center;
  align-items: center;
}
.mrk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 12 marka tek satira sigsin (kapsayici 1152px): 6 logolu x 92 +
     6 yazili x 84 + 11 x 8 bosluk = 1144px. Once 102px'ti; NSK, sonra ORS
     tek basina alt satira dusuyordu. */
  min-width: 84px;
  height: 52px;
  padding: 0 12px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: var(--transition-fast);
}
.mrk:hover { border-color: var(--accent); transform: translateY(-2px) }
.mrk img { max-height: 30px; max-width: 100px; width: auto; height: auto }
/* Tipografik rozet: marka adı + kurumsal renk şeridi.
   Gerçek logo dosyası yüklenirse bu devre dışı kalır. */
.mrk-ad {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .04em;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 6px;
  white-space: nowrap;
}
.mrk-ad::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--mrk, var(--accent));
}
.marka-serit-not {
  text-align: center;
  margin: 18px 0 0;
  font-size: .85rem;
  color: var(--text-secondary);
}
.marka-serit-not a { color: var(--accent); text-decoration: none }
.marka-serit-not a:hover { text-decoration: underline }

/* --- ürün kategori kartı görseli --- */
.urun-kart-gorsel {
  aspect-ratio: 1.15;
  margin: 0 0 18px;
  border-radius: var(--border-radius-md);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(165deg, var(--bg-tertiary), var(--bg-primary));
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.urun-kart-gorsel svg { display: block; width: 100%; height: auto }

/* --- özellik kartı: ikon yerine numara --- */
.feature-no {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: .32;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* --- katalog çağrısı --- */
.katalog-cagri {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 32px;
}
@media (max-width: 820px) { .katalog-cagri { grid-template-columns: 1fr; gap: 20px } }
.katalog-cagri-baslik {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.katalog-cagri-alt { margin: 0; color: var(--text-secondary); line-height: 1.65 }
.katalog-cagri-form { display: flex; gap: 10px; flex-wrap: wrap }
.katalog-cagri-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  font-family: var(--font-primary);
  font-size: .98rem;
  color: var(--text-primary);
  background: var(--form-input-bg);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  outline: none;
}
.katalog-cagri-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-color);
}
.katalog-cagri-form button {
  padding: 14px 24px;
  font-family: var(--font-primary);
  font-size: .98rem;
  font-weight: 600;
  color: var(--bg-primary);
  background: var(--accent);
  border: 0;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.katalog-cagri-form button:hover { background: var(--accent-hover); transform: translateY(-2px) }

@media (max-width: 700px) {
  .hero-urun { max-width: 300px }
  .marka-serit-bolum { padding: 26px 0 }
  .mrk { min-width: 82px; height: 46px; padding: 0 10px }
  .mrk-ad { font-size: .95rem }
  .katalog-cagri { padding: 22px }
}

/* Üst bölümde üç düğme (Rulmanları görüntüle, İletişim, WhatsApp): sığmayınca
   alt satıra iner; tek satırda kalınca telefonda ekrandan taşıyordu */
.hero-cta { flex-wrap: wrap; gap: 14px }
/* "Ürünlerimiz" bölümünün altındaki büyük düğme. .populer-not a kuralı
   yazıyı vurgu rengine boyuyor; düğmede zemin de o renk, yazı kayboluyordu */
.populer-not .tum-rulmanlar { padding: 14px 28px; font-size: 1rem; color: var(--bg-primary) }
.populer-not .tum-rulmanlar:hover { text-decoration: none; color: var(--bg-primary) }

/* .hero-visual sitede yatay dizilim (flex row); ürün görseli ile alt yazısı
   yan yana düşüyordu. Ana sayfada dikey olmalı. */
.hero-visual:has(.hero-urun) {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* :has desteklemeyen tarayıcılar için yedek */
.hero-urun-alt { flex-basis: 100%; }

/* ==========================================================================
   ANA SAYFA VİTRİNİ — kayan görsel şeridi
   Görseller assets/images/vitrin/ klasöründen okunur; klasör boşsa
   çizilmiş rulman görselleri gösterilir.
   ========================================================================== */
.vitrin {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(165deg, var(--bg-tertiary), var(--bg-primary));
  border: 1px solid var(--glass-border);
}
.vitrin-serit {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .vitrin-serit { transition: none } }
.vitrin-oge {
  flex: 0 0 100%;
  min-width: 0;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vitrin-kare {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  text-decoration: none;
}
.vitrin-kare img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-md);
}
.vitrin-cizim { width: 100%; display: flex; align-items: center; justify-content: center }
.vitrin-cizim svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)) }
.vitrin-yazi { text-align: center; display: flex; flex-direction: column; gap: 2px }
.vitrin-baslik {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-primary);
}
.vitrin-alt { font-size: .8rem; color: var(--text-secondary) }

/* oklar */
.vitrin-ok {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: var(--transition-fast);
}
.vitrin:hover .vitrin-ok, .vitrin:focus-within .vitrin-ok { opacity: 1 }
.vitrin-ok:hover { border-color: var(--accent); color: var(--accent) }
.vitrin-geri { left: 10px }
.vitrin-ileri { right: 10px }
@media (hover: none) { .vitrin-ok { opacity: .85 } }

/* noktalar */
.vitrin-noktalar {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 0 14px;
}
.vitrin-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.vitrin-nokta.etkin { background: var(--accent); width: 22px; border-radius: 4px }
.vitrin-nokta:hover { background: var(--accent-hover) }

@media (max-width: 700px) {
  .vitrin { max-width: 340px }
  .vitrin-oge { padding: 14px 14px 10px }
}


/* Gercek urun fotografi (varsa cizimin yerine gecer).
   contain: rulman kirpilmasin; kutu yaninda duran genis fotograflar da
   tam gorunsun. */
.kat-foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------- ürün galerisi
   Aynı rulmanın her markadaki kutulu fotografi. Ok, nokta, klavye ve
   parmakla kaydirma ile gezilir. Fotograflar farkli oranlarda geliyor
   (kimi kare, kimi dikey), o yuzden object-fit: contain. */
.urun-galeri {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-md);
}
.ug-serit {
  display: flex;
  height: 100%;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .ug-serit { transition: none; } }
.ug-kare {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;          /* urun fotograflari beyaz zeminli */
}
.ug-kare img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Hangi markanin kutusu oldugu okunsun */
.ug-marka {
  position: absolute;
  left: 10px; top: 10px;
  padding: 4px 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(15, 20, 28, .82);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.ug-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  color: #0f141c; background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(15, 20, 28, .12);
  border-radius: 50%; cursor: pointer;
  transition: background .15s;
}
.ug-ok:hover { background: #fff; }
.ug-geri { left: 8px; }
.ug-ileri { right: 8px; }

.ug-noktalar {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
}
.ug-nokta {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 20, 28, .28);
  transition: background .15s, width .15s;
}
.ug-nokta.etkin { width: 20px; border-radius: 999px; background: var(--accent); }

@media (max-width: 480px) {
  .ug-ok { width: 32px; height: 32px; font-size: 1.3rem; }
}

/* Baska kapak tipinin fotografi: rozet farkli renkte ve altinda o urune
   giden baglanti var. Etiketsiz gosterilirse musteri yanlis siparis verir. */
.ug-marka.baska { background: rgba(180, 83, 9, .92); }
.ug-git {
  position: absolute; left: 10px; bottom: 34px;
  padding: 5px 11px;
  font-size: .74rem; font-weight: 600;
  color: #0f141c; background: rgba(255, 255, 255, .92);
  border-radius: 999px; text-decoration: none;
}
.ug-git:hover { background: #fff; }

/* Cizimli kare: beyaz zemin yerine cizimin kendi studyo zemini var */
.ug-kare.cizimli { background: transparent; }
.ug-cizim { width: 100%; height: 100%; }
.ug-cizim svg { width: 100%; height: 100%; display: block; }

/* "olcekli cizim" notu: musteri fotograf sanmasin */
.ug-not {
  position: absolute; right: 10px; top: 10px;
  padding: 3px 9px;
  font-size: .68rem; font-weight: 600;
  color: #33415a; background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(15, 20, 28, .12);
  border-radius: 999px;
}

/* Gercek fotografi olan kareyi noktada belli et */
.ug-nokta.foto { background: rgba(180, 83, 9, .55); }
.ug-nokta.foto.etkin { background: var(--accent); }

/* Fotografi olmayan urun (cizim_goster:false).
   Bos kutu yerine ne oldugu yaziliyor; kart cokmesin diye ayni oranda. */
/* Fotografi olmayan urun.
   Bos gri kutu bir gride yan yana gelince site yarim gibi goruyordu.
   Onun yerine alicinin zaten aradigi iki bilgi yaziliyor: kod ve olcu. */
.kat-fotosuz {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 0 14px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), .07), transparent 60%),
    var(--bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
}
.kf-kod {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: .02em;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.2;
}
.kf-olcu {
  font-size: .82rem;
  color: var(--text-secondary);
  letter-spacing: .01em;
}
/* urun sayfasindaki tek kare biraz daha buyuk */
.urun-gorsel .kat-fotosuz .kf-kod { font-size: 2rem }
.urun-gorsel .kat-fotosuz .kf-olcu { font-size: 1rem }


/* Gercek marka logosu: beyaz plaka.
   Logo dosyalari farkli geliyor (seffaf SVG, beyaz zeminli JPG). Koyu zemine
   dogrudan konunca beyaz zeminliler kutu gibi duruyor, koyu renkliler
   kayboluyor. Beyaz plaka hepsini ayni ve okunur yapiyor. */
.mrk {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .10);
}
.mrk:hover { border-color: var(--accent); background: #fff }
.mrk.logolu { padding: 0 10px }
/* 11 marka masaüstünde tek satıra sığsın (17 Ekim 2026: NMB logosu eklenince
   NSK alt satırda tek kalıyordu) */
.mrk.logolu img { height: 28px; width: auto; max-height: none; max-width: 70px; object-fit: contain; mix-blend-mode: multiply }
.mrk.logolu.dik img { height: 40px }

/* Logosu olmayan marka: ayni beyaz plaka, marka renginde yazi.
   Serit yari beyaz yari koyu olunca dagink duruyordu. */
.mrk .mrk-ad { color: var(--mrk) }
.mrk .mrk-ad::after { background: var(--mrk) }

/* ---------------------------------------------------- marka sayfasi logolari
   Logolar beyaz plakada duruyor: dosyalar farkli geliyor (seffaf SVG, beyaz
   zeminli JPG) ve koyu zemine dogrudan konunca ya kutu gibi duruyor ya
   kayboluyor. Serit rozetleriyle ayni mantik. */
.marka-bas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.marka-bas-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 72px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: var(--border-radius-sm);
  flex: 0 0 auto;
}
.marka-bas-logo img {
  /* Yükseklik sabit: skf.svg'nin kendi boyu yok (yalnızca viewBox),
     "auto" ile ince bir çizgiye büzülüyordu */
  height: 42px; width: auto;
  max-width: 116px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.marka-kart-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  margin: -4px 0 14px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: var(--border-radius-sm);
}
.marka-kart-logo img {
  height: 32px; width: auto;
  max-width: 130px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Logosu olmayan markanin yazisi da beyaz plakada.
   .mrk-ad varsayilan rengi acik (koyu zemin icin); beyaz plakada beyaz
   uzerine beyaz kaliyordu -- IKO ve KOYO hic gorunmuyordu. */
.marka-bas-logo .mrk-ad,
.marka-kart-logo .mrk-ad { color: var(--mrk) }
.marka-bas-logo .mrk-ad { font-size: 1.6rem }
.marka-kart-logo .mrk-ad { font-size: 1.2rem }

@media (max-width: 560px) {
  .marka-bas-logo { min-width: 104px; height: 60px; padding: 0 14px }
  .marka-bas-logo img { height: 34px; max-width: 92px }
  .marka-bas-logo .mrk-ad { font-size: 1.25rem }
}

/* Ürün sayfası H1: "6205-2RS Rulman" — kod büyük, "Rulman" ikincil */
.urun-kod-ek {
  font-family: var(--font-display);
  font-size: .55em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
}


/* ---- Ana sayfa: çok satan rulmanlar ---- */
.populer-tipler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 28px;
}
.populer-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: var(--transition-fast);
}
.populer-tip span { color: var(--text-secondary); font-weight: 500; font-size: .8rem }
.populer-tip:hover { border-color: var(--accent); color: var(--accent) }
.populer-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.populer-grup {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 18px 18px 8px;
}
.populer-grup-baslik {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.populer-liste { list-style: none; margin: 0; padding: 0 }
.populer-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--glass-border);
}
.populer-liste li:first-child { border-top: 0 }
.populer-kod {
  min-width: 3.4em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.populer-kod:hover { color: var(--accent) }
.populer-olcu { flex: 1; color: var(--text-secondary); font-size: .82rem }
.populer-varyant { display: flex; gap: 6px }
.populer-varyant a {
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-fast);
}
.populer-varyant a:hover { border-color: var(--accent); color: var(--accent) }
.populer-not { margin: 22px 0 0; text-align: center; color: var(--text-secondary) }
.populer-not a { color: var(--accent); font-weight: 600; text-decoration: none }
.populer-not a:hover { text-decoration: underline }

/* ---- Teknik rehber (teknik.php) ---- */
.tr-sayfa { padding: 110px 0 60px }
.tr-bas { padding: 22px 0 0 }
.tr-bas h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.tr-giris { max-width: 78ch; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.75; margin: 0 0 22px }
.tr-giris b { color: var(--text-primary) }
.tr-icindekiler { display: flex; flex-wrap: wrap; gap: 8px }
.tr-icindekiler a {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}
.tr-icindekiler a:hover { color: var(--accent); border-color: var(--accent) }

.tr-bolum { padding-top: 56px; scroll-margin-top: 90px }
.tr-bolum h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
.tr-bolum > p, .tr-olcu p { color: var(--text-secondary); line-height: 1.75; max-width: 75ch; margin: 0 0 18px }
.tr-bolum p a, .tr-liste a, .tr-not a, .tr-satir a { color: var(--accent); font-weight: 600; text-decoration: none }
.tr-bolum p a:hover, .tr-liste a:hover, .tr-not a:hover, .tr-satir a:hover { text-decoration: underline }
.tr-alt { font-family: var(--font-display); font-size: 1.1rem; margin: 30px 0 10px }
.tr-not { margin-top: 14px; max-width: 880px }
.tr-dipnot { font-size: .82rem; margin-top: 10px !important }
.tr-nowrap { white-space: nowrap }
table.kat-t a.mono { color: var(--accent); text-decoration: none }
table.kat-t th.tr-satir {
  font-family: var(--font-primary);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  background: transparent;
  border-top: 1px solid var(--glass-border);
  white-space: nowrap;
}
.tr-cap th, .tr-cap td { text-align: center }
/* Marka tabloları: kodlar bölünmesin; yatay kaydırırken ilk sütun görünür kalsın */
.tr-marka th, .tr-marka td { white-space: nowrap }
table.kat-t.tr-marka th.tr-satir { position: sticky; left: 0; z-index: 1; background: var(--bg-secondary) }
table.kat-t.tr-marka thead th:first-child { position: sticky; left: 0; z-index: 2 }

/* Kodun parçaları: büyük kod, altında numaralı işaretler */
.tr-kod {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px 6px;
  padding: 30px 16px 24px;
  margin: 6px 0 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
}
.tr-kp { display: inline-flex; flex-direction: column; align-items: center; gap: 12px }
.tr-kp > span {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1;
  color: var(--text-primary);
  padding: 0 4px 10px;
  border-bottom: 3px solid var(--accent);
}
.tr-kp-ayri { margin-left: clamp(8px, 2.5vw, 22px) }
.tr-kp > i, .tr-no {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: .8rem;
}
html[data-theme="light"] .tr-kp > i, html[data-theme="light"] .tr-no { background: var(--accent-hover); color: #fff }
.tr-parcalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px }
.tr-parca {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
}
.tr-parca .tr-no { position: absolute; top: 14px; right: 14px }
.tr-pk { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem; color: var(--accent); margin: 0 0 6px }
.tr-parca h3 { font-size: 1rem; margin: 0 0 6px }
.tr-parca p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin: 0 }
.tr-bolum .tr-sonuc { margin: 18px 0 0; color: var(--text-primary) }

/* Kapak tipleri: kart + yaklaşık devir çubuğu */
.tr-kapaklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
.tr-kapak {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}
.tr-kapak:hover { border-color: var(--accent); transform: translateY(-2px) }
.tr-kapak-ad { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.tr-kapak-kod { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 1.15rem; color: var(--text-primary) }
.tr-kapak-acik { flex: 1; color: var(--text-secondary); font-size: .86rem; line-height: 1.55 }
.tr-hiz { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden }
.tr-hiz > span { display: block; width: var(--oran); height: 100%; border-radius: 3px; background: var(--accent) }
.tr-hiz-deger { font-size: .78rem; color: var(--text-secondary) }

/* İç boşluk kartları */
.tr-bosluklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.tr-bosluk {
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
}
.tr-bosluk b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; color: var(--text-primary) }
.tr-bosluk h3 { font-size: 1rem; margin: 6px 0 }
.tr-bosluk p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin: 0 }
.tr-bosluk-vurgu { border-color: var(--accent) }
.tr-bosluk-vurgu b { color: var(--accent) }

/* Listeler */
.tr-liste { margin: 0; padding-left: 20px; display: grid; gap: 10px; max-width: 80ch; color: var(--text-secondary); line-height: 1.7 }
.tr-liste b { color: var(--text-primary) }
.tr-adimlar { margin-bottom: 18px }

/* Ölçüyle bulma: metin + şema */
.tr-olcu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center }
.tr-sema {
  margin: 0;
  padding: 20px 18px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
  text-align: center;
}
.tr-sema figcaption { color: var(--text-secondary); font-size: .82rem; margin-top: 6px }
.tr-sema-svg { width: 100%; max-width: 340px; height: auto }
.tr-sema-svg .s-govde circle, .tr-sema-svg .s-govde rect, .tr-sema-svg .s-govde line { fill: none; stroke: var(--text-secondary); stroke-width: 2 }
.tr-sema-svg .s-bilya circle { fill: var(--accent); opacity: .85 }
.tr-sema-svg .s-gizli line { stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 5 4 }
.tr-sema-svg .s-uzatma line { stroke: var(--text-secondary); stroke-width: 1; opacity: .5 }
.tr-sema-svg .s-olcu line { stroke: var(--accent); stroke-width: 1.8 }
.tr-sema-svg .s-yazi text { fill: var(--text-primary); font: 700 17px var(--font-display); text-anchor: middle }

/* Sık sorulanlar */
.tr-sss { max-width: 880px; border-top: 1px solid var(--glass-border) }
.tr-sss details { border-bottom: 1px solid var(--glass-border); padding: 15px 2px }
.tr-sss summary { display: flex; justify-content: space-between; gap: 14px; cursor: pointer; font-weight: 600; list-style: none }
.tr-sss summary::-webkit-details-marker { display: none }
.tr-sss summary::after { content: '+'; color: var(--accent); font-size: 1.25rem; font-weight: 700; line-height: 1 }
.tr-sss details[open] summary::after { content: '\2212' }
.tr-sss p { color: var(--text-secondary); line-height: 1.7; margin: 10px 0 2px; max-width: 75ch }

.tr-cta { margin: 56px 0 10px }
.tr-cta p { color: var(--text-secondary); margin: 4px 0 14px }

@media (max-width: 760px) {
  .tr-olcu { grid-template-columns: 1fr }
  .tr-bolum { padding-top: 44px }
  /* Seri tablosu mobilde kart listesi: uzun açıklama dar sütunda satırları uzatıyordu */
  table.kat-t.tr-seri { min-width: 0 }
  .tr-seri thead { display: none }
  .tr-seri, .tr-seri tbody, .tr-seri tr { display: block }
  .tr-seri tr { padding: 12px 14px; border-top: 1px solid var(--glass-border) }
  .tr-seri tr:first-child { border-top: 0 }
  table.kat-t.tr-seri td { display: block; padding: 2px 0; border: 0 }
  table.kat-t.tr-seri td:first-child { color: var(--text-primary); font-weight: 700 }
  table.kat-t.tr-seri td:nth-child(2), table.kat-t.tr-seri td:nth-child(3) { display: inline-block; margin-right: 10px }
  table.kat-t.tr-seri td:last-child { color: var(--text-secondary); font-size: .86rem; line-height: 1.55 }
}

/* ---------------------------------------------------------------- ürün sayfası: marka logosu
   Başlığın üstünde, marka sayfasına bağlı. Yazılı marka rozetinin yerine. */
.urun-marka { margin: 0 0 12px }
.urun-marka a { display: inline-block; text-decoration: none }
.urun-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 100px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-fast);
}
.urun-logo img {
  display: block;
  height: 30px; width: auto;
  max-width: 140px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.urun-logo.dik img { height: 42px }
.urun-logo .mrk-ad { color: var(--mrk); font-size: 1.15rem; letter-spacing: .06em; padding-bottom: 4px }
.urun-logo .mrk-ad::after { background: var(--mrk) }
.urun-marka a:hover .urun-logo { border-color: var(--accent); transform: translateY(-1px) }

/* ---------------------------------------------------------------- fotoğraf büyütme
   Ürün sayfasında fotoğrafa basınca tam ekran açılır (urun-galeri.js).
   Esc, × ya da boşluğa basınca kapanır; birden çok fotoğrafta oklar. */
.urun-galeri .ug-kare img { cursor: zoom-in }
.ug-buyut {
  position: absolute;
  right: 10px; top: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  color: #0f141c;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(15, 20, 28, .14);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.ug-buyut:hover { background: #fff; color: var(--accent-hover, #0284c7) }
.ug-lb {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: rgba(6, 9, 14, .93);
  opacity: 0;
  transition: opacity .18s ease;
}
.ug-lb.acik { opacity: 1 }
.ug-lb[hidden] { display: none }
.ug-lb-resim {
  display: block;
  max-width: min(100%, 1200px);
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  user-select: none;
  -webkit-user-drag: none;
}
.ug-lb-kapat, .ug-lb-ok {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.ug-lb-kapat:hover, .ug-lb-ok:hover { background: rgba(255, 255, 255, .28) }
.ug-lb-kapat { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 1.9rem }
.ug-lb-ok { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2.1rem }
.ug-lb-geri { left: 10px }
.ug-lb-ileri { right: 10px }
.ug-lb-sayac {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
html.ug-lb-acik, html.ug-lb-acik body { overflow: hidden }
@media (max-width: 600px) {
  .ug-lb { padding: 60px 8px }
  .ug-lb-ok { top: auto; bottom: 10px; transform: none; width: 44px; height: 44px }
  .ug-lb-geri { left: 16px }
  .ug-lb-ileri { right: 16px }
}

/* ---------------------------------------------------------------- "Orijinal ürün" rozeti
   Markalı ürünün fotoğrafının sol üst köşesinde yeşil tik (kullanıcının
   isteği, 17 Ekim 2026): ürün kartı, ürün sayfası galerisi, ana sayfa
   vitrini. Markasız üründe yok. Tıklamayı engellemez (fotoğraf büyür). */
.kat-orijinal {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: #fff;
  background: #16a34a;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  white-space: nowrap;
  pointer-events: none;
}
.kat-orijinal i { font-size: 0.82rem }
.urun-galeri .kat-orijinal { top: 12px; left: 12px; font-size: 0.82rem; padding: 6px 12px 6px 9px }
.urun-galeri .kat-orijinal i { font-size: 1rem }
.vitrin-kare { position: relative }
.vitrin-kare .kat-orijinal { top: 10px; left: 10px; font-size: 0.76rem; padding: 5px 10px 5px 8px }
@media (max-width: 430px) {
  .kat-orijinal { top: 6px; left: 6px; font-size: 0.62rem; padding: 3px 7px 3px 6px; gap: 4px }
}