/* MarketAmbalaj vitrin.
   v10 (26 Eki 2026, kullanıcı B + Archivo'yu seçti): tek aile Archivo (Sofia Sans beğenilmedi); ana sayfada h1 altında eski sitenin kalıbıyla
   sloganlı kare kategori afişleri (lacivert/yeşil, gerçek metin + ürün kesimleri), rehberler kapak fotoğraflı blog kartı.
   v9 (26 Eki 2026, kullanıcı A seçeneğini seçti): başlık + kategori çubuğu BEYAZ, logo plakasız; en üstte logonun lacivertinden (#242478) ince şerit.
   Koyu bloklar (alt bilgi, toptan bandı, 404 kapısı) orman yeşili yerine logo lacivertinin koyusu (#1E1E5C); orman yeşili logoda yoktu.
   v8 renk yönü (25 Eki 2026): sıcak kâğıt beyazı zemin (kroma ~0) + kraft yalnız ürün olmayan yüzeylerde (kategori etiketi, güven şeridi, sepet düğmesi).
   Ürün kartı ve fotoğraf zemini saf beyaz kalır. Canlı OpenCart sepet/ödeme sayfalarının paleti (panel/custom.css v6) henüz bu yöne çekilmedi.
   Rol kilidi: mavi = veri ve gezinme (adet başı fiyat, kırıntı, odak), yeşil = eylem ve olumlama (Sepete Ekle, ücretsiz kargo, stokta).
   v7 (23 Eki 2026, kullanıcı B yönünü seçti) "yumuşak katalog": Sofia Sans Condensed başlık/fiyat/düğme + Sofia Sans gövde, köşe 10/8px, seçimler hap,
   ürünler gölgesiz düz kartta; bilgi blokları (teslimat, ödeme, adres) kutu değil kıl çizgili liste; ikonlar Phosphor Regular.
   Ürün fotoğrafının durduğu yüzey saf beyaz (fotoğraf zeminiyle aynı). */
:root {
  /* OKLCH: bg .976/.004/85, logo laciverti .31/.14/277, koyu blok .27/.11/277, eylem .47/.10/145, mürekkep .24/.018/150, kraft .74/.075/68 */
  --bg: #F8F7F4; --surf: #FEFEFC; --beyaz: #FFFFFF; --tint: #EFECE8; --deep: #1E1E5C; --deep2: #2B2B72; --serit: #242478; --lac: #242478;
  --grn: #326935; --grn2: #26572A; --grn-soft: rgba(50,105,53,.10);
  --blu: #17618C; --blu-soft: rgba(23,97,140,.09);
  --kraft: #CBA277; --kraft2: #D6B189; --kraft-acik: #F2E4D2; --kraft-parlak: #EACBA6; --logo-yesil: #6CB424;
  --txt: #19221B; --txt2: rgba(25,34,27,.74); --txt3: rgba(25,34,27,.66);
  --line: rgba(25,34,27,.11); --line2: rgba(25,34,27,.2);
  --hata: #B4331F;
  --f-govde: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-baslik: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 10px; --r-s: 8px; --pill: 999px;
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 3vw, 36px); --max: 1320px;
  --ust-h: 72px; --men-h: 48px;
  --ease: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1);
  --golge: 0 1px 2px rgba(25,34,27,.05), 0 10px 28px rgba(25,34,27,.07);
  --golge-y: 0 18px 50px rgba(25,34,27,.18);
  /* z sırası */
  --z-menu: 40; --z-ust: 50; --z-perde: 70; --z-cekmece: 80; --z-arama: 90; --z-bildirim: 100; --z-atla: 110;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 400 16px/1.55 var(--f-govde);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: 0; text-wrap: balance; color: var(--txt); font-family: var(--f-baslik); font-weight: 700; }
/* koli baskısı: fiyatlar, düğmeler, sekmeler, menü aynı dar yazıyla */
.dg, .k-fiyat b, .u-fiyat b, .c-toplam, .c-urun .t, .mobil-al .f b, .boy b, .boy span, .kit-toplam b, .as-urun .f,
.mc-ac, .mc-link, .cip, .logo span, .k-rozet, .sepet-dg .tutar, .boylar > span, .secenek legend { font-family: var(--f-baslik); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.ikon { width: 20px; height: 20px; flex: none; }
.atla { position: absolute; left: 12px; top: -60px; z-index: var(--z-atla); background: var(--deep); color: var(--surf); padding: 10px 14px; border-radius: var(--r-s); }
.atla:focus { top: 12px; }

/* ---------- düğmeler ---------- */
.dg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-s);
  font-weight: 700; font-size: 16.5px; letter-spacing: .01em; white-space: nowrap; transition: background-color .18s var(--ease), transform .16s var(--ease), box-shadow .18s var(--ease); }
.dg:active { transform: scale(.97); }
.dg-yesil { background: var(--grn); color: #FBFCFA; }
.dg-cizgi { background: var(--surf); color: var(--txt); box-shadow: inset 0 0 0 1px var(--line2); }
.dg-koyu { background: var(--deep); color: var(--surf); }
.dg[aria-busy="true"] { opacity: .7; pointer-events: none; }
.dg[disabled] { opacity: .5; cursor: not-allowed; }
/* orman yeşili blokların içinde eylem yeşili zeminden ayrışmaz: birincil düğme kraft (başlıktaki sepet gibi) */
.toptan-bant .dg-yesil, .kapi .dg-yesil, .altbilgi .dg-yesil { background: var(--kraft); color: var(--txt); }
.dg-tukendi, .dg-tukendi[disabled] { background: var(--tint); color: var(--txt2); opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .dg-yesil:hover { background: var(--grn2); }
  .toptan-bant .dg-yesil:hover, .kapi .dg-yesil:hover, .altbilgi .dg-yesil:hover { background: var(--kraft2); }
  .dg-cizgi:hover { box-shadow: inset 0 0 0 1px var(--txt3); }
  .dg-koyu:hover { background: var(--deep2); }
}
.ok, .alti, .baglar a, .adresler a { color: var(--blu); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ok:hover, .alti:hover, .baglar a:hover, .adresler a:hover { text-decoration-thickness: 2px; } }

/* adet seçici */
.adet { display: inline-flex; align-items: stretch; height: 44px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line2); background: var(--surf); }
.adet button { width: 38px; border: 0; background: none; font-size: 18px; font-weight: 600; color: var(--txt2); border-radius: var(--r-s); }
.adet input { width: 44px; border: 0; background: none; text-align: center; font-weight: 700; font-size: 15px; -moz-appearance: textfield; }
.adet input::-webkit-outer-spin-button, .adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) and (pointer: fine) { .adet button:hover { color: var(--txt); background: var(--fill, rgba(25,34,27,.05)); } }

/* ---------- üst bölge ---------- */
/* v9: üstte logo lacivertinden ince şerit; başlık + kategori çubuğu beyaz, kıl çizgiyle ayrılır; logo plakasız (logonun kendi renkleri beyazda okunur) */
.serit { background: var(--serit); color: rgba(255,255,255,.88); font-size: 13px; }
.serit .kap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.serit b { color: #FBFCFA; font-weight: 700; }
.serit nav { display: flex; gap: 18px; }
.serit a { color: rgba(255,255,255,.88); }
.serit a:hover { color: #FBFCFA; }
.ust { position: sticky; top: 0; z-index: var(--z-ust); background: var(--surf); box-shadow: 0 1px 0 var(--line); }
.serit :focus-visible, .altbilgi :focus-visible, .toptan-bant :focus-visible, .kapi :focus-visible { outline-color: var(--kraft-parlak); }
.ust-satir { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); height: var(--ust-h); }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo img { width: 76px; height: auto; }
.logo span { font-weight: 700; font-size: 21px; color: var(--txt); }
.logo span b { color: var(--lac); font-weight: 800; }
.ara-alan { flex: 1; max-width: 640px; position: relative; }
.ara-alan input { width: 100%; height: 46px; border: 0; border-radius: var(--r-s); background: var(--bg); padding: 0 14px 0 44px; font-size: 15.5px;
  box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.ara-alan input::placeholder { color: var(--txt3); }
.ara-alan input:focus { outline: none; background: var(--surf); box-shadow: inset 0 0 0 2px var(--blu); }
.ara-alan > .ikon { position: absolute; left: 14px; top: 13px; color: var(--txt3); pointer-events: none; }
.ust-uclar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.uc { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r-s); font-weight: 600; font-size: 14.5px; border: 0; background: none; color: var(--txt); }
.uc .ikon { color: var(--txt2); }
.uc-tel { color: var(--lac); font-weight: 800; }
.uc-tel .ikon { color: var(--lac); }
/* sepet = kraft torba */
.sepet-dg { background: var(--kraft); color: var(--txt); padding: 0 14px 0 12px; }
.sepet-dg .ikon { color: var(--txt); }
.sepet-dg .say { min-width: 22px; height: 22px; border-radius: var(--pill); background: var(--lac); color: #FBFCFA; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; padding: 0 6px; }
.sepet-dg .tutar { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .uc:hover { background: var(--tint); } .sepet-dg:hover { background: var(--kraft2); } }

/* kategori çubuğu + mega menü */
.menu-cubuk { border-top: 1px solid var(--line); }
.menu-cubuk .kap { display: flex; align-items: center; gap: 4px; height: var(--men-h); overflow: hidden; }
.mc-ac { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-s); background: var(--tint); color: var(--txt); font-weight: 700; font-size: 15px; }
.mc-ac[aria-expanded="true"] { background: var(--kraft); color: var(--txt); }
.mc-ac .ikon { width: 18px; height: 18px; }
.mc-link { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 9px; border-radius: var(--r-s); font-weight: 600; font-size: 15px; color: var(--txt2); white-space: nowrap; }
.mc-link[aria-current="page"] { color: var(--txt); box-shadow: inset 0 -2px 0 var(--lac); border-radius: 0; }
.mc-sag { margin-left: auto; display: flex; gap: 2px; }
@media (hover: hover) and (pointer: fine) { .mc-ac:not([aria-expanded="true"]):hover { background: #E5E1DC; } .mc-link:hover { color: var(--txt); background: var(--tint); } }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu); background: var(--surf); box-shadow: var(--golge-y); border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; max-height: calc(100dvh - 160px); overflow: auto; }
.mega.acik { opacity: 1; transform: none; visibility: visible; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mega-ic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding: 26px var(--gut) 30px; max-width: var(--max); margin: 0 auto; }
.mega-kat > a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 15px; color: var(--txt); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mega-kat > a small, .say-k { font-weight: 600; font-size: 12.5px; color: var(--txt3); }
.mega-kat li a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--txt2); }
@media (hover: hover) and (pointer: fine) { .mega-kat a:hover { color: var(--blu); } }
.mega-isletme { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-is { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r); }
.mega-is img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.mega-is b { display: block; font-size: 14.5px; }
.mega-is span { font-size: 12.5px; color: var(--txt3); }
@media (hover: hover) and (pointer: fine) { .mega-is:hover { background: var(--tint); } }

/* ---------- arama paneli ---------- */
.arama-sonuc { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: var(--z-arama); background: var(--surf); border-radius: var(--r); box-shadow: var(--golge-y);
  padding: 8px; max-height: min(70dvh, 560px); overflow: auto; }
.arama-sonuc[hidden] { display: none; }
.as-baslik { font-size: 12.5px; font-weight: 700; color: var(--txt3); padding: 8px 10px 4px; }
.as-kat { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.as-kat a { padding: 6px 12px; border-radius: var(--pill); background: var(--tint); font-size: 13.5px; font-weight: 600; }
.as-urun { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--r-s); }
.as-urun img { width: 52px; height: 52px; object-fit: contain; background: var(--beyaz); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.as-urun b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.as-urun small { color: var(--txt3); font-size: 12.5px; }
.as-urun .f { font-weight: 800; font-size: 14px; white-space: nowrap; }
.as-urun[aria-selected="true"], .as-urun:hover { background: var(--tint); }
.as-urun mark { background: rgba(23,97,140,.16); color: inherit; border-radius: 3px; padding: 0 1px; }
.as-bos { padding: 18px 12px; color: var(--txt2); font-size: 14.5px; }
.as-hepsi { display: block; text-align: center; padding: 10px; font-weight: 700; color: var(--blu); font-size: 14px; }

/* ---------- bölüm iskeleti ---------- */
main { display: block; }
.bolum { padding: clamp(44px, 6vw, 76px) 0; }
.bolum + .bolum { padding-top: 0; }
.b-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.b-bas h2, .b-baslik { font-size: clamp(27px, 2.5vw, 36px); font-weight: 700; line-height: 1.05; }
.b-bas p { color: var(--txt2); font-size: 15px; margin-top: 6px; }
.kirinti { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--txt3); padding-top: 18px; }
.kirinti a { color: var(--blu); font-weight: 600; }
.kirinti span[aria-hidden] { opacity: .6; }

/* ---------- çok satanlar: ana sayfanın ilk bölümü, ortam fotoğraflı 5 ürün (24 Eki 2026: işletme sekmeli öne çıkanlar ve 3B kullanıcı isteğiyle kaldırıldı) ---------- */
.cok-satan { padding: 22px 0 0; }
.cok-satan h1 { font-size: clamp(28px, 3.05vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; color: var(--txt); margin-bottom: 16px; }
.cs-raf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

/* ---------- sloganlı kategori afişleri (v10, 26 Eki 2026): firmanın eski kare afiş kalıbı, logonun lacivert + yeşiliyle.
   Yazı gerçek metin (Archivo 900 italik); ölçüler afişin kendi genişliğine bağlı (--u = 1cqmin), her ekranda aynı oran.
   21st.dev "Offer Carousel" (ravikatiyar162) deseni: yatay kayan şerit + kenar okları; kendiliğinden dönmez. ---------- */
.afis-serit { position: relative; margin-bottom: clamp(20px, 2vw, 28px); }
/* v11 (28 Eki 2026): 6'lı küçük şerit, ürünler ilk ekrana girsin */
.afis-serit .afis-raf { grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; overscroll-behavior-x: contain; }
.afis { --u: 1cqmin; position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; container-type: size; isolation: isolate; }
.afis.l { background: linear-gradient(158deg, #3A3AA6 0%, var(--lac) 46%, #14144A 100%); --c1: #A8DC55; --c2: rgba(255,255,255,.55); --ad: #16164A;
  --leke: linear-gradient(115deg, #CBEC7A 0%, #9AD443 50%, var(--logo-yesil) 100%); }
.afis.y { background: linear-gradient(158deg, #93D046 0%, var(--logo-yesil) 48%, #4A8F18 100%); --c1: #FBFCFA; --c2: rgba(22,22,74,.45); --ad: #1A1A5E;
  --leke: linear-gradient(115deg, #FDFDFB 0%, #F1F2FA 60%, #E2E4F2 100%); }
.af-cizim { position: absolute; inset: 0; z-index: 0; }
.af-c { position: absolute; height: calc(var(--u) * 1.5); border-radius: var(--pill); background: var(--c1); }
.af-c.b { background: var(--c2); }
.af-x { position: absolute; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }
.af-x::before, .af-x::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: calc(var(--u) * .55); margin-top: calc(var(--u) * -.27); border-radius: 2px; background: rgba(255,255,255,.85); transform: rotate(45deg); }
.af-x::after { transform: rotate(-45deg); }
.af-yazi { position: absolute; z-index: 2; left: 12%; right: 8%; top: 7%; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--f-baslik); font-style: italic; line-height: 1; }
.af-ust, .af-hap { position: relative; z-index: 3; }
.af-ust { margin-left: 15%; font-weight: 800; font-size: calc(var(--u) * 6.2); }
.af-hap { margin-top: calc(var(--u) * 1.6); padding: .32em .8em .36em; border-radius: var(--pill); background: #16164A; font-weight: 800; font-size: calc(var(--u) * 4.6); }
.afis.l .af-ust { color: #FBFCFA; } .afis.l .af-hap { color: #B8E46A; }
.afis.y .af-ust { color: #16164A; } .afis.y .af-hap { color: #FBFCFA; }
.af-ad { position: relative; z-index: 2; display: block; max-width: 88%; margin: calc(var(--u) * 3.2) 0 0 7%; font-weight: 900; font-size: calc(var(--u) * var(--fs, 10));
  line-height: .98; letter-spacing: -.01em; color: var(--ad); text-wrap: balance; overflow-wrap: normal; word-break: keep-all; }
/* leke: kategori adının arkasındaki yeşil/beyaz şekil + dört hız kuyruğu, yazı uzadıkça birlikte büyür */
.af-ad::before, .af-t { content: ''; position: absolute; z-index: -1; background: var(--leke); border-radius: var(--pill); }
.af-ad::before { left: calc(var(--u) * -9); right: calc(var(--u) * -7); top: calc(var(--u) * -8.5); bottom: calc(var(--u) * -6.5); border-radius: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 3) rgba(10,10,40,.22); }
.af-t { height: calc(var(--u) * 6.6); }
.af-t.t1 { left: calc(var(--u) * -21); width: 44%; top: 42%; }
.af-t.t2 { right: calc(var(--u) * -15); width: 46%; top: calc(var(--u) * -12.5); }
.af-t.t3 { right: calc(var(--u) * -19); width: 58%; bottom: calc(var(--u) * -11); height: calc(var(--u) * 8); }
.af-t.t4 { left: calc(var(--u) * 2); width: 38%; bottom: calc(var(--u) * -14.5); }
.af-urun { position: absolute; z-index: 1; left: 2%; right: 2%; bottom: 3%; height: 44%; display: flex; align-items: flex-end; justify-content: center; }
.af-urun img { flex: 0 1 auto; min-width: 0; width: auto; height: var(--h); max-width: 52%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 1.8) rgba(8,8,30,.38)); transform: rotate(var(--d, 0deg)); }
.af-urun img + img { margin-left: -5%; }
/* oklar şeridin kenarında, afişin üstünde */
.af-ok { position: absolute; inset: 50% -14px auto; z-index: 3; justify-content: space-between; margin-top: -22px; pointer-events: none; }
.afis-serit .af-ok button { pointer-events: auto; border-radius: var(--pill); background: var(--beyaz); box-shadow: 0 2px 10px rgba(16,16,48,.22); }
.afis-serit .af-ok button[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .af-urun img { transition: transform .5s var(--ease); }
  .afis:hover .af-urun img { transform: rotate(var(--d, 0deg)) translateY(calc(var(--u) * -1.2)); }
  .afis-serit .af-ok button:not([disabled]):hover { box-shadow: 0 2px 10px rgba(16,16,48,.22), inset 0 0 0 1px var(--txt); }
}

/* ---------- rehber kartları (v10, 26 Eki 2026, kullanıcı: "blog post gibi"): kapak fotoğrafı + etiket ve okuma süresi + başlık + özet.
   21st.dev "Blog Grid Section" (efferd) deseni; tarih yok (rehberlerin yayın tarihi henüz yok) ---------- */
.rehber { margin-bottom: clamp(28px, 3vw, 40px); }
.cok-satan .rehber { margin-top: clamp(32px, 3.4vw, 48px); }
.rh-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.rh-bas h2 { font-family: var(--f-govde); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--txt2); }
.rh-bas .alti { font-size: 14.5px; }
.rh-kart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.rh-kart.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rh-kart a { display: block; }
.rh-kapak { display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.rh-kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--txt3); }
.rh-meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 8px; border-radius: var(--pill); background: currentColor; vertical-align: middle; }
.rh-kart b { display: block; margin-top: 3px; font-family: var(--f-baslik); font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.2; color: var(--txt); transition: color .2s var(--ease); }
.rh-oz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--txt2); }
@media (hover: hover) and (pointer: fine) { .rh-kart a:hover img { transform: scale(1.04); } .rh-kart a:hover b { color: var(--blu); } }

/* rehber yazı sayfası: metin ~70ch, tablo kıl çizgili, adet başı mavi (veri rolü) */
.rh-yazi { padding-bottom: 8px; }
.rh-yazi > p, .rh-yazi > h2 { max-width: 74ch; }
.rh-yazi p { color: var(--txt2); font-size: 16.5px; line-height: 1.65; margin-top: 12px; }
.rh-yazi h2 { font-size: clamp(23px, 2vw, 28px); margin-top: 36px; }
.rh-yazi strong { color: var(--txt); font-weight: 700; }
/* sık sorulanlar: soru h3, cevap hemen altında (arama sonucunda soru-cevap olarak okunur) */
.rh-yazi > h3 { max-width: 74ch; font-size: 18px; line-height: 1.35; margin-top: 24px; }
.rh-yazi h3 + p { margin-top: 6px; }
.rh-tablo-kap { margin-top: 16px; overflow-x: auto; overscroll-behavior-x: contain; }
.rh-tablo { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rh-tablo th { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--txt2); padding: 10px 16px 9px 0; white-space: nowrap; border-bottom: 1px solid var(--line2); }
.rh-tablo td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.rh-tablo th:last-child, .rh-tablo td:last-child { padding-right: 0; }
.rh-tablo .s, .rh-tablo td[data-e="Teslim"] { text-align: right; white-space: nowrap; }
.rh-tablo td[data-e="Teslim"] { text-align: left; }
.rh-tablo .ad { min-width: 220px; }
.rh-tablo .ad a { font-weight: 650; color: var(--txt); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.rh-tablo .bas { font-family: var(--f-baslik); font-weight: 700; font-size: 17px; white-space: nowrap; }
.rh-tablo .b { color: var(--blu); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .rh-tablo .ad a:hover { text-decoration-color: currentColor; } }
@media (max-width: 767px) {
  .rh-kart b { font-size: 19px; }
  .rh-oz { font-size: 14px; }
  .rh-yazi p { font-size: 16px; }
  /* telefonda tablo satırı = başlık (ilk hücre + ürün adı) + "etiket ... değer" satırları */
  .rh-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rh-tablo, .rh-tablo tbody, .rh-tablo tr { display: block; }
  .rh-tablo tr { padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
  .rh-tablo td, .rh-tablo td.s { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .rh-tablo td::before { content: attr(data-e); flex: none; font-family: var(--f-govde); font-size: 13.5px; font-weight: 600; color: var(--txt2); text-align: left; }
  .rh-tablo td:first-child, .rh-tablo td.ad { display: block; text-align: left; padding: 0 0 4px; }
  .rh-tablo td:first-child::before, .rh-tablo td.ad::before { content: none; }
  .rh-tablo .ad { min-width: 0; }
}
.kat-bas + .izgara { margin-top: 18px; }

/* çekmece ve mobil menünün kapatma düğmesi */
.hz-kapat { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; color: var(--txt2); display: grid; place-items: center; }
.hz-kapat:hover { background: var(--tint); }
.perde { position: fixed; inset: 0; z-index: var(--z-perde); background: rgba(14,14,40,.38); opacity: 0; transition: opacity .2s var(--ease); }
.perde.acik { opacity: 1; }
.perde[hidden] { display: none; }

/* seçenek alanı (ürün sayfası) */
.secenek label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 650; color: var(--txt2); }
.secenek select { height: 42px; border: 0; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line2); background: var(--surf); padding: 0 12px; font-weight: 600; color: var(--txt); }
.secenek select.eksik { box-shadow: inset 0 0 0 2px var(--hata); }
.secenek .tek { font-weight: 700; color: var(--txt); }
.sonuc { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--grn2); }
.sonuc.hata { color: var(--hata); }
.sonuc a { margin-left: 6px; color: var(--blu); text-decoration: underline; }

/* ---------- güven satırı (firmanın kendi alt bilgi blokları) ---------- */
.guven { padding-top: 22px; }
/* kraft şerit: ürün olmayan yüzey */
.guven ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--kraft); border-radius: var(--r); }
.guven li { padding: 16px 20px; }
.guven li + li { box-shadow: -1px 0 0 rgba(25,34,27,.18); }
.guven b { display: block; font-family: var(--f-baslik); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--txt); }
.guven span { display: block; font-size: 14.5px; color: rgba(25,34,27,.86); margin-top: 2px; }
.guven a { color: var(--txt); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- kategoriler: depo bölmeleri ---------- */
.kat-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kat-kutu { position: relative; display: grid; grid-template-rows: 150px auto; background: var(--kraft-acik); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.kat-kutu.genis { grid-column: span 2; }
.kat-vitrin { position: relative; background: var(--beyaz); display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 16px 18px 12px; }
.kat-vitrin img { height: auto; max-height: 118px; width: auto; max-width: 34%; object-fit: contain; transition: transform .25s var(--ease); }
.kat-kutu.genis .kat-vitrin img { max-width: 22%; }
/* beyaz zeminli ürün fotoğrafı (kesim yoksa): kenar boşluğu taşıdığı için daha büyük ve ortada */
.kat-vitrin:has(img.foto) { align-items: center; gap: 2%; padding: 6px 12px; }
.kat-vitrin img.foto { max-height: 138px; max-width: 36%; }
.kat-vitrin img.foto:only-child { max-width: 60%; }
.kat-bilgi { padding: 12px 18px 18px; }
.kat-bilgi h3 { font-size: 21px; font-weight: 700; line-height: 1.1; }
.kat-bilgi h3 a::after { content: ''; position: absolute; inset: 0; }
.kat-bilgi .say-k { display: block; margin-top: 3px; }
/* alt kategoriler: virgüllü düz satır (hap yığını değil) */
.kat-alt { margin-top: 8px; position: relative; z-index: 1; font-size: 14px; color: var(--txt3); line-height: 1.5; }
.kat-alt a { color: var(--txt2); }
.kat-alt a + a::before { content: ', '; color: var(--txt3); }
@media (hover: hover) and (pointer: fine) {
  .kat-kutu:hover .kat-vitrin img { transform: translateY(-4px); }
  .kat-kutu:hover h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .kat-alt a:hover { color: var(--blu); text-decoration: underline; }
}

/* ---------- ürün kartı ---------- */
/* düz kart: gölge yok, yalnız ince çerçeve */
.kart { position: relative; display: flex; flex-direction: column; background: var(--beyaz); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.k-gorsel { display: block; position: relative; aspect-ratio: 1; background: var(--beyaz); border-bottom: 1px solid var(--line); overflow: hidden; }
.k-gorsel img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform .3s var(--ease); }
.k-gorsel img.foto { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-gorsel img.yer { inset: 30%; width: 40%; height: 40%; opacity: .22; filter: grayscale(1); }
/* ortam fotoğrafı (gerçek kullanım yeri) önde; üzerine gelince ürünün kendi fotoğrafı */
.k-gorsel img[data-paket] { opacity: 0; transition: opacity .25s var(--ease); }
.k-gorsel img.ortam { transition: opacity .25s var(--ease), transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .kart:hover .k-gorsel img.ortam { opacity: 0; }
  .kart:hover .k-gorsel img[data-paket] { opacity: 1; }
}
.k-rozet { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 2px 9px; border-radius: var(--pill); font-size: 13px; font-weight: 700;
  background: var(--beyaz); color: var(--txt2); box-shadow: inset 0 0 0 1px var(--line2); }
.k-rozet.ind { background: var(--grn); color: var(--surf); box-shadow: none; }
.k-rozet.yok { color: var(--hata); }
.k-govde { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; flex: 1; }
.k-ad { font-weight: 500; font-size: 15px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.k-kod { font-size: 12px; color: var(--txt3); }
.k-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: auto; padding-top: 4px; }
.k-fiyat b { font-size: 23px; font-weight: 700; line-height: 1.1; }
.k-fiyat s { font-size: 13px; color: var(--txt3); }
.k-birim { font-size: 13px; font-weight: 600; color: var(--blu); width: 100%; }
/* Dar kartta (5'li raf 1024-1180 px) adet ile düğme sığmazsa düğme alt satıra iner; adet üst satırı doldurur.
   Tek satırda boş yerin 1/1001'i adete düştüğü için geniş kartlarda görünüm değişmez. */
.k-islem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.k-islem .adet { height: 40px; flex: 1 0 auto; }
.k-islem .adet button { width: 30px; }
.k-islem .adet input { width: 34px; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.k-islem .dg { flex: 1000 1 0%; min-height: 40px; padding: 0 10px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .kart:hover .k-gorsel img { transform: scale(1.04); }
  .kart:hover .k-ad a { text-decoration: underline; text-underline-offset: 3px; }
}
.izgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.izgara.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* .tam: kısa vitrin ızgarası son satırda tek kart bırakmasın (5/4/3/2 sütunda 10/8/9/10 kart) */

/* yatay raf (Ayın En Çok Tercih Edilen Ürünleri) */
.kaydir-kap { position: relative; }
.kaydir { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 0 2px; overscroll-behavior-x: contain; }
.kaydir::-webkit-scrollbar { display: none; }
.kaydir > * { scroll-snap-align: start; }
.kaydir-ok { display: flex; gap: 8px; }
.kaydir-ok button { width: 44px; height: 44px; border: 0; border-radius: var(--r-s); background: var(--surf); box-shadow: inset 0 0 0 1px var(--line2); display: grid; place-items: center; color: var(--txt); transition: opacity .2s; }
.kaydir-ok button[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .kaydir-ok button:not([disabled]):hover { box-shadow: inset 0 0 0 1px var(--txt); } }

/* ---------- ödeme ve teslimat ---------- */
.teslimat-ic { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 3vw, 44px); align-items: start; }
/* teslimat ve ödeme: kutu yok, kıl çizgili liste (sevk irsaliyesi satırları gibi) */
.teslimat-ic .b-baslik { margin-bottom: 14px; }
.yol, .odeme { border-top: 1px solid var(--line2); }
.yol li, .o-satir, .destek { padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
.yol b, .o-satir b, .destek b { display: block; font-family: var(--f-baslik); font-size: 18px; font-weight: 700; line-height: 1.2; }
.yol p, .o-satir p, .destek p { color: var(--txt2); font-size: 15px; margin-top: 3px; max-width: 62ch; }
.baglar { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.odeme h3 { font-size: 15px; font-weight: 600; font-family: var(--f-govde); color: var(--txt3); padding: 10px 0 0; }
.kartlar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 10px; }
.kartlar img { width: auto; height: auto; }
.destek a { color: var(--blu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- markalar şeridi ---------- */
.markalar-serit { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  display: flex; background: var(--beyaz); border-block: 1px solid var(--line); }
.markalar-serit:focus-visible { outline-offset: 4px; }
.ms-iz { display: flex; align-items: center; gap: 56px; padding: 22px 28px; flex: none; }
.ms-iz img { height: auto; max-height: 52px; width: auto; }
.markalar-serit.akar .ms-iz { animation: akis var(--sure, 40s) linear infinite; }
.markalar-serit.akar:hover .ms-iz, .markalar-serit.akar:focus-within .ms-iz, .markalar-serit:not(.gorunur) .ms-iz { animation-play-state: paused; }
@keyframes akis { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .markalar-serit { overflow-x: auto; } .markalar-serit .ms-iz { animation: none !important; } }

/* ---------- hakkımızda kısa ---------- */
.hakkinda-ic { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.h-metin p { color: var(--txt2); margin-top: 12px; max-width: 68ch; font-size: 16.5px; }
.h-metin .b-baslik { margin-bottom: 4px; }
/* mağaza adresleri: üç eşit kart değil, adres defteri satırları */
.adresler { border-top: 1px solid var(--line2); }
.adresler li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 13px 0 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.adresler b { font-family: var(--f-baslik); font-size: 18px; font-weight: 700; line-height: 1.2; }
.adresler span { grid-column: 1; color: var(--txt2); }
.adresler a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14.5px; white-space: nowrap; }

/* ---------- alt bilgi ---------- */
.altbilgi { margin-top: clamp(44px, 6vw, 76px); background: var(--deep); color: rgba(252,253,254,.82); font-size: 14.5px; }
.altbilgi a { color: rgba(252,253,254,.86); }
.altbilgi a:hover { color: var(--surf); }
.a-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr; gap: 28px; padding-top: 48px; padding-bottom: 36px; }
.a-logo { display: inline-block; background: var(--surf); border-radius: 12px; padding: 8px 12px; }
.a-logo img { width: 96px; }
.a-marka p { margin-top: 14px; font-size: 13.5px; max-width: 34ch; }
.altbilgi h2 { font-size: 15px; font-weight: 800; color: var(--surf); margin-bottom: 12px; letter-spacing: 0; }
.altbilgi li + li { margin-top: 7px; }
.bulten p { font-size: 13.5px; margin-bottom: 10px; }
.bulten form { display: grid; gap: 10px; }
.bulten .b-satir { display: flex; gap: 8px; }
.bulten input[type=email] { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: var(--r-s); padding: 0 14px; background: rgba(252,253,254,.1); color: var(--surf); box-shadow: inset 0 0 0 1px rgba(252,253,254,.22); }
.bulten input[type=email]::placeholder { color: rgba(252,253,254,.62); }
.bulten input[type=email]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--kraft-parlak); }
.bulten label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.bulten label input { margin-top: 3px; accent-color: var(--grn); }
.bulten label a { text-decoration: underline; }
.bulten .sonuc { color: var(--kraft-parlak); }
.bulten .sonuc.hata { color: #FFB4A6; }
.a-alt { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(252,253,254,.12); font-size: 13px; }
.sosyal { display: flex; gap: 14px; }

/* ---------- sepet çekmecesi ---------- */
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-cekmece); width: min(430px, 100vw); background: var(--surf); box-shadow: var(--golge-y);
  display: flex; flex-direction: column; transform: translateX(104%); transition: transform .32s var(--ease-io); }
.cekmece.acik { transform: none; }
.cekmece[hidden] { display: none; }
.c-bas { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.c-bas h2 { font-size: 22px; font-weight: 700; }
.c-kargo { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.c-kargo b { color: var(--grn2); }
.c-cubuk { height: 8px; border-radius: var(--pill); background: var(--tint); margin-top: 8px; overflow: hidden; }
.c-cubuk i { display: block; height: 100%; width: 100%; background: var(--grn); border-radius: var(--pill); transform-origin: left; transform: scaleX(var(--o, 0)); transition: transform .5s var(--ease); }
.c-liste { flex: 1; overflow: auto; padding: 6px 20px; }
.c-urun { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.c-urun img { width: 64px; height: 64px; object-fit: contain; background: var(--beyaz); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.c-urun b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; }
.c-urun small { display: block; color: var(--txt3); font-size: 12.5px; margin-top: 3px; }
.c-urun .t { font-weight: 800; font-size: 14.5px; white-space: nowrap; text-align: right; }
.c-urun .sil { margin: 6px 0 0 12px; border: 0; background: none; padding: 0; color: var(--txt3); font-size: 12.5px; text-decoration: underline; vertical-align: middle; }
.c-urun .adet { height: 34px; margin-top: 8px; }
.c-urun .adet button { width: 30px; font-size: 16px; }
.c-urun .adet input { width: 34px; font-size: 13.5px; }
.c-bos { padding: 40px 0; text-align: center; color: var(--txt2); }
.c-alt { padding: 16px 20px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.c-toplam { display: flex; justify-content: space-between; font-weight: 700; font-size: 20px; }
.c-toplam small { display: block; font-weight: 500; font-size: 12.5px; color: var(--txt3); }
.c-alt .dg { width: 100%; min-height: 48px; }

/* sepete uçan ürün görseli (site.js ucur) */
.ucan { position: fixed; z-index: var(--z-bildirim); pointer-events: none; will-change: transform; }
.ucan img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); background: var(--beyaz); box-shadow: 0 10px 28px rgba(25,34,27,.24); will-change: transform, opacity; }
/* kayan fiyat basamağı (site.js rakamYaz): kutu taşanı keser, basamak alttan/üstten girer */
.rk { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; }
.rk > span { display: inline-block; }

/* bildirim */
.bildirim { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-bildirim); transform: translate(-50%, 20px); opacity: 0; background: var(--deep); color: var(--surf); padding: 12px 16px;
  border-radius: var(--r); font-size: 14.5px; font-weight: 600; box-shadow: var(--golge-y); display: flex; gap: 14px; align-items: center; transition: opacity .2s var(--ease), transform .2s var(--ease); max-width: calc(100vw - 24px); }
.bildirim.acik { opacity: 1; transform: translate(-50%, 0); }
.bildirim button { border: 0; background: none; color: var(--kraft-parlak); font-weight: 800; padding: 0; }

/* ---------- kategori sayfası ---------- */
.kat-bas { padding: 18px 0 8px; }
.kat-bas h1 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 700; line-height: 1; color: var(--txt); }
.kat-bas p { color: var(--txt2); margin-top: 6px; }
.alt-cipler { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 4px; }
.alt-cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--pill); background: var(--surf); box-shadow: inset 0 0 0 1px var(--line2);
  font-weight: 600; font-size: 16px; color: var(--txt); border: 0; }
.cip small { color: var(--txt3); font-weight: 600; }
.cip[aria-current="page"], .cip[aria-pressed="true"] { background: var(--deep); color: var(--surf); box-shadow: none; }
.cip[aria-current="page"] small, .cip[aria-pressed="true"] small { color: rgba(252,253,254,.72); }
@media (hover: hover) and (pointer: fine) { .cip:not([aria-current]):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--deep); } }
.arac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0 18px; }
.arac .say-sonuc { font-size: 14px; color: var(--txt2); margin-right: auto; }
.arac input[type=search], .arac select { height: 42px; border: 0; border-radius: var(--r-s); background: var(--surf); box-shadow: inset 0 0 0 1px var(--line2); padding: 0 12px; font-size: 14px; }
.arac input[type=search] { width: min(260px, 100%); }
.arac input:focus, .arac select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blu); }
.arac label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt2); }
.bos-sonuc { padding: 40px 0; color: var(--txt2); }
.ilgili-is { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- ürün sayfası ---------- */
.urun-ic { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); padding-top: 18px; align-items: start; }
.galeri { position: sticky; top: calc(var(--ust-h) + var(--men-h) + 18px); }
.g-buyuk { aspect-ratio: 1; background: var(--beyaz); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden; }
.g-buyuk img { width: 100%; height: 100%; object-fit: contain; }
/* ortam fotoğrafı + 3B ile küçük resim sayısı 6'yı bulabiliyor: dar sütunda şerit yana kayar, sütunu genişletmez */
.g-kucuk { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.g-kucuk::-webkit-scrollbar { display: none; }
.g-kucuk button { flex: none; width: 74px; height: 74px; border: 0; padding: 4px; background: var(--beyaz); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.g-kucuk button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blu); }
.g-kucuk img { width: 100%; height: 100%; object-fit: contain; }
.u-bilgi h1 { font-size: clamp(28px, 2.7vw, 40px); font-weight: 700; line-height: 1.05; color: var(--txt); }
.u-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--txt2); }
.u-meta .stok { color: var(--grn2); font-weight: 700; }
.u-meta .stok.yok { color: var(--hata); }
.u-fiyat { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.u-fiyat b { font-size: clamp(36px, 3.4vw, 48px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.u-fiyat s { color: var(--txt3); font-size: 17px; }
.u-birim { margin-top: 4px; color: var(--blu); font-weight: 700; font-size: 15px; }
.u-ozet { margin-top: 16px; color: var(--txt2); max-width: 60ch; }
.boylar { margin-top: 22px; }
.boylar > span { display: block; font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.boy-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.boy { display: block; padding: 9px 12px 10px; border-radius: var(--r-s); background: var(--surf); box-shadow: inset 0 0 0 1px var(--line2); }
.boy b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.boy span { display: block; font-size: 16px; font-weight: 600; margin-top: 3px; }
.boy i { display: block; font-style: normal; font-size: 12.5px; color: var(--blu); font-weight: 600; }
.boy[aria-current="page"], .boy:has(input:checked) { box-shadow: inset 0 0 0 2px var(--deep); background: var(--beyaz); }
.boy:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: 2px; }
.u-satin .secenek > label { display: grid; gap: 5px; }
@media (hover: hover) and (pointer: fine) { .boy:not([aria-current]):hover { box-shadow: inset 0 0 0 1px var(--deep); } }
.u-satin { margin-top: 22px; padding: 18px 0 16px; border-top: 1px solid var(--line2); }
.u-satin .secenek { display: grid; gap: 10px; margin-bottom: 14px; }
.u-islem { display: flex; gap: 10px; }
.u-islem .adet { height: 52px; }
.u-islem .dg { flex: 1; min-height: 52px; font-size: 16px; }
.u-not { margin-top: 10px; font-size: 14px; color: var(--txt2); }
.u-wa { margin-top: 12px; display: inline-flex; }
.teslim { margin-top: 6px; display: grid; gap: 0; border-top: 1px solid var(--line2); }
.teslim li { padding: 11px 0 12px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.teslim b { display: block; font-family: var(--f-baslik); font-size: 17px; font-weight: 700; }
.teslim span { display: block; color: var(--txt2); }
.teslim .c-cubuk { margin-top: 8px; }
.u-alt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); margin-top: clamp(34px, 4vw, 56px); }
.u-alt h2 { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.u-alt .metin p { color: var(--txt2); max-width: 68ch; }
.u-alt .metin p + p { margin-top: 10px; }
.oz { display: grid; grid-template-columns: max-content 1fr; margin: 16px 0 0; border-block: 1px solid var(--line2); }
.oz dt, .oz dd { margin: 0; padding: 10px 14px 10px 0; font-size: 15px; border-top: 1px solid var(--line); }
.oz dt { color: var(--txt2); font-weight: 650; }
.oz dd { font-weight: 600; }
.oz dt:first-of-type, .oz dt:first-of-type + dd { border-top: 0; }
.u-pnot { margin-top: 12px; font-size: 14px; color: var(--txt2); }
.kullanan { display: flex; flex-wrap: wrap; gap: 8px; }
.mobil-al { display: none; }

/* ---------- işletme sayfası ---------- */
.kit-liste { margin-top: 18px; background: var(--surf); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.kit-satir { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; }
.kit-satir + .kit-satir { border-top: 1px solid var(--line); }
.kit-satir img { width: 64px; height: 64px; object-fit: contain; background: var(--beyaz); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.kit-satir a b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.kit-satir small { display: block; font-size: 12.5px; color: var(--txt3); margin-top: 2px; }
.kit-satir .f { text-align: right; font-weight: 800; white-space: nowrap; }
.kit-satir .f i { display: block; font-style: normal; font-size: 12px; font-weight: 650; color: var(--blu); }
.kit-satir .adet { height: 38px; }
.kit-toplam { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px; border-top: 1px solid var(--line2); }
.kit-toplam b { font-size: 20px; font-weight: 800; }
.diger-is { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- iletişim / hakkımızda / 404 ---------- */
/* kapı: metin koyu panelde, depo kapısı fotoğrafı yanında (metin tabelanın üstüne binmesin) */
.kapi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--r); overflow: hidden; min-height: 440px; margin-top: 18px; background: var(--deep); }
.kapi > img { grid-column: 2; grid-row: 1; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.kapi::after { content: ''; grid-column: 2; grid-row: 1; background: linear-gradient(90deg, var(--deep) 0, rgba(30,30,92,0) 24%); pointer-events: none; }
.kapi-metin { grid-column: 1; grid-row: 1; align-self: center; padding: clamp(24px, 4vw, 48px); color: var(--surf); }
.kapi-metin h1 { color: var(--surf); font-size: clamp(34px, 3.6vw, 54px); font-weight: 700; line-height: 1; }
.kapi-metin p { color: rgba(252,253,254,.9); margin-top: 10px; }
.kapi-metin p b { white-space: nowrap; }
.kapi-metin .dg { margin-top: 18px; }
.kapi-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kapi-cipler a { padding: 6px 12px; border-radius: var(--r-s); background: rgba(252,253,254,.12); color: var(--surf); font-size: 14.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(252,253,254,.3); }
.kapi-cipler a:hover { background: rgba(252,253,254,.26); }
.duz-metin { max-width: 760px; }
.duz-metin h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.duz-metin p { color: var(--txt2); margin-top: 12px; }
.ilet-izgara { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(22px, 4vw, 52px); margin-top: 26px; align-items: start; }
.ilet-bilgi { border-top: 1px solid var(--line2); }
.ilet-bilgi li { display: grid; grid-template-columns: minmax(130px, .7fr) 1fr; gap: 4px 16px; padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
.ilet-bilgi b { font-family: var(--f-baslik); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ilet-bilgi div span, .ilet-bilgi div a { display: block; color: var(--txt2); font-size: 15px; }
.ilet-bilgi div a { color: var(--blu); font-weight: 600; }
.form { border-top: 1px solid var(--line2); padding: 18px 0 0; display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: var(--txt2); }
.form input:not([type=checkbox]), .form textarea { border: 0; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line2); background: var(--surf); padding: 11px 13px; font-size: 15px; color: var(--txt); }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blu); }
.form .eksik { box-shadow: inset 0 0 0 2px var(--hata) !important; }
.form .onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.form .onay input { margin-top: 4px; accent-color: var(--grn); }
.form .onay a { color: var(--blu); text-decoration: underline; }
.harita { margin-top: 26px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); aspect-ratio: 21 / 8; background: var(--tint); }
.harita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- toptan satış (23 Eki 2026): ana sayfadaki tek koyu bant + toptan.html teklif formu ---------- */
/* bant kapı panelinin akrabası: koyu metin paneli + depo koridoru fotoğrafı; sayfadaki tek renk bloğu */
.toptan-bant { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--deep); border-radius: var(--r); overflow: hidden; }
.toptan-bant > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 60%; }
.tb-metin { align-self: center; padding: clamp(24px, 4vw, 48px); }
.tb-metin h2 { color: var(--surf); font-size: clamp(27px, 2.5vw, 36px); font-weight: 700; line-height: 1.05; }
.tb-metin p { color: rgba(252,253,254,.88); margin-top: 10px; max-width: 48ch; }
.tb-metin .dgler, .form .dgler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.form .dgler { margin-top: 2px; }
.dg-acik { background: rgba(252,253,254,.1); color: var(--surf); box-shadow: inset 0 0 0 1px rgba(252,253,254,.32); }
@media (hover: hover) and (pointer: fine) { .dg-acik:hover { background: rgba(252,253,254,.2); } }
.kapi-depo > img { object-position: 50% 55%; }
.toptan-izgara { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.yan-baslik { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
aside .yan-baslik ~ .yan-baslik { margin-top: 28px; }
.yan-metin { color: var(--txt2); margin-bottom: 14px; }
.f-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form select { height: 44px; border: 0; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line2); background: var(--surf); padding: 0 12px; font-size: 15px; color: var(--txt); }
.form select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blu); }
/* ürün listesi: başlıktaki aramanın aynısı, sonuç seçilince satır olarak listeye girer */
.t-urunler { border: 0; padding: 0; margin: 0; min-width: 0; }
.t-urunler legend { font-size: 14px; font-weight: 650; color: var(--txt2); padding: 0; margin-bottom: 6px; }
.t-ara { max-width: none; }
.form .t-ara input { width: 100%; height: 46px; padding: 0 14px 0 44px; }
.t-ara .arama-sonuc { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: min(60dvh, 420px); }
.t-ara .as-urun { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.t-ara .as-urun:hover, .t-ara .as-urun[aria-selected="true"] { background: var(--tint); }
.t-liste { margin-top: 10px; border-top: 1px solid var(--line); }
.t-liste:empty { display: none; }
.t-satir { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 40px; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.t-satir img { width: 48px; height: 48px; object-fit: contain; background: var(--beyaz); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.t-ad a { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.t-ad small { color: var(--txt3); font-size: 12.5px; }
.t-mik { display: flex; gap: 6px; }
.form .t-mik input { width: 76px; height: 40px; padding: 0 8px; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.form .t-mik select { height: 40px; padding: 0 8px; font-weight: 600; }
.t-sil { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: none; color: var(--txt3); }
@media (hover: hover) and (pointer: fine) { .t-sil:hover { background: var(--tint); color: var(--hata); } }
.t-bos { margin-top: 8px; font-size: 13.5px; color: var(--txt3); }
.form .t-ara input.eksik { box-shadow: inset 0 0 0 2px var(--hata); }
.u-toptan { margin-top: 12px; font-size: 14.5px; color: var(--txt2); }
.kat-bas p .alti { white-space: nowrap; }

/* ---------- mobil alt çubuk ---------- */
.alt-cubuk { display: none; }
.mobil-menu { position: fixed; inset: 0 auto 0 0; z-index: var(--z-cekmece); width: min(360px, 88vw); background: var(--surf); box-shadow: var(--golge-y); transform: translateX(-104%);
  transition: transform .3s var(--ease-io); display: flex; flex-direction: column; }
.mobil-menu.acik { transform: none; }
.mobil-menu[hidden] { display: none; }
.mm-ic { overflow: auto; padding: 8px 18px 24px; flex: 1; }
.mm-ic details { border-bottom: 1px solid var(--line); }
.mm-ic summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 750; list-style: none; cursor: pointer; }
.mm-ic summary::-webkit-details-marker { display: none; }
.mm-ic summary .ikon { transition: transform .2s var(--ease); }
.mm-ic details[open] summary .ikon { transform: rotate(180deg); }
.mm-ic details ul { padding: 0 0 12px; }
.mm-ic details li a { display: flex; justify-content: space-between; padding: 8px 0; color: var(--txt2); font-size: 15px; }
.mm-linkler { padding-top: 14px; display: grid; gap: 4px; }
.mm-linkler a { padding: 10px 0; font-weight: 650; }

/* ---------- duyarlı ---------- */
@media (max-width: 1400px) { .mc-sag { display: none; } }
@media (max-width: 1180px) {
  .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kaydir { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
  .a-izgara { grid-template-columns: 1fr 1fr 1fr; }
  .a-marka, .bulten { grid-column: span 3; }
  .bulten { max-width: 520px; }
  .uc-tel span, .uc-hesap span { display: none; }
  .mc-sag { display: none; }
  .mega-ic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .izgara.tam > :nth-child(n+9) { display: none; }
}
@media (max-width: 1023px) {
  :root { --ust-h: 64px; }
  .serit nav { display: none; }
  .menu-cubuk { display: none; }
  .izgara.tam > :nth-child(n+9) { display: flex; }
  .izgara.tam > :nth-child(n+10) { display: none; }
  .galeri { top: calc(var(--ust-h) + 16px); }
  .alt-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .cs-raf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 12px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; scroll-padding: 0 var(--gut); overscroll-behavior-x: contain; }
  .cs-raf::-webkit-scrollbar { display: none; }
  .cs-raf > * { scroll-snap-align: start; }
  /* afişler ve rehber kartları da raf gibi kenara taşar, parmakla kayar */
  .afis-serit .afis-raf { grid-auto-columns: calc((100% - 3 * 14px) / 4); margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scroll-padding: 0 var(--gut); }
  .af-ok { display: none; }
  .rh-kart, .rh-kart.uclu { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 16px) / 2.4); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; scroll-padding: 0 var(--gut); overscroll-behavior-x: contain; }
  .rh-kart::-webkit-scrollbar { display: none; }
  .rh-kart > li { scroll-snap-align: start; }
  .teslimat-ic, .hakkinda-ic, .ilet-izgara { grid-template-columns: 1fr; }
  .toptan-bant { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kat-kutu.genis { grid-column: span 2; }
  .izgara, .izgara.d4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kaydir { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .guven ul { grid-template-columns: 1fr; }
  .guven li { padding: 11px 16px 12px; }
  .guven li + li { box-shadow: 0 -1px 0 rgba(25,34,27,.18); }
  body { padding-bottom: 66px; }
  .alt-cubuk { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-ust); background: var(--surf);
    box-shadow: 0 -1px 0 var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .alt-cubuk a, .alt-cubuk button { display: grid; justify-items: center; gap: 2px; padding: 9px 0 8px; border: 0; background: none; font-size: 11.5px; font-weight: 650; color: var(--txt2); position: relative; }
  .alt-cubuk .ikon { width: 22px; height: 22px; color: var(--deep2); }
  .alt-cubuk .say { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: var(--pill); background: var(--grn); color: var(--surf); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
  .ust-uclar .sepet-dg, .uc-hesap { display: none; }
  .bildirim { bottom: 80px; }
  .urun-sayfa .alt-cubuk { display: none; }
  .urun-sayfa { padding-bottom: 78px; }
  .mobil-al { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-ust); background: var(--surf); box-shadow: 0 -1px 0 var(--line);
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); }
  .mobil-al .f b { display: block; font-size: 18px; font-weight: 800; }
  .mobil-al .f span { font-size: 12px; color: var(--blu); font-weight: 650; }
  .mobil-al .dg { margin-left: auto; min-height: 48px; padding: 0 22px; }
}
@media (max-width: 767px) {
  .urun-ic, .u-alt { grid-template-columns: minmax(0, 1fr); }
  .galeri { position: static; }
  .izgara.tam > :nth-child(n+10) { display: flex; }
  .kapi { grid-template-columns: 1fr; min-height: 0; }
  .kapi > img { grid-column: 1; aspect-ratio: 4 / 3; height: auto; }
  .kapi::after { grid-column: 1; background: linear-gradient(0deg, var(--deep) 0, rgba(30,30,92,0) 26%); }
  .kapi-metin { grid-row: 2; padding-top: 6px; }
  .toptan-bant { grid-template-columns: 1fr; }
  .toptan-bant > img { grid-row: 1; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .f-ikili { grid-template-columns: 1fr; }
  .t-satir { grid-template-columns: 48px minmax(0, 1fr) 40px; }
  .t-mik { grid-column: 2; grid-row: 2; }
  .t-sil { grid-column: 3; grid-row: 1; }
  .ust-satir { gap: 10px; }
  .logo img { width: 64px; }
  .logo span { display: none; }
  .ara-alan input { height: 44px; font-size: 16px; padding: 0 10px 0 38px; }
  .ara-alan input::placeholder { font-size: 14.5px; }
  /* telefonda açılır kutu girişe değil ekrana yaslanır (dar girişte ürün adları kelime kelime kırılıyordu) */
  .arama-sonuc { position: fixed; left: 8px; right: 8px; top: var(--as-ust, 112px); max-height: calc(100dvh - var(--as-ust, 112px) - 76px); }
  .ara-alan > .ikon { top: 12px; left: 12px; }
  .uc-tel { padding: 0 10px; }
  .serit .kap { justify-content: center; text-align: center; }
  .izgara, .izgara.d4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kaydir { grid-auto-columns: 46%; gap: 10px; }
  .cs-raf { grid-auto-columns: 46%; gap: 10px; }
  .afis-serit .afis-raf { grid-auto-columns: 40%; gap: 10px; }
  .rh-kart, .rh-kart.uclu { grid-auto-columns: 74%; gap: 12px; }
  .kat-izgara { gap: 10px; }
  .kat-kutu { grid-template-rows: 112px auto; }
  .kat-vitrin img { max-height: 84px; }
  .kat-vitrin img.foto { max-height: 100px; }
  .kat-alt { display: none; }
  .k-govde { padding: 10px 12px 12px; }
  .k-ad { font-size: 14.5px; }
  .k-fiyat b { font-size: 20px; }
  .k-islem .adet { display: none; }
  .b-bas { align-items: flex-start; flex-direction: column; }
  .b-bas .kaydir-ok { display: none; }
  .kit-satir { grid-template-columns: 56px 1fr; }
  .kit-satir .f { text-align: left; }
  .kit-satir .adet, .kit-satir .f { grid-column: 2; }
  .harita { aspect-ratio: 4 / 3; }
  .a-izgara { grid-template-columns: 1fr 1fr; }
  .a-marka, .bulten { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}