/*
  Theme Name: Müzik Reyonu — Atölye Butik
  Theme URI: https://muzikreyonu.com
  Description: Sıcak, butik estetik müzik dükkanı teması. Krem/bej zemin, espresso metin, pirinç aksan.
  Author: Müzik Reyonu
  Version: 1.0
  License: Özel — Tüm Hakları Saklıdır.
*/

/* ============================================
   1. DESIGN TOKENS
   ============================================ */
:root {
  /* Neutrals — sıcak krem ton */
  --cream: #f5efe4;
  --cream-soft: #faf6ee;
  --cream-deep: #ece3d2;
  --paper: #fbf8f2;

  /* Ahşap & toprak */
  --wood-50: #f4e8d5;
  --wood-100: #e4cfa8;
  --wood-200: #c9a876;
  --wood-400: #8a5a2b;
  --wood-600: #5c3a1a;
  --wood-800: #2a1a0a;

  /* Espresso metin */
  --ink: #1a1410;
  --ink-soft: #3a2e26;
  --ink-mute: #6b5a4c;
  --ink-whisper: #9a8a7a;
  --hairline: #d9cdb8;
  --hairline-soft: #e8dfcd;

  /* Pirinç aksan */
  --brass: #b08542;
  --brass-deep: #8a6730;
  --brass-soft: #d4b075;

  /* Durumlar */
  --sale: #b8341f;
  --success: #4a6a3a;

  /* Tipografi */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Boşluklar */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radyuslar — keskin ve hafif */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Layout */
  --max-w: 1440px;
  --gutter: 32px;
}

/* ============================================
   2. RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--brass); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

.temizle { clear: both; }

/* ============================================
   3. SITE CONTAINER
   ============================================ */
.siteyiOrtala {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  box-sizing: border-box;
}

/* ============================================
   4. TOP BAR (siteUst)
   ============================================ */
.siteUst {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
}

.siteUst .siteyiOrtala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--gutter);
  flex-wrap: wrap;
  gap: 12px;
}

.siteUst ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.siteUst ul li a {
  color: rgba(245, 239, 228, 0.8);
  font-size: 11px;
  transition: color 0.15s;
}

.siteUst ul li a:hover {
  color: var(--brass-soft);
}

.ustSag {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ustSag a {
  color: rgba(245, 239, 228, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  transition: color 0.15s;
}

.ustSag a:hover {
  color: var(--brass-soft);
}

.ustSag i {
  font-size: 12px;
}

/* ============================================
   5. HEADER
   ============================================ */
.headerUst {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}

.headerUst .siteyiOrtala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  gap: 28px;
}

/* Logo */
.logoAlani {
  flex-shrink: 0;
}

.logoAlani a {
  display: block;
}

.logoAlani img {
  height: 44px;
  width: auto;
}

.logoSolu {
  display: none;
}

.logoSolu .toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline);
  background: var(--cream-soft);
  color: var(--ink);
  font-size: 16px;
  transition: all 0.15s;
  border-radius: var(--r-sm);
}

.logoSolu .toggle:hover {
  border-color: var(--wood-400);
  color: var(--brass);
}

/* Search */
.siteArama {
  flex: 1;
  max-width: 520px;
}

.siteArama form {
  display: flex;
  align-items: center;
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}

.siteArama form:focus-within,
.siteArama form:hover {
  border-color: var(--wood-400);
}

.siteArama input.ara {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-sans);
}

.siteArama input.ara::placeholder {
  color: var(--ink-mute);
}

.siteArama button.arabtn {
  width: 48px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  transition: background 0.15s;
  border: none;
  position: relative;
}

.siteArama button.arabtn::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
}

.siteArama button.arabtn:hover {
  background: var(--wood-600);
}

/* User / cart actions */
.uyeSepetAlani {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.uyeSepetAlani > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--ink-soft);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
  position: relative;
}

.uyeSepetAlani > a i {
  font-size: 18px;
  color: var(--ink);
  transition: color 0.15s;
}

.uyeSepetAlani > a:hover {
  color: var(--brass);
}

.uyeSepetAlani > a:hover i {
  color: var(--brass);
}

.uyeSepetAlani > a span {
  white-space: nowrap;
}

.uyeSepetAlani > a strong.goster {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--brass);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 9px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: 700;
}

/* ============================================
   6. NAVIGATION (Category Menu)
   ============================================ */
header {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}

nav.headerMenu {
  background: var(--cream);
}

nav.headerMenu ul {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}

nav.headerMenu ul > li {
  position: relative;
}

nav.headerMenu ul > li > a {
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

nav.headerMenu ul > li > a:hover,
nav.headerMenu ul > li:hover > a {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* Dropdown */
nav.headerMenu ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 40px rgba(26, 20, 16, 0.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s;
  z-index: 100;
}

nav.headerMenu ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

nav.headerMenu ul > li > ul > li {
  display: block;
}

nav.headerMenu ul > li > ul > li > a {
  display: block;
  padding: 10px 18px;
  color: var(--ink-soft);
  font-size: 13px;
  border-bottom: none;
  transition: all 0.15s;
}

nav.headerMenu ul > li > ul > li > a:hover {
  background: var(--cream-soft);
  color: var(--brass);
  padding-left: 24px;
}

/* ============================================
   7. SLIDER
   ============================================ */
.sliderAlani {
  padding: 32px 0 16px;
}

.sliderAlaniBuyuk {
  position: relative;
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
  margin-bottom: 12px;
}

.sliderAlaniBuyuk .swiper-slide {
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.sliderAlaniBuyuk .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sliderAlaniKucuk {
  margin-top: 12px;
}

.sliderAlaniKucuk .swiper-slide {
  opacity: 0.5;
  cursor: pointer;
  border: 1px solid var(--hairline-soft);
  transition: all 0.2s;
  overflow: hidden;
}

.sliderAlaniKucuk .swiper-slide:hover {
  opacity: 0.85;
}

.sliderAlaniKucuk .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--brass);
}

/* Slider navigation — tüm slider okları */
.aNext, .aPrev,
.yNext, .yPrev,
.sNext, .sPrev,
.ilNext, .ilPrev,
.bNext, .bPrev {
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
}

.aNext:hover, .aPrev:hover,
.yNext:hover, .yPrev:hover,
.sNext:hover, .sPrev:hover,
.ilNext:hover, .ilPrev:hover,
.bNext:hover, .bPrev:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* Main slider arrows — absolute positioned */
.sliderAlaniBuyuk .aNext,
.sliderAlaniBuyuk .aPrev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(251, 248, 242, 0.9);
  backdrop-filter: blur(6px);
}

.sliderAlaniBuyuk .aNext { right: 16px; }
.sliderAlaniBuyuk .aPrev { left: 16px; }

/* ============================================
   8. SECTION HEADERS (genelBaslik)
   ============================================ */
.genelBaslik {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 56px 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  gap: 20px;
}

.genelBaslik h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  flex: 1;
  background: transparent;
}

.genelBaslik::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--brass);
}

/* Slider arrows inside section headers — inline */
.genelBaslik .yNext,
.genelBaslik .yPrev,
.genelBaslik .sNext,
.genelBaslik .sPrev,
.genelBaslik .ilNext,
.genelBaslik .ilPrev,
.genelBaslik .bNext,
.genelBaslik .bPrev {
  position: static;
  flex-shrink: 0;
  margin-bottom: 8px;
}

/* ============================================
   9. PRODUCT CARDS
   ============================================ */
.urunlerim {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  transition: all 0.2s;
}

.urunlerim > a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.urunlerim figure {
  margin: 0;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  transition: border-color 0.2s;
}

.urunlerim:hover figure {
  border-color: var(--wood-400);
}

.urunlerim .image-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.urunlerim .image-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s;
}

.urunlerim:hover .image-cover img {
  transform: scale(1.04);
}

/* Product info */
.urunlerim figcaption {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
  padding: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.urunlerim .fiyat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.fiyat .efiyat {
  font-size: 12px;
  color: var(--ink-whisper);
  text-decoration: line-through;
  font-family: var(--font-mono);
}

.fiyat .yfiyat {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  font-weight: 400;
}

/* Badges */
.bilgiler {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.bilgiler span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  color: var(--cream);
  font-weight: 500;
}

.uindirim { background: var(--sale); }
.yerli { background: var(--success); }
.uaninda { background: var(--ink); }
.uucretsiz { background: var(--brass); }
.utukendi { background: var(--ink-mute); }

/* Discount badge */
.indirimGoster {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--sale);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  z-index: 2;
  font-weight: 600;
}

/* Add to cart button */
.sepeteEklesin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 6px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  border: 1px solid var(--ink);
}

.sepeteEklesin:hover {
  background: var(--wood-600);
  border-color: var(--wood-600);
  color: var(--cream);
}

/* ============================================
   10. PRODUCT GRID — CATEGORY PAGE
   Final, clean rules at the END of this file
   ============================================ */

.yeniGelenler,
.seciliUrunler,
.ilgiliUrunler,
.firsatUrunleri,
.sonBlogYazilari {
  padding-bottom: 16px;
}

.firsatUrunleri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============================================
   11. BREADCRUMB
   ============================================ */
.sayfaYoluGoster {
  padding: 24px 0 12px;
}

.sayfaYoluGoster ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.sayfaYoluGoster ul li a {
  color: var(--ink-mute);
  transition: color 0.15s;
}

.sayfaYoluGoster ul li a:hover {
  color: var(--brass);
}

.sayfaYoluGoster ul li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--ink-whisper);
}

/* ============================================
   12. SIDEBAR + CONTENT LAYOUT
   ============================================ */
.sayfa-layout {
  display: flex;
  gap: 40px;
  margin-top: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.siteSol {
  width: 260px;
  flex-shrink: 0;
}

.siteSag,
.siteSag2 {
  flex: 1;
  min-width: 0;
}

/* Sidebar accordion */
.ac-container {
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
}

.ac-container > div {
  border-bottom: 1px solid var(--hairline);
}

.ac-container > div:last-child {
  border-bottom: none;
}

.ac-container label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}

.ac-container label:hover {
  background: var(--cream);
}

.ac-container input[type="radio"],
.ac-container input[type="checkbox"] {
  display: none;
}

.ac-container article {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.ac-container input:checked ~ article {
  max-height: 1500px;
  padding-bottom: 8px;
}

/* Chevron rotation on checked */
.ac-container label .fa-chevron-down {
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform 0.3s ease;
}

.ac-container input:checked ~ label .fa-chevron-down,
.ac-container > div:has(input:checked) > label .fa-chevron-down {
  transform: rotate(180deg);
}

/* Marka filtresi gibi uzun listeler için inner scroll */
.ac-container article .filtre,
.ac-container article .altKategoriler {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ac-container article .filtre::-webkit-scrollbar,
.ac-container article .altKategoriler::-webkit-scrollbar {
  width: 6px;
}

.ac-container article .filtre::-webkit-scrollbar-track,
.ac-container article .altKategoriler::-webkit-scrollbar-track {
  background: var(--cream-soft);
}

.ac-container article .filtre::-webkit-scrollbar-thumb,
.ac-container article .altKategoriler::-webkit-scrollbar-thumb {
  background: var(--hairline);
}

.altKategoriler {
  padding: 0 18px 12px;
}

.altKategoriler strong {
  display: none;
}

.altKategoriler ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.altKategoriler li a {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: all 0.15s;
  border-left: 2px solid transparent;
}

.altKategoriler li a:hover {
  color: var(--brass);
  border-left-color: var(--brass);
  padding-left: 14px;
}

.altKategoriler ul ul {
  margin-left: 14px;
  margin-top: 2px;
  border-left: 1px solid var(--hairline-soft);
  padding-left: 6px;
}

/* ========================================
   FILTER LISTS — Gerçek HTML yapısına göre
   <li class="filitreGruplama">
     <li class="filitreBaslik">Markalar</li>
     <input> <label>...</label>
     <div class="clear-space filter-clear"></div>  ← satır ayırıcı
     <input> <label>...</label>
     ...
   </li>
   ======================================== */
.filtre {
  padding: 14px 18px;
}

/* Filitre konteyner */
.filitreGruplama,
li.filitreGruplama,
ul#fliste,
.filtre ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Filitre başlığı */
.filitreBaslik,
li.filitreBaslik {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  padding: 14px 0 8px !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  margin-bottom: 8px !important;
  display: block !important;
  list-style: none !important;
}

/* Checkbox: küçük, sola yaslı */
.filitreGruplama input[type="checkbox"],
.filterCheck[type="checkbox"],
input.filterCheck {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--ink) !important;
  cursor: pointer !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Label: checkbox'ın yanında, akar */
.filitreGruplama label,
label.filterCheck,
.filtre label {
  display: inline-block !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.filitreGruplama label:hover,
.filtre label:hover {
  color: var(--brass) !important;
}

/* clear-space: SATIR AYIRICI olarak çalışsın (gizleme!) */
.filitreGruplama .clear-space,
.filitreGruplama .filter-clear,
.clear-space.filter-clear,
.filitreGruplama .clear-space.filter-clear {
  display: block !important;
  clear: both !important;
  height: 8px !important;
  width: 100% !important;
}

/* Her satır arası boşluk */
.filitreGruplama input[type="checkbox"] + label {
  padding-bottom: 0 !important;
}

/* Item order / list controls */
.itemOrder,
.listeleme {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 24px;
}

.itemOrder select,
.listeleme select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--hairline);
  background: var(--cream);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-sm);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.itemOrder select:hover,
.listeleme select:hover {
  border-color: var(--wood-400);
}

/* ============================================
   13. PRODUCT DETAIL PAGE
   ============================================ */
.urunDetay {
  padding: 24px 0;
}

.detail-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.urunDetayBaslik {
  display: none;
}

.urunDetaySol {
  position: sticky;
  top: 140px;
}

.urunDetaySol #urun-image-container {
  aspect-ratio: 1 / 1.05;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
}

.urunDetaySol #urun-image-container a {
  display: block;
  width: 100%;
  height: 100%;
}

.urunDetaySol .detay-resim {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
}

.urunDetaySol .scrollbar {
  margin-top: 20px;
  padding: 16px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}

/* Detail right column */
.urunDetaySag {
  padding-top: 8px;
}

.urunDetaySag > div:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 12px;
}

.urunDetaySag > div:first-child strong {
  color: var(--brass-deep);
  font-weight: 400;
}

.urunDetaySag > div:first-child span a,
.urunDetaySag > div:first-child font a {
  color: var(--brass-deep);
}

.urunDetaySag h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--ink);
}

.urunDetaySag h2.gizle {
  display: none;
}

.fiyatBilgisi {
  padding: 24px 0;
  margin: 16px 0 24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.fiyatBilgisi > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.fiyatBilgisi .pfiyati {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-whisper);
  text-decoration: line-through;
}

.fiyatBilgisi .pfiyati strong,
.fiyatBilgisi strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sale);
  font-weight: 600;
  text-transform: uppercase;
}

.fiyatBilgisi .sfiyati {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Kargo süre bilgisi (eski kargo sayac yerine) */
.kargosayac {
  display: none !important;
}

/* Kargo Kutuları (info badges) */
.kargoKutulari {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  transition: all 0.2s;
}

.kargoKutulari:hover {
  border-color: var(--brass);
  background: var(--cream);
}

.kargoKutulari i {
  color: var(--brass);
  font-size: 18px;
}

.kargoKutulari span {
  color: var(--ink-soft);
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.3;
}

/* Quantity + Action Buttons */
.le-quantity {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.le-quantity > div {
  display: flex;
  align-items: center;
  border: 1px solid var(--ink);
  background: var(--cream);
}

.le-quantity button {
  width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  transition: background 0.15s;
  border: none;
}

.le-quantity button:hover {
  background: var(--cream-soft);
}

.le-quantity button.minus::before { content: '−'; }
.le-quantity button.plus::before { content: '+'; }

.le-quantity input {
  width: 44px;
  height: 48px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  font-weight: 500;
}

/* Detail page action buttons */
.detaySepet,
.detayHemenAl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  min-height: 48px;
  border: 1px solid transparent;
}

.detaySepet {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.detaySepet:hover {
  background: var(--wood-600);
  border-color: var(--wood-600);
}

.detayHemenAl {
  background: var(--brass);
  color: var(--cream);
  border-color: var(--brass);
}

.detayHemenAl:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
}

/* Product detail tabs */
.urnTAB {
  margin-top: 80px;
}

.anasayfaTab {
  border: none;
}

#tab-button {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
  padding: 0;
}

#tab-button li {
  list-style: none;
}

#tab-button li a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  cursor: pointer;
  text-decoration: none;
}

#tab-button li a:hover {
  color: var(--ink);
}

#tab-button li.is-active a,
.anasayfaTab #tab-button .is-active a {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* Tab içerikleri: varsayılan olarak gizli, sadece ilk veya aktif görünür */
.urnTAB .ansyfTab {
  display: none !important;
  padding: 16px 0;
  max-width: 720px;
}

/* JS yoksa fallback — ilk tab veya .is-active görünür */
.urnTAB .ansyfTab.is-active,
.urnTAB .ansyfTab.active {
  display: block !important;
}

.ansyfTab .tabtable {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.ansyfTab .tabtable p {
  margin-bottom: 16px;
}

.ansyfTab .tabtable table {
  width: 100%;
  border-collapse: collapse;
}

.ansyfTab .tabtable table tr {
  border-bottom: 1px solid var(--hairline-soft);
}

.ansyfTab .tabtable table td:first-child {
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 200px;
}

.ansyfTab .tabtable table td:last-child {
  padding: 14px 0;
  font-size: 14px;
}

/* ============================================
   14. FOOTER FEATURES STRIP
   ============================================ */
.footerKutular {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 80px 0;
  margin-top: 80px;
  border-top: 1px solid var(--hairline);
}

.footerKutular > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}

.footerKutular > div i {
  font-size: 26px;
  color: var(--brass);
  margin-bottom: 4px;
}

.footerKutular > div strong {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.footerKutular > div span {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
}

/* ============================================
   15. READ MORE / DEVAMINI GOR
   ============================================ */
.devaminiGor {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding: 24px 0;
  font-style: italic;
}

.devaminiGoster,
.devaminiGizle {
  color: var(--brass);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}

.devaminiGoster:hover,
.devaminiGizle:hover {
  color: var(--brass-deep);
}

/* ============================================
   16. E-BÜLTEN
   ============================================ */
.eBultenAbone {
  background: var(--ink);
  color: var(--cream);
  padding: 56px var(--gutter);
  margin: 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ebulBas {
  flex: 1;
  min-width: 240px;
}

.ebulBas h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--cream);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.ebulBas span {
  font-family: var(--font-serif);
  font-size: 16px;
  color: rgba(245, 239, 228, 0.7);
  font-style: italic;
}

.eBultenAbone form {
  display: flex;
  gap: 0;
  max-width: 420px;
  flex: 1;
  min-width: 280px;
}

.eBultenAbone .eBultenin {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid rgba(245, 239, 228, 0.3);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
}

.eBultenAbone .eBultenin::placeholder {
  color: rgba(245, 239, 228, 0.5);
}

.eBultenAbone .eBultenin:focus {
  border-color: var(--brass-soft);
}

.eBultenAbone button {
  padding: 0 22px;
  background: var(--brass);
  color: var(--cream);
  border: 1px solid var(--brass);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}

.eBultenAbone button:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
}

.sosyalIcon {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.sosyalIcon a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 239, 228, 0.08);
  color: rgba(245, 239, 228, 0.75);
  transition: all 0.15s;
  border-radius: var(--r-sm);
}

.sosyalIcon a:hover {
  background: var(--brass);
  color: var(--cream);
}

/* ============================================
   17. FOOTER
   ============================================ */
footer {
  background: var(--ink);
  color: rgba(245, 239, 228, 0.75);
  padding: 80px 0 40px;
}

footer .siteyiOrtala {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(245, 239, 228, 0.15);
}

.footerBlok {
  display: flex;
  flex-direction: column;
}

.footerBlok .footerLogo {
  max-width: 180px;
  height: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}

.adresBilgileri {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.adresBilgileri > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.adresBilgileri i {
  color: var(--brass-soft);
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
}

.adresBilgileri strong {
  display: block;
  color: rgba(245, 239, 228, 0.9);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 500;
}

.adresBilgileri a,
.adresBilgileri span {
  font-size: 14px;
  color: rgba(245, 239, 228, 0.7);
  transition: color 0.15s;
}

.adresBilgileri a:hover {
  color: var(--brass-soft);
}

footer .genelBaslik {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 20px;
  display: block;
}

footer .genelBaslik::after {
  display: none;
}

footer .genelBaslik h2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-soft);
  font-weight: 500;
  background: transparent;
}

footer .footerBlok ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

footer .footerBlok ul li a {
  font-size: 14px;
  color: rgba(245, 239, 228, 0.75);
  transition: color 0.15s;
}

footer .footerBlok ul li a:hover {
  color: var(--brass-soft);
}

.footeroyntmi {
  text-align: center;
  padding-top: 32px;
  margin-top: 0;
}

.footeroyntmi img {
  max-height: 30px;
  margin: 0 auto;
  opacity: 0.5;
  filter: brightness(0) invert(1);
}

/* ============================================
   18. MOBILE BOTTOM NAV
   ============================================ */
.sabitAlan {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  z-index: 200;
  display: none;
  box-shadow: 0 -2px 20px rgba(26, 20, 16, 0.06);
}

.sabitAlan ul {
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.sabitAlan li {
  flex: 1;
  text-align: center;
}

.sabitAlan li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.15s;
}

.sabitAlan li a i {
  font-size: 18px;
  color: var(--ink);
}

.sabitAlan li a:hover,
.sabitAlan li a:active {
  color: var(--brass);
}

.sabitAlan li a:hover i {
  color: var(--brass);
}

/* ============================================
   19. BLOG CARDS
   ============================================ */
.anaBlog {
  background: transparent;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.anaBlog figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 0 16px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
}

.anaBlog figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.anaBlog:hover figure img {
  transform: scale(1.04);
}

.anaBlog figcaption {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.anaBlog span {
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   20. LOGIN / FORMS
   ============================================ */
.cerceve {
  max-width: 520px;
  margin: 40px auto;
  padding: 40px;
  background: var(--cream);
  border: 1px solid var(--hairline);
}

.generatedForm {
  padding: 20px 0;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s;
  border-radius: var(--r-sm);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--wood-400);
}

/* Submit buttons */
input[type="submit"],
button[type="submit"] {
  background: var(--ink);
  color: var(--cream);
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  border-radius: var(--r-sm);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--wood-600);
  border-color: var(--wood-600);
}

/* Checkbox accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brass);
}

/* ============================================
   21. PAGINATION
   ============================================ */
.sayfalar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 0;
}

.sayfalar a,
.sayfalar span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--hairline);
  background: var(--cream);
  color: var(--ink);
  transition: all 0.15s;
}

.sayfalar a:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.sayfalar span {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ============================================
   22. COOKIE CONSENT
   ============================================ */
.cc-window {
  font-family: var(--font-sans) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 20px 40px rgba(26, 20, 16, 0.15) !important;
}

.cc-btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  padding: 10px 18px !important;
  border-radius: var(--r-sm) !important;
}

/* ============================================
   23. CATEGORY SHOWCASE (tumcat)
   ============================================ */
.tumcat-container {
  padding: 24px 0;
}

.tumcat-innercontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.tumcat-catcontainer {
  padding: 16px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  transition: border-color 0.15s;
}

.tumcat-catcontainer:hover {
  border-color: var(--wood-400);
}

.tumcat-catcontainer > a > strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-soft);
}

.tumcat-catcontainer ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tumcat-catcontainer ul li a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.tumcat-catcontainer ul li a:hover {
  color: var(--brass);
}

/* ============================================
   24. CATEGORY BANNERS / ADS
   ============================================ */
.ortaReklamAlani,
.ortaReklamAlani2,
.ortaReklamAlani3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px 0;
}

.ortaReklamAlani div,
.ortaReklamAlani2 div,
.ortaReklamAlani3 div {
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
}

.ortaReklamAlani img,
.ortaReklamAlani2 img,
.ortaReklamAlani3 img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s;
}

.ortaReklamAlani div:hover img,
.ortaReklamAlani2 div:hover img,
.ortaReklamAlani3 div:hover img {
  transform: scale(1.02);
}

/* ============================================
   25. EYEBROW & RULE UTILITIES
   ============================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: none;
  margin: 0;
}

.rule-accent {
  height: 1px;
  background: var(--brass);
  border: none;
  width: 48px;
}

/* ============================================
   26. RESPONSIVE — TABLET
   ============================================ */
@media screen and (max-width: 1200px) {
  :root {
    --gutter: 24px;
  }

  .kategorininUrunleri,
  .urunListele .urunListeleIcerik,
  .urunListele > div:not(.genelBaslik):not(.temizle):not(.sayfalar):not(.itemOrder):not(.listeleme) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px !important;
  }

  .firsatUrunleri {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }

  .detail-block {
    gap: 40px;
  }

  footer .siteyiOrtala {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
  }
}

/* ============================================
   27. RESPONSIVE — MOBILE
   ============================================ */
@media screen and (max-width: 980px) {
  :root {
    --gutter: 16px;
  }

  /* Header */
  .headerUst {
    position: sticky;
    top: 0;
  }

  .headerUst .siteyiOrtala {
    flex-wrap: wrap;
    padding: 12px var(--gutter);
    gap: 12px;
  }

  .logoSolu {
    display: block;
    order: 1;
  }

  .logoAlani {
    order: 2;
    flex: 1;
  }

  .logoAlani img {
    height: 36px;
  }

  .uyeSepetAlani {
    order: 3;
    gap: 10px;
  }

  .uyeSepetAlani > a span {
    display: none;
  }

  .uyeSepetAlani > a.gizle {
    display: none !important;
  }

  .siteArama {
    order: 4;
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
  }

  /* Hide desktop nav, show mobile bottom bar */
  header {
    display: none;
  }

  .sabitAlan {
    display: block;
  }

  body {
    padding-bottom: 70px;
  }

  /* Site ust simplification */
  .siteUst ul {
    display: none;
  }

  .siteUst .siteyiOrtala {
    justify-content: center;
    padding: 8px var(--gutter);
  }

  .ustSag {
    gap: 12px;
    font-size: 10px;
  }

  /* Sayfa layout — stack */
  .sayfa-layout {
    flex-direction: column;
    gap: 20px;
  }

  .siteSol {
    width: 100%;
    order: 1;
  }

  .siteSag,
  .siteSag2 {
    width: 100%;
    order: 2;
  }

  /* Product grid */
  .kategorininUrunleri,
  .firsatUrunleri,
  .urunListele .urunListeleIcerik,
  .urunListele > div:not(.genelBaslik):not(.temizle):not(.sayfalar):not(.itemOrder):not(.listeleme) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 16px !important;
  }

  /* Detail page: stack image + info */
  .detail-block {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .urunDetaySol {
    position: static;
  }

  .urunDetaySag h2 {
    font-size: 28px;
  }

  .fiyatBilgisi .sfiyati {
    font-size: 32px;
  }

  /* Footer */
  footer .siteyiOrtala {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footerBlok:first-child {
    grid-column: 1 / -1;
  }

  /* Footer features */
  .footerKutular {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 40px 0;
  }

  /* E-bulten */
  .eBultenAbone {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 40px var(--gutter);
  }

  .eBultenAbone form {
    width: 100%;
    max-width: none;
  }

  /* Section titles */
  .genelBaslik {
    margin: 40px 0 24px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }

  .genelBaslik h2 {
    font-size: 24px;
  }

  /* Breadcrumb */
  .sayfaYoluGoster {
    padding: 16px 0;
  }

  .sayfaYoluGoster ul {
    font-size: 9px;
    gap: 6px;
  }

  /* Tabs */
  #tab-button {
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #tab-button::-webkit-scrollbar {
    display: none;
  }

  #tab-button li a {
    font-size: 10px;
    padding: 12px 0;
    white-space: nowrap;
  }
}

@media screen and (max-width: 600px) {
  /* Sepet satırı: quantity + butonlar sığdır */
  .le-quantity button {
    width: 38px;
    height: 44px;
  }

  .le-quantity input {
    width: 38px;
    height: 44px;
    font-size: 13px;
  }

  .detaySepet,
  .detayHemenAl {
    padding: 12px 14px;
    font-size: 10px;
    min-height: 44px;
    letter-spacing: 0.06em;
  }

  /* Footer grid - single column */
  footer .siteyiOrtala {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footerBlok:first-child {
    grid-column: auto;
  }

  .footerKutular {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tumcat-innercontainer {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 400px) {
  .kategorininUrunleri,
  .firsatUrunleri,
  .urunListele .urunListeleIcerik,
  .urunListele > div:not(.genelBaslik):not(.temizle):not(.sayfalar):not(.itemOrder):not(.listeleme) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .urunlerim figcaption {
    font-size: 14px;
  }

  .fiyat .yfiyat {
    font-size: 16px;
  }

  .sepeteEklesin {
    font-size: 10px;
    padding: 8px 12px;
  }

  .urunDetaySag h2 {
    font-size: 24px;
  }
}

/* ============================================
   28. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   29. PRINT
   ============================================ */
@media print {
  .siteUst, header, .sabitAlan, .eBultenAbone,
  .footerKutular, .siteArama, .uyeSepetAlani {
    display: none !important;
  }

  body { color: #000; background: #fff; }
}

/* ============================================
   30. STORY BLOCK (Atölye Hikayesi)
   ============================================ */
.story-block {
  padding: 24px 0;
  margin: 40px 0;
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  padding: 48px;
}

.story-image {
  aspect-ratio: 4 / 3;
  background: var(--wood-800);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(245, 239, 228, 0.1);
}

.story-image img,
.story-image a,
.story-image > div {
  width: 100%;
  height: 100%;
}

.story-image img {
  object-fit: cover;
}

.story-content .eyebrow {
  color: var(--brass-soft);
  margin-bottom: 20px;
  display: inline-block;
}

.story-content h2 {
  color: var(--cream);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.story-content p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(245, 239, 228, 0.78);
  font-style: italic;
  margin-bottom: 28px;
}

.btn-brass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--brass);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  border-radius: var(--r-sm);
  transition: all 0.15s;
  cursor: pointer;
}

.btn-brass:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--cream);
}

.btn-brass i {
  transition: transform 0.2s;
}

.btn-brass:hover i {
  transform: translateX(3px);
}

/* ============================================
   31. PRODUCT DETAIL — META, GUVEN STRIP, KARGO
   ============================================ */
.urun-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.urun-meta strong {
  color: var(--brass-deep);
  font-weight: 500;
}

.urun-rating {
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.urun-rating i,
.urun-rating .fa,
.urun-rating .fas,
.urun-rating .far {
  color: var(--brass);
  font-size: 13px;
}

/* Kargo süre bilgisi */
.kargo-sure-bilgi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 16px 0;
  border-radius: var(--r-sm);
}

.kargo-sure-bilgi i {
  color: var(--success);
  font-size: 16px;
  flex-shrink: 0;
}

.kargo-sure-bilgi strong {
  color: var(--ink);
  font-weight: 600;
}

/* Güven stripi — ücretsiz kargo, garanti, atölye testi */
.urun-guven-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-soft);
}

.urun-guven-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.urun-guven-strip i {
  color: var(--brass);
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Sepet satırı — nrmSepetSatir */
.nrmSepetSatir {
  align-items: stretch !important;
}

.nrmSepetSatir .le-quantity > div {
  height: 100%;
}

/* Brand link */
.urun-marka-link a {
  color: var(--brass);
  font-weight: 500;
}

.urun-marka-link a:hover {
  color: var(--brass-deep);
}

/* Ürün thumbnail listesi */
.urun-thumb-list {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.urun-thumb-list::-webkit-scrollbar {
  height: 4px;
}

.urun-thumb-list::-webkit-scrollbar-track {
  background: var(--cream-soft);
}

.urun-thumb-list::-webkit-scrollbar-thumb {
  background: var(--hairline);
}

/* Thumb wrapper (a tag) - container, içindeki img ortalanır */
.urun-thumb-list a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  flex-shrink: 0;
  transition: border-color 0.15s;
  cursor: pointer;
  padding: 6px;
  box-sizing: border-box;
  text-decoration: none;
  overflow: hidden;
}

/* Thumb içindeki img - container'a sığar */
.urun-thumb-list a img,
.urun-thumb-list > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Eğer doğrudan img varsa (a wrapper olmadan) — onu da kart yap */
.urun-thumb-list > img:not(a > img) {
  width: 72px;
  height: 72px;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  padding: 6px;
  box-sizing: border-box;
}

.urun-thumb-list a:hover,
.urun-thumb-list a.active,
.urun-thumb-list .active {
  border-color: var(--ink);
}

.urun-thumb-list a:hover img,
.urun-thumb-list .active img {
  border: none;
}

/* Kullanıcı seçenekleri */
.kullaniciSenecekleri {
  margin-top: 24px;
}

.kullaniciSenecekleri a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 12px;
  margin: 4px 4px 0 0;
  transition: all 0.15s;
}

.kullaniciSenecekleri a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ============================================
   32. HEADER SCROLL EFFECT
   ============================================ */
.headerUst.scrolled {
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.06);
}

/* ============================================
   33. STORY BLOCK — MOBILE
   ============================================ */
@media screen and (max-width: 980px) {
  .story-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }

  .story-image {
    aspect-ratio: 3 / 2;
  }

  .urun-thumb-list a,
  .urun-thumb-list img {
    width: 64px;
    height: 64px;
  }

  .urun-meta {
    font-size: 9px;
  }
}

/* ============================================
   34. CART POPUP / AJAX BASKET
   ============================================ */
.ajaxwrapper {
  background: rgba(26, 20, 16, 0.5) !important;
  backdrop-filter: blur(4px);
}

.ajaxwrapper form#ajaxBasketForm {
  background: var(--cream) !important;
  border: 1px solid var(--hairline) !important;
  font-family: var(--font-sans) !important;
}

.ajaxwrapper form#ajaxBasketForm .ajax_sag .add_basket_ajax,
.ajaxwrapper .add_basket_ajax {
  background: var(--brass) !important;
  border: 1px solid var(--brass) !important;
  color: var(--cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--r-sm) !important;
}

.ajaxwrapper form#ajaxBasketForm .ajax_sag .add_basket_ajax:hover,
.ajaxwrapper .add_basket_ajax:hover {
  background: var(--brass-deep) !important;
  border-color: var(--brass-deep) !important;
}

.ajaxwrapper form#ajaxBasketForm .ajax_sag .ajaxBasketClose,
.ajaxwrapper .ajaxBasketClose {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--r-sm) !important;
}

.ajaxwrapper form#ajaxBasketForm .ajax_sag .ajaxBasketClose:hover,
.ajaxwrapper .ajaxBasketClose:hover {
  background: var(--wood-600) !important;
  border-color: var(--wood-600) !important;
}

/* ============================================
   35. SEPET / CART TABLE
   ============================================ */
.sepetSayfa {
  padding: 24px 0;
}

table.sepet {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream);
}

table.sepet thead th {
  padding: 14px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

table.sepet tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}

table.sepet tbody tr:hover {
  background: var(--cream-soft);
}

/* Kupon / Promosyon kodu */
.kuponAlani,
.promo-code {
  padding: 20px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  margin: 24px 0;
}

.kuponAlani strong,
.kuponAlani label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

/* ============================================
   36. LOGIN / REGISTER
   ============================================ */
.tabGiris,
.loginTabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}

.tabGiris a,
.loginTabs a {
  flex: 1;
  text-align: center;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  cursor: pointer;
}

.tabGiris a.active,
.tabGiris a.selected,
.loginTabs a.active {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* ============================================
   37. ALERT / NOTIFICATION
   ============================================ */
.alert,
.uyari {
  padding: 14px 18px;
  margin: 12px 0;
  border-left: 3px solid var(--brass);
  background: var(--cream-soft);
  font-size: 13px;
  color: var(--ink-soft);
}

.alert-success,
.basarili {
  border-left-color: var(--success);
}

.alert-error,
.alert-danger,
.hata {
  border-left-color: var(--sale);
}

/* ============================================
   38. LIGHTBOX / GALLERY
   ============================================ */
.lightbox {
  display: block;
  cursor: zoom-in;
}

/* ============================================
   39. PAGE-SPECIFIC TWEAKS
   ============================================ */

/* Search results page */
.pagearama .siteSol {
  display: none;
}

.pagearama .siteSag2 {
  width: 100%;
}

.pagearama .generatedForm.searchForm.show {
  display: block;
}

/* Hide page-level stuff on mobile */
@media screen and (max-width: 980px) {
  .goster {
    display: block;
  }

  .gizle {
    display: none !important;
  }
}

/* ============================================
   40. ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.urunlerim,
.anaBlog {
  animation: fadeInUp 0.4s ease-out both;
}

/* ============================================
   41. TR / EN LANGUAGE SWITCHER
   ============================================ */
.lang-switcher {
  display: inline-flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.lang-switcher a {
  color: rgba(245, 239, 228, 0.6);
  padding: 2px 4px;
}

.lang-switcher a.active {
  color: var(--brass-soft);
  font-weight: 600;
}

/* ============================================

/* ============================================
   42. ÜRÜN LİSTELEME — BUTİK MOCKUP TASARIMI
   Editorial, çerçevesiz, sade kart layout
   ============================================ */

/* Wrapper */
.urunListele {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* İçerik: FLEX-WRAP */
.urunListele .urunListeleIcerik {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
  width: 100%;
  padding: 16px 0;
  align-items: stretch;
}

/* Form (sıralama çubuğu): tam genişlik */
.urunListele .urunListeleIcerik > form#urunsirala {
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  background: var(--cream-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}

.urunListele .urunListeleIcerik > form#urunsirala table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.urunListele .urunListeleIcerik > form#urunsirala td {
  padding: 12px 14px;
  vertical-align: middle;
  border: none;
}

.urunListele .urunListeleIcerik .cat-filter-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.urunListele .urunListeleIcerik .cat-filter-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.urunListele .urunListeleIcerik .cat-filter-box label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.urunListele .urunListeleIcerik .cat-filter-box input[type="checkbox"] {
  accent-color: var(--ink);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.urunListele .urunListeleIcerik select#orderBy,
.urunListele .urunListeleIcerik select#cat-limit {
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  min-width: 120px;
}

.urunListele .urunListeleIcerik .clear-space {
  display: none;
}

/* HR çizgisi gizli */
.urunListele .urunListeleIcerik > hr,
.urunListele .urunListeleIcerik > hr.item-order-line {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  border: none;
  background: transparent;
  margin: 0;
  display: none;
}

/* ============================================
   ÜRÜN KARTI — BUTİK STİL
   Çerçevesiz, sadece resim + text below
   ============================================ */
.urunListele .urunListeleIcerik > .urunlerim {
  flex: 0 0 calc((100% - 72px) / 4);
  width: calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
  display: flex;
  flex-direction: column;
  background: transparent;       /* ÇERÇEVESİZ */
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;
  transition: transform 0.2s;
  box-sizing: border-box;
  cursor: pointer;
}

.urunListele .urunListeleIcerik > .urunlerim:hover {
  transform: translateY(-2px);
}

/* Kart içindeki ana <a> link */
.urunListele .urunListeleIcerik > .urunlerim > a:first-child {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  gap: 0;
}

/* İndirim badge - sağ üst, resmin üzerinde */
.urunListele .urunListeleIcerik > .urunlerim .indirimGoster {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--sale);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 9px;
  z-index: 3;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Resim alanı — açık zemin, çerçeveli iç border */
.urunListele .urunListeleIcerik > .urunlerim figure {
  margin: 0 0 14px 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  position: relative;
  overflow: hidden;
  display: block;
  transition: border-color 0.2s;
}

.urunListele .urunListeleIcerik > .urunlerim:hover figure {
  border-color: var(--wood-400);
}

.urunListele .urunListeleIcerik > .urunlerim .image-cover {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  padding: 0;
}

.urunListele .urunListeleIcerik > .urunlerim .image-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
  transition: opacity 0.3s;
}

.urunListele .urunListeleIcerik > .urunlerim .image-cover .resim2 {
  opacity: 0;
}

.urunListele .urunListeleIcerik > .urunlerim:hover .image-cover .resim1 {
  opacity: 0;
}

.urunListele .urunListeleIcerik > .urunlerim:hover .image-cover .resim2 {
  opacity: 1;
}

.urunListele .urunListeleIcerik > .urunlerim .image-cover img:only-of-type {
  opacity: 1 !important;
}

/* Bilgiler badge alanı — sol üst */
.urunListele .urunListeleIcerik > .urunlerim .bilgiler {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.urunListele .urunListeleIcerik > .urunlerim .bilgiler span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  color: var(--cream);
  font-weight: 500;
  border-radius: 0;
  background: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  display: inline-block;
}

.urunListele .urunListeleIcerik > .urunlerim .bilgiler .uucretsiz { background: var(--brass); }
.urunListele .urunListeleIcerik > .urunlerim .bilgiler .uindirim { background: var(--sale); }
.urunListele .urunListeleIcerik > .urunlerim .bilgiler .yerli { background: var(--success); }
.urunListele .urunListeleIcerik > .urunlerim .bilgiler .uaninda { background: var(--ink); }
.urunListele .urunListeleIcerik > .urunlerim .bilgiler .utukendi { background: var(--ink-mute); }

/* Ürün adı — DM Serif Display büyük */
.urunListele .urunListeleIcerik > .urunlerim figcaption {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
  padding: 0;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  letter-spacing: -0.01em;
}

/* Fiyat alanı */
.urunListele .urunListeleIcerik > .urunlerim .fiyat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0 0;
  margin: 0;
}

.urunListele .urunListeleIcerik > .urunlerim .fiyat .yfiyat {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  order: 1;
}

.urunListele .urunListeleIcerik > .urunlerim .fiyat .efiyat {
  font-size: 12px;
  color: var(--ink-whisper);
  text-decoration: line-through;
  font-family: var(--font-mono);
  line-height: 1;
  order: 2;
}

/* Sepete Ekle butonu — gizle (mockup'ta yok) */
.urunListele .urunListeleIcerik > .urunlerim .sepeteEklesin {
  display: none;
}

/* Pagination, sayfalama */
.urunListele .urunListeleIcerik > center,
.urunListele .urunListeleIcerik > div[align="center"],
.urunListele .urunListeleIcerik > .sayfalar,
.urunListele .urunListeleIcerik > #twbsPagination,
.urunListele .urunListeleIcerik > script {
  flex: 0 0 100%;
  width: 100%;
}

/* TABLET: 3 kolon */
@media screen and (max-width: 1200px) {
  .urunListele .urunListeleIcerik > .urunlerim {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
  }
}

/* SMALL TABLET: 2 kolon */
@media screen and (max-width: 980px) {
  .urunListele .urunListeleIcerik {
    gap: 24px 16px;
  }
  .urunListele .urunListeleIcerik > .urunlerim {
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
  .urunListele .urunListeleIcerik > .urunlerim figcaption {
    font-size: 16px;
  }
  .urunListele .urunListeleIcerik > .urunlerim .fiyat .yfiyat {
    font-size: 18px;
  }
}

/* MOBILE küçük: 2 kolon */
@media screen and (max-width: 600px) {
  .urunListele .urunListeleIcerik {
    gap: 20px 12px;
  }
  .urunListele .urunListeleIcerik > .urunlerim {
    flex: 0 0 calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }
  .urunListele .urunListeleIcerik > .urunlerim figcaption {
    font-size: 14px;
  }
  .urunListele .urunListeleIcerik > .urunlerim .fiyat .yfiyat {
    font-size: 16px;
  }
  .urunListele .urunListeleIcerik > .urunlerim .image-cover img {
    padding: 16px;
  }
}

/* ============================================
   43. MOBILE OFFCANVAS NAV — DRAWER OLARAK ÇALIŞIR
   #main-nav default gizli, mobilde toggle ile açılır
   ============================================ */

#main-nav {
  display: none;
  visibility: hidden;
}

/* Mobilde drawer olarak göster (kapalı durumda) */
@media screen and (max-width: 980px) {
  #main-nav {
    display: block;
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background: var(--cream);
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
}

/* Drawer (sepet quick view) eğer sayfada açıkta kalıyorsa gizle */
.drawer.js-drawer:not(.is-open):not(.open) {
  display: none !important;
}

/* ============================================
   44. GENEL ÜRÜN KARTI STİLİ — TÜM WRAPPER'LAR
   .urunlerim (kategori, slider, yeniGelenler, seciliUrunler, ilgiliUrunler)
   .urunGorunumu (anasayfa swiper, UrunBlockList)
   Tüm kart context'leri butik mockup tasarımına uyumlu
   ============================================ */

/* ===== GENEL .urunlerim KART (kategori sayfası DIŞINDAKİ tüm yerler) ===== */
/* yeniGelenler, seciliUrunler, ilgiliUrunler, firsatUrunleri içindeki .urunlerim */
.yeniGelenler .urunlerim,
.seciliUrunler .urunlerim,
.ilgiliUrunler .urunlerim,
.firsatUrunleri .urunlerim,
.swiper-slide .urunlerim {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
  transition: transform 0.2s !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
}

.yeniGelenler .urunlerim:hover,
.seciliUrunler .urunlerim:hover,
.ilgiliUrunler .urunlerim:hover,
.firsatUrunleri .urunlerim:hover,
.swiper-slide .urunlerim:hover {
  transform: translateY(-2px) !important;
}

/* Ana <a> link */
.yeniGelenler .urunlerim > a:first-child,
.seciliUrunler .urunlerim > a:first-child,
.ilgiliUrunler .urunlerim > a:first-child,
.firsatUrunleri .urunlerim > a:first-child,
.swiper-slide .urunlerim > a:first-child {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}

/* Resim alanı (figure) */
.yeniGelenler .urunlerim figure,
.seciliUrunler .urunlerim figure,
.ilgiliUrunler .urunlerim figure,
.firsatUrunleri .urunlerim figure,
.swiper-slide .urunlerim figure {
  margin: 0 0 14px !important;
  padding: 0 !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline-soft) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  transition: border-color 0.2s !important;
}

.yeniGelenler .urunlerim:hover figure,
.seciliUrunler .urunlerim:hover figure,
.ilgiliUrunler .urunlerim:hover figure,
.firsatUrunleri .urunlerim:hover figure,
.swiper-slide .urunlerim:hover figure {
  border-color: var(--wood-400) !important;
}

.yeniGelenler .urunlerim .image-cover,
.seciliUrunler .urunlerim .image-cover,
.ilgiliUrunler .urunlerim .image-cover,
.firsatUrunleri .urunlerim .image-cover,
.swiper-slide .urunlerim .image-cover {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

.yeniGelenler .urunlerim .image-cover img,
.seciliUrunler .urunlerim .image-cover img,
.ilgiliUrunler .urunlerim .image-cover img,
.firsatUrunleri .urunlerim .image-cover img,
.swiper-slide .urunlerim .image-cover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s !important;
}

.yeniGelenler .urunlerim .image-cover .resim2,
.seciliUrunler .urunlerim .image-cover .resim2,
.ilgiliUrunler .urunlerim .image-cover .resim2,
.firsatUrunleri .urunlerim .image-cover .resim2,
.swiper-slide .urunlerim .image-cover .resim2 {
  opacity: 0 !important;
}

.yeniGelenler .urunlerim:hover .image-cover .resim1,
.seciliUrunler .urunlerim:hover .image-cover .resim1,
.ilgiliUrunler .urunlerim:hover .image-cover .resim1,
.firsatUrunleri .urunlerim:hover .image-cover .resim1,
.swiper-slide .urunlerim:hover .image-cover .resim1 {
  opacity: 0 !important;
}

.yeniGelenler .urunlerim:hover .image-cover .resim2,
.seciliUrunler .urunlerim:hover .image-cover .resim2,
.ilgiliUrunler .urunlerim:hover .image-cover .resim2,
.firsatUrunleri .urunlerim:hover .image-cover .resim2,
.swiper-slide .urunlerim:hover .image-cover .resim2 {
  opacity: 1 !important;
}

/* İndirim badge */
.yeniGelenler .urunlerim .indirimGoster,
.seciliUrunler .urunlerim .indirimGoster,
.ilgiliUrunler .urunlerim .indirimGoster,
.firsatUrunleri .urunlerim .indirimGoster,
.swiper-slide .urunlerim .indirimGoster {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: var(--sale) !important;
  color: var(--cream) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 5px 9px !important;
  z-index: 3 !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Ürün adı */
.yeniGelenler .urunlerim figcaption,
.seciliUrunler .urunlerim figcaption,
.ilgiliUrunler .urunlerim figcaption,
.firsatUrunleri .urunlerim figcaption,
.swiper-slide .urunlerim figcaption {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
  border: none !important;
}

/* Fiyat */
.yeniGelenler .urunlerim .fiyat,
.seciliUrunler .urunlerim .fiyat,
.ilgiliUrunler .urunlerim .fiyat,
.firsatUrunleri .urunlerim .fiyat,
.swiper-slide .urunlerim .fiyat {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

.yeniGelenler .urunlerim .fiyat .yfiyat,
.seciliUrunler .urunlerim .fiyat .yfiyat,
.ilgiliUrunler .urunlerim .fiyat .yfiyat,
.firsatUrunleri .urunlerim .fiyat .yfiyat,
.swiper-slide .urunlerim .fiyat .yfiyat {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  order: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.yeniGelenler .urunlerim .fiyat .efiyat,
.seciliUrunler .urunlerim .fiyat .efiyat,
.ilgiliUrunler .urunlerim .fiyat .efiyat,
.firsatUrunleri .urunlerim .fiyat .efiyat,
.swiper-slide .urunlerim .fiyat .efiyat {
  font-size: 12px !important;
  color: var(--ink-whisper) !important;
  text-decoration: line-through !important;
  font-family: var(--font-mono) !important;
  line-height: 1 !important;
  order: 2 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bilgiler badges */
.yeniGelenler .urunlerim .bilgiler,
.seciliUrunler .urunlerim .bilgiler,
.ilgiliUrunler .urunlerim .bilgiler,
.firsatUrunleri .urunlerim .bilgiler,
.swiper-slide .urunlerim .bilgiler {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  align-items: flex-start !important;
}

.yeniGelenler .urunlerim .bilgiler span,
.seciliUrunler .urunlerim .bilgiler span,
.ilgiliUrunler .urunlerim .bilgiler span,
.firsatUrunleri .urunlerim .bilgiler span,
.swiper-slide .urunlerim .bilgiler span {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  color: var(--cream) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  width: auto !important;
}

.yeniGelenler .urunlerim .bilgiler .uucretsiz,
.seciliUrunler .urunlerim .bilgiler .uucretsiz,
.ilgiliUrunler .urunlerim .bilgiler .uucretsiz,
.firsatUrunleri .urunlerim .bilgiler .uucretsiz,
.swiper-slide .urunlerim .bilgiler .uucretsiz { background: var(--brass) !important; }

.yeniGelenler .urunlerim .bilgiler .uindirim,
.seciliUrunler .urunlerim .bilgiler .uindirim,
.ilgiliUrunler .urunlerim .bilgiler .uindirim,
.firsatUrunleri .urunlerim .bilgiler .uindirim,
.swiper-slide .urunlerim .bilgiler .uindirim { background: var(--sale) !important; }

.yeniGelenler .urunlerim .bilgiler .yerli,
.seciliUrunler .urunlerim .bilgiler .yerli,
.ilgiliUrunler .urunlerim .bilgiler .yerli,
.firsatUrunleri .urunlerim .bilgiler .yerli,
.swiper-slide .urunlerim .bilgiler .yerli { background: var(--success) !important; }

.yeniGelenler .urunlerim .bilgiler .utukendi,
.seciliUrunler .urunlerim .bilgiler .utukendi,
.ilgiliUrunler .urunlerim .bilgiler .utukendi,
.firsatUrunleri .urunlerim .bilgiler .utukendi,
.swiper-slide .urunlerim .bilgiler .utukendi { background: var(--ink-mute) !important; }

/* Sepete ekle butonu — tüm context'lerde gizle (mockup'ta yok) */
.yeniGelenler .urunlerim .sepeteEklesin,
.seciliUrunler .urunlerim .sepeteEklesin,
.ilgiliUrunler .urunlerim .sepeteEklesin,
.firsatUrunleri .urunlerim .sepeteEklesin,
.swiper-slide .urunlerim .sepeteEklesin {
  display: none !important;
}

/* ===== .urunGorunumu (anasayfa BlockList swiper) ===== */
.urunGorunumu,
.swiper-slide .urunGorunumu {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
  transition: transform 0.2s !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
}

.urunGorunumu:hover {
  transform: translateY(-2px) !important;
}

.urunGorunumu > a:first-child {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}

.urunGorunumu figure {
  margin: 0 0 14px !important;
  padding: 0 !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline-soft) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  transition: border-color 0.2s !important;
}

.urunGorunumu:hover figure {
  border-color: var(--wood-400) !important;
}

.urunGorunumu .image-cover {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

.urunGorunumu .image-cover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.urunGorunumu strong {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: var(--sale) !important;
  color: var(--cream) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 5px 9px !important;
  z-index: 3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.urunGorunumu figcaption {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
  border: none !important;
}

.urunGorunumu .fiyat {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.urunGorunumu .fiyat .yfiyat {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  order: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.urunGorunumu .fiyat .efiyat {
  font-size: 12px !important;
  color: var(--ink-whisper) !important;
  text-decoration: line-through !important;
  font-family: var(--font-mono) !important;
  line-height: 1 !important;
  order: 2 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Adetaylar (kalp) ve sepetEkle (sepet) butonlarını gizle - mockup'ta yok */
.urunGorunumu .adetaylar,
.urunGorunumu .asepetEkle {
  display: none !important;
}

/* ============================================
   45. KESİN MOBILE OVERRIDE'LAR
   Section 44'ten daha yüksek specificity
   ============================================ */

/* MOBİL: kategori sayfasında 2 kolon ZORLA (body prefix ile specificity artırıldı) */
@media screen and (max-width: 980px) {
  body .urunListele .urunListeleIcerik > .urunlerim,
  html body .urunListeleIcerik > .urunlerim,
  html .urunListele .urunListeleIcerik > .urunlerim {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 600px) {
  body .urunListele .urunListeleIcerik > .urunlerim,
  html body .urunListeleIcerik > .urunlerim,
  html .urunListele .urunListeleIcerik > .urunlerim {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
  }
  body .urunListele .urunListeleIcerik > .urunlerim figcaption {
    font-size: 14px !important;
  }
  body .urunListele .urunListeleIcerik > .urunlerim .fiyat .yfiyat {
    font-size: 16px !important;
  }
}

/* ============================================
   46. MOBİL DRAWER MENU (vanilla, bağımsız)
   #main-nav'i drawer olarak göster
   ============================================ */

/* Toggle butonu üzerine tıklanınca açılır body class'ı ekleyeceğiz */
body.mobile-nav-open #main-nav {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 85% !important;
  max-width: 360px !important;
  height: 100vh !important;
  background: var(--cream) !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  visibility: visible !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;
  padding: 0 !important;
  transform: translateX(0) !important;
  transition: transform 0.3s ease !important;
}

#main-nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

/* Drawer overlay */
body.mobile-nav-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 20, 16, 0.6);
  z-index: 9998;
  cursor: pointer;
}

/* Mobile menu drawer içeriği */
body.mobile-nav-open #main-nav .second-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mobile-nav-open #main-nav .second-nav > li {
  border-bottom: 1px solid var(--hairline-soft);
}

body.mobile-nav-open #main-nav .second-nav > li > a {
  display: block;
  padding: 18px 24px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.mobile-nav-open #main-nav .second-nav > li > a:hover,
body.mobile-nav-open #main-nav .second-nav > li > a:active {
  background: var(--cream-soft);
  color: var(--brass);
}

/* Alt kategoriler - ikinci seviye */
body.mobile-nav-open #main-nav .second-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px 24px;
  background: var(--cream-soft);
  display: none; /* Varsayılan kapalı */
}

body.mobile-nav-open #main-nav .second-nav li.expanded > ul {
  display: block;
}

body.mobile-nav-open #main-nav .second-nav ul li a {
  display: block;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-whisper);
}

body.mobile-nav-open #main-nav .second-nav ul li:last-child a {
  border-bottom: none;
}

body.mobile-nav-open #main-nav .second-nav ul li a:hover,
body.mobile-nav-open #main-nav .second-nav ul li a:active {
  color: var(--brass);
}

/* Sub-menu açma chevron */
body.mobile-nav-open #main-nav .second-nav > li {
  position: relative;
}

body.mobile-nav-open #main-nav .second-nav > li:has(ul) > a::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 18px;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-mute);
  transition: transform 0.2s;
}

body.mobile-nav-open #main-nav .second-nav > li.expanded > a::after {
  content: '−';
}

/* Drawer header */
body.mobile-nav-open #main-nav::before {
  content: 'KATEGORİLER';
  display: block;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}

/* Toggle butonu mobile'da görünür ve çalışır */
@media screen and (max-width: 980px) {
  .logoSolu {
    display: block !important;
  }
  .logoSolu .toggle {
    cursor: pointer !important;
    z-index: 100;
    position: relative;
  }
}


/* ============================================
   47. GRID-BASED MOBİL FIX — EN GÜÇLÜ SPECIFICITY
   CSS Grid kullanıyor (iOS her sürümde kesin çalışır)
   ============================================ */

@media screen and (max-width: 980px) {
  /* .urunListeleIcerik'i GRID container yap */
  html body .urunListele .urunListeleIcerik {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 16px !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }

  /* Form ve hr tam satır */
  html body .urunListele .urunListeleIcerik > form,
  html body .urunListele .urunListeleIcerik > form#urunsirala,
  html body .urunListele .urunListeleIcerik > hr,
  html body .urunListele .urunListeleIcerik > center,
  html body .urunListele .urunListeleIcerik > div[align="center"],
  html body .urunListele .urunListeleIcerik > #twbsPagination,
  html body .urunListele .urunListeleIcerik > script {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html body .urunListele .urunListeleIcerik > hr {
    display: none !important;
  }

  /* Ürünler grid hücresini doldurur */
  html body .urunListele .urunListeleIcerik > .urunlerim {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: initial !important;
  }

  /* Form style */
  html body .urunListele .urunListeleIcerik > form#urunsirala {
    padding: 12px !important;
    background: var(--cream-soft) !important;
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--r-sm) !important;
    margin-bottom: 8px !important;
  }

  /* Table'ı block yapısına çevir */
  html body .urunListele .urunListeleIcerik > form#urunsirala table,
  html body .urunListele .urunListeleIcerik > form#urunsirala tbody,
  html body .urunListele .urunListeleIcerik > form#urunsirala tr {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  html body .urunListele .urunListeleIcerik > form#urunsirala td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: none !important;
  }

  /* Filtre checkbox satırı */
  html body .urunListele .urunListeleIcerik .cat-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
  }

  html body .urunListele .urunListeleIcerik .cat-filter-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  html body .urunListele .urunListeleIcerik .cat-filter-box input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--ink) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  html body .urunListele .urunListeleIcerik .cat-filter-box label {
    font-size: 13px !important;
    font-family: var(--font-sans) !important;
    color: var(--ink-soft) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
  }

  html body .urunListele .urunListeleIcerik select#orderBy,
  html body .urunListele .urunListeleIcerik select#cat-limit {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
  }

  /* Kart mobil font ayarları */
  html body .urunListele .urunListeleIcerik > .urunlerim figcaption {
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 8px 0 4px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim .fiyat .yfiyat {
    font-size: 16px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim .fiyat .efiyat {
    font-size: 11px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim .image-cover img {
    padding: 12px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim figure {
    margin-bottom: 8px !important;
  }

  /* Kart içi badge'leri küçült */
  html body .urunListele .urunListeleIcerik > .urunlerim .indirimGoster {
    font-size: 9px !important;
    padding: 3px 6px !important;
    top: 8px !important;
    right: 8px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim .bilgiler {
    top: 8px !important;
    left: 8px !important;
  }

  html body .urunListele .urunListeleIcerik > .urunlerim .bilgiler span {
    font-size: 8px !important;
    padding: 3px 5px !important;
  }
}

@media screen and (max-width: 480px) {
  html body .urunListele .urunListeleIcerik {
    grid-gap: 12px !important;
    gap: 12px !important;
  }
}

/* ============================================
   48. ÜRÜN DETAY THUMBNAIL — KESİN DÜZELTİM
   ============================================ */

/* Thumbnail list container */
.urun-thumb-list,
div.urun-thumb-list,
html body .urun-thumb-list {
  display: flex !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 4px 0 8px !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Thumbnail <a> wrapper — contain img */
.urun-thumb-list a,
html body .urun-thumb-list a,
.urun-thumb-list > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  flex: 0 0 72px !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline-soft) !important;
  transition: border-color 0.15s !important;
  cursor: pointer !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* Thumbnail img — a içinde dolu olsun */
.urun-thumb-list a img,
html body .urun-thumb-list a img,
.urun-thumb-list > a > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Eğer direkt img ise (a wrapper olmadan) */
.urun-thumb-list > img {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  flex: 0 0 72px !important;
  object-fit: contain !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline-soft) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.urun-thumb-list a:hover,
.urun-thumb-list a.active,
.urun-thumb-list > img:hover,
.urun-thumb-list > img.active {
  border-color: var(--ink) !important;
}

/* ============================================
   49. MOBİL FILTRE FORM CHECKBOX — KESİN DÜZELTME
   ============================================ */

@media screen and (max-width: 980px) {
  /* Form container — daha az padding */
  html body .urunListele .urunListeleIcerik > form#urunsirala {
    padding: 14px !important;
    background: var(--cream-soft) !important;
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--r-sm) !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
  }

  /* cat-filter-bar — her checkbox kendi satırında olsun (sol kayma sorununu çöz) */
  html body .urunListele .urunListeleIcerik .cat-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  /* Her checkbox kutusu tek satır, checkbox + label yan yana */
  html body .urunListele .urunListeleIcerik .cat-filter-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    position: relative !important;
  }

  /* Checkbox: kesin boyut, kesin pozisyon */
  html body .urunListele .urunListeleIcerik .cat-filter-box input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    accent-color: var(--ink) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Label: checkbox'tan SONRA gelir, overlap yok */
  html body .urunListele .urunListeleIcerik .cat-filter-box label {
    display: inline-block !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    color: var(--ink-soft) !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* Sıralama/adet selectler alt alta */
  html body .urunListele .urunListeleIcerik select#orderBy,
  html body .urunListele .urunListeleIcerik select#cat-limit {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-sm) !important;
    background: var(--cream) !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   50. MOBİL SIDEBAR — DRAWER YAKLAŞIMI (Section 51 kullanır)
   ============================================ */

@media screen and (max-width: 980px) {
  /* .sayfa-layout parent layout */
  html body .sayfa-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  html body .sayfa-layout .siteSag,
  html body .sayfa-layout .siteSag2 {
    width: 100% !important;
    order: 1 !important;
  }
}


/* ============================================
   51. AKORDEON MOBİL İYİLEŞTİRME
   Checkbox tabanlı, bağımsız aç/kapa
   ============================================ */

@media screen and (max-width: 980px) {
  /* Sidebar accordion mobilde */
  html body .siteSol .ac-container {
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--r-sm) !important;
    overflow: hidden !important;
  }

  /* Accordion her bir item — kompakt */
  html body .siteSol .ac-container > div {
    border-bottom: 1px solid var(--hairline) !important;
    background: var(--cream-soft) !important;
  }

  html body .siteSol .ac-container > div:last-child {
    border-bottom: none !important;
  }

  /* Label - tıklanabilir başlık */
  html body .siteSol .ac-container label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    background: var(--cream-soft) !important;
    transition: background 0.15s !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .siteSol .ac-container label:active {
    background: var(--cream) !important;
  }

  /* Chevron */
  html body .siteSol .ac-container label .fa-chevron-down {
    font-size: 11px !important;
    color: var(--ink-mute) !important;
    transition: transform 0.3s ease !important;
  }

  html body .siteSol .ac-container input:checked ~ label .fa-chevron-down,
  html body .siteSol .ac-container > div:has(input:checked) > label .fa-chevron-down {
    transform: rotate(180deg) !important;
  }

  /* Article - açıldığında - sınırlı yükseklik + iç scroll */
  html body .siteSol .ac-container article {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out !important;
    background: var(--cream) !important;
    padding: 0 !important;
  }

  html body .siteSol .ac-container input:checked ~ article {
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding: 12px 0 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* İç scroll için thin scrollbar */
  html body .siteSol .ac-container article::-webkit-scrollbar {
    width: 5px;
  }

  html body .siteSol .ac-container article::-webkit-scrollbar-track {
    background: var(--cream-soft);
  }

  html body .siteSol .ac-container article::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 2px;
  }

  /* Alt kategori liste */
  html body .siteSol .ac-container .altKategoriler {
    padding: 0 18px 8px !important;
    max-height: none !important;
  }

  html body .siteSol .ac-container .altKategoriler ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .siteSol .ac-container .altKategoriler ul li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  html body .siteSol .ac-container .altKategoriler ul li a {
    display: block !important;
    padding: 10px 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    color: var(--ink-soft) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
  }

  html body .siteSol .ac-container .altKategoriler ul li:last-child a {
    border-bottom: none !important;
  }

  html body .siteSol .ac-container .altKategoriler ul li a:active {
    color: var(--brass) !important;
  }

  /* Filter listesi içerideki — daha hava */
  html body .siteSol .ac-container .filtre {
    padding: 0 18px 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Marka filtresi label/input touch target büyüt */
  html body .siteSol .filitreGruplama input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--ink) !important;
    flex-shrink: 0 !important;
    margin: 0 8px 0 0 !important;
  }

  html body .siteSol .filitreGruplama label {
    font-size: 14px !important;
    padding: 8px 0 !important;
    line-height: 1.3 !important;
  }

  /* Filitre başlığı */
  html body .siteSol .filitreBaslik {
    padding: 12px 0 8px !important;
    font-size: 11px !important;
  }
}

/* ============================================
   52. MOBİL FİLTRE BOTTOM SHEET — APP-LIKE
   Trendyol/ASOS/Amazon tarzı modern mobile pattern
   ============================================ */

/* Varsayılan: tüm mobil-filtre elementleri masaüstünde gizli */
.mobil-filtre-tetik,
.mobil-filtre-header,
.mobil-filtre-tabs,
.mobil-filtre-footer,
.mobil-overlay {
  display: none;
}

/* ============ MOBİL (980px ALTI) ============ */
@media screen and (max-width: 980px) {

  /* --- Tetikleyici buton (sticky) --- */
  html body .mobil-filtre-tetik {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin: 0 0 16px !important;
    background: var(--ink) !important;
    color: var(--cream) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
  }

  html body .mobil-filtre-tetik:active {
    background: var(--brass-deep) !important;
  }

  html body .mobil-filtre-tetik-icon {
    display: inline-flex;
    align-items: center;
  }

  /* --- Layout: siteSol gizli (drawer açılana kadar) --- */
  html body .sayfa-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  html body .sayfa-layout .siteSol {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--cream) !important;
    z-index: 9998 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.2) !important;
    visibility: hidden !important;
  }

  html body .sayfa-layout .siteSag,
  html body .sayfa-layout .siteSag2 {
    width: 100% !important;
    order: 1 !important;
  }

  /* --- Drawer açıkken --- */
  body.filtre-acik {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  body.filtre-acik .sayfa-layout .siteSol {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* --- Overlay (backdrop) --- */
  html body .mobil-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(26, 20, 16, 0) !important;
    z-index: 9997 !important;
    pointer-events: none !important;
    transition: background 0.3s ease !important;
  }

  body.filtre-acik .mobil-overlay {
    background: rgba(26, 20, 16, 0.55) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  /* --- DRAWER HEADER --- */
  html body .siteSol .mobil-filtre-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--hairline) !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  html body .siteSol .mobil-filtre-baslik {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    color: var(--ink) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }

  html body .siteSol .mobil-filtre-kapat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05) !important;
    transition: background 0.15s !important;
  }

  html body .siteSol .mobil-filtre-kapat:active {
    background: var(--cream-deep) !important;
  }

  /* --- TABS (Kategoriler | Filtreler) --- */
  html body .siteSol .mobil-filtre-tabs {
    display: flex !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--hairline) !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 56px !important;
    z-index: 2 !important;
  }

  html body .siteSol .mobil-tab {
    flex: 1 !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--ink-mute) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body .siteSol .mobil-tab.is-active {
    color: var(--ink) !important;
    border-bottom-color: var(--brass) !important;
  }

  html body .siteSol .mobil-tab:active {
    background: var(--cream-soft) !important;
  }

  /* --- İÇERİK ALANI --- */
  html body .siteSol .mobil-filtre-icerik {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: var(--cream) !important;
    padding: 0 !important;
  }

  /* Accordion container içeride - yapıyı sıfırla */
  html body .siteSol .ac-container {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
  }

  html body .siteSol .ac-container > div {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Tab gizleme: data-mobile-tab attribute ile */
  html body .siteSol .ac-container > div[data-mobile-tab] {
    display: none !important;
  }

  html body .siteSol .ac-container > div[data-mobile-tab].is-tab-active {
    display: block !important;
  }

  /* Accordion label (Alt Kategoriler / Filtrele) - mobilde header zaten var, gizleyebiliriz */
  html body .siteSol .ac-container > div[data-mobile-tab] > input,
  html body .siteSol .ac-container > div[data-mobile-tab] > label {
    display: none !important;
  }

  /* Article her zaman açık (tab zaten controlling) */
  html body .siteSol .ac-container > div[data-mobile-tab] > article {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* --- ALT KATEGORİLER LİSTESİ --- */
  html body .siteSol .altKategoriler {
    padding: 8px 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .siteSol .altKategoriler strong {
    display: none !important;
  }

  html body .siteSol .altKategoriler ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .siteSol .altKategoriler ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
  }

  html body .siteSol .altKategoriler ul li:last-child {
    border-bottom: none !important;
  }

  html body .siteSol .altKategoriler ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(176,133,66,0.08) !important;
    transition: background 0.15s !important;
  }

  html body .siteSol .altKategoriler ul li a:active {
    background: var(--cream-soft) !important;
    color: var(--brass) !important;
  }

  /* Sağ ok ikonu */
  html body .siteSol .altKategoriler ul li a::after {
    content: '›';
    font-size: 22px;
    color: var(--ink-mute);
    font-weight: 300;
    margin-left: 12px;
  }

  /* --- FİLTRELER (Marka, vs.) --- */
  html body .siteSol .filtre {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .siteSol .filitreGruplama {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  html body .siteSol .filitreBaslik,
  html body .siteSol li.filitreBaslik {
    padding: 16px 20px 8px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--ink-mute) !important;
    background: var(--cream-soft) !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Marka/seçenek satırları - büyük touch target */
  html body .siteSol .filitreGruplama input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .siteSol .filitreGruplama label,
  html body .siteSol .filitreGruplama label.filterCheck {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px 14px 52px !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    background: transparent !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(176,133,66,0.08) !important;
    transition: background 0.15s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Custom checkbox visual - sol başta */
  html body .siteSol .filitreGruplama label::before {
    content: '';
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid var(--hairline) !important;
    border-radius: 4px !important;
    background: var(--cream) !important;
    transition: all 0.15s !important;
  }

  /* Checked state - kullanıcı tıklayınca checkbox işaretli */
  html body .siteSol .filitreGruplama input[type="checkbox"]:checked + label::before,
  html body .siteSol .filitreGruplama label:has(+ input[type="checkbox"]:checked)::before {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
  }

  /* Checkmark */
  html body .siteSol .filitreGruplama input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute !important;
    left: 25px !important;
    top: 50% !important;
    transform: translateY(-65%) rotate(45deg) !important;
    width: 6px !important;
    height: 11px !important;
    border-right: 2px solid var(--cream) !important;
    border-bottom: 2px solid var(--cream) !important;
  }

  html body .siteSol .filitreGruplama label:active {
    background: var(--cream-soft) !important;
  }

  html body .siteSol .filitreGruplama label:hover {
    background: var(--cream-soft) !important;
  }

  /* clear-space kalmasın */
  html body .siteSol .filitreGruplama .clear-space,
  html body .siteSol .filitreGruplama .filter-clear {
    display: none !important;
  }

  /* --- FOOTER (Temizle + Uygula) --- */
  html body .siteSol .mobil-filtre-footer {
    display: flex !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    background: var(--paper) !important;
    border-top: 1px solid var(--hairline) !important;
    flex-shrink: 0 !important;
  }

  html body .siteSol .mobil-filtre-temizle {
    flex: 0 0 auto !important;
    padding: 14px 24px !important;
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05) !important;
    transition: all 0.15s !important;
  }

  html body .siteSol .mobil-filtre-temizle:active {
    background: var(--cream-deep) !important;
  }

  html body .siteSol .mobil-filtre-uygula {
    flex: 1 !important;
    padding: 14px !important;
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-sm) !important;
    color: var(--cream) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
    transition: all 0.15s !important;
  }

  html body .siteSol .mobil-filtre-uygula:active {
    background: var(--brass-deep) !important;
    border-color: var(--brass-deep) !important;
  }
}

/* iPad ve büyük mobil için yan yana drawer + tab gizli olabilir */
@media screen and (min-width: 600px) and (max-width: 980px) {
  html body .sayfa-layout .siteSol {
    max-width: 460px !important;
  }
}

/* ============================================
   53. SIRALAMA FORMU SADELEŞTİRME
   "Ücretsiz Kargo", "Hemen Kargo", "İndirimde" checkbox'larını gizle
   Filtre drawer'ında zaten mevcutlar
   ============================================ */

/* Global - HEM masaüstü HEM mobilde gizle */
html body .urunListele .urunListeleIcerik .cat-filter-bar,
html body .urunListele .urunListeleIcerik .formlinefix {
  display: none !important;
}

/* Form içindeki table hücresini (cat-filter-bar'ı içeren) gizle */
html body .urunListele .urunListeleIcerik form#urunsirala td:has(.cat-filter-bar),
html body .urunListele .urunListeleIcerik form#urunsirala td.formlinefix {
  display: none !important;
}

/* Sadece Sırala ve adet select kalsın - tek satırda */
html body .urunListele .urunListeleIcerik > form#urunsirala {
  padding: 8px 12px !important;
  background: var(--cream-soft) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
}

html body .urunListele .urunListeleIcerik > form#urunsirala table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: none !important;
}

html body .urunListele .urunListeleIcerik > form#urunsirala tr {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

html body .urunListele .urunListeleIcerik > form#urunsirala td {
  padding: 4px !important;
  border: none !important;
  background: transparent !important;
}

/* orderBy select geniş, cat-limit küçük */
html body .urunListele .urunListeleIcerik > form#urunsirala td:nth-of-type(2) {
  flex: 1 !important;
}

html body .urunListele .urunListeleIcerik > form#urunsirala td:nth-of-type(3) {
  flex: 0 0 auto !important;
}

html body .urunListele .urunListeleIcerik select#orderBy {
  width: 100% !important;
}

html body .urunListele .urunListeleIcerik select#cat-limit {
  width: 80px !important;
  min-width: 80px !important;
}

/* Mobilde kompakt — zaten drawer'da filtreler var */
@media screen and (max-width: 980px) {
  html body .urunListele .urunListeleIcerik > form#urunsirala {
    margin-bottom: 16px !important;
  }

  html body .urunListele .urunListeleIcerik > form#urunsirala select#orderBy,
  html body .urunListele .urunListeleIcerik > form#urunsirala select#cat-limit {
    margin-top: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   54. MOBİL FİLTRE — SADELEŞTİRME
   Tab sistemi kaldırıldı, tek akış
   Filtreler arası çift çizgi düzenlendi
   ============================================ */

/* Tab sistemini gizle - artık kullanılmıyor */
.mobil-filtre-tabs,
html body .mobil-filtre-tabs {
  display: none !important;
}

@media screen and (max-width: 980px) {
  /* Filter count badge tetikleyicide */
  html body .mobil-filtre-tetik .mobil-filtre-count {
    display: none;
    padding: 2px 8px;
    background: var(--brass);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
  }

  /* ac-container içeriği temizle */
  html body .siteSol .ac-container {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
  }

  html body .siteSol .ac-container > div {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .siteSol .ac-container > div:last-child {
    border-bottom: none !important;
  }

  /* Accordion başlık - kompakt, ikon ile */
  html body .siteSol .ac-container label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    background: var(--cream-soft) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05) !important;
    margin: 0 !important;
    font-weight: 500 !important;
  }

  html body .siteSol .ac-container label:active {
    background: var(--cream-deep) !important;
  }

  /* Article - açıldığında görünür */
  html body .siteSol .ac-container article {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease-out !important;
    background: var(--cream) !important;
    padding: 0 !important;
  }

  html body .siteSol .ac-container input:checked ~ article {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* === MARKA / FİLTRE LİSTESİ === */
  /* NOT: HTML yapısı şöyle:
     <ul>
       <li class="filitreGruplama"></li>   <- boş li
       <li class="filitreBaslik">Markalar</li>
       <input> <label>Blackstar</label>     <- ul içinde direkt!
       <div class="clear-space"></div>
       <input> <label>Cort</label>
       ...
     </ul>
     Bu yüzden .filitreGruplama selector'ı child seçmek için kullanılamaz */

  html body .siteSol #filterContainer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Boş filitreGruplama li'sini gizle */
  html body .siteSol li.filitreGruplama {
    display: none !important;
  }

  /* Filitre kategori başlığı (MARKALAR, STOK DURUMU, FİYAT ARALIĞI) */
  html body .siteSol .filitreBaslik,
  html body .siteSol li.filitreBaslik {
    padding: 20px 20px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ink-mute) !important;
    background: var(--cream-soft) !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    margin: 0 !important;
    display: block !important;
    font-weight: 500 !important;
    list-style: none !important;
  }

  /* TÜM CHECKBOX - gizle (custom visual kullanacağız) */
  html body .siteSol input.filterCheck[type="checkbox"],
  html body .mobil-filtre-icerik input[type="checkbox"][filterkey] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }

  /* Filitre label - her satır bir tık alanı */
  html body .siteSol label.filterCheck {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px 16px 54px !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    background: var(--cream) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(176,133,66,0.08) !important;
    transition: background 0.12s !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .siteSol label.filterCheck:active {
    background: var(--cream-soft) !important;
  }

  /* Custom checkbox visual - sol başta */
  html body .siteSol label.filterCheck::before {
    content: '';
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border: 1.5px solid var(--hairline) !important;
    border-radius: 5px !important;
    background: var(--cream) !important;
    transition: all 0.15s !important;
    box-sizing: border-box !important;
  }

  /* Checkbox işaretli - JS tarafından eklenen .is-checked class'ı ile */
  html body .siteSol label.filterCheck.is-checked::before {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
  }

  /* Checkmark (tick) */
  html body .siteSol label.filterCheck.is-checked::after {
    content: '' !important;
    position: absolute !important;
    left: 27px !important;
    top: 50% !important;
    width: 7px !important;
    height: 12px !important;
    border-right: 2px solid var(--cream) !important;
    border-bottom: 2px solid var(--cream) !important;
    transform: translateY(-65%) rotate(45deg) !important;
  }

  /* clear-space aralayıcıları gizle - filtre satırları kendi border'ı var */
  html body .siteSol .clear-space,
  html body .siteSol .filter-clear,
  html body .siteSol div.clear-space {
    display: none !important;
  }

  /* Son satırda border yok */
  html body .siteSol .filitreGruplama label.filterCheck:last-of-type {
    border-bottom: none !important;
  }

  /* Temizle linki (core'dan gelen) gizle - bizim temizle butonumuz var */
  html body .siteSol .filtre > a[onclick*="filterClean"],
  html body .siteSol .filtre a[href*="filterClean"] {
    display: none !important;
  }

  /* Alt kategori liste - emin ol ki form gibi görünsün */
  html body .siteSol .altKategoriler ul li a {
    -webkit-tap-highlight-color: rgba(176,133,66,0.08) !important;
  }

  /* === FİYAT ARALIĞI slider --- */
  html body .siteSol .jslider,
  html body .siteSol .jslider-single {
    margin: 12px 20px !important;
  }

  /* Genel içerik aralık */
  html body .siteSol .filtre {
    padding: 0 !important;
  }

  html body .siteSol .ac-container > div > article > div,
  html body .siteSol .filtre > div {
    padding: 0 !important;
  }
}

/* ============================================
   55. FİLTRE GRUPLARI AKORDEON
   Markalar, Stok Durumu, Fiyat Aralığı her biri kapanabilen akordeon
   ============================================ */

@media screen and (max-width: 980px) {

  /* Mobilde eski filitreBaslik artık görünmesin (JS yenisini oluşturuyor) */
  html body .siteSol li.filitreBaslik {
    display: none !important;
  }

  /* Filtre grup wrapper - her grup kendi kapsayıcısında */
  html body .siteSol .filtre-grup {
    background: var(--cream) !important;
    border-bottom: 1px solid var(--hairline) !important;
    overflow: hidden !important;
  }

  /* Grup başlığı (tıklanabilir buton) */
  html body .siteSol .filtre-grup-baslik {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 20px !important;
    background: var(--cream-soft) !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05) !important;
    transition: background 0.15s !important;
    user-select: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  html body .siteSol .filtre-grup-baslik:active {
    background: var(--cream-deep) !important;
  }

  html body .siteSol .filtre-grup-baslik > span {
    flex: 1 !important;
  }

  /* Chevron ikonu */
  html body .siteSol .filtre-grup-chevron {
    flex-shrink: 0 !important;
    color: var(--ink-mute) !important;
    transition: transform 0.3s ease !important;
  }

  html body .siteSol .filtre-grup.is-open .filtre-grup-chevron {
    transform: rotate(180deg) !important;
  }

  /* Grup içeriği - varsayılan kapalı */
  html body .siteSol .filtre-grup-icerik {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease-out !important;
    background: var(--cream) !important;
  }

  /* Grup açıkken */
  html body .siteSol .filtre-grup.is-open .filtre-grup-icerik {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Grup açıkken içerideki ilk label'ın üst border'ı yok (zaten başlığın alt border'ı var) */
  html body .siteSol .filtre-grup.is-open .filtre-grup-icerik > label.filterCheck:first-of-type {
    border-top: none !important;
  }

  /* Grup içindeki son label'ın alt border'ını kaldır */
  html body .siteSol .filtre-grup-icerik > label.filterCheck:last-of-type {
    border-bottom: none !important;
  }

  /* Scroll thumb */
  html body .siteSol .filtre-grup-icerik::-webkit-scrollbar {
    width: 4px;
  }

  html body .siteSol .filtre-grup-icerik::-webkit-scrollbar-track {
    background: var(--cream-soft);
  }

  html body .siteSol .filtre-grup-icerik::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 2px;
  }

  /* Açık grup başlığında alt çizgi */
  html body .siteSol .filtre-grup.is-open .filtre-grup-baslik {
    border-bottom: 1px solid var(--hairline-soft) !important;
  }
}

/* ============================================
   56. MOBİL FİLTRE — DIŞ "FİLTRELE" LABEL'I GİZLE
   İç gruplar (Markalar, Stok, Fiyat) zaten kendi accordion'ları
   ============================================ */

@media screen and (max-width: 980px) {
  /* Dış "Filtrele" accordion label'ını gizle */
  html body .siteSol .ac-container > .filtre-wrapper > input,
  html body .siteSol .ac-container > .filtre-wrapper > label {
    display: none !important;
  }

  /* Article daima açık olsun (input checked olmadan da) */
  html body .siteSol .ac-container > .filtre-wrapper > article {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
  }

  /* Wrapper kendisinin border-bottom'unu kaldır */
  html body .siteSol .ac-container > .filtre-wrapper {
    border-bottom: none !important;
    background: transparent !important;
  }
}

/* ============================================
   57. FİYAT ARALIĞI — CUSTOM INPUT + CHIP UI
   Slider yerine min/max input + hızlı seçim chip'leri
   ============================================ */

/* jslider widget'ını her zaman gizle (custom UI gösteriyoruz) */
.jslider,
span.jslider,
html body .siteSol .jslider {
  display: none !important;
}

/* Fiyat input grubu (mobile + desktop) */
.fiyat-input-grup {
  padding: 16px 20px 18px !important;
  background: var(--cream) !important;
}

.fiyat-input-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.fiyat-input-cell {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.fiyat-input-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.fiyat-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color 0.15s !important;
  overflow: hidden !important;
}

.fiyat-input-wrap:focus-within {
  border-color: var(--ink) !important;
}

.fiyat-input {
  flex: 1 !important;
  width: 100% !important;
  padding: 12px 8px 12px 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
  min-width: 0 !important;
  font-weight: 500 !important;
}

/* Chrome/Safari number input arrows kaldır */
.fiyat-input::-webkit-outer-spin-button,
.fiyat-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.fiyat-input::placeholder {
  color: var(--ink-mute) !important;
  font-weight: 400 !important;
  opacity: 0.6 !important;
}

.fiyat-input-suffix {
  padding: 0 12px 0 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

.fiyat-input-divider {
  font-size: 16px !important;
  color: var(--ink-mute) !important;
  margin: 0 2px 12px !important;
  font-weight: 300 !important;
}

/* Hızlı seçim chip'leri */
.fiyat-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.fiyat-chip {
  padding: 8px 14px !important;
  background: var(--cream-soft) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}

.fiyat-chip:active {
  transform: scale(0.97) !important;
}

.fiyat-chip:hover {
  border-color: var(--ink-soft) !important;
}

.fiyat-chip.is-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream) !important;
  font-weight: 500 !important;
}