/* PETKIN Mağaza (Teklif Sepeti) — style.css'in ÜSTÜNE biner, onu DEĞİŞTİRMEZ.
   style.css'teki değişkenleri kullanır: --orange --orange-koyu --blue --navy --line
   --radius --cond --bg-soft --muted --ink. Yeni renk TANIMLANMAZ; e-katalog ile
   görsel dil aynı kalsın diye .ek/.suz/.chip/.rozet kalıpları taklit edilir.
   ⚠️ minify YASAK ([[reference_vibora_minifier_hasari]]). */

/* Yalnız ekran okuyucu için — görsel olarak gizli ama DOM'da ve erişilebilir.
   display:none KULLANILMAZ; o, ekran okuyucudan da saklar. */
.gizli {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Başlıktaki teklif sepeti düğmesi ---------------------------------- */
.sepetbtn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 14px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--orange); background: #fff; color: var(--orange);
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: .84rem; white-space: nowrap;
}
.sepetbtn:hover { background: var(--orange); color: #fff }
.sepetbtn svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8 }
.sepetbtn__n {
  display: inline-block; min-width: 21px; padding: 1px 6px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: .76rem; font-style: normal;
  line-height: 1.55; text-align: center;
}
.sepetbtn:hover .sepetbtn__n { background: #fff; color: var(--orange) }
.sepetbtn[hidden] { display: none }

/* --- Sayfa başlığı (ürün / sepet / hukuk sayfaları) --------------------- */
.mgbas { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 26px 0 24px }
.mgbas h1 { margin: 6px 0 0; font-size: clamp(1.5rem, 3vw, 2.15rem); color: var(--navy); text-transform: uppercase }
.mgbas .lead { margin: 12px 0 0; max-width: 720px }
.mgyol { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  font-size: .76rem; color: var(--muted) }
.mgyol a { color: var(--muted) }
.mgyol a:hover { color: var(--blue) }
.mgyol span { margin: 0 7px; opacity: .5 }

/* --- Fiyat yok uyarısı --------------------------------------------------- */
.mgnot {
  border-left: 4px solid var(--blue); background: #EEF6FC; padding: 14px 18px;
  border-radius: 0 10px 10px 0; margin: 0 0 22px; font-size: .93rem; color: #23506F; line-height: 1.6;
}
.mgnot b { color: var(--navy) }

/* --- Ürün ızgarası ------------------------------------------------------ */
.mggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: stretch }
.mgk {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; transition: border-color .16s, box-shadow .16s;
}
.mgk:hover { border-color: #9FC7E4; box-shadow: 0 10px 28px rgba(0, 78, 146, .09) }
.mgk[hidden] { display: none }
.mgk__ust { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 148px; background: var(--bg-soft); border-radius: 10px; margin-bottom: 13px; padding: 8px }
.mgk__ust img { max-height: 132px; max-width: 100%; width: auto; object-fit: contain }
.mgk__yok { position: relative; width: 100%; min-height: 132px }
.mgk__yok::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 40px;
  transform: translate(-50%, -50%); border: 2px solid #C3D3E0; border-radius: 4px;
}
.mgk__marka { font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; font-size: .72rem; color: var(--orange); margin: 0 0 4px }
.mgk__ad { margin: 0 0 9px; font-size: 1rem; line-height: 1.28; color: var(--navy);
  font-family: var(--cond); font-weight: 700; text-transform: uppercase }
.mgk__ad a { color: inherit }
.mgk__ad a:hover { color: var(--blue) }
.mgk .chips { margin-bottom: 9px }
.mgk__amb { margin: 0 0 12px; font-size: .82rem; color: var(--muted); line-height: 1.5 }
.mgk__amb b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: .7rem; color: #4E6478; display: block }
.mgk__alt { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap }
.mgk__alt .mgbtn { flex: 1 1 auto }

/* stok rozeti kartın görsel köşesinde */
.mgk__rozet { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem }
.mgk__rozet--stok { background: #E4F6EC; color: #186A3B; border: 1px solid #BFE6CE }
.mgk__rozet--siparis { background: var(--orange-acik); color: #9A3D07; border: 1px solid #F6D3BF }

/* --- Düğmeler (btn'in küçük kardeşi) ------------------------------------ */
.mgbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 42px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: .84rem; cursor: pointer; background: none; text-align: center; line-height: 1.15;
}
.mgbtn--ekle { background: var(--orange); color: #fff }
.mgbtn--ekle:hover { background: var(--orange-koyu); color: #fff; box-shadow: 0 5px 16px 0 var(--orange-golge) }
.mgbtn--ok { background: #186A3B; color: #fff }
.mgbtn--cizgi { border-color: var(--line); color: var(--navy); background: #fff }
.mgbtn--cizgi:hover { border-color: var(--blue); color: var(--blue) }
.mgbtn--teklif { border-color: var(--orange); color: var(--orange); background: #fff }
.mgbtn--teklif:hover { background: var(--orange); color: #fff }
.mgbtn[disabled] { opacity: .5; cursor: not-allowed }

/* --- Süzgeç çubuğu (e-katalog .ekfiltre ile aynı dil) -------------------- */
.mgfiltre { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 20px 0 8px }
.mgfiltre__grup { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px }
.mgfiltre__et { flex: 0 0 132px; padding-top: 9px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .09em; font-size: .74rem; font-weight: 700; color: var(--muted) }
.mgfiltre .suzgec { margin-bottom: 0; flex: 1 1 300px }
.mgfiltre__sifirla { background: none; border: 0; cursor: pointer; font-family: var(--cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; color: var(--orange); padding: 4px 0 12px }
.mgfiltre__sifirla:hover { color: var(--orange-koyu) }
.mgfiltre__sifirla[hidden] { display: none }

/* --- Ürün detay --------------------------------------------------------- */
.mgurun { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start }
.mgurun__foto { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; align-items: center; justify-content: center; min-height: 300px }
.mgurun__foto img { max-width: 100%; height: auto; max-height: 380px; object-fit: contain }
.mgurun__fotoyok { color: var(--muted); font-size: .9rem; text-align: center; line-height: 1.6 }
.mgurun__marka { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: var(--orange); margin: 0 0 6px }
.mgurun__ad { margin: 0 0 14px; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--navy); text-transform: uppercase }
.mgurun__ozet { margin: 0 0 20px; color: #3B5567; font-size: 1rem; line-height: 1.65 }
.mgozellik { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 22px }
.mgozellik div { display: flex; gap: 14px; padding: 11px 16px; font-size: .92rem; border-bottom: 1px solid var(--line) }
.mgozellik div:last-child { border-bottom: 0 }
.mgozellik div:nth-child(odd) { background: var(--bg-soft) }
.mgozellik dt, .mgozellik b { flex: 0 0 150px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .06em; font-size: .76rem; color: var(--muted); padding-top: 2px; font-weight: 700 }
.mgozellik dd, .mgozellik span { margin: 0; color: var(--ink); min-width: 0 }

/* Ambalaj seçimi */
.mgsec { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; margin: 0 0 22px }
.mgsec h3 { margin: 0 0 12px; font-size: .84rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted) }
.mgamb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px }
.mgamb label { position: relative; cursor: pointer }
.mgamb input { position: absolute; opacity: 0; width: 0; height: 0 }
.mgamb span {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; font-family: var(--cond); font-weight: 700;
  letter-spacing: .04em; font-size: .88rem; color: var(--navy);
}
.mgamb input:checked + span { border-color: var(--orange); background: var(--orange-acik); color: #9A3D07 }
.mgamb input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px }
.mgamb i { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700 }
.mgadet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px }
.mgadet label { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .76rem; color: var(--muted); font-weight: 700 }
.mgadet input { width: 96px; min-height: 44px; padding: 0 12px; font-size: 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink) }
.mgsec__aksiyon { display: flex; gap: 10px; flex-wrap: wrap }
.mgsec__aksiyon .mgbtn { min-height: 50px; padding: 0 24px }

/* --- Sepet tablosu ------------------------------------------------------ */
.mgsepet { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff }
.mgsepet table { width: 100%; border-collapse: collapse }
.mgsepet th {
  text-align: left; padding: 13px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--muted);
}
.mgsepet td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .95rem }
.mgsepet tr:last-child td { border-bottom: 0 }
.mgsepet__ad { font-family: var(--cond); font-weight: 700; text-transform: uppercase; color: var(--navy);
  line-height: 1.3; display: block }
.mgsepet__ad:hover { color: var(--blue) }
.mgsepet__marka { display: block; font-size: .76rem; color: var(--muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .06em }
.mgsepet input[type="number"] { width: 82px; min-height: 40px; padding: 0 8px; text-align: center;
  font-size: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink) }
.mgsepet__sil { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: .82rem;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 6px }
.mgsepet__sil:hover { color: #B3261E }
.mgsepet__alt { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px; background: var(--bg-soft) }
.mgsepet__sayi { font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-size: .84rem; color: var(--navy) }
.mgbos { text-align: center; padding: 46px 20px; color: var(--muted) }
.mgbos p { margin: 0 0 18px; font-size: 1.02rem }

/* --- Form --------------------------------------------------------------- */
.mgform { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 18px }
.mgform__alan { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.mgform__alan--tam { grid-column: 1 / -1 }
.mgform label { font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-size: .76rem; color: var(--muted) }
.mgform label .z { color: var(--orange) }
.mgform input[type="text"], .mgform input[type="tel"], .mgform input[type="email"],
.mgform select, .mgform textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.mgform textarea { min-height: 110px; resize: vertical; line-height: 1.55 }
.mgform input:focus, .mgform select:focus, .mgform textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.mgform .hata { border-color: #B3261E; background: #FDF3F2 }
.mgform__ipucu { font-size: .8rem; color: var(--muted); line-height: 1.5 }
.mgonay { grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start;
  font-size: .9rem; line-height: 1.6; color: #3B5567 }
.mgonay input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange) }
.mgsozlesme { grid-column: 1 / -1; margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.65 }
.mgform__gonder { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
.mgform__gonder .mgbtn { min-height: 52px; padding: 0 28px }
.mghata { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 10px;
  background: #FDF3F2; border-left: 4px solid #B3261E; color: #8C1D18; font-size: .92rem }
.mghata[hidden] { display: none }
/* bal küpü — insan görmez, bot doldurur */
.mgkovan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.mgsonuc { border: 1px solid #BFE6CE; background: #E4F6EC; border-radius: var(--radius); padding: 26px }
.mgsonuc h2 { margin: 0 0 8px; color: #186A3B; font-size: 1.3rem }
.mgsonuc p { margin: 0 0 14px; color: #1E5B37; line-height: 1.6 }
.mgsonuc[hidden] { display: none }

/* --- Hukuk metni -------------------------------------------------------- */
.mghukuk { max-width: 820px }
.mghukuk h2 { margin: 34px 0 10px; font-size: 1.22rem; color: var(--navy); text-transform: uppercase }
.mghukuk h2:first-child { margin-top: 0 }
.mghukuk p { margin: 0 0 12px; color: #3B5567; font-size: .96rem; line-height: 1.7 }
.mghukuk ul { margin: 0 0 12px; padding-left: 20px; color: #3B5567; font-size: .96rem; line-height: 1.7 }
.mghukuk li { margin: .25em 0 }

/* --- Küçük ekran -------------------------------------------------------- */
@media (max-width: 860px) {
  .mgurun { grid-template-columns: 1fr }
  .mgfiltre__et { flex: 1 1 100%; padding-top: 0 }
  .mgozellik div { flex-direction: column; gap: 3px }
  .mgozellik dt, .mgozellik b { flex: none }
}
@media (max-width: 640px) {
  .sepetbtn span { display: none }
  .sepetbtn { margin-left: auto; padding: 9px 12px }
  .mggrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px }
  .mgk { padding: 12px }
  .mgk__ust { min-height: 116px }
  .mgk__ust img { max-height: 104px }
  /* Sepet tablosu mobilde karta dönüşür — scrollWidth ölçümüne güvenilmez,
     doğrudan kart düzenine geçilir ([[reference_mobil_tablo_kart]]). */
  .mgsepet thead { position: absolute; left: -9999px }
  .mgsepet tr { display: block; border-bottom: 1px solid var(--line); padding: 4px 0 }
  .mgsepet tr:last-child { border-bottom: 0 }
  .mgsepet td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border-bottom: 0; padding: 7px 14px }
  .mgsepet td::before { content: attr(data-et); font-family: var(--cond); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; color: var(--muted); flex: 0 0 auto }
  .mgsepet td:first-child { display: block }
  .mgsepet td:first-child::before { display: none }
}

/* Viskozite süzgeci katlanır — 62 düğme düz basılınca sayfanın üstünü dolduruyordu */
.mgfiltre__grup--kat > .mgfiltre__et{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:8px}
.mgfiltre__grup--kat > .mgfiltre__et::-webkit-details-marker{display:none}
.mgfiltre__grup--kat > .mgfiltre__et::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .16s ease;opacity:.7}
.mgfiltre__grup--kat[open] > .mgfiltre__et::after{transform:rotate(225deg) translateY(-2px)}
.mgfiltre__grup--kat > .mgfiltre__et i{font-style:normal;font-family:var(--cond);font-size:.7rem;
  font-weight:700;background:var(--bg-soft);color:var(--muted);border-radius:999px;padding:2px 8px}
.mgfiltre__grup--kat[open] .suzgec{padding-top:10px}

/* Mobil dokunma hedefi: sepete ekleme ve detay bağlantıları 44 px (ölçüm: 390 px'te
   336 ekle düğmesi + 336 detay bağlantısı 44 px altındaydı). */
@media (max-width:760px){
  .mgbtn,.mgbtn--ekle,.mgbtn--cizgi{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .mgfiltre .suz{min-height:44px}
  .mgfiltre__grup--kat > .mgfiltre__et{min-height:44px}
}