/* Taban stil: tüm temalarda ortak mağaza düzeni. Temalar renk, yazı ve köşe değişkenlerini ve küçük karakter farklarını verir. */
:root {
  --zemin: #faf9f7; --yuzey: #ffffff; --metin: #1f2328; --soluk: #667085; --cizgi: #e4e2dd;
  --vurgu: #0b7a78; --vurgu-koyu: #085f5d; --vurgu-yazi: #ffffff; --hata: #b42318; --uyari: #b54708;
  --gorsel-zemin: #f3f2ee; --vitrin-zemin: #eef3f1; --kose: 12px; --kart-kose: 12px;
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --yazi-baslik: var(--yazi);
}
@media (prefers-color-scheme: dark) {
  :root { --zemin: #16181b; --yuzey: #1f2226; --metin: #ececec; --soluk: #a1a8b3; --cizgi: #33373d; --vurgu: #3cc4bf; --vurgu-koyu: #2ba6a1; --vurgu-yazi: #10201f; --hata: #f97066; --uyari: #fdb022; --gorsel-zemin: #292c31; --vitrin-zemin: #1f2226; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 16px/1.55 var(--yazi); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; width: 100%; padding-block: 24px; }
a { color: var(--vurgu); }
h1, h2, h3, .baslik, .bolum-baslik { font-family: var(--yazi-baslik); }
.kap { max-width: 1160px; width: 100%; margin-inline: auto; padding-inline: 16px; }

.onizleme { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6px 16px; background: #101828; color: #d0d5dd; font: 13px/1.4 system-ui, sans-serif; }
.onizleme a { color: #fff; text-decoration: none; padding: 2px 10px; border-radius: 999px; }
.onizleme a.secili { background: #fff; color: #101828; font-weight: 600; }
.duyuru { background: var(--metin); color: var(--zemin); text-align: center; font-size: 13px; padding: 7px 16px; }

.ust { position: relative; z-index: 20; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 12px 20px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.marka { font-family: var(--yazi-baslik); font-weight: 700; font-size: 20px; color: var(--metin); text-decoration: none; }
.ara { flex: 1; display: flex; gap: 8px; min-width: 200px; margin: 0; }
.ara input { flex: 1; min-width: 0; margin-top: 0; }
.sepet-bag { text-decoration: none; font-weight: 600; white-space: nowrap; color: var(--metin); }
.rozet { background: var(--vurgu); color: var(--vurgu-yazi); border-radius: 999px; padding: 1px 8px; font-size: 13px; }
.ust-menu { flex-basis: 100%; display: flex; gap: 6px 20px; overflow-x: auto; font-size: 15px; }
.ust-menu, .kategoriler, .kategori-kartlari { scrollbar-width: none; }
.menu-oge > a { display: block; color: var(--metin); text-decoration: none; white-space: nowrap; }
.menu-oge > a:hover { color: var(--vurgu); }
/* Mega menü .ust'e göre konumlanır: böylece yatay kaydırılan menü onu kırpmaz */
.mega { position: absolute; left: 0; right: 0; top: 100%; visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .2s; background: var(--yuzey); border-block: 1px solid var(--cizgi); box-shadow: 0 12px 24px rgb(0 0 0 / .1); font: 14px/1.5 var(--yazi); letter-spacing: normal; text-transform: none; }
/* Kapanma gecikmeli: fare çapraz giderken yan öğeye değse de panel hemen kapanmaz */
.menu-oge:hover .mega, .menu-oge:focus-within .mega { z-index: 1; visibility: visible; opacity: 1; transition-delay: .08s, .08s; }
.mega-ic { display: flex; flex-wrap: wrap; gap: 16px 48px; padding-block: 20px; }
.mega-kolon { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.mega a { color: var(--metin); text-decoration: none; }
.mega a:hover { color: var(--vurgu); }
.mega-baslik { font-weight: 700; }

.alt { background: var(--yuzey); border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); padding-block: 28px; margin-top: 32px; }
.alt-ic { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.alt-kolon { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.alt-kolon strong { color: var(--metin); }
.alt-kolon a { color: var(--soluk); text-decoration: none; }
.alt-kolon a:hover { color: var(--vurgu); }
.alt p { margin: 0; }
.alt-marka { font-family: var(--yazi-baslik); font-size: 16px; }

.alt-menu { display: none; }
.kirintilar { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--soluk); margin-bottom: 12px; }
.kirintilar a { color: var(--soluk); }
.urun-marka { margin: 0 0 8px; font-size: 14px; color: var(--soluk); }

.vitrin-alani { margin-bottom: 24px; }
.vitrin-alani > .vitrin { margin-bottom: 0; }
.slider { position: relative; min-width: 0; }
.slider-iz { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--kose); }
.slider-iz::-webkit-scrollbar { display: none; }
.slayt { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; margin: 0; border-radius: 0; min-height: 340px; }
.slider .slayt { padding-inline: 64px; }
.slider-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; font-size: 22px; line-height: 1; background: var(--yuzey); }
.onceki { left: 10px; }
.sonraki { right: 10px; }
.slider-nokta { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; }
.slider-nokta button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--soluk); background: transparent; }
.slider-nokta button[aria-current=true] { background: var(--vurgu); border-color: var(--vurgu); }
.vitrin-baslik { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }

.raf { margin-bottom: 32px; }
.raf-bas { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.raf-bas .bolum-baslik { margin: 0; }
.raf-sekmeler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.raf-sekmeler button { white-space: nowrap; padding: 6px 14px; font-weight: 500; }
.raf-sekmeler button[aria-selected=true] { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }

.banner-alani { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 32px; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; background: var(--vitrin-zemin); border-radius: var(--kose); color: var(--metin); text-decoration: none; overflow: hidden; }
.banner-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner strong { font-family: var(--yazi-baslik); font-size: 20px; line-height: 1.2; }
.banner-metin span { font-size: 14px; color: var(--soluk); }
.banner em { font-style: normal; font-weight: 600; color: var(--vurgu); margin-top: 6px; font-size: 14px; }
.banner img { width: 120px; height: 120px; object-fit: contain; flex: none; }

.marka-seridi { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; align-items: center; padding-block: 20px; margin-bottom: 8px; border-top: 1px solid var(--cizgi); }
.marka-seridi a { padding: 6px 16px; color: var(--soluk); text-decoration: none; font-weight: 600; }
.marka-seridi a:hover { color: var(--vurgu); }
.marka-seridi img { height: 36px; display: block; }

.kategori-listesi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kategori-listesi section { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kart-kose); }
.kategori-listesi h2 { margin: 0 0 4px; font-size: 18px; }
.kategori-listesi a { color: var(--metin); text-decoration: none; }
.kategori-listesi a.uc { padding-left: 14px; font-size: 14px; color: var(--soluk); }
.iletisim { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; max-width: 560px; }
.iletisim dt { color: var(--soluk); }
.iletisim dd { margin: 0; }

.vitrin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; background: var(--vitrin-zemin); border-radius: var(--kose); padding: 40px; margin-bottom: 24px; }
.vitrin-ust { margin: 0 0 8px; color: var(--soluk); font-size: 14px; }
.vitrin h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; }
.vitrin-yazi { margin: 0 0 20px; font-size: 18px; color: var(--soluk); max-width: 46ch; }
.vitrin-gorsel { display: block; }
.vitrin-gorsel .gorsel { background: transparent; max-height: 360px; object-fit: contain; }

.kategori-kartlari { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 24px; }
.kategori-kart { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kart-kose); text-decoration: none; color: var(--metin); }
.kategori-kart:hover { border-color: var(--vurgu); }
.kategori-kart img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 8px; }
.kategori-ad { font-weight: 600; }
.kategori-adet { font-size: 13px; color: var(--soluk); }

.guven { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 32px; padding: 0; }
.guven li { padding: 12px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kart-kose); }
.guven strong { display: block; }
.guven span { font-size: 14px; color: var(--soluk); }

.bolum-baslik { font-size: 24px; margin: 0 0 16px; }
.baslik { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
.kategoriler { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; }
.kategoriler a, .sayfalar a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); text-decoration: none; color: var(--metin); white-space: nowrap; }
.kategoriler a.secili, .sayfalar a.secili { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.sayfalar { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

.izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kart { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kart-kose); padding: 12px; text-decoration: none; color: var(--metin); }
.kart:hover { border-color: var(--vurgu); }
.kart-gorsel { position: relative; display: block; }
.kart-ad { font-weight: 500; }
.kart-alt { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kart-fiyat { font-weight: 700; }
.kart-eski { font-size: 14px; color: var(--soluk); }
.kart-secenek { font-size: 13px; color: var(--soluk); }
.gorsel { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: calc(var(--kart-kose) - 4px); background: var(--gorsel-zemin); }
.gorsel.yok { display: grid; place-items: center; font-size: 48px; color: var(--soluk); }
.etiket { position: absolute; top: 8px; left: 8px; background: var(--metin); color: var(--zemin); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.etiket.indirim { background: var(--vurgu); color: var(--vurgu-yazi); }
.bos { color: var(--soluk); padding: 40px 0; text-align: center; }

.urun { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.urun h1 { margin: 4px 0 8px; font-size: 30px; line-height: 1.2; }
.urun-fiyat { font-size: 26px; font-weight: 700; margin: 0; }
.eski { text-decoration: line-through; color: var(--soluk); margin: 0; }
.kdv, .ipucu { color: var(--soluk); font-size: 14px; margin: 4px 0 16px; }
.kirinti { font-size: 14px; }
.metin { white-space: pre-line; margin-top: 20px; }
.satir { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.satir > label { flex: 1; min-width: 120px; }

fieldset { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 12px 16px 16px; margin: 0 0 16px; background: var(--yuzey); min-width: 0; }
legend { font-weight: 600; padding-inline: 6px; }
.secenek label { display: flex; gap: 10px; padding: 6px 0; align-items: center; color: var(--metin); margin: 0; }
.secenek label.pasif { color: var(--soluk); }
.secenek small { margin-left: auto; }
label { display: block; font-size: 14px; color: var(--soluk); margin-bottom: 10px; }
label.kutu { display: flex; gap: 8px; color: var(--metin); align-items: flex-start; }
label.kutu input { width: auto; margin-top: 4px; }
input, textarea, select { width: 100%; padding: 9px 12px; font: inherit; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: min(var(--kose), 8px); margin-top: 4px; }
input[type=radio], input[type=checkbox] { width: auto; margin: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
button, .dugme { display: inline-block; padding: 9px 18px; font: inherit; font-weight: 600; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); cursor: pointer; text-decoration: none; text-align: center; }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.dugme.ana:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.dugme.tam { display: block; width: 100%; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.bag { background: none; border: 0; padding: 0; color: var(--soluk); font-weight: 400; text-decoration: underline; }
.hata { color: var(--hata); font-size: 14px; display: block; }
.hata:empty { display: none; }
ul.hata { margin: 0 0 8px; padding-left: 18px; }
.uyari { color: var(--uyari); display: block; }

.iki-kolon { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.sepet-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 12px 16px; margin-bottom: 10px; }
.sepet-satir small { display: block; color: var(--soluk); }
.sepet-satir small.uyari { color: var(--uyari); }
.adet { display: flex; gap: 8px; align-items: center; }
.adet input { width: 72px; margin: 0; }
.ozet { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 16px; }
.ozet-satir { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-bottom: 6px; }
.toplam { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 8px 0 16px; }
.toplam dd { margin: 0; text-align: right; }
.toplam .genel { font-weight: 700; font-size: 18px; border-top: 1px solid var(--cizgi); padding-top: 8px; }
.ortali { max-width: 480px; margin: 24px auto; text-align: center; }
.ortali.genis { max-width: 640px; }
.ortali .satir { justify-content: center; }
.ortali .ozet { text-align: left; }

@media (max-width: 760px) {
  body { padding-bottom: 60px; }
  .alt-menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--yuzey); border-top: 1px solid var(--cizgi); }
  .alt-menu a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 4px; font-size: 13px; font-weight: 600; color: var(--metin); text-decoration: none; }
  .ust-menu { display: none; }
  .slayt { min-height: 0; }
  .slider-ok { display: none; }
  .slider .slayt { padding-inline: 20px; }
  .slider-nokta { bottom: 6px; }
  .banner img { width: 88px; height: 88px; }
  .urun, .iki-kolon { grid-template-columns: minmax(0, 1fr); }
  .urun-gorsel .gorsel { aspect-ratio: 16 / 10; }
  .sepet-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .ara { order: 3; flex-basis: 100%; }
  .marka { flex: 1; }
  .vitrin { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .vitrin-gorsel { order: -1; }
  .vitrin-gorsel .gorsel { max-height: 200px; }
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Mağaza düzeni: üst bilgi, geniş arama, mega menü, sol kategori kolonu ve slider, çerçeveli kartlar. Tüm temalarda ortaktır. */
:root {
  --koyu: #18212f; --koyu-yazi: #ffffff; --koyu-soluk: #aab4c3;
  --indirim: #e02424; --indirim-yazi: #ffffff; --vitrin-yazi: var(--soluk);
}
.duyuru { background: var(--koyu); color: var(--koyu-yazi); font-weight: 500; }

.ust-bilgi { display: block; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); font-size: 12.5px; color: var(--soluk); }
.ust-bilgi-ic { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; }
.ust-bilgi nav { display: flex; gap: 18px; }
.ust-bilgi a { color: var(--soluk); text-decoration: none; }
.ust-bilgi a:hover { color: var(--vurgu); }

.ust { border-bottom: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.ust-ic { padding-block: 16px 0; gap: 12px 28px; }
.marka { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--vurgu); }
.ara { gap: 0; max-width: 620px; margin-inline: auto; }
.ara input { height: 44px; border-radius: min(var(--kose), 8px) 0 0 min(var(--kose), 8px); border-right: 0; background: var(--zemin); }
.ara button { border-radius: 0 min(var(--kose), 8px) min(var(--kose), 8px) 0; background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); padding-inline: 22px; }
.ara button:hover { background: var(--vurgu-koyu); }
.sepet-bag { display: inline-flex; align-items: center; gap: 6px; }
.sepet-tutar { color: var(--vurgu); font-weight: 700; }
/* Menü öğesi başlığın alt kenarına kadar uzanır: yazı ile açılan panel arasında fare boşluğa düşmez */
.ust-menu { gap: 0 26px; border-top: 1px solid var(--cizgi); margin-top: 4px; font-size: 14.5px; font-weight: 600; }
.menu-oge > a { padding-block: 12px; }

.vitrin-alani { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
/* Kolon slider yüksekliğinde kalır, kategori çoksa liste kendi içinde kayar */
.yan-kategoriler { position: relative; z-index: 10; display: flex; flex-direction: column; max-height: 400px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); }
.yan-baslik { padding: 12px 16px; background: var(--vurgu); color: var(--vurgu-yazi); border-radius: var(--kose) var(--kose) 0 0; }
.yan-liste { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.yan-oge { position: relative; border-top: 1px solid var(--cizgi); }
.yan-oge:first-of-type { border-top: 0; }
.yan-oge > a { display: flex; justify-content: space-between; padding: 11px 16px; color: var(--metin); text-decoration: none; font-size: 14.5px; }
.yan-oge > a:hover { color: var(--vurgu); background: var(--zemin); }
.yan-oge:has(.yan-alt) > a::after { content: "\203A"; color: var(--soluk); }
/* Sabit konum: kayan liste paneli kesmesin. Yerini vitrin.js üzerine gelindiğinde hesaplar */
.yan-alt { position: fixed; z-index: 30; width: 240px; padding: 8px; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .2s; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); box-shadow: 0 12px 24px rgb(0 0 0 / .1); }
.yan-oge:hover .yan-alt, .yan-oge:focus-within .yan-alt { z-index: 1; visibility: visible; opacity: 1; transition-delay: .08s, .08s; }
.yan-alt a { padding: 7px 10px; color: var(--metin); text-decoration: none; font-size: 14px; border-radius: min(var(--kose), 6px); }
.yan-alt a:hover { background: var(--zemin); color: var(--vurgu); }

.vitrin { padding: 40px 56px; }
.slayt { min-height: 400px; }
.vitrin-baslik { font-weight: 800; letter-spacing: -.02em; }
.vitrin-yazi { color: var(--vitrin-yazi); font-size: 16px; }
.vitrin-gorsel .gorsel { max-height: 300px; }
.dugme, button { border-radius: min(var(--kose), 8px); }
.kategoriler a, .sayfalar a { border-radius: min(var(--kose), 8px); }

.guven { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 20px; }
.guven strong { font-size: 15px; }

.kategori-kartlari { margin-bottom: 24px; }
.kategori-kart { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.kategori-kart img { width: 56px; height: 56px; margin: 0; }
.kategori-ad { flex: 1; }
.kategori-adet { flex-basis: 100%; padding-left: 68px; margin-top: -14px; }

.raf { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 16px 18px 18px; margin-bottom: 20px; }
.raf-bas { border-bottom: 2px solid var(--vurgu); padding-bottom: 10px; }
.bolum-baslik { font-size: 19px; font-weight: 800; }
.raf-sekmeler button { border-color: transparent; background: none; }
.raf-sekmeler button[aria-selected=true] { background: var(--vurgu); color: var(--vurgu-yazi); }
.izgara { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kart { text-align: center; align-items: center; padding: 12px; gap: 4px; }
.kart:hover { box-shadow: 0 6px 18px rgb(16 24 40 / .1); border-color: var(--vurgu); }
.kart-bag { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; width: 100%; color: inherit; text-decoration: none; }
.kart-gorsel { width: 100%; }
.kart-ozet { display: none; }
.kart-kargo { font-size: 12.5px; font-weight: 600; color: var(--vurgu); }
.kart-islem { width: 100%; margin-top: 8px; }
.kart-islem form { margin: 0; }
.kart-islem .dugme { padding: 7px 10px; font-size: 14px; }
.kart-ad { font-size: 14.5px; font-weight: 500; line-height: 1.3; min-height: 2.6em; }
.kart-alt { flex-direction: column-reverse; align-items: center; gap: 0; }
.kart-fiyat { font-size: 17px; font-weight: 800; }
.etiketler { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.etiket { position: static; border-radius: min(var(--kose), 4px); }
.etiket.indirim { background: var(--indirim); color: var(--indirim-yazi); }
.etiket.yeni { background: var(--vurgu); color: var(--vurgu-yazi); }
.etiket.firsat { background: var(--koyu); color: var(--koyu-yazi); }

/* Liste sayfası: solda filtre kolonu, sağda araç çubuğu ve ürünler */
.liste-alani { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.filtre-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 14px 16px; }
.filtre-kutu summary { display: none; }
.filtre-kutu form { margin: 0; }
.filtre fieldset { border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; background: none; padding: 0 0 12px; margin: 0 0 12px; }
.filtre legend { padding: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.filtre-satir { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; color: var(--metin); cursor: pointer; }
.filtre-satir small { margin-left: auto; color: var(--soluk); }
.fiyat-aralik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fiyat-aralik label { margin: 0; font-size: 13px; }
.fiyat-aralik input { padding: 7px 8px; font-size: 14px; }
.renk { flex: none; width: 16px; height: 16px; }
.renk circle { stroke: var(--soluk); stroke-width: 1; }

.liste-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; margin-bottom: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); }
.liste-adet { font-size: 14px; color: var(--soluk); }
.sirala { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.sirala select { width: auto; margin: 0; padding: 6px 10px; font-size: 14px; }
.gorunum { display: flex; gap: 4px; }
.gorunum a { padding: 5px 10px; font-size: 14px; color: var(--metin); text-decoration: none; border: 1px solid var(--cizgi); border-radius: min(var(--kose), 8px); }
.gorunum a[aria-current=true] { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.secili-filtreler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.secili-filtreler a { padding: 3px 10px; font-size: 13.5px; color: var(--metin); text-decoration: none; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px; }
.secili-filtreler a:hover { border-color: var(--vurgu); }
.secili-filtreler .temizle { color: var(--vurgu); border-color: transparent; background: none; }

.izgara.liste { grid-template-columns: minmax(0, 1fr); }
.izgara.liste .kart { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.izgara.liste .kart-bag { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 16px; align-items: center; justify-items: start; }
.izgara.liste .kart-gorsel { grid-row: 1 / span 4; }
.izgara.liste .kart-ad { min-height: 0; font-weight: 600; }
.izgara.liste .kart-ozet { display: block; font-size: 13.5px; color: var(--soluk); }
.izgara.liste .kart-alt { align-items: flex-start; }
.izgara.liste .kart-islem { flex: none; width: 160px; margin: 0; }

.urun-bilgi { min-width: 0; }
.urun-kunye { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 12px; padding: 0; font-size: 14px; color: var(--soluk); }
.urun-kunye a { color: var(--vurgu); }
.urun-fiyat-kutu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.urun-fiyat-kutu .eski { margin: 0; }
.stok-durum { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--vurgu); }
.urun-bayrak { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.urun-bayrak:empty { display: none; }
.urun-bayrak li { padding: 2px 10px; font-size: 13px; font-weight: 600; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: min(var(--kose), 6px); }
.ozellik-grup { margin-bottom: 14px; }
.ozellik-grup p { margin: 0 0 6px; font-size: 14px; color: var(--soluk); }
.ozellik-grup strong { color: var(--metin); }
.ozellik-degerler { display: flex; flex-wrap: wrap; gap: 8px; }
.ozellik-deger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-weight: 500; }
.ozellik-deger[aria-pressed=true] { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.ozellik-deger.uyumsuz { color: var(--soluk); border-style: dashed; }
.ozellik-deger:disabled span { text-decoration: line-through; }
.satin-al { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 4px; }
.satin-al label { width: 84px; margin: 0; }
.satin-al .dugme { flex: 1 1 140px; min-height: 42px; }

.galeri { min-width: 0; }
.galeri-iz { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--kart-kose); }
.galeri-iz::-webkit-scrollbar { display: none; }
.galeri-iz .gorsel { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; border-radius: 0; }
.galeri-kucuk { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.galeri-kucuk a { flex: none; width: 72px; padding: 2px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: min(var(--kose), 8px); }
.galeri-kucuk a[aria-current=true] { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.galeri-kucuk img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }

.urun-sekmeler { margin-top: 24px; }
.urun-sekmeler .raf-sekmeler { flex-basis: 100%; }
.urun-sekmeler .raf-panel { font-size: 15px; }
.urun-sekmeler .metin { margin-top: 0; }
.kunye { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 24px; margin: 0; }
.kunye dt { color: var(--soluk); }
.kunye dd { margin: 0; overflow-wrap: anywhere; }
.teslimat { margin: 0; padding-left: 18px; }

.hesap-bag { font-weight: 600; white-space: nowrap; color: var(--metin); text-decoration: none; }
.giris-kutu { max-width: 420px; margin: 24px auto; }
.basari { color: var(--vurgu); font-weight: 600; }
.hesap-duzen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.hesap-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); }
.hesap-menu a { padding: 8px 10px; color: var(--metin); text-decoration: none; border-radius: min(var(--kose), 6px); }
.hesap-menu a:hover { background: var(--zemin); color: var(--vurgu); }
.hesap-menu form { margin: 0; padding: 8px 10px; }
.adres-kart, .siparis-satir { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 12px 16px; margin-bottom: 10px; }
.adres-kart p { margin: 4px 0 8px; }
.siparis-satir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: var(--metin); text-decoration: none; }
.siparis-satir:hover { border-color: var(--vurgu); }
.satir-ici { display: inline-block; margin: 0 0 0 10px; }
.favori-form { margin: 10px 0 0; }
.favori-oge { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.favori-oge .kart { flex: 1; }
.urun-puan { margin: 0 0 8px; font-size: 14px; color: var(--soluk); }
.urun-puan span, .yildiz { color: var(--uyari); letter-spacing: 1px; }
.yorum { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.yorum p { margin: 0 0 4px; }
.yorum .metin { margin: 0; }
.yorum-form { max-width: 520px; margin-top: 12px; }

.bildirim { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 14px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; background: var(--koyu); color: var(--koyu-yazi); border-radius: min(var(--kose), 8px); box-shadow: 0 12px 24px rgb(0 0 0 / .2); font-size: 14.5px; }
.bildirim[hidden] { display: none; }
.bildirim a { flex: none; color: var(--koyu-yazi); font-weight: 700; }
.bildirim.hatali { background: var(--hata); color: #fff; }

.adimlar { counter-reset: adim; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; }
.adimlar[hidden] { display: none; }
.adimlar li { counter-increment: adim; }
.adimlar button { width: 100%; padding: 10px 12px; text-align: left; font-weight: 600; color: var(--soluk); }
.adimlar button::before { content: counter(adim) ". "; }
.adimlar button[aria-current=step] { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.adim-dugme { display: flex; justify-content: space-between; gap: 10px; }
.adim-dugme[hidden] { display: none; }
.adim-dugme .ana { margin-left: auto; }
.marka-seridi { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); margin-bottom: 8px; }
.urun-fiyat { color: var(--vurgu); font-weight: 800; font-size: 30px; }
.alt { background: var(--koyu); border-top: 0; color: var(--koyu-soluk); }
.alt-kolon strong { color: var(--koyu-yazi); }
.alt-kolon a { color: var(--koyu-soluk); }
.alt-kolon a:hover { color: var(--koyu-yazi); }

@media (max-width: 1000px) {
  .vitrin-alani { grid-template-columns: minmax(0, 1fr); }
  .yan-kategoriler { display: none; }
  .liste-alani, .hesap-duzen { grid-template-columns: minmax(0, 1fr); }
  .filtre-kutu { padding: 0; }
  .filtre-kutu summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
  .filtre-kutu form { padding: 4px 14px 14px; }
}
@media (max-width: 760px) {
  .ust-bilgi { display: none; }
  .ust-ic { padding-block: 12px; }
  .ara { max-width: none; margin: 0; }
  .vitrin { padding: 20px 20px 26px; }
  .slayt { min-height: 0; }
  .vitrin-gorsel { order: 0; }
  .vitrin-gorsel .gorsel { max-height: 150px; }
  .slayt { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
  .slayt .vitrin-yazi { display: none; }
  .raf { padding: 12px; }
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kart { padding: 8px; }
  .guven { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guven li { padding: 10px 12px; }
  .kategori-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kategori-adet { display: none; }
  .izgara.liste .kart { flex-direction: column; align-items: stretch; gap: 8px; }
  .izgara.liste .kart-bag { grid-template-columns: 88px minmax(0, 1fr); }
  .izgara.liste .kart-islem { width: 100%; }
  .bildirim { bottom: 68px; left: 16px; right: 16px; max-width: none; justify-content: space-between; }
  .sirala { flex-basis: 100%; margin: 0; }
  .sirala select { flex: 1; }
  .satin-al .dugme { flex-basis: 100%; }
  .satin-al label { width: 100%; }
  .adimlar button { padding-inline: 8px; font-size: 14px; }
  .siparis-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}