/* =========================================================================
   GASTROSHOP
   Palet dogrudan markanin logosundan alindi: lacivert #00285C ve turuncu #FF7000.
   Lacivert tasiyici renk, turuncu yalnizca fiyat ve eylem dugmelerinde.
   Ucuncu ton olarak kraft kagit, sattigimiz malzemenin kendi rengi.
   ========================================================================= */

:root {
  --ink:        #0B1524;
  --brand:      #00285C;
  --brand-koyu: #001B3F;
  --brand-acik: #E7EDF5;
  --vurgu:      #FF7000;
  --vurgu-acik: #FFF1E4;
  --kraft:      #F7F2E9;
  --kraft-cizgi:#E9E0CE;
  --cizgi:      #E1E6EE;
  --sonuk:      #5F6E85;
  --yumusak:    #F4F7FB;
  --beyaz:      #fff;
  --uyari:      #b42318;
  --basari:     #0E7C52;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --golge: 0 1px 2px rgba(0,40,92,.06), 0 8px 24px rgba(0,40,92,.08);
  --kap: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--beyaz);
}

h1, h2, h3, h4, .fiyat__ana {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 .5em;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 4px;
}

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 20px; }

.atla {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 999;
}
.atla:focus { left: 12px; top: 12px; }

.kucuk { font-size: 13px; color: var(--sonuk); }

/* ---------------------------------------------------------------- ust cubuk */
.ustcubuk {
  background: var(--ink);
  color: #cbd6d0;
  font-size: 13px;
}
.ustcubuk__ic {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.ustcubuk__sol { display: flex; gap: 10px; align-items: center; }
.ustcubuk a:hover { color: #fff; }

/* ------------------------------------------------------------------- baslik */
.baslik { border-bottom: 1px solid var(--cizgi); background: var(--beyaz); }
.baslik__ic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 28px;
  padding-top: 18px; padding-bottom: 18px;
}

.logo { display: block; line-height: 0; }
.logo img { height: 44px; width: auto; }
.logo--dip img { height: 40px; }
@media (max-width: 700px) { .logo img { height: 36px; } }

.arama { display: flex; position: relative; }
.arama input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--cizgi); border-radius: 999px;
  padding: 13px 54px 13px 22px;
  font-size: 15px; background: var(--yumusak); color: var(--ink);
}
.arama input:focus {
  background: var(--beyaz); border-color: var(--brand); outline: none;
}
.arama button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
}
.arama button:hover { background: var(--brand-koyu); }

.sepetdug {
  display: flex; align-items: center; gap: 9px; position: relative;
  font-weight: 600; white-space: nowrap;
}
.sepetdug__rozet {
  position: absolute; top: -6px; left: 14px;
  background: var(--vurgu); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
}

/* ------------------------------------------------------- sabit baslik bolgesi
   Onceki surumde hicbir baslik ogesinde position:sticky yoktu: asagi
   kaydirinca kategori cubugu ekrandan cikiyordu ve musteri baska kategoriye
   gecmek icin en yukari donmek zorunda kaliyordu. Katalog buyudukce bu daha
   cok can sikici hale geldi.

   Cozum: ust cubuk + baslik + kategori cubugu tek sticky kapsayicida.
   Kaydirinca "kucuk" sinifi geliyor ve bolge inceliyor -- kategoriler
   gorunur kaliyor, ekranin ustunde gereksiz yer kaplanmiyor. */
.baslikbolge {
  position: sticky; top: 0; z-index: 100;
  background: var(--beyaz);
  transition: box-shadow .2s;
}
.baslikbolge--kucuk { box-shadow: 0 6px 22px rgba(11, 21, 36, .10); }

/* Kaydirilmis durumda ust cubuk gizlenir, baslik incelir */
.baslikbolge--kucuk .ustcubuk {
  max-height: 0; overflow: hidden; opacity: 0;
}
.ustcubuk { transition: max-height .22s, opacity .18s; max-height: 60px; }

.baslikbolge--kucuk .baslik__ic { padding-top: 8px; padding-bottom: 8px; }
.baslik__ic { transition: padding .2s; }
.baslikbolge--kucuk .logo img { height: 42px; width: auto; }
.logo img { transition: height .2s; }

/* Sabit baslik, sayfa ici capa baglantilarinin altinda kalmasin */
:target { scroll-margin-top: 190px; }

/* --------------------------------------------------------------------- menu */
.menu {
  border-bottom: 1px solid var(--cizgi); background: var(--beyaz);
  position: relative;   /* mega panel buna gore konumlanir */
}
.menu__ic { display: flex; align-items: stretch; gap: 20px; }

.menu__tumu {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  padding: 0 20px; border-radius: var(--r-s);
  margin: 8px 0; font-weight: 600; font-size: 14px;
  white-space: nowrap;
}
.menu__tumu:hover { background: var(--brand); }
.menu__tumu[aria-expanded="true"] { background: var(--brand); }
.menu__tumu[aria-expanded="true"] .menu__ok { transform: rotate(180deg); }
.menu__ok { transition: transform .18s; }
.menu__izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu__izgara i { width: 5px; height: 5px; background: currentColor; border-radius: 1px; }

/* Kategori satiri tasmasin: sarmak yerine yatay kaydiriliyor.
   Ustteki "Tum kategoriler" panelinde hepsi zaten var, bu yuzden
   cubuktan birkac tanesinin gorunmemesi kayip degil. */
.menu__liste {
  display: flex; flex: 1; gap: 2px; margin: 0; padding: 0; list-style: none;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu__liste::-webkit-scrollbar { display: none; }

.menu__oge { position: relative; }
.menu__oge > a {
  display: flex; align-items: center; gap: 5px; height: 100%;
  padding: 16px 13px; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menu__oge--alt > a::after {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: .55;
}
.menu__oge:hover > a { color: var(--brand); border-bottom-color: var(--vurgu); }

.menu__alt {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 250px; margin: 0; padding: 8px; list-style: none;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Alt kategorisi cok olan baslikta tek kolon ekran boyunu asiyordu */
.menu__alt--iki {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; min-width: 460px;
}
.menu__oge:hover .menu__alt,
.menu__oge:focus-within .menu__alt {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu__alt a {
  display: block; padding: 9px 14px; border-radius: var(--r-s); font-size: 14px;
}
.menu__alt a:hover { background: var(--brand-acik); color: var(--brand-koyu); }

/* ---------------------------------------------------------------- mega menu
   Tum kategori agaci: ust kategori kolon basligi, alt kategoriler altinda.
   Kolon sayisi ekran genisligine gore kendiliginden ayarlaniyor. */
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
  background: var(--beyaz);
  border-top: 1px solid var(--cizgi);
  border-bottom: 3px solid var(--vurgu);
  box-shadow: 0 22px 44px rgba(11, 21, 36, .16);
  /* Cok kategoride panel ekrani asabilir; sabit baslik payi dusuluyor */
  max-height: calc(100vh - 190px); overflow-y: auto;
}
.mega[hidden] { display: none; }
.mega__ic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 4px 26px;
  padding: 26px 0 30px;
  align-items: start;
}
.mega__kolon { break-inside: avoid; margin-bottom: 18px; }
.mega__ust {
  display: block; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--brand); padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--cizgi);
}
.mega__ust:hover { color: var(--brand-koyu); }
.mega__alt { list-style: none; margin: 0; padding: 0; }
.mega__alt a {
  display: block; padding: 5px 0; font-size: 13.5px;
  color: var(--govde); line-height: 1.45;
}
.mega__alt a:hover { color: var(--brand); }
.mega__bos { margin: 4px 0 0; font-size: 13px; color: var(--sonuk); }

/* Panel acikken arkayi karart: odak menude kalsin */
.megafon {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(11, 21, 36, .38);
  border: 0; padding: 0; cursor: default;
}

.menu__tel {
  display: flex; flex-direction: column; justify-content: center;
  text-align: right; white-space: nowrap; padding-left: 12px;
}
.menu__tel strong { font-size: 17px; font-family: Manrope, sans-serif; }
.menu__tel small { color: var(--sonuk); font-size: 12px; }

/* --------------------------------------------------------------------- hero */
.hero { padding: 28px 0 8px; }
.hero__ic {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
  background: linear-gradient(120deg, var(--kraft) 0%, #fdf9f2 60%, var(--brand-acik) 100%);
  border: 1px solid var(--kraft-cizgi);
  border-radius: var(--r-l); overflow: hidden;
}
.hero__metin { padding: 56px 52px; }
.hero__etiket {
  display: inline-block; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(30px, 3.4vw, 46px); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__alt { font-size: 17px; color: var(--sonuk); max-width: 42ch; margin: 0 0 28px; }
.hero__gorsel {
  background: var(--brand); position: relative;
  display: grid; place-items: center; padding: 40px; color: #fff;
}
.hero__istatistik { text-align: center; }
.hero__istatistik b {
  display: block; font-family: Manrope, sans-serif;
  font-size: 62px; font-weight: 800; line-height: 1;
}
.hero__istatistik span { font-size: 15px; opacity: .82; }

/* ------------------------------------------------------------ kategori kutu */
.bolum { padding: 46px 0; }
.bolum__ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.bolum h2 { font-size: 26px; margin: 0; }
.bolum__ust a { font-weight: 600; color: var(--brand); font-size: 14px; }

.katizgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.katkutu {
  display: block; text-align: center; padding: 26px 14px;
  border-radius: var(--r-m); border: 1px solid transparent;
  background: var(--yumusak); transition: transform .16s, box-shadow .16s;
}
.katkutu:hover { transform: translateY(-3px); box-shadow: var(--golge); }
.katkutu__ad { display: block; font-weight: 600; font-size: 15px; }
.katkutu__adet { display: block; font-size: 13px; color: var(--sonuk); margin-top: 3px; }
.katkutu__ikon {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 24px;
}
/* kutular sirayla farkli pastel tonlar alir */
.katizgara > :nth-child(6n+1) { background: #EAF0F8; }
.katizgara > :nth-child(6n+2) { background: #FDF3E7; }
.katizgara > :nth-child(6n+3) { background: #EDF1F7; }
.katizgara > :nth-child(6n+4) { background: #F8EFEA; }
.katizgara > :nth-child(6n+5) { background: #F1F0F8; }
.katizgara > :nth-child(6n+6) { background: #EFF3F9; }

/* ----------------------------------------------------------- urun kartlari */
.urunizgara {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.kart {
  display: flex; flex-direction: column;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--beyaz); overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.kart:hover {
  border-color: var(--brand); box-shadow: var(--golge); transform: translateY(-2px);
}
.kart__gorsel {
  position: relative; aspect-ratio: 1; background: var(--yumusak);
  display: grid; place-items: center; padding: 14px;
}
.kart__gorsel img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kart__bos { color: var(--sonuk); font-size: 12px; }

.kart__rozet {
  position: absolute; top: 10px; left: 10px;
  background: var(--vurgu); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}
.kart__rozet--yok { background: var(--sonuk); }

.kart__govde { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.kart__marka {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 5px;
}
.kart__ad {
  font-size: 14px; font-weight: 500; line-height: 1.45; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* stok kodu bu sektorde urun adindan daha cok kullaniliyor -- one aliyoruz */
.kart__kod {
  font-size: 11px; color: var(--sonuk); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; margin-bottom: 10px;
}
.kart__fiyat {
  margin-top: auto; font-family: Manrope, sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.kart__kdv { font-size: 12px; font-weight: 500; color: var(--sonuk); }

/* ------------------------------------------------------------------ dugme */
.dug {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border: 0; border-radius: var(--r-s);
  background: var(--brand); color: #fff; font-weight: 600; font-size: 15px;
  transition: background .16s;
}
.dug:hover { background: var(--brand-koyu); color: #fff; }
.dug--vurgu { background: var(--vurgu); }
.dug--vurgu:hover { background: #e56a0d; }
.dug--cizgi {
  background: transparent; color: var(--ink); border: 1.5px solid var(--cizgi);
}
.dug--cizgi:hover { background: var(--yumusak); color: var(--ink); border-color: var(--ink); }
.dug--wa { background: #25d366; }
.dug--wa:hover { background: #1eb455; }
.dug--tam { width: 100%; }
.dug[disabled] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------- ic sayfalar */
.izyolu {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--sonuk); padding: 18px 0;
}
.izyolu a:hover { color: var(--brand); }

.sayfabas { padding-bottom: 10px; }
.sayfabas h1 { font-size: 30px; margin-bottom: 6px; }
.sayfabas p { color: var(--sonuk); margin: 0; }

.altkatlar { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 24px; }
.altkatlar a {
  padding: 7px 15px; border: 1px solid var(--cizgi); border-radius: 999px;
  font-size: 14px; background: var(--beyaz);
}
.altkatlar a:hover { border-color: var(--brand); background: var(--brand-acik); }

.araccubuk {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; padding: 0 0 20px;
}
.araccubuk select {
  padding: 9px 14px; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-s); background: var(--beyaz); font: inherit;
}

.sayfalama { display: flex; gap: 6px; justify-content: center; padding: 40px 0 0; }
.sayfalama a, .sayfalama span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: var(--r-s); font-weight: 600;
}
.sayfalama .aktif { background: var(--brand); color: #fff; border-color: var(--brand); }

.bosdurum {
  text-align: center; padding: 70px 20px; background: var(--yumusak);
  border-radius: var(--r-m);
}
.bosdurum h2 { font-size: 22px; }
.bosdurum p { color: var(--sonuk); max-width: 46ch; margin: 0 auto 22px; }

/* -------------------------------------------------------------- urun detay */
.urun { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 12px 0 50px; }
.urun__gorseller { position: sticky; top: 20px; align-self: start; }
.urun__buyuk {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  aspect-ratio: 1; display: grid; place-items: center;
  padding: 30px; background: var(--yumusak);
}
.urun__buyuk img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.urun__kucukler { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.urun__kucukler button {
  width: 74px; height: 74px; padding: 6px; background: var(--yumusak);
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
}
.urun__kucukler button[aria-current="true"] { border-color: var(--brand); }
.urun__kucukler img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.urun h1 { font-size: 28px; }
.urun__marka {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
}

.kunye {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 20px;
  padding: 18px 0; margin: 18px 0; font-size: 14px;
  border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
}
.kunye dt { color: var(--sonuk); }
.kunye dd { margin: 0; font-weight: 600; }

.fiyat { margin: 22px 0; }
.fiyat__ana { font-size: 38px; color: var(--ink); margin: 0; }
.fiyat__eski {
  font-size: 18px; color: var(--sonuk); text-decoration: line-through;
  margin-right: 10px; font-weight: 500;
}
.fiyat__not { font-size: 13px; color: var(--sonuk); }

.sepetform { display: flex; gap: 12px; align-items: stretch; margin: 24px 0; }
.adetsec {
  display: flex; align-items: center;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s); overflow: hidden;
}
.adetsec button { width: 44px; border: 0; background: var(--yumusak); font-size: 18px; }
.adetsec button:hover { background: var(--cizgi); }
.adetsec input {
  width: 60px; border: 0; text-align: center; font: inherit; font-weight: 600;
  -moz-appearance: textfield;
}
.adetsec input::-webkit-outer-spin-button,
.adetsec input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.aciklama { padding-top: 20px; line-height: 1.75; }
.aciklama h2 { font-size: 20px; }
.aciklama img { border-radius: var(--r-s); margin: 14px 0; }
.aciklama ul { padding-left: 20px; }

/* ------------------------------------------------------------------- sepet */
.sepetduzen { display: grid; grid-template-columns: 1fr 370px; gap: 32px; padding: 12px 0 60px; }

.sepetsatir {
  display: grid; grid-template-columns: 92px 1fr auto auto;
  gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--cizgi);
}
.sepetsatir__gorsel {
  width: 92px; height: 92px; background: var(--yumusak);
  border-radius: var(--r-s); display: grid; place-items: center; padding: 8px;
}
.sepetsatir__gorsel img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sepetsatir__ad { font-weight: 600; }
.sepetsatir__tutar { font-family: Manrope, sans-serif; font-weight: 700; font-size: 17px; }
.sepetsatir__sil {
  background: 0; border: 0; color: var(--sonuk); font-size: 13px;
  text-decoration: underline;
}
.sepetsatir__sil:hover { color: var(--uyari); }

.ozet {
  background: var(--yumusak); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 26px; align-self: start;
  position: sticky; top: 20px;
}
.ozet h2 { font-size: 19px; }
.ozet__satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 14px;
}
.ozet__toplam {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1.5px solid var(--cizgi); margin-top: 12px; padding-top: 16px;
}
.ozet__toplam b { font-family: Manrope, sans-serif; font-size: 26px; }
.ozet .dug { margin-top: 18px; }

.kargobilgi {
  background: var(--brand-acik); color: var(--brand-koyu);
  border-radius: var(--r-s); padding: 11px 14px; font-size: 13px; margin-top: 14px;
}

/* -------------------------------------------------------------------- form */
.formizgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan--tam { grid-column: 1 / -1; }
.alan label { font-size: 14px; font-weight: 600; }
.alan input, .alan textarea, .alan select {
  padding: 12px 15px; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-s); font: inherit; background: var(--beyaz); color: var(--ink);
}
.alan input:focus, .alan textarea:focus, .alan select:focus {
  border-color: var(--brand); outline: none;
}
.alan textarea { resize: vertical; min-height: 96px; }
.alan--hata input, .alan--hata textarea, .alan--hata select { border-color: var(--uyari); }
.alan__hata { font-size: 13px; color: var(--uyari); }

.onaykutu { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.onaykutu input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

.uyarikutu {
  background: #fdf2f1; border: 1px solid #f5c9c4; color: var(--uyari);
  border-radius: var(--r-s); padding: 13px 16px; margin-bottom: 20px; font-size: 14px;
}

/* ----------------------------------------------------- yonlendirme / sonuc */
body.tekil { display: grid; place-items: center; min-height: 100vh; background: var(--yumusak); }
.yonlendirme__kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: 52px 44px; text-align: center; max-width: 460px; box-shadow: var(--golge);
}
.spinner {
  width: 42px; height: 42px; margin: 0 auto 22px;
  border: 3px solid var(--cizgi); border-top-color: var(--brand);
  border-radius: 50%; animation: don .9s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.sonuc { max-width: 620px; margin: 60px auto; text-align: center; padding: 0 20px 70px; }
.sonuc__ikon {
  width: 76px; height: 76px; margin: 0 auto 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 36px; color: #fff;
}
.sonuc__ikon--ok { background: var(--basari); }
.sonuc__ikon--hata { background: var(--uyari); }
.sonuc__ikon--bekle { background: var(--vurgu); }
.sonuc h1 { font-size: 28px; }
.sonuc p { color: var(--sonuk); }
.sonuc__kutu {
  background: var(--yumusak); border-radius: var(--r-m);
  padding: 22px; margin: 26px 0; text-align: left;
}
.sonuc__dugmeler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------- guven */
.guven { background: var(--kraft); border-top: 1px solid var(--kraft-cizgi); }
.guven__ic {
  display: grid; gap: 20px; padding: 34px 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.guven__oge strong { display: block; font-size: 15px; }
.guven__oge span { font-size: 13px; color: var(--sonuk); }

/* --------------------------------------------------------------------- dip */
.dip { background: var(--ink); color: #b9c5bf; }
.dip__ic {
  display: grid; gap: 40px; padding: 54px 20px;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
}
.dip h3 {
  color: #fff; font-size: 15px; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 16px;
}
.dip ul { list-style: none; margin: 0; padding: 0; }
.dip li { margin-bottom: 10px; font-size: 14px; }
.dip a:hover { color: #fff; }
.dip p { font-size: 14px; }
.dip__iletisim { margin-top: 16px; line-height: 1.9; }
.dip__destek .dug { margin: 14px 0 10px; }
.dip__alt { border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.dip__alt-ic {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 20px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------ yuzen */
.yuzen {
  position: fixed; left: 18px; z-index: 60;
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.yuzen--wa { bottom: 22px; background: #25d366; }
.yuzen--wa:hover { background: #1eb455; color: #fff; }
.yuzen--yukari { bottom: 84px; background: var(--ink); }
.yuzen--yukari[hidden] { display: none; }

/* -------------------------------------------------------------- duyarlilik */
@media (max-width: 1080px) {
  .dip__ic { grid-template-columns: 1fr 1fr; }
  .hero__ic { grid-template-columns: 1fr; }
  .hero__gorsel { padding: 30px; }
  .hero__metin { padding: 40px 32px; }
}

@media (max-width: 900px) {
  .urun { grid-template-columns: 1fr; gap: 30px; }
  .urun__gorseller { position: static; }
  .sepetduzen { grid-template-columns: 1fr; }
  .ozet { position: static; }
  .menu__tel { display: none; }
}

@media (max-width: 700px) {
  .baslik__ic {
    grid-template-columns: 1fr auto; gap: 14px 18px;
  }
  .arama { grid-column: 1 / -1; grid-row: 2; }
  .sepetdug__yazi { display: none; }
  .menu__tumu { display: none; }
  .formizgara { grid-template-columns: 1fr; }
  .sepetsatir { grid-template-columns: 68px 1fr; gap: 12px; }
  .sepetsatir__gorsel { width: 68px; height: 68px; }
  .sepetsatir__tutar, .sepetsatir__sil { grid-column: 2; }
  .bolum { padding: 32px 0; }
  .hero__metin { padding: 32px 24px; }
  .dip__ic { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
   Uyelik: giris/kayit, hesabim alani, adres defteri
   ========================================================================= */

.baslikeylem { display: flex; align-items: center; gap: 24px; }

/* -------------------------------------------------------- giris / kayit */
.girisduzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px; padding: 40px 0 70px; align-items: start;
}
.girisduzen--tek { grid-template-columns: minmax(0, 520px); justify-content: center; }

.girisduzen__kart {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  padding: 34px; background: var(--beyaz);
}
.girisduzen__kart h1 { font-size: 26px; margin-bottom: 4px; }

.girisduzen__yan {
  background: var(--kraft); border: 1px solid var(--kraft-cizgi);
  border-radius: var(--r-m); padding: 30px;
}
.girisduzen__yan h2 { font-size: 19px; }
.girisduzen__yan p { color: var(--sonuk); font-size: 14px; }

.girisduzen__alt {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--cizgi); font-size: 14px;
}
.girisduzen__alt a { color: var(--brand); font-weight: 600; }

.fayda { list-style: none; margin: 16px 0 0; padding: 0; }
.fayda li {
  position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 14px;
}
.fayda li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
}

.bilgikutu {
  background: var(--brand-acik); border: 1px solid #CBD8EA;
  color: var(--brand-koyu); border-radius: var(--r-s);
  padding: 14px 17px; margin: 18px 0; font-size: 14px;
}
.bilgikutu p { margin: 0 0 8px; }
.bilgikutu p:last-child { margin: 0; }

/* ------------------------------------------------------------- hesabim */
.hesapduzen {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 34px; padding: 34px 0 70px; align-items: start;
}
.hesapduzen h1 { font-size: 26px; }

.hesapyan {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  overflow: hidden; position: sticky; top: 20px;
}
.hesapyan__ust {
  padding: 20px; background: var(--kraft);
  border-bottom: 1px solid var(--kraft-cizgi);
  display: flex; flex-direction: column; gap: 2px;
}
.hesapyan__ust strong { font-size: 15px; }
.hesapyan ul { list-style: none; margin: 0; padding: 8px; }
.hesapyan li { margin: 0; }
.hesapyan ul a {
  display: block; padding: 11px 14px; border-radius: var(--r-s);
  font-size: 14px; font-weight: 500;
}
.hesapyan ul a:hover { background: var(--yumusak); }
.hesapyan ul a.aktif {
  background: var(--brand); color: #fff; font-weight: 600;
}
.hesapyan form { padding: 8px 16px 18px; }

.hesapizgara {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px;
}

/* ------------------------------------------------------ siparis listesi */
.siparislistesi { margin-top: 22px; }
.siparissatir {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 20px; align-items: center;
  padding: 18px 20px; margin-bottom: 10px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  transition: border-color .16s, box-shadow .16s;
}
.siparissatir:hover {
  border-color: var(--brand); box-shadow: var(--golge); color: inherit;
}
.siparissatir__tutar { font-family: Manrope, sans-serif; font-weight: 700; font-size: 17px; }

.siparisdetay { margin-top: 24px; }

.rozet {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rozet--ok    { background: #E3F5EC; color: var(--basari); }
.rozet--bekle { background: var(--vurgu-acik); color: #a3500a; }
.rozet--hata  { background: #fdf2f1; color: var(--uyari); }

/* -------------------------------------------------------- adres defteri */
.adresizgara {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.adreskart {
  border: 1px solid var(--cizgi); border-radius: var(--r-m); padding: 20px;
  display: flex; flex-direction: column;
}
.adreskart--varsayilan { border-color: var(--brand); background: var(--brand-acik); }
.adreskart__ust {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between; margin-bottom: 10px;
}
.adreskart p { font-size: 14px; color: var(--sonuk); margin: 0 0 16px; flex: 1; }
.adreskart__eylem { display: flex; gap: 14px; align-items: center; }

.mini {
  border: 0; background: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--brand); text-decoration: underline;
}
.mini:hover { color: var(--brand-koyu); }
.mini--sil { color: var(--sonuk); }
.mini--sil:hover { color: var(--uyari); }

/* ------------------------------------------------ odeme sayfasi eklentileri */
.girisuyari {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--kraft); border: 1px solid var(--kraft-cizgi);
  border-radius: var(--r-m); padding: 18px 22px; margin-bottom: 24px;
}
.girisuyari strong { display: block; }

.adressecici { margin-bottom: 24px; }
.adressecici__liste { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.adressecici__oge {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 13px 18px; background: var(--beyaz);
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
}
.adressecici__oge:hover { border-color: var(--brand); }
.adressecici__oge.aktif { border-color: var(--brand); background: var(--brand-acik); }

/* -------------------------------------------------------------- duyarlilik */
@media (max-width: 900px) {
  .girisduzen, .hesapduzen { grid-template-columns: 1fr; }
  .hesapyan { position: static; }
  .hesapizgara { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .baslikeylem { gap: 16px; }
  .siparissatir { grid-template-columns: 1fr auto; gap: 10px; }
  .siparissatir .rozet { grid-column: 2; justify-self: end; }
  .girisduzen__kart { padding: 24px 20px; }
}

/* =========================================================================
   Yonetim paneli ve icerik sayfalari
   ========================================================================= */

.yonduzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 30px; align-items: start; padding-bottom: 60px;
}
.yonyan {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  padding: 22px; background: var(--yumusak);
}
.yonyan h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--sonuk); margin-bottom: 10px;
}
.yonyan p { font-size: 14px; margin: 0 0 6px; }

.yonara {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 0 0 20px;
}
.yonara input[type="search"] {
  flex: 1; min-width: 220px;
  padding: 10px 15px; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-s); font: inherit;
}
.yonara select {
  padding: 10px 14px; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-s); font: inherit; background: var(--beyaz);
}

.yonfiyat {
  width: 110px; padding: 7px 10px; font: inherit;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
  text-align: right; font-variant-numeric: tabular-nums;
}
.yonfiyat:focus { border-color: var(--brand); outline: none; }

.yonminik {
  display: block; width: 44px; height: 44px; object-fit: contain;
  background: var(--yumusak); border-radius: var(--r-s); padding: 3px;
  mix-blend-mode: multiply;
}
.yonminik--bos { background: var(--cizgi); mix-blend-mode: normal; }

.yongorseller { display: flex; gap: 10px; flex-wrap: wrap; }
.yongorsel {
  width: 78px; display: flex; flex-direction: column;
  gap: 5px; align-items: center;
}
.yongorsel img {
  width: 78px; height: 78px; object-fit: contain;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--r-s); padding: 4px;
}

.cikti {
  display: block; padding: 12px 15px;
  background: var(--brand-acik); border-radius: var(--r-s);
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 18px;
  color: var(--brand-koyu);
}

/* --------------------------------------------------------- icerik sayfasi */
.metinsayfa { max-width: 76ch; padding: 6px 0 70px; }
.metinsayfa h1 { font-size: 30px; margin-bottom: 22px; }
.metinsayfa h2 {
  font-size: 20px; margin: 34px 0 12px; padding-top: 6px;
}
.metinsayfa h3 { font-size: 17px; margin: 24px 0 10px; }
.metinsayfa p, .metinsayfa li { line-height: 1.75; }
.metinsayfa ul, .metinsayfa ol { padding-left: 22px; }
.metinsayfa li { margin-bottom: 8px; }
.metinsayfa a { color: var(--brand); text-decoration: underline; }
.metinsayfa table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px;
}
.metinsayfa th, .metinsayfa td {
  padding: 10px 12px; border: 1px solid var(--cizgi); text-align: left;
}
.metinsayfa th { background: var(--yumusak); font-weight: 600; }

@media (max-width: 900px) {
  .yonduzen { grid-template-columns: 1fr; }
}

/* siparis yonetimi */
.rozet--bilgi { background: var(--brand-acik); color: var(--brand-koyu); }
.yonbaslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 4px 0 24px;
}

/* ------------------------------------------------- hukuki metin isaretleri */
/* Doldurulmamis sirket bilgisi. Goze batmasi ISTENIYOR -- yanlislikla
   eksik yayina cikmasin. */
.doldur {
  background: #FFE58A; color: #6B4A00;
  padding: 1px 7px; border-radius: 4px;
  font-weight: 600; font-size: .92em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hukuki-uyari {
  background: #FFF8E1; border: 1px solid #F0D98A; border-left: 4px solid var(--vurgu);
  border-radius: var(--r-s); padding: 16px 18px; margin: 0 0 26px;
  font-size: 14px; line-height: 1.6;
}
.metinsayfa .hukuki-uyari strong { color: #8A5A00; }

/* kategori ve urun yonetimi */
.yonsira {
  width: 62px; padding: 6px 8px; font: inherit; text-align: center;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
}
.katsecim {
  max-height: 260px; overflow-y: auto;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--beyaz); padding: 6px;
}
.katsecim__oge {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--r-s); font-size: 14px; cursor: pointer;
}
.katsecim__oge:hover { background: var(--yumusak); }
.katsecim__oge input { width: 16px; height: 16px; flex: none; }
.katkutu__ikon svg { display: block; }

/* =========================================================================
   Slider, banner, marka
   ========================================================================= */

.slider {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--kraft-cizgi); background: var(--kraft);
}
.slider__ray { position: relative; }
.slider__slayt { display: none; position: relative; min-height: 320px; }
.slider__slayt.aktif { display: block; }
.slider__slayt picture, .slider__slayt img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  max-height: 520px;
}

.slider__metin { padding: 52px; max-width: 620px; }
.slider__metin h2 {
  font-family: Manrope, sans-serif; font-size: clamp(26px, 3.2vw, 42px);
  margin: 0 0 12px; letter-spacing: -.02em;
}
.slider__metin p { font-size: 17px; color: var(--sonuk); margin: 0 0 24px; }

/* gorsel varsa metin uzerine biner ve okunabilirlik icin perde eklenir */
.slider__metin--uzeri {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; max-width: none;
  padding: 52px clamp(24px, 8vw, 90px);
  background: linear-gradient(90deg, rgba(0,40,92,.86) 0%,
              rgba(0,40,92,.62) 46%, rgba(0,40,92,0) 78%);
  color: #fff;
}
.slider__metin--uzeri h2 { color: #fff; max-width: 18ch; }
.slider__metin--uzeri p { color: rgba(255,255,255,.9); max-width: 42ch; }

.slider__ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--golge);
}
.slider__ok:hover { background: #fff; }
.slider__ok--geri  { left: 14px; }
.slider__ok--ileri { right: 14px; }

.slider__noktalar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.slider__noktalar button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer;
}
.slider__noktalar button.aktif { background: var(--vurgu); width: 26px; border-radius: 5px; }

/* ------------------------------------------------------------------ banner */
.banner { margin: 0 auto; padding: 0 20px; max-width: var(--kap); }
.banner img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-m); border: 1px solid var(--cizgi);
}
.banner a { display: block; }
.banner a:hover img { border-color: var(--brand); }

.banner--anasayfa_ust  { margin-top: 22px; }
.banner--anasayfa_orta { margin: 10px auto 0; }
.banner--anasayfa_alt  { margin: 10px auto 40px; }
.banner--kategori_ust  { padding: 0; margin-bottom: 22px; }
.banner--sepet_ust     { padding: 0; margin: 22px 0 0; }
.banner--urun_yan      { padding: 0; margin: 24px 0; }

/* ------------------------------------------------------------------- marka */
.markaserit {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.markaserit__oge {
  display: grid; place-items: center; padding: 18px 14px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--beyaz); min-height: 88px;
  transition: border-color .16s, transform .16s;
}
.markaserit__oge:hover { border-color: var(--brand); transform: translateY(-2px); }
.markaserit__oge img {
  max-height: 46px; max-width: 100%; width: auto;
  object-fit: contain; mix-blend-mode: multiply;
}

.markabas {
  display: flex; gap: 26px; align-items: flex-start;
  padding: 10px 0 30px; flex-wrap: wrap;
}
.markabas img {
  width: 130px; padding: 14px; background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  object-fit: contain;
}
.markabas h1 { font-size: 28px; margin-bottom: 4px; }
.markabas p { max-width: 70ch; color: var(--sonuk); }

.urun__marka a { color: inherit; text-decoration: underline; }

/* panel: ana gorsel isareti */
.yongorsel--ana img { border-color: var(--brand); border-width: 2px; }

@media (max-width: 700px) {
  .slider__slayt { min-height: 380px; }
  .slider__metin { padding: 30px 22px; }
  .slider__metin--uzeri {
    padding: 26px 22px;
    background: linear-gradient(180deg, rgba(0,40,92,.35) 0%, rgba(0,40,92,.88) 55%);
    justify-content: flex-end;
  }
  .slider__ok { display: none; }
  .markaserit { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .markabas img { width: 92px; }
}

/* ------------------------------------------------------------------ varyant */
.varyant { margin: 22px 0 6px; display: flex; flex-direction: column; gap: 16px; }
.varyant__etiket {
  display: block; font-size: 13px; font-weight: 600; color: var(--sonuk);
  margin-bottom: 8px;
}
.varyant__degerler { display: flex; gap: 8px; flex-wrap: wrap; }
.varyant__deger {
  padding: 10px 18px; border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--beyaz); font: inherit; font-size: 14px; font-weight: 500;
  transition: border-color .14s, background .14s;
}
.varyant__deger:hover:not(:disabled) { border-color: var(--brand); }
.varyant__deger.aktif {
  border-color: var(--brand); background: var(--brand-acik);
  color: var(--brand-koyu); font-weight: 600;
}
/* Bu secimle birlesince satilabilir varyant olusmuyor */
.varyant__deger.yok {
  opacity: .38; cursor: not-allowed; text-decoration: line-through;
}
.varyant__uyari {
  margin: 0; font-size: 13px; color: var(--uyari); font-weight: 500;
}
.sepetsatir__varyant {
  font-size: 13px; color: var(--brand); font-weight: 500; margin-top: 2px;
}

/* panel varyant tablosu */
.vartablo input[type="text"], .vartablo input[type="number"] {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
}
.vartablo input[type="number"] { text-align: right; }
.vartablo td { vertical-align: middle; }
.varkombin {
  background: var(--brand-acik); border: 1px solid #CBD8EA;
  border-radius: var(--r-s); padding: 14px 16px; margin: 14px 0; font-size: 14px;
}

/* -------------------------------------------------------------------- kupon */
.ozet__satir--indirim { color: var(--basari); font-weight: 600; }

.kuponform {
  margin: 16px 0; padding-top: 16px; border-top: 1px dashed var(--cizgi);
}
.kuponform__satir { display: flex; gap: 8px; margin-top: 6px; }
.kuponform__satir input {
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
  letter-spacing: .08em; font-weight: 600;
}
.kuponform__satir input:focus { border-color: var(--brand); outline: none; }
.kuponform__satir .dug { padding: 11px 18px; white-space: nowrap; }

.kuponuygulanan {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0; padding: 12px 14px; font-size: 14px;
  background: #E3F5EC; border: 1px solid #B9E3CD; border-radius: var(--r-s);
  color: var(--basari);
}

/* =========================================================================
   Tasarim gelistirmeleri: bolum ritmi, deger seridi, video, yorumlar
   ========================================================================= */

/* Bolum basliklarina alt metin ve daha net hiyerarsi */
.bolum__ust { align-items: flex-end; }
.bolum__alt {
  margin: 6px 0 0; font-size: 15px; color: var(--sonuk); max-width: 56ch;
}
.bolum h2 { font-size: clamp(22px, 2.2vw, 28px); }

/* Bolumler arasi ritim: acik/koyu almasik zemin gozu dinlendirir */
.bolum--yorum { background: var(--kraft); border-block: 1px solid var(--kraft-cizgi); }
.bolum--video { padding-top: 8px; }

/* ---------------------------------------------------------- deger seridi */
.deger {
  border-block: 1px solid var(--cizgi);
  background: linear-gradient(180deg, var(--yumusak), var(--beyaz));
}
.deger__ic {
  display: grid; gap: 26px; padding: 30px 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.deger__oge { display: flex; gap: 14px; align-items: flex-start; }
.deger__ikon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-acik); color: var(--brand);
}
.deger__oge strong { display: block; font-size: 15px; margin-bottom: 2px; }
.deger__oge span { font-size: 13.5px; color: var(--sonuk); line-height: 1.5; }

/* ------------------------------------------------------------------ video */
.video { display: grid; gap: 26px; grid-template-columns: 380px minmax(0, 1fr); align-items: center; }
.video__metin h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 12px; }
.video__metin p { color: var(--sonuk); font-size: 15.5px; line-height: 1.65; }

/* Kapak + oynat dugmesi. iframe ancak tiklaninca eklenir. */
.video__cerceve {
  position: relative; overflow: hidden; border-radius: var(--r-l);
  background: var(--ink); cursor: pointer;
  border: 1px solid var(--cizgi); box-shadow: var(--golge);
}
.video--16-9 .video__cerceve { aspect-ratio: 16 / 9; }
.video--4-3  .video__cerceve { aspect-ratio: 4 / 3; }
.video--1-1  .video__cerceve { aspect-ratio: 1 / 1; }

.video__kapak {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s, opacity .3s;
}
.video__cerceve:hover .video__kapak { transform: scale(1.03); opacity: .88; }

.video__oynat {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border: 0; border-radius: 50%;
  background: var(--vurgu); color: #fff;
  display: grid; place-items: center; padding-left: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  transition: transform .18s, background .18s;
}
.video__cerceve:hover .video__oynat { transform: scale(1.08); background: #ff8526; }

.video__etiket {
  position: absolute; bottom: 14px; left: 16px;
  background: rgba(11,21,36,.78); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px;
}
/* iframe eklendiginde kapak ve dugme gizlenir */
.video__cerceve.acik .video__kapak,
.video__cerceve.acik .video__oynat,
.video__cerceve.acik .video__etiket { display: none; }
.video__cerceve iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------- yorumlar */
.yorumserit { position: relative; }
.yorumserit__ray {
  display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.yorumserit__ray::-webkit-scrollbar { display: none; }
.yorumserit__ray:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 4px; }

.yorumkart {
  flex: 0 0 clamp(260px, 30%, 380px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 24px;
}
.yorumkart__yildiz { display: flex; gap: 2px; color: var(--cizgi); }
.yorumkart__yildiz .dolu { color: #F5A623; }

.yorumkart__metin {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink);
  flex: 1; position: relative; padding-left: 16px;
}
.yorumkart__metin::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--vurgu);
}

.yorumkart__kisi {
  display: flex; gap: 11px; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--cizgi);
}
.yorumkart__kisi img, .yorumkart__harf {
  flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.yorumkart__harf {
  display: grid; place-items: center; background: var(--brand); color: #fff;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 17px;
}
.yorumkart__kisi strong { display: block; font-size: 14px; }
.yorumkart__kisi small { color: var(--sonuk); font-size: 13px; }

.yorumserit__ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border: 1px solid var(--cizgi); border-radius: 50%;
  background: var(--beyaz); color: var(--ink); font-size: 22px; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--golge);
}
.yorumserit__ok:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.yorumserit__ok--geri  { left: -18px; }
.yorumserit__ok--ileri { right: -18px; }

/* ------------------------------------------- urun karti: kucuk iyilestirme */
.kart__gorsel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0,40,92,.05));
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.kart:hover .kart__gorsel::after { opacity: 1; }
.kart__gorsel img { transition: transform .3s; }
.kart:hover .kart__gorsel img { transform: scale(1.04); }

@media (max-width: 1080px) {
  .video { grid-template-columns: 1fr; gap: 20px; }
  .yorumserit__ok--geri  { left: 4px; }
  .yorumserit__ok--ileri { right: 4px; }
}
@media (max-width: 700px) {
  .deger__ic { gap: 20px; padding: 24px 20px; }
  .yorumkart { flex-basis: 84%; padding: 20px; }
  .video__oynat { width: 62px; height: 62px; }
  .yorumserit__ok { display: none; }
}

/* -------------------------------------------------------- katalog aktarimi */
.aktarim__kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 26px; margin-bottom: 20px;
}
.ilerleme {
  height: 12px; background: var(--cizgi); border-radius: 99px; overflow: hidden;
}
.ilerleme__dolu {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--vurgu));
  transition: width .4s ease;
}
.aktarim__sayac {
  display: grid; gap: 12px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.aktarim__sayac > div {
  background: var(--yumusak); border-radius: var(--r-s);
  padding: 14px 12px; text-align: center;
}
.aktarim__sayac b {
  display: block; font-family: Manrope, sans-serif; font-size: 24px;
  color: var(--brand); line-height: 1.1;
}
.aktarim__sayac span { font-size: 12px; color: var(--sonuk); }
.aktarim__gunluk {
  background: var(--ink); color: #cfe0f5; border-radius: var(--r-s);
  padding: 14px 16px; font-size: 12.5px; line-height: 1.65;
  max-height: 260px; overflow-y: auto; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0;
}

/* toplu islem cubugu */
.toplucubuk {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: var(--brand-acik); border: 1px solid #CBD8EA;
  border-radius: var(--r-s); padding: 12px 16px; margin-bottom: 12px;
}
.topluislem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.topluislem .dug { padding: 9px 16px; font-size: 14px; }
.ytablo input[type="checkbox"] { width: 17px; height: 17px; }

/* ------------------------------------------------------- kademeli fiyat */
.kademe {
  margin: 22px 0; padding: 16px 18px;
  background: var(--kraft); border: 1px solid var(--kraft-cizgi);
  border-radius: var(--r-m);
}
.kademe__bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.kademe__tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.kademe__tablo th, .kademe__tablo td {
  padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--kraft-cizgi);
}
.kademe__tablo thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sonuk); font-weight: 600;
}
.kademe__tablo tbody tr:last-child td { border-bottom: 0; }
.kademe__tablo tbody tr.aktif { background: rgba(255,112,0,.09); }
.kademe__iskonto {
  font-size: 12px; font-weight: 700; color: var(--vurgu);
  background: var(--vurgu-acik); padding: 2px 9px; border-radius: 99px;
}

/* teknik ozellikler */
.ozellikler { margin: 26px 0; }
.ozellikler h2 { font-size: 18px; margin-bottom: 12px; }
.ozellikler table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ozellikler th, .ozellikler td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cizgi);
}
.ozellikler th {
  width: 40%; font-weight: 600; color: var(--sonuk);
  background: var(--yumusak);
}

/* ===================================================================
   Kategori SEO metni ve urun SSS (014)
   ===================================================================
   Kategori sayfalari onceden yalnizca H1 + urun izgarasindan olusuyordu.
   Metin bloğu hem musteriye bilgi verir hem sayfanin ince icerik
   sayilmasini onler.
   =================================================================== */

.sayfabas__giris {
  max-width: 70ch;
  color: var(--sonuk, #5F6E85);
  line-height: 1.65;
  margin-top: 6px;
}

.katmetin {
  max-width: 74ch;
  margin: 42px auto 10px;
  padding-top: 30px;
  border-top: 1px solid var(--cizgi, #E3E8EF);
  line-height: 1.72;
  color: var(--govde, #33415C);
}
.katmetin h2 { font-size: 20px; margin: 26px 0 10px; }
.katmetin h3 { font-size: 17px; margin: 22px 0 8px; }
.katmetin p  { margin: 0 0 14px; }
.katmetin ul, .katmetin ol { margin: 0 0 14px; padding-left: 22px; }
.katmetin li { margin-bottom: 6px; }
.katmetin table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.katmetin th, .katmetin td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cizgi, #E3E8EF);
}

/* --- urun SSS: aciliyor-kapaniyor liste
   Hem musteri okur hem FAQPage isaretlemesine girer. Isaretlenen icerigin
   sayfada da GORUNUR olmasi Google'in sarti. */
.sss { margin: 40px 0 10px; max-width: 74ch; }
.sss h2 { font-size: 20px; margin: 0 0 14px; }
.sss__oge {
  border: 1px solid var(--cizgi, #E3E8EF);
  border-radius: var(--r-s, 8px);
  margin-bottom: 8px;
  background: #fff;
}
.sss__oge > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.sss__oge > summary::-webkit-details-marker { display: none; }
.sss__oge > summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--sonuk, #5F6E85);
  flex: 0 0 auto;
}
.sss__oge[open] > summary::after { content: '\2212'; }
.sss__oge > div {
  padding: 0 16px 15px;
  line-height: 1.7;
  color: var(--govde, #33415C);
}

/* ============================================================================
   Sabit baslik ve mega menu -- kucuk ekran
   ============================================================================
   Telefonda sticky baslik ekranin cok buyuk kismini yerse urun listesi
   gorunmez hale gelir. Bu yuzden mobilde ust cubuk bastan gizli ve mega
   panel tek kolona duserek tam ekran yuksekliginde kayiyor. */

@media (max-width: 900px) {
  .mega__ic {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 2px 18px; padding: 18px 0 22px;
  }
  .mega { max-height: calc(100vh - 150px); }
  :target { scroll-margin-top: 150px; }
}

@media (max-width: 700px) {
  /* Mobilde ust cubuk hic gosterilmiyor: iki satir yazi icin 34 piksel
     sabit alan harcamak, urunlerin gorunurlugunden daha kotu bir takas. */
  .baslikbolge .ustcubuk { display: none; }

  .mega__ic { grid-template-columns: 1fr; padding: 14px 0 20px; }
  .mega__kolon { margin-bottom: 10px; }
  .mega__ust { padding-bottom: 6px; margin-bottom: 4px; }
  .mega__alt { columns: 2; column-gap: 16px; }
  .mega { max-height: calc(100vh - 130px); }
  :target { scroll-margin-top: 130px; }

  .menu__tumu { padding: 0 14px; font-size: 13px; }
  .menu__oge > a { padding: 13px 10px; font-size: 13px; }

  /* Dokunmatikte :hover guvenilmez; alt menuler mega panelden geziliyor */
  .menu__alt { display: none; }
}

/* Fare olmayan cihazlarda hover ile acilan alt menu, ilk dokunusta
   baglantiyi tetikleyip aninda kayboluyor. Bu yuzden kapatiliyor. */
@media (hover: none) {
  .menu__alt { display: none; }
}

/* ============================================================================
   Fatura bilgileri (ödeme adımı)
   ============================================================================ */
.odemebaslik {
  font-size: 16px; margin: 8px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--cizgi, #E3E8EF);
}
.faturatip { display: flex; gap: 10px; flex-wrap: wrap; }
.faturatip__sec {
  flex: 1 1 190px; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; cursor: pointer;
  border: 1.5px solid var(--cizgi, #E3E8EF); border-radius: var(--r-s, 8px);
  background: #fff; transition: border-color .15s, background .15s;
}
.faturatip__sec:hover { border-color: #C9D4E3; }
.faturatip__sec:has(input:checked) {
  border-color: var(--vurgu, #FF7000); background: #FFF8F2;
}
.faturatip__sec input { margin-top: 3px; flex: 0 0 auto; }
.faturatip__sec strong { display: block; font-size: 14px; }
.faturatip__sec em {
  font-style: normal; font-size: 12.5px; color: var(--sonuk, #5F6E85);
}
/* :has() desteklemeyen eski tarayıcılarda seçim yine çalışır,
   yalnızca renkli çerçeve görünmez -- işlevsel kayıp yok. */

.faturaadres[hidden] { display: none; }
.faturaalan[hidden] { display: none; }

/* ============================================================================
   YILDIZLAR VE DEĞERLENDİRMELER
   ============================================================================
   Yıldızlar SVG dosyası değil, CSS ile çiziliyor: ek istek yok ve renk
   temaya bağlı. Yarım yıldız da destekleniyor -- 4,3 ortalamayı 4'e
   yuvarlamak bilgi kaybettiriyor, 5'e yuvarlamak yanıltıcı oluyor. */

.yildizlar { display: inline-flex; gap: 2px; vertical-align: middle; }
.yildiz {
  width: 15px; height: 15px; display: block;
  background: #D8DEE8;
  -webkit-mask: var(--yildiz-sekil) center/contain no-repeat;
  mask: var(--yildiz-sekil) center/contain no-repeat;
}
:root {
  --yildiz-sekil: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.5 5.1 5.6.8-4.1 4 1 5.6L10 14.4l-5 2.7 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E");
}
.yildiz--dolu { background: #F5A623; }
.yildiz--yarim {
  background: linear-gradient(90deg, #F5A623 50%, #D8DEE8 50%);
}
.yildizlar--buyuk .yildiz { width: 22px; height: 22px; }

/* Ürün kartındaki puan satırı */
.kart__puan {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 4px; text-decoration: none;
  font-size: 12.5px; color: var(--sonuk, #5F6E85);
}
.kart__puan:hover { color: var(--brand, #00285C); }

/* ---------------------------------------------------- ürün sayfası bölümü */
.degerlendirme { margin: 44px 0 10px; max-width: 74ch; }
.degerlendirme h2 { font-size: 20px; margin: 0 0 16px; }
.degerlendirme__bos {
  color: var(--sonuk, #5F6E85); line-height: 1.7; margin: 0;
}
.degerlendirme__ust {
  display: flex; flex-wrap: wrap; gap: 30px; align-items: center;
  padding: 20px 22px; margin-bottom: 22px;
  background: var(--yumusak, #F4F6F9); border-radius: var(--r-m, 12px);
}
.puanozet { text-align: center; flex: 0 0 auto; }
.puanozet__sayi {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 42px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; margin-bottom: 6px;
}
.puanozet .kucuk { margin: 6px 0 0; }

.puandagilim { flex: 1 1 220px; display: flex; flex-direction: column; gap: 5px; }
.puandagilim__satir {
  display: grid; grid-template-columns: 62px 1fr 26px;
  align-items: center; gap: 10px; font-size: 12.5px;
  color: var(--sonuk, #5F6E85);
}
.puandagilim__cubuk {
  height: 7px; background: #E1E7F0; border-radius: 999px; overflow: hidden;
}
.puandagilim__cubuk > span {
  display: block; height: 100%; background: #F5A623; border-radius: 999px;
}
.puandagilim b { text-align: right; color: var(--govde, #33415C); }

.yorumlist { list-style: none; margin: 0 0 26px; padding: 0; }
.yorumlist__oge {
  padding: 18px 0; border-bottom: 1px solid var(--cizgi, #E3E8EF);
}
.yorumlist__oge:first-child { border-top: 1px solid var(--cizgi, #E3E8EF); }
.yorumlist__bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; margin-bottom: 6px;
}
.yorumlist__bas time { color: var(--sonuk, #5F6E85); font-size: 12.5px; margin-left: auto; }
.dogrulandi {
  font-size: 11.5px; font-weight: 600; color: #08703A;
  background: #E7F6EC; border-radius: 999px; padding: 3px 9px;
}
.yorumlist__baslik { font-weight: 600; margin: 0 0 4px; }
.yorumlist__metin { margin: 0; line-height: 1.7; color: var(--govde, #33415C); }
.yorumlist__yanit {
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--yumusak, #F4F6F9); border-radius: var(--r-s, 8px);
  border-left: 3px solid var(--vurgu, #FF7000);
  font-size: 14px; line-height: 1.65;
}

/* -------------------------------------------------------------- yorum formu */
.yorumform {
  border: 1px solid var(--cizgi, #E3E8EF); border-radius: var(--r-m, 12px);
  padding: 16px 20px; background: #fff;
}
.yorumform > summary {
  cursor: pointer; font-weight: 600; font-size: 15px;
}
.yorumform[open] > summary {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--cizgi, #E3E8EF);
}

/* Yıldız seçici: radyo düğmeleri TERS sırada basılıyor (5,4,3,2,1).
   Böylece "sonraki kardeş" seçicisiyle soldaki yıldızlar da dolduruluyor
   ve JavaScript'e hiç gerek kalmıyor. */
.puansec { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.puansec input { position: absolute; opacity: 0; width: 0; height: 0; }
.puansec label {
  width: 30px; height: 30px; cursor: pointer;
  background: #D8DEE8;
  -webkit-mask: var(--yildiz-sekil) center/contain no-repeat;
  mask: var(--yildiz-sekil) center/contain no-repeat;
  transition: background .12s;
}
.puansec label:hover,
.puansec label:hover ~ label,
.puansec input:checked ~ label { background: #F5A623; }
.puansec input:focus-visible + label { outline: 2px solid var(--vurgu, #FF7000); outline-offset: 2px; }
.gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.bilgiseridi {
  padding: 13px 16px; border-radius: var(--r-s, 8px); margin-bottom: 18px;
  font-size: 14px; line-height: 1.6;
}
.bilgiseridi--ok { background: #E7F6EC; color: #08703A; }
.bilgiseridi--uyari { background: #FEF6E7; color: #8A5300; }

@media (max-width: 700px) {
  .degerlendirme__ust { gap: 18px; padding: 16px; }
  .puanozet__sayi { font-size: 34px; }
}

/* =============================================================================
   TİPOGRAFİ VE ÖLÇEK GÜNCELLEMESİ  —  Manrope
   =============================================================================
   İki iş birden yapılıyor: yazı tipi Manrope'a geçirildi ve genel ölçek
   büyütüldü. İkisi de SEO'ya dokunuyor, o yüzden gerekçeleri yazıyorum.

   1) TEK YAZI TİPİ AİLESİ = DAHA HIZLI SAYFA
      Önceden Outfit (4 ağırlık) + Inter (3 ağırlık) = 7 font dosyası
      indiriliyordu. Artık yalnızca Manrope (5 ağırlık). Sayfa hızı
      Google'ın doğruladığı bir sıralama sinyali; her istek sayılıyor.

   2) CLS (SAYFA ZIPLAMASI) DÜZELTİLDİ
      Web fontu geç yüklendiğinde tarayıcı önce yedek yazı tipiyle çizer,
      font gelince metin yeniden akar ve sayfa ZIPLAR. Google bunu
      Cumulative Layout Shift olarak ölçüyor ve düşük puan veriyor.
      Aşağıdaki @font-face yedek tanımı, sistem yazı tipini Manrope'un
      ölçülerine yaklaştırıyor (size-adjust) — zıplama neredeyse yok oluyor.

   3) TABAN PUNTO 15 → 16.5 px
      Google Mobil Kullanılabilirlik raporu 16px altını "okunamayacak
      kadar küçük metin" olarak işaretliyor. Sınırın üstüne çıkıldı.

   4) BAŞLIKLAR AKIŞKAN (clamp)
      Sabit punto yerine ekran genişliğine göre ölçekleniyor: telefonda
      taşmıyor, geniş ekranda küçük kalmıyor. Ara kırılım noktası
      gerekmiyor.
   ========================================================================== */

/* Manrope gelene kadar kullanılacak yedek: ölçüleri Manrope'a yaklaştırılmış
   sistem yazı tipi. Böylece font yüklendiğinde metin yeniden akmıyor. */
@font-face {
  font-family: "Manrope Yedek";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 103%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Akışkan ölçek: min — tercih edilen — max */
  --p-govde:  clamp(15.5px, 0.55vw + 14px, 17px);
  --p-h1:     clamp(28px,  2.2vw + 18px,  46px);
  --p-h2:     clamp(22px,  1.1vw + 17px,  30px);
  --p-h3:     clamp(17px,  0.5vw + 15px,  20px);
  --p-kucuk:  clamp(12.5px, 0.2vw + 12px, 13.5px);
  --kap: 1420px;                 /* 1360 → 1420: geniş ekranda daha ferah */
}

body {
  font-family: Manrope, "Manrope Yedek", system-ui, -apple-system, sans-serif;
  font-size: var(--p-govde);
  line-height: 1.68;             /* 1.6 → 1.68: uzun metinde okunurluk */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: Manrope, "Manrope Yedek", system-ui, sans-serif;
  letter-spacing: -.022em;
  line-height: 1.18;
}

/* ---------------------------------------------------------------- başlıklar */
.sayfabas h1        { font-size: var(--p-h1); letter-spacing: -.03em; }
.sayfabas__giris    { font-size: clamp(15px, .4vw + 14px, 16.5px); max-width: 72ch; }
.urun__ad, .urun h1 { font-size: clamp(24px, 1.4vw + 18px, 34px); line-height: 1.22; }
.sss h2, .degerlendirme h2, .katmetin h2 { font-size: var(--p-h2); }
.katmetin h3        { font-size: var(--p-h3); }
.katmetin           { font-size: clamp(15px, .4vw + 14px, 16.5px); line-height: 1.78; }

/* --------------------------------------------------------------- ürün kartı */
.kart__ad {
  font-size: clamp(14.5px, .35vw + 13.5px, 16px);
  line-height: 1.45; font-weight: 600;
}
.kart__fiyat {
  font-size: clamp(18px, .6vw + 16px, 22px);
  font-weight: 800; letter-spacing: -.02em;
}
.kart__marka { font-size: var(--p-kucuk); letter-spacing: .04em; }
.kart__kod   { font-size: var(--p-kucuk); }
.kart__govde { padding: 16px 16px 18px; }        /* daha ferah */

/* ------------------------------------------------------------------- menü */
.menu__oge > a { font-size: clamp(13.5px, .3vw + 12.8px, 15px); padding: 18px 15px; }
.menu__tumu    { font-size: clamp(13.5px, .3vw + 12.8px, 15px); padding: 0 22px; }
.mega__ust     { font-size: 14.5px; }
.mega__alt a   { font-size: 14.5px; padding: 6px 0; }
.arama input   { font-size: clamp(15px, .4vw + 14px, 16.5px); padding: 15px 18px; }

/* ------------------------------------------------------------------ butonlar
   Dokunma hedefi en az 44px: Google mobil kullanılabilirlik ölçütü. */
.dug, button.dug, a.dug {
  font-size: clamp(14.5px, .35vw + 13.5px, 16px);
  padding: 14px 26px; min-height: 46px; font-weight: 700;
}
.dug--kucuk { padding: 8px 14px; min-height: 36px; font-size: 13px; }

/* ------------------------------------------------------------------- formlar */
.alan label { font-size: 14px; font-weight: 600; }
.alan input:not([type="checkbox"]):not([type="radio"]),
.alan select, .alan textarea {
  font-size: clamp(15px, .4vw + 14px, 16.5px);
  padding: 13px 15px;
  /* 16px altı puntolarda iOS Safari forma odaklanınca sayfayı YAKINLAŞTIRIR
     ve düzen bozulur. Alt sınırı 15px'te tutup üstü 16.5'e çıkarmak bunu
     pratikte ortadan kaldırıyor. */
}
.kucuk { font-size: var(--p-kucuk); line-height: 1.6; }

/* --------------------------------------------------------------- boşluklar */
.kap { padding-left: 26px; padding-right: 26px; }
.urunizgara { gap: 26px; }
.sayfabas { padding-top: 34px; padding-bottom: 12px; }

@media (max-width: 700px) {
  .kap { padding-left: 16px; padding-right: 16px; }
  .urunizgara { gap: 14px; }
  .kart__govde { padding: 12px 12px 14px; }
  .sayfabas { padding-top: 22px; }
}

/* =============================================================================
   TASARIM GÜNCELLEMESİ — referans düzen
   =============================================================================
   Gri zemin üzerinde beyaz yuvarlak kutu, ortalanmış logo, hap biçimli
   navigasyon ve arama, kartlarda satın alma düğmesi.

   Bu bölüm dosyanın SONUNDA duruyor ve önceki kuralları bilerek eziyor.
   Eski kuralları tek tek silmek yerine üstüne yazmak, bir şey ters
   giderse bu bloğu kaldırıp eski görünüme dönmeyi mümkün kılıyor.
   ========================================================================== */

:root {
  --zemin:      #E9E9E9;   /* sayfa arka planı */
  --kap-r:      26px;      /* beyaz kutunun köşe yarıçapı */
  --hap:        999px;
  --cizgi-acik: #ECEFF3;
}

body { background: var(--zemin); }

/* Beyaz kutu. Üst ve altta gri şerit kalıyor. */
.sayfakap {
  background: var(--beyaz);
  border-radius: var(--kap-r);
  margin: 18px auto;
  max-width: calc(var(--kap) + 60px);
  overflow: clip;                 /* köşeler içeriği kırpsın */
}

/* Sticky başlık beyaz kutunun içinde kaldığı için üst köşelerden taşmıyor */
.baslikbolge { background: var(--beyaz); }

/* ------------------------------------------------------------------ üst bar
   Üç sütunlu ızgara: yan sütunlar EŞİT genişlikte olduğu için logo gerçekten
   ortada duruyor. Flex ile yapılsaydı sağdaki metnin uzunluğuna göre kayardı. */
.ustbar { border-bottom: 0; }
.ustbar__ic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 0 14px;
}
.ustbar__sol, .ustbar__sag {
  display: flex; align-items: center; gap: 26px;
  font-size: 14.5px; font-weight: 500;
}
.ustbar__sag { justify-content: flex-end; }
.ustbar__sol a, .ustbar__sag a { color: var(--ink); text-decoration: none; }
.ustbar__sol a:hover, .ustbar__sag a:hover { color: var(--vurgu); }
.ustbar__adet { color: var(--sonuk); font-weight: 600; }
.ustbar .logo img { height: 46px; width: auto; }

/* Kaydırınca üst bar incelir (logo küçülür), kategori çubuğu kalır */
.baslikbolge--kucuk .ustbar__ic { padding: 10px 0 8px; }
.baslikbolge--kucuk .ustbar .logo img { height: 34px; }
.ustbar__ic, .ustbar .logo img { transition: padding .2s, height .2s; }

/* --------------------------------------------------------------- kategori çubuğu */
.menu { border-bottom: 0; padding-bottom: 14px; }
.menu__ic { display: flex; align-items: center; gap: 10px; }

/* Hap düğmeler */
.menu__tumu, .menu__hap {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 1px solid var(--cizgi); border-radius: var(--hap);
  background: var(--beyaz); color: var(--ink);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.menu__tumu:hover, .menu__hap:hover { border-color: var(--ink); background: var(--beyaz); }
.menu__tumu[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu__tumu[aria-expanded="true"] .menu__ok { transform: rotate(180deg); }

/* Arama: geniş hap, çubuğun ortasında */
.arama {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: 46px; padding: 0 6px 0 20px;
  background: var(--yumusak); border: 1px solid transparent;
  border-radius: var(--hap);
  transition: border-color .15s, background .15s;
}
.arama:focus-within { background: var(--beyaz); border-color: var(--ink); }
.arama input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.arama input::placeholder { color: #98A2B3; }
.arama button {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: transparent;
  border-radius: 50%; color: var(--ink); display: flex;
  align-items: center; justify-content: center;
}
.arama button:hover { background: var(--yumusak); }

.menu__tel { margin-left: 4px; }

/* Eski yatay kategori listesi artık mega panelde; çubukta gizli */
.menu__liste { display: none; }

/* ------------------------------------------------------------------- kartlar */
.urunizgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi-acik);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.kart:hover {
  border-color: #D8DEE8;
  box-shadow: 0 10px 28px rgba(11, 21, 36, .08);
  transform: translateY(-2px);
}
.kart__gorsel {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: var(--yumusak); overflow: hidden;
}
.kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kart__rozet {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink); color: #fff; border-radius: var(--hap);
  padding: 5px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.kart__govde { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kart__ad { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.kart__ad a { color: var(--ink); text-decoration: none; }
.kart__ad a:hover { color: var(--vurgu); }

/* Alt satır: solda meta + fiyat, sağda satın alma düğmesi */
.kart__alt {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 4px;
}
.kart__meta { font-size: 12.5px; color: var(--sonuk); margin-bottom: 3px; }
.kart__fiyat { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.kart__den { font-size: 12px; font-weight: 600; color: var(--sonuk); }
.kart__form { margin: 0; }

.kart__al {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--hap);
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.kart__al:hover { background: var(--vurgu); color: #fff; }
.kart__al--yok { background: var(--yumusak); color: var(--sonuk); cursor: default; }
.kart__al--yok:hover { background: var(--yumusak); color: var(--sonuk); }

/* ------------------------------------------------------- bölüm başlıkları
   Solda başlık, sağda hap "Tümü" bağlantısı. */
.bolumbas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin: 46px 0 20px;
}
.bolumbas h2 { margin: 0; font-size: var(--p-h2); letter-spacing: -.025em; }
.bolumbas__tum {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border: 1px solid var(--cizgi); border-radius: var(--hap);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.bolumbas__tum:hover { border-color: var(--ink); }

/* ------------------------------------------------------------- kırıntı yolu
   Referanstaki nokta ayraçlı biçim. */
.izyolu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
          font-size: 13.5px; color: var(--sonuk); padding: 18px 0 6px; }
.izyolu a { color: var(--sonuk); text-decoration: none; }
.izyolu a:hover { color: var(--ink); }
.izyolu li + li::before {
  content: ""; display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: #C7CEDA; margin-right: 10px;
  vertical-align: middle;
}
.izyolu [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- kayan şerit
   Referanstaki yatay kayan yazı bandı. prefers-reduced-motion açıkken
   duruyor -- hareket hassasiyeti olan kullanıcılar için. */
.serit {
  background: var(--kraft); border-block: 1px solid var(--kraft-cizgi);
  overflow: hidden; margin: 46px 0 0; padding: 14px 0;
}
.serit__ic {
  display: flex; gap: 46px; width: max-content;
  animation: seritKay 34s linear infinite;
  font-size: 14.5px; font-weight: 600; color: #6B5B45; white-space: nowrap;
}
.serit__ic span { display: inline-flex; align-items: center; gap: 46px; }
.serit__ic span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #C6B294;
}
@keyframes seritKay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .serit__ic { animation: none; } }

/* ----------------------------------------------------------------- alt bilgi */
.dip { background: var(--beyaz); border-radius: var(--kap-r); margin: 18px auto;
       max-width: calc(var(--kap) + 60px); padding: 40px 0 30px; }

/* --------------------------------------------------------------- küçük ekran */
@media (max-width: 980px) {
  .menu__hap { display: none; }          /* hepsi mega panelde zaten */
  .ustbar__sol a:not(:first-child) { display: none; }
}
@media (max-width: 700px) {
  .sayfakap, .dip { margin: 8px; border-radius: 18px; }
  .ustbar__ic { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0 10px; }
  .ustbar__sol { display: none; }
  .ustbar .logo { justify-self: start; }
  .ustbar .logo img { height: 34px; }
  .ustbar__sag { gap: 14px; font-size: 13.5px; }
  .menu__ic { flex-wrap: wrap; gap: 8px; }
  .arama { order: 3; flex-basis: 100%; }
  .urunizgara { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .kart__govde { padding: 12px 12px 14px; gap: 6px; }
  .kart__ad { font-size: 14px; }
  .kart__fiyat { font-size: 17px; }
  .kart__alt { flex-direction: column; align-items: stretch; gap: 10px; }
  .kart__al { width: 100%; justify-content: center; }
  .bolumbas { margin: 30px 0 14px; }
}

/* Mevcut bölüm başlığı yapısı (.bolum__ust) referans düzene uyarlanıyor.
   Markup'ı değiştirmek yerine biçimlendirmek daha az riskli: aynı yapı
   anasayfa, kategori ve marka sayfalarında kullanılıyor. */
.bolum__ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 46px 0 20px;
}
.bolum__ust h2 { margin: 0 0 4px; font-size: var(--p-h2); letter-spacing: -.025em; }
.bolum__alt { margin: 0; color: var(--sonuk); font-size: 14.5px; }
.bolum__ust > a {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 42px; padding: 0 20px;
  border: 1px solid var(--cizgi); border-radius: var(--hap);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.bolum__ust > a:hover { border-color: var(--ink); }

@media (max-width: 700px) {
  .bolum__ust { margin: 30px 0 14px; gap: 12px; }
  .bolum__ust > a { height: 36px; padding: 0 14px; font-size: 13px; }
  .bolum__alt { display: none; }
}

/* =============================================================================
   DÜZELTME — alt bilgi kontrastı
   =============================================================================
   YAMA 9'DA YAPTIĞIM HATA: sayfa kabuğunu beyaza çevirirken .dip'in de
   arka planını beyaz yaptım, ama metin renkleri KOYU ZEMİN İÇİN yazılmıştı
   (#b9c5bf gibi açık gri). Beyaz üstünde bu renkler okunmuyordu.

   Kontrast ölçüsü: #b9c5bf beyaz üstünde ~1.9:1. WCAG AA gövde metni için
   4.5:1 istiyor. Yani sadece "soluk görünmüyordu" -- erişilebilirlik
   ölçütünün çok altındaydı ve Lighthouse erişilebilirlik puanını düşürüyordu.

   Yeni renkler beyaz üstünde ölçülerek seçildi:
     başlık  #0B1524  -> 16.9:1
     bağlantı #33415C -> 9.1:1
     sönük    #5F6E85 -> 5.4:1
   Üçü de AA sınırının üstünde.
   ========================================================================== */

.dip {
  background: var(--beyaz);
  color: var(--govde, #33415C);
  border-top: 1px solid var(--cizgi-acik);
}
.dip h3 {
  color: var(--ink);
  font-size: 13px; letter-spacing: .09em; margin-bottom: 18px;
}
.dip a { color: var(--govde, #33415C); text-decoration: none; }
.dip a:hover { color: var(--vurgu); }
.dip li { font-size: 14.5px; margin-bottom: 12px; }
.dip p { color: var(--sonuk); font-size: 14.5px; }
.dip__iletisim { color: var(--govde, #33415C); }
.dip__iletisim a { color: var(--govde, #33415C); }

/* Alt şerit: ayraç çizgisi de beyaz zemine göre */
.dip__alt {
  border-top: 1px solid var(--cizgi-acik);
  color: var(--sonuk);
}
.dip__alt a { color: var(--sonuk); }

/* WhatsApp düğmesi yeşil kalsın ama beyaz zeminde kenarı belirsin */
.dip__destek .dug { color: #fff; }

/* NOT: yüzen düğmelere (WhatsApp / yukarı çık) DOKUNULMADI.
   İlk bakışta ekran görüntüsünde çakışıyor sandım ve bir flex kuralı
   yazdım; sonra baktım ki zaten ayrı konumlandırılmışlar (bottom: 22px
   ve 84px). Yazdığım kural .yuzen'deki "display: grid; place-items:
   center" bildirimini ezip ikonların ortalamasını BOZACAKTI. Kaldırıldı. */

@media (max-width: 700px) {
  .dip li { font-size: 14px; margin-bottom: 10px; }
  .dip h3 { margin-bottom: 12px; }
}