.ul-tanitim {
  position: relative;
  background: var(--gray-50);
  overflow: hidden;
}

/* Sağ üstteki kırmızı form */
.ul-tanitim-sekil {
  position: absolute;
  top: 0; right: 0;
  width: 46%; height: 100%;
  background: var(--brand-red);
  border-radius: 0 0 0 280px;
  pointer-events: none;
}
/* Kırmızının üzerindeki hafif üçgen dokusu */
.ul-tanitim-sekil::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: .12;
  background:
    repeating-linear-gradient(60deg,  rgba(255,255,255,.9) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.9) 0 1px, transparent 1px 62px);
}

.ul-tanitim-ic {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: 380px;
  padding: 46px 0 56px;
}

/* ---- Yol çizgisi (breadcrumb) ---- */
.ul-yol {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  list-style: none; margin: 0 0 26px; padding: 0;
  font-size: .93rem; color: var(--gray-500);
}
.ul-yol li { display: flex; align-items: center; gap: 10px; }
.ul-yol li + li::before { content: "/"; color: var(--gray-300); font-weight: 600; }
.ul-yol a { color: var(--gray-700); }
.ul-yol a:hover { color: var(--brand-red); }
.ul-yol-ev { display: grid; place-items: center; font-size: 1.05rem; }
.ul-yol-son { color: var(--brand-black); font-weight: 600; }

.ul-tanitim-baslik { margin: 0 0 20px; }

.ul-tanitim-metin {
  max-width: 620px;
  color: var(--gray-700);
  font-size: 1.02rem; line-height: 1.75;
  margin: 0 0 12px;
}

/* ---- Sağdaki görsel ---- */
.ul-tanitim-gorsel {
  position: relative;
  justify-self: center;
  width: 100%; max-width: 560px;
}
.ul-tanitim-gorsel img {
  width: 100%;
  filter: drop-shadow(0 26px 46px rgba(17, 18, 20, .28));
}


/* --------------------------------------------------------------------------
   2. KATALOG DÜZENİ
   Zemin beyaz. Sol menü sabit genişlik, sağ içerik kalan alanı doldurur.
   -------------------------------------------------------------------------- */
.ul-katalog {
  background: var(--white);
  padding: 54px 0 90px;
}

.ul-duzen {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Sol sütun sayfa kaydırılırken yukarıda takılı kalır */
.ul-sol { position: sticky; top: calc(var(--header-h) + 24px); }

/* Mobildeki "Kategoriler" açma butonu — masaüstünde gizli */
.ul-mobil-buton { display: none; }


/* --------------------------------------------------------------------------
   3. SOL KATEGORİ MENÜSÜ
   Sınırsız derinlik: her seviye bir <ul class="ul-altagac"> olarak içeri girer.
   Aktif kategoriye giden dallar <li class="ul-dal ul-acik"> ile açık başlar.

   NOT: Sayfada eski temanın CSS'i de yüklüyse listelere kendi kurallarını
   uyguluyor (ortalama, dev boşluk, madde işareti). O yüzden önce menünün
   içini komple sıfırlıyoruz, sonra kendi ölçülerimizi yazıyoruz. Tüm
   seçiciler .ul-panel ile başlıyor ki sıfırlamayı geçebilsinler.
   -------------------------------------------------------------------------- */

/* ---- 3a. Eski tema CSS'ine karşı sıfırlama ---- */
.ul-panel ul,
.ul-panel li {
  margin: 0; padding: 0;
  list-style: none;
  background: none; border: 0;
  float: none; width: auto;
  text-indent: 0;
}
.ul-panel li::before,
.ul-panel li::after { content: none; }

.ul-panel,
.ul-panel * {
  text-align: left;
  text-transform: none;
  line-height: 1.4;
  letter-spacing: normal;
}

/* ---- 3b. Panel ---- */
.ul-panel {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.ul-panel .ul-panel-baslik {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  background: var(--brand-black);
  color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
}

/* ---- 3c. Ağaç ---- */
.ul-panel .ul-agac { padding: 8px 0; }

.ul-panel .ul-dal { position: relative; display: block; }

/* Bir satır: solda link, sağda aç-kapa butonu */
.ul-panel .ul-satir {
  display: flex; align-items: stretch;
  border-radius: 0px;
  transition: background var(--t-fast);
}
.ul-panel .ul-satir:hover { background: var(--gray-50); }

/* Seçili kategorideki kırmızı şerit. Seçili olmayanlarda da aynı 3px'lik
   boşluk duruyor, böylece yazılar sağa sola kaymıyor. */
.ul-panel .ul-dal > .ul-satir::before {
  content: ""; flex: 0 0 3px; width: 3px;
}
.ul-panel .ul-dal.ul-secili > .ul-satir::before {
  margin: 6px 0;
  background: var(--brand-red);
  border-radius: 0 3px 3px 0;
}

.ul-panel .ul-link {
  flex: 1 1 auto;
  display: block;
  padding: 10px 8px 10px 19px;
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; line-height: 1.4;
  color: var(--gray-700);
  text-decoration: none;
}
.ul-panel .ul-link:hover { color: var(--brand-red); }

.ul-panel .ul-dal.ul-secili > .ul-satir { background: var(--gray-100); }
.ul-panel .ul-dal.ul-secili > .ul-satir > .ul-link { color: var(--brand-red); font-weight: 800; }

/* ---- 3d. Aç-kapa butonu ----
   Ok, Font Awesome'a bağlı değil; CSS ile çiziliyor. İkon kütüphanesi
   yüklü olsun olmasın aynı görünür. */
.ul-panel .ul-ackapa {
  flex: 0 0 40px;
  position: relative;
  border: 0; background: transparent; padding: 0;
  cursor: pointer;
  transition: transform var(--t-base);
}
.ul-panel .ul-ackapa::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -6px 0 0 -4px;
  border-right: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: rotate(45deg);
  transition: border-color var(--t-fast);
}
.ul-panel .ul-ackapa:hover::after { border-color: var(--brand-red); }
.ul-panel .ul-dal.ul-acik > .ul-satir > .ul-ackapa { transform: rotate(180deg); }
.ul-panel .ul-dal.ul-acik > .ul-satir > .ul-ackapa::after { border-color: var(--brand-black); }

/* ---- 3e. Alt seviyeler: kapalı gelir, ul-acik ile açılır ---- */
.ul-panel .ul-altagac {
  display: none;
  margin: 0 0 6px 22px;
  padding: 2px 0 2px 16px;
  border-left: 0px solid var(--gray-300);
}
.ul-panel .ul-dal.ul-acik > .ul-altagac { display: block; }

/* Derinleştikçe yazı incelir, hiyerarşi gözle anlaşılsın */
.ul-panel .ul-altagac .ul-link { padding-left: 12px; font-size: .91rem; font-weight: 500; }
.ul-panel .ul-altagac .ul-altagac .ul-link { font-size: .88rem; }


/* --------------------------------------------------------------------------
   4. ARAÇ ÇUBUĞU
   -------------------------------------------------------------------------- */
.ul-arac {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 30px;
}

.ul-adet { margin: 0; color: var(--gray-700); font-size: 1rem; }
.ul-adet strong { color: var(--brand-red); font-family: var(--font-display); font-weight: 800; }

.ul-arama { position: relative; width: 340px; max-width: 100%; }
.ul-arama input {
  width: 100%;
  padding: 14px 54px 14px 22px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body); font-size: .95rem; color: var(--gray-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ul-arama input::placeholder { color: var(--gray-500); }
.ul-arama input:focus {
  outline: 0;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(225, 18, 26, .10);
}
.ul-arama-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--gray-100); color: var(--brand-black);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ul-arama-btn:hover { background: var(--brand-red); color: var(--white); }
/* Büyüteç de CSS ile çizili, ikon kütüphanesi gerekmiyor */
.ul-arama-btn::before {
  content: "";
  width: 11px; height: 11px;
  border: 2px solid currentColor; border-radius: 50%;
  margin: -3px 0 0 -3px;
}
.ul-arama-btn::after {
  content: "";
  position: absolute; right: 11px; bottom: 11px;
  width: 7px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: rotate(45deg);
}


/* --------------------------------------------------------------------------
   5. ALT KATEGORİ ROZETLERİ
   -------------------------------------------------------------------------- */
.ul-altkat { margin-bottom: 34px; }
.ul-altkat-baslik {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--brand-black); margin: 0 0 16px;
}
.ul-altkat-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.ul-altkat-rozet {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-size: .93rem; font-weight: 600; color: var(--gray-700);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ul-altkat-rozet::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast);
}
.ul-altkat-rozet:hover {
  background: var(--brand-black); color: var(--white); border-color: var(--brand-black);
}
.ul-altkat-rozet:hover::after { transform: rotate(45deg) translate(2px, -2px); }


/* --------------------------------------------------------------------------
   6. ÜRÜN IZGARASI VE KARTI
   Ana sayfadaki kartla hiçbir sınıfı paylaşmaz. Buradaki zemin beyaz olduğu
   için kartın sınırı gölgeyle değil ince çerçeveyle çiziliyor.
   -------------------------------------------------------------------------- */
.ul-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.ul-kart {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.ul-kart:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}

/* Görsel kutusu.
   --kirp: fotoğrafın üstünden ve altından kırpılacak miktar. Ürün
   fotoğraflarının kenarındaki ince çizgileri gizler, değeri buradan ayarla. */
.ul-kart-gorsel {
  --kirp: -10px;
  position: relative;
  display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 0 24px;            /* dikey padding YOK, yoksa kırpma çalışmaz */
}
.ul-kart-gorsel img {
  width: 100%;
  height: calc(100% + var(--kirp) * 2);
  margin-block: calc(var(--kirp) * -1);
  object-fit: contain;        /* büyük fotoğraf küçülür, küçük fotoğraf büyür */
  transition: transform var(--t-base);
}
.ul-kart:hover .ul-kart-gorsel img { transform: scale(1.06); }

.ul-kart-govde {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 20px 20px 24px;
  text-align: center;
  border-top: 1px solid var(--gray-200);
}

/* İsim en fazla 2 satır: kategori yazıları bütün kartlarda aynı hizada kalır */
.ul-kart-ad {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  line-height: 1.35; color: var(--brand-black);
  min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast);
}
.ul-kart-ad a { color: inherit; }
.ul-kart:hover .ul-kart-ad { color: var(--brand-red); }

.ul-kart-kategori {
  margin: 0;
  font-size: .89rem; color: var(--gray-500);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   7. SONUÇ YOK
   -------------------------------------------------------------------------- */
.ul-bos {
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  padding: 60px 24px;
  text-align: center;
  color: var(--gray-500);
}


/* --------------------------------------------------------------------------
   8. SAYFALAMA
   -------------------------------------------------------------------------- */
.ul-sayfalama { margin-top: 46px; }
.ul-sayfalama ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.ul-sayfalama a {
  display: grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--brand-black);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ul-sayfalama a:hover { background: var(--gray-100); }
.ul-sayfalama .ul-sayfa-aktif a {
  background: var(--brand-red); border-color: var(--brand-red); color: var(--white);
}


/* --------------------------------------------------------------------------
   9. TABLET / MOBİL
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .ul-duzen { grid-template-columns: 260px minmax(0, 1fr); gap: 30px; }
  .ul-izgara { gap: 20px; }
}

@media (max-width: 991.98px) {
  /* Tanıtım alanı tek kolona iner, görsel yazının altına geçer */
  .ul-tanitim-ic {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px 0 0;
    gap: 24px;
  }
  .ul-tanitim-sekil {
    width: 100%; height: 52%;
    top: auto; bottom: 0;
    border-radius: 180px 0 0 0;
  }
  .ul-tanitim-metin { font-size: .97rem; }
  .ul-tanitim-gorsel { max-width: 380px; padding-bottom: 20px; }

  /* Sol menü üstte açılır panel olur */
  .ul-katalog { padding: 36px 0 64px; }
  .ul-duzen { grid-template-columns: 1fr; gap: 22px; }
  .ul-sol { position: static; }

  .ul-mobil-buton {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px;
    padding: 15px 20px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    color: var(--brand-black);
    cursor: pointer;
  }
  .ul-mobil-buton::after {
    content: "";
    width: 9px; height: 9px;
    margin-top: -5px;
    border-right: 2px solid var(--brand-red);
    border-bottom: 2px solid var(--brand-red);
    transform: rotate(45deg);
    transition: transform var(--t-base);
  }
  .ul-mobil-buton.ul-acik::after { transform: rotate(225deg); margin-top: 2px; }

  .ul-panel { display: none; margin-top: 12px; }
  .ul-panel.ul-gorunur { display: block; }
  .ul-panel .ul-panel-baslik { display: none; }

  .ul-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ul-arama { width: 100%; }
}

@media (max-width: 575.98px) {
  .ul-tanitim-gorsel { max-width: 300px; }
  .ul-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ul-kart-gorsel { padding: 0 14px; --kirp: -10px; }
  .ul-kart-govde { padding: 15px 12px 18px; }
  .ul-kart-ad { font-size: .93rem; }
  .ul-kart-kategori { font-size: .82rem; }
  .ul-sayfalama a { min-width: 40px; height: 40px; }
}


.ul-tanitim-gorsel img {
  filter: brightness(0) invert(1);
}