/* ============================================================
   Panorama Promosyon - Yerlesim (LAYOUT)
   Header, footer, grid, bolum yapilari, responsive.
   ============================================================ */

/* --- Kapsayicilar --- */
.kap {
  width: 100%;
  max-width: var(--kap-genis);
  margin: 0 auto;
  padding: 0 var(--b-6);
}

.kap-dar {
  max-width: var(--kap-dar);
}

/* --- DEMO uyari bandi --- */
.demo-bandi {
  position: sticky;
  top: 0;
  z-index: var(--z-demo-bandi);
  background: linear-gradient(90deg, var(--renk-demo-zemin), #fff7f2);
  border-bottom: 1px solid #f3d3bf;
  color: #7c2d12;
  font-size: var(--fs-sm);
  padding: var(--b-2) var(--b-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-3);
  flex-wrap: wrap;
  text-align: center;
}

.demo-bandi strong {
  font-weight: var(--fw-kalin);
  letter-spacing: var(--ls-genis);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  background: var(--renk-demo);
  color: #fff;
  padding: 2px var(--b-2);
  border-radius: var(--r-xs);
}

.demo-bandi a {
  color: #7c2d12;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-bandi a:hover {
  color: var(--renk-demo);
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-yapiskan);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--renk-cizgi);
  transition: box-shadow var(--gecis-normal);
}

body.demo-modda .site-header {
  top: 0;
}

.site-header.kaydirildi {
  box-shadow: var(--golge-md);
}

.header-ic {
  height: var(--header-yukseklik);
  display: flex;
  align-items: center;
  gap: var(--b-6);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  flex-shrink: 0;
}

.logo img,
.logo svg {
  width: 42px;
  height: 42px;
}

.logo-yazi {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-ad {
  font-family: var(--font-baslik);
  font-weight: var(--fw-ekstra);
  font-size: var(--fs-lg);
  color: var(--renk-lacivert-800);
  letter-spacing: var(--ls-sik);
}

.logo-alt {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* NUMEX-DUZELTME (2026-09-30): 10px'lik metin; koyu lacivert zeminde
     altin-600 ile 4.08:1 kaliyordu. Koyu zeminde daha parlak ton kullanilir. */
  color: var(--renk-altin-400);
  font-weight: var(--fw-yari);
}

/* Ana menu */
.ana-menu {
  display: flex;
  align-items: center;
  gap: var(--b-1);
  margin-left: auto;
}

.ana-menu a {
  /* NUMEX-DÜZELTME (2026-09-30): UX denetimi ana menu baglantilarinin dokunma hedefini 39px yukseklikle sinirinda buldu (oneri >=44px, mobil erisilebilirlik). Dikey dolgu artirildi ve min-height verildi. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--b-3) var(--b-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-orta);
  font-size: var(--fs-md);
  color: var(--renk-metin);
  white-space: nowrap;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}

/* NUMEX-DUZELTME (2026-09-30): dokunma hedefi >=44px (WCAG 2.5.8) */
.logo,
.footer-sosyal a,
.teklif-sayac,
.sepet-sil,
.galeri-ok,
.adet-kap button {
  min-height: 44px;
}

.ana-menu a:hover {
  background: var(--renk-lacivert-100);
  color: var(--renk-lacivert-700);
}

.ana-menu a.aktif {
  color: var(--renk-lacivert-800);
  background: var(--renk-lacivert-100);
  font-weight: var(--fw-yari);
}

.header-aksiyon {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  margin-left: var(--b-4);
}

/* Teklif sayaci */
.teklif-sayac {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  padding: var(--b-2) var(--b-4);
  border-radius: var(--r-md);
  border: 1px solid var(--renk-cizgi);
  background: var(--renk-beyaz);
  font-size: var(--fs-sm);
  font-weight: var(--fw-yari);
  color: var(--renk-lacivert-700);
  white-space: nowrap;
  transition: all var(--gecis-hizli);
}

.teklif-sayac:hover {
  border-color: var(--renk-altin-500);
  color: var(--renk-lacivert-800);
  box-shadow: var(--golge-sm);
}

.teklif-sayac .adet {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--r-tam);
  background: var(--renk-lacivert-800);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.teklif-sayac .adet.sifir {
  background: var(--renk-cizgi-koyu);
  color: var(--renk-metin-soluk);
}

/* Hamburger */
.menu-dugme {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--renk-cizgi);
  align-items: center;
  justify-content: center;
  background: var(--renk-beyaz);
  margin-left: auto;
}

.menu-dugme span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--renk-lacivert-800);
  position: relative;
  transition: background var(--gecis-hizli);
}

.menu-dugme span::before,
.menu-dugme span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--renk-lacivert-800);
  transition: transform var(--gecis-normal);
}

.menu-dugme span::before {
  top: -6px;
}
.menu-dugme span::after {
  top: 6px;
}

.menu-dugme[aria-expanded='true'] span {
  background: transparent;
}
.menu-dugme[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}
.menu-dugme[aria-expanded='true'] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobil menu */
.mobil-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--renk-beyaz);
  z-index: var(--z-modal);
  padding: var(--b-6);
  padding-top: calc(var(--header-yukseklik) + var(--b-6));
  transform: translateX(100%);
  transition: transform var(--gecis-normal);
  overflow-y: auto;
  box-shadow: var(--golge-xl);
}

.mobil-menu.acik {
  transform: translateX(0);
}

.mobil-menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--b-1);
}

.mobil-menu nav a {
  padding: var(--b-4);
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-orta);
  color: var(--renk-lacivert-800);
  border-bottom: 1px solid var(--renk-cizgi);
}

.mobil-menu nav a.aktif {
  background: var(--renk-lacivert-100);
  font-weight: var(--fw-yari);
}

.mobil-menu .mobil-kunye {
  margin-top: var(--b-8);
  padding-top: var(--b-6);
  border-top: 1px solid var(--renk-cizgi);
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
}

.mobil-menu .mobil-kunye a {
  color: var(--renk-lacivert-700);
  font-weight: var(--fw-yari);
}

.perde {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 18, 36, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  transition: opacity var(--gecis-normal);
}

.perde.acik {
  display: block;
  opacity: 1;
}

/* --- Ana icerik --- */
main {
  flex: 1 0 auto;
}

.bolum {
  padding: var(--b-16) 0;
}

.bolum-sik {
  padding: var(--b-12) 0;
}

.bolum-koyu {
  background: var(--renk-lacivert-800);
  color: var(--renk-lacivert-100);
}

.bolum-koyu h2,
.bolum-koyu h3 {
  color: var(--renk-beyaz);
}

.bolum-gri {
  background: var(--renk-zemin-alt);
}

.bolum-basligi {
  max-width: 720px;
  margin-bottom: var(--b-10);
}

.bolum-basligi.orta {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bolum-ustbaslik {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* NUMEX-DÜZELTME (2026-09-30): WCAG AA ihlali: .bolum-ustbaslik küçük punto (--fs-xs) metin ama --renk-altin-600 beyaz zeminde 3.57:1, gri zeminde 3.16:1 kalıyordu (eşik 4.5:1). Erişilebilir --renk-altin-metin tonuna (6.20:1 / 5.48:1) geçirildi. */
  /* NUMEX-DUZELTME (2026-09-30): kucuk punto metin icin erisilebilir altin tonu
     (altin-600 beyaz zeminde 3.57:1 kaliyordu; esik 4.5:1). */
  color: var(--renk-altin-metin);
  margin-bottom: var(--b-3);
  position: relative;
  padding-left: var(--b-6);
}

.bolum-ustbaslik::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--renk-altin-500);
  transform: translateY(-50%);
}

.bolum-basligi.orta .bolum-ustbaslik {
  padding-left: 0;
}

.bolum-basligi.orta .bolum-ustbaslik::before {
  display: none;
}

.bolum-aciklama {
  color: var(--renk-metin-soluk);
  font-size: var(--fs-lg);
  line-height: var(--lh-gevsek);
}

.bolum-koyu .bolum-aciklama {
  color: rgba(230, 236, 244, 0.82);
}

/* --- Grid yardimcilari --- */
.grid {
  display: grid;
  gap: var(--b-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-urun {
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--b-6);
}

.grid-kategori {
  /* NUMEX-DÜZELTME (2026-09-30): Kategori kartları artık fotoğraf gösteriyor; 220px dar kalıyor ve fotoğraf kırpılıyordu. 4 sütunlu okunabilir düzen için minimum genişlik 240px'e çekildi. */
  /* NUMEX-DÜZELTME (2026-09-30): Kategori kartları artık FOTOĞRAF gösteriyor.
     220px'lik minimumda görsel aşırı kırpılıyordu; 240px ile kart başına
     anlamlı bir görsel alanı kalır, md ekranda 4 sütun korunur. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--b-5);
}

.grid-otomatik-280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-otomatik-320 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --- Footer --- */
.site-footer {
  background: var(--renk-lacivert-900);
  color: rgba(230, 236, 244, 0.72);
  padding: var(--b-16) 0 var(--b-6);
  margin-top: auto;
  font-size: var(--fs-md);
}

.footer-ust {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--b-10);
  padding-bottom: var(--b-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-marka .logo-ad {
  color: var(--renk-beyaz);
}

.footer-marka p {
  margin-top: var(--b-4);
  max-width: 380px;
  line-height: var(--lh-gevsek);
}

.footer-sosyal {
  display: flex;
  gap: var(--b-3);
  margin-top: var(--b-5);
}

.footer-sosyal a {
  /* NUMEX-DÜZELTME (2026-09-30): UX denetimi footer sosyal medya bağlantılarının dokunma hedefini 40×44px buldu (öneri ≥44×44px). Genişlik 44px'e çıkarıldı — WCAG 2.5.5 uyumu. */
  /* NUMEX-DUZELTME (2026-09-30): WCAG 2.5.5 dokunma hedefi (40x44 -> 44x44). */
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(230, 236, 244, 0.8);
  transition: all var(--gecis-hizli);
}

.footer-sosyal a:hover {
  background: var(--renk-altin-500);
  color: var(--renk-lacivert-900);
  transform: translateY(-2px);
}

.footer-sutun h4 {
  color: var(--renk-beyaz);
  font-size: var(--fs-md);
  margin-bottom: var(--b-4);
  letter-spacing: 0.02em;
}

.footer-sutun ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
}

.footer-sutun a {
  color: rgba(230, 236, 244, 0.72);
  transition: color var(--gecis-hizli), padding-left var(--gecis-hizli);
  /* NUMEX-DÜZELTME (2026-09-30): UX denetimi footer ve alt şerit bağlantılarının dokunma hedefini 17-23px (öneri ≥44px) buldu; WCAG 2.5.5 ihlali. Satır içi bağlantılara dikey padding ve min-height eklenerek hedef alanı büyütüldü — metin boyutu görsel olarak değişmez, yalnızca tıklanabilir alan genişler. */
  /* NUMEX-DUZELTME (2026-09-30): WCAG 2.5.5 dokunma hedefi. Satir ici
     baglantilarin yuksekligi 17-23px kaliyordu (onerilen >=44px). Dikey
     padding ile tiklama alani buyutulur; metin gorunumu degismez. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--b-2) 0;
}

/* Footer alt serit (Site Haritasi / KVKK / NumexAI) baglantilari */
.footer-alt a,
/* NUMEX-DÜZELTME (2026-09-30): WCAG 2.5.5: footer alt şerit bağlantıları 17px yükseklikte kalıyordu. Ayrıca "Powered by NumexAI" bağlantısı 8 ayrı HTML dosyasında satır içi style ile biçimlendirilmişti; bakımı dağınık ve erişilebilirlik kuralı gölgeleniyor. NumexAI bağlantısı .powered-by sınıfıyla CSS'e taşındı, tüm alt şerit bağlantılarına dokunma hedefi uygulandı. */
.footer-iletisim-satir a,
.powered-by {
  /* NUMEX-DUZELTME (2026-09-30): WCAG 2.5.5 - dokunma hedefi >=44px.
     Denetim bu baglantilari 17px yukseklikte buluyordu. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--b-2) 0;
}

.powered-by {
  /* NUMEX (2026-09-30): Satir ici style yerine sinif — 8 sayfada tekrar
     eden "Powered by NumexAI" bagi icin tek kaynak. */
  color: var(--renk-altin-400);
  font-weight: var(--fw-yari);
}

.footer-sutun a:hover {
  color: var(--renk-altin-400);
  padding-left: 4px;
}

.footer-iletisim-satir {
  display: flex;
  gap: var(--b-3);
  align-items: flex-start;
  line-height: var(--lh-normal);
}

.footer-iletisim-satir svg {
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.6;
}

.footer-alt {
  padding-top: var(--b-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--b-4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: rgba(230, 236, 244, 0.55);
}

.footer-alt a {
  color: rgba(230, 236, 244, 0.7);
}

.footer-alt a:hover {
  color: var(--renk-altin-400);
}

/* --- Sayfa basligi (ic sayfalar) --- */
.sayfa-basi {
  /* NUMEX-DÜZELTME (2026-09-30): Denetim sayfa basi metinlerinde hala 1.06:1 kontrast bildiriyordu: .sayfa-basi yalnizca 'background: linear-gradient(...)' kullaniyordu ve denetim araci hesaplarken arka plani cozemedigi icin beyaz sayip metni olcuyordu. Ek olarak 'background-color' yedegi tanimlandi (gradient yuklenmezse de koyu zemin garanti) ve kirinti/sayfa basi metin renkleri tam opak yapildi. */
  /* NUMEX-DUZELTME (2026-09-30): arka plan yalnizca gradient olarak tanimliydi;
     kontrast olcumu duz renk bulamadigi icin metinleri beyaz zeminde saniyordu.
     Duz renk yedegi eklendi ve metin renkleri tam opak yapildi. */
  background-color: var(--renk-lacivert-800);
  background-image: linear-gradient(135deg, var(--renk-lacivert-800) 0%, var(--renk-lacivert-700) 100%);
  color: #ffffff;
  padding: var(--b-12) 0 var(--b-10);
  position: relative;
  overflow: hidden;
}

.sayfa-basi h1,
.sayfa-basi p,
.sayfa-basi .kirinti {
  color: #ffffff;
}

.sayfa-basi::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 91, 0.18) 0%, transparent 70%);
}

.sayfa-basi h1 {
  color: var(--renk-beyaz);
  margin-bottom: var(--b-3);
  position: relative;
}

.sayfa-basi p {
  /* NUMEX-DÜZELTME (2026-09-30): Sayfa basi (koyu lacivert) uzerindeki aciklama metni rgba(230,236,244,.8) ile 1.1:1 kontrast veriyordu; okunmuyordu. Tam opak beyaza yakin degere cekildi. Ayrica kirinti ayrac opakligi de yukseltildi. */
  /* NUMEX-DUZELTME (2026-09-30): kontrast 1.1:1 -> 7.4:1 (WCAG AA) */
  color: #dfe6f1;
  max-width: 680px;
  font-size: var(--fs-lg);
  position: relative;
}

.sayfa-basi .kirinti .ayrac {
  color: #ffffff;
  opacity: 0.85;
}

/* Kirinti yolu - VARSAYILAN (acik zemin) */
/* NUMEX-DÜZELTME (2026-09-30): Kural sirasi. .kirinti varsayilani asagida
   tanimli oldugu icin yukaridaki ".sayfa-basi .kirinti" beyaz rengini EZIYORDU
   (esit ozgulluk, sonra gelen kazanir) — koyu zeminli sayfa basliginda metin
   koyu kaliyordu. Varsayilan secici artik :not() ile sinirlandi; boylece
   sayfa basi icindeki kirinti her zaman beyaz kalir. */
.kirinti {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  font-size: var(--fs-sm);
  /* NUMEX-DÜZELTME (2026-09-30): OKUNMAZLIK. Renk kosulsuz #ffffff yapilmisti.
     Bu, kirinti yolu .sayfa-basi (koyu lacivert) ICINDE oldugunda dogruydu; ancak
     urun.html sayfasinda kirinti .sayfa-basi DISINDA, beyaz zeminde duruyor —
     beyaz ustune beyaz metin = okunmuyor. Artik VARSAYILAN koyu metin rengi
     kullanilir; beyaz yalnizca .sayfa-basi icindeki kirinti icin gecerlidir
     (bkz. yukaridaki .sayfa-basi .kirinti kurali). Kontrast: beyaz zeminde 12.6:1. */
  color: var(--renk-metin-soluk);
  margin-bottom: var(--b-5);
  flex-wrap: wrap;
}

/* Koyu zemin (sayfa basi) icindeki kirinti beyaz kalir — varsayilan kurali ezer */
.sayfa-basi .kirinti,
.sayfa-basi .kirinti a,
.sayfa-basi .kirinti span {
  color: #ffffff;
}

/* NUMEX-DÜZELTME (2026-09-30): Kirinti baglantilari mobilde 56x20px olcuyordu
   (WCAG 2.5.5 hedefi 44x44px). Dokunma alani dikeyde buyutuldu. */
.kirinti a,
.kirinti .ayrac,
.kirinti span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.kirinti a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--renk-altin-400);
}

.kirinti a:hover {
  color: var(--renk-altin-400);
}

.kirinti .ayrac {
  opacity: 0.45;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet genis */
@media (max-width: 1100px) {
  .footer-ust {
    grid-template-columns: 1fr 1fr;
    gap: var(--b-8);
  }
}

/* Tablet */
@media (max-width: 980px) {
  :root {
    --header-yukseklik: 68px;
  }

  .ana-menu,
  .header-aksiyon .teklif-sayac .etiket {
    display: none;
  }

  .ana-menu {
    display: none;
  }

  .menu-dugme {
    display: flex;
  }

  .mobil-menu {
    display: block;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Telefon */
@media (max-width: 680px) {
  .kap {
    padding: 0 var(--b-4);
  }

  .bolum {
    padding: var(--b-10) 0;
  }

  .bolum-sik {
    padding: var(--b-8) 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* NUMEX-DÜZELTME (2026-09-30): MOBIL TASMA. Telefonda urun grid'i
     minmax(158px, 1fr) ile 2 kolona zorlaniyordu. 390px ekranda iki kolon +
     aralar bosluk sigmadigi icin kartlar sikisiyor, kategori/urun adlari harf
     harf dikey kiriliyor ve yan kart ekrandan tasiyordu (katalog kullanilamaz
     haldeydi). Kart icin ASGARI okunabilir genislik 168px'e cekildi; ekran
     dar ise grid KENDILIGINDEN tek kolona duser (auto-fill). */
  .grid-urun {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--b-3);
  }

  /* NUMEX-DÜZELTME (2026-09-30): Kategori kartları artık fotoğraf gösterdiği için 390px telefonda 2 sütun her kartı ~180px'e sıkıştırıyor ve görsel okunmuyordu. Mobilde tek kolon + tam genişlik görsel daha profesyonel durur. */
  /* NUMEX-DÜZELTME (2026-09-30): Fotoğraflı kategori kartları telefonda
     2 sütuna sıkışınca görsel ~180px'e iniyor ve okunmuyordu. Tek kolon. */
  .grid-kategori {
    grid-template-columns: 1fr;
    gap: var(--b-4);
  }

  .kategori-gorsel {
    aspect-ratio: 16 / 9;
  }

  .footer-ust {
    grid-template-columns: 1fr;
    gap: var(--b-8);
  }

  .footer-alt {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .sayfa-basi {
    padding: var(--b-8) 0;
  }

  .logo img,
  .logo svg {
    width: 36px;
    height: 36px;
  }

  .logo-ad {
    font-size: var(--fs-md);
  }
}

/* Cok kucuk ekran */
/* NUMEX-DÜZELTME (2026-09-30): 400px altinda tek kolona dusme kurali, 390px'lik
   yaygin telefonlarda da gecerli olsun diye 420px'e cekildi; boylece dar
   ekranlarda kartlar sikismaz, urun adlari duzgun okunur. */
@media (max-width: 420px) {
  .grid-urun {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}