/* =====================================================================
   10binbakimi — Genel stil (stil.css)
   TUM renkler tema.css degiskenlerinden gelir. Duz #hex YASAK.
   ===================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: var(--font-govde); font-size: 15px; line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-baslik); font-weight: 500; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.kap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Ust bar ---------- */
.ustbar { background: var(--kart); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 50; }
.ustbar-ic { display: flex; align-items: center; gap: 16px; height: 60px; }
.logo { font-family: var(--font-baslik); font-weight: 600; font-size: 20px; color: var(--renk-ana); white-space: nowrap; }
.logo b { color: var(--renk-vurgu); font-weight: 600; }
.ust-arama { flex: 1; max-width: 460px; }
.ust-arama input {
  width: 100%; font-family: var(--font-govde); font-size: 14px;
  padding: 9px 14px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk);
  background: var(--zemin); color: var(--metin); outline: none;
}
.ust-arama input:focus { border-color: var(--renk-ana); background: var(--kart); }
.ust-menu { display: flex; gap: 14px; margin-left: auto; }
.ust-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--metin-soluk); }
.ust-link:hover { color: var(--renk-ana); }
.ust-link svg { width: 20px; height: 20px; }

/* ---------- Kategori nav ---------- */
.ust-nav { border-top: 1px solid var(--cizgi); background: var(--kart); }
.ust-nav-ic { display: flex; align-items: center; gap: 20px; height: 42px; overflow-x: auto; }
.ust-nav-ic a { font-size: 13.5px; color: var(--metin-soluk); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ust-nav-ic a:hover { color: var(--renk-ana); }
.ust-nav-ic a svg { width: 17px; height: 17px; }
.nav-birincil { color: var(--renk-ana) !important; font-weight: 500; }
.nav-bosluk { flex: 1; }
.nav-guven { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--renk-ana-koyu); white-space: nowrap; }
.nav-guven svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .nav-guven { display: none; } }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-govde); font-weight: 500; font-size: 14px;
  border: none; border-radius: var(--kose-kucuk); padding: 11px 18px; cursor: pointer;
  transition: background .15s;
}
.btn-ana { background: var(--renk-ana); color: var(--renk-ana-metin); }
.btn-ana:hover { background: var(--renk-ana-koyu); }
.btn-vurgu { background: var(--renk-vurgu); color: var(--renk-vurgu-metin); }
.btn-vurgu:hover { filter: brightness(.95); }
.btn-cizgili { background: transparent; color: var(--renk-ana); border: 1px solid var(--renk-ana); }
.btn-cizgili:hover { background: var(--renk-ana-ton); }

/* ---------- Hero slider ---------- */
.slider { position: relative; overflow: hidden; }
.slide { display: none; padding: 34px 0 40px; }
.slide-aktif { display: block; animation: slide-gir .45s ease; }
@keyframes slide-gir { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.slide-yesil { background: linear-gradient(115deg, var(--renk-ana-koyu), var(--renk-ana)); }
.slide-amber { background: linear-gradient(115deg, #d97a1e, var(--renk-vurgu)); }
.slide-koyu  { background: linear-gradient(115deg, #14211d, var(--renk-ana-koyu)); }
.slide-ic { display: flex; align-items: center; gap: 24px; }
.slide-metin { flex: 1 1 300px; }
.slide-etiket { display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-size: 12px;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; letter-spacing: .03em; }
.slide h1 { color: #fff; font-size: 26px; line-height: 1.25; margin-bottom: 8px; }
.slide p { color: rgba(255,255,255,.88); font-size: 14.5px; max-width: 480px; margin: 0 0 16px; }
.slide-cizim { flex: 0 0 auto; }
.slide-gorsel img { max-width: 220px; max-height: 150px; border-radius: var(--kose); object-fit: cover; display: block; }
.btn-koyu { background: #2b1a08; color: #fff; }
.btn-koyu:hover { background: #1c1105; }
.slider-noktalar { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.nokta { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.45); padding: 0; }
.nokta-aktif { background: #fff; width: 22px; border-radius: 6px; }
@media (max-width: 700px) { .slide-cizim { display: none; } .slide h1 { font-size: 21px; } }

/* ---------- VIN sabit seridi ---------- */
.vin-serit { background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.vin-serit-ic { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.vin-baslik { display: flex; align-items: center; gap: 8px; font-family: var(--font-baslik); font-weight: 500;
  font-size: 14px; color: var(--renk-ana-koyu); white-space: nowrap; }
.vin-baslik svg { width: 22px; height: 22px; color: var(--renk-ana); }
.vin-serit .serit-form { flex: 1 1 380px; }
.vin-serit .serit-form input { border: 1px solid var(--cizgi); background: var(--zemin); }
.vin-serit .serit-form input:focus { border-color: var(--renk-ana); background: #fff; box-shadow: none; }

/* ---------- Arac secim seridi ---------- */
.serit { background: var(--renk-ana); padding: 26px 0; }
.serit-ic { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.serit h1 { color: var(--renk-ana-metin); font-size: 20px; flex: 1 1 260px; }
.serit p  { color: var(--renk-ana-metin); opacity: .85; margin: 4px 0 0; font-size: 13.5px; }
.serit-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 380px; }
.serit-form input, .serit-form select {
  flex: 1 1 160px; font-family: var(--font-govde); font-size: 14px;
  padding: 11px 14px; border: none; border-radius: var(--kose-kucuk);
  background: var(--kart); color: var(--metin); outline: none;
}

/* ---------- Hero ---------- */
.serit-hero { padding: 30px 0 26px; }
.serit-hero .serit-ic { align-items: center; }
.hero-metin { flex: 1 1 300px; }
.hero-metin h1 { font-size: 26px; line-height: 1.25; }
.hero-metin p { font-size: 14.5px; max-width: 460px; line-height: 1.55; }
.hero-metin b { color: #fff; }
.hero-cizim { width: 200px; height: 120px; flex: 0 0 auto; opacity: .95; }
@media (max-width: 700px) { .hero-cizim { display: none; } .hero-metin h1 { font-size: 21px; } }

/* ---------- 3 adim bandi ---------- */
.adimlar { background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.adimlar-ic { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 16px; flex-wrap: wrap; }
.adim { display: flex; align-items: center; gap: 10px; }
.adim-no {
  width: 30px; height: 30px; border-radius: 50%; background: var(--renk-ana-ton); color: var(--renk-ana-koyu);
  font-family: var(--font-baslik); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.adim h3 { font-size: 13.5px; }
.adim p { margin: 0; font-size: 12px; color: var(--metin-soluk); }
.adim-ok { color: var(--renk-ana-acik); font-size: 18px; }
@media (max-width: 640px) { .adim-ok { display: none; } .adimlar-ic { gap: 12px; } }

/* ---------- Bolum basliklari ---------- */
.bolum { padding: 28px 0 8px; }
.bolum-baslik { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bolum-baslik h2 { font-size: 19px; }
.bolum-baslik a { font-size: 13.5px; color: var(--renk-ana); }

/* ---------- Set / urun kartlari ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 14px; box-shadow: var(--golge-kart); display: flex; flex-direction: column;
}
.kart-gorsel {
  background: var(--renk-ana-ton); border-radius: var(--kose-kucuk); height: 120px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.kart-gorsel svg { width: 48px; height: 48px; color: var(--renk-ana); opacity: .55; }
.kart h3 { font-size: 15px; margin-bottom: 6px; line-height: 1.4; }
.kart-alt { margin-top: auto; }
.fiyat-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.fiyat { font-family: var(--font-baslik); font-weight: 600; font-size: 18px; }

/* ---------- Rozetler ---------- */
.rozet { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.rozet-ok    { background: var(--basari-ton); color: var(--basari-metin); }
.rozet-hayir { background: var(--uyari-ton);  color: var(--uyari-metin); }
.rozet-notr  { background: var(--zemin); color: var(--metin-soluk); border: 1px solid var(--cizgi); }

/* ---------- Marka seridi ---------- */
.marka-serit { background: var(--kart); border-block: 1px solid var(--cizgi); margin-top: 26px; }
.marka-serit-ic { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.marka-etiket { font-size: 12.5px; color: var(--metin-soluk); margin-right: 6px; }
.marka-rozet {
  font-family: var(--font-baslik); font-weight: 600; font-size: 13px; letter-spacing: .06em;
  color: var(--metin-soluk); border: 1px solid var(--cizgi); border-radius: 8px; padding: 6px 14px;
}

/* ---------- CTA bandi ---------- */
.cta-band { background: var(--renk-ana); margin-top: 28px; }
.cta-band-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 16px; flex-wrap: wrap; }
.cta-band h2 { color: var(--renk-ana-metin); font-size: 19px; }
.cta-band p { color: var(--renk-ana-metin); opacity: .85; margin: 4px 0 0; font-size: 13.5px; }

/* ---------- Kart rozet (gorsel ustu) ---------- */
.kart { position: relative; }
.kart-rozet { position: absolute; top: 22px; left: 22px; z-index: 2; }
.btn-kucuk { padding: 8px 12px; font-size: 12.5px; }
.grid-parca { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- Guven bandi ---------- */
.guven { background: var(--kart); border-block: 1px solid var(--cizgi); margin-top: 28px; }
.guven-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 22px 0; }
.guven-madde { display: flex; gap: 12px; align-items: flex-start; }
.guven-madde svg { width: 26px; height: 26px; color: var(--renk-ana); flex-shrink: 0; margin-top: 2px; }
.guven-madde h3 { font-size: 14.5px; margin-bottom: 2px; }
.guven-madde p { margin: 0; font-size: 13px; color: var(--metin-soluk); }

/* ---------- Alt bilgi ---------- */
.altbilgi { background: var(--kart); border-top: 1px solid var(--cizgi); margin-top: 40px; }
.altbilgi-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding: 30px 16px; }
.alt-blok h4 { font-size: 14px; margin-bottom: 10px; }
.alt-blok a { display: block; font-size: 13.5px; color: var(--metin-soluk); padding: 3px 0; }
.alt-blok a:hover { color: var(--renk-ana); }
.logo-alt { font-size: 18px; margin-bottom: 8px; }
.alt-aciklama { font-size: 13px; color: var(--metin-soluk); margin: 0; max-width: 260px; }
.alt-serit { border-top: 1px solid var(--cizgi); }
.alt-serit-ic { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; font-size: 12.5px; color: var(--metin-soluk); }

/* ---------- Arac secim formu ---------- */
.secim-form { padding: 16px 18px; }
.secim-satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.secim-satir label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--metin-soluk); flex: 1 1 150px; }
.secim-satir select, .secim-satir input {
  font-family: var(--font-govde); font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk);
  background: var(--kart); color: var(--metin); outline: none;
}
.secim-satir select:focus, .secim-satir input:focus { border-color: var(--renk-ana); }
.secim-satir select:disabled, .secim-satir input:disabled { background: var(--zemin); color: var(--metin-soluk); }
.secim-satir .btn { flex: 0 0 auto; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Bakim listesi (akordeon) ---------- */
.akordeon { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); overflow: hidden; }
.durak { border-bottom: 1px solid var(--cizgi); }
.durak:last-child { border-bottom: none; }
.durak summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.durak summary::-webkit-details-marker { display: none; }
.durak-km { font-family: var(--font-baslik); font-weight: 500; }
.durak-ozet { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--metin-soluk); }
.durak-acik summary { background: var(--renk-ana-ton); }
.durak-acik .durak-km { color: var(--renk-ana-koyu); }
.durak-ic { padding: 4px 18px 16px; }
.parca-listesi { list-style: none; margin: 0; padding: 0; }
.parca-listesi li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--cizgi); font-size: 14px; flex-wrap: wrap;
}
.parca-listesi li:last-child { border-bottom: none; }
.parca-urun { font-size: 13px; color: var(--metin-soluk); }
.parca-urun b { color: var(--metin); font-weight: 500; }
.durak-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.durak-alt .fiyat { font-size: 16px; }

/* ---------- Set detay (marka secimi) ---------- */
.set-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.set-kalemler { display: flex; flex-direction: column; gap: 14px; }
.kalem-kart { border: 1px solid var(--cizgi); margin: 0; padding: 6px 16px 12px; }
.kalem-baslik { font-family: var(--font-baslik); font-weight: 500; font-size: 15px; padding: 0 8px; }
.secenek {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px;
  border-bottom: 1px dashed var(--cizgi); cursor: pointer; font-size: 14px;
}
.secenek:last-child { border-bottom: none; }
.secenek input { accent-color: var(--renk-ana); width: 17px; height: 17px; flex-shrink: 0; }
.secenek-ad { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secenek-fiyat { font-weight: 500; white-space: nowrap; }
.secenek-yok { opacity: .55; cursor: not-allowed; }
.set-ozet { padding: 16px 18px; position: sticky; top: 76px; }
.set-ozet h3 { font-size: 16px; margin-bottom: 6px; }
.ozet-arac { font-size: 13px; color: var(--metin-soluk); margin: 0 0 12px; }
.ozet-toplam {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 0; border-block: 1px solid var(--cizgi); margin-bottom: 14px;
}
.ozet-toplam .fiyat { font-size: 22px; }
.ozet-not { font-size: 12.5px; color: var(--metin-soluk); margin: 10px 0 0; }
@media (max-width: 760px) {
  .set-duzen { grid-template-columns: 1fr; }
  .set-ozet { position: static; }
}


/* ---------- Guvenlik: SVG asla kutusundan tasamaz ---------- */
.kart-gorsel svg, .sepet-gorsel svg, .gorsel-dolu img { max-width: 100%; max-height: 100%; }
svg { flex-shrink: 0; }

/* ---------- Gorseller ---------- */
.gorsel-dolu { background: var(--kart); overflow: hidden; }
.gorsel-dolu img { width: 100%; height: 100%; object-fit: contain; }
.sepet-gorsel { background: var(--renk-ana-ton); border-radius: var(--kose-kucuk); width: 72px; min-width: 72px; height: 60px; min-height: 60px; max-width: 72px; max-height: 60px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sepet-gorsel svg { width: 30px; height: 30px; color: var(--renk-ana); opacity: .55; }

/* ---------- Hero dokusu ---------- */
.serit { position: relative; overflow: hidden; }
.serit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60h40M80 60h40M60 0v40M60 80v40' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='16' fill='none' stroke='%23ffffff' stroke-opacity='.10'/%3E%3C/svg%3E");
}
.serit .kap { position: relative; }

/* ---------- Sepet ---------- */
.sepet-satir { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.sepet-bilgi { flex: 1 1 200px; min-width: 0; }
.sepet-bilgi h3 { font-size: 14.5px; margin-bottom: 4px; }
.sepet-adet input { width: 68px; font-family: var(--font-govde); font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); text-align: center; }
.sepet-fiyat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sepet-fiyat .fiyat { font-size: 16px; }
.sepet-sil { background: none; border: none; color: var(--metin-soluk); font-size: 12.5px; cursor: pointer;
  text-decoration: underline; padding: 0; font-family: var(--font-govde); }
.sepet-sil:hover { color: var(--uyari); }
.sepet-sayac { background: var(--renk-vurgu); color: var(--renk-vurgu-metin); font-size: 11px;
  font-weight: 500; border-radius: 10px; padding: 1px 6px; margin-left: 2px; }

/* ---------- Formlar ---------- */
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 620px) { .form-izgara { grid-template-columns: 1fr; } }
.form-izgara label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--metin-soluk); }
.form-izgara input, .form-izgara textarea { font-family: var(--font-govde); font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--kart); color: var(--metin);
  outline: none; resize: vertical; }
.form-izgara input:focus, .form-izgara textarea:focus { border-color: var(--renk-ana); }
.form-genis { grid-column: 1 / -1; }
.uyari-kutu { background: var(--uyari-ton); color: var(--uyari-metin); border-radius: var(--kose-kucuk);
  padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.ozet-liste { list-style: none; margin: 0 0 4px; padding: 0; font-size: 13px; }
.ozet-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px dashed var(--cizgi); }
.ozet-liste li:last-child { border-bottom: none; }
.ozet-urun { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ozet-urun small { color: var(--metin-soluk); font-size: 12px; }
.ozet-tutar { font-weight: 500; white-space: nowrap; }

/* ---------- Icerik sayfalari ---------- */
.icerik-sayfa { padding: 22px 24px; max-width: 760px; }
.icerik-sayfa p { margin: 0 0 14px; }
.icerik-sayfa p:last-child { margin-bottom: 0; }

/* ---------- Cila: gecisler ve durumlar ---------- */
.kart { transition: box-shadow .15s, transform .15s; }
.grid .kart:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
.btn { transition: background .15s, filter .15s, transform .05s; }
.btn:active { transform: scale(.98); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--renk-ana); outline-offset: 2px; border-radius: 4px;
}
.durak summary { position: relative; padding-right: 40px; transition: background .15s; }
.durak summary:hover { background: var(--zemin); }
.durak-acik summary:hover { background: var(--renk-ana-ton); }
.durak summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--metin-soluk); border-bottom: 2px solid var(--metin-soluk);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.durak[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.secenek { border-radius: var(--kose-kucuk); transition: background .12s; }
.secenek:hover { background: var(--zemin); }
.serit-form input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* ---------- Paket mozaigi (set sol panel) ---------- */
.paket-mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 14px; }
.mozaik-karo { margin: 0; }
.mozaik-gorsel { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk);
  height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mozaik-gorsel img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.mozaik-karo figcaption { font-size: 10.5px; color: var(--metin-soluk); text-align: center;
  margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.mozaik-not { font-size: 12px; color: var(--metin-soluk); text-align: center; margin: 8px 0 0; }
.paket-gorsel .kart-rozet { top: -8px; left: -8px; }

/* ---------- Sepette set mozaigi: sabit alan, 2 sutun, adete gore dolum ---------- */
.sepet-mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  width: 116px; height: 156px; flex-shrink: 0; }
.sepet-mozaik-karo { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
.sepet-mozaik-karo img { width: 100%; height: 100%; object-fit: contain; }
.sepet-mozaik-karo:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .sepet-mozaik { width: 96px; height: 128px; } }

/* ---------- Sepette set satiri ---------- */
.sepet-set { border-left: 3px solid var(--renk-ana); border-radius: 0 var(--kose) var(--kose) 0; }
.set-icerik-mini { list-style: none; margin: 6px 0 0; padding: 0; }
.set-icerik-mini li { font-size: 12px; color: var(--metin-soluk); padding: 1px 0; }
.set-icerik-mini li::before { content: "— "; }
.sepet-fiyat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ---------- Hazir paket (A duzeni) ---------- */
.hazir-paket { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .hazir-paket { grid-template-columns: 1fr; } }
.paket-gorsel { position: relative; }
.paket-sag h1 { font-size: 21px; margin-bottom: 4px; }
.paket-icerik { border-top: 1px solid var(--cizgi); }
.icerik-satir { border-bottom: 1px solid var(--cizgi); padding: 10px 0; }
.satir-ust { display: flex; align-items: center; gap: 12px; }
.satir-kucuk-gorsel { width: 44px; height: 44px; border-radius: 8px; background: var(--renk-ana-ton);
  flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.satir-kucuk-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.satir-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.satir-kalem { font-size: 11.5px; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .04em; }
.satir-urun { font-size: 13.5px; font-weight: 500; }
.satir-fiyat { font-size: 14px; white-space: nowrap; }
.degistir-btn { background: none; border: none; color: var(--renk-ana); font-family: var(--font-govde);
  font-size: 12.5px; cursor: pointer; padding: 4px 6px; text-decoration: underline; white-space: nowrap; }
.degistir-btn:hover { color: var(--renk-ana-koyu); }
.satir-secenekler { margin-top: 10px; background: var(--zemin); border: 1px dashed var(--cizgi);
  border-radius: var(--kose-kucuk); padding: 6px 10px; }
.mini-secenek { display: flex; align-items: center; gap: 10px; padding: 8px 4px; cursor: pointer;
  border-bottom: 1px dashed var(--cizgi); }
.mini-secenek:last-child { border-bottom: none; }
.mini-secenek input { accent-color: var(--renk-ana); }
.mini-secenek-gorsel { width: 34px; height: 34px; border-radius: 6px; background: var(--renk-ana-ton);
  overflow: hidden; flex-shrink: 0; }
.mini-secenek-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.mini-secenek-ad { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-secenek-fiyat { font-size: 13px; font-weight: 500; white-space: nowrap; }
.secenek-yok { opacity: .5; }

/* ---------- Set kalem secimi (dropdown + onizleme) ---------- */
.kalem-satir { padding: 16px 18px; margin-bottom: 12px; }
.kalem-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kalem-baslik { font-size: 14.5px; color: var(--renk-ana-koyu); }
.kalem-secim { font-family: var(--font-govde); font-size: 13.5px; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--kart);
  min-width: 260px; max-width: 100%; cursor: pointer; }
.kalem-secim:focus { border-color: var(--renk-ana); outline: none; }
.kalem-onizleme { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  background: var(--zemin); border: 1px dashed var(--cizgi); border-radius: var(--kose-kucuk); padding: 10px 12px; }
.onizleme-gorsel { width: 56px; height: 56px; border-radius: 8px; background: var(--renk-ana-ton);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.onizleme-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.onizleme-bilgi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.onizleme-fiyat { font-size: 15px; }
@media (max-width: 560px) { .kalem-ust { flex-direction: column; align-items: stretch; } .kalem-secim { min-width: 0; } }

/* ---------- Set detay ekleri ---------- */
.set-ozet-gorsel { background: var(--renk-ana-ton); border-radius: var(--kose-kucuk); height: 130px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; }
.set-ozet-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.eski-fiyat { color: var(--metin-soluk); font-size: 14px; margin-right: 8px; }

/* ---------- Yorumlar ---------- */
.yorum-kart { padding: 14px 16px; margin-bottom: 10px; }
.yorum-kart p { margin: 8px 0 0; font-size: 14px; }
.yorum-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yildizlar { color: var(--renk-vurgu); letter-spacing: 2px; font-size: 14px; }
.mini-tarih { font-size: 12px; color: var(--metin-soluk); }
.yorum-form { padding: 16px 18px; margin-top: 14px; max-width: 560px; }
.yorum-form h3 { margin-bottom: 10px; }

/* ---------- Kargo bedava cubugu ---------- */
.kargo-cubuk { margin-bottom: 12px; }
.kargo-cubuk-metin { font-size: 13px; margin-bottom: 6px; }
.kargo-cubuk-metin b { color: var(--renk-ana-koyu); }
.kargo-cubuk-ray { height: 8px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden; }
.kargo-cubuk-dolu { height: 100%; background: linear-gradient(90deg, var(--renk-ana), var(--renk-ana-acik)); border-radius: 6px; transition: width .3s; }
.kargo-bedava-mesaj { display: flex; align-items: center; gap: 8px; color: var(--basari-metin);
  background: var(--basari-ton); border-radius: var(--kose-kucuk); padding: 10px 12px; font-size: 13.5px; font-weight: 500; }
.kargo-bedava-mesaj svg { width: 20px; height: 20px; }

/* ---------- Urun detay ---------- */
.urun-detay { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .urun-detay { grid-template-columns: 1fr; } }
.urun-gorsel-kutu { background: var(--renk-ana-ton); border-radius: var(--kose); height: 300px;
  display: flex; align-items: center; justify-content: center; }
.urun-gorsel-kutu svg { width: 90px; height: 90px; color: var(--renk-ana); opacity: .5; }
.urun-bilgi h1 { font-size: 22px; margin: 8px 0 10px; line-height: 1.3; }
.urun-etiketler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.uyum-bildirim { display: flex; align-items: center; gap: 8px; border-radius: var(--kose-kucuk);
  padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.uyum-bildirim svg { width: 20px; height: 20px; }
.uyum-ok { background: var(--basari-ton); color: var(--basari-metin); }
.uyum-hayir { background: var(--uyari-ton); color: var(--uyari-metin); }
.uyum-notr { background: var(--zemin); border: 1px solid var(--cizgi); color: var(--metin-soluk); }
.uyum-notr a { color: var(--renk-ana); font-weight: 500; }
.urun-fiyat-kutu { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 16px 18px; }
.adet-kutu { width: 64px; font-family: var(--font-govde); font-size: 14px; padding: 10px;
  border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); text-align: center; }
.uyum-listesi { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
.uyum-listesi li { padding: 7px 0; border-bottom: 1px dashed var(--cizgi); font-size: 14px; break-inside: avoid; }
@media (max-width: 620px) { .uyum-listesi { columns: 1; } }
.grup-baslik { font-size: 15px; color: var(--renk-ana-koyu); margin: 4px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--renk-ana-ton); }
.kart h3 a:hover { color: var(--renk-ana); }

/* ---------- Kategori vitrini ---------- */
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.kategori-kart { display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 20px 12px; color: var(--metin); transition: transform .18s, box-shadow .18s, border-color .18s; }
.kategori-kart svg { color: var(--renk-ana); }
.kategori-kart span { font-family: var(--font-baslik); font-size: 13px; font-weight: 500; text-align: center; }
.kategori-kart:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(14,50,60,.10); border-color: var(--renk-ana-acik); }

/* ---------- Uretici bandi ---------- */
.uretici-band { background: var(--kart); border-block: 1px solid var(--cizgi); margin-top: 28px; }
.uretici-band-ic { display: flex; align-items: center; gap: 30px; padding: 30px 16px; flex-wrap: wrap; }
.uretici-metin { flex: 2 1 340px; }
.uretici-metin h2 { font-size: 21px; margin: 10px 0 8px; }
.uretici-metin p { color: var(--metin-soluk); font-size: 14px; line-height: 1.6; margin: 0; max-width: 560px; }
.uretici-sayilar { flex: 1 1 220px; display: flex; gap: 10px; }
.uretici-sayilar div { flex: 1; background: var(--renk-ana-ton); border-radius: var(--kose);
  padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.uretici-sayilar b { font-family: var(--font-baslik); font-size: 20px; color: var(--renk-ana-koyu); }
.uretici-sayilar span { font-size: 11.5px; color: var(--metin-soluk); }

/* ---------- Kart cilasi: sabit gorsel orani + hover ---------- */
.kart { transition: transform .18s, box-shadow .18s; }
.grid .kart:hover, .grid-parca .kart:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,50,60,.10); }
.kart-gorsel { aspect-ratio: 4 / 3; height: auto !important; }

/* ---------- Filtre cubugu (urunler katalogu) ---------- */
.filtre-cubugu { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.filtre-grup { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre-pil { font-size: 13px; padding: 7px 14px; border: 1px solid var(--cizgi); border-radius: 20px;
  background: var(--kart); color: var(--metin-soluk); display: inline-flex; align-items: center; gap: 6px; }
.filtre-pil:hover { border-color: var(--renk-ana); color: var(--renk-ana); }
.filtre-aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff !important; }
.filtre-arac svg { width: 17px; height: 17px; }
.filtre-arac.filtre-aktif svg { color: #fff; }

/* ---------- Kirinti (breadcrumb) ---------- */
.kirinti { font-size: 12.5px; color: var(--metin-soluk); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kirinti a:hover { color: var(--renk-ana); }
.kirinti b { color: var(--metin); font-weight: 500; }

/* ---------- Satin alma kutusu ---------- */
.satin-al-kutu { padding: 20px 22px; }
.satin-al-kutu h1 { font-size: 21px; line-height: 1.3; margin-bottom: 8px; }
.kod-satiri { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--metin-soluk); margin-bottom: 14px; }
.kod-satiri b { color: var(--metin); font-weight: 500; }
.fiyat-blok { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-block: 1px solid var(--cizgi); margin-bottom: 14px; }
.buyuk-fiyat { font-size: 28px; }
.satin-al-form { display: flex; gap: 10px; margin-bottom: 16px; }
.teslimat-maddeleri { list-style: none; margin: 0; padding: 0; }
.teslimat-maddeleri li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--metin-soluk); padding: 5px 0; }
.teslimat-maddeleri svg { width: 20px; height: 20px; color: var(--renk-ana); flex-shrink: 0; }
.teslimat-maddeleri b { color: var(--metin); font-weight: 500; }
.urun-gorsel-buyuk { position: relative; }
.uyum-bildirim { margin-bottom: 0; }
.satin-al-kutu .uyum-bildirim { margin-bottom: 14px; }

/* ---------- Sekmeler ---------- */
.sekmeler { margin-top: 26px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); overflow: hidden; }
.sekme-basliklar { display: flex; border-bottom: 1px solid var(--cizgi); background: var(--zemin); }
.sekme-btn { font-family: var(--font-baslik); font-weight: 500; font-size: 14px; color: var(--metin-soluk);
  background: none; border: none; padding: 13px 20px; cursor: pointer; border-bottom: 2px solid transparent; }
.sekme-aktif { color: var(--renk-ana-koyu); border-bottom-color: var(--renk-ana); background: var(--kart); }
.sekme-icerik { display: none; padding: 18px 22px; }
.sekme-goster { display: block; }
.ozellik-listesi { list-style: none; margin: 12px 0; padding: 0; max-width: 460px; }
.ozellik-listesi li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
  border-bottom: 1px dashed var(--cizgi); font-size: 13.5px; }
.ozellik-listesi li span { color: var(--metin-soluk); }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .ustbar-ic { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 10px; }
  .ust-arama { order: 3; flex-basis: 100%; max-width: none; }
  .serit h1 { font-size: 18px; }
}

/* Emniyet: buyuk gorsel siniflari disindaki tum SVG ikonlar sinirli */
.kap svg:not(.hero-cizim):not(.slide-cizim) { max-width: 26px; max-height: 26px; }
.kart-gorsel svg, .urun-gorsel-kutu svg, .sepet-gorsel svg { max-width: 90px !important; max-height: 90px !important; }

/* ---------- Zengin footer ---------- */
.alt-ic { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; padding: 32px 16px 26px; }
@media (max-width: 760px) { .alt-ic { grid-template-columns: 1fr 1fr; } .alt-marka { grid-column: 1 / -1; } }
.alt-kolon { display: flex; flex-direction: column; gap: 8px; }
.alt-kolon h4 { font-family: var(--font-baslik); font-size: 13px; font-weight: 600; color: var(--metin); margin: 0 0 4px; }
.alt-kolon a { font-size: 13px; color: var(--metin-soluk); }
.alt-kolon a:hover { color: var(--renk-ana); }
.alt-marka p { font-size: 13px; color: var(--metin-soluk); line-height: 1.6; margin: 10px 0 12px; max-width: 320px; }
.alt-guven { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alt-guven li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--metin-soluk); }
.alt-guven svg { width: 17px; height: 17px; color: var(--renk-ana); }
.alt-imza { border-top: 1px solid var(--cizgi); }
.alt-imza-ic { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; font-size: 12px; color: var(--metin-soluk); }

/* ---------- Siparis durum cizgisi ---------- */
.durum-cizgisi { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.durum-adim { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.durum-nokta { width: 30px; height: 30px; border-radius: 50%; background: var(--zemin); border: 2px solid var(--cizgi);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--metin-soluk); font-weight: 600; }
.durum-gecti .durum-nokta { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; }
.durum-simdiki .durum-nokta { box-shadow: 0 0 0 4px var(--renk-ana-ton); }
.durum-ad { font-size: 11px; color: var(--metin-soluk); text-align: center; }
.durum-gecti .durum-ad { color: var(--renk-ana-koyu); font-weight: 500; }
.durum-bag { flex: 1; height: 2px; background: var(--cizgi); margin-bottom: 18px; }
.durum-bag.durum-gecti { background: var(--renk-ana); }