/* ===== Tasarım sistemi =====
   Renk: logo renkleri — koyu (marka) + kırmızı (eylemler) + mavi (bağlantılar); Yönetim > Site ayarları > Tema renkleri ile değiştirilebilir. Yüzeyler beyaz, zemin açık gri-mavi.
   Köşe: kartlar 14px, alanlar/butonlar 10px, etiketler tam yuvarlak. Gölge: yalnızca hover ve açılır katmanlar.
   Yazı tipi: Inter (yerel, değişken). Boşluk ölçeği: 4 / 8 / 12 / 16 / 24 / 32 / 48. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --bg: #f6f8fb;
  --white: #fff;
  --brand: #231f20;
  --brand-2: #2b77ab;
  --accent: #e01f26;
  --accent-d: #af181e;
  --accent-soft: #fdedee;
  --accent-line: #f7c7c9;
  --ok: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
  --r: 10px;
  --r-lg: 14px;
  --golge: 0 1px 2px rgba(15, 23, 42, .05);
  --golge-hover: 0 10px 28px rgba(15, 23, 42, .10);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* yönetim paneli ve eski bileşenlerle uyum */
  --lacivert: var(--brand); --lacivert-2: var(--brand-2); --turuncu: var(--accent); --turuncu-koyu: var(--accent-d);
  --yazi: var(--ink); --yazi-2: var(--muted); --cizgi: var(--line); --zemin: var(--bg); --beyaz: var(--white);
  --yesil: var(--ok); --sari: var(--warn); --kirmizi: var(--bad); --yaricap: var(--r);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; font: 15px/1.6 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { color: var(--accent-d); }
h1, h2, h3 { line-height: 1.25; color: var(--ink); margin: 0 0 8px; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 12px; }
.kap { width: min(1280px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 8px; top: -60px; background: var(--white); color: var(--brand); padding: 8px 12px; z-index: 100; border: 2px solid var(--accent); border-radius: var(--r); }
.atla:focus { top: 8px; }

/* ===== Üst şerit + başlık ===== */
.ust-serit { background: var(--white); color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.ust-serit .kap { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.ust-serit a { color: var(--text); margin-left: 20px; font-weight: 500; }
.ust-serit a:hover { color: var(--accent-d); }
.ust-serit a.ust-katalog { color: var(--accent-d); font-weight: 700; }
.baslik { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.baslik-ic { display: flex; align-items: center; gap: 32px; padding: 14px 0; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; font-size: 1.3rem; white-space: nowrap; letter-spacing: -.02em; }
.logo:hover { color: var(--brand); }
.logo-gorsel img { display: block; height: 72px; width: auto; max-width: 300px; object-fit: contain; }
.logo-isaret { display: grid; place-items: center; width: 38px; height: 38px; background: var(--brand); color: #fff; font-size: 1.2rem; border-radius: 10px; }
.arama { flex: 1; display: flex; max-width: 640px; position: relative; }
.arama input { flex: 1; min-width: 0; height: 46px; padding: 0 110px 0 18px; border: 1px solid var(--line-2); border-radius: 999px; font: inherit; background: var(--bg); color: var(--ink); }
.arama input::placeholder { color: var(--muted); }
.arama input:focus { background: #fff; border-color: var(--brand-2); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 15%, transparent); }
.arama button { position: absolute; right: 5px; top: 5px; height: 36px; padding: 0 20px; border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer; }
.arama button:hover { background: var(--brand-2); }
.teklif-btn { margin-left: auto; background: var(--accent); color: #fff; height: 46px; display: inline-flex; align-items: center; padding: 0 24px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.teklif-btn:hover { background: var(--accent-d); color: #fff; }
.menu-ac { display: none; width: 44px; height: 44px; padding: 0; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; place-items: center; }
.menu-cizgi, .menu-cizgi::before, .menu-cizgi::after { display: block; width: 20px; height: 2px; background: var(--ink); content: ""; position: relative; border-radius: 2px; }
.menu-cizgi::before { position: absolute; top: -6px; }
.menu-cizgi::after { position: absolute; top: 6px; }

/* ===== Ana menü + mega menü ===== */
.anamenu { background: var(--white); position: relative; border-top: 1px solid var(--line); }
.menu-liste { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.menu-oge { position: static; }
.menu-link { display: block; color: var(--ink); padding: 14px 9px; font-weight: 600; font-size: 13.5px; white-space: nowrap; position: relative; }
.menu-link::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .15s; }
.menu-link:hover, .menu-link.secili, .has-mega:focus-within > .menu-link { color: var(--brand); }
.menu-link:hover::after, .menu-link.secili::after, .has-mega:focus-within > .menu-link::after { transform: scaleX(1); }
.alt-ac { display: none; }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -12px rgba(15, 23, 42, .18); z-index: 50; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mega-ic { width: min(1280px, 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 24px 0 28px; max-height: calc(100vh - 220px); overflow: auto; }
.mega-yan { border-right: 1px solid var(--line); padding-right: 24px; display: flex; flex-direction: column; gap: 4px; align-self: start; }
.mega-yan strong { font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; }
.mega-yan span { color: var(--muted); font-size: 13px; }
.mega-tum { margin-top: 14px; font-weight: 600; font-size: 14px; display: inline-flex; padding: 9px 16px; border-radius: 999px; background: var(--brand); color: #fff; align-self: flex-start; }
.mega-tum:hover { background: var(--brand-2); color: #fff; }
.mega-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; align-content: start; }
.mega-liste a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; color: var(--ink); }
.mega-liste a:hover { background: var(--bg); color: var(--brand); }
.mega-liste img { width: 48px; height: 48px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.mega-liste span { font-weight: 600; font-size: 14px; line-height: 1.25; }
.mega-liste small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 1px; }
@media (hover: hover) and (min-width: 961px) {
  .has-mega:hover > .mega { display: block; }
}
.has-mega:focus-within > .mega, .has-mega.acik > .mega { display: block; }

/* ===== Genel bileşenler ===== */
main { min-height: 60vh; padding-bottom: 48px; }
.ekmek { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 16px 0 12px; font-size: 13px; color: var(--muted); }
.ekmek a { color: var(--muted); }
.ekmek a:hover { color: var(--accent-d); }
.ekmek > * + *::before { content: "›"; margin-right: 8px; color: #94a3b8; }
.ekmek [aria-current] { color: var(--ink); font-weight: 500; }
.btn { display: inline-block; border: 0; border-radius: var(--r); padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; text-align: center; line-height: 1.2; transition: background .15s; }
.btn:hover { background: var(--accent-d); color: #fff; }
.btn-ikincil { background: var(--brand); }
.btn-ikincil:hover { background: var(--brand-2); }
.btn-hat { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); padding: 11px 21px; }
.btn-hat:hover { background: var(--bg); color: var(--ink); }
.btn-blok { display: block; width: 100%; padding: 14px 22px; }
.rozet { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eef2f7; color: var(--muted); }
.stok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.stok b { color: var(--ink); font-weight: 700; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: none; display: inline-block; }
.stok-var .nokta { background: #22c55e; }
.stok-sinirli .nokta { background: #f59e0b; }
.stok-tukendi .nokta { background: var(--bad); }
.rozet.stok-var { background: #dcfce7; color: #166534; }
.rozet.stok-sinirli { background: #fef3c7; color: #92400e; }
.rozet.stok-uretim { background: #dbeafe; color: #1e40af; }
.rozet.stok-tukendi { background: #fee2e2; color: #991b1b; }
.uyari { padding: 12px 16px; border-radius: var(--r); margin: 12px 0; font-weight: 500; border: 1px solid; }
.uyari-ok { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
.uyari-hata { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }
.fiyat { font-weight: 700; color: var(--ink); }
.fiyat small { font-weight: 500; color: var(--muted); font-size: 12px; }
.fiyat-teklif { color: var(--accent-d); font-size: 14px; font-weight: 600; }
.kdv { color: var(--muted); font-size: 12px; font-weight: 400; }

/* ===== Slider ===== */
.slider { position: relative; background: #e5e9ef; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.slider.tutuluyor { cursor: grabbing; }
.slider img { -webkit-user-drag: none; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s; position: relative; display: block; }
.slide.aktif { opacity: 1; visibility: visible; }
.slide img { display: block; width: 100%; height: 100%; aspect-ratio: 1920 / 700; object-fit: cover; }
.slide-metin { position: absolute; left: max(16px, calc((100% - 1280px) / 2)); bottom: 40px; max-width: min(540px, calc(100% - 32px)); background: rgba(255, 255, 255, .94); color: var(--text); padding: 18px 22px; border-radius: var(--r-lg); }
.slide-metin strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--ink); letter-spacing: -.02em; }
.slide-metin span { display: block; margin-top: 6px; color: var(--muted); }
.sl-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 22px; cursor: pointer; line-height: 1; border-radius: 50%; box-shadow: var(--golge-hover); }
.sl-ok:hover { background: #fff; color: var(--accent-d); }
.sl-ok.onceki { left: 16px; }
.sl-ok.sonraki { right: 16px; }
.sl-noktalar { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; }
.sl-nokta { width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.sl-nokta::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; height: 4px; background: rgba(255, 255, 255, .7); border-radius: 4px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.sl-nokta[aria-current="true"]::after { background: var(--accent); box-shadow: none; }
.hero { background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; padding: 56px 0; }
.hero h1 { color: #fff; font-size: 2.2rem; max-width: 20ch; }
.hero p { color: #cfe0f1; max-width: 56ch; font-size: 1.05rem; }

/* ===== Ana sayfa ===== */
.bolum { padding: 40px 0 0; }
.bolum-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.bolum-baslik h2 { margin: 0; font-size: 1.5rem; }
.bolum-baslik a { font-weight: 600; font-size: 14px; }
.kat-kutular { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 4px; }
.kat-kutu { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); transition: box-shadow .15s, border-color .15s, transform .15s; }
.kat-kutu:hover { border-color: var(--line-2); box-shadow: var(--golge-hover); color: var(--ink); transform: translateY(-2px); }
.kat-kutu img { width: 96px; height: 96px; object-fit: contain; }
.kat-kutu span { font-weight: 600; font-size: 14px; line-height: 1.3; }
.kat-kutu small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.surec { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: adim; }
.surec div { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: relative; }
.surec div::before { counter-increment: adim; content: counter(adim); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-d); font-weight: 700; margin-bottom: 12px; }
.surec b { color: var(--ink); display: block; margin-bottom: 4px; font-size: 1.05rem; }
.surec p { margin: 0; color: var(--muted); font-size: 14px; }

/* ===== Ürün kartları ===== */
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.kart { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); transition: box-shadow .15s, border-color .15s; }
.kart:hover { border-color: var(--line-2); box-shadow: var(--golge-hover); color: var(--ink); }
.kart-resim { display: block; aspect-ratio: 1 / 1; background: #fff; }
.kart-resim img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; padding: 16px; }
.kart-govde { display: flex; flex-direction: column; gap: 3px; padding: 4px 16px 16px; flex: 1; }
.kart-kod { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.kart-ad { font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.kart:hover .kart-ad { color: var(--brand-2); }
.kart-resim { overflow: hidden; }
.kart-resim img { transition: transform .3s ease; }
.kart:hover .kart-resim img { transform: scale(1.03); }
.kart-fiyat { margin-top: 8px; margin-bottom: 10px; font-size: 17px; }
.kart-alt { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.kart-min { font-size: 12px; color: var(--muted); }

/* Satır (karşılaştırma) görünümü */
.satir-liste { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.satir-baslik, .satir { display: grid; grid-template-columns: 76px minmax(0, 1fr) 120px 170px 170px; gap: 16px; align-items: center; padding: 10px 16px; }
.satir-baslik { background: #f8fafc; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-block: 10px; }
.satir { border-top: 1px solid var(--line); color: var(--ink); }
.satir:hover { background: #f8fafc; color: var(--ink); }
.satir-resim img { width: 76px; height: 76px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: block; padding: 6px; }
.satir-ad { display: flex; flex-direction: column; min-width: 0; }
.satir-ad .kart-ad { min-height: 0; }
.satir-min { font-size: 13px; color: var(--muted); }
.satir-fiyat { text-align: right; }

/* ===== Liste sayfası ===== */
.liste-duzen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.yan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 14px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.yan-baslik { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 0 8px; margin: 0 0 8px; }
.yan .yan-baslik:not(:first-child) { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.agac { display: grid; gap: 2px; }
.agac-tum, .agac summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.agac summary::-webkit-details-marker { display: none; }
.agac-tum:hover, .agac summary:hover { background: var(--bg); color: var(--ink); }
.agac-tum.secili { background: var(--accent-soft); color: var(--accent-d); }
.agac small { color: var(--muted); font-weight: 500; font-size: 12px; }
.agac summary::after { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -3px 2px 0 6px; flex: none; transition: transform .15s; }
.agac details[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.agac summary span { flex: 1; }
.agac details[open] > summary { color: var(--brand); }
.agac ul { list-style: none; margin: 2px 0 6px 10px; padding: 0 0 0 10px; border-left: 2px solid var(--line); }
.agac ul a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: 13.5px; }
.agac ul a:hover { background: var(--bg); color: var(--ink); }
.agac ul a.secili { background: var(--accent-soft); color: var(--accent-d); font-weight: 600; }
.anahtar { display: flex; align-items: center; gap: 12px; padding: 6px 8px; color: var(--ink); font-weight: 500; font-size: 14px; }
.anahtar:hover { color: var(--ink); }
.anahtar-dugme { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background .15s; }
.anahtar-dugme::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.anahtar[aria-checked="true"] .anahtar-dugme { background: var(--accent); }
.anahtar[aria-checked="true"] .anahtar-dugme::after { transform: translateX(16px); }
.liste-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.liste-baslik h1 { margin: 0; font-size: 1.75rem; }
.liste-sayi { color: var(--muted); font-size: 14px; }
.liste-arac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.siralama { display: flex; gap: 8px; align-items: center; margin: 0; }
.gorunum { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: #fff; }
.gorunum a { display: grid; place-items: center; width: 42px; height: 40px; color: var(--muted); }
.gorunum a + a { border-left: 1px solid var(--line-2); }
.gorunum a[aria-current="true"] { background: var(--brand); color: #fff; }
.aktif-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 16px; }
.etiket { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; }
.etiket:hover { border-color: var(--accent); color: var(--accent-d); }
.etiket span[aria-hidden] { font-size: 16px; line-height: 1; color: var(--muted); }
.temizle { font-size: 13px; font-weight: 600; margin-left: 4px; }
select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=file], textarea { font: inherit; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; background: var(--white); color: var(--ink); max-width: 100%; }
select { height: 40px; padding-block: 0; cursor: pointer; }
select:focus, input:focus, textarea:focus { border-color: var(--brand-2); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 15%, transparent); }
.bos { background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 48px 24px; text-align: center; color: var(--muted); }
.sayfalama { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 32px 0 0; }
.sayfalama a, .sayfalama span { padding: 9px 14px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14px; min-width: 42px; text-align: center; }
.sayfalama a:hover { border-color: var(--brand-2); color: var(--brand-2); }
.sayfalama .aktif { background: var(--brand); color: #fff; border-color: var(--brand); }
.sayfalama .bosluk { border: 0; background: none; }
.filtre-ac { display: none; }
.alt-kategoriler { margin-bottom: 20px; }
.alt-kategoriler .kat-kutular { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.alt-kategoriler .kat-kutu { flex-direction: row; text-align: left; padding: 10px 12px; gap: 12px; border-radius: 12px; }
.alt-kategoriler .kat-kutu:hover { transform: none; }
.alt-kategoriler .kat-kutu img { width: 52px; height: 52px; flex: none; }

/* ===== Ürün sayfası ===== */
.urun-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 8px 0 24px; align-items: start; }
.galeri { position: sticky; top: 16px; }
.galeri-ana { position: relative; display: block; width: 100%; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; }
.galeri-ana img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; padding: 24px; }
.galeri-kap { position: relative; }
.galeri-ana { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.galeri-ana img { transition: opacity .15s; -webkit-user-drag: none; }
.galeri-ana img.gecis { opacity: .25; }
.gal-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.gal-ok:hover { background: #fff; color: var(--accent-d); border-color: var(--line-2); }
.gal-ok.onceki { left: 10px; }
.gal-ok.sonraki { right: 10px; }
.galeri-sayac { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.galeri-kucuk { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; }
.galeri-kucuk::-webkit-scrollbar { display: none; }
.galeri-kucuk.suruklen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.galeri-kucuk button { scroll-snap-align: center; }
.galeri-kucuk img { -webkit-user-drag: none; pointer-events: none; }
.galeri-kucuk button { flex: none; width: 76px; height: 76px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.galeri-kucuk button:hover { border-color: var(--line-2); }
.galeri-kucuk button[aria-current=true] { border: 2px solid var(--accent); padding: 3px; }
.galeri-kucuk img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.urun-bilgi, .galeri, .urun-alt > * { min-width: 0; }
.urun-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.meta-kat { background: #e8eef5; color: var(--brand); padding: 4px 12px; border-radius: 999px; font-weight: 600; }
.meta-kat:hover { background: var(--brand); color: #fff; }
.meta-kod { color: var(--muted); }
.meta-kod b { color: var(--ink); font-weight: 600; }
.urun-bilgi h1 { font-size: 1.9rem; margin-bottom: 18px; overflow-wrap: anywhere; }
.fiyat-kart { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 20px; }
.fiyat-etiket { font-size: 13px; color: var(--muted); font-weight: 600; }
.fiyat-satir { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.fiyat-satir strong { font-size: 2.1rem; line-height: 1.15; color: var(--ink); letter-spacing: -.025em; font-weight: 800; }
.fiyat-satir .teklif-yazi { font-size: 1.5rem; color: var(--accent-d); }
.fiyat-kdv { font-size: 13px; color: var(--muted); font-weight: 500; }
.fiyat-not { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ozet { margin: 18px 0; border-top: 1px solid var(--line); }
.ozet > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ozet dt { color: var(--muted); }
.ozet dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.fiyat-yardim { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.varyant-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding-top: 4px; }
.varyant-baslik { margin: 0; font-size: 1.1rem; }
.temizle-btn { border: 0; background: none; color: var(--accent-d); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.sec-kart.stoksuz, .cip.stoksuz { opacity: .55; }
.sec-kart.stoksuz .sec-ad::after, .cip.stoksuz span::after { content: " · stok yok"; font-size: 11px; font-weight: 500; color: var(--muted); }
.sec-grup { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.sec-grup legend { padding: 0; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.sec-grup legend small { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.sec-liste { display: grid; gap: 8px; }
.sec-kart { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.sec-kart:hover { border-color: var(--brand-2); }
.sec-kart input { position: absolute; opacity: 0; pointer-events: none; }
.sec-isaret { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; background: #fff; display: grid; place-items: center; }
.sec-isaret::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
.sec-kart:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sec-kart:has(input:checked) .sec-isaret { border-color: var(--accent); }
.sec-kart:has(input:checked) .sec-isaret::after { transform: scale(1); }
.sec-kart:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-ad { flex: 1; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.sec-ad em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); background: #eef2f7; padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.sec-fiyat { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cip-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 14px; color: var(--ink); cursor: pointer; user-select: none; transition: border-color .12s; }
.cip:hover { border-color: var(--brand-2); }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.cip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cip-renk i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .25); flex: none; }
.stok-tablo { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.stok-baslik { background: #fde7b8; border-bottom: 1px solid #ecc886; text-align: center; font-weight: 800; letter-spacing: .02em; color: #3a2a06; padding: 10px 12px; }
.stok-ozet { padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); text-align: center; }
.stok-bos { padding: 14px; background: #fff; text-align: center; font-size: 14px; color: var(--muted); }
[hidden] { display: none !important; }
.yolda { font-style: normal; font-size: 12px; color: var(--muted); background: #eef2f7; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.stok-liste { max-height: 340px; overflow: auto; background: #f1f3f6; padding: 6px; display: grid; gap: 4px; }
.stok-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--ink); }
.stok-ad b { font-weight: 800; }
.stok-adet { min-width: 56px; text-align: center; background: #5b6270; color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 3px 12px; font-variant-numeric: tabular-nums; }
.stok-adet.sifir { background: var(--bad); }
.stok-adet.metin { background: #8b94a3; }
.urun-alt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.kutu { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.kutu h2 { font-size: 1.2rem; margin-bottom: 14px; }
.aciklama p { margin: 0 0 10px; color: var(--text); }
.madde-liste { margin: 0 0 12px; padding-left: 20px; }
.madde-liste li { margin: 5px 0; padding-left: 4px; }
.madde-liste li::marker { color: var(--accent); }
.ozellik-tablo { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ozellik-tablo > div { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; }
.ozellik-tablo > div + div { border-top: 1px solid var(--line); }
.ozellik-tablo dt { background: #f8fafc; padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 14px; }
.ozellik-tablo dd { margin: 0; padding: 10px 14px; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.teklif-kutu { position: sticky; top: 16px; }
.alt-metin { margin-top: -6px; color: var(--muted); font-size: 14px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form label { display: block; font-weight: 600; font-size: 13px; color: var(--ink); margin: 14px 0 5px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=number], .form textarea, .form input[type=file] { width: 100%; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=number] { height: 44px; }
.form textarea { min-height: 96px; resize: vertical; }
.form .ipucu { color: var(--muted); font-size: 12px; margin-top: 4px; }
.secim-ozet { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--accent-d); }
.secim-ozet div { margin-top: 2px; }
.secim-ozet:empty { display: none; }
.alan-hata { margin-top: 6px; padding: 8px 12px; border-radius: var(--r); background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; font-weight: 500; }
.alan-hata { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.form input.duzeltildi { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .2); }
.bal-tuzagi { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ===== Özellik filtreleri (facet) ===== */
.facet-form { margin-top: 6px; }
.facet { border: 0; border-top: 1px solid var(--line); margin: 14px 0 0; padding: 14px 0 0; min-width: 0; }
.facet legend { padding: 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; float: left; width: 100%; margin-bottom: 8px; }
.facet legend + * { clear: both; }
.facet-sayi { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; letter-spacing: 0; }
.facet-liste { display: grid; gap: 1px; }
.fc { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.fc:hover { background: var(--bg); }
.fc input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.fc-ad { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.fc-ad i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .25); flex: none; }
.fc small { color: var(--muted); font-size: 12px; }
.fc-bos { opacity: .5; }
.fc:has(input:checked) { background: var(--accent-soft); font-weight: 600; }
.daha-icerik { display: none; margin-top: 1px; }
.daha-acik .daha-icerik { display: grid; }
.daha-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 2px; padding: 8px 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-2); cursor: pointer; text-align: left; border-radius: 8px; }
.daha-btn::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; transition: transform .15s; }
.daha-acik .daha-btn::after { transform: rotate(225deg); margin-top: 3px; }
.daha-btn:hover { background: var(--bg); color: var(--accent-d); }
.facet-temizle { display: inline-block; margin-top: 12px; padding: 0 8px; font-size: 13px; font-weight: 600; }

/* ===== Arama önerileri ===== */
.oneri { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 40px -8px rgba(15, 23, 42, .22); z-index: 70; padding: 8px; max-height: min(70vh, 520px); overflow: auto; }
.oneri-baslik { padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.oneri-oge { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; color: var(--ink); }
.oneri-oge:hover, .oneri-oge.secili { background: var(--bg); color: var(--ink); }
.oneri-oge.secili { box-shadow: inset 0 0 0 2px var(--accent); }
.oneri-oge img { width: 44px; height: 44px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.oneri-metin { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oneri-ad { font-weight: 600; font-size: 14px; line-height: 1.3; }
.oneri-ad mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.oneri-metin small { color: var(--muted); font-size: 12px; margin-top: 1px; }
.oneri-oge em { font-style: normal; font-size: 11px; color: var(--brand-2); background: #e8eef5; border-radius: 999px; padding: 2px 8px; flex: none; }
.oneri-tum { display: block; margin: 6px 4px 2px; padding: 10px 12px; text-align: center; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; }
.oneri-tum:hover, .oneri-tum.secili { background: var(--brand-2); color: #fff; }
.oneri-tum.secili { box-shadow: 0 0 0 2px var(--accent); }
.oneri-bos { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 14px; }
/* ===== Ana sayfa: vitrin başlığı ve ızgara ===== */
.vt { padding-top: 48px; }
.vt-baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vt-baslik h2 { margin: 0; font-size: 1.375rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.vt-baslik h2::before { content: ""; width: 4px; height: 20px; background: var(--accent); border-radius: 2px; flex: none; }
.vt-tumu { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand-2); white-space: nowrap; }
.vt-tumu::after { content: "→"; transition: transform .15s ease; }
.vt-tumu:hover { color: var(--accent-d); }
.vt-tumu:hover::after { transform: translateX(3px); }
.vt-izgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.vt-ilk { padding-top: 40px; }

/* ===== Geniş kampanya bannerı ===== */
.bn { padding-top: 48px; }
.bn-kutu { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #e6ecf3; border: 1px solid var(--line); color: #fff; }
.bn-resim { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 420; object-fit: cover; transition: transform .5s ease; }
.bn-kutu:hover .bn-resim { transform: scale(1.015); }
.bn-metin { position: absolute; top: 0; bottom: 0; left: 0; width: min(46%, 520px); background: var(--brand); padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
.bn-metin h2 { color: #fff; margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.02em; }
.bn-metin p { margin: 0; color: #c9d7e6; font-size: 15px; max-width: 38ch; }
.bn-btn { margin-top: 6px; display: inline-block; background: var(--accent); color: #fff; padding: 11px 22px; border-radius: var(--r); font-weight: 600; font-size: 14px; transition: background .15s; }
.bn-kutu:hover .bn-btn { background: var(--accent-d); }

/* ===== Asimetrik kategori görselleri (bento) ===== */
.bt-bolum { padding-top: 48px; }
.bt { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 232px)); gap: 12px; }
.bt-kutu { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #e6ecf3; border: 1px solid var(--line); color: var(--ink); }
.bt-kutu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bt-kutu:hover img { transform: scale(1.03); }
.bt-etiket { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1.2; transition: color .15s; }
.bt-etiket i { font-style: normal; color: var(--accent-d); transition: transform .15s ease; }
.bt-kutu:hover .bt-etiket { color: var(--accent-d); }
.bt-kutu:hover .bt-etiket i { transform: translateX(3px); }
.bt-k1 { grid-column: 1; grid-row: 1 / span 2; }
.bt-k2 { grid-column: 2; grid-row: 1; }
.bt-k3 { grid-column: 3; grid-row: 1; }
.bt-k4 { grid-column: 2; grid-row: 2; }
.bt-k5 { grid-column: 3; grid-row: 2; }
.bt-2 { grid-template-columns: 1.6fr 1fr; } .bt-2 .bt-k2 { grid-row: 1 / span 2; }
.bt-3 { grid-template-columns: 1.6fr 1fr; } .bt-3 .bt-k3 { grid-column: 2; grid-row: 2; }
.bt-4 { grid-template-columns: 1.6fr 1fr 1fr; } .bt-4 .bt-k4 { grid-column: 2 / span 2; }

/* ===== Bölünmüş ürün tanıtımı ===== */
.bl { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bl-gorsel { position: relative; overflow: hidden; background: #efe9e1; min-height: 100%; }
.bl-gorsel img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.bl:hover .bl-gorsel img { transform: scale(1.02); }
.bl-metin { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.bl-metin h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.bl-metin p { margin: 0 0 8px; color: var(--muted); max-width: 46ch; }
.bl-sag .bl-gorsel { order: 2; }

/* ===== Tipografi şeridi ===== */
.tp-serit { margin-top: 48px; padding: 28px 0; border-block: 1px solid var(--line); }
.tp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.tp-liste li { font-size: clamp(1.5rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; line-height: 1.15; color: var(--ink); transition: color .15s; cursor: default; }
.tp-liste li:nth-child(even) { color: #a9b4c4; }
.tp-liste li + li::before { content: "/"; margin-right: 28px; color: var(--accent); font-weight: 400; }
.tp-liste li:hover { color: var(--accent-d); }

/* ===== Scroll reveal (yalnızca opacity + transform; JS yoksa veya hareket azaltılmışsa devre dışı) ===== */
[data-reveal=""] { transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal=""]:not(.gorundu) { opacity: 0; transform: translateY(14px); }
.js [data-reveal="liste"]:not(.gorundu) li { opacity: 0; }
.js [data-reveal="liste"].gorundu li { animation: srGir .55s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes srGir { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.reveal-yok [data-reveal=""], .reveal-yok [data-reveal="liste"] li { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal=""] { opacity: 1 !important; transform: none !important; }
  [data-reveal="liste"] li { opacity: 1 !important; animation: none !important; }
  .kart-resim img, .bn-resim, .bt-kutu img, .bl-gorsel img { transition: none !important; }
  .kart:hover .kart-resim img, .bn-kutu:hover .bn-resim, .bt-kutu:hover img, .bl:hover .bl-gorsel img { transform: none; }
}

/* ===== Ana sayfa: duyarlı düzen (vitrin: 5 / 4 / 3 / 2 sütun; eksik satır bırakmamak için fazlalar gizlenir) ===== */
@media (max-width: 1179px) {
  .vt-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-izgara > :nth-child(n+9) { display: none; }
}
@media (max-width: 899px) {
  .vt-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-izgara > :nth-child(9) { display: flex; }
  .vt-izgara > :nth-child(n+10) { display: none; }
  .bt { grid-template-columns: 1fr 1fr; grid-template-rows: 260px repeat(2, 170px); }
  .bt-k1 { grid-column: 1 / span 2; grid-row: 1; }
  .bt-k2 { grid-column: 1; grid-row: 2; } .bt-k3 { grid-column: 2; grid-row: 2; }
  .bt-k4 { grid-column: 1; grid-row: 3; } .bt-k5 { grid-column: 2; grid-row: 3; }
  .bt-2 .bt-k2 { grid-column: 1 / span 2; grid-row: 2; } .bt-3 .bt-k3 { grid-column: 1 / span 2; grid-row: 3; } .bt-4 .bt-k4 { grid-column: 1 / span 2; grid-row: 4; }
  .bl { grid-template-columns: 1fr; }
  .bl-sag .bl-gorsel { order: 0; }
  .bl-metin { padding: 28px; }
  .bn-resim { aspect-ratio: 3 / 1; }
  .bn-metin { position: static; width: auto; padding: 24px 28px; }
}
@media (max-width: 599px) {
  .vt { padding-top: 36px; }
  .vt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vt-izgara > :nth-child(n+9) { display: flex; }
  .vt-baslik h2 { font-size: 1.2rem; }
  .bn, .bt-bolum { padding-top: 36px; }
  .tp-serit, .bl { margin-top: 36px; }
  .bt { grid-template-rows: 200px repeat(2, 140px); gap: 8px; }
  .bt-etiket { left: 8px; bottom: 8px; padding: 6px 10px; font-size: 13px; }
  .tp-serit { padding: 20px 0; }
  .tp-liste { gap: 2px 16px; }
  .tp-liste li + li::before { margin-right: 16px; }
  .bl-metin { padding: 22px; }
}
/* ===== Altbilgi ===== */
.alt { background: var(--brand); color: #b9c8da; margin-top: 32px; font-size: 14px; }
.alt-ic { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.3fr; gap: 40px; padding: 48px 0 32px; }
.alt-baslik { color: #fff; font-weight: 700; margin-bottom: 14px; font-size: 15px; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.alt a { color: #dbe6f2; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt p { margin: 0; max-width: 42ch; }
.alt-telif { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }

/* Dar masaüstü: menü tek satırda kalsın */
@media (min-width: 961px) and (max-width: 1340px) {
  .menu-link { padding: 14px 6px; font-size: 13px; }
  .menu-link::after { left: 6px; right: 6px; }
}

/* ===== Tablet ===== */
@media (max-width: 1100px) {
  .satir-baslik, .satir { grid-template-columns: 76px minmax(0, 1fr) 160px 150px; }
  .satir-min, .satir-baslik .satir-min { display: none; }
  .urun-ust { gap: 28px; }
}
@media (max-width: 960px) {
  .baslik-ic { gap: 12px; padding: 12px 0; flex-wrap: wrap; }
  .menu-ac { display: grid; order: 0; }
  .logo { order: 1; }
  .teklif-btn { order: 2; margin-left: auto; height: 44px; padding: 0 18px; }
  .arama { order: 3; flex-basis: 100%; max-width: none; }
  .arama input { height: 44px; }
  .arama button { top: 4px; }

  .anamenu { display: none; border-top: 1px solid var(--line); }
  .anamenu.acik { display: block; }
  .menu-liste { flex-direction: column; gap: 0; }
  .menu-oge { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
  .menu-oge:first-child { border-top: 0; }
  .menu-link { flex: 1; padding: 14px 4px; }
  .menu-link::after { display: none; }
  .alt-ac { display: block; width: 52px; border: 0; background: none; cursor: pointer; position: relative; }
  .alt-ac::after { content: ""; position: absolute; left: 21px; top: 19px; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .has-mega.acik > .alt-ac::after { transform: rotate(225deg); top: 23px; }
  .mega { position: static; flex-basis: 100%; box-shadow: none; border: 0; background: var(--bg); border-radius: var(--r); margin-bottom: 8px; }
  .has-mega:focus-within > .mega { display: none; }
  .has-mega.acik > .mega { display: block; }
  .mega-ic { display: block; width: 100%; padding: 6px 12px 10px; max-height: 60vh; }
  .mega-yan { display: none; }
  .mega-liste { grid-template-columns: 1fr 1fr; gap: 0; }
  .mega-liste a { padding: 9px 4px; }
  .mega-liste a:hover { background: transparent; }
  .mega-liste img { display: none; }

  .liste-duzen { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .yan { position: static; max-height: none; display: none; }
  .yan.acik { display: block; }
  .filtre-ac { display: inline-block; }
  .urun-ust, .urun-alt { grid-template-columns: minmax(0, 1fr); }
  .galeri, .teklif-kutu { position: static; }
  .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ===== Mobil ===== */
@media (max-width: 720px) {
  .ust-serit { display: none; }
  h1 { font-size: 1.45rem; }
  .logo-yazi { font-size: 1.1rem; }
  .logo-isaret { width: 34px; height: 34px; }
  .slide.m img { aspect-ratio: 6 / 5; }
  .slide-metin { bottom: 30px; padding: 12px 14px; border-radius: 12px; }
  .slide-metin strong { font-size: 1.1rem; }
  .sl-ok { width: 36px; height: 36px; font-size: 18px; }
  .sl-ok.onceki { left: 8px; }
  .sl-ok.sonraki { right: 8px; }
  .bolum { padding-top: 28px; }
  .bolum-baslik h2 { font-size: 1.25rem; }
  .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kart-resim img { padding: 8px; }
  .kart-govde { padding: 2px 12px 12px; }
  .kart-ad { font-size: 13.5px; }
  .kart-fiyat { font-size: 15px; }
  .kat-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kat-kutu { padding: 14px 8px; }
  .kat-kutu img { width: 80px; height: 80px; }
  .alt-kategoriler .kat-kutular { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .alt-kategoriler .kat-kutu { flex: none; width: 190px; scroll-snap-align: start; }
  .mega-liste { grid-template-columns: 1fr; }
  .form-satir { grid-template-columns: minmax(0, 1fr); }
  .alt-ic { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 24px; }
  .urun-bilgi h1 { font-size: 1.5rem; margin-bottom: 14px; }
  .galeri-ana img { padding: 12px; }
  .fiyat-kart { padding: 18px; }
  .fiyat-satir strong { font-size: 1.8rem; }
  .kutu { padding: 18px; }
  .ozellik-tablo > div { grid-template-columns: 1fr; }
  .ozellik-tablo dt { padding-bottom: 2px; }
  .liste-ust { align-items: stretch; }
  .liste-arac { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .liste-arac .filtre-ac { white-space: nowrap; padding-inline: 14px; }
  .siralama { grid-column: 1 / -1; order: 3; }
  .siralama select { width: 100%; }
  .kart-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  .sec-ad em { display: block; margin: 4px 0 0; width: fit-content; }

  /* satır görünümü: iki satırlı karta dönüşür */
  .satir-baslik { display: none; }
  .satir { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "r a" "r s" "r f"; gap: 2px 12px; }
  .satir-resim { grid-area: r; align-self: start; }
  .satir-ad { grid-area: a; }
  .satir-stok { grid-area: s; }
  .satir-fiyat { grid-area: f; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ===== Alt bilgi: marka, sosyal, iletişim ===== */
.alt-logo { display: inline-block; background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.alt-logo img { display: block; height: 64px; width: auto; max-width: 100%; }
.alt-marka p { margin: 0 0 16px; color: #d3deea; max-width: 34ch; }
.alt-sosyal { display: flex; gap: 8px; flex-wrap: wrap; }
.alt-sosyal a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: background .15s, border-color .15s; }
.alt-sosyal a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.alt-iletisim li { line-height: 1.55; }
.btn-wa { background: #1f9d55; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-wa:hover { background: #17824a; color: #fff; }
.btn-wa .ik-sosyal { flex: none; }

/* ===== İçerik sayfaları (Hakkımızda, Banka Bilgileri) ===== */
.sayfa { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 44px; margin-bottom: 24px; }
.sayfa h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 20px; letter-spacing: -.02em; }
.sayfa p { margin: 0 0 16px; font-size: 1.04rem; line-height: 1.75; color: var(--text); }
.sayfa h2 { font-size: 1.3rem; margin: 28px 0 12px; color: var(--brand); letter-spacing: -.01em; }
.sayfa h3 { font-size: 1.1rem; margin: 22px 0 10px; }
.sayfa ul { padding-left: 20px; line-height: 1.75; }
.sayfa-aksiyon { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.banka-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 24px; }
.banka-kart { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; background: #fbfcfe; }
.banka-kart strong { display: block; color: var(--ink); margin-bottom: 8px; }
.banka-iban { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.banka-iban code { font: 600 .98rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--brand); letter-spacing: .02em; overflow-wrap: anywhere; }
.banka-kopya { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.banka-kopya:hover { border-color: var(--accent); color: var(--accent-d); }
.banka-kopya.tamam { border-color: var(--ok); color: var(--ok); }
@media (max-width: 700px) { .sayfa { padding: 24px 20px; } .banka-liste { grid-template-columns: minmax(0, 1fr); } }
/* ===== Sağ alt WhatsApp düğmesi (nefes alan) ===== */
.wa-yuzen { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25a85a; color: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .28); animation: wa-nefes 2.6s ease-in-out infinite; transition: background .15s; }
.wa-yuzen .ik-sosyal { width: 30px; height: 30px; }
.wa-yuzen::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25a85a; z-index: -1; animation: wa-halka 2.6s ease-out infinite; }
.wa-yuzen:hover { background: #1d8f4b; color: #fff; animation-play-state: paused; }
.wa-yuzen:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--brand); }
@keyframes wa-nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes wa-halka { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
@media (max-width: 600px) { .wa-yuzen { right: 14px; bottom: 14px; width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .wa-yuzen, .wa-yuzen::before { animation: none; } }
.sayfa .ql-align-center { text-align: center; }
.sayfa .ql-align-right { text-align: right; }
.sayfa .ql-align-justify { text-align: justify; }
.sayfa blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--accent); color: var(--ink); font-style: italic; }
.sayfa ol { padding-left: 22px; line-height: 1.75; }
.sayfa a { color: var(--brand-2); text-decoration: underline; }
.agac .agac-alt { margin: 2px 0 6px 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.agac .agac-alt a { font-size: .93em; }

.teklif-aksiyon { display: flex; gap: 10px; }
.teklif-aksiyon .btn { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 380px) { .teklif-aksiyon { flex-direction: column; } }

/* ===== Teklif penceresi (modal) ===== */
.urun-alt-tek { grid-template-columns: minmax(0, 1fr); }
html.modal-acik { overflow: hidden; }
.teklif-modal { padding: 0; border: 0; border-radius: 20px; width: min(700px, calc(100% - 32px)); max-height: min(92vh, 900px); background: #fff; color: var(--text); box-shadow: 0 32px 90px rgba(15, 23, 42, .4); overflow: hidden; }
.teklif-modal[open] { display: flex; animation: modal-gir .24s cubic-bezier(.2, .8, .2, 1); }
.teklif-modal::backdrop { background: rgba(15, 23, 42, .6); backdrop-filter: blur(3px); animation: modal-arka .2s ease; }
.modal-kutu { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: inherit; }
.modal-ust { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfe, #fff); flex: none; }
.modal-resim { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; flex: none; }
.modal-baslik { min-width: 0; flex: 1; }
.modal-baslik h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.modal-baslik p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-baslik p span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #eef2f7; font-size: 12px; font-weight: 600; color: var(--text); }
.modal-kapat { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.modal-kapat:hover { background: #eef2f7; color: var(--ink); }
.modal-form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.modal-govde { padding: 6px 22px 18px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.modal-alt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line); background: #fbfcfe; flex: none; }
.modal-alt .btn { min-width: 220px; padding: 13px 22px; }
.modal-alt .btn:disabled { opacity: .65; cursor: progress; }
.modal-not { color: var(--muted); font-size: 12.5px; }
.teklif-modal .secim-ozet { margin-top: 14px; }
.teklif-modal .form-satir { margin-top: 2px; }
.teklif-modal .form input[type=text], .teklif-modal .form input[type=email], .teklif-modal .form input[type=tel], .teklif-modal .form input[type=number] { height: 46px; font-size: 16px; }
.teklif-modal .form textarea { font-size: 16px; min-height: 84px; }
.teklif-modal input[type=file] { font-size: 13.5px; color: var(--muted); }
.teklif-modal input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.teklif-modal input[type=file]::file-selector-button:hover { background: var(--bg); }
.isteke-bagli { color: var(--muted); font-weight: 400; }
.alan-hata-kirmizi { margin: 14px 0 0; background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.modal-basari { padding: 44px 28px 36px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.modal-basari[hidden] { display: none; }
.modal-basari-ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #dcfce7; color: #15803d; animation: modal-pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.modal-basari h3 { margin: 8px 0 0; font-size: 1.35rem; }
.modal-basari p { margin: 0 0 12px; color: var(--muted); max-width: 40ch; }
@keyframes modal-gir { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes modal-arka { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .teklif-modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 94vh; max-height: 94dvh; }
  .teklif-modal[open] { animation: modal-yukari .26s cubic-bezier(.2, .8, .2, 1); }
  .modal-ust { padding: 14px 16px; gap: 12px; }
  .modal-resim { width: 48px; height: 48px; }
  .modal-govde { padding: 4px 16px 16px; }
  .modal-alt { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-alt .btn { width: 100%; min-width: 0; }
  .teklif-modal .form-satir { grid-template-columns: minmax(0, 1fr); }
}
@keyframes modal-yukari { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .teklif-modal[open], .teklif-modal::backdrop, .modal-basari-ikon { animation: none; } }
.modal-form[hidden] { display: none; }

.slide-link { display: block; }
.slide picture { display: block; }