/* Trabzon Gurme · gurmetrabzon.com
   Renk ve font jetonları en üstte; bileşenler yalnız jeton kullanır.
   Işık kipi tek kip (marka rengi sabit); 8 px ızgara; taban punto 12 px. */

:root {
  /* marka · etiket PDF vektör dolgularından ölçüldü (varliklar/ENVANTER.md) */
  --marka: #4B0082;
  --marka-koyu: #380D5F;
  --marka-acik: #F2EAF8;
  --altin: #D4AF37;
  --altin-koyu: #A8861F;
  --altin-acik: #FBF3DC;
  --krem: #FAF1D7;
  --gece: #120D18;
  --yesil: #380D5F;

  /* nötr */
  --zemin: #FFFFFF;
  --zemin-2: #FBF8F1;
  --murekkep: #14110D;
  --soluk: #6B645C;
  --cizgi: #ECE5D6;
  --odak: #1F6FEB;

  /* tip */
  --font-baslik: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-govde: "Lato", -apple-system, system-ui, sans-serif;

  /* ritim */
  --r-kucuk: 10px;
  --r-orta: 16px;
  --r-buyuk: 28px;
  --golge: 0 1px 2px rgba(31, 27, 22, .06), 0 8px 24px rgba(31, 27, 22, .06);
  --golge-yuksek: 0 2px 4px rgba(31, 27, 22, .06), 0 16px 40px rgba(31, 27, 22, .12);
  --egri: cubic-bezier(.22, 1, .36, 1);
  --ust-yukseklik: 80px;
}

/* ---------------------------------------------------------------- temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 160px; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 400 17px/1.65 var(--font-govde); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-baslik); font-weight: 700; letter-spacing: .01em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 62px); }
h2 { font-size: clamp(26px, 3vw, 40px); }
h3 { font-size: 18px; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; border-radius: 6px; }
.kap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .kap { padding-inline: 32px; } }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--murekkep); color: #fff; padding: 12px 16px; border-radius: var(--r-kucuk); }
.atla:focus { top: 16px; }
.etiket { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marka); margin-bottom: 12px; }
.etiket--acik { color: var(--altin); }

/* ---------------------------------------------------------------- butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--egri), box-shadow .2s var(--egri), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.btn--buyuk { min-height: 56px; padding: 16px 32px; font-size: 16px; }
.btn--blok { width: 100%; }
.btn--birincil { background: var(--marka); color: #fff; }
.btn--birincil:hover:not(:disabled) { background: var(--marka-koyu); box-shadow: var(--golge); }
.btn--ikincil { border-color: currentColor; color: var(--murekkep); background: transparent; }
.btn--acik { background: var(--krem); color: var(--marka-koyu); }
.btn--altin { background: var(--altin); color: var(--murekkep); }
.btn--altin:hover { background: var(--krem); }
.btn--acik-cizgi { color: var(--krem); border-color: rgba(250, 241, 215, .6); }
.btn svg { flex: none; }
.btn--sepet { width: 100%; background: var(--marka); color: #fff; min-height: 44px; padding: 10px 16px; font-size: 14px; }
.btn--sepet:hover { background: var(--marka-koyu); }
.btn--sepet.btn--buyuk { min-height: 56px; font-size: 16px; }
.bag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--marka); white-space: nowrap; }
.bag svg { transition: transform .2s var(--egri); }
.bag:hover svg { transform: translateX(4px); }

/* adet seçici */
.adet { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-radius: 999px; background: var(--marka-acik); color: var(--marka); }
.adet--buyuk { min-height: 56px; max-width: 240px; }
.adet__tus { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; font-weight: 500; cursor: pointer; border-radius: 50%; color: inherit; }
.adet--buyuk .adet__tus { width: 56px; height: 56px; }
.adet__tus:hover { background: rgba(0, 0, 0, .05); }
.adet__sayi { font-weight: 700; font-size: 16px; min-width: 32px; text-align: center; }

/* ---------------------------------------------------------------- üst */
.duyuru { background: var(--marka); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.duyuru p { max-width: 1280px; margin: 0 auto; }
.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: var(--ust-yukseklik); transition: min-height .25s var(--egri); }
.ust--kucuk .ust__ic { min-height: 64px; }
.logo img { height: 44px; width: auto; transition: height .25s var(--egri); }
.ust--kucuk .logo img { height: 36px; }
.ara { position: relative; display: flex; align-items: center; max-width: 560px; width: 100%; justify-self: center; }
.ara > svg { position: absolute; left: 16px; color: var(--soluk); pointer-events: none; }
.ara input {
  width: 100%; height: 48px; padding: 0 16px 0 48px; border-radius: 999px; border: 1.5px solid var(--cizgi);
  background: var(--zemin-2); outline: none; transition: border-color .2s, background-color .2s;
}
.ara input:focus { border-color: var(--marka); background: #fff; }
.oneri {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; padding: 8px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-orta); box-shadow: var(--golge-yuksek);
}
.oneri__satir { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-kucuk); }
.oneri__satir:hover { background: var(--zemin-2); }
.oneri__satir img { border-radius: 8px; background: var(--zemin-2); object-fit: cover; }
.oneri__satir span { display: flex; flex-direction: column; font-weight: 500; line-height: 1.3; }
.oneri__satir small { color: var(--soluk); font-weight: 400; }
.oneri__bos { padding: 12px; color: var(--soluk); }
.ust__arac { display: flex; align-items: center; gap: 8px; }
.arac { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.arac:hover { background: var(--zemin-2); }
.arac--sepet { background: var(--marka-acik); color: var(--marka); }
.rozet {
  position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--altin); color: var(--murekkep); font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.rozet[hidden] { display: none; }
.kategori-nav { border-top: 1px solid var(--cizgi); }
.kategori-nav ul { display: flex; gap: 4px; list-style: none; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.kategori-nav ul::-webkit-scrollbar { display: none; }
.kategori-nav a { display: block; padding: 12px 16px; font-weight: 500; font-size: 15px; white-space: nowrap; border-bottom: 2px solid transparent; }
.kategori-nav a:hover, .kategori-nav a[aria-current] { color: var(--marka); border-bottom-color: var(--marka); }
.kategori-nav__ayrac { margin-left: auto; }

@media (max-width: 860px) {
  .ust__ic { grid-template-columns: auto 1fr; row-gap: 8px; padding-block: 8px; }
  .ara { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .ust__arac { justify-self: end; }
  .arac--tel span, .arac--sepet span { display: none; }
  .logo img { height: 34px; }
  .ust--kucuk .ara { display: none; }
  .kategori-nav__ayrac { margin-left: 0; }
}

/* ---------------------------------------------------------------- kahraman */
.kahraman { position: relative; color: var(--krem); overflow: hidden;
  background: radial-gradient(60% 80% at 85% 40%, rgba(75, 0, 130, .55), rgba(75, 0, 130, 0) 70%), radial-gradient(40% 50% at 10% 100%, rgba(212, 175, 55, .16), rgba(212, 175, 55, 0) 70%), var(--gece); }
.kahraman::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; background: var(--zemin);
  clip-path: ellipse(70% 100% at 50% 100%);
}
.kahraman::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 57px; z-index: 0;
  background: var(--altin); clip-path: ellipse(70% 100% at 50% 100%); transform: translateY(-3px); opacity: .7;
}
.kahraman__ic { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 72px 128px; }
.kahraman h1 { color: var(--krem); margin-bottom: 24px; }
.kahraman h1 em { font-style: italic; color: var(--altin); }
.kahraman__alt { font-size: 19px; max-width: 520px; opacity: .92; margin-bottom: 32px; }
.kahraman__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.kahraman .btn--birincil { background: var(--altin); color: var(--murekkep); }
.kahraman .btn--birincil:hover { background: var(--krem); }
.kahraman .btn--ikincil { color: var(--krem); }
.kahraman__gorsel { margin: 0; position: relative; }
.kahraman__gorsel::before {
  content: ""; position: absolute; inset: 6% -4% -4% 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, .35), rgba(212, 175, 55, 0));
}
.kahraman__gorsel img { position: relative; width: 100%; max-width: 520px; margin-left: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 260px 260px 32px 32px; border: 1px solid rgba(212, 175, 55, .45); box-shadow: 0 40px 100px rgba(0, 0, 0, .55); }
@media (max-width: 860px) {
  .kahraman__ic { grid-template-columns: 1fr; padding-block: 48px 96px; gap: 32px; }
  .kahraman__gorsel { order: -1; max-width: 420px; margin-inline: auto; }
}

/* ---------------------------------------------------------------- bölüm başlıkları */
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.bolum-bas--orta { flex-direction: column; align-items: center; text-align: center; }
.bolum-bas__alt { color: var(--soluk); font-size: 18px; max-width: 640px; margin-top: 16px; }
.basamaklar, .kategoriler, .raf, .fiyat-listesi { padding-block: 64px; }
@media (min-width: 1024px) { .basamaklar, .kategoriler, .raf, .fiyat-listesi { padding-block: 96px; } .raf { padding-block: 48px; } }

/* ---------------------------------------------------------------- imza: tereyağı basamakları */
.basamak-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end; }
.basamak a {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 24px; border-radius: var(--r-buyuk);
  background: linear-gradient(180deg, var(--marka-acik) 0%, #fff 70%); border: 1px solid var(--cizgi);
  transition: transform .3s var(--egri), box-shadow .3s var(--egri);
}
.basamak:nth-child(1) a { padding-top: 56px; }
.basamak:nth-child(2) a { padding-top: 40px; }
.basamak:nth-child(3) a { padding-top: 24px; }
.basamak a:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek); }
.basamak__gorsel { display: block; border-radius: 20px; overflow: hidden; margin-bottom: 8px; background: radial-gradient(circle at 50% 40%, #FFF6D8, #F5E3A6); }
.basamak__gorsel img, .basamak__gorsel .etiket-svg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.basamak__gorsel img[src$='.png'], .basamak__gorsel .etiket-svg { object-fit: contain; padding: 10%; }
.basamak__kullanim { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marka); background: var(--marka-acik); padding: 4px 12px; border-radius: 999px; }
.basamak__ad { font-family: var(--font-baslik); font-size: 21px; font-weight: 700; color: var(--marka-koyu); line-height: 1.2; letter-spacing: -.01em; }
.basamak__alt { color: var(--soluk); font-size: 15px; }
.basamak:first-child .basamak__ad::after { content: " ★"; color: var(--altin); }
@media (max-width: 1024px) { .basamak-liste { grid-template-columns: repeat(2, 1fr); } .basamak:nth-child(n) a { padding-top: 16px; } }
@media (max-width: 520px) { .basamak-liste { gap: 12px; } .basamak__ad { font-size: 18px; } }

/* ---------------------------------------------------------------- kategori kutuları */
.kat-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kat-kutu { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; }
.kat-kutu { font-family: var(--font-baslik); font-size: 20px; color: var(--marka-koyu); }
.kat-kutu__gorsel { display: block; width: 100%; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: var(--golge); transition: transform .3s var(--egri); }
.kat-kutu__gorsel img, .kat-kutu__gorsel .etiket-svg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.kat-kutu__gorsel img[src$='.png'], .kat-kutu__gorsel .etiket-svg { object-fit: contain; padding: 12%; }
.kat-kutu:hover .kat-kutu__gorsel { transform: scale(1.03); }
.kat-kutu:hover span { color: var(--marka); }
@media (max-width: 860px) { .kat-izgara { grid-template-columns: repeat(2, 1fr); } .kat-kutu { font-size: 17px; } }

/* ---------------------------------------------------------------- ürün kartı + raf */
.raf__iz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) {
  .raf__iz { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .raf__iz::-webkit-scrollbar { display: none; }
  .raf__iz > * { scroll-snap-align: start; }
}
.kart {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-orta);
  padding: 12px; transition: border-color .2s, box-shadow .3s var(--egri), transform .3s var(--egri);
}
.kart:hover { border-color: #d9d0c2; box-shadow: var(--golge); transform: translateY(-2px); }
.kart[hidden] { display: none; }
.kart__gorsel { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--zemin-2); }
.kart__gorsel img, .kart__gorsel .etiket-svg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .5s var(--egri); }
.kart__gorsel img[src$='.png'], .kart__gorsel .etiket-svg { object-fit: contain; padding: 10%; filter: drop-shadow(0 10px 18px rgba(20, 17, 13, .14)); }
.kart__gorsel--tereyagi { background: radial-gradient(circle at 50% 40%, #FFF6D8, #F5E3A6); }
.kart__gorsel--peynir { background: radial-gradient(circle at 50% 40%, #F7F0FB, #E6D7F1); }
.kart__gorsel--bal { background: radial-gradient(circle at 50% 40%, #FFF1D6, #F2CF8C); }
.kart__gorsel--kiler { background: radial-gradient(circle at 50% 40%, #F6F3EA, #E3DCC8); }
.kart:hover .kart__gorsel img, .kart:hover .kart__gorsel .etiket-svg { transform: scale(1.04); }
.kart__rozet { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--altin); color: var(--murekkep); }
.kart__govde { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px; flex: 1; }
.kart__marka { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.kart__ad { font-family: var(--font-govde); font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.kart__ad a:hover { color: var(--marka); }
.kart__gramaj { font-size: 14px; color: var(--soluk); }
.kart__fiyat { margin-top: auto; padding-top: 8px; font-size: 20px; font-weight: 900; color: var(--marka-koyu); }
.kart__birim { display: block; font-size: 12px; font-weight: 400; color: var(--soluk); }
.kart__aksiyon { min-height: 44px; }

/* ---------------------------------------------------------------- hikâye bandı */
.hikaye-bant { position: relative; background: var(--marka-koyu); color: var(--krem); margin-block: 48px; overflow: hidden; }
.hikaye-bant::after { content: ""; position: absolute; right: -80px; bottom: -40px; width: 620px; height: 370px; background: url(../img/inek-acik.png) no-repeat center / contain; opacity: .08; pointer-events: none; }
.hikaye-bant__ic { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; padding-block: 96px; }
.hikaye-bant figure { margin: 0; }
.hikaye-bant img { width: 100%; aspect-ratio: 3 / 4; max-height: 640px; object-fit: cover; border-radius: var(--r-buyuk); border: 1px solid rgba(212, 175, 55, .4); }
.hikaye-bant__ic { position: relative; z-index: 1; }
.hikaye-bant h2 { color: var(--krem); margin-bottom: 24px; }
.hikaye-bant p { font-size: 18px; opacity: .92; margin-bottom: 16px; max-width: 560px; }
.hikaye-bant .btn { margin-top: 16px; }
@media (max-width: 860px) { .hikaye-bant__ic { grid-template-columns: 1fr; gap: 32px; padding-block: 64px; } }

/* ---------------------------------------------------------------- işletmelere toptan */
.isletme { padding-block: 48px; }
.isletme__ic { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: var(--r-buyuk); overflow: hidden; background: var(--gece); color: var(--krem); }
.isletme__metin { padding: 64px 56px; align-self: center; }
.isletme h2 { color: var(--krem); margin-bottom: 20px; }
.isletme p { font-size: 18px; opacity: .9; max-width: 520px; margin-bottom: 32px; }
.isletme__gorsel { margin: 0; min-height: 100%; }
.isletme__gorsel img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
@media (max-width: 860px) { .isletme__ic { grid-template-columns: 1fr; } .isletme__metin { padding: 40px 24px; } .isletme__gorsel img { max-height: 320px; } }

/* ---------------------------------------------------------------- fiyat listesi */
.fiyat-izgara { columns: 3 320px; column-gap: 32px; }
.fiyat-grup { break-inside: avoid; margin-bottom: 32px; padding: 24px; border-radius: var(--r-orta); background: var(--zemin-2); }
.fiyat-grup h3 { font-size: 20px; margin-bottom: 12px; color: var(--marka-koyu); }
.fiyat-grup ul { list-style: none; margin: 0; padding: 0; }
.fiyat-grup a { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--cizgi); }
.fiyat-grup li:last-child a { border-bottom: 0; }
.fiyat-grup a:hover span { color: var(--marka); }
.fiyat-grup span { display: flex; flex-direction: column; font-weight: 500; line-height: 1.35; }
.fiyat-grup small { color: var(--soluk); font-size: 13px; font-weight: 400; }
.fiyat-grup b { margin-left: auto; white-space: nowrap; font-size: 16px; }

/* ---------------------------------------------------------------- sözler */
.sozler { list-style: none; margin: 0 auto 96px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sozler li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--cizgi); border-radius: var(--r-orta); }
.sozler svg { color: var(--marka); margin-bottom: 8px; }
.sozler strong { font-size: 16px; }
.sozler span { color: var(--soluk); font-size: 14px; }
@media (max-width: 860px) { .sozler { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- liste sayfası */
.liste { padding-block: 48px 96px; }
.liste__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.liste__sayi { color: var(--soluk); }
.liste__arac { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cipler::-webkit-scrollbar { display: none; }
.cip { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; }
.cip[aria-pressed="true"] { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.liste__sag { display: flex; gap: 8px; flex-wrap: wrap; }
.liste__ara { position: relative; display: flex; align-items: center; }
.liste__ara svg { position: absolute; left: 14px; color: var(--soluk); }
.liste__ara input, .sirala select { height: 44px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #fff; padding: 0 16px; }
.liste__ara input { padding-left: 40px; width: 220px; }
.izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; } .liste__ara input { width: 100%; } .liste__sag { width: 100%; } .liste__ara { flex: 1; } }
.liste__bos { padding: 48px 0; text-align: center; color: var(--soluk); }

/* ---------------------------------------------------------------- ürün detay */
.iz { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 24px 0; font-size: 14px; color: var(--soluk); }
.iz a:hover { color: var(--marka); }
.urun { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding-block: 32px 64px; align-items: start; }
.urun__gorsel { position: relative; margin: 0; border-radius: var(--r-buyuk); overflow: hidden; background: var(--zemin-2); }
.urun__gorsel img, .urun__gorsel .etiket-svg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.urun__gorsel img[src$='.png'], .urun__gorsel .etiket-svg { object-fit: contain; padding: 12%; filter: drop-shadow(0 16px 28px rgba(20, 17, 13, .16)); }
.urun__wa { margin-top: 16px; align-self: flex-start; }
.urun__bilgi { position: sticky; top: 160px; display: flex; flex-direction: column; gap: 8px; }
.urun h1 { font-size: clamp(32px, 4vw, 48px); }
.urun__gramaj { color: var(--soluk); font-size: 18px; }
.urun__fiyat { font-size: 36px; font-weight: 900; margin: 16px 0; color: var(--marka-koyu); }
.urun__kisa { font-size: 18px; margin-bottom: 16px; }
.urun__aksiyon { max-width: 320px; }
.urun__guven { list-style: none; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--cizgi); display: grid; gap: 12px; }
.urun__guven li { display: flex; align-items: center; gap: 12px; }
.urun__guven svg { color: var(--marka); flex: none; }
.urun__aciklama { margin-top: 24px; display: grid; gap: 12px; }
.urun__ozellik { margin: 24px 0 0; border-radius: var(--r-orta); background: var(--zemin-2); padding: 8px 24px; }
.urun__ozellik div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.urun__ozellik div:last-child { border-bottom: 0; }
.urun__ozellik dt { color: var(--soluk); }
.urun__ozellik dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 860px) { .urun { grid-template-columns: 1fr; gap: 32px; } .urun__bilgi { position: static; } }
.satis-notu { margin-top: 12px; font-size: 14px; color: var(--soluk); }
.satis-notu a { color: var(--marka); font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- sepet */
.sepet { padding-block: 48px 96px; }
.sepet h1 { margin-bottom: 32px; }
.sepet-izgara { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.sepet-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.sepet-satir { display: grid; grid-template-columns: 88px 1fr 140px 120px auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir__gorsel { border-radius: 12px; background: var(--zemin-2); object-fit: cover; aspect-ratio: 1; }
.sepet-satir__bilgi { display: flex; flex-direction: column; }
.sepet-satir__ad { font-weight: 600; }
.sepet-satir__gramaj { color: var(--soluk); font-size: 14px; }
.sepet-satir__tutar { text-align: right; }
.sepet-satir__sil { border: 0; background: none; color: var(--soluk); text-decoration: underline; cursor: pointer; min-height: 44px; }
.ozet { position: sticky; top: 160px; padding: 24px; border-radius: var(--r-orta); background: var(--zemin-2); }
.ozet__baslik { font-size: 22px; margin-bottom: 16px; }
.ozet__satirlar { margin: 0 0 24px; }
.ozet__satirlar div { display: flex; justify-content: space-between; padding: 8px 0; }
.ozet__satirlar dd { margin: 0; font-weight: 600; }
.ozet__toplam { border-top: 1px solid var(--cizgi); margin-top: 8px; padding-top: 16px !important; font-size: 20px; }
.kargo-cubuk { margin-bottom: 16px; font-size: 14px; }
.kargo-cubuk__iz { height: 8px; border-radius: 999px; background: var(--cizgi); margin-top: 8px; overflow: hidden; }
.kargo-cubuk__iz span { display: block; height: 100%; background: var(--yesil); border-radius: inherit; }
.bos { text-align: center; padding: 64px 16px; display: grid; justify-items: center; gap: 12px; }
.bos__baslik { font-family: var(--font-baslik); font-size: 28px; }
.bos__metin { color: var(--soluk); margin-bottom: 16px; }
@media (max-width: 960px) {
  .sepet-izgara { grid-template-columns: 1fr; }
  .sepet-satir { grid-template-columns: 72px 1fr auto; grid-template-areas: "g b s" "g a t"; row-gap: 8px; }
  .sepet-satir__gorsel { grid-area: g; width: 72px; height: 72px; }
  .sepet-satir__bilgi { grid-area: b; }
  .sepet-satir__adet { grid-area: a; max-width: 160px; }
  .sepet-satir__tutar { grid-area: t; }
  .sepet-satir__sil { grid-area: s; justify-self: end; }
  .ozet { position: static; }
}

/* ---------------------------------------------------------------- düz metin sayfaları */
.duz { max-width: 760px; padding-block: 64px 96px; }
.duz h1 { margin-bottom: 32px; }
.duz h2 { font-size: 24px; margin: 40px 0 12px; }
.duz p, .duz li { font-size: 17px; color: #3a342d; }
.duz p + p { margin-top: 12px; }
.duz ul { padding-left: 20px; display: grid; gap: 8px; }

/* ---------------------------------------------------------------- alt bilgi */
.alt { background: var(--gece); color: #d9d2c7; margin-top: 0; border-top: 3px solid var(--altin); }
.alt__ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 64px 48px; }
.alt__marka img { height: 96px; width: auto; margin-bottom: 16px; }
.alt__marka p { max-width: 320px; font-size: 15px; }
.alt h2 { font-family: var(--font-govde); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.alt a:hover { color: #fff; }
.alt__alt { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.alt__satis { color: var(--altin); }
@media (max-width: 960px) { .alt__ust { grid-template-columns: 1fr 1fr; gap: 32px; } .alt__marka { grid-column: 1 / -1; } }
@media (max-width: 860px) { .alt { padding-bottom: 72px; } }

/* ---------------------------------------------------------------- mobil sekme çubuğu */
.sekme { display: none; }
@media (max-width: 860px) {
  .sekme {
    position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 24px;
    background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
    border: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--golge-yuksek);
  }
  .sekme a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 6px 0; font-size: 12px; font-weight: 600; border-radius: 18px; color: var(--soluk); }
  .sekme a:hover { color: var(--marka); background: rgba(0, 0, 0, .03); }
  .sekme .rozet { top: 2px; right: calc(50% - 22px); }
}

/* ---------------------------------------------------------------- bildirim */
.tost {
  position: fixed; z-index: 60; left: 50%; bottom: 32px; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  background: var(--murekkep); color: #fff; padding: 14px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: var(--golge-yuksek);
  transition: opacity .3s var(--egri), transform .3s var(--egri); max-width: calc(100% - 32px); text-align: center;
}
.tost--acik { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { .tost { bottom: 104px; } }

/* ---------------------------------------------------------------- belirme */
.js [data-belir] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--egri), transform .7s var(--egri); }
.js [data-belir].belirdi { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-belir] { opacity: 1; transform: none; }
}

/* yetim kelime koruması (Yasa 31): başlık ve paragrafın son iki kelimesi birlikte kalır */
h1, h2, h3, .kahraman__alt, .bolum-bas__alt { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ================================================================
   RAYNSIS PREMIUM KATMANI (08.10) · iOS 27 düzen dili, Trabzon Gurme paleti
   gölge yerine ince kenar + cam, 8 px ritim, yay eğrisi, tek vurgu (mor) */
:root {
  --egri: cubic-bezier(.32, .72, 0, 1);
  --cam: rgba(255, 255, 255, .72);
  --cam-kenar: rgba(56, 13, 95, .10);
  --golge: 0 1px 0 rgba(56, 13, 95, .04), 0 12px 32px -16px rgba(56, 13, 95, .18);
  --golge-yuksek: 0 1px 0 rgba(56, 13, 95, .05), 0 24px 48px -24px rgba(56, 13, 95, .28);
  --r-orta: 16px;
}
body { font-size: 16px; letter-spacing: .005em; }
h1 { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: .02em; }
h2 { font-size: clamp(24px, 2.8vw, 36px); letter-spacing: .02em; }
.etiket { font-size: 12px; letter-spacing: .18em; }

/* cam üst bar: iOS 27 · içerik altından akar, ince kenar */
.ust { background: var(--cam); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); border-bottom: .5px solid var(--cam-kenar); }
.ust--kucuk { box-shadow: 0 1px 0 var(--cam-kenar); }
.kategori-nav { border-top: .5px solid var(--cam-kenar); }
.kategori-nav a { font-size: 14px; letter-spacing: .02em; transition: color .2s var(--egri), border-color .2s var(--egri); }
.duyuru { font-size: 12px; letter-spacing: .04em; padding-block: 8px; }

/* kart: tek yüzey katmanı, gölge yerine kenar */
.kart { border: .5px solid var(--cizgi); padding: 8px; border-radius: 20px; transition: transform .45s var(--egri), box-shadow .45s var(--egri), border-color .3s; }
.kart:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek); border-color: transparent; }
.kart__gorsel { border-radius: 14px; }
.kart__govde { padding: 16px 8px 8px; }
.kart__aksiyon { padding: 0 8px 8px; }
.kart__fiyat { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* görsel türüne göre: jpg fotoğraf tam doldurur, png etiket ve svg çizim içeride durur */
.kart__gorsel img[src$='.jpg'], .kart__gorsel img[src$='.jpeg'], .kart__gorsel img[src$='.webp'],
.urun__gorsel img[src$='.jpg'], .urun__gorsel img[src$='.jpeg'], .urun__gorsel img[src$='.webp'],
.basamak__gorsel img[src$='.jpg'], .kat-kutu__gorsel img[src$='.jpg'] { object-fit: cover; padding: 0; filter: none; background: var(--zemin-2); }
.kart__gorsel img[src$='.svg'], .urun__gorsel img[src$='.svg'] { object-fit: contain; padding: 10%; }

/* gerçek etiket rozeti: fotoğrafın sağ alt köşesinde küçük yuvarlak */
.kart__gorsel .etiket-rozet, .urun__gorsel .etiket-rozet {
  position: absolute; right: 8px; bottom: 8px; width: 56px; height: 56px; aspect-ratio: 1; padding: 0; object-fit: contain;
  border-radius: 50%; background: var(--krem); border: 2px solid #fff; box-shadow: 0 8px 20px -8px rgba(20, 17, 13, .45); filter: none; transform: none !important;
}
.urun__gorsel .etiket-rozet { width: 96px; height: 96px; right: 16px; bottom: 16px; border-width: 3px; }
@media (max-width: 520px) { .kart__gorsel .etiket-rozet { width: 44px; height: 44px; right: 6px; bottom: 6px; } .urun__gorsel .etiket-rozet { width: 72px; height: 72px; } }

/* ürün detayı ritmi */
.urun__gorsel { border-radius: 24px; }
.urun__fiyat { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* mobil çekmece menü (sutas.market: soldan 280 px) · popover, JS yok */
.menu-tus { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--marka-koyu); cursor: pointer; place-items: center; }
.menu-tus:hover { background: var(--marka-acik); }
.cekmece[popover] {
  position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw; height: 100dvh; max-height: none; margin: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  border: 0; border-right: .5px solid var(--cam-kenar); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  overflow-y: auto; color: var(--murekkep);
  transform: translateX(-100%); transition: transform .45s var(--egri), display .45s allow-discrete, overlay .45s allow-discrete;
}
.cekmece[popover]:popover-open { transform: none; }
@starting-style { .cekmece[popover]:popover-open { transform: translateX(-100%); } }
.cekmece::backdrop { background: rgba(18, 13, 24, .32); }
.cekmece__bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.cekmece__bas img { height: 32px; width: auto; }
.cekmece__kapat { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--zemin-2); cursor: pointer; display: grid; place-items: center; }
.cekmece__grup { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); margin: 16px 8px 8px; }
.cekmece ul { list-style: none; margin: 0; padding: 4px; border-radius: 14px; background: var(--zemin-2); }
.cekmece li + li { border-top: .5px solid var(--cizgi); }
.cekmece a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 600; font-size: 16px; border-radius: 10px; }
.cekmece a[aria-current] { color: var(--marka); background: var(--marka-acik); }
@media (max-width: 860px) {
  .menu-tus { display: grid; }
  .ust__ic { grid-template-columns: auto auto 1fr; column-gap: 8px; }
  .ara { grid-column: 1 / -1; }
  .kategori-nav { display: none; }
  .duyuru p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .cekmece[popover] { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .ust, .cekmece[popover], .sekme { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* yalnız toptan satılan ürün (internet fiyatı yok) */
.kart__fiyat--toptan, .urun__fiyat--toptan { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--altin-koyu); }
.urun__fiyat--toptan { font-size: 18px; }
.btn--toptan { width: 100%; min-height: 44px; padding: 10px 16px; font-size: 14px; background: var(--gece); color: var(--krem); }
.btn--toptan:hover { background: var(--marka-koyu); }
.btn--toptan.btn--buyuk { width: auto; min-height: 56px; font-size: 16px; }

.duz__gorsel { margin: 0 0 40px; border-radius: var(--r-buyuk); overflow: hidden; }
.duz__gorsel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* klavye ile seçilen arama önerisi + sepet özetinde "Alışverişe devam et" (QC_ISLEV.md madde 2 ve 3) */
.oneri__satir--secili, .oneri__satir[aria-selected="true"] { background: var(--zemin-2); outline: 2px solid var(--marka); outline-offset: -2px; }
.ozet__devam { margin-top: 16px; text-align: center; font-size: 15px; }
.ozet__devam a { color: var(--marka); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* üst bant: kalite mesajları soldan sağa kayar (Faruk 09.10); süre mesaj başına 4,5 sn */
.duyuru { position: relative; overflow: hidden; height: 36px; padding: 0; }
.duyuru__iz { list-style: none; margin: 0 auto; padding: 0; position: relative; height: 100%; max-width: 1280px; }
.duyuru__iz li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; opacity: 0; transform: translateX(-110%);
  animation: duyuru-kay calc(var(--n) * 4.5s) linear infinite; animation-delay: calc(var(--i) * 4.5s); }
.duyuru__iz li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--altin); margin-right: 10px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .duyuru__iz li { animation: none; }
  .duyuru__iz li:first-child { opacity: 1; transform: none; }
}

/* kategori daireleri: dördü aynı koyu sahne zemininde, eşit (Faruk 09.10) */
.kat-kutu__gorsel { background: #2b2a2c; border: 3px solid #fff; }
.kat-kutu__gorsel img { object-fit: cover !important; padding: 0 !important; filter: none !important; }