/* =====================================================================
   VİTRİN 2 — Yeni mağaza tasarımı (7 hazır tasarım: Görünüm → Temalar)
   Renkler <head> içinde değişken olarak gelir; panelden (Renk, yazı ve stil) her biri değiştirilebilir:
   --r-yuzey --r-ust-serit --r-ust-zemin --r-menu-zemin --r-menu-yazi --r-alt-zemin --r-alt-yazi --r-fiyat --r-rozet
   Gövde sınıfları: ust-{magaza|ortali|koyu}  kart-{golgeli|cerceveli|duz}  buton-{...}
   ===================================================================== */
:root { --kap: 1320px; --yuzey: var(--r-yuzey, #fff); --vurgu-metin: var(--vurgu); }  /* --vurgu-metin: açık vurgu renklerinde yazılar için koyulaştırılmış hali */
html[data-mode="dark"] { --r-ust-zemin: var(--yuzey); --r-menu-zemin: color-mix(in srgb, var(--yuzey) 85%, #000); --r-menu-yazi: var(--metin); --r-fiyat: var(--metin); --r-ust-yazi: var(--metin); }
body { background: var(--zemin); }
.w-tam { width: 100%; }

/* ---------------- Üst şerit ---------------- */
.ust-serit { background: var(--r-ust-serit, var(--vurgu2)); color: var(--r-ust-serit-yazi, #fff); font-size: 13px; }
.ust-serit-ic { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.ust-serit a { color: inherit; opacity: .92; } .ust-serit a:hover { opacity: 1; text-decoration: underline; }
.us-mesaj { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.us-sag { display: flex; gap: 16px; align-items: center; }
.us-sosyal { font-size: 14px; }
@media (max-width: 768px) { .ust-serit-ic { justify-content: center; text-align: center; } .us-sag { display: none; } }

/* ---------------- Üst alan ---------------- */
.ust2 { background: var(--r-ust-zemin, #fff); color: var(--r-ust-yazi, var(--metin)); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--cizgi); }
.ust2-ic { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.ust2 .logo img { max-height: 52px; width: auto; }
.ust2 .logo-yazi { font-family: var(--font-baslik); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.ust2 .logo-yazi b { color: var(--vurgu-metin, var(--vurgu)); }
.arama { flex: 1; display: flex; max-width: 640px; margin: 0 auto; background: color-mix(in srgb, var(--metin) 5%, var(--yuzey)); border: 1.5px solid var(--cizgi); border-radius: var(--btn-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ust-koyu .arama { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.arama:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 16%, transparent); }
.arama input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 18px; font: inherit; font-size: 15px; color: inherit; outline: none; }
.arama input::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.arama button { border: 0; background: var(--vurgu); color: var(--vurgu-yazi); padding: 0 22px; font-size: 18px; cursor: pointer; }
.ust2-araclar { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ust2-ikon { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; height: 44px; justify-content: center; border: 0; background: transparent; color: inherit; border-radius: var(--radius); font: inherit; cursor: pointer; position: relative; padding: 0 6px; }
.ust2-ikon > i { font-size: 23px; }
.ust2-ikon:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.ust2-ikon span { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ust2-ikon small { font-size: 11.5px; opacity: .7; } .ust2-ikon b { font-size: 14px; }
.sepet-ikon { position: relative; display: inline-flex; } .sepet-ikon > i { font-size: 23px; }
.sepet-dugmesi .sepet-sayi { position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.mobil-menu-ac { display: none; }
.ust-ortali .ust2-ic { flex-wrap: wrap; justify-content: center; padding: 14px 20px 0; }
.ust-ortali .ust2 .logo { order: 1; flex: 1 1 100%; display: flex; justify-content: center; }
.ust-ortali .ust2-araclar { position: absolute; right: 20px; top: 14px; }
.ust-ortali .arama { order: 2; flex: 1 1 100%; max-width: 560px; margin: 4px auto 14px; }
.ust-ortali .ust2-ic { position: relative; }
@media (max-width: 991px) {
  .ust2-ic { gap: 10px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .mobil-menu-ac { display: inline-flex; order: 0; }
  .ust2 .logo { order: 1; flex: 1; } .ust2 .logo img { max-height: 38px; }
  .ust2-araclar { order: 2; } .ust2-tel span, .sepet-yazi { display: none !important; }
  .arama { order: 3; flex: 1 1 100%; margin: 0; }
  .ust-ortali .ust2-araclar { position: static; } .ust-ortali .ust2 .logo { flex: 1; justify-content: flex-start; order: 1; }
}

/* ---------------- Menü çubuğu ve mega menü ---------------- */
.menu-cubugu { background: var(--r-menu-zemin, var(--yuzey)); color: var(--r-menu-yazi, var(--metin)); border-bottom: 1px solid var(--cizgi); position: relative; z-index: 55; }
.menu-cubugu-ic { display: flex; align-items: stretch; gap: 6px; min-height: 52px; }
.mega { display: flex; }
.mega-dugme { display: flex; align-items: center; gap: 10px; border: 0; background: var(--vurgu); color: var(--vurgu-yazi); font: inherit; font-weight: 700; padding: 0 20px; cursor: pointer; border-radius: 0; }
.ust-ortali .mega-dugme, .kart-duz .mega-dugme { background: transparent; color: inherit; }
.mega-dugme .bi-chevron-down { font-size: 12px; transition: transform .2s; } .mega-dugme[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--yuzey); color: var(--metin); box-shadow: 0 24px 50px rgba(15,23,42,.18); border-top: 3px solid var(--vurgu); }
.mega-izgara { max-width: var(--kap); margin: 0 auto; padding: 26px 20px 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 28px; max-height: 70vh; overflow: auto; }
.mega-baslik { display: flex; align-items: center; gap: 10px; font-weight: 800; font-family: var(--font-baslik); margin-bottom: 8px; }
.mega-baslik img { width: 40px; height: 40px; object-fit: cover; border-radius: calc(var(--radius) * .6); }
.mega-baslik:hover { color: var(--vurgu-metin, var(--vurgu)); }
.mega-kolon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mega-kolon li a { color: var(--soluk); font-size: 14.5px; } .mega-kolon li a:hover { color: var(--vurgu-metin, var(--vurgu)); }
.menu-ogeler { list-style: none; display: flex; margin: 0; padding: 0; gap: 2px; flex-wrap: wrap; }
.menu-oge { position: relative; display: flex; }
.menu-oge > a { display: flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 600; font-size: 15px; border-bottom: 3px solid transparent; }
.menu-oge > a:hover, .menu-oge:focus-within > a { border-bottom-color: var(--vurgu); }
.menu-oge > a .bi-chevron-down { font-size: 11px; }
.menu-alt { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--yuzey); color: var(--metin); list-style: none; margin: 0; padding: 8px; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(15,23,42,.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; }
.menu-oge:hover .menu-alt, .menu-oge:focus-within .menu-alt { opacity: 1; visibility: visible; transform: none; }
.menu-alt a { display: block; padding: 9px 12px; border-radius: calc(var(--radius) * .6); } .menu-alt a:hover { background: var(--vurgu-ince); color: var(--vurgu-metin, var(--vurgu)); }
@media (max-width: 991px) { .menu-cubugu { display: none; } }

/* ---------------- Çekmeceler (mobil menü, mini sepet) ---------------- */
.cekmece-arka { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 90; animation: belir .2s; }
.mobil-cekmece, .mini-sepet { position: fixed; top: 0; bottom: 0; width: min(380px, 92vw); background: var(--yuzey); color: var(--metin); z-index: 95; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,.25); }
.mobil-cekmece { left: 0; animation: soldan .25s ease; padding-bottom: 16px; } .mini-sepet { right: 0; animation: sagdan .25s ease; }
@keyframes soldan { from { transform: translateX(-100%); } } @keyframes sagdan { from { transform: translateX(100%); } } @keyframes belir { from { opacity: 0; } }
.cekmece-bas { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); font-size: 17px; }
.mobil-cekmece .arama { margin: 14px 16px; flex: 0 0 auto; }
.cekmece-liste { overflow: auto; flex: 1; padding: 0 16px; display: flex; flex-direction: column; }
.cekmece-liste > a, .cekmece-liste summary { padding: 13px 4px; border-bottom: 1px solid var(--cizgi); font-weight: 600; cursor: pointer; }
.cekmece-liste a.alt { padding-left: 20px; font-weight: 400; color: var(--soluk); }
.cekmece-liste details a { display: block; padding: 10px 16px; color: var(--soluk); }
.cekmece-ara-baslik { padding: 18px 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--soluk); }
.mobil-cekmece > .dugme { margin: 12px 16px 0; width: auto; }
.kargo-cubugu { padding: 14px 16px; background: var(--vurgu-ince); font-size: 14px; font-weight: 600; }
.kc-iz { height: 7px; background: color-mix(in srgb, var(--metin) 10%, transparent); border-radius: 9px; margin-top: 8px; overflow: hidden; } .kc-iz div { height: 100%; background: var(--vurgu); border-radius: 9px; }
.ms-liste { flex: 1; overflow: auto; padding: 8px 16px; }
.ms-satir { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.ms-gorsel { width: 64px; height: 64px; flex: 0 0 64px; border-radius: calc(var(--radius) * .7); overflow: hidden; background: color-mix(in srgb, var(--metin) 5%, var(--yuzey)); }
.ms-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.ms-bilgi { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .ms-bilgi small { color: var(--soluk); }
.ms-bos { text-align: center; color: var(--soluk); padding: 40px 0; display: grid; gap: 10px; } .ms-bos i { font-size: 40px; }
.ms-alt { border-top: 1px solid var(--cizgi); padding: 14px 16px 18px; display: grid; gap: 10px; }

/* ---------------- Bölüm başlıkları ---------------- */
.bolum { padding: 44px 20px 4px; }
.bolum-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.bolum-ust-baslik { display: block; color: var(--vurgu-metin, var(--vurgu)); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.bolum-baslik { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.bolum-arac { display: flex; align-items: center; gap: 8px; } .bolum-arac > a { color: var(--vurgu-metin, var(--vurgu)); font-weight: 700; margin-right: 6px; white-space: nowrap; }
.kaydir-ok { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin); cursor: pointer; display: grid; place-items: center; }
.kaydir-ok:hover { border-color: var(--vurgu-metin, var(--vurgu)); color: var(--vurgu-metin, var(--vurgu)); }

/* ---------------- Ürün kartı ---------------- */
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.urun-kaydirma { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; }
.urun-kaydirma::-webkit-scrollbar { display: none; } .urun-kaydirma > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .urun-kaydirma { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 760px) { .urun-kaydirma { grid-auto-columns: 46%; gap: 12px; } .urun-izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kaydir-ok { display: none; } }
.urun-kart { background: var(--yuzey); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: transform .2s, box-shadow .2s; }
.kart-golgeli .urun-kart { box-shadow: var(--golge); } .kart-golgeli .urun-kart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.12); }
.kart-cerceveli .urun-kart { border: 1.5px solid var(--cizgi); } .kart-cerceveli .urun-kart:hover { border-color: var(--vurgu); }
.kart-duz .urun-kart { background: transparent; border-radius: 0; } .kart-duz .uk-gorsel { border-radius: var(--radius); }
.uk-gorsel { position: relative; aspect-ratio: 1; background: color-mix(in srgb, var(--metin) 4%, var(--yuzey)); display: grid; place-items: center; overflow: hidden; }
.uk-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.urun-kart:hover .uk-gorsel img { transform: scale(1.05); }
.uk-gorsel > i { font-size: 42px; color: var(--soluk); }
.uk-rozet { position: absolute; top: 12px; left: 12px; background: var(--r-rozet, #e11d48); color: var(--r-rozet-yazi, #fff); font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: calc(var(--radius) * .6); }
.uk-etiket { position: absolute; top: 12px; right: 12px; background: var(--yuzey); color: var(--metin); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.uk-govde { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kart-duz .uk-govde { padding: 12px 2px 6px; }
.uk-kategori { font-size: 12.5px; color: var(--soluk); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.uk-ad { font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.uk-ad a:hover { color: var(--vurgu-metin, var(--vurgu)); }
.uk-fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.uk-fiyat strong { font-size: 19px; color: var(--r-fiyat, var(--metin)); font-weight: 800; }
.uk-fiyat del { color: var(--soluk); font-size: 14px; }
.uk-dugme { margin-top: 8px; padding: 10px 14px; font-size: 14px; width: 100%; }
.urun-kart.kapali { opacity: .65; }
@media (max-width: 760px) { .uk-govde { padding: 10px 10px 12px; } .uk-ad { font-size: 14px; } .uk-fiyat strong { font-size: 16px; } .uk-dugme { padding: 8px 10px; font-size: 13px; } }

/* ---------------- Slider, kategori kartları, tanıtım, kayan yazı ---------------- */
.slider { border-radius: var(--radius); overflow: hidden; }
.slider .slide img { width: 100%; aspect-ratio: 1320 / 480; object-fit: cover; }
@media (max-width: 640px) { .slider .slide img { aspect-ratio: 4 / 3; } }
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.kategori-kart { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--yuzey); display: block; }
.kart-cerceveli .kategori-kart { border: 1.5px solid var(--cizgi); } .kart-golgeli .kategori-kart { box-shadow: var(--golge); }
.kategori-gorsel { display: grid; place-items: center; aspect-ratio: 1; background: var(--vurgu-ince); overflow: hidden; }
.kategori-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .kategori-kart:hover .kategori-gorsel img { transform: scale(1.06); }
.kategori-gorsel span { font-size: 42px; font-weight: 800; color: var(--vurgu-metin, var(--vurgu)); font-family: var(--font-baslik); }
.kategori-ad { display: block; padding: 12px; text-align: center; font-weight: 700; }
.kategori-kart:hover .kategori-ad { color: var(--vurgu-metin, var(--vurgu)); }
.tanitim { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; display: flex; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--vurgu2) 70%, #0b1020), color-mix(in srgb, var(--vurgu) 45%, #0b1020)); color: #fff; }
.tanitim > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tanitim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 70%); }
.tanitim-sag::after { background: linear-gradient(270deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 70%); }
.tanitim.gorselsiz::after { display: none; }
.tanitim-yazi { position: relative; z-index: 1; max-width: 540px; padding: 40px clamp(24px, 5vw, 64px); display: grid; gap: 12px; justify-items: start; }
.tanitim-sag .tanitim-yazi { margin-left: auto; }
.tanitim-yazi h2, .tanitim-yazi h1 { font-size: clamp(26px, 3.6vw, 42px); margin: 0; color: #fff; }
.tanitim-yazi p { margin: 0; opacity: .92; font-size: 17px; }
.tanitim-etiket { background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; letter-spacing: .06em; }
.kayan-yazi { background: var(--vurgu); color: var(--vurgu-yazi); overflow: hidden; margin-top: 44px; padding: 14px 0; font-family: var(--font-baslik); font-weight: 800; font-size: clamp(16px, 2vw, 22px); text-transform: uppercase; letter-spacing: .02em; }
.ky-serit { display: flex; width: max-content; animation: kay 28s linear infinite; }
.hiz-yavas .ky-serit { animation-duration: 45s; } .hiz-hizli .ky-serit { animation-duration: 16s; }
.ky-grup { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; } .ky-grup i { font-size: .7em; opacity: .7; }
@keyframes kay { to { transform: translateX(-50%); } }
.kayan-yazi:hover .ky-serit { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ky-serit { animation: none; } }
.metin-govde.katlanir { max-height: 190px; overflow: hidden; position: relative; }
.metin-govde.katlanir::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--zemin)); }
.metin-govde.katlanir.acik { max-height: none; } .metin-govde.katlanir.acik::after { display: none; }
.devami { margin-top: 10px; }

/* ---------------- Güven şeridi ve alt alan ---------------- */
.guven-serit { background: var(--yuzey); border-top: 1px solid var(--cizgi); margin-top: 56px; }
.guven-serit-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 28px 20px; }
.gs-oge { display: flex; gap: 14px; align-items: center; } .gs-oge > i { font-size: 30px; color: var(--vurgu-metin, var(--vurgu)); width: 54px; height: 54px; border-radius: 50%; background: var(--vurgu-ince); display: grid; place-items: center; flex: 0 0 54px; }
.gs-oge b { display: block; font-size: 15.5px; } .gs-oge span { color: var(--soluk); font-size: 13.5px; }
.alt2 { background: var(--r-alt-zemin, #111827); color: var(--r-alt-yazi, #cbd5e1); }
.alt2-ust { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; padding-top: 52px; padding-bottom: 40px; }
@media (max-width: 900px) { .alt2-ust { grid-template-columns: 1fr 1fr; } .alt2-marka { grid-column: 1 / -1; } }
@media (max-width: 520px) { .alt2-ust { grid-template-columns: 1fr; } }
.alt2 .logo img { max-height: 48px; width: auto; } .alt2 .logo-yazi { font-family: var(--font-baslik); font-size: 24px; font-weight: 800; color: inherit; }
.alt2-marka p { opacity: .85; font-size: 14.5px; line-height: 1.7; margin: 14px 0; }
.alt2-iletisim { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .alt2-iletisim i { color: var(--vurgu); font-size: 18px; } .alt2-iletisim b { font-size: 16px; }
.alt2-adres { display: flex; gap: 8px; font-size: 14px; }
.alt2 .sosyal { display: flex; gap: 8px; margin-top: 14px; } .alt2 .sosyal a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.alt2 .sosyal a:hover { background: var(--vurgu); color: var(--vurgu-yazi); }
.alt2-kolon h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; color: inherit; opacity: .7; }
.alt2-kolon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .alt2-kolon a:hover { color: var(--vurgu); }
.alt2-alt { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.alt2-alt-ic { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; }
.odeme-rozetleri { display: flex; gap: 6px; flex-wrap: wrap; } .odeme-rozetleri span { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.wa-sabit { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #1faa59; color: #fff; display: grid; place-items: center; font-size: 28px; box-shadow: 0 10px 26px rgba(31,170,89,.45); z-index: 80; transition: transform .2s; }
.wa-sabit:hover { transform: scale(1.08); }
body.mobil-cubuklu .wa-sabit { bottom: 84px; }

/* Tasarıma özel küçük dokunuşlar */
.tema-bayi_spor h1, .tema-bayi_spor h2, .tema-bayi_spor h3, .tema-merkez_endustri h1, .tema-merkez_endustri h2, .tema-merkez_endustri .bolum-baslik { text-transform: uppercase; letter-spacing: .01em; }
.tema-bayi_spor .uk-rozet { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 14px; }
.tema-bayi_garaj .urun-kart { border: 1px solid rgba(56,189,248,.18); } .tema-bayi_garaj .urun-kart:hover { box-shadow: 0 0 0 1px var(--vurgu), 0 18px 40px rgba(56,189,248,.18); }
.tema-bayi_sade .uk-dugme { background: transparent; color: var(--metin); border-color: var(--metin); }
.tema-bayi_sade .uk-dugme:hover { background: var(--metin); color: var(--zemin); }
/* Koyu yüzeylerde (koyu üst alan, alt alan) vurgu yazıları parlak kalsın */
.ust-koyu .ust2 { --vurgu-metin: var(--vurgu); } .alt2 { --vurgu-metin: var(--vurgu); }
.ust-koyu .ust2 .logo-yazi b { color: var(--vurgu); }
/* Koyu zeminli banner: ana renk çok koyuysa (siyah, lacivert) buton ve etiket beyaz olur */
.tanitim .dugme, .tanitim-etiket { background: var(--koyu-zemin-dugme, var(--vurgu)); color: var(--koyu-zemin-dugme-yazi, var(--vurgu-yazi)); border-color: var(--koyu-zemin-dugme, var(--vurgu)); }
@media (max-width: 991px) { .ust-ortali .arama { order: 3; } }

/* Sepet / sipariş özeti: içerik kart genişliğini aşmasın (kupon kutusu sütunu genişletiyordu) */
.sepet-ozet { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sepet-duzen > * { min-width: 0; }
.ozet-satir, .ozet-urun { align-items: baseline; } .ozet-satir > span, .ozet-urun > span { min-width: 0; overflow-wrap: anywhere; }
.ozet-satir > b, .ozet-urun > b { white-space: nowrap; text-align: right; flex-shrink: 0; }
.kupon-satir input { width: 100%; } .kupon-satir .dugme { flex-shrink: 0; padding-left: 16px; padding-right: 16px; }
/* Sepet kapalıyken seçenek adları: tıklanınca o seçeneğin görseli galeride görünür */
button.varyant { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--metin); cursor: pointer; }
button.varyant:hover { border-color: var(--vurgu); }
button.varyant[aria-pressed="true"] { border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 20%, transparent); }