/* ==========================================================================
   Halil Esen — ana stil dosyası
   Bölümler:
    1  Token'lar            2  Temel              3  Yardımcılar
    4  Düğme ve bağlantı    5  Form               6  Duyuru şeridi
    7  Header + kategori menüsü                 8  Mega menü
   10  Perde + mobil çekmece                     11  Üye çekmecesi
   12  Bölüm başlıkları     13  Slayt sahnesi     13b İmza (Hat)    14  Ödüller
   15  Seçki + künye        16  Dağdan denize     17  Hikâye
   18  Vitrin + ray + ürün kartı                 19  Sofra
   20  Rehber               21  Bülten            22  Footer
   23  Mobil alt çubuk      24  Bildirim          25  Hareket azaltma
   ========================================================================== */


/* 1  Token'lar ------------------------------------------------------------ */
:root {
  --kirec: #F4F4EF;          /* zemin: kireçtaşı */
  --yaprak-gumus: #DDE1D8;   /* zeytin yaprağının alt yüzü: ürün zemini, ikincil yüzey */
  --zeytin: #29371E;         /* hakim renk (Yusuf): koyu bantlar, birincil düğme, menü */
  --zeytin-2: #36472A;       /* zeytin hover */
  --gece: #1D2835;           /* Özel Hasat tenekesinin laciverti: metin */
  --yaprak: #4A6B5C;         /* logonun adaçayı ucu, koyulaştırılmış */
  --yag: #C9B84A;            /* yağın rengi: yalnız koyu zeminde, küçük vurgu */
  --indirim: #9A3B2E;

  --metin: var(--gece);
  --metin-ikincil: #55606B;
  --cizgi: rgba(29, 40, 53, .14);
  --cizgi-koyu: rgba(29, 40, 53, .32);
  --gece-2: #2A3747;
  --kirec-soluk: rgba(244, 244, 239, .72);
  --kirec-cizgi: rgba(244, 244, 239, .16);

  --f-baslik: 'Marcellus', 'Times New Roman', serif;
  --f-metin: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-dev: clamp(2.6rem, 1.55rem + 4.1vw, 5.25rem);
  --t-1: clamp(2rem, 1.45rem + 2.2vw, 3.4rem);
  --t-2: clamp(1.55rem, 1.3rem + 1vw, 2.15rem);
  --t-3: 1.375rem;
  --t-govde: 1.0625rem;
  --t-kucuk: .875rem;
  --t-mini: .8125rem;

  --kap: 1320px;
  --kenar: clamp(1rem, .4rem + 3vw, 3.5rem);
  --bolum: clamp(4.5rem, 3rem + 6vw, 9rem);
  --h-ust: 76px;
  --h-altnav: 0px;
  --hiz: .32s;
  --egri: cubic-bezier(.3, .7, .2, 1);
}
@media (max-width: 1023px) {
  :root { --h-ust: 62px; --h-altnav: 60px; }
}


/* 2  Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kirec);
  color: var(--metin);
  font-family: var(--f-metin);
  font-size: var(--t-govde);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--h-altnav) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
body.kilitli { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-baslik); font-weight: 400; line-height: 1.1; letter-spacing: 0; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--yaprak); outline-offset: 3px; }
::selection { background: var(--yag); color: var(--gece); }


/* 3  Yardımcılar ---------------------------------------------------------- */
.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ikon--buyuk { width: 44px; height: 44px; stroke-width: 1.1; }
.atla { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--zeytin); color: var(--kirec); padding: .75rem 1rem; text-decoration: none; }
.atla:focus { top: .75rem; }

/* teyit bekleyen bilgi: gerçek veri gibi görünmesin */
.bekliyor {
  display: inline-block;
  font-family: var(--f-metin);
  font-size: var(--t-mini);
  line-height: 1.4;
  color: var(--metin-ikincil);
  border-bottom: 1px dashed currentColor;
  cursor: help;
  letter-spacing: 0;
}

/* stok durumu noktası */
.durum { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .55em; vertical-align: .12em; background: var(--yaprak); }
.durum--bekliyor { background: transparent; box-shadow: inset 0 0 0 1.5px var(--metin-ikincil); }

.fiyat { font-variant-numeric: tabular-nums; font-weight: 600; }
.fiyat__birim { font-variant-numeric: tabular-nums; color: var(--metin-ikincil); font-size: var(--t-mini); }


/* 4  Düğme ve bağlantı ---------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: 0 1.75rem;
  background: var(--zeytin); color: var(--kirec);
  border: 1px solid var(--zeytin); border-radius: 2px;
  font-family: var(--f-metin); font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--hiz) var(--egri), color var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
.dugme:hover { background: var(--zeytin-2); border-color: var(--zeytin-2); }
.dugme--cizgi { background: transparent; color: var(--zeytin); border-color: var(--cizgi-koyu); }
.dugme--cizgi:hover { background: transparent; border-color: var(--zeytin); }
.dugme--acik { background: var(--kirec); color: var(--zeytin); border-color: var(--kirec); }
.dugme--acik:hover { background: #fff; border-color: #fff; }
.dugme--kucuk { min-height: 2.75rem; padding: 0 1.15rem; font-size: .875rem; }
.dugme--tam { width: 100%; }
.dugme.is-eklendi { background: var(--yaprak); border-color: var(--yaprak); }

.baglanti {
  display: inline-block; padding-block: .35rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--hiz) var(--egri), color var(--hiz);
}
.baglanti:hover { color: var(--zeytin); background-size: 40% 1px; }

.metin-dugme { font-size: var(--t-kucuk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.metin-dugme:hover { color: var(--yaprak); }


/* 5  Form ------------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.alan { display: grid; gap: .4rem; }
.alan label { font-size: var(--t-kucuk); font-weight: 600; }
.alan input {
  width: 100%; min-height: 3.1rem; padding: 0 .95rem;
  background: #FBFBF8; border: 1px solid var(--cizgi-koyu); border-radius: 2px;
  font-size: 1rem; transition: border-color var(--hiz);
}
.alan input:focus { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin); }
.alan.is-hata input { border-color: var(--indirim); }
.alan__hata, [data-hata="sozlesme"] { font-size: var(--t-mini); color: var(--indirim); min-height: 0; }
.alan__hata:empty { display: none; }
.alan__sifre { position: relative; }
.alan__sifre input { padding-right: 3.2rem; }
.alan__goz { position: absolute; right: 0; top: 0; width: 3rem; height: 100%; display: grid; place-items: center; color: var(--metin-ikincil); }
.alan__goz[aria-pressed="true"] { color: var(--gece); }
.form__satir { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.secim { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-kucuk); line-height: 1.5; cursor: pointer; }
.secim input { width: 18px; height: 18px; margin: .12rem 0 0; accent-color: var(--zeytin); flex: none; }
.secim a { text-underline-offset: 2px; }
.guc { display: flex; align-items: center; gap: .6rem; font-size: var(--t-mini); color: var(--metin-ikincil); }
.guc__cubuk { flex: 1; height: 3px; background: var(--cizgi); position: relative; overflow: hidden; }
.guc__cubuk i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--indirim); transition: width var(--hiz), background var(--hiz); }
.guc[data-seviye="2"] i { width: 66%; background: var(--yag); }
.guc[data-seviye="3"] i { width: 100%; background: var(--yaprak); }
.guc[data-seviye="1"] i { width: 33%; }


/* 6  Duyuru şeridi -------------------------------------------------------- */
.duyuru { background: var(--zeytin); color: var(--kirec); font-size: var(--t-mini); }
.duyuru__ic { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.duyuru__metin { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.duyuru__metin .ikon { width: 20px; height: 20px; color: var(--yag); stroke-width: 1.5; }
.duyuru__baglantilar { display: flex; align-items: center; }
.duyuru__baglantilar li { display: flex; align-items: center; }
.duyuru__baglantilar li + li::before { content: ""; width: 1px; height: 12px; margin-inline: 1rem; background: var(--kirec-cizgi); }
.duyuru__baglantilar a { text-decoration: none; color: var(--kirec-soluk); transition: color var(--hiz); }
.duyuru__baglantilar a:hover { color: var(--kirec); }
@media (max-width: 1023px) {
  .duyuru__ic { justify-content: center; min-height: 36px; }
  .duyuru__baglantilar { display: none; }
}


/* 7  Header: logo, arama, araçlar + kategori menüsü ------------------------ */
.ust {
  position: sticky; top: 0; z-index: 40;
  background: var(--kirec);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo ara araclar";
  column-gap: clamp(1.5rem, .5rem + 3vw, 4rem);
  align-items: center;
  height: 108px;
  transition: height var(--hiz) var(--egri);
}
.ust__logo { grid-area: logo; display: block; }
.ust__logo img { width: auto; height: 72px; transition: height var(--hiz) var(--egri); }
.ust.is-kaydi .ust__ic { height: 80px; }
.ust.is-kaydi .ust__logo img { height: 54px; }

.ust__ikon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--gece); text-decoration: none; transition: color var(--hiz); }
.ust__ikon:hover { color: var(--zeytin); }
.ust__menu { grid-area: menu; display: none; margin-left: -.6rem; }

/* her zaman açık arama kutusu */
.ust-ara { grid-area: ara; justify-self: center; position: relative; width: min(480px, 100%); }
.ust-ara__alan {
  width: 100%; height: 50px; padding: 0 3.4rem 0 1.1rem;
  background: #FBFBF8; border: 1px solid var(--cizgi-koyu); border-radius: 2px;
  font-size: 1rem; transition: border-color var(--hiz), box-shadow var(--hiz);
}
.ust-ara__alan::placeholder { color: rgba(29, 40, 53, .5); }
.ust-ara__alan::-webkit-search-cancel-button { display: none; }
.ust-ara__alan:focus { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin); }
.ust-ara__gonder { position: absolute; right: 0; top: 0; width: 50px; height: 50px; display: grid; place-items: center; color: var(--zeytin); }
.ust-ara__gonder:hover { color: var(--gece); }

.ara-oneri {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem;
  padding: 1.5rem; background: var(--kirec);
  border: 1px solid var(--cizgi); box-shadow: 0 18px 40px -18px rgba(29, 40, 53, .28);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s var(--egri), transform .2s var(--egri);
}
.ara-oneri.is-acik { opacity: 1; transform: none; pointer-events: auto; }
.ara-oneri__baslik { font-size: var(--t-mini); color: var(--metin-ikincil); margin-bottom: .7rem; }
.ara-oneri__etiketler { display: flex; flex-wrap: wrap; gap: .45rem; }
.ara-oneri__etiketler a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--cizgi-koyu); border-radius: 2px; text-decoration: none; font-size: var(--t-kucuk); }
.ara-oneri__etiketler a:hover { border-color: var(--zeytin); color: var(--zeytin); }
.ara-oneri__kestirme { display: grid; }
.ara-oneri__kestirme a { display: inline-block; padding: .3rem 0; text-decoration: none; font-size: .9375rem; }
.ara-oneri__kestirme a:hover { color: var(--zeytin); }

/* büyük ikonlar */
.ust__araclar { grid-area: araclar; display: flex; align-items: center; gap: .25rem; margin-right: -.6rem; }
.ust__arac {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: 0 .7rem;
  font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--gece); text-decoration: none;
  transition: color var(--hiz);
}
.ust__arac .ikon { width: 46px; height: 46px; stroke-width: 1.1; transition: width var(--hiz) var(--egri), height var(--hiz) var(--egri); }
.ust.is-kaydi .ust__arac .ikon { width: 36px; height: 36px; }
.ust__arac:hover { color: var(--zeytin); }
.ust__arac .rozet { top: 1px; left: calc(50% + 9px); right: auto; }
.rozet {
  position: absolute; top: 5px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--zeytin); color: var(--kirec);
  font: 600 10.5px/18px var(--f-metin); text-align: center; font-variant-numeric: tabular-nums;
}

/* kategori menüsü */
.menubar { border-top: 1px solid var(--cizgi); }
.menubar__liste { display: flex; justify-content: space-between; }
.menubar__oge { display: flex; align-items: center; }
.menubar__baglanti {
  position: relative; display: flex; align-items: center; height: 58px;
  font-size: 1.0625rem; font-weight: 600; color: var(--zeytin); text-decoration: none;
}
.menubar__baglanti::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--hiz) var(--egri);
}
.menubar__baglanti:hover::after, .menubar__oge.is-acik .menubar__baglanti::after { transform: scaleX(1); }
.menubar__ac { display: grid; place-items: center; width: 28px; height: 58px; color: var(--zeytin); }
.menubar__ac .ikon { width: 16px; height: 16px; stroke-width: 1.6; transition: transform var(--hiz); }
.menubar__ac[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.menubar__oge--kampanya .menubar__baglanti { height: auto; padding: .55rem 1.1rem; background: var(--indirim); color: #fff; border-radius: 2px; transition: background var(--hiz); }
.menubar__oge--kampanya .menubar__baglanti::after { display: none; }
.menubar__oge--kampanya .menubar__baglanti:hover { background: #82301F; }

@media (max-width: 1023px) {
  .menubar { display: none; }
  .ust__ic {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-areas: "menu logo . araclar" "ara ara ara ara";
    height: auto; row-gap: .5rem; padding-block: .5rem .75rem;
  }
  .ust.is-kaydi .ust__ic { height: auto; }
  .ust__menu { display: grid; }
  .ust__logo img, .ust.is-kaydi .ust__logo img { height: 48px; }
  .ust-ara { width: 100%; }
  .ust-ara__alan { height: 46px; }
  .ust-ara__gonder { width: 46px; height: 46px; }
  .ust__arac--genis { display: none; }
  .ust__arac { padding: 0 .45rem; }
  .ust__arac .ikon, .ust.is-kaydi .ust__arac .ikon { width: 32px; height: 32px; stroke-width: 1.2; }
  .ust__arac-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ust__arac .rozet { left: calc(50% + 6px); }
  .ara-oneri { grid-template-columns: 1fr; }
}


/* 8  Mega menü ------------------------------------------------------------- */
/* container genişliğinde, yarı geçirgen buzlu cam (Yusuf'un isteği) */
.mega {
  position: absolute; left: 50%; top: 100%;
  width: min(var(--kap), calc(100% - 2 * var(--kenar)));
  background: rgba(244, 244, 239, .66);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-top: 0;
  box-shadow: 0 24px 48px -24px rgba(41, 55, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  border-radius: 0 0 4px 4px;
  opacity: 0; transform: translate(-50%, -6px); pointer-events: none;
  transition: opacity .22s var(--egri), transform .22s var(--egri);
}
.mega.is-acik { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mega { background: rgba(244, 244, 239, .97); }
}
.mega__ic.kap { max-width: none; padding-inline: clamp(1.5rem, 1rem + 1.5vw, 2.75rem); }
.mega__ic { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 1.25rem 3rem; padding-block: 2.25rem 2.25rem; }
.mega__baslik { font-size: var(--t-mini); color: var(--metin-ikincil); margin-bottom: .75rem; }
.mega__baslik:not(:first-child) { margin-top: 1.75rem; }
.mega__sutun a { display: inline-block; padding: .3rem 0; font-family: var(--f-baslik); font-size: 1.25rem; text-decoration: none; }
.mega__sutun a:hover { color: var(--zeytin); }
.mega__one { grid-row: 1 / 3; grid-column: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; text-decoration: none; }
.mega__one-gorsel { display: block; aspect-ratio: 4 / 5; background: rgba(221, 225, 216, .7); overflow: hidden; }
.mega__one-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--egri); }
.mega__one-gorsel--sise img { object-fit: contain; padding: 10% 0 6%; }
.mega__one:hover .mega__one-gorsel img { transform: scale(1.03); }
.mega__one-metin { display: grid; gap: .4rem; padding-bottom: .25rem; }
.mega__one-ad { font-family: var(--f-baslik); font-size: 1.5rem; line-height: 1.15; }
.mega__one-not { font-size: var(--t-kucuk); color: var(--metin-ikincil); }
.mega__tumu { grid-column: 1 / 3; align-self: end; justify-self: start; font-weight: 600; font-size: .9375rem; color: var(--zeytin); text-underline-offset: 4px; }
.mega__tumu:hover { color: var(--gece); }


/* 10  Perde + mobil çekmece ----------------------------------------------- */
.perde {
  position: fixed; inset: 0; z-index: 45; background: rgba(29, 40, 53, .38);
  opacity: 0; pointer-events: none; transition: opacity var(--hiz);
}
.perde.is-acik { opacity: 1; pointer-events: auto; }
.perde--ust { z-index: 35; background: rgba(41, 55, 30, .16); }

.cekmece {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--kirec);
  transform: translateX(-100%); pointer-events: none; visibility: hidden;
  transition: transform .38s var(--egri), visibility 0s linear .38s;
}
.cekmece.is-acik { transform: none; pointer-events: auto; visibility: visible; transition: transform .38s var(--egri); }
.cekmece__ust { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: var(--h-ust); padding: 0 .5rem; border-bottom: 1px solid var(--cizgi); }
.cekmece__ust [data-cekmece-kapat] { grid-column: 3; }
.cekmece__baslik { grid-column: 2; text-align: center; font-family: var(--f-baslik); font-size: 1.25rem; }
.cekmece__paneller { position: relative; flex: 1; overflow: hidden; }
.cekmece__panel { position: absolute; inset: 0; overflow-y: auto; padding: 1rem var(--kenar) 2rem; overscroll-behavior: contain; animation: panelGir .32s var(--egri); }
.cekmece__panel.is-geri { animation-name: panelGeri; }
@keyframes panelGir { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes panelGeri { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cekmece__liste > li > a, .cekmece__liste > li > button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  min-height: 3.25rem; text-align: left; text-decoration: none; border-bottom: 1px solid var(--cizgi);
}
.cekmece__liste--buyuk > li > a, .cekmece__liste--buyuk > li > button { font-family: var(--f-baslik); font-size: 1.6rem; min-height: 4rem; }
.cekmece__liste--kucuk { margin-top: 2rem; }
.cekmece__liste .cekmece__kampanya { color: var(--indirim); }
.cekmece__liste--kucuk > li > a, .cekmece__liste--kucuk > li > button { border-bottom: 0; min-height: 2.75rem; font-size: .9375rem; color: var(--metin-ikincil); }
@media (min-width: 1024px) { .cekmece { display: none !important; } }


/* 11  Üye çekmecesi --------------------------------------------------------
   Zeytin bandı (beyaz logo + silik dal), beyaz gövde; Giriş/Üye ol kapsül sekmesi
   kayan gösterge ile; her görünümde etiket + başlık + kısa metin; alt şeritte yardım. */
.uye {
  position: fixed; inset: 0 0 0 auto; z-index: 50;
  width: min(460px, 100%); display: flex; flex-direction: column;
  background: #fff; box-shadow: -30px 0 60px -30px rgba(20, 28, 14, .5);
  transform: translateX(100%); pointer-events: none; visibility: hidden;
  transition: transform .42s var(--egri), visibility 0s linear .42s;
}
.uye.is-acik { transform: none; pointer-events: auto; visibility: visible; transition: transform .42s var(--egri); }
.uye__ust { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 1.1rem 0 1.75rem; background: var(--zeytin); overflow: hidden; }
.uye__desen { position: absolute; right: 64px; top: 4px; width: 220px; height: 80px; fill: none; stroke: rgba(201, 184, 74, .28); stroke-width: 1.1; }
.uye__desen path + path { fill: rgba(201, 184, 74, .12); }
.uye__logo { position: relative; width: auto; height: 52px; }
.uye__kapat { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; border: 1px solid rgba(255, 255, 255, .28); transition: background .3s, border-color .3s, transform .3s var(--egri); }
.uye__kapat:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); transform: rotate(90deg); }
.uye__kapat .ikon { width: 18px; height: 18px; }
.uye__govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1.75rem 2rem; }
.uye__sekme { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 1.75rem; border-radius: 999px; background: #F2F0E4; }
.uye__sekme i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--zeytin); box-shadow: 0 8px 18px -10px rgba(41, 55, 30, .8); transition: transform .45s cubic-bezier(.65, 0, .25, 1), opacity .3s; }
.uye__sekme[data-secili="kayit"] i { transform: translateX(100%); }
.uye__sekme[data-secili="yok"] i { opacity: 0; }
.uye__sekme button { position: relative; z-index: 1; height: 44px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--metin-ikincil); transition: color .35s; }
.uye__sekme button[aria-selected="true"] { color: #fff; }
.uye__sekme button:focus-visible { outline: 2px solid var(--yag); outline-offset: -4px; }
.uye__gorunum:not([hidden]) { animation: uyeGir .4s var(--egri) both; }
@keyframes uyeGir { from { opacity: 0; transform: translateX(14px); } }
.uye__etiket { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; color: var(--yaprak); }
.uye__etiket::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.uye__baslik { margin: .45rem 0 .5rem; font-family: var(--f-baslik); font-weight: 400; font-size: 1.9rem; line-height: 1.12; color: var(--zeytin); }
.uye__metin { margin-bottom: 1.4rem; font-size: .9rem; line-height: 1.6; color: var(--metin-ikincil); }
.uye .form { gap: 1rem; }
.uye .alan input { min-height: 52px; border-radius: 12px; background: #FAFAF6; border-color: #DEDCD0; }
.uye .alan input::placeholder { color: #9AA1A8; }
.uye .alan input:focus { background: #fff; }
.uye .alan__goz { border-radius: 0 12px 12px 0; }
.uye .alan.is-hata input { border-color: var(--indirim); background: #FFF8F6; }
.uye__yardim a[href^="tel"] { white-space: nowrap; }
.uye__onay { position: relative; display: flex; align-items: flex-start; gap: .65rem; font-size: .86rem; line-height: 1.5; color: #3C4650; cursor: pointer; }
.uye__onay input { position: absolute; opacity: 0; pointer-events: none; }
.uye__kutu { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(41, 55, 30, .35); background: #fff; transition: background .25s, border-color .25s; }
.uye__kutu::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--egri); }
.uye__onay input:checked + .uye__kutu { background: var(--zeytin); border-color: var(--zeytin); }
.uye__onay input:checked + .uye__kutu::after { transform: rotate(45deg) scale(1); }
.uye__onay input:focus-visible + .uye__kutu { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.uye__onay a { color: var(--zeytin); font-weight: 600; text-underline-offset: 2px; }
.uye__uyari { display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; border-radius: 12px; background: #F8ECE9; color: var(--indirim); font-size: .86rem; font-weight: 600; }
.uye__uyari[hidden] { display: none; }
.uye__uyari .ikon { flex: none; width: 18px; height: 18px; stroke-width: 1.8; }
.uye__dugme {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 54px;
  border-radius: 999px; background: var(--zeytin); color: #fff; font-weight: 700; font-size: .98rem; text-decoration: none;
}
.uye__dugme::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--zeytin-2); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.65, 0, .25, 1); }
.uye__dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.uye__dugme .ikon { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--yag); color: var(--zeytin); stroke-width: 2; transition: transform .4s var(--egri); }
.uye__dugme:hover .ikon { transform: translateX(3px); }
.uye__dugme--cizgi { background: transparent; color: var(--zeytin); border: 1px solid rgba(41, 55, 30, .28); }
.uye__dugme--cizgi::before { background: #F2F0E4; }
.uye__ayrac { display: flex; align-items: center; gap: .9rem; margin: 1.5rem 0 1.1rem; font-size: .76rem; color: #9AA1A8; }
.uye__ayrac::before, .uye__ayrac::after { content: ""; flex: 1; height: 1px; background: #E6E4DA; }
.uye__alt { text-align: center; font-size: .9rem; color: var(--metin-ikincil); }
.uye__alt button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.uye__avantaj { display: flex; gap: .7rem; margin-top: 1.4rem; padding: .95rem 1.1rem; border-radius: 12px; background: #F6F5EE; border-left: 3px solid var(--yag); font-size: .84rem; line-height: 1.55; color: #3C4650; }
.uye__avantaj .ikon { flex: none; width: 20px; height: 14px; margin-top: 3px; fill: var(--yaprak); stroke: none; }
.uye__avantaj b { color: var(--zeytin); }
.uye__sonuc { display: grid; justify-items: center; text-align: center; padding-top: 1.5rem; }
.uye__tik { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: .75rem; border-radius: 50%; background: #EEF3EE; color: var(--yaprak); box-shadow: 0 0 0 10px rgba(74, 107, 92, .07); }
.uye__tik .ikon { width: 34px; height: 34px; stroke-width: 2.2; }
.uye__sonuc-d { display: grid; gap: .6rem; width: 100%; margin-top: .5rem; }
.uye__yardim { flex: none; padding: .95rem 1.75rem; border-top: 1px solid #ECEBE4; background: #FAFAF6; font-size: .82rem; color: var(--metin-ikincil); text-align: center; }
.uye__yardim a { color: var(--zeytin); font-weight: 700; text-decoration: none; }
.uye__yardim a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479px) {
  .uye__ust { height: 76px; padding-left: 1.25rem; }
  .uye__logo { height: 44px; }
  .uye__desen { right: 56px; }
  .uye__govde { padding: 1.25rem 1.25rem 1.75rem; }
  .uye__baslik { font-size: 1.65rem; }
}


/* 12  Bölüm başlıkları ----------------------------------------------------- */
.bolum-bas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bolum-bas__baslik { font-size: var(--t-1); }
.bolum-bas__aciklama { color: var(--metin-ikincil); max-width: 34rem; }
.bolum-bas--dar { grid-template-columns: 1fr; max-width: 40rem; }
.bolum-bas--satir { display: flex; justify-content: space-between; align-items: baseline; }
@media (max-width: 767px) { .bolum-bas { grid-template-columns: 1fr; } }


/* 13  Slayt sahnesi --------------------------------------------------------
   Dört slayt üst üste durur. Geçişte: zemin perde gibi açılır, başlık satırları
   maskenin altından yükselir, ürün kendi ufuk çizgisine oturur. Ürünler
   ortalamayı `translate` ile, girişi `transform` ile yapar; ikisi çakışmaz. */
.sahne {
  --sahne-h: clamp(600px, calc(100svh - 207px), 860px);
  position: relative; height: var(--sahne-h); overflow: hidden; isolation: isolate;
  background: var(--zeytin); color: var(--kirec);
}
.sahne__slaytlar { position: absolute; inset: 0; touch-action: pan-y; }
.slayt { position: absolute; inset: 0; visibility: hidden; }
.slayt.is-aktif { visibility: visible; z-index: 3; }
.slayt.is-cikan { visibility: visible; z-index: 2; }
.slayt--koyu { color: var(--kirec); }
.slayt--acik { color: var(--gece); }

/* zeminler */
.slayt__zemin { position: absolute; inset: 0; overflow: hidden; }
.slayt--madalya .slayt__zemin { background: var(--zeytin); }
/* zeytin dalı deseni (Yusuf'un verdiği arkaplan.jpg): yeşil zeminin altından görünür */
.slayt__desen {
  position: absolute; inset: -2px;
  background: url("../img/desen/zeytin-dali.webp") 0 0 / 360px 360px repeat;
  opacity: .55;
}
.slayt.is-aktif .slayt__desen { animation: fotoYakin 2s cubic-bezier(.2, .8, .2, 1) both; }
.slayt--madalya .slayt__zemin::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 52% at 71% 60%, rgba(201, 184, 74, .3), transparent 72%),
    linear-gradient(90deg, rgba(41, 55, 30, .88) 0%, rgba(41, 55, 30, .55) 38%, rgba(41, 55, 30, .15) 70%, rgba(41, 55, 30, .45) 100%),
    linear-gradient(0deg, rgba(41, 55, 30, .7) 0%, rgba(41, 55, 30, 0) 30%);
}
.slayt--hasat .slayt__zemin { background: var(--zeytin); }
.slayt__foto { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.slayt--hasat .slayt__zemin::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(41, 55, 30, .94) 0%, rgba(41, 55, 30, .8) 32%, rgba(41, 55, 30, .18) 66%, rgba(41, 55, 30, 0) 100%),
    linear-gradient(0deg, rgba(41, 55, 30, .8) 0%, rgba(41, 55, 30, 0) 32%);
}
.slayt--cesit .slayt__zemin { background: radial-gradient(ellipse 40% 60% at 72% 55%, rgba(255, 255, 255, .55), transparent 70%), var(--yaprak-gumus); }
.slayt--zeytin .slayt__zemin { background: radial-gradient(ellipse 45% 55% at 70% 62%, #fff, transparent 72%), var(--kirec); }

/* içerik */
.slayt__ic {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 2rem;
  padding-bottom: 104px;
}
.slayt__metin { max-width: 33rem; container-type: inline-size; }
.slayt__ust { font-size: var(--t-kucuk); font-weight: 600; margin-bottom: 1.25rem; }
.slayt--koyu .slayt__ust { color: var(--yag); }
.slayt--acik .slayt__ust { color: var(--yaprak); }
/* en uzun kelime ("Madalyalarla" ≈ 5,9 em) metin sütununa her genişlikte sığsın */
.slayt__baslik { font-size: min(clamp(2.8rem, 1.3rem + 4.7vw, 5.9rem), 15.5cqi); line-height: 1; margin-bottom: 1.5rem; }
/* maske yalnız dikeyde kırpar (yükselme animasyonu için); yatayda harf kesilmez */
.satir { display: block; overflow-x: visible; overflow-y: clip; padding-block: .2em .18em; margin-block: -.2em -.18em; }
.satir > span { display: block; }
.slayt__govde { font-size: 1.125rem; max-width: 27rem; }
.slayt--koyu .slayt__govde { color: var(--kirec-soluk); }
.slayt--acik .slayt__govde { color: var(--metin-ikincil); }
.slayt__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.slayt--koyu .baglanti:hover { color: var(--yag); }

/* görsel sahnesi: fareyle derinlik */
.slayt__gorsel {
  position: relative; align-self: stretch; height: 100%;
  translate: var(--px, 0) var(--py, 0);
  transition: translate 1s cubic-bezier(.2, .8, .2, 1);
}
.slayt__ufuk { position: absolute; left: -8%; right: calc(var(--kenar) * -1 - 20vw); bottom: 20%; height: 1px; background: currentColor; opacity: .3; transform-origin: left; }
.slayt__urun { position: absolute; bottom: 20%; width: auto; max-width: none; }
.slayt--koyu .slayt__urun { filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .38)); }
.slayt--acik .slayt__urun { filter: drop-shadow(0 26px 24px rgba(41, 55, 30, .2)); }

/* 1. slayt: görsel + arkasında çerçeve, halkalar, nokta ızgara, yağ rengi hâle */
/* görsel ufuk çizgisinin üstüne oturur */
.suslu {
  position: absolute; left: 52%; bottom: 5%; translate: -50% 0;
  height: min(80%, 560px); aspect-ratio: 685 / 689; margin: 0;
  --kose: 26px;
}
.suslu__gorsel {
  position: relative; z-index: 4; display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--kose); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65);
}
.suslu__hale { position: absolute; z-index: 0; inset: -30%; background: radial-gradient(closest-side, rgba(201, 184, 74, .32), rgba(201, 184, 74, .08) 55%, transparent 75%); }
.suslu__halka { position: absolute; z-index: 1; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.suslu__halka--ic { width: 128%; border: 1px solid rgba(244, 244, 239, .16); }
.suslu__halka--dis { width: 162%; border: 1px dashed rgba(201, 184, 74, .38); animation: halkaDon 120s linear infinite; }
@keyframes halkaDon { to { rotate: 360deg; } }
.suslu__nokta {
  position: absolute; z-index: 2; left: -16%; bottom: -12%; width: 38%; height: 34%;
  background-image: radial-gradient(rgba(201, 184, 74, .6) 1.2px, transparent 1.7px);
  background-size: 14px 14px;
}
.slayt--madalya .slayt__ufuk, .slayt--hasat .slayt__ufuk { bottom: 5%; }
/* 2. slayt: story videosu, üstten kırpılmış kare (720x720), sesi kullanıcı açar */
.suslu--video { aspect-ratio: 1; height: min(80%, 540px); }
.suslu__ses {
  position: absolute; z-index: 5; right: 16px; bottom: 16px;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(41, 55, 30, .72); color: var(--kirec);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(244, 244, 239, .35);
  transition: background var(--hiz), transform var(--hiz) var(--egri);
}
.suslu__ses:hover { background: var(--zeytin); transform: scale(1.06); }
.suslu__ses .ikon { width: 22px; height: 22px; }
.suslu__ses .ikon--ses-acik { display: none; }
.suslu__ses[aria-pressed="true"] .ikon--ses-kapali { display: none; }
.suslu__ses[aria-pressed="true"] .ikon--ses-acik { display: block; }
/* şelale arka planı: hafif bulanık, yeşil perdenin altında; yazı ve videonun önüne geçmez */
.slayt__foto--selale { filter: blur(3px) saturate(.8); transform: scale(1.04); object-position: 55% 45%; }
.slayt.is-aktif .slayt__foto--selale { animation: none; }
.slayt--hasat .slayt__zemin::after {
  background:
    linear-gradient(90deg, rgba(41, 55, 30, .94) 0%, rgba(41, 55, 30, .84) 38%, rgba(41, 55, 30, .66) 62%, rgba(41, 55, 30, .72) 100%),
    linear-gradient(0deg, rgba(41, 55, 30, .85) 0%, rgba(41, 55, 30, 0) 34%);
}
.suslu__cerceve { position: absolute; z-index: 3; inset: 0; border: 1px solid rgba(201, 184, 74, .75); border-radius: var(--kose); transform: translate(22px, -22px); }

.slayt__kemer { position: absolute; right: 4%; bottom: 20%; width: 40%; aspect-ratio: 3 / 4.3; border-radius: 999px 999px 0 0; overflow: hidden; }
.slayt__kemer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.slayt__urun--domat { left: 34%; height: 70%; translate: -50% 0; z-index: 2; }

.slayt__urun--kavanoz1 { left: 26%; height: 44%; translate: -50% 0; }
.slayt__urun--kavanoz2 { left: 52%; height: 54%; translate: -50% 0; z-index: 2; }
.slayt__urun--kavanoz3 { left: 78%; height: 44%; translate: -50% 0; }

/* geçiş animasyonları */
@keyframes perdeIleri { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes perdeGeri { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes fotoYakin { from { transform: scale(1.16); } to { transform: none; } }
@keyframes icCik { to { opacity: 0; transform: translateX(var(--cikis, -3%)); } }
@keyframes satirGir { from { transform: translateY(112%); } to { transform: none; } }
@keyframes yukselBelir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes urunGir { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ufukCiz { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.slayt.is-aktif .slayt__zemin { animation: perdeIleri 1.1s cubic-bezier(.77, 0, .18, 1) both; }
.sahne[data-yon="geri"] .slayt.is-aktif .slayt__zemin { animation-name: perdeGeri; }
.slayt.is-aktif .slayt__foto { animation: fotoYakin 2s cubic-bezier(.2, .8, .2, 1) both; }
.slayt.is-cikan .slayt__ic { animation: icCik .6s cubic-bezier(.6, 0, .4, 1) both; }
.sahne[data-yon="geri"] { --cikis: 3%; }
.slayt.is-aktif .satir > span { animation: satirGir 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.55s + var(--i) * .11s); }
.slayt.is-aktif .slayt__ust { animation: yukselBelir .8s cubic-bezier(.2, .8, .2, 1) .45s both; }
.slayt.is-aktif .slayt__govde { animation: yukselBelir .9s cubic-bezier(.2, .8, .2, 1) .85s both; }
.slayt.is-aktif .slayt__eylem { animation: yukselBelir .9s cubic-bezier(.2, .8, .2, 1) 1s both; }
.slayt.is-aktif .slayt__ufuk { animation: ufukCiz 1.3s cubic-bezier(.7, 0, .2, 1) .35s both; }
.slayt.is-aktif .slayt__urun, .slayt.is-aktif .slayt__kemer { animation: urunGir 1.3s cubic-bezier(.2, .8, .2, 1) .6s both; }
.slayt.is-aktif .slayt__urun--teneke, .slayt.is-aktif .slayt__kemer,
.slayt.is-aktif .slayt__urun--kavanoz1 { animation-delay: .45s; }
.slayt.is-aktif .slayt__urun--kavanoz3 { animation-delay: .75s; }
@keyframes cerceveGir { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(22px, -22px); } }
@keyframes halkaGir { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
.slayt.is-aktif .suslu__gorsel { animation: urunGir 1.3s cubic-bezier(.2, .8, .2, 1) .5s both; }
.slayt.is-aktif .suslu__cerceve { animation: cerceveGir 1.2s cubic-bezier(.2, .8, .2, 1) .95s both; }
.slayt.is-aktif .suslu__halka--ic, .slayt.is-aktif .suslu__hale { animation: halkaGir 1.6s cubic-bezier(.2, .8, .2, 1) .35s both; }
.slayt.is-aktif .suslu__halka--dis { animation: halkaGir 1.8s cubic-bezier(.2, .8, .2, 1) .5s both, halkaDon 120s linear infinite; }
.slayt.is-aktif .suslu__nokta { animation: yukselBelir 1s cubic-bezier(.2, .8, .2, 1) 1.1s both; }

/* alt navigasyon */
.sahne__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; color: var(--kirec); transition: color .6s ease; }
.sahne[data-ton="acik"] .sahne__nav { color: var(--gece); }
.sahne__nav-ic { display: flex; align-items: flex-end; gap: 2.5rem; padding-bottom: 1.75rem; }
.sahne__sekmeler { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.sahne__sekme {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .75rem; row-gap: .85rem;
  width: 100%; padding-top: .25rem; text-align: left; opacity: .6; transition: opacity var(--hiz);
}
.sahne__sekme:hover, .sahne__sekme.is-aktif { opacity: 1; }
.sahne__ilerleme { grid-column: 1 / -1; position: relative; height: 2px; }
.sahne__ilerleme::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .24; }
.sahne__ilerleme i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 50ms linear; }
.sahne__no { font-size: var(--t-mini); font-weight: 600; font-variant-numeric: tabular-nums; }
.sahne__ad { font-family: var(--f-baslik); font-size: 1.125rem; line-height: 1.2; }
.sahne__kontrol { display: flex; gap: .4rem; }
.sahne__dugme { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; transition: opacity var(--hiz), background var(--hiz); }
.sahne__dugme:hover { opacity: 1; }
.sahne__dugme .ikon { width: 20px; height: 20px; }
.sahne__dugme .ikon--oynat { display: none; }
.sahne.is-duraklatildi [data-slayt-dur] .ikon--dur { display: none; }
.sahne.is-duraklatildi [data-slayt-dur] .ikon--oynat { display: block; }

@media (max-width: 899px) {
  .sahne { --sahne-h: clamp(660px, 182vw, 800px); }
  .slayt--madalya .slayt__zemin::after { background: radial-gradient(ellipse 60% 40% at 55% 78%, rgba(201, 184, 74, .28), transparent 72%), linear-gradient(180deg, rgba(41, 55, 30, .88) 0%, rgba(41, 55, 30, .6) 50%, rgba(41, 55, 30, .35) 100%); }
  .slayt__ic { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 0; padding-top: 2.25rem; padding-bottom: 72px; }
  .slayt__baslik { font-size: min(clamp(2.5rem, 10.5vw, 3.6rem), 15.5cqi); margin-bottom: 1rem; }
  .slayt__ust { margin-bottom: .85rem; }
  .slayt__govde { font-size: 1rem; }
  .slayt__eylem { margin-top: 1.5rem; gap: .75rem 1.5rem; }
  .slayt__ufuk, .slayt__urun, .slayt__kemer { bottom: 10%; }
  .slayt__ufuk { left: calc(var(--kenar) * -1); right: calc(var(--kenar) * -1); }
  .suslu { left: 50%; bottom: 10%; height: min(82%, 380px); --kose: 18px; }
  .suslu--video { height: min(82%, 330px); }
  .suslu__ses { right: 10px; bottom: 10px; width: 44px; height: 44px; }
  .slayt--madalya .slayt__ufuk { bottom: 10%; }
  .suslu__cerceve { transform: translate(14px, -14px); }
  .slayt.is-aktif .suslu__cerceve { animation: none; }
  .slayt__kemer { width: 50%; right: 0; }
  .slayt__urun--domat { left: 30%; height: 80%; }
  .slayt__urun--kavanoz1 { left: 20%; height: 50%; }
  .slayt__urun--kavanoz2 { height: 62%; }
  .slayt__urun--kavanoz3 { left: 82%; height: 50%; }
  .slayt--hasat .slayt__zemin::after {
    background: linear-gradient(180deg, rgba(41, 55, 30, .95) 0%, rgba(41, 55, 30, .8) 48%, rgba(41, 55, 30, .25) 100%);
  }
  .slayt__foto { object-position: 55% 50%; }
  .sahne__nav-ic { gap: 1rem; padding-bottom: 1.1rem; align-items: center; }
  .sahne__sekmeler { gap: .5rem; }
  .sahne__sekme { row-gap: 0; padding-block: 1rem; }
  .sahne__no, .sahne__ad { display: none; }
  .sahne__kontrol [data-slayt-geri], .sahne__kontrol [data-slayt-ileri] { display: none; }
  .sahne__dugme { width: 44px; height: 44px; }
}


/* 13a  Kayan şerit ----------------------------------------------------------
   İki özdeş liste yan yana; ray kendi genişliğinin yarısı kadar kayınca başa
   döner, dikiş görünmez. Fare üstündeyken durur. */
.serit { background: var(--gece); color: #fff; overflow: hidden; }
.serit__ray { display: flex; width: max-content; animation: seritKay 48s linear infinite; }
.serit:hover .serit__ray { animation-play-state: paused; }
.serit__liste { display: flex; align-items: center; flex: none; }
.serit__liste li { flex: none; font-family: var(--f-baslik); font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 1; white-space: nowrap; padding-block: 1.15rem; }
.serit__ayrac { padding-inline: clamp(1.1rem, .8rem + 1.2vw, 2rem); }
.serit__yaprak { width: 30px; height: 19px; fill: var(--yag); overflow: visible; transform: rotate(-18deg); }
.serit__yaprak .yaprak__damar { fill: none; stroke: var(--gece); stroke-width: 1.1; stroke-linecap: round; }
.serit__liste li:nth-child(4n) .serit__yaprak { transform: rotate(14deg) scaleX(-1); }
@keyframes seritKay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .serit__ray { animation: none; } }


/* 18b  Renkli hat + kategori afişleri ------------------------------------- */
/* yumuşak geçişli marka hattı; vitrinin alt boşluğuna doğru yukarı çekilir */
.renkli-hat {
  height: 10px; margin-top: calc(var(--bolum) * -.6);
  background: linear-gradient(90deg, var(--zeytin) 0%, var(--yaprak) 30%, var(--yag) 52%, var(--yaprak) 74%, var(--gece) 100%);
}
.renkli-hat i { display: none; }

.afisler { background: #fff; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) var(--bolum); }
/* beyaz zeminde kartlar ince çerçeveyle ayrışsın */
.afisler .afis { border: 1px solid #ECEBE4; }
.afisler__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); }

.afis {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: #fff; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 16px 36px -28px rgba(41, 55, 30, .4);
  transition: box-shadow .6s var(--egri), transform .6s var(--egri);
}
.afis:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 34px 60px -32px rgba(41, 55, 30, .5); }
/* görsel kutusu */
.afis__kutu { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 0; background: var(--gece); isolation: isolate; }
.afis__gorsel { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--egri), filter .8s var(--egri); }
.afis__kutu::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(20, 24, 16, 0) 40%, rgba(20, 24, 16, .45) 100%);
  opacity: 0; transition: opacity .7s var(--egri);
}
.afis__ust {
  position: absolute; left: 18px; top: 18px; z-index: 3;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--zeytin);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  transition: background .5s var(--egri), color .5s var(--egri);
}
/* üzerine gelince: ortadan açılan ince altın artı çizgisi + dört köşede L hatları */
.afis__cizgi { position: absolute; z-index: 1; background: rgba(201, 184, 74, .7); pointer-events: none; transition: transform .8s cubic-bezier(.65, 0, .25, 1); }
.afis__cizgi--y { left: 50%; top: 22px; bottom: 22px; width: 1px; transform: scaleY(0); }
.afis__cizgi--x { top: 50%; left: 22px; right: 22px; height: 1px; transform: scaleX(0); }
.afis__kose { position: absolute; z-index: 2; width: 30px; height: 30px; border: 0 solid var(--yag); opacity: 0; pointer-events: none; transition: opacity .5s var(--egri), transform .6s var(--egri); }
.afis__kose--1 { left: 14px; top: 14px; border-width: 2px 0 0 2px; transform: translate(-10px, -10px); }
.afis__kose--2 { right: 14px; top: 14px; border-width: 2px 2px 0 0; transform: translate(10px, -10px); }
.afis__kose--3 { left: 14px; bottom: 14px; border-width: 0 0 2px 2px; transform: translate(-10px, 10px); }
.afis__kose--4 { right: 14px; bottom: 14px; border-width: 0 2px 2px 0; transform: translate(10px, 10px); }
.afis:hover .afis__gorsel { transform: scale(1.07); filter: saturate(1.1); }
.afis:hover .afis__kutu::before { opacity: 1; }
.afis:hover .afis__cizgi--y { transform: scaleY(1); }
.afis:hover .afis__cizgi--x { transform: scaleX(1); transition-delay: .08s; }
.afis:hover .afis__kose { opacity: 1; transform: none; transition-delay: .15s; }
.afis:hover .afis__ust { background: var(--zeytin); color: #fff; }

/* kutunun altında başlık, yazı, düğme */
/* kutunun altı: beyaz şerit, solda başlık, sağda düğme */
.afis__govde { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.15rem 1.15rem 1.5rem; }
.afis__baslik { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); line-height: 1.15; color: var(--zeytin); min-width: 0; }
.afis__baslik a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--egri); }
.afis:hover .afis__baslik a { background-size: 100% 1px; }
.afis__dugme {
  position: relative; isolation: isolate; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; gap: .6rem;
  height: 46px; padding: 0 6px 0 18px; border-radius: 999px;
  border: 1px solid rgba(41, 55, 30, .3); background: #fff; color: var(--zeytin); text-decoration: none;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  transition: color .45s var(--egri), border-color .45s var(--egri);
}
.afis__dugme::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zeytin); border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .55s cubic-bezier(.65, 0, .25, 1); }
.afis__dugme .ikon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--zeytin); color: #fff; stroke-width: 1.8; transition: background .45s var(--egri), color .45s var(--egri), transform .45s var(--egri); }
.afis:hover .afis__dugme { color: #fff; border-color: var(--zeytin); }
.afis:hover .afis__dugme::before { transform: scaleX(1); transform-origin: left; }
.afis:hover .afis__dugme .ikon { background: var(--yag); color: var(--zeytin); transform: translateX(2px); }

@media (max-width: 899px) { .afisler__izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .afisler__izgara { grid-template-columns: 1fr; } }
@media (hover: none) { .afis__cizgi, .afis__kose { display: none; } }


/* 13b  Bahçemizden: şelale görseli üzerinde buzlu cam metin kutusu + dikey hasat videosu */
.bahce { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); color: #fff; }
.bahce__fon { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.bahce::before {
  /* görsel canlı kalsın, metin okunsun: hafif koyu tül */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 28, 14, .45) 0%, rgba(20, 28, 14, .18) 55%, rgba(20, 28, 14, .3) 100%);
}
/* masaüstünde video, soldaki cam kutuyla aynı yükseklikte */
.bahce__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: stretch; }

/* bulutlar: arka planın üstünde, yazı ve videonun arkasında süzülür.
   Farklı boy, hız ve saydamlık = derinlik; negatif gecikme ile sayfa açılırken ekranda olurlar. */
.bahce__ic { position: relative; z-index: 1; }
.bahce__bulutlar { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bulut {
  position: absolute; left: 0; max-width: none; height: auto;
  will-change: transform; animation: bulutGec linear infinite;
}
@keyframes bulutGec { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
.bulut--1 { top: -4%;  width: 62vw; opacity: .7;  filter: blur(2px); animation-duration: 160s; animation-delay: -40s; }
.bulut--2 { top: 20%;  width: 46vw; opacity: .95; filter: blur(.5px); animation-duration: 95s;  animation-delay: -62s; }
.bulut--3 { top: 52%;  width: 34vw; opacity: .85; filter: blur(1px); animation-duration: 120s; animation-delay: -10s; }
.bulut--4 { top: 64%;  width: 54vw; opacity: .9;  filter: blur(1px); animation-duration: 105s; animation-delay: -88s; transform: scaleX(-1); }
.bulut--5 { top: 6%;   width: 40vw; opacity: .6;  filter: blur(3px); animation-duration: 200s; animation-delay: -150s; }
@media (max-width: 899px) {
  .bulut--1 { width: 120vw; } .bulut--2 { width: 90vw; } .bulut--3 { width: 70vw; } .bulut--4 { width: 100vw; } .bulut--5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bulut { animation: none; }
  .bulut--1 { transform: translateX(-20%); } .bulut--2 { transform: translateX(40%); } .bulut--3 { transform: translateX(110%); } .bulut--4 { transform: translateX(10%); }
}

/* buzlu cam: çok saydam, sadece okunacak kadar */
.bahce__cam {
  display: grid; gap: 1rem; justify-items: start; max-width: 40rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-radius: 18px;
  background: rgba(24, 32, 18, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bahce__cam { background: rgba(24, 32, 18, .7); }
}
.bahce__ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--yag); }
.bahce__baslik { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height: 1.05; margin-bottom: .25rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.bahce__cam > p:not([class]) { color: rgba(255, 255, 255, .92); font-size: 1.02rem; line-height: 1.7; text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
.bahce__ozellik { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.bahce__ozellik li { padding: .45rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bahce__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .75rem; }
.bahce .baglanti { color: #fff; }
.bahce .baglanti:hover { color: var(--yag); }

/* dikey video: yuvarlak köşeli çerçeve, arkasında kaydırılmış altın hat */
.bahce__video { position: relative; justify-self: end; width: 100%; height: 100%; margin: 0; }
.bahce__oynatici { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: #1b2414; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.bahce__cerceve { position: absolute; z-index: 0; inset: 0; border: 1px solid rgba(201, 184, 74, .8); border-radius: 22px; transform: translate(18px, -18px); }
.bahce__ses { z-index: 2; right: 14px; bottom: 14px; }
.bahce__not { position: absolute; z-index: 2; left: 14px; bottom: 18px; padding: .35rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(24, 32, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* dar ekranda video çok incelir: alt alta diz, video kare kalsın */
@media (max-width: 1099px) {
  .bahce__ic { grid-template-columns: 1fr; }
  .bahce__cam { max-width: none; }
  .bahce__video { justify-self: center; width: min(calc(100% - 12px), 560px); height: auto; }
  .bahce__oynatici { height: auto; aspect-ratio: 1; }
  .bahce__cerceve { transform: translate(12px, -12px); }
}


/* 14  Madalyalar -------------------------------------------------------------
   Katmanlı zemin: zeytin yeşili + ortada yağ rengi ışık + kenar koyulaşması +
   ince doku + arkada altın hatlı dev "2025". Madalyalar altın halkalı
   yuvalarda, müze vitrini gibi dizilir. */
.odul {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--kirec);
  padding-block: clamp(4.5rem, 3rem + 5vw, 8rem);
  background: #202C17;
}
.odul__fon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.odul__isik {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(201, 184, 74, .22), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(74, 107, 92, .45), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, var(--zeytin) 40%, #161F10 100%);
}
.odul__yil {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-family: var(--f-baslik); font-size: clamp(14rem, 34vw, 34rem); line-height: .8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(201, 184, 74, .13);
  letter-spacing: -.02em;
}
.odul__doku {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.odul::before, .odul::after {
  /* üst ve alt kenarda ince altın hat */
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 184, 74, .55), transparent);
}
.odul::before { top: 14px; }
.odul::after { bottom: 14px; }

.odul__bas { display: grid; justify-items: center; text-align: center; gap: .9rem; max-width: 42rem; margin: 0 auto clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.odul__ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--yag); }
.odul__baslik { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.3rem); line-height: 1.02; }
.odul__cizgi { display: flex; align-items: center; gap: 1rem; width: min(300px, 80%); color: var(--yag); }
.odul__cizgi i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.odul__cizgi i:last-child { background: linear-gradient(270deg, transparent, currentColor); }
.odul__cizgi b {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font: 400 1.35rem/1 var(--f-baslik); color: var(--yag);
  box-shadow: inset 0 0 0 1px rgba(201, 184, 74, .7), 0 0 0 5px rgba(201, 184, 74, .08);
}
.odul__aciklama { color: var(--kirec-soluk); max-width: 30rem; }

/* vitrin: 5 + 4 düzen */
.odul__vitrin { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 1rem + 2.5vw, 3.5rem) clamp(1rem, .5rem + 2vw, 2.75rem); max-width: 1180px; margin-inline: auto; }
.madalya { flex: 0 0 clamp(150px, 16%, 190px); display: grid; justify-items: center; text-align: center; gap: .3rem; }
.madalya__yuva {
  position: relative; display: grid; place-items: center;
  width: clamp(122px, 10vw + 40px, 156px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 1rem;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .09), rgba(0, 0, 0, .18) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 184, 74, .45),
    inset 0 10px 24px rgba(0, 0, 0, .35),
    0 22px 40px -22px rgba(0, 0, 0, .7);
  transition: transform .6s var(--egri), box-shadow .6s var(--egri);
}
.madalya__yuva::before {
  /* dış altın halka + hâle */
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(201, 184, 74, .28);
  background: radial-gradient(closest-side, rgba(201, 184, 74, .0) 80%, rgba(201, 184, 74, .12));
  transition: border-color .6s var(--egri), inset .6s var(--egri);
}
.madalya__yuva img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); transition: transform .8s var(--egri); }
.madalya__yuva--beyaz { background: #fff; }
.madalya__yuva--beyaz img { width: 66%; height: 66%; filter: none; }
.madalya:hover .madalya__yuva { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(201, 184, 74, .9), inset 0 10px 24px rgba(0, 0, 0, .3), 0 30px 50px -22px rgba(0, 0, 0, .8), 0 0 40px -6px rgba(201, 184, 74, .35); }
.madalya:hover .madalya__yuva::before { inset: -13px; border-color: rgba(201, 184, 74, .6); }
.madalya:hover .madalya__yuva img { transform: rotate(-6deg) scale(1.04); }
.madalya__ad { font-family: var(--f-baslik); font-size: 1.2rem; line-height: 1.2; }
.madalya__yer { font-size: var(--t-mini); color: var(--kirec-soluk); }
.madalya__derece { margin-top: .35rem; font-size: var(--t-mini); font-weight: 600; color: var(--yag); padding: .25rem .7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(201, 184, 74, .45); }
.madalya__derece--prestij { background: var(--yag); color: var(--zeytin); box-shadow: none; }

/* ödül haber bandı: yarı saydam kutu, sabit "Haberler" etiketi + kayan başlıklar */
.haber {
  display: flex; align-items: stretch; max-width: 980px; margin: 0 auto clamp(3rem, 2rem + 3vw, 4.5rem);
  border-radius: 999px; overflow: hidden;
  background: rgba(244, 244, 239, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(201, 184, 74, .35), 0 20px 40px -28px rgba(0, 0, 0, .7);
}
.haber__etiket {
  flex: none; display: flex; align-items: center; gap: .55rem; position: relative; z-index: 2;
  padding: 0 1.4rem 0 1.25rem; background: var(--yag); color: var(--zeytin);
  font-family: var(--f-baslik); font-size: 1.15rem; white-space: nowrap;
  box-shadow: 14px 0 24px -6px rgba(32, 44, 23, .9);
}
.haber__flas { width: 20px; height: 20px; fill: var(--zeytin); stroke: none; animation: flasCak 2.4s ease-in-out infinite; }
.haber__nokta { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--indirim); }
.haber__nokta::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--indirim); animation: nabiz 1.8s ease-out infinite; }
@keyframes nabiz { to { transform: scale(3); opacity: 0; } }
@keyframes flasCak { 0%, 70%, 100% { opacity: 1; } 76% { opacity: .25; } 82% { opacity: 1; } 88% { opacity: .4; } }
.haber__pencere {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}
.haber__ray { display: flex; width: max-content; animation: seritKay 70s linear infinite; }
.haber:hover .haber__ray { animation-play-state: paused; }
.haber__liste { display: flex; align-items: center; flex: none; }
.haber__liste li { flex: none; white-space: nowrap; padding-block: 1.05rem; font-size: .9375rem; color: var(--kirec-soluk); }
.haber__liste strong { color: var(--kirec); font-weight: 600; margin-right: .5rem; }
.haber__ayrac { padding-inline: 1.5rem; color: var(--yag); font-size: .8rem !important; }
@media (max-width: 639px) {
  .haber { border-radius: 14px; }
  .haber__etiket { padding: 0 .9rem; font-size: 1rem; }
  .haber__liste li { font-size: .875rem; padding-block: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .haber__ray, .haber__flas, .haber__nokta::after { animation: none; } }

/* tablette 3 x 3 */
@media (min-width: 640px) and (max-width: 1023px) {
  .odul__vitrin { max-width: 640px; }
  .madalya { flex-basis: calc(33.333% - 1.5rem); }
}
@media (max-width: 639px) {
  .odul__vitrin { gap: 2.25rem .75rem; }
  .madalya { flex-basis: calc(50% - .5rem); }
  .madalya__yuva { width: 120px; }
  .madalya__ad { font-size: 1.05rem; }
}


/* 15  Seçki + künye ---------------------------------------------------------
   Bu bölüme özel krem zemin (#F5F3E6); sol üstteki çizim aynı zemin rengiyle
   çizildiği için ek yeri görünmez. */
.secki { --secki-zemin: #F5F3E6; position: relative; overflow: hidden; isolation: isolate; background: var(--secki-zemin); padding-block: clamp(4rem, 3rem + 4vw, 7rem) var(--bolum); }
.secki__susleme {
  position: absolute; z-index: -1; left: 0; top: 0;
  width: clamp(280px, 38vw, 620px); height: auto;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 80%);
  mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 80%);
  pointer-events: none;
}

/* başlık: ortalı, altında yaprak düğümlü çift çizgi */
.secki__bas { display: grid; justify-items: center; text-align: center; gap: .9rem; max-width: 40rem; margin: 0 auto clamp(3rem, 2rem + 3vw, 4.5rem); }
.secki__ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); }
.secki__baslik { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1; color: var(--zeytin); }
.secki__cizgi { display: flex; align-items: center; gap: .9rem; width: min(260px, 70%); color: var(--yag); }
.secki__cizgi i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.secki__cizgi i:last-child { background: linear-gradient(270deg, transparent, currentColor); }
.secki__yaprak { width: 34px; height: 21px; fill: var(--zeytin); transform: rotate(-14deg); }
.secki__yaprak .yaprak__damar { fill: none; stroke: var(--secki-zemin); stroke-width: 1.1; stroke-linecap: round; }
.secki__aciklama { color: var(--metin-ikincil); max-width: 32rem; }

/* kart ızgarası: büyük kart solda, iki yatay kart sağda */
.secki__izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); grid-template-rows: 1fr 1fr; gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); }
.skart {
  --r: 22px;
  position: relative; display: grid; min-width: 0;
  background: #FBFAF3;
  border: 1px solid rgba(41, 55, 30, .1); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -30px rgba(41, 55, 30, .35);
  overflow: hidden;
  transition: transform .5s var(--egri), box-shadow .5s var(--egri), border-color .5s var(--egri);
}
.skart:hover { transform: translateY(-4px); border-color: rgba(201, 184, 74, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -32px rgba(41, 55, 30, .45); }
.skart--ana { grid-row: 1 / 3; grid-template-rows: minmax(0, 1fr) auto; }
.skart--yan { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* görsel sahnesi */
.skart__sahne { position: relative; display: block; overflow: hidden; background: #ECEBDD; min-height: 240px; }
.skart--ana .skart__sahne { min-height: 380px; }
.skart__zemin { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 62%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); }
.skart__zemin::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, rgba(41, 55, 30, .28), transparent); }
.skart__urun { position: absolute; bottom: 13%; width: auto; max-width: none; transition: transform .7s var(--egri); filter: drop-shadow(0 18px 16px rgba(41, 55, 30, .18)); }
.skart__urun--teneke { height: 58%; left: 18%; }
.skart__urun--galon { height: 42%; left: 45%; }
.skart__urun--sise { height: 74%; left: 64%; }
.skart__urun--tek { height: 78%; left: 50%; translate: -50% 0; }
.skart:hover .skart__urun--sise, .skart:hover .skart__urun--tek { transform: translateY(-8px); }
.skart:hover .skart__urun--teneke { transform: translateY(-4px); }
.skart__sahne--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--egri); }
.skart:hover .skart__sahne--foto img { transform: scale(1.05); }
.skart__rozet {
  position: absolute; z-index: 2; left: 14px; top: 14px;
  padding: .35rem .75rem; border-radius: 999px;
  background: var(--zeytin); color: var(--kirec);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}

/* metin */
.skart__govde { display: grid; gap: .75rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.skart--ana .skart__govde { border-top: 1px solid rgba(41, 55, 30, .08); }
.skart__tur { font-size: var(--t-mini); font-weight: 600; color: var(--yaprak); }
.skart__ad { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; color: var(--zeytin); }
.skart--yan .skart__ad { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); }
.skart__ad a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--egri); }
.skart:hover .skart__ad a { background-size: 100% 1px; }
.skart__metin { font-size: .9375rem; color: var(--metin-ikincil); }
.skart__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .35rem; padding-top: 1rem; border-top: 1px solid rgba(41, 55, 30, .1); }
.skart__fiyat { display: flex; align-items: baseline; gap: .5rem; }
.skart__fiyat .fiyat { font-size: 1.35rem; color: var(--zeytin); }
.skart__stok { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; font-size: var(--t-mini); font-weight: 600; }
.skart__stok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.skart__stok--yok { background: rgba(154, 59, 46, .08); color: var(--indirim); }

/* künye: etiket gibi sıralanmış teknik bilgi */
.kunye { display: grid; border-top: 1px solid var(--cizgi); }
.kunye > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cizgi); font-size: var(--t-kucuk); }
.kunye dt { color: var(--metin-ikincil); }
.kunye dd { font-variant-numeric: tabular-nums; }
.kunye--yatay { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 2.5rem; border-top: 0; }
.kunye--yatay > div { grid-template-columns: 1fr; gap: .15rem; border-bottom: 0; padding: .75rem 0 0; border-top: 1px solid var(--cizgi); }
.skart .kunye > div { padding: .4rem 0; }

@media (max-width: 1023px) {
  .secki__izgara { grid-template-columns: 1fr; grid-template-rows: none; }
  .skart--ana { grid-row: auto; }
  .skart--ana .skart__sahne { min-height: 0; aspect-ratio: 16 / 11; }
}
@media (max-width: 767px) {
  /* mobilde çizim metnin arkasında kalmasın: köşeye çekilip soluklaşır */
  .secki__susleme { width: 190px; opacity: .55; }
  .secki { padding-top: 5.5rem; }
}
@media (max-width: 559px) {
  .skart--yan { grid-template-columns: 1fr; }
  .skart--yan .skart__sahne { aspect-ratio: 4 / 3; min-height: 0; }
  .kunye--yatay { grid-template-columns: 1fr; }
  .kunye > div { grid-template-columns: 5rem 1fr; }
  .skart__urun--teneke { left: 8%; }
  .skart__urun--sise { left: 66%; }
}


/* 16  Dağdan denize -------------------------------------------------------- */
.kesit { padding-bottom: var(--bolum); }
.kesit__cizim { --kh: clamp(120px, 14vw, 220px); }
.kesit__cizim svg { width: 100%; height: var(--kh); transform: scaleX(-1); } /* deniz solda, dağ sağda: imza bölümüyle aynı yön */
.kesit__dolgu { fill: var(--yaprak-gumus); }
.kesit__cizgi { fill: none; stroke: var(--gece); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kesit__deniz { fill: none; stroke: var(--yaprak); stroke-width: 1.25; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.kesit__duraklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--cizgi); }
.kesit__durak { display: grid; gap: .4rem; align-content: start; font-size: .9375rem; color: var(--metin-ikincil); }
.kesit__rakim { font-variant-numeric: tabular-nums; font-size: var(--t-kucuk); color: var(--yaprak); font-weight: 600; min-height: 1.5em; }
.kesit__ad { font-size: 1.6rem; color: var(--gece); }
@media (max-width: 767px) {
  .kesit__duraklar { grid-template-columns: 1fr 1fr; row-gap: 2rem; column-gap: 1.25rem; }
}


/* 17  Hikâye: dergi yayılımı — başlık + rota, iki blok (foto/metin, metin/kolaj), arada alıntı */
.hikaye { padding-block: var(--bolum); background: #fff; }
.hikaye__bas { display: grid; justify-items: center; text-align: center; gap: .8rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.hikaye__ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); }
.hikaye__baslik { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); line-height: 1; color: var(--zeytin); }
.hikaye__rota { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--metin-ikincil); }
.hikaye__rota i { position: relative; width: clamp(80px, 12vw, 180px); height: 1px; background: repeating-linear-gradient(90deg, var(--yag) 0 6px, transparent 6px 11px); }
.hikaye__rota i::before, .hikaye__rota i::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; translate: 0 -50%; background: var(--zeytin); }
.hikaye__rota i::before { left: -4px; background: #fff; box-shadow: inset 0 0 0 2px var(--zeytin); }
.hikaye__rota i::after { right: -4px; }

.hikaye__blok { display: grid; gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.hikaye__blok--1 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hikaye__blok--2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.hikaye__foto { position: relative; margin: 0; overflow: hidden; border-radius: 6px; }
.hikaye__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--egri); }
.hikaye__foto:hover img { transform: scale(1.04); }
.hikaye__foto figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: .35rem .75rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: var(--zeytin); background: rgba(255, 255, 255, .9);
}
.hikaye__foto--buyuk { aspect-ratio: 3 / 2; }
.hikaye__foto--buyuk::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 3px; pointer-events: none; }

.hikaye__metin { display: grid; gap: 1.15rem; justify-items: start; }
.hikaye__metin p { color: var(--metin-ikincil); font-size: 1.02rem; line-height: 1.8; max-width: 60ch; }
.hikaye__giris { font-family: var(--f-baslik); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem) !important; line-height: 1.45 !important; color: var(--gece) !important; }
.hikaye__giris::first-letter { float: left; font-size: 3.6em; line-height: .85; padding: .06em .12em 0 0; color: var(--zeytin); }
.hikaye__dugme { margin-top: .4rem; }
.hikaye__dugme:hover { color: #fff; border-color: var(--zeytin); }
.hikaye__dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.hikaye__dugme:hover .ikon { background: var(--yag); color: var(--zeytin); }

.hikaye__alinti { position: relative; margin: clamp(3rem, 2rem + 3vw, 5rem) auto; max-width: 46rem; text-align: center; }
.hikaye__alinti::before { content: "“"; display: block; font-family: var(--f-baslik); font-size: 5rem; line-height: .6; color: var(--yag); }
.hikaye__alinti p { font-family: var(--f-baslik); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.25; color: var(--zeytin); }

/* Google yorumları: solda koyu puan kartı, sağda 3'lü kayan yorum rayı + ilerleme çizgisi */
/* üstteki hikâye bloğundan ayıran, Google renklerinde yumuşak geçişli hat */
.gy-hat {
  height: 5px; border: 0; border-radius: 5px; margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 0;
  background: linear-gradient(90deg, rgba(66, 133, 244, 0) 0%, #4285F4 12%, #EA4335 37%, #FBBC05 63%, #34A853 88%, rgba(52, 168, 83, 0) 100%);
}
.gy { margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.gy__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2rem; }
.gy__etiket { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); }
.gy__etiket::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.gy__baslik { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.05; color: var(--zeytin); margin: .35rem 0 .6rem; }
.gy__aciklama { color: var(--metin-ikincil); max-width: 44ch; }
.gy__arac { display: flex; align-items: center; gap: .6rem; }
.gy__sayac { margin-right: .6rem; font-size: .95rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.gy__sayac b { color: var(--zeytin); font-weight: 700; }
.gy__ok { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(41, 55, 30, .2); color: var(--zeytin); background: #fff; transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.gy__ok--dolu, .gy__ok:hover { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.gy__ok:disabled { opacity: .35; cursor: default; background: #fff; color: var(--zeytin); border-color: rgba(41, 55, 30, .2); }

.gy__govde { display: grid; grid-template-columns: minmax(250px, 3fr) minmax(0, 9fr); gap: clamp(1rem, .5rem + 1.5vw, 2rem); align-items: stretch; }

/* sol puan kartı */
.gy__puan {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 1.25rem;
  padding: 2rem 1.75rem; border-radius: 10px; color: #fff;
  background: radial-gradient(ellipse at 20% 0%, rgba(201, 184, 74, .18), transparent 60%), linear-gradient(160deg, #34452A, var(--zeytin) 55%, #1C2614);
  box-shadow: 0 30px 60px -30px rgba(41, 55, 30, .6);
}
.gy__puan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%); }
.gy__marka { display: flex; align-items: center; gap: .8rem; }
.gy-g { width: 20px; height: 20px; flex: none; }
.gy-g--buyuk { width: 38px; height: 38px; padding: 6px; border-radius: 50%; background: #fff; }
.gy__kelime { display: block; font-size: 1.55rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.gy__kelime i { font-style: normal; }
.gy__marka b { display: block; margin-top: .25rem; font-size: .75rem; letter-spacing: .14em; color: rgba(255, 255, 255, .75); }
.gy__skor { display: flex; align-items: center; gap: 1rem; }
.gy__skor > b { font-family: var(--f-baslik); font-size: 3.6rem; line-height: 1; font-weight: 400; }
.gy__skor-yildiz { width: 108px; height: 20px; -webkit-mask-size: 21.6px 20px; mask-size: 21.6px 20px; background: linear-gradient(90deg, #FBBC05 var(--puan), rgba(255, 255, 255, .25) var(--puan)) !important; }
.gy__skor small { display: block; margin-top: .35rem; font-size: .8rem; color: rgba(255, 255, 255, .75); }
.gy__ayrac { height: 1px; background: rgba(255, 255, 255, .15); }
.gy__yaz { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 48px; border-radius: 999px; background: #fff; color: var(--zeytin); text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .02em; transition: transform .3s var(--egri), box-shadow .3s; }
.gy__yaz:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.gy__tumu { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: rgba(255, 255, 255, .8); text-decoration: none; }
.gy__tumu .ikon { width: 16px; height: 16px; transition: transform .3s; }
.gy__tumu:hover { color: var(--yag); }
.gy__tumu:hover .ikon { transform: translateX(3px); }

/* sağ ray */
.gy__pencere { min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 1.25rem; }
.gy__ray {
  --gy-bosluk: 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gy-bosluk)) / 3); gap: var(--gy-bosluk);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 14px; margin: -4px -4px -14px; scroll-padding-inline: 4px;
}
.gy__ray::-webkit-scrollbar { display: none; }
.gy-kart {
  position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem;
  padding: 1.5rem; border-radius: 10px; background: #fff; border: 1px solid #ECEBE4;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 16px 34px -28px rgba(41, 55, 30, .45);
  transition: transform .45s var(--egri), box-shadow .45s var(--egri), border-color .45s;
}
.gy-kart:hover { transform: translateY(-4px); border-color: rgba(201, 184, 74, .6); box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 26px 44px -28px rgba(41, 55, 30, .5); }
.gy-kart::after { content: "“"; position: absolute; right: 1.25rem; bottom: 2.6rem; font-family: var(--f-baslik); font-size: 6rem; line-height: 1; color: rgba(41, 55, 30, .07); pointer-events: none; }
.gy-kart__ust { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.gy-kart__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.gy-kart__ad { font-weight: 700; color: var(--gece); line-height: 1.25; }
.gy-kart__tarih { font-size: .8rem; color: var(--metin-ikincil); }
.gy-kart__yildiz { width: 96px; height: 17px; -webkit-mask-size: 19.2px 17px; mask-size: 19.2px 17px; background: linear-gradient(90deg, #FBBC05 var(--puan), #DAD7CA var(--puan)) !important; }
.gy-kart__metin { font-size: .95rem; line-height: 1.7; color: #3C4650; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.gy-kart__dogrula { display: flex; align-items: center; gap: .45rem; padding-top: .9rem; border-top: 1px solid #EFEEE7; font-size: .8rem; color: var(--metin-ikincil); }
.gy-kart__dogrula .ikon { width: 16px; height: 16px; color: #34A853; stroke-width: 2; }
.gy__ilerleme { position: relative; height: 2px; background: #E6E4DA; overflow: hidden; border-radius: 2px; }
.gy__ilerleme i { position: absolute; inset: 0 auto 0 0; width: 60%; background: linear-gradient(90deg, var(--zeytin), var(--yag)); transition: transform .5s var(--egri), width .5s var(--egri); }

@media (max-width: 1099px) {
  .gy__govde { grid-template-columns: 1fr; }
  .gy__ray { grid-auto-columns: calc((100% - var(--gy-bosluk)) / 2); }
}
@media (max-width: 639px) {
  .gy__ray { grid-auto-columns: 86%; }
  .gy__sayac { display: none; }
}

/* kolaj: iki foto üst üste bindirilmiş */
.hikaye__kolaj { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, minmax(0, 1fr)); aspect-ratio: 7 / 6; }
.hikaye__foto--ust { grid-column: 1 / 9; grid-row: 1 / 7; box-shadow: 0 24px 50px -30px rgba(41, 55, 30, .5); }
.hikaye__foto--alt { grid-column: 5 / 13; grid-row: 5 / 11; border: 8px solid #fff; box-shadow: 0 30px 60px -30px rgba(41, 55, 30, .55); }

@media (max-width: 899px) {
  .hikaye__blok--1, .hikaye__blok--2 { grid-template-columns: 1fr; }
  .hikaye__blok--2 .hikaye__kolaj { order: -1; }
  .hikaye__rota { font-size: .75rem; gap: .6rem; }
}


/* 17b  Blog çarkı ------------------------------------------------------------
   Kartlar çok büyük bir dairenin üstüne dizilir; aktif kart ortada dik durur,
   yandakiler yay boyunca eğilip küçülür (aurorapms oda çarkı mekaniği).
   Farkı: başlık, özet ve "Oku" her kartın kendi altında. */
.blog-cark {
  --cw: clamp(250px, 24vw, 340px);           /* kart genişliği */
  --ch: calc(var(--cw) * 1.2);               /* kart yüksekliği: görsel 3:2 + metin */
  --r: 5000px;                               /* çark yarıçapı */
  --step: 4.1deg;                            /* kartlar arası açı */
  --tiltf: 1.5;
  overflow: hidden; padding-block: clamp(1rem, .5rem + 2vw, 2.5rem) var(--bolum);
  /* zeytin dalı deseni, üstünde beyaz perde: silik doku; üst kenarda yorumlar bölümünün beyazına yumuşak geçiş */
  background:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 160px),
    linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)),
    url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px 420px repeat,
    #fff;
}
.blog-cark__bas { display: grid; justify-items: center; text-align: center; gap: .8rem; }
.blog-cark__ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); }
.blog-cark__baslik { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.02; color: var(--zeytin); }

.cark { position: relative; height: calc(var(--ch) + 40px); margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); touch-action: pan-y; }
.cark__merkez { position: absolute; left: 50%; top: calc(var(--r) + var(--ch) + 20px); width: 0; height: 0; }
.cark__kart {
  position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) * -1);
  width: var(--cw); height: var(--ch);
  --s: .84; --o: .5;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #ECEBE4; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 20px 44px -28px rgba(41, 55, 30, .45);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--n) * var(--step))) translateY(calc(-1 * var(--r))) rotate(calc(var(--n) * var(--step) * (var(--tiltf) - 1))) scale(var(--s));
  transition: transform .95s cubic-bezier(.45, .03, .15, 1), opacity .8s var(--egri), box-shadow .5s var(--egri), border-color .5s;
  opacity: var(--o);
}
.cark__kart.is-yakin { --s: .91; --o: .85; }
.cark__kart.is-aktif { --s: 1; --o: 1; box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 36px 70px -32px rgba(41, 55, 30, .55); }
.cark__kart:not(.is-aktif) { cursor: pointer; }
.cark__kart:not(.is-aktif):hover { --o: .98; }
.cark__kart.is-uzak { --o: 0; pointer-events: none; }

.cark__gorsel { position: relative; display: block; aspect-ratio: 3 / 2; flex: none; overflow: hidden; background: var(--yaprak-gumus); }
.cark__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--egri); }
.cark__gorsel::before, .cark__gorsel::after { content: ""; position: absolute; z-index: 1; pointer-events: none; border-radius: 6px; opacity: 0; transition: opacity .45s var(--egri), inset .55s var(--egri); }
.cark__gorsel::before { inset: 20px; border: 1px solid rgba(255, 255, 255, .7); }
.cark__kart.is-aktif:hover .cark__gorsel img { transform: scale(1.06); }
.cark__kart.is-aktif:hover .cark__gorsel::before { opacity: 1; inset: 12px; }
.cark__konu { position: absolute; z-index: 2; left: 12px; top: 12px; padding: .32rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--zeytin); font-size: .7rem; font-weight: 700; letter-spacing: .03em; }

.cark__govde { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; gap: .55rem; padding: 1.15rem 1.25rem 1.25rem; }
.cark__baslik { font-size: clamp(1.1rem, 1rem + .35vw, 1.35rem); line-height: 1.2; color: var(--zeytin); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cark__baslik a { text-decoration: none; }
.cark__ozet { font-size: .88rem; line-height: 1.6; color: var(--metin-ikincil); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cark__oku { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; padding-bottom: 2px; font-size: .85rem; font-weight: 700; color: var(--zeytin); text-decoration: none; background: linear-gradient(var(--yag), var(--yag)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--egri); }
.cark__oku .ikon { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--zeytin); color: #fff; stroke-width: 1.8; transition: transform .4s var(--egri), background .4s; }
.cark__kart.is-aktif:hover .cark__oku { background-size: 100% 1px; }
.cark__kart.is-aktif:hover .cark__oku .ikon { transform: translateX(3px); background: var(--yag); color: var(--zeytin); }

.cark__alt { display: flex; align-items: center; gap: 1rem; }
.cark__sayac { min-width: 70px; text-align: center; font-size: .95rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.cark__sayac b { color: var(--zeytin); }
/* başlığın altında: sayaç + oklar | Tüm yazılar */
.blog-cark__arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
/* Tüm yazılar: çarkın hemen altında, kartlara yakın */
.blog-cark__tum { display: flex; justify-content: center; margin-top: .25rem; }

@media (max-width: 991px) { .blog-cark { --cw: clamp(230px, 34vw, 300px); --ch: calc(var(--cw) * 1.42); --r: 3600px; --step: 4.4deg; } }
@media (max-width: 600px) { .blog-cark { --cw: 72vw; --ch: calc(var(--cw) * 1.5); --r: 3200px; --step: 5deg; } }
@media (prefers-reduced-motion: reduce) { .cark__kart { transition: opacity .2s; } }


/* 18  Vitrin + ray + ürün kartı -------------------------------------------- */
.vitrin { padding-bottom: var(--bolum); }
.odul + .vitrin { padding-top: var(--bolum); }
.vitrin__bas { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .85rem; margin-bottom: 3rem; }
.vitrin__bas > * { min-width: 0; max-width: 100%; }
.vitrin__baslik { font-size: var(--t-1); color: var(--zeytin); }
.vitrin__alt { max-width: 34rem; color: var(--metin-ikincil); }

/* kategori sekmeleri: tonlu kapsül + aktif sekmenin arkasında kayan pul + altında zeytin dalı */
.sekme-sarici { position: relative; max-width: 100%; margin-top: 1.25rem; padding-bottom: 26px; }
@media (max-width: 639px) { .sekme-sarici { justify-self: stretch; } .sekme { padding: .55rem 1rem; } }
.sekme-liste {
  position: relative; display: flex; gap: .25rem; max-width: 100%;
  padding: 5px; border-radius: 999px;
  background: rgba(41, 55, 30, .045);
  box-shadow: inset 0 0 0 1px rgba(41, 55, 30, .08);
  overflow-x: auto; scrollbar-width: none;
}
.sekme-liste::-webkit-scrollbar { display: none; }
.sekme-pul {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0;
  width: var(--pul-w, 0px); transform: translateX(var(--pul-x, 0px));
  border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .08), 0 8px 18px -10px rgba(41, 55, 30, .35), inset 0 0 0 1px rgba(201, 184, 74, .35);
  transition: transform .55s cubic-bezier(.65, 0, .25, 1), width .55s cubic-bezier(.65, 0, .25, 1);
}
.sekme {
  flex: none; position: relative; z-index: 1; padding: .6rem 1.2rem; border-radius: 999px;
  font-family: var(--f-baslik); font-size: clamp(1rem, .92rem + .3vw, 1.2rem); line-height: 1.2;
  color: var(--metin-ikincil); white-space: nowrap;
  transition: color .35s var(--egri);
}
.sekme:hover { color: var(--zeytin); }
.sekme[aria-selected="true"] { color: var(--zeytin); }
.sekme:focus-visible { outline-offset: -3px; }

.sekme-dal {
  position: absolute; z-index: 1; left: 0; bottom: 0; width: 104px; height: 22px;
  pointer-events: none; opacity: 0;
  transform: translateX(var(--dal-x, 0px));
  transition: transform .6s cubic-bezier(.65, 0, .25, 1), opacity .3s;
}
.sekme-dal.is-hazir { opacity: 1; }
.sekme-dal svg { width: 100%; height: 100%; overflow: visible; }
.sekme-dal__sap { fill: none; stroke: var(--zeytin); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 0; }
.sekme-dal__yaprak { fill: var(--yaprak); transform-box: fill-box; transform-origin: 0% 100%; }
.sekme-dal__yaprak:nth-of-type(odd) { transform-origin: 0% 0%; }
.sekme-dal__zeytin { fill: var(--zeytin); transform-box: fill-box; transform-origin: 50% 50%; }
/* sekme değişince: sap baştan çizilir, yapraklar sırayla açılır, zeytin belirir */
.sekme-dal.is-ciz .sekme-dal__sap { animation: dalSap .7s cubic-bezier(.5, 0, .2, 1) .1s both; }
.sekme-dal.is-ciz .sekme-dal__yaprak { animation: dalYaprak .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.3s + var(--s) * .07s); }
.sekme-dal.is-ciz .sekme-dal__zeytin { animation: dalZeytin .45s cubic-bezier(.3, 1.6, .5, 1) .72s both; }
@keyframes dalSap { from { stroke-dashoffset: 130; } }
@keyframes dalYaprak { from { transform: scale(0) rotate(-25deg); opacity: 0; } }
@keyframes dalZeytin { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .sekme-dal { transition: none; }
  .sekme-dal.is-ciz * { animation: none !important; }
}

.ray {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--ray-bosluk)) / 4);
  --ray-bosluk: clamp(1rem, .6rem + 1.4vw, 2rem);
  gap: var(--ray-bosluk);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 6px 4px 34px; margin: -6px -4px -28px; scroll-padding-inline: 4px;
}
.ray::-webkit-scrollbar { display: none; }
.ray > * { scroll-snap-align: start; }
.ray.is-surukleniyor { cursor: grabbing; scroll-snap-type: none; }
.ray.is-surukleniyor a { pointer-events: none; }
.ray__alt { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.ray__oklar { display: flex; gap: .5rem; }
.ray__ok { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--cizgi-koyu); border-radius: 50%; transition: border-color var(--hiz), opacity var(--hiz); }
.ray__ok:hover { border-color: var(--zeytin); color: var(--zeytin); }
.ray__ok:disabled { opacity: .3; cursor: default; }
@media (max-width: 1023px) { .ray { grid-auto-columns: calc((100% - 1.5 * var(--ray-bosluk)) / 2.5); } }
@media (max-width: 639px) {
  .ray { grid-auto-columns: 72%; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar); }
  .ray__oklar { display: none; }
}

/* ürün kartı ("Vitrin"): beyaz kart, ürün beyaz zeminde yere gölge düşürür,
   köşe şerit rozet, bronz fiyat, fiyatın altında hep görünen tam genişlik düğme */
.kart {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; min-width: 0;
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 14px 34px -26px rgba(41, 55, 30, .35);
  transition: box-shadow .5s var(--egri), transform .5s var(--egri);
}
.kart:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 34px 60px -30px rgba(41, 55, 30, .5); }
.kart__gorsel { position: relative; display: block; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; border-radius: 4px 4px 0 0; }
.kart__gorsel::after {
  /* ürünün yere düşen gölgesi */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 10%; height: 14px;
  background: radial-gradient(closest-side, rgba(41, 55, 30, .18), transparent);
}
.kart__gorsel img {
  position: absolute; z-index: 1; left: 13%; top: 12%; width: 74%; height: 76%;
  object-fit: contain; object-position: 50% 100%;
  transition: transform .7s var(--egri);
}
.kart:hover .kart__gorsel img { transform: scale(1.06); }
/* ortam fotoğrafı olan ürünler: kareyi doldurur */
.kart__gorsel--foto::after { display: none; }
.kart__gorsel--foto img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kart:hover .kart__gorsel--foto img { transform: scale(1.05); }
.kart__etiket {
  position: absolute; z-index: 2; left: 0; top: 18px;
  padding: 6px 12px 6px 14px; background: var(--zeytin); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.kart__bilgi { display: grid; gap: .2rem; align-content: start; padding: 1.1rem 1.25rem .25rem; border-top: 1px solid #EFEEE6; }
.kart__ad { font-size: 1.2rem; line-height: 1.2; color: var(--gece); }
.kart__ad a { text-decoration: none; }
.kart__ad a:hover { color: var(--zeytin); }
.kart__boy { font-size: var(--t-kucuk); color: var(--metin-ikincil); }
.kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin-top: .55rem; }
.kart__fiyat .fiyat { font-size: 1.25rem; font-weight: 700; color: #6E5B12; }
.kart__fiyat--yok { font-size: var(--t-kucuk); font-weight: 600; color: var(--indirim); }
.kart__fiyat--yok .durum { display: none; }
.kart__eylem { padding: .9rem 1.25rem 1.25rem; }
/* sepete ekle: ince çerçeveli kapsül, sağda yuvarlak çanta düğmesi.
   Üzerine gelince zeytin yeşili sağdan sola dolar, çanta yuvası yağ rengine döner. */
.kart__eylem .dugme {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; min-height: 52px; padding: 0 6px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; color: var(--zeytin);
  border: 1px solid rgba(41, 55, 30, .28); border-radius: 999px;
  font-size: .9rem; font-weight: 600; letter-spacing: .06em;
  transition: color .45s var(--egri), border-color .45s var(--egri);
}
.kart__eylem .dugme::before {
  /* dolum katmanı */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: var(--zeytin); border-radius: inherit;
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s cubic-bezier(.65, 0, .25, 1);
}
.kart__eylem .dugme::after {
  /* çanta yuvası */
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--zeytin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12Z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3Cpath d='M12 12v5M9.5 14.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 6px 14px -6px rgba(41, 55, 30, .55);
  transition: background-color .45s var(--egri), transform .55s var(--egri);
}
.kart__eylem .dugme:hover { color: #fff; border-color: var(--zeytin); background: #fff; }
.kart__eylem .dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.kart__eylem .dugme:hover::after {
  background: var(--yag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329371E' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12Z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3Cpath d='M12 12v5M9.5 14.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
  transform: rotate(-12deg) scale(1.05);
}
.kart__eylem .dugme:active::after { transform: scale(.92); }
.kart__eylem .dugme.is-eklendi { color: #fff; border-color: var(--yaprak); background: #fff; }
.kart__eylem .dugme.is-eklendi::before { transform: scaleX(1); background: var(--yaprak); }
.kart__eylem .dugme.is-eklendi::after {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6B5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
  transform: none;
}
/* tükenen ürün: sade çerçeveli, çanta yuvası yok */
.kart__eylem .dugme--cizgi { justify-content: center; padding: 0 22px; }
.kart__eylem .dugme--cizgi::after { display: none; }
/* favori ve karşılaştır: görselin sağ üst köşesinde */
.kart__ikon {
  position: absolute; z-index: 3; right: 12px; top: 12px;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  color: var(--zeytin); background: #fff;
  border: 1px solid rgba(41, 55, 30, .12);
  box-shadow: 0 4px 12px -4px rgba(41, 55, 30, .25);
  transition: color .35s var(--egri), background .35s var(--egri), border-color .35s var(--egri), transform .35s var(--egri), box-shadow .35s var(--egri);
}
.kart__ikon + .kart__ikon { top: 62px; }
.kart__ikon .ikon { width: 19px; height: 19px; stroke-width: 1.6; }
.kart__ikon:hover { transform: scale(1.08); border-color: var(--zeytin); box-shadow: 0 8px 18px -6px rgba(41, 55, 30, .4); }
.kart__ikon[data-favori][aria-pressed="true"] { background: var(--indirim); border-color: var(--indirim); color: #fff; }
.kart__ikon[data-favori][aria-pressed="true"] .ikon { fill: currentColor; }
.kart__ikon[data-karsilastir][aria-pressed="true"] { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }

/* hover'da ikinci görsel (ortam fotoğrafı): yumuşak geçişle kareyi doldurur */
.kart__gorsel .kart__resim2 {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .55s var(--egri), transform 1.2s var(--egri);
}
.kart:hover .kart__gorsel--iki .kart__resim2 { opacity: 1; transform: none; }
.kart:hover .kart__gorsel--iki > img:first-child { opacity: 0; }
.kart__gorsel--iki > img:first-child { transition: opacity .45s var(--egri), transform .7s var(--egri); }
@media (hover: none) { .kart__gorsel .kart__resim2 { display: none; } }

/* rozet kutusu: görselin bittiği çizgiye oturur */
.kart__bilgi { position: relative; }
.kart__rozet {
  position: absolute; z-index: 3; left: 1.25rem; top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem; border-radius: 3px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.1; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(41, 55, 30, .6);
}
.kart__rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.kart__rozet--yeni-hasat { background: var(--zeytin); color: #fff; }
.kart__rozet--yeni { background: var(--yag); color: var(--zeytin); }
.kart__rozet--kampanya { background: var(--indirim); color: #fff; }
.kart__bilgi { padding-top: 1.4rem; }

/* yıldız puanı */
.kart__puan { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .8rem; }
.yildiz {
  --yildiz-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2l2.05 4.3 4.7.6-3.45 3.25.87 4.65L8 11.72 3.83 14l.87-4.65L1.25 6.1l4.7-.6z'/%3E%3C/svg%3E");
  display: inline-block; width: 82px; height: 15px; flex: none;
  background: linear-gradient(90deg, #C9A227 var(--puan, 0%), #DAD7CA var(--puan, 0%));
  -webkit-mask: var(--yildiz-svg) 0 0 / 16.4px 15px repeat-x;
          mask: var(--yildiz-svg) 0 0 / 16.4px 15px repeat-x;
}
.kart__puan-not { color: var(--gece); font-weight: 600; font-variant-numeric: tabular-nums; }
.kart__puan-not span { color: var(--metin-ikincil); font-weight: 500; }
.kart__puan--bos .kart__puan-not { font-weight: 500; color: var(--metin-ikincil); text-decoration: none; }
.kart__puan--bos .kart__puan-not:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }

/* kampanyalı fiyat */
.fiyat__eski { font-size: .85rem; color: var(--metin-ikincil); text-decoration: line-through; text-decoration-color: var(--indirim); font-variant-numeric: tabular-nums; }


/* 19  Sofra ----------------------------------------------------------------- */
.sofra { padding-bottom: var(--bolum); }
.sofra__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.sofra__gorsel { aspect-ratio: 4 / 5; overflow: hidden; }
.sofra__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sofra__metin .bolum-bas__aciklama { margin-top: 1rem; }
.sofra__liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; margin-top: 2.5rem; }
.sofra__liste a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid var(--cizgi);
  font-family: var(--f-baslik); font-size: 1.35rem; text-decoration: none;
  transition: color var(--hiz), padding var(--hiz) var(--egri);
}
.sofra__liste a:hover { color: var(--yaprak); padding-left: .4rem; }
@media (max-width: 899px) {
  .sofra__ic { grid-template-columns: 1fr; }
  .sofra__gorsel { aspect-ratio: 3 / 2; }
}
@media (max-width: 479px) { .sofra__liste { grid-template-columns: 1fr; } }


/* 20  Rehber --------------------------------------------------------------- */
.rehber { padding-bottom: var(--bolum); }
.rehber__izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 2.5rem clamp(1.5rem, 1rem + 2vw, 3rem); }
.yazi { display: grid; gap: .6rem; align-content: start; }
.yazi--buyuk { grid-row: 1 / 3; }
.yazi__gorsel { display: block; overflow: hidden; margin-bottom: .75rem; }
.yazi__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--egri); }
.yazi:hover .yazi__gorsel img { transform: scale(1.03); }
.yazi--buyuk .yazi__gorsel { aspect-ratio: 3 / 2; }
.yazi--orta { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 1.25rem; }
.yazi--orta .yazi__gorsel { grid-row: 1 / 4; aspect-ratio: 3 / 4; margin: 0; }
.yazi--metin { padding-top: 1.75rem; border-top: 1px solid var(--cizgi); justify-items: start; }
.yazi__konu { font-size: var(--t-mini); color: var(--yaprak); font-weight: 600; }
.yazi__baslik { font-size: var(--t-3); line-height: 1.2; }
.yazi--buyuk .yazi__baslik { font-size: var(--t-2); }
.yazi__baslik a { text-decoration: none; }
.yazi__baslik a:hover { color: var(--yaprak); }
.yazi__ozet { color: var(--metin-ikincil); max-width: 38rem; }
@media (max-width: 899px) {
  .rehber__izgara { grid-template-columns: 1fr; }
  .yazi--buyuk { grid-row: auto; }
}


/* 21  Bülten --------------------------------------------------------------- */
.bulten { background: var(--zeytin); color: var(--kirec); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.bulten__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem 4rem; align-items: end; }
.bulten__baslik { font-size: var(--t-1); margin-bottom: 1rem; }
.bulten__ic p { color: var(--kirec-soluk); max-width: 30rem; }
.bulten__form { display: grid; gap: 1rem; }
.bulten__satir { display: flex; border-bottom: 1px solid var(--kirec-soluk); }
.bulten__satir input { flex: 1; min-width: 0; min-height: 3.5rem; background: transparent; border: 0; color: var(--kirec); font-size: 1.0625rem; }
.bulten__satir input::placeholder { color: rgba(244, 244, 239, .5); }
.bulten__satir input:focus { outline: none; }
.bulten__satir:focus-within { border-bottom-color: var(--kirec); }
.bulten__satir .dugme { align-self: center; }
.secim--koyu { color: var(--kirec-soluk); }
.secim--koyu input { accent-color: var(--yag); }
.bulten__mesaj { font-size: var(--t-kucuk); min-height: 1.4em; }
.bulten__mesaj.is-hata { color: #E7A393; }
.bulten__mesaj.is-tamam { color: var(--yag); }
@media (max-width: 899px) { .bulten__ic { grid-template-columns: 1fr; } }


/* 22  Footer --------------------------------------------------------------- */
.alt { background: var(--zeytin); color: var(--kirec); border-top: 1px solid var(--kirec-cizgi); padding-top: 3rem; font-size: .9375rem; }
.alt a { text-decoration: none; color: var(--kirec-soluk); transition: color var(--hiz); }
.alt a:hover { color: var(--kirec); }
.alt__vaat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--kirec-cizgi); color: var(--kirec-soluk); font-size: var(--t-kucuk); }
.alt__vaat strong { display: block; color: var(--kirec); font-weight: 600; font-size: .9375rem; margin-bottom: .2rem; }
.alt__izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 3.5rem; }
.alt__marka img { width: 116px; margin-bottom: 1.5rem; }
.alt__marka address { color: var(--kirec-soluk); line-height: 1.7; }
.alt__sosyal { display: flex; gap: .25rem; margin: 1.25rem 0 0 -.6rem; }
.alt__sosyal a { width: 44px; height: 44px; display: grid; place-items: center; }
/* coğrafi işaret rozetleri: logolar koyu zeminde okunsun diye krem kartlarda */
.alt__ci { margin-top: 1.75rem; }
.alt__ci-baslik { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--yag); margin-bottom: .7rem; }
.alt__ci-liste { display: flex; gap: .6rem; }
.alt__ci-liste li {
  display: grid; place-items: center; width: 116px; height: 80px; padding: 8px; border-radius: 10px;
  background: #F7F5EC; box-shadow: inset 0 0 0 1px rgba(201, 184, 74, .45), 0 10px 22px -14px rgba(0, 0, 0, .6);
  transition: transform .35s var(--egri);
}
.alt__ci-liste li:hover { transform: translateY(-3px); }
.alt__ci-liste img { width: 100%; height: 100%; object-fit: contain; }
.alt__baslik { font-family: var(--f-metin); font-size: .9375rem; font-weight: 600; margin-bottom: 1rem; }
.alt__baslik button { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: default; text-align: left; }
.alt__baslik .ikon { display: none; }
.alt__grup ul { display: grid; gap: .5rem; }
@media (max-width: 1023px) {
  .alt__izgara { grid-template-columns: 1fr 1fr; }
  .alt__marka { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .alt__vaat { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr; gap: 0; padding-block: 2.5rem 1.5rem; }
  .alt__marka { margin-bottom: 1.5rem; }
  .alt__grup { border-top: 1px solid var(--kirec-cizgi); }
  .alt__baslik { margin: 0; }
  .alt__baslik button { min-height: 3.5rem; cursor: pointer; }
  .alt__baslik .ikon { display: block; transition: transform var(--hiz); }
  .alt__baslik button[aria-expanded="true"] .ikon { transform: rotate(180deg); }
  .js .alt__grup ul { display: none; padding-bottom: 1.25rem; }
  .js .alt__grup.is-acik ul { display: grid; }
  .alt__grup ul a { display: inline-block; padding: .3rem 0; }
}


/* 22a  Footer çıkıntısı: bülten, footer'ın ortasından yukarı taşan kubbe ---- */
.alt { position: relative; }
/* footer zemini: üstte kubbeyle aynı düz zeytin, aşağı indikçe saydamlaşıp Ege manzarası beliriyor */
.alt {
  background:
    radial-gradient(ellipse 60% 45% at 70% 55%, rgba(201, 184, 74, .16), transparent 70%),
    linear-gradient(180deg, #29371E 0%, rgba(41, 55, 30, .94) 18%, rgba(38, 51, 27, .8) 48%, rgba(30, 41, 21, .84) 78%, rgba(20, 28, 14, .95) 100%),
    url("../img/foto/footer-ege.webp") center 58% / cover no-repeat,
    #29371E;
}
@media (max-width: 767px) {
  .alt {
    background:
      linear-gradient(180deg, #29371E 0%, rgba(41, 55, 30, .9) 22%, rgba(34, 46, 24, .82) 60%, rgba(20, 28, 14, .95) 100%),
      url("../img/foto/footer-ege-1200.webp") 30% 60% / cover no-repeat,
      #29371E;
  }
}
.cikinti {
  --ch: clamp(250px, 17vw + 60px, 300px);
  position: relative; z-index: 2;
  width: min(1100px, 100%); height: var(--ch);
  --icerde: 120px;                                      /* kubbenin footer içine inen kısmı */
  margin: calc(-1 * var(--ch) - 3rem + var(--icerde)) auto 0;
  display: grid; place-items: end center; padding: 0 clamp(4rem, 14%, 11rem) 1.6rem;
  color: var(--kirec); text-align: center;
}
.cikinti__sekil, .cikinti__hat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cikinti__hat { overflow: visible; }
.cikinti__sekil { z-index: -1; filter: drop-shadow(0 -18px 30px rgba(41, 55, 30, .18)); }
/* gölge footer içinde hale bırakmasın: şeklin footer'a gömülen alt kısmı kırpılır */
.cikinti__sekil { clip-path: inset(-80px -80px 120px -80px); }
.cikinti__sekil path { fill: url(#kubbeGrad); }
/* kesik hat: kubbeyi 14px içeriden izler, footer'ın üst kenarına inince sağa-sola düz devam eder (yolu JS çizer) */
.cikinti__hat path { fill: none; stroke: var(--yag); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: .7; }
.cikinti__ic { width: 100%; max-width: 560px; display: grid; justify-items: center; gap: .55rem; }
.cikinti__yaprak { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .2rem; border-radius: 50%; background: var(--yag); box-shadow: 0 0 0 6px rgba(201, 184, 74, .18); }
.cikinti__yaprak svg { width: 24px; height: 15px; fill: var(--zeytin); transform: rotate(-18deg); }
.cikinti__yaprak svg .yaprak__damar { fill: none; stroke: var(--yag); stroke-width: 1.1; }
.cikinti__ust { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--yag); }
.cikinti__baslik { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); line-height: 1.15; }
.cikinti__form { width: 100%; display: grid; gap: .6rem; margin-top: .45rem; }
/* masaüstünde yalnız form 25px aşağı: içerik alttan hizalı olduğu için alt boşluk da 25px azaltılır, başlık yerinde kalır */
@media (min-width: 768px) { .cikinti__form { margin-top: calc(.45rem + 25px); } .cikinti { padding-bottom: calc(1.6rem - 25px); } }
.cikinti__satir { display: flex; align-items: center; gap: .4rem; padding: 5px 5px 5px 20px; border-radius: 999px; background: rgba(244, 244, 239, .1); box-shadow: inset 0 0 0 1px rgba(244, 244, 239, .28); transition: box-shadow .3s, background .3s; }
.cikinti__satir:focus-within { background: rgba(244, 244, 239, .16); box-shadow: inset 0 0 0 1px var(--yag); }
.cikinti__satir input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--kirec); font-size: 1rem; }
.cikinti__satir input::placeholder { color: rgba(244, 244, 239, .55); }
.cikinti__satir input:focus { outline: none; }
.cikinti__dugme { flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--yag); color: var(--zeytin); font-weight: 700; font-size: .85rem; letter-spacing: .02em; transition: background .3s, transform .3s var(--egri); }
.cikinti__dugme .ikon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--zeytin); color: var(--yag); stroke-width: 2; transition: transform .35s var(--egri); }
.cikinti__dugme:hover { background: #D8C85A; }
.cikinti__dugme:hover .ikon { transform: translateX(3px); }
.cikinti__onay { justify-content: center; text-align: left; font-size: .78rem; }
.cikinti .bulten__mesaj { min-height: 1.2em; font-size: .82rem; }
/* çıkıntı yukarı taştığı için üstteki bölüme yer aç */
.blog-cark { padding-bottom: calc(var(--bolum) * .45 + clamp(250px, 17vw + 60px, 300px) - 120px); }

/* mobilde kubbe yok: bülten footer'ın başında, kenarı altın hatlı zarif bir kart */
@media (max-width: 767px) {
  .cikinti { height: auto; margin: 0 auto; padding: .25rem var(--kenar) 0; display: block; text-align: left; }
  .cikinti .bulten__mesaj:empty { display: none; }
  .cikinti__sekil, .cikinti__hat { display: none; }
  .blog-cark { padding-bottom: var(--bolum); }
  .cikinti__ic {
    position: relative; overflow: hidden; max-width: none;
    grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: .75rem; row-gap: .7rem;
    padding: 1.5rem 1.25rem 1.25rem; border-radius: 18px;
    background: linear-gradient(150deg, rgba(244, 244, 239, .09), rgba(244, 244, 239, .02) 60%);
    border: 1px solid rgba(201, 184, 74, .35);
  }
  .cikinti__ic::after {
    /* sağ üst köşede silik zeytin dalı */
    content: ""; position: absolute; right: -40px; top: -30px; width: 170px; height: 170px;
    background: url("../img/desen/zeytin-dali.webp") center / 340px no-repeat; opacity: .35; transform: rotate(18deg); pointer-events: none;
  }
  .cikinti__yaprak { width: 34px; height: 34px; margin: 0; box-shadow: 0 0 0 4px rgba(201, 184, 74, .15); }
  .cikinti__yaprak svg { width: 18px; height: 11px; }
  .cikinti__ust { font-size: .72rem; }
  .cikinti__baslik, .cikinti__form { grid-column: 1 / -1; position: relative; z-index: 1; }
  .cikinti__baslik { font-size: 1.4rem; line-height: 1.2; max-width: 18ch; }
  .cikinti__form { margin-top: .15rem; }
  .cikinti__satir { padding: 4px 4px 4px 16px; }
  .cikinti__satir input { height: 44px; font-size: .95rem; }
  /* düğme yalnız ok: alanın içinde yuvarlak */
  .cikinti__dugme { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .cikinti__dugme .ikon { width: 44px; height: 44px; padding: 12px; background: var(--yag); color: var(--zeytin); }
  .cikinti__onay { justify-content: flex-start; font-size: .74rem; line-height: 1.45; }
  .cikinti__onay input { width: 16px; height: 16px; }
}




/* 22b  En alt şerit (misirlimarin.com düzeni) ------------------------------- */
.alt-son { background: rgba(0, 0, 0, .38); border-top: 1px solid rgba(255, 255, 255, .1); }
.alt-son__ic { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; padding-block: 1.4rem 1.6rem; }
.alt-son__telif { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: .82rem; color: var(--kirec-soluk); }
.alt-son__telif b { color: #fff; font-weight: 600; }
.alt-son__tasarim { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 244, 239, .55); }
.alt-son__tasarim::before { content: ""; width: 1px; height: 16px; margin-right: .15rem; background: rgba(255, 255, 255, .16); }
.alt-son__tasarim img { height: 21px; width: auto; opacity: .85; transition: opacity var(--hiz); }
.alt-son__tasarim a:hover img { opacity: 1; }
.alt-son__odeme { display: flex; align-items: center; gap: .9rem; }
.alt-son__odeme ul { display: flex; align-items: center; gap: .4rem; }
.alt-son__odeme li img { height: 26px; width: auto; border-radius: 4px; }
.alt-son__ssl { padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.alt-son__ssl img { height: 26px; width: auto; border-radius: 4px; }
@media (max-width: 767px) {
  .alt-son__ic { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; padding-block: 1.1rem 1.4rem; }
  .alt-son__telif { gap: .75rem; font-size: .78rem; }
  .alt-son__tasarim::before { display: none; }
  .alt-son__odeme { align-self: stretch; justify-content: center; flex-wrap: wrap; }
  .alt-son__odeme li img, .alt-son__ssl img { height: 22px; }
}


/* 23  Mobil alt çubuk ------------------------------------------------------ */
.altnav { display: none; }
@media (max-width: 1023px) {
  .altnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--h-altnav) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--kirec); border-top: 1px solid var(--cizgi);
  }
  .altnav__oge {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
    font-size: 11px; line-height: 1; color: var(--metin-ikincil); text-decoration: none;
  }
  .altnav__oge .ikon { width: 22px; height: 22px; }
  .altnav__oge[aria-current="page"] { color: var(--zeytin); }
  .altnav__oge[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--zeytin); }
  .altnav__oge .rozet { top: 6px; right: calc(50% - 22px); }
}


/* 24  Bildirim ------------------------------------------------------------- */
.bildirim {
  position: fixed; z-index: 60; right: var(--kenar); bottom: calc(var(--h-altnav) + env(safe-area-inset-bottom) + 1rem);
  display: flex; align-items: center; gap: 1.5rem;
  max-width: min(26rem, calc(100% - 2 * var(--kenar)));
  padding: 1rem 1.25rem; background: var(--zeytin); color: var(--kirec); font-size: var(--t-kucuk);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s var(--egri), transform .25s var(--egri);
}
.bildirim.is-acik { opacity: 1; transform: none; pointer-events: auto; }
.bildirim__baglanti { color: var(--yag); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
@media (max-width: 639px) { .bildirim { left: var(--kenar); } }


/* 25  Hareket azaltma ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .slayt__gorsel { translate: none !important; }
}


/* 26  Kategori sayfası -------------------------------------------------------
   Başlık: iki sütun (metin + sayılar + hızlı süzgeç kapsülleri | altın çerçeveli görsel).
   Liste: solda açılır filtre grupları (kart değil, ince ayraçlı), sağda araç çubuğu + ızgara.
   Ürün kartları anasayfadaki "Vitrin" kartının aynısı (.kart). */
.kat-bas {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 1.25rem clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background:
    linear-gradient(180deg, rgba(245, 243, 230, 0) 60%, var(--kirec) 100%),
    linear-gradient(rgba(245, 243, 230, .9), rgba(245, 243, 230, .9)),
    url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px 420px repeat,
    #F5F3E6;
}
.kat-yol ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--t-mini); color: var(--metin-ikincil); }
.kat-yol li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .5rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.kat-yol a { text-decoration: none; }
.kat-yol a:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.kat-yol [aria-current] { color: var(--gece); font-weight: 600; }

.kat-bas__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; margin-top: clamp(1.25rem, .8rem + 1.5vw, 2rem); }
.kat-bas__ust { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); }
.kat-bas__ust::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.kat-bas__baslik { margin: .5rem 0 1rem; font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5.2rem); line-height: .98; color: var(--zeytin); }
.kat-bas__aciklama { max-width: 46ch; color: var(--metin-ikincil); font-size: 1.02rem; }
.kat-bas__sayilar { display: flex; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); margin-top: 1.5rem; }
.kat-bas__sayilar li { display: grid; gap: .1rem; padding-left: 1rem; border-left: 1px solid rgba(201, 184, 74, .6); }
.kat-bas__sayilar b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--zeytin); font-variant-numeric: tabular-nums; }
.kat-bas__sayilar span { font-size: var(--t-mini); color: var(--metin-ikincil); }
.kat-cipler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.kat-cip {
  white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .55rem 0 1rem; border-radius: 999px;
  background: #fff; color: var(--zeytin); font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(41, 55, 30, .16);
  transition: background .3s, color .3s, box-shadow .3s;
}
.kat-cip span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #F2F0E4; font-size: .72rem; color: var(--metin-ikincil); transition: background .3s, color .3s; }
.kat-cip:hover { box-shadow: inset 0 0 0 1px var(--zeytin); }
.kat-cip[aria-pressed="true"] { background: var(--zeytin); color: #fff; box-shadow: none; }
.kat-cip[aria-pressed="true"] span { background: var(--yag); color: var(--zeytin); }

.kat-bas__gorsel { position: relative; margin: 0; aspect-ratio: 5 / 4; }
.kat-bas__gorsel img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 40px 70px -40px rgba(41, 55, 30, .6); }
.kat-bas__cerceve { position: absolute; inset: 0; border: 1px solid rgba(201, 184, 74, .85); border-radius: 20px; transform: translate(18px, 18px); }
.kat-bas__not {
  position: absolute; z-index: 2; left: -18px; bottom: 28px;
  display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 999px;
  background: rgba(41, 55, 30, .88); color: #fff; font-size: .82rem; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6);
}
.kat-bas__not .ikon { width: 26px; height: 16px; fill: var(--yag); stroke: none; }

/* ---- liste düzeni ---- */
.kat-liste { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) var(--bolum); }
.kat-liste__ic { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.kat-liste.is-filtre-gizli .kat-liste__ic { grid-template-columns: minmax(0, 1fr); }
.kat-liste.is-filtre-gizli .kat-filtre { display: none; }

/* ---- filtre paneli ---- */
.kat-filtre { padding: 1.4rem 1.4rem .6rem; border-radius: 14px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 14px 30px -26px rgba(41, 55, 30, .5); }
.kat-filtre .fgrup:last-child { border-bottom: 0; }
.kat-filtre__ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--zeytin); }
.kat-filtre__baslik { display: flex; align-items: center; gap: .55rem; font-family: var(--f-baslik); font-size: 1.35rem; color: var(--zeytin); }
.kat-filtre__baslik .ikon { width: 20px; height: 20px; stroke-width: 1.8; }
.kat-filtre__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--yag); color: var(--zeytin); font: 700 .72rem/1 var(--f-metin); }
.kat-filtre__temizle { font-size: .8rem; font-weight: 700; color: var(--indirim); text-decoration: underline; text-underline-offset: 3px; }
.kat-filtre__kapat, .kat-filtre__alt { display: none; }

.fgrup { border-bottom: 1px solid #E6E4DA; }
.fgrup__bas button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font-family: var(--f-metin); font-size: .95rem; font-weight: 700; color: var(--gece); }
.fgrup__bas .ikon { width: 18px; height: 18px; transition: transform .35s var(--egri); }
.fgrup.is-acik .fgrup__bas .ikon { transform: rotate(180deg); }
.fgrup__ic { display: none; padding-bottom: 1.1rem; }
.fgrup.is-acik .fgrup__ic { display: block; }

.fliste { display: grid; gap: .15rem; }
.fsecim { display: flex; align-items: center; gap: .7rem; min-height: 36px; cursor: pointer; font-size: .9rem; color: #3C4650; }
.fsecim input { position: absolute; opacity: 0; pointer-events: none; }
.fsecim__kutu { flex: none; position: relative; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(41, 55, 30, .35); background: #fff; transition: background .25s, border-color .25s; }
.fsecim__kutu::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--egri); }
.fsecim input:checked + .fsecim__kutu { background: var(--zeytin); border-color: var(--zeytin); }
.fsecim input:checked + .fsecim__kutu::after { transform: rotate(45deg) scale(1); }
.fsecim input:focus-visible + .fsecim__kutu { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.fsecim__ad { flex: 1; }
.fsecim input:checked ~ .fsecim__ad { color: var(--zeytin); font-weight: 600; }
.fsecim__say { min-width: 24px; text-align: right; font-size: .75rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.fsecim.is-sifir { opacity: .45; }
.fsecim:hover .fsecim__kutu { border-color: var(--zeytin); }
/* hacim: hap düğmeler */
.fliste--hap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.fliste--hap .fsecim { min-height: 0; }
.fliste--hap .fsecim__kutu, .fliste--hap .fsecim__say { display: none; }
.fliste--hap .fsecim__ad { flex: 1; text-align: center; white-space: nowrap; padding: .5rem 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(41, 55, 30, .18); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .25s, color .25s, box-shadow .25s; }
.fliste--hap .fsecim:hover .fsecim__ad { box-shadow: inset 0 0 0 1px var(--zeytin); }
.fliste--hap .fsecim input:checked ~ .fsecim__ad { background: var(--zeytin); color: #fff; box-shadow: none; }

/* fiyat aralığı */
.ffiyat__ray { position: relative; height: 28px; margin: .25rem 4px 1rem; }
.ffiyat__ray::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: #E6E4DA; }
.ffiyat__dolu { position: absolute; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: linear-gradient(90deg, var(--zeytin), var(--yag)); }
.ffiyat__ray input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ffiyat__ray input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--zeytin); box-shadow: 0 4px 10px -4px rgba(41, 55, 30, .6); cursor: grab; }
.ffiyat__ray input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--zeytin); cursor: grab; }
.ffiyat__kutular { display: flex; align-items: flex-end; gap: .5rem; }
.ffiyat__kutular label { position: relative; flex: 1; display: grid; gap: .25rem; font-size: .72rem; color: var(--metin-ikincil); }
.ffiyat__kutular input { width: 100%; height: 42px; padding: 0 2rem 0 .75rem; border-radius: 10px; border: 1px solid rgba(41, 55, 30, .2); background: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ffiyat__kutular input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ffiyat__kutular input:focus { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin); }
.ffiyat__kutular i { position: absolute; right: .7rem; bottom: 12px; font-style: normal; font-size: .75rem; color: var(--metin-ikincil); }
.ffiyat__tire { width: 10px; height: 1px; margin-bottom: 21px; background: var(--metin-ikincil); }

/* ---- araç çubuğu ---- */
.kat-arac {
  display: flex; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem .75rem; margin-bottom: 1rem;
  border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 14px 30px -26px rgba(41, 55, 30, .5); border: 1px solid #ECEBE4;
}
.kat-arac__filtre { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .9rem; border-radius: 10px; font-size: .85rem; font-weight: 700; color: var(--zeytin); background: #F4F2E7; transition: background .25s; }
.kat-arac__filtre:hover { background: #ECE9DA; }
.kat-arac__filtre .ikon { width: 18px; height: 18px; stroke-width: 1.8; }
.kat-arac__filtre-mobil { display: none; }
.kat-arac__sayi { margin-right: auto; font-size: .9rem; color: var(--metin-ikincil); }
.kat-arac__sayi b { color: var(--gece); font-variant-numeric: tabular-nums; }
.kat-sirala { position: relative; display: inline-flex; align-items: center; gap: .6rem; }
.kat-sirala__yazi { font-size: .85rem; color: var(--metin-ikincil); }
.kat-sirala select { height: 42px; padding: 0 2.4rem 0 1rem; border-radius: 10px; border: 1px solid rgba(41, 55, 30, .18); background: #fff; font-size: .88rem; font-weight: 600; color: var(--gece); appearance: none; cursor: pointer; }
.kat-sirala select:focus { outline: none; border-color: var(--zeytin); }
.kat-sirala .ikon { position: absolute; right: .8rem; width: 16px; height: 16px; pointer-events: none; }

.kat-secili { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 1.25rem; }
.kat-secili button { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .5rem 0 .85rem; border-radius: 999px; background: var(--zeytin); color: #fff; font-size: .8rem; font-weight: 600; }
.kat-secili button i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-style: normal; font-size: .85rem; line-height: 1; }
.kat-secili button:hover i { background: var(--yag); color: var(--zeytin); }

/* ---- ızgara ---- */
.kat-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1vw, 1.5rem); }
.kat-liste.is-filtre-gizli .kat-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kat-izgara .kart[hidden] { display: none; }
.kat-izgara .kart.is-giris { animation: kartGir .5s var(--egri) both; }
@keyframes kartGir { from { opacity: 0; transform: translateY(14px); } }

.kat-bos { display: grid; justify-items: center; gap: .6rem; padding: 4rem 1rem; text-align: center; color: var(--metin-ikincil); border: 1px dashed rgba(41, 55, 30, .25); border-radius: 16px; }
.kat-bos .ikon { width: 56px; height: 36px; fill: var(--yag); stroke: none; }
.kat-bos__baslik { font-family: var(--f-baslik); font-size: 1.6rem; color: var(--zeytin); }
.kat-bos .afis__dugme { margin-top: .75rem; }

.kat-daha { display: grid; justify-items: center; gap: .8rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.kat-daha__yazi { font-size: .88rem; color: var(--metin-ikincil); }
.kat-daha__yazi b { color: var(--gece); }
.kat-daha__cizgi { position: relative; width: min(240px, 60%); height: 3px; border-radius: 3px; background: #E6E4DA; overflow: hidden; }
.kat-daha__cizgi i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--zeytin), var(--yag)); transition: width .5s var(--egri); }
.kat-daha .afis__dugme:hover { color: #fff; border-color: var(--zeytin); }
.kat-daha .afis__dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.kat-daha .afis__dugme:hover .ikon { background: var(--yag); color: var(--zeytin); }

/* ---- duyarlı ---- */
@media (max-width: 1279px) { .kat-liste.is-filtre-gizli .kat-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .kat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .kat-bas__ic { grid-template-columns: minmax(0, 1fr); }
  .kat-bas__gorsel { aspect-ratio: 16 / 9; margin-right: 14px; }
  .kat-bas__not { left: 12px; }
  .kat-liste__ic { grid-template-columns: minmax(0, 1fr); }
  .kat-liste.is-filtre-gizli .kat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kat-arac__filtre-yazi { display: none; }
  .kat-arac__filtre-mobil { display: inline; }
  /* filtre: tam ekran katman */
  .kat-filtre, .kat-liste.is-filtre-gizli .kat-filtre {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; max-height: none; padding: 0;
    background: #fff; overflow: hidden; border: 0; border-radius: 0; box-shadow: none;
    transform: translateY(100%); visibility: hidden; pointer-events: none;
    transition: transform .4s var(--egri), visibility 0s linear .4s;
  }
  .kat-filtre.is-acik { transform: none; visibility: visible; pointer-events: auto; transition: transform .4s var(--egri); }
  .kat-filtre__ust { padding: .75rem .75rem .75rem var(--kenar); border-bottom: 1px solid var(--cizgi); }
  .kat-filtre__kapat { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); }
  .kat-filtre__kapat:focus-visible { outline: 2px solid var(--zeytin); outline-offset: 2px; }
  .kat-filtre__gruplar { flex: 1; overflow-y: auto; padding: 0 var(--kenar); }
  .kat-filtre__alt { display: block; padding: .9rem var(--kenar) calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: #fff; }
}
@media (max-width: 639px) {
  .kat-izgara { gap: .75rem; }
  .kat-bas__sayilar { gap: 1rem; }
  .kat-bas__sayilar b { font-size: 1.3rem; }
  .kat-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); }
  .kat-cipler::-webkit-scrollbar { display: none; }
  .kat-cip { flex: none; }
  .kat-arac { gap: .5rem; padding: .45rem; }
  .kat-arac__sayi { font-size: .8rem; }
  .kat-sirala select { max-width: 150px; padding-left: .7rem; font-size: .8rem; }
  /* dar ekranda ürün kartı: metin ve düğme sığsın */
  .kat-izgara .kart__bilgi { padding-inline: .8rem; }
  .kat-izgara .kart__eylem { padding-inline: .8rem; }
  .kat-izgara .kart__ad { font-size: 1rem; }
  .kat-izgara .kart__fiyat .fiyat { font-size: 1.05rem; }
  .kat-izgara .kart__eylem .dugme { min-height: 44px; padding-left: 14px; font-size: .78rem; letter-spacing: .02em; }
  .kat-izgara .kart__eylem .dugme::after { width: 34px; height: 34px; background-size: 17px; }
  .kat-izgara .kart__puan .yildiz { width: 62px; height: 12px; -webkit-mask-size: 12.4px 12px; mask-size: 12.4px 12px; }
  .kat-izgara .kart__puan { flex-wrap: wrap; gap: .15rem .5rem; }
  .kat-izgara .kart__puan-not { font-size: .7rem; white-space: nowrap; }
  .kat-sirala__yazi { display: none; }
  .kat-izgara .kart__ikon { width: 34px; height: 34px; right: 8px; top: 8px; }
  .kat-izgara .kart__ikon + .kart__ikon { top: 48px; }
  .kat-izgara .kart__etiket { top: 10px; font-size: .62rem; padding: 4px 8px; }
}


/* 27  Ürün detay sayfası ------------------------------------------------------
   Üst: solda dikey küçük görseller + beyaz sahne (yakınlaştırma, video), sağda bilgi,
   boyut/ambalaj seçimi, beyaz satın alma kartı, güvence satırları.
   Alt: anasayfa vitrinindeki sekme bileşeni (pul + zeytin dalı), her sekme kendi panelinde. */
.ud { padding-bottom: 0; }
.ud-ust { padding-block: 1.25rem clamp(3rem, 2rem + 3vw, 5rem); }
.ud-ust__ic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "galeri bilgi" "guven bilgi"; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); row-gap: 2rem; align-items: start; margin-top: 1.25rem; }
.ud-galeri { grid-area: galeri; } .ud-bilgi { grid-area: bilgi; } .ud-guven { grid-area: guven; }
.kat-yol li:last-child span { display: inline-block; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- galeri ---- */
.ud-galeri { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; }
.ud-galeri__kucukler { display: grid; align-content: start; gap: .75rem; }
.ud-kucuk {
  position: relative; display: block; width: 84px; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: #fff; border: 1px solid #ECEBE4;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--egri);
}
.ud-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.ud-kucuk--kes img { object-fit: contain; padding: 8px; }
.ud-kucuk .ikon { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--zeytin); fill: currentColor; stroke: none; }
.ud-kucuk:hover { transform: translateY(-2px); border-color: rgba(41, 55, 30, .35); }
.ud-kucuk[aria-current="true"] { border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin), 0 10px 20px -14px rgba(41, 55, 30, .6); }

.ud-galeri__sahne {
  position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .06), 0 30px 60px -40px rgba(41, 55, 30, .45);
  touch-action: pan-y;
}
.ud-kare { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--egri), visibility 0s linear .5s; overflow: hidden; }
.ud-kare.is-aktif { opacity: 1; visibility: visible; transition: opacity .5s var(--egri); }
.ud-kare img, .ud-kare video { width: 100%; height: 100%; transition: transform .35s var(--egri); }
.ud-kare--kes { background: radial-gradient(60% 55% at 50% 45%, #FFFFFF 40%, #F6F5EE 100%); }
.ud-kare--kes img { position: absolute; left: 0; right: 0; top: 9%; height: 78%; width: 100%; object-fit: contain; }
.ud-kare--kes::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 10%; height: 22px; background: radial-gradient(closest-side, rgba(41, 55, 30, .22), transparent); }
.ud-kare--foto img, .ud-kare--video video { object-fit: cover; }
.ud-kare[data-zoom] { cursor: zoom-in; }
.ud-kare.is-zoom img { transform: scale(2.1); }
.ud-kare--kes.is-zoom::after { opacity: 0; }
.ud-kare__not { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(41, 55, 30, .82); color: #fff; font-size: .82rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ud-galeri__etiket { position: absolute; z-index: 3; left: 0; top: 22px; padding: 7px 14px 7px 16px; background: var(--zeytin); color: #fff; font-size: .76rem; font-weight: 600; letter-spacing: .03em; }
.ud-galeri__araclar { position: absolute; z-index: 3; right: 16px; top: 16px; display: grid; gap: 10px; }
.ud-galeri__araclar .kart__ikon { position: static; width: 46px; height: 46px; }
.ud-galeri__ipucu { position: absolute; z-index: 3; left: 1.25rem; bottom: 1.1rem; display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--metin-ikincil); transition: opacity .3s; }
.ud-galeri__ipucu .ikon { width: 17px; height: 17px; }
.ud-galeri__sahne.is-video .ud-galeri__ipucu, .ud-galeri__sahne.is-zoomda .ud-galeri__ipucu { opacity: 0; }
.ud-galeri__sayac { display: none; position: absolute; z-index: 3; right: 16px; bottom: 16px; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .78rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.ud-galeri__sayac b { color: var(--gece); }
.ud-galeri__ok {
  position: absolute; z-index: 3; top: 50%; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--zeytin); border: 1px solid rgba(41, 55, 30, .12); box-shadow: 0 6px 16px -8px rgba(41, 55, 30, .45);
  opacity: 0; transition: opacity .3s, transform .3s var(--egri);
}
.ud-galeri__ok--geri { left: 16px; } .ud-galeri__ok--ileri { right: 16px; }
.ud-galeri__sahne:hover .ud-galeri__ok, .ud-galeri__ok:focus-visible { opacity: 1; }
.ud-galeri__ok:hover { transform: scale(1.06); }
.ud-galeri__sahne.is-zoomda .ud-galeri__ok { opacity: 0; }

/* ---- bilgi ---- */
.ud-bilgi { display: grid; gap: 1.25rem; min-width: 0; }
/* başlıktan seçeneklere kadar: satın alma kartıyla aynı beyaz kart */
.ud-kunye {
  display: grid; gap: 1.25rem; min-width: 0; padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 20px; background: #fff; border: 1px solid #ECEBE4;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -36px rgba(41, 55, 30, .5);
}
@media (max-width: 639px) { .ud-kunye { padding: 1.25rem 1.1rem 1.1rem; border-radius: 18px; } }
.ud-bilgi__tur { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 600; color: var(--yaprak); text-decoration: none; }
.ud-bilgi__tur::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ud-bilgi__tur:hover { color: var(--zeytin); }
.ud-bilgi__baslik { margin-top: -.6rem; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); line-height: 1.08; color: var(--zeytin); }
.ud-bilgi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; font-size: var(--t-kucuk); color: var(--metin-ikincil); }
.ud-bilgi__puan { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.ud-bilgi__puan:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.ud-bilgi__kod b { color: var(--gece); font-weight: 600; letter-spacing: .02em; }
.ud-cipler { display: flex; flex-wrap: wrap; gap: .5rem; }
.ud-cipler li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem .45rem .7rem; border-radius: 999px; background: #F2F0E4; color: var(--zeytin); font-size: .84rem; font-weight: 600; }
.ud-cipler .ikon { width: 17px; height: 17px; color: var(--yaprak); stroke-width: 1.7; }
.ud-cipler .ikon use[href="#i-yaprak"] { fill: currentColor; }

/* satın alma kartı */
.ud-satin { display: grid; gap: 1.1rem; padding: 1.5rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -36px rgba(41, 55, 30, .5); }
.ud-satin__fiyat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ud-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.ud-fiyat__tutar { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 700; line-height: 1; color: #6E5B12; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ud-fiyat .fiyat__eski { font-size: 1rem; }
.ud-stok { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--yaprak); }
.ud-stok i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ud-stok i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: .4; animation: stokNabiz 2.4s ease-out infinite; }
@keyframes stokNabiz { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.ud-stok.is-yok { color: var(--indirim); }
.ud-stok.is-yok i::after { display: none; }

.ud-kargo { display: grid; gap: .55rem; padding: .85rem 1rem; border-radius: 12px; background: #F6F5EE; }
.ud-kargo__yazi { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: #3C4650; }
.ud-kargo__yazi .ikon { flex: none; width: 20px; height: 20px; color: var(--yaprak); }
.ud-kargo__yazi b { color: var(--zeytin); }
.ud-kargo__cizgi { position: relative; height: 4px; border-radius: 4px; background: #E3E1D5; overflow: hidden; }
.ud-kargo__cizgi i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yaprak), var(--yag)); transition: width .6s var(--egri); }
.ud-kargo.is-tamam .ud-kargo__yazi b { color: var(--yaprak); }

.ud-satin__eylem { display: flex; gap: .6rem; }
.ud-adet { flex: none; display: flex; align-items: center; height: 56px; padding: 0 5px; border-radius: 999px; border: 1px solid rgba(41, 55, 30, .22); background: #fff; }
.ud-adet button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--zeytin); transition: background .25s; }
.ud-adet button:hover { background: #F2F0E4; }
.ud-adet button:disabled { opacity: .35; cursor: default; background: none; }
.ud-adet .ikon { width: 18px; height: 18px; stroke-width: 1.8; }
.ud-adet input { width: 34px; height: 100%; border: 0; background: none; text-align: center; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ud-adet input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ud-adet input:focus { outline: none; }
.ud-adet:focus-within { border-color: var(--zeytin); }
.ud-satin__sepet { flex: 1; padding: 0; min-width: 0; }
/* dolu kapsül: zeytin zemin, yağ rengi çanta yuvası */
.ud-satin__sepet .dugme { min-height: 56px; padding-left: 26px; background: var(--zeytin); color: #fff; border-color: var(--zeytin); font-size: 1rem; }
.ud-satin__sepet .dugme::before { background: var(--zeytin-2); }
.ud-satin__sepet .dugme::after {
  width: 44px; height: 44px;
  background: var(--yag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329371E' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 8.5h14l-1 12H6l-1-12Z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3Cpath d='M12 12v5M9.5 14.5h5'/%3E%3C/svg%3E") center / 21px no-repeat;
}
.ud-satin__sepet .dugme:hover { background: var(--zeytin); }
.ud-satin__sepet .dugme:disabled { opacity: .5; cursor: not-allowed; }
.ud-hemen {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; border-radius: 999px;
  border: 1px solid rgba(41, 55, 30, .28); color: var(--zeytin); font-weight: 700; text-decoration: none; transition: color .45s var(--egri), border-color .45s;
}
.ud-hemen::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #F2F0E4; transform: scaleX(0); transform-origin: right; transition: transform .55s cubic-bezier(.65, 0, .25, 1); }
.ud-hemen:hover { border-color: var(--zeytin); }
.ud-hemen:hover::before { transform: scaleX(1); transform-origin: left; }
.ud-hemen .ikon { width: 18px; height: 18px; transition: transform .45s var(--egri); }
.ud-hemen:hover .ikon { transform: translateX(4px); }
.ud-satin__alt { display: flex; justify-content: center; gap: 1.75rem; }
.ud-mini { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--metin-ikincil); transition: color .25s; }
.ud-mini .ikon { width: 17px; height: 17px; }
.ud-mini:hover, .ud-mini[aria-pressed="true"] { color: var(--zeytin); }

/* güvence: üç eş kutu (aynı genişlik, yükseklik ve metin uzunluğu) */
.ud-guven { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .9rem; margin-left: 100px; }
.ud-guven li {
  display: grid; align-content: start; gap: .3rem; padding: 1.25rem 1.2rem;
  border-radius: 16px; background: #fff; border: 1px solid #ECEBE4;
  box-shadow: 0 1px 2px rgba(41, 55, 30, .04), 0 16px 32px -28px rgba(41, 55, 30, .45);
}
.ud-guven .ikon { width: 26px; height: 26px; margin-bottom: .45rem; color: var(--yaprak); stroke-width: 1.5; }
.ud-guven b { font-size: .95rem; color: var(--gece); white-space: nowrap; }
.ud-guven span { font-size: .82rem; line-height: 1.45; color: var(--metin-ikincil); }

/* ---- sekmeler + paneller ---- */
.ud-detay { padding-block: clamp(1rem, .5rem + 2vw, 2rem) clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ud-detay__sekmeler { width: fit-content; max-width: 100%; margin: 0 auto 1.75rem; }
.sekme__kisa { display: none; }
.sekme__say { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: .35rem; padding: 0 6px; border-radius: 999px; background: rgba(41, 55, 30, .08); font: 700 .72rem/1 var(--f-metin); vertical-align: 2px; }
.ud-panel { position: relative; padding: clamp(1.5rem, .75rem + 3vw, 3.5rem); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 30px 60px -44px rgba(41, 55, 30, .45); }
.ud-panel:focus-visible { outline: 2px solid var(--yaprak); outline-offset: 4px; }
.ud-panel:not([hidden]) { animation: panelGir .45s var(--egri) both; }
@keyframes panelGir { from { opacity: 0; transform: translateY(10px); } }
.ud-panel__baslik { font-size: var(--t-2); line-height: 1.15; color: var(--zeytin); }
.ud-panel__not { margin-top: 1.25rem; font-size: var(--t-mini); color: var(--metin-ikincil); }
.ud-kutu__bas { font-family: var(--f-baslik); font-size: 1.35rem; line-height: 1.2; color: var(--zeytin); }
.ud-capa { position: absolute; top: -140px; }

/* açıklama */
.ud-aciklama { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ud-aciklama__metin { display: grid; gap: 1rem; }
.ud-aciklama__metin p { max-width: 62ch; color: #3C4650; line-height: 1.75; }
.ud-aciklama__metin .ud-aciklama__giris { margin-top: .25rem; font-family: var(--f-baslik); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.5; color: var(--gece); }
.ud-tadim {
  position: relative; overflow: hidden; padding: 2rem; border-radius: 20px;
  background: linear-gradient(rgba(245, 243, 230, .9), rgba(245, 243, 230, .9)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 360px repeat, #F5F3E6;
}
.ud-tadim__bas { font-size: var(--t-kucuk); font-weight: 700; color: var(--yaprak); display: flex; align-items: center; gap: .6rem; }
.ud-tadim__bas::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ud-tadim__liste { display: grid; margin-top: 1rem; }
.ud-tadim__liste div { display: grid; gap: .15rem; padding: .95rem 0; border-bottom: 1px solid rgba(201, 184, 74, .45); }
.ud-tadim__liste div:last-child { border-bottom: 0; padding-bottom: 0; }
.ud-tadim__liste dt { font-size: .8rem; color: var(--metin-ikincil); }
.ud-tadim__liste dd { margin: 0; font-family: var(--f-baslik); font-size: 1.3rem; color: var(--zeytin); }

.ud-yol { counter-reset: yol; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0; }
.ud-yol li { position: relative; display: grid; gap: .45rem; align-content: start; }
.ud-yol li:not(:last-child)::after { content: ""; position: absolute; left: 58px; right: -1rem; top: 21px; border-top: 1px dashed rgba(41, 55, 30, .3); }
.ud-yol__no { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--yag); font-family: var(--f-baslik); font-size: 1.1rem; color: var(--zeytin); margin-bottom: .35rem; }
.ud-yol h3 { font-family: var(--f-baslik); font-size: 1.3rem; color: var(--zeytin); }
.ud-yol p { max-width: 30ch; font-size: .92rem; color: var(--metin-ikincil); }

.ud-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ud-kullan, .ud-sakla { padding: 1.75rem 2rem; border-radius: 20px; }
.ud-kullan { border: 1px solid #E6E4DA; }
.ud-kullan ul { display: grid; gap: .7rem; margin-top: 1rem; }
.ud-kullan li { display: flex; align-items: center; gap: .65rem; color: #3C4650; }
.ud-kullan .ikon { width: 20px; height: 20px; color: var(--yaprak); stroke-width: 2; }
.ud-sakla { position: relative; overflow: hidden; background: var(--zeytin); color: rgba(255, 255, 255, .86); }
.ud-sakla .ud-kutu__bas { color: #fff; }
.ud-sakla p { margin-top: .8rem; max-width: 40ch; line-height: 1.7; }
.ud-sakla > .ikon { position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; color: var(--yag); opacity: .22; stroke-width: 1; }

/* özellikler */
.ud-ozellik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 4rem); margin-top: 1.5rem; }
.ud-ozellik__satir { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px dashed #DAD8CC; }
.ud-ozellik__satir dt { font-size: .9rem; color: var(--metin-ikincil); }
.ud-ozellik__satir dd { margin: 0; text-align: right; font-weight: 600; color: var(--gece); }
.ud-teyit { display: inline-block; padding: .15rem .6rem; border-radius: 999px; border: 1px dashed rgba(29, 40, 53, .3); font-size: .75rem; font-weight: 500; color: var(--metin-ikincil); }

/* değerlendirmeler */
.ud-yorum { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
.ud-yorum__ozet { display: grid; gap: 1.25rem; align-content: start; }
.ud-yorum__puan { display: grid; justify-items: start; gap: .5rem; padding: 1.5rem; border-radius: 18px; background: #F6F5EE; }
.ud-yorum__puan b { font-family: var(--f-baslik); font-weight: 400; font-size: 3.4rem; line-height: 1; color: var(--zeytin); }
.ud-yorum__puan span:last-child { font-size: .88rem; color: var(--metin-ikincil); }
.ud-yorum__dagilim { display: grid; gap: .45rem; }
.ud-yorum__dagilim li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 20px; align-items: center; gap: .75rem; font-size: .82rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.ud-yorum__dagilim li span:last-child { text-align: right; }
.ud-yorum__cubuk { position: relative; height: 6px; border-radius: 6px; background: #ECEAE0; overflow: hidden; }
.ud-yorum__cubuk i { position: absolute; inset: 0 auto 0 0; background: #C9A227; border-radius: inherit; }
.ud-yorum__magaza { font-size: .85rem; color: var(--metin-ikincil); }
.ud-yorum__magaza b { color: var(--gece); }
.ud-yorum__magaza a { color: var(--zeytin); font-weight: 600; text-underline-offset: 3px; }
.ud-yorum__form { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 20px; border: 1px solid #E6E4DA; }
.ud-yorum__form .dugme, .ud-oneri .dugme { justify-self: start; border-radius: 999px; }
.ud-form__ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.alan textarea { width: 100%; padding: .8rem .95rem; background: #FBFBF8; border: 1px solid var(--cizgi-koyu); border-radius: 2px; font-size: 1rem; resize: vertical; transition: border-color var(--hiz); }
.alan textarea:focus { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin); }
.ud-yorum__form .alan input, .ud-yorum__form .alan textarea, .ud-oneri .alan textarea { border-radius: 12px; }
.alan.is-hata textarea { border-color: var(--indirim); }
.ud-puanla { margin: 0; padding: 0; border: 0; }
.ud-puanla legend { margin-bottom: .4rem; font-size: var(--t-kucuk); font-weight: 600; }
.ud-puanla__yildizlar { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.ud-puanla__yildizlar input { position: absolute; opacity: 0; pointer-events: none; }
.ud-puanla__yildizlar label {
  width: 34px; height: 34px; cursor: pointer; background: #DAD7CA;
  -webkit-mask: var(--yildiz-maske) center / 30px no-repeat; mask: var(--yildiz-maske) center / 30px no-repeat;
  --yildiz-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2l2.05 4.3 4.7.6-3.45 3.25.87 4.65L8 11.72 3.83 14l.87-4.65L1.25 6.1l4.7-.6z'/%3E%3C/svg%3E");
  transition: background .2s, transform .2s var(--egri);
}
.ud-puanla__yildizlar label:hover, .ud-puanla__yildizlar label:hover ~ label, .ud-puanla__yildizlar input:checked ~ label { background: #C9A227; }
.ud-puanla__yildizlar label:hover { transform: scale(1.12); }
.ud-puanla__yildizlar input:focus-visible + label { outline: 2px solid var(--yaprak); outline-offset: 2px; border-radius: 4px; }
.ud-form__tamam { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; border-radius: 12px; background: #EEF3EE; color: var(--yaprak); font-weight: 600; font-size: .92rem; }
.ud-form__tamam .ikon { width: 20px; height: 20px; stroke-width: 2.2; }

/* önerileriniz */
.ud-oneri { display: grid; gap: 1.25rem; max-width: 860px; }
.ud-oneri__bas p { margin-top: .6rem; color: var(--metin-ikincil); max-width: 60ch; }
.ud-oneri__secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ud-oneri__sec, .ud-set__sec { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.ud-oneri__sec { height: 100%; padding: .95rem 1.1rem; border-radius: 14px; border: 1px solid #E4E2D7; font-size: .92rem; color: #3C4650; transition: border-color .25s, background .25s; }
.ud-oneri__sec:hover { border-color: rgba(41, 55, 30, .4); }
.ud-oneri__sec input, .ud-set__sec input { position: absolute; opacity: 0; pointer-events: none; }
.ud-oneri__sec input:checked + .fsecim__kutu, .ud-set__sec input:checked + .fsecim__kutu { background: var(--zeytin); border-color: var(--zeytin); }
.ud-oneri__sec input:checked + .fsecim__kutu::after, .ud-set__sec input:checked + .fsecim__kutu::after { transform: rotate(45deg) scale(1); }
.ud-oneri__sec input:focus-visible + .fsecim__kutu, .ud-set__sec input:focus-visible + .fsecim__kutu { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.ud-oneri__sec:has(input:checked) { border-color: var(--zeytin); background: #FBFAF3; }
.ud-istege { font-weight: 400; color: var(--metin-ikincil); }

/* ---- birlikte iyi gider ---- */
.ud-set { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); background: #fff; }
.ud-bolum-bas { display: grid; gap: .6rem; margin-bottom: 2rem; }
.ud-bolum-bas__baslik { font-size: var(--t-1); line-height: 1.05; color: var(--zeytin); }
.ud-bolum-bas p { color: var(--metin-ikincil); }
.ud-bolum-bas--yan { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ud-set__ic { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: center; }
.ud-set__liste { display: flex; align-items: stretch; gap: .75rem; }
.ud-set__oge { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; background: #F8F7F2; overflow: hidden; transition: opacity .35s, filter .35s; }
.ud-set__oge.is-disarida { opacity: .55; filter: grayscale(.6); }
.ud-set__gorsel { display: block; aspect-ratio: 1; margin: 10px 10px 0; border-radius: 12px; background: #fff; overflow: hidden; }
.ud-set__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform .6s var(--egri); }
.ud-set__oge:hover .ud-set__gorsel img { transform: scale(1.05); }
.ud-set__gorsel--foto img { object-fit: cover; padding: 0; }
.ud-set__bilgi { display: grid; gap: .2rem; align-content: start; padding: 1rem 1.1rem 1.1rem; }
.ud-set__ad { font-size: 1.05rem; line-height: 1.25; color: var(--gece); }
.ud-set__boy { font-size: .8rem; color: var(--metin-ikincil); }
.ud-set__fiyat { margin: .35rem 0 .5rem; font-weight: 700; color: #6E5B12; font-variant-numeric: tabular-nums; }
.ud-set__bu, .ud-set__sec { font-size: .82rem; font-weight: 700; color: var(--zeytin); }
.ud-set__bu { display: inline-flex; align-items: center; gap: .45rem; }
.ud-set__bu .ikon { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: var(--zeytin); color: #fff; stroke-width: 2.4; }
.ud-set__arti { flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E0DED2; font-size: 1.2rem; color: var(--metin-ikincil); }
.ud-set__toplam { position: relative; overflow: hidden; display: grid; gap: .5rem; padding: 1.75rem; border-radius: 22px; background: var(--zeytin); color: #fff; box-shadow: 0 30px 50px -30px rgba(41, 55, 30, .8); }
.ud-set__toplam::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(201, 184, 74, .35); }
.ud-set__adet { font-size: .85rem; color: rgba(255, 255, 255, .72); }
.ud-set__tutar { font-size: 2.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ud-set__dugme { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; margin-top: .75rem; border-radius: 999px; background: var(--yag); color: var(--zeytin); font-weight: 700; transition: background .3s, transform .3s var(--egri); }
.ud-set__dugme:hover { background: #D6C65C; transform: translateY(-1px); }
.ud-set__dugme .ikon { width: 20px; height: 20px; }
.ud-set__dugme.is-eklendi { background: #fff; }

/* ---- benzer ürünler ---- */
.ud-benzer { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ud-benzer .ray__alt { justify-content: center; }
/* footer kubbesi masaüstünde ~230px yukarı taşar; son bölüm ona yer bırakır */
@media (min-width: 768px) { .ud-benzer, .kat-liste { padding-bottom: calc(var(--bolum) + 200px); } }

/* ---- duyarlı ---- */
@media (max-width: 1199px) {
  .ud-set__ic { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .ud-ust__ic { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeri" "bilgi" "guven"; grid-template-rows: none; }
  .ud-guven { margin-left: 0; }
  .ud-galeri { grid-template-columns: minmax(0, 1fr); }
  .ud-galeri__kucukler { order: 2; display: flex; gap: .6rem; }
  .ud-kucuk { width: 68px; border-radius: 12px; }
  .ud-galeri__ipucu { display: none; }
  .ud-galeri__sayac { display: block; }
  .ud-galeri__ok { opacity: 1; width: 40px; height: 40px; margin-top: -20px; }
  .ud-galeri__ok--geri { left: 10px; } .ud-galeri__ok--ileri { right: 10px; }
  .ud-aciklama, .ud-yorum { grid-template-columns: minmax(0, 1fr); }
  .ud-ozellik { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .ud-guven { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .ud-guven li { grid-template-columns: 26px minmax(0, 1fr); column-gap: .9rem; row-gap: .15rem; align-items: center; padding: 1rem 1.1rem; }
  .ud-guven .ikon { grid-row: 1 / 3; margin: 0; }
  .kat-yol li:last-child span { max-width: 22ch; }
  .ud-galeri__sahne { border-radius: 18px; }
  .ud-galeri__araclar { right: 10px; top: 10px; }
  .ud-galeri__araclar .kart__ikon { width: 40px; height: 40px; }
  .ud-galeri__etiket { top: 14px; font-size: .7rem; }
  .ud-satin { padding: 1.1rem; border-radius: 18px; }
  .ud-satin__eylem { gap: .5rem; }
  .ud-adet { height: 52px; }
  .ud-adet button { width: 36px; height: 36px; }
  .ud-satin__sepet .dugme { min-height: 52px; padding-left: 18px; font-size: .92rem; }
  .ud-satin__sepet .dugme::after { width: 40px; height: 40px; }
  .ud-panel { border-radius: 18px; }
  .ud-detay__sekmeler { width: 100%; }
  .ud-detay .sekme-liste { justify-content: space-between; }
  .ud-detay .sekme { padding: .5rem .55rem; font-size: .95rem; }
  .ud-detay .sekme__say { display: none; }
  .sekme__uzun { display: none; } .sekme__kisa { display: inline; }
  .ud-yol { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ud-yol li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 1rem; }
  .ud-yol__no { grid-row: 1 / 3; margin: 0; }
  .ud-yol li:not(:last-child)::after { left: 21px; right: auto; top: 50px; bottom: -1.25rem; border-top: 0; border-left: 1px dashed rgba(41, 55, 30, .3); }
  .ud-ikili, .ud-form__ikili, .ud-oneri__secenekler { grid-template-columns: minmax(0, 1fr); }
  .ud-kullan, .ud-sakla { padding: 1.4rem; }
  .ud-tadim { padding: 1.5rem; }
  .ud-set__liste { flex-direction: column; }
  .ud-set__oge { grid-template-rows: none; grid-template-columns: 110px minmax(0, 1fr); }
  .ud-set__gorsel { margin: 10px 0 10px 10px; }
  .ud-set__arti { align-self: center; margin-block: -.35rem; }
  .ud-bolum-bas--yan .ray__oklar { display: none; }
}


/* 28  Sepet sayfası -----------------------------------------------------------
   Zeytin başlık bandı + 3 adım; solda kargo çizgisi, ürün satırları, kupon/not açılırları;
   sağda sipariş özeti ve yardım kartı. Boş sepet ayrı durum. */
.sp-bas {
  position: relative; overflow: hidden; color: #fff;
  padding-block: 1.25rem clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(201, 184, 74, .16), transparent 55%),
    linear-gradient(rgba(41, 55, 30, .94), rgba(41, 55, 30, .94)),
    url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat,
    var(--zeytin);
  border-bottom: 3px solid var(--yag);
}
.kat-yol--acik ol { color: rgba(255, 255, 255, .62); }
.kat-yol--acik a:hover { color: #fff; }
.kat-yol--acik [aria-current] { color: #fff; }
.sp-bas__ic { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.sp-bas__ust { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 700; color: var(--yag); }
.sp-bas__ust::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sp-bas__baslik { margin: .4rem 0 .6rem; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1; }
.sp-bas__metin { max-width: 52ch; color: rgba(255, 255, 255, .78); font-size: .95rem; line-height: 1.6; }
.sp-adimlar { display: flex; align-items: flex-start; }
.sp-adimlar li { position: relative; display: grid; justify-items: center; gap: .5rem; width: 118px; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .6); text-align: center; }
.sp-adimlar li + li::before { content: ""; position: absolute; top: 17px; right: calc(50% + 24px); width: calc(100% - 48px); height: 1px; background: rgba(255, 255, 255, .28); }
.sp-adimlar span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); font-family: var(--f-baslik); font-size: 1rem; color: #fff; }
.sp-adimlar .is-aktif { color: #fff; }
.sp-adimlar .is-aktif span { background: var(--yag); border-color: var(--yag); color: var(--zeytin); box-shadow: 0 0 0 6px rgba(201, 184, 74, .2); }

.sp-govde { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.sp-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.sp-dolu { display: grid; gap: 1rem; }
.sp-kart, .sp-ozet, .sp-bos, .sp-kargo, .sp-ek, .sp-yardim { background: #fff; border: 1px solid #ECEBE4; border-radius: 20px; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -40px rgba(41, 55, 30, .5); }

/* kargo çizgisi */
.sp-kargo { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.sp-kargo__ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F2F0E4; color: var(--yaprak); }
.sp-kargo__ikon .ikon { width: 22px; height: 22px; }
.sp-kargo__ic { flex: 1; display: grid; gap: .5rem; font-size: .9rem; color: #3C4650; }
.sp-kargo__ic b { color: var(--zeytin); }
.sp-kargo__cizgi { position: relative; height: 5px; border-radius: 5px; background: #ECEAE0; overflow: hidden; }
.sp-kargo__cizgi i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yaprak), var(--yag)); transition: width .6s var(--egri); }
.sp-kargo.is-tamam .sp-kargo__ikon { background: var(--yaprak); color: #fff; }

/* ürün listesi */
.sp-kart { padding: .5rem 1.5rem; }
.sp-kart__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #ECEBE4; }
.sp-kart__baslik { font-family: var(--f-baslik); font-weight: 400; font-size: 1.45rem; color: var(--zeytin); }
.sp-kart__baslik span { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: .35rem; padding: 0 7px; border-radius: 999px; background: #F2F0E4; font: 700 .78rem/1 var(--f-metin); vertical-align: 4px; }
.sp-bosalt { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--metin-ikincil); transition: color .25s; }
.sp-bosalt .ikon { width: 17px; height: 17px; }
.sp-bosalt:hover { color: var(--indirim); }
.sp-satir { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 120px 40px; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid #F0EFE8; transition: opacity .3s, transform .3s var(--egri); }
.sp-satir:last-child { border-bottom: 0; }
.sp-satir.is-cikiyor { opacity: 0; transform: translateX(20px); }
.sp-satir__gorsel { position: relative; display: block; width: 96px; aspect-ratio: 1; border-radius: 14px; background: #FAFAF6; overflow: hidden; }
.sp-satir__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sp-satir__gorsel.is-foto img { object-fit: cover; padding: 0; }
.sp-satir__bilgi { display: grid; gap: .15rem; min-width: 0; }
.sp-satir__ad { font-family: var(--f-baslik); font-size: 1.12rem; line-height: 1.25; color: var(--gece); text-decoration: none; }
.sp-satir__ad:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.sp-satir__boy { font-size: .82rem; color: var(--metin-ikincil); }
.sp-satir__birim { font-size: .82rem; color: var(--metin-ikincil); font-variant-numeric: tabular-nums; }
.sp-adet { height: 46px; }
.sp-adet button { width: 36px; height: 36px; }
.sp-satir__tutar { text-align: right; font-weight: 700; font-size: 1.05rem; color: #6E5B12; font-variant-numeric: tabular-nums; }
.sp-satir__sil { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--metin-ikincil); border: 1px solid transparent; transition: color .25s, border-color .25s, background .25s; }
.sp-satir__sil:hover { color: var(--indirim); border-color: rgba(154, 59, 46, .3); background: #FBF1EE; }
.sp-satir__sil .ikon { width: 16px; height: 16px; }

/* kupon + not */
.sp-ekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sp-ek { border-radius: 16px; }
.sp-ek summary { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; color: var(--gece); }
.sp-ek summary::-webkit-details-marker { display: none; }
.sp-ek summary span { flex: 1; }
.sp-ek summary .ikon { width: 19px; height: 19px; color: var(--yaprak); }
.sp-ek summary .ikon:last-child { color: var(--metin-ikincil); transition: transform .35s var(--egri); }
.sp-ek[open] summary .ikon:last-child { transform: rotate(180deg); }
.sp-ek__ic { padding: 0 1.2rem 1.1rem; }
.sp-kupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.sp-kupon input, .sp-ek textarea { width: 100%; border-radius: 12px; border: 1px solid #DEDCD0; background: #FAFAF6; font-size: .95rem; }
.sp-kupon input { height: 46px; padding: 0 .9rem; text-transform: uppercase; letter-spacing: .04em; }
.sp-kupon input:focus, .sp-ek textarea:focus { outline: none; border-color: var(--zeytin); background: #fff; }
.sp-kupon button { height: 46px; padding: 0 1.2rem; border-radius: 12px; background: var(--zeytin); color: #fff; font-weight: 700; font-size: .88rem; }
.sp-ek__mesaj { grid-column: 1 / -1; font-size: .82rem; font-weight: 600; color: var(--indirim); }
.sp-ek__mesaj:empty { display: none; }
.sp-ek textarea { padding: .75rem .9rem; resize: vertical; }
.sp-ek__sayac { margin-top: .3rem; text-align: right; font-size: .75rem; color: var(--metin-ikincil); }
.sp-devam { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; font-weight: 600; font-size: .9rem; color: var(--zeytin); text-decoration: none; }
.sp-devam .ikon { width: 18px; height: 18px; transition: transform .35s var(--egri); }
.sp-devam:hover .ikon { transform: translateX(-4px); }

/* boş sepet */
.sp-bos { display: grid; justify-items: center; gap: .6rem; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem; text-align: center; }
.sp-bos__ikon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: .5rem; border-radius: 50%; background: #F2F0E4; color: var(--zeytin); box-shadow: 0 0 0 12px rgba(242, 240, 228, .5); }
.sp-bos__ikon .ikon { width: 34px; height: 34px; stroke-width: 1.4; }
.sp-bos__baslik { font-family: var(--f-baslik); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); color: var(--zeytin); }
.sp-bos p { max-width: 44ch; color: var(--metin-ikincil); }
.sp-bos__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.sp-bos__dugmeler .uye__dugme { width: auto; padding: 0 1.6rem; }

/* özet */
.sp-yan { display: grid; gap: 1rem; }
.sp-ozet { display: grid; gap: 1.1rem; padding: 1.6rem; }
.sp-ozet__baslik { font-family: var(--f-baslik); font-weight: 400; font-size: 1.45rem; color: var(--zeytin); }
.sp-ozet__liste { display: grid; gap: .7rem; padding-bottom: 1.1rem; border-bottom: 1px dashed #DAD8CC; }
.sp-ozet__liste div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: #3C4650; }
.sp-ozet__liste dt span { color: var(--metin-ikincil); }
.sp-ozet__liste dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sp-ozet__liste dd.is-ucretsiz { color: var(--yaprak); }
.sp-ozet__liste dd.is-sonra { font-weight: 500; color: var(--metin-ikincil); font-size: .85rem; }
.sp-ozet__toplam { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sp-ozet__toplam span { font-weight: 700; color: var(--gece); }
.sp-ozet__toplam b { font-size: 1.9rem; color: #6E5B12; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sp-ozet__dugme { min-height: 58px; font-size: 1.02rem; }
.sp-ozet__guven { display: grid; gap: .45rem; }
.sp-ozet__guven li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--metin-ikincil); }
.sp-ozet__guven .ikon { width: 18px; height: 18px; color: var(--yaprak); }
.sp-ozet__logolar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-top: .9rem; border-top: 1px solid #ECEBE4; }
.sp-ozet__logolar img { height: 22px; width: auto; }
.sp-yardim { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; text-decoration: none; font-size: .84rem; color: var(--metin-ikincil); transition: border-color .3s; }
.sp-yardim:hover { border-color: var(--zeytin); }
.sp-yardim b { display: block; font-size: .92rem; color: var(--gece); }
.sp-yardim i { font-style: normal; white-space: nowrap; }
.sp-yardim__ikon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #E0DED2; color: var(--zeytin); }
.sp-yardim__ikon .ikon { width: 19px; height: 19px; }
.sp-oneri { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

@media (max-width: 1099px) {
  .sp-duzen { grid-template-columns: minmax(0, 1fr); }
  .sp-yan { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sp-adimlar { width: 100%; justify-content: space-between; }
  .sp-adimlar li { width: 33%; }
  .sp-kart { padding: .25rem 1rem; }
  /* görsel solda iki satır boyu; sağda ad/boy + sil, altında adet (sol) ve tutar (sağ) aynı hücrede */
  .sp-satir { grid-template-columns: 76px minmax(0, 1fr) 34px; grid-template-areas: "g b s" "g a a"; gap: .6rem .9rem; align-items: start; }
  .sp-satir__gorsel { grid-area: g; width: 76px; }
  .sp-satir__bilgi { grid-area: b; }
  .sp-satir__sil { grid-area: s; width: 34px; height: 34px; margin-top: -4px; }
  .sp-adet { grid-area: a; justify-self: start; height: 42px; }
  .sp-adet button { width: 32px; height: 32px; }
  .sp-satir__tutar { grid-area: a; align-self: center; justify-self: end; }
  .sp-satir__ad { font-size: 1.02rem; }
  .sp-ekler { grid-template-columns: minmax(0, 1fr); }
  .sp-ozet { padding: 1.25rem; }
}


/* 29  Favorilerim + Karşılaştır ------------------------------------------------
   Sepet sayfasının başlık bandı (sağda sayaç), beyaz araç kartı, kart ızgarası /
   karşılaştırma tablosu. Boş durumlar sepetteki .sp-bos'u kullanır. */
.sp-bas__sayac { display: flex; align-items: baseline; gap: .5rem; padding: .9rem 1.4rem; border-radius: 18px; border: 1px solid rgba(201, 184, 74, .45); background: rgba(255, 255, 255, .06); }
.sp-bas__sayac b { font-family: var(--f-baslik); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--yag); font-variant-numeric: tabular-nums; }
.sp-bas__sayac span { font-size: .9rem; color: rgba(255, 255, 255, .78); }

.ls-dolu { display: grid; gap: 1.25rem; }
.ls-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: .85rem .85rem .85rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 20px 40px -36px rgba(41, 55, 30, .5); }
.ls-arac__ozet { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--metin-ikincil); }
.ls-arac__ozet b { color: var(--gece); font-variant-numeric: tabular-nums; }
.ls-arac__ozet b[data-ls-toplam] { color: #6E5B12; }
.ls-arac__ayrac { width: 4px; height: 4px; border-radius: 50%; background: #CFCDC0; }
.ls-arac__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.ls-arac__ana { width: auto; min-height: 48px; padding: 0 1.4rem 0 1.1rem; font-size: .9rem; }
.ls-arac__ana .ikon { width: 20px; height: 20px; padding: 0; background: none; color: var(--yag); }
.ls-arac__ana:hover .ikon { transform: none; }
.ls-fark { align-items: center; font-weight: 600; }

/* favori ızgarası: 4 sütun, kart anasayfa vitrin kartı */
.ls-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-kart.is-cikiyor { opacity: 0; transform: scale(.96); transition: opacity .3s, transform .3s var(--egri); }
.ls-kaldir:hover { color: var(--indirim); border-color: rgba(154, 59, 46, .4); }
.ls-kart .kart__fiyat--yok { color: var(--indirim); }

/* karşılaştırma tablosu: sol sütun özellik adları, 4 ürün yuvası */
.kr-kutu { overflow-x: auto; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -40px rgba(41, 55, 30, .5); scrollbar-width: thin; }
.kr-tablo { display: grid; grid-template-columns: 180px repeat(4, minmax(200px, 1fr)); min-width: 980px; }
.kr-satir { display: contents; }
.kr-satir > * { padding: 1rem 1.25rem; border-bottom: 1px solid #F0EFE8; }
.kr-satir > * + * { border-left: 1px solid #F0EFE8; }
.kr-satir:last-child > * { border-bottom: 0; }
.kr-satir.is-ayni.is-gizli { display: none; }
.kr-etiket { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; background: #FAFAF6; font-size: .85rem; font-weight: 700; color: var(--gece); }
.kr-deger { display: flex; align-items: center; font-size: .92rem; color: #3C4650; }
.kr-deger.is-bos { color: #A3A9AE; }
.kr-deger .fiyat { font-weight: 700; font-size: 1.1rem; color: #6E5B12; font-variant-numeric: tabular-nums; }
.kr-deger .fiyat__eski { margin-left: .5rem; }
.kr-evet { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--yaprak); }
.kr-evet .ikon { width: 17px; height: 17px; stroke-width: 2.2; }
.kr-yok { color: var(--indirim); font-weight: 600; }
.kr-satir:not(.kr-urunler):hover > * { background: #FBFBF7; }
.kr-satir:not(.kr-urunler):hover > .kr-etiket { background: #F4F3EC; }
/* ürün başlık satırı */
.kr-urunler > * { padding: 1.25rem; vertical-align: top; }
.kr-urunler .kr-etiket { align-items: flex-start; font-family: var(--f-baslik); font-weight: 400; font-size: 1.25rem; color: var(--zeytin); }
.kr-urun { position: relative; display: grid; gap: .5rem; align-content: start; }
.kr-urun__gorsel { display: block; aspect-ratio: 1; border-radius: 14px; background: #FAFAF6; overflow: hidden; }
.kr-urun__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 12%; transition: transform .6s var(--egri); }
.kr-urun__gorsel.is-foto img { object-fit: cover; padding: 0; }
.kr-urun:hover .kr-urun__gorsel img { transform: scale(1.05); }
.kr-urun__ad { font-family: var(--f-baslik); font-size: 1.08rem; line-height: 1.25; color: var(--gece); text-decoration: none; }
.kr-urun__ad:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.kr-urun .kart__eylem { padding: .25rem 0 0; }
.kr-urun .kart__eylem .dugme { min-height: 46px; padding-left: 16px; font-size: .82rem; }
.kr-urun .kart__eylem .dugme::after { width: 36px; height: 36px; background-size: 18px; }
.kr-kaldir { position: absolute; z-index: 2; right: 8px; top: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--metin-ikincil); border: 1px solid #E6E4DA; box-shadow: 0 4px 10px -4px rgba(41, 55, 30, .3); transition: color .25s, border-color .25s, transform .25s var(--egri); }
.kr-kaldir:hover { color: var(--indirim); border-color: rgba(154, 59, 46, .4); transform: scale(1.08); }
.kr-kaldir .ikon { width: 15px; height: 15px; }
.kr-yuva { display: grid; place-items: center; align-content: center; gap: .6rem; min-height: 100%; border: 1.5px dashed #DAD8CC; border-radius: 14px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--metin-ikincil); text-decoration: none; transition: border-color .3s, color .3s, background .3s; }
.kr-urunler .kr-yuva-kap { padding: 1.25rem; }
.kr-yuva span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #DAD8CC; }
.kr-yuva .ikon { width: 18px; height: 18px; }
.kr-yuva:hover { border-color: var(--zeytin); color: var(--zeytin); background: #FBFAF3; }
.kr-not { display: none; font-size: .8rem; color: var(--metin-ikincil); text-align: center; }

@media (max-width: 1099px) {
  .ls-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kr-not { display: block; }
}
@media (max-width: 767px) {
  .ls-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-bas__sayac { padding: .6rem 1rem; }
  .sp-bas__sayac b { font-size: 2rem; }
  .ls-arac { padding: .85rem 1rem; }
  .ls-arac__dugmeler { width: 100%; justify-content: space-between; }
  .kr-tablo { grid-template-columns: 112px repeat(4, 168px); min-width: 0; width: max-content; }
  .kr-satir > * { padding: .8rem .85rem; }
  .kr-urunler > *, .kr-urunler .kr-yuva-kap { padding: .85rem; }
  .kr-etiket { font-size: .78rem; }
  .kr-urunler .kr-etiket { font-size: 1.05rem; }
  .kr-deger { font-size: .84rem; }
  .kr-urun__ad { font-size: .98rem; }
}


/* 30  Hesabım (üye paneli) -----------------------------------------------------
   Sepetin zeytin bandı (avatar + selamlama + güvenli çıkış); solda gruplu menü kartı,
   sağda panel. Paneller beyaz kartlardan kurulur; mobilde menü açılır listeye döner. */
.hs-bas__kim { display: flex; align-items: center; gap: 1.25rem; }
.hs-avatar { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--yag); color: var(--zeytin); font-family: var(--f-baslik); font-size: 1.7rem; box-shadow: 0 0 0 6px rgba(201, 184, 74, .2); }
.hs-bas .sp-bas__baslik { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.hs-cikis { display: inline-flex; align-items: center; gap: .5rem; height: 46px; padding: 0 1.2rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 600; font-size: .88rem; transition: background .3s, border-color .3s; }
.hs-cikis:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.hs-cikis .ikon { width: 18px; height: 18px; }

/* footer kubbesi masaüstünde ~230px yukarı taşar: son bölüm ona yer bırakır */
@media (min-width: 768px) { .hs > .sp-govde { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + 220px); } }
.hs-duzen { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.hs-kart, .hs-menu { background: #fff; border: 1px solid #ECEBE4; border-radius: 20px; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -40px rgba(41, 55, 30, .5); }

/* ---- menü ---- */
.hs-menu { padding: .75rem; }
.hs-menu__ac { display: none; }
.hs-menu__liste { display: grid; gap: .25rem; }
.hs-menu__grup p { padding: .9rem .9rem .35rem; font-size: .74rem; font-weight: 700; color: var(--yaprak); }
.hs-menu__grup:first-child p { padding-top: .4rem; }
.hs-menu__grup ul { display: grid; gap: 2px; }
.hs-menu__oge { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: 0 .9rem; border-radius: 12px; font-size: .92rem; font-weight: 500; color: #3C4650; text-align: left; text-decoration: none; transition: background .25s, color .25s; }
.hs-menu__oge .ikon { flex: none; width: 20px; height: 20px; color: var(--metin-ikincil); transition: color .25s; }
.hs-menu__oge span:first-of-type { flex: 1; }
.hs-menu__oge:hover { background: #F6F5EE; color: var(--zeytin); }
.hs-menu__oge[aria-current="page"] { background: var(--zeytin); color: #fff; font-weight: 600; }
.hs-menu__oge[aria-current="page"] .ikon { color: var(--yag); }
.hs-menu__say { flex: none; min-width: 24px; height: 22px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; background: #F2F0E4; font-size: .72rem; font-weight: 700; color: var(--zeytin); }
.hs-menu__oge[aria-current="page"] .hs-menu__say { background: var(--yag); }
.hs-menu__cikis { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #ECEBE4; }
.hs-menu__cikis .hs-menu__oge:hover { background: #FBF1EE; color: var(--indirim); }
.hs-menu__cikis .hs-menu__oge:hover .ikon { color: var(--indirim); }

/* ---- panel ortak ---- */
.hs-paneller { min-width: 0; }
.hs-panel { display: grid; gap: 1.25rem; }
.hs-panel:focus { outline: none; }
.hs-panel:not([hidden]) { animation: panelGir .4s var(--egri) both; }
.hs-panel__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.hs-panel__bas h2 { font-size: var(--t-2); line-height: 1.1; color: var(--zeytin); }
.hs-panel__bas p { margin-top: .4rem; max-width: 60ch; font-size: .92rem; color: var(--metin-ikincil); }
.hs-panel__bas a, .hs-kart a:not([class]) { color: var(--zeytin); font-weight: 600; text-underline-offset: 3px; }
.hs-kart { padding: clamp(1.1rem, .8rem + 1vw, 1.6rem); }
.hs-kart__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.1rem; }
.hs-kart__bas h3 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.35rem; color: var(--zeytin); }
.hs-kart__bas p { flex-basis: 100%; font-size: .85rem; color: var(--metin-ikincil); }
.hs-dugme {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 1.25rem; border-radius: 999px; background: var(--zeytin); color: #fff; border: 1px solid var(--zeytin);
  font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: color .35s;
}
.hs-dugme::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--zeytin-2); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.65, 0, .25, 1); }
.hs-dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.hs-dugme .ikon { width: 18px; height: 18px; }
.hs-dugme--cizgi { background: #fff; color: var(--zeytin); border-color: rgba(41, 55, 30, .28); }
.hs-dugme--cizgi::before { background: #F2F0E4; }
.hs-bag { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700; color: var(--zeytin); }
.hs-bag .ikon { width: 16px; height: 16px; }
.hs-bag:hover { text-decoration: underline; text-underline-offset: 3px; }
.hs-bag--sil { color: var(--metin-ikincil); }
.hs-bag--sil:hover { color: var(--indirim); }
.hs-bag:disabled { opacity: .4; cursor: default; text-decoration: none; }
.hs-rozet { display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .75rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.hs-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hs-rozet--tamam { background: #EAF1EC; color: #2F5A45; }
.hs-rozet--yol { background: #E8EEF5; color: #2D4B6B; }
.hs-rozet--hazir { background: #F6F1DA; color: #6E5B12; }
.hs-rozet--bekle { background: #F8ECE9; color: var(--indirim); }
.hs-tutar { font-weight: 700; color: #6E5B12; font-variant-numeric: tabular-nums; }
.hs-uyari, .hs-bilgi { display: flex; gap: .65rem; padding: .85rem 1rem; border-radius: 12px; font-size: .86rem; line-height: 1.55; }
.hs-uyari { background: #FBF3E4; color: #6B4E12; }
.hs-uyari .ikon, .hs-bilgi .ikon { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.hs-uyari button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.hs-uyari--bant { border: 1px solid #EFDFB7; }
.hs-bilgi { background: #F6F5EE; color: #3C4650; }
.hs-bilgi .ikon { color: var(--yaprak); }

/* ---- özet ---- */
.hs-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hs-sayilar li { display: grid; gap: .15rem; padding: 1.2rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 16px 34px -32px rgba(41, 55, 30, .6); }
.hs-sayilar li > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .5rem; border-radius: 50%; background: #F2F0E4; color: var(--yaprak); }
.hs-sayilar .ikon { width: 20px; height: 20px; }
.hs-sayilar b { font-family: var(--f-baslik); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--zeytin); font-variant-numeric: tabular-nums; }
.hs-sayilar small { font-size: .82rem; color: var(--metin-ikincil); }
.hs-son__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.hs-son__ust p { flex: 1; display: grid; }
.hs-son__ust small { font-size: .84rem; color: var(--metin-ikincil); }
.hs-kgorseller { display: flex; }
.hs-kgorsel { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #FAFAF6; border: 2px solid #fff; box-shadow: 0 4px 10px -6px rgba(41, 55, 30, .4); overflow: hidden; }
.hs-kgorseller .hs-kgorsel + .hs-kgorsel { margin-left: -14px; }
.hs-kgorsel img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.hs-kgorsel.is-foto img { object-fit: cover; padding: 0; }
.hs-kgorsel--arti { background: var(--zeytin); color: #fff; font-size: .78rem; font-weight: 700; }
.hs-zaman { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-zaman li { position: relative; display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .82rem; color: var(--metin-ikincil); }
.hs-zaman li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: #E6E4DA; }
.hs-zaman li.is-tamam + li::before { background: var(--yaprak); }
.hs-zaman__nokta { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #E0DED2; background: #fff; }
.hs-zaman__nokta .ikon { width: 16px; height: 16px; color: #fff; stroke-width: 2.4; }
.hs-zaman .is-tamam .hs-zaman__nokta { background: var(--yaprak); border-color: var(--yaprak); }
.hs-zaman .is-simdi .hs-zaman__nokta { border-color: var(--yag); box-shadow: 0 0 0 5px rgba(201, 184, 74, .2); }
.hs-zaman b { color: var(--gece); font-weight: 600; }
.hs-zaman small { font-size: .76rem; }
.hs-zaman--kucuk { margin: .25rem 0; }
.hs-kisayollar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hs-kisayol { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; text-align: left; transition: border-color .3s, transform .3s var(--egri), box-shadow .3s; }
.hs-kisayol:hover { border-color: var(--zeytin); transform: translateY(-2px); box-shadow: 0 20px 34px -28px rgba(41, 55, 30, .6); }
.hs-kisayol__ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E0DED2; color: var(--zeytin); }
.hs-kisayol__ikon .ikon { width: 20px; height: 20px; }
.hs-kisayol > span:nth-child(2) { flex: 1; display: grid; gap: .1rem; }
.hs-kisayol b { font-size: .95rem; color: var(--gece); }
.hs-kisayol small { font-size: .82rem; color: var(--metin-ikincil); }
.hs-kisayol > .ikon { width: 18px; height: 18px; color: var(--metin-ikincil); transition: transform .3s var(--egri); }
.hs-kisayol:hover > .ikon { transform: translateX(3px); color: var(--zeytin); }

/* ---- formlar ---- */
.hs-form { display: grid; gap: 1.1rem; }
.hs-form .hs-kart__bas { margin-bottom: 0; }
.hs-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.hs-tam { grid-column: 1 / -1; }
.hs .alan input, .hs .alan select, .hs .alan textarea { width: 100%; min-height: 50px; padding: 0 .95rem; border-radius: 12px; background: #FAFAF6; border: 1px solid #DEDCD0; font-size: .98rem; transition: border-color .25s, background .25s; }
.hs .alan textarea { padding: .8rem .95rem; resize: vertical; }
.hs .alan select { appearance: none; background: #FAFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606B' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; padding-right: 2.5rem; }
.hs .alan input:focus, .hs .alan select:focus, .hs .alan textarea:focus { outline: none; border-color: var(--zeytin); background-color: #fff; box-shadow: 0 0 0 1px var(--zeytin); }
.hs .alan.is-hata input, .hs .alan.is-hata select, .hs .alan.is-hata textarea { border-color: var(--indirim); background-color: #FFF8F6; }
.hs-etiket { font-size: var(--t-kucuk); font-weight: 600; }
.hs-secmeli { display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-secmeli label { position: relative; cursor: pointer; }
.hs-secmeli input { position: absolute; opacity: 0; pointer-events: none; }
.hs-secmeli span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 1rem; border-radius: 999px; border: 1px solid #DEDCD0; background: #FAFAF6; font-size: .88rem; font-weight: 600; color: #3C4650; transition: background .25s, color .25s, border-color .25s; }
.hs-secmeli input:checked + span { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.hs-secmeli input:focus-visible + span { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.hs-secmeli--sekme { padding: 4px; border-radius: 999px; background: #F2F0E4; justify-self: start; gap: 0; }
.hs-secmeli--sekme span { border: 0; background: none; }
.hs-form__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.25rem; padding-top: 1.1rem; border-top: 1px solid #ECEBE4; }
.hs-form__not { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; font-size: .86rem; font-weight: 600; color: var(--yaprak); }
.hs-form__not[hidden] { display: none; }
.hs-form__not .ikon { width: 18px; height: 18px; stroke-width: 2.2; }
.hs-guc { margin-top: -.4rem; }
.hs-tehlike { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-style: dashed; box-shadow: none; }
.hs-tehlike h3 { font-size: 1rem; color: var(--gece); }
.hs-tehlike p { font-size: .85rem; color: var(--metin-ikincil); max-width: 56ch; }

/* anahtarlar */
.hs-anahtarlar { display: grid; }
.hs-anahtar { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #F0EFE8; cursor: pointer; }
.hs-anahtar:last-child { border-bottom: 0; }
.hs-anahtar > span { flex: 1; display: grid; gap: .1rem; }
.hs-anahtar b { font-size: .95rem; color: var(--gece); }
.hs-anahtar small { font-size: .82rem; color: var(--metin-ikincil); }
.hs-anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.hs-anahtar i { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #DAD8CC; transition: background .3s; }
.hs-anahtar i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .35s var(--egri); }
.hs-anahtar input:checked + i { background: var(--yaprak); }
.hs-anahtar input:checked + i::after { transform: translateX(20px); }
.hs-anahtar input:focus-visible + i { outline: 2px solid var(--yaprak); outline-offset: 2px; }

/* adresler */
.hs-adresler { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.hs-adres { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 16px 34px -32px rgba(41, 55, 30, .6); }
.hs-adres header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hs-adres__tur { font-size: .76rem; font-weight: 700; color: var(--yaprak); }
.hs-adres h3 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.25rem; color: var(--zeytin); }
.hs-adres p { flex: 1; font-size: .88rem; line-height: 1.6; color: #3C4650; }
.hs-adres footer { display: flex; gap: 1.25rem; padding-top: .75rem; border-top: 1px solid #F0EFE8; }
.hs-adres--yeni { align-items: center; justify-content: center; min-height: 220px; border: 1.5px dashed #DAD8CC; box-shadow: none; background: transparent; font-weight: 700; color: var(--zeytin); transition: border-color .3s, background .3s; }
.hs-adres--yeni span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #DAD8CC; }
.hs-adres--yeni .ikon { width: 20px; height: 20px; }
.hs-adres--yeni:hover { border-color: var(--zeytin); background: #FBFAF3; }
.hs-fatura { display: grid; gap: 1rem; padding: 1rem; border-radius: 14px; background: #FAFAF6; }

/* siparişler */
.hs-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.hs-filtreler { display: flex; flex-wrap: wrap; gap: .4rem; }
.hs-filtre { display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .5rem 0 .95rem; border-radius: 999px; background: #fff; border: 1px solid #E0DED2; font-size: .85rem; font-weight: 600; color: #3C4650; transition: background .25s, color .25s, border-color .25s; }
.hs-filtre span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #F2F0E4; font-size: .72rem; color: var(--zeytin); }
.hs-filtre:hover { border-color: var(--zeytin); }
.hs-filtre[aria-pressed="true"] { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.hs-filtre[aria-pressed="true"] span { background: var(--yag); }
.hs-ara { position: relative; display: flex; align-items: center; }
.hs-ara .ikon { position: absolute; left: .9rem; width: 18px; height: 18px; color: var(--metin-ikincil); pointer-events: none; }
.hs-ara input { width: 260px; height: 44px; padding: 0 1rem 0 2.6rem; border-radius: 999px; border: 1px solid #DEDCD0; background: #fff; font-size: .9rem; }
.hs-ara input:focus { outline: none; border-color: var(--zeytin); }
.hs-siparisler { display: grid; gap: 1rem; }
.hs-siparis { border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .05), 0 24px 50px -40px rgba(41, 55, 30, .5); overflow: hidden; }
.hs-siparis[hidden] { display: none; }
.hs-siparis__ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 1.5rem; background: #FAFAF6; border-bottom: 1px solid #ECEBE4; }
.hs-siparis__kunye { display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; }
.hs-siparis__kunye div { display: grid; }
.hs-siparis__kunye dt { font-size: .74rem; color: var(--metin-ikincil); }
.hs-siparis__kunye dd { margin: 0; font-weight: 700; font-size: .95rem; color: var(--gece); font-variant-numeric: tabular-nums; }
.hs-siparis__govde { display: grid; gap: 1.25rem; padding: 1.25rem 1.5rem; }
.hs-siparis__ozet { display: flex; align-items: center; gap: 1rem; }
.hs-siparis__ozet p { display: grid; font-size: .92rem; color: var(--metin-ikincil); }
.hs-siparis__ozet b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.1rem; color: var(--gece); }
.hs-siparis__ozet small { font-size: .82rem; }
.hs-detay { border-top: 1px dashed #DAD8CC; padding-top: .9rem; }
.hs-detay summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font-size: .86rem; font-weight: 700; color: var(--zeytin); }
.hs-detay summary::-webkit-details-marker { display: none; }
.hs-detay summary .ikon { width: 16px; height: 16px; transition: transform .3s var(--egri); }
.hs-detay[open] summary .ikon { transform: rotate(180deg); }
.hs-urunler { display: grid; gap: .6rem; margin-top: .9rem; }
.hs-urunler li { display: flex; align-items: center; gap: .9rem; font-size: .88rem; }
.hs-urun__ad { flex: 1; display: grid; color: var(--gece); }
.hs-urun__ad small { color: var(--metin-ikincil); font-size: .78rem; }
.hs-urunler b { font-variant-numeric: tabular-nums; color: var(--gece); }
.hs-hesap { display: grid; gap: .35rem; margin: .9rem 0 0 auto; max-width: 280px; font-size: .86rem; color: var(--metin-ikincil); }
.hs-hesap div { display: flex; justify-content: space-between; gap: 1rem; }
.hs-hesap dd { margin: 0; font-variant-numeric: tabular-nums; }
.hs-hesap__toplam { padding-top: .45rem; border-top: 1px solid #ECEBE4; font-weight: 700; color: var(--gece); }
.hs-siparis__alt { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.5rem 1.25rem; }
.hs-iade { display: grid; gap: .9rem; margin: 0 1.5rem 1.5rem; padding: 1.1rem; border-radius: 14px; background: #FAFAF6; }
.hs-iade .hs-dugme { justify-self: start; }
.hs-yok { padding: 2rem; text-align: center; color: var(--metin-ikincil); }

/* tablolar */
.hs-tablo-kap { padding: .5rem 1.25rem; overflow-x: auto; }
.hs-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hs-tablo th { padding: .9rem .75rem; text-align: left; font-size: .76rem; font-weight: 700; color: var(--metin-ikincil); border-bottom: 1px solid #ECEBE4; }
.hs-tablo td { padding: 1rem .75rem; border-bottom: 1px solid #F0EFE8; color: #3C4650; vertical-align: middle; }
.hs-tablo tr:last-child td { border-bottom: 0; }
.hs-tablo .hs-sag, .hs-tablo td.hs-tutar { text-align: right; }

/* boş durum, favoriler, havale */
.hs-bos { display: grid; justify-items: center; gap: .6rem; padding: 3rem 1.5rem; text-align: center; }
.hs-bos h3 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.6rem; color: var(--zeytin); }
.hs-bos p { max-width: 46ch; font-size: .9rem; color: var(--metin-ikincil); }
.hs-bos .hs-dugme { margin-top: .5rem; }
.hs-favoriler { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.hs-fav { display: flex; align-items: center; gap: .9rem; padding: .85rem; border-radius: 16px; background: #fff; border: 1px solid #ECEBE4; }
.hs-fav .hs-kgorsel { width: 64px; height: 64px; border: 0; box-shadow: none; }
.hs-fav div { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.hs-fav a { font-family: var(--f-baslik); font-size: 1rem; line-height: 1.25; color: var(--gece); text-decoration: none; }
.hs-fav a:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.hs-fav small { font-size: .78rem; color: var(--metin-ikincil); }
.hs-fav b { font-size: .9rem; color: #6E5B12; }
.hs-fav button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--zeytin); color: #fff; }
.hs-fav button:disabled { background: #E6E4DA; color: var(--metin-ikincil); }
.hs-fav button .ikon { width: 18px; height: 18px; }
.hs-alt-bag { text-align: center; }
.hs-iban { display: grid; }
.hs-iban p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 0; border-bottom: 1px dashed #DAD8CC; font-size: .9rem; }
.hs-iban span { width: 110px; color: var(--metin-ikincil); }
.hs-iban b { flex: 1; color: var(--gece); }
.hs-hesaplar .hs-bilgi { margin-top: 1rem; }
.hs-teyit { display: inline-block; flex: none !important; padding: .15rem .6rem; border-radius: 999px; border: 1px dashed rgba(29, 40, 53, .3); font-size: .78rem; font-weight: 500; color: var(--metin-ikincil) !important; }
.hs-dosya { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: 14px; border: 1.5px dashed #DAD8CC; background: #FAFAF6; cursor: pointer; font-size: .9rem; color: #3C4650; transition: border-color .3s, background .3s; }
.hs-dosya:hover, .hs-dosya.is-uzerinde { border-color: var(--zeytin); background: #FBFAF3; }
.hs-dosya input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hs-dosya__ikon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #E0DED2; color: var(--zeytin); }
.hs-dosya__ikon .ikon { width: 19px; height: 19px; }
.hs-dosya.is-secili { border-style: solid; border-color: var(--yaprak); }

@media (max-width: 1199px) {
  .hs-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .hs-duzen { grid-template-columns: minmax(0, 1fr); }
  .hs-menu { position: relative; padding: .5rem; }
  .hs-menu__ac { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 50px; padding: 0 .9rem; border-radius: 14px; font-weight: 700; color: var(--zeytin); }
  .hs-menu__ac span { flex: 1; text-align: left; }
  .hs-menu__ac .ikon { width: 20px; height: 20px; }
  .hs-menu__ac .ikon:last-child { transition: transform .3s var(--egri); }
  .hs-menu__ac[aria-expanded="true"] .ikon:last-child { transform: rotate(180deg); }
  .hs-menu__liste { display: none; padding-top: .5rem; margin-top: .5rem; border-top: 1px solid #ECEBE4; }
  .hs-menu.is-acik .hs-menu__liste { display: grid; }
}
@media (max-width: 767px) {
  .hs-bas__kim { gap: .9rem; }
  .hs-avatar { width: 58px; height: 58px; font-size: 1.3rem; }
  .hs-cikis { height: 40px; font-size: .82rem; }
  .hs-sayilar { gap: .6rem; }
  .hs-sayilar li { padding: 1rem; }
  .hs-sayilar b { font-size: 1.7rem; }
  .hs-kisayollar, .hs-izgara { grid-template-columns: minmax(0, 1fr); }
  .hs-zaman li { font-size: .72rem; }
  .hs-zaman small { font-size: .68rem; }
  .hs-zaman li + li::before { right: calc(50% + 17px); width: calc(100% - 34px); }
  .hs-zaman__nokta { width: 28px; height: 28px; }
  .hs-zaman li + li::before { top: 13px; }
  .hs-ara, .hs-ara input { width: 100%; }
  .hs-filtreler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); width: calc(100% + var(--kenar) * 2); }
  .hs-filtreler::-webkit-scrollbar { display: none; }
  .hs-filtre { flex: none; }
  .hs-siparis__ust, .hs-siparis__govde { padding-inline: 1rem; }
  .hs-siparis__kunye { gap: .5rem 1.25rem; }
  .hs-siparis__alt { padding: 0 1rem 1rem; }
  .hs-siparis__alt .hs-dugme { flex: 1; }
  .hs-iade { margin: 0 1rem 1rem; }
  /* tablo: satırlar karta döner */
  .hs-tablo-kap { padding: .25rem 1rem; }
  .hs-tablo thead { display: none; }
  .hs-tablo, .hs-tablo tbody, .hs-tablo tr, .hs-tablo td { display: block; width: 100%; }
  .hs-tablo tr { padding: .75rem 0; border-bottom: 1px solid #ECEBE4; }
  .hs-tablo tr:last-child { border-bottom: 0; }
  .hs-tablo td { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
  .hs-tablo td::before { content: attr(data-e); font-size: .78rem; font-weight: 600; color: var(--metin-ikincil); text-align: left; }
  .hs-form__alt .hs-dugme { width: 100%; }
}

/* taşma koruması: panel ve esnek satırlar içeriğe göre genişlemesin */
.hs-panel { grid-template-columns: minmax(0, 1fr); }
.hs-arac > *, .hs-siparis__ozet > *, .hs-urunler li > *, .hs-son__ust > * { min-width: 0; }
.hs-kgorseller, .hs-kgorsel { flex: none; }
@media (max-width: 767px) {
  .hs-arac { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hs-filtreler { width: auto; }
  .hs-siparis__ozet { align-items: flex-start; }
}


/* 31  Kurumsal sayfalar: Hakkımızda · Satış noktaları · Havale bildirimi · İletişim -------
   Ortak: sepet sayfasının zeytin bandı (.sp-bas), beyaz kartlar (.hs-kart), form dili (.hs-*).
   Hakkımızda editoryal akış: tam ekran kahraman → Ege rotası → Zeytinli mozaiği → koyu üretim
   bandı + video → üç değer → büyük söz → fuar/ödül → davet kartı. */

/* footer kubbesi payı */
@media (min-width: 768px) { .kr > .sp-govde, .hk-davet { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + 220px); } }
.kr-sayac { display: flex; gap: .75rem; }
.kr-sayac li { display: grid; padding: .8rem 1.25rem; border-radius: 18px; border: 1px solid rgba(201, 184, 74, .45); background: rgba(255, 255, 255, .06); }
.kr-sayac b { font-family: var(--f-baslik); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--yag); }
.kr-sayac span { font-size: .85rem; color: rgba(255, 255, 255, .78); }

/* ================= HAKKIMIZDA ================= */
.hk { background: var(--kirec); }
.hk-ust { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 700; color: var(--yaprak); }
.hk-ust::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hk-baslik { margin: .6rem 0 1.1rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.08; color: var(--zeytin); }
.hk-metin { display: grid; align-content: center; }
.hk-metin p:not(.hk-ust) { max-width: 58ch; color: #3C4650; line-height: 1.75; }
.hk-metin p + p { margin-top: 1rem; }
.hk-metin .hk-giris { font-family: var(--f-baslik); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--gece); }

/* kahraman */
.hk-kahraman { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(86vh, 820px); padding: 7rem 0 clamp(3rem, 2rem + 4vw, 5.5rem); color: #fff; }
.hk-kahraman__gorsel { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hkYaklas 18s ease-out both; }
@keyframes hkYaklas { from { transform: scale(1.1); } }
.hk-kahraman::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(20, 28, 14, .35) 0%, rgba(20, 28, 14, .15) 35%, rgba(29, 40, 22, .92) 100%), linear-gradient(90deg, rgba(20, 28, 14, .55), transparent 70%); }
.hk-kahraman__ic { width: 100%; }
.hk-kahraman .kat-yol { position: absolute; top: 1.25rem; }
.hk-kahraman .sp-bas__ust { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 700; color: var(--yag); }
.hk-kahraman .sp-bas__ust::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hk-kahraman__baslik { margin: .75rem 0 1.25rem; font-size: clamp(3.2rem, 2rem + 6vw, 7.5rem); line-height: .95; letter-spacing: -.01em; }
.hk-kahraman__metin { max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hk-kahraman__degerler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.hk-kahraman__degerler li { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(201, 184, 74, .55); font-family: var(--f-baslik); font-size: 1.05rem; color: #fff; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hk-kahraman__asagi { position: absolute; right: var(--kenar); bottom: clamp(3rem, 2rem + 4vw, 5.5rem); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); color: #fff; animation: hkZipla 2.4s var(--egri) infinite; }
.hk-kahraman__asagi .ikon { width: 22px; height: 22px; }
@keyframes hkZipla { 50% { transform: translateY(6px); } }

/* Ege rotası */
.hk-yolculuk { padding-block: var(--bolum); }
.hk-yolculuk__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hk-ege { margin: 0; padding: 1rem; border-radius: 24px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -44px rgba(41, 55, 30, .5); }
.hk-ege figcaption { padding: .75rem .5rem 0; font-size: .82rem; color: var(--metin-ikincil); }
.ege { display: block; width: 100%; height: auto; border-radius: 16px; background: linear-gradient(160deg, #E4ECEA, #D6E2E0); }
.ege__kara { fill: #F4F2E6; stroke: #C9C4AE; stroke-width: .8; }
.ege__kara--tr { fill: #EDEBDD; }
.ege__rota { fill: none; stroke: var(--zeytin); stroke-width: 2.4; stroke-dasharray: .012 .012; stroke-linecap: round; }
.js .hk-yolculuk.is-gorunur .ege__rota { animation: egeRota 2.6s var(--egri) .3s both; }
@keyframes egeRota { from { stroke-dashoffset: 1; stroke-dasharray: 1 1; } to { stroke-dashoffset: 0; stroke-dasharray: 1 1; } }
.ege__nokta circle:first-child { fill: var(--zeytin); stroke: #fff; stroke-width: 3; }
.ege__nokta--varis circle:first-child { fill: var(--yag); stroke: var(--zeytin); }
.ege__halka { fill: none; stroke: var(--zeytin); stroke-width: 1; opacity: .35; }
.ege__nokta--varis .ege__halka { stroke: var(--yag); opacity: .8; animation: egeNabiz 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes egeNabiz { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ege__etiket { font-family: var(--f-baslik); font-size: 22px; fill: var(--zeytin); }
.ege__koord { font-family: var(--f-metin); font-size: 12px; fill: var(--metin-ikincil); letter-spacing: .04em; }
.ege__deniz--kara { fill: rgba(41, 55, 30, .22); }
.ege__deniz { font-family: var(--f-baslik); font-size: 20px; font-style: italic; fill: rgba(41, 55, 30, .35); letter-spacing: .3em; }
.ege__pusula circle { fill: rgba(255, 255, 255, .7); stroke: rgba(41, 55, 30, .25); }
.ege__pusula path { fill: rgba(41, 55, 30, .25); }
.ege__pusula .ege__kuzey { fill: var(--zeytin); }
.ege__pusula text { font-family: var(--f-metin); font-size: 11px; font-weight: 700; fill: var(--zeytin); }

/* Zeytinli */
.hk-zeytinli { padding-bottom: var(--bolum); }
.hk-zeytinli__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hk-mozaik { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; aspect-ratio: 6 / 5; }
.hk-mozaik img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 50px -36px rgba(41, 55, 30, .6); }
.hk-mozaik__1 { grid-row: 1 / 3; }
.hk-mozaik__damga { position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%); display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%; background: var(--zeytin); color: rgba(255, 255, 255, .8); font-size: .72rem; text-align: center; box-shadow: 0 0 0 8px var(--kirec), 0 20px 40px -20px rgba(0, 0, 0, .5); }
.hk-mozaik__damga b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.6rem; color: var(--yag); }
.hk-olgular { display: grid; gap: .1rem; margin-top: 1.75rem; border-top: 1px solid #E0DED2; }
.hk-olgular li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid #E0DED2; }
.hk-olgular b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.2rem; color: var(--zeytin); }
.hk-olgular span { font-size: .88rem; color: var(--metin-ikincil); text-align: right; }

/* üretim: koyu bant */
.hk-uretim { position: relative; overflow: hidden; padding-block: var(--bolum); color: #fff; background: linear-gradient(rgba(41, 55, 30, .95), rgba(41, 55, 30, .95)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat, var(--zeytin); }
.hk-uretim__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hk-metin--acik .hk-ust { color: var(--yag); }
.hk-metin--acik .hk-baslik { color: #fff; }
.hk-metin--acik p:not(.hk-ust) { color: rgba(255, 255, 255, .8); }
.hk-metin--acik .hk-giris { color: #fff; }
.hk-dugme { justify-self: start; margin-top: 1.75rem; }
.hk-video { position: relative; margin: 0; aspect-ratio: 1; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px rgba(201, 184, 74, .4), 0 40px 70px -40px rgba(0, 0, 0, .8); }
.hk-video video { width: 100%; height: 100%; object-fit: cover; }
.hk-video__oynat { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--yag); color: var(--zeytin); box-shadow: 0 0 0 12px rgba(201, 184, 74, .25); transition: transform .35s var(--egri), opacity .3s; }
.hk-video__oynat .ikon { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
.hk-video__oynat:hover { transform: scale(1.06); }
.hk-video.is-oynuyor .hk-video__oynat { opacity: 0; pointer-events: none; }
.hk-video figcaption { position: absolute; left: 1.1rem; bottom: 1.1rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(20, 28, 14, .6); font-size: .8rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* değerler */
.hk-degerler { padding-block: var(--bolum); }
.hk-degerler__bas { display: grid; justify-items: center; text-align: center; margin-bottom: 3rem; }
.hk-degerler__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: deger; }
.hk-deger { position: relative; overflow: hidden; padding: 2.25rem 2rem 2rem; border-radius: 24px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -48px rgba(41, 55, 30, .55); transition: transform .5s var(--egri), box-shadow .5s var(--egri); }
.hk-deger:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -44px rgba(41, 55, 30, .6); }
.hk-deger__harf { position: absolute; right: .75rem; bottom: -2.6rem; font-family: var(--f-baslik); font-size: 10rem; line-height: 1; color: #F2F0E4; pointer-events: none; }
.hk-deger h3 { position: relative; font-family: var(--f-baslik); font-weight: 400; font-size: 2rem; color: var(--zeytin); }
.hk-deger h3::after { content: ""; display: block; width: 40px; height: 2px; margin-top: .9rem; background: var(--yag); }
.hk-deger p { position: relative; margin-top: 1rem; line-height: 1.7; color: #3C4650; }

/* söz */
.hk-soz { padding-bottom: var(--bolum); }
.hk-soz blockquote { position: relative; margin: 0; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 6vw, 7rem); border-radius: 28px; text-align: center; color: #fff; background: radial-gradient(80% 120% at 50% 0%, rgba(201, 184, 74, .18), transparent 60%), var(--gece); overflow: hidden; }
.hk-soz blockquote::before { content: "“"; position: absolute; left: 50%; top: .75rem; transform: translateX(-50%); font-family: var(--f-baslik); font-size: 7rem; line-height: 1; color: rgba(201, 184, 74, .25); }
.hk-soz p { position: relative; font-family: var(--f-baslik); font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.25; }
.hk-soz footer { position: relative; margin-top: 1.5rem; font-size: .88rem; font-weight: 700; color: var(--yag); }

/* fuar + ödüller */
.hk-fuar { padding-bottom: var(--bolum); }
.hk-fuar__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hk-fuar .baglanti { justify-self: start; margin-top: 1.25rem; color: var(--zeytin); }
.hk-fuar__gorseller { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hk-fuar__gorseller img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 50px -36px rgba(41, 55, 30, .6); }
.hk-fuar__gorseller img:last-child { transform: translateY(2.5rem); }
.hk-oduller { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3.5rem, 3rem + 2vw, 5rem); padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid #ECEBE4; }
.hk-oduller li { display: grid; place-items: center; aspect-ratio: 1; }
.hk-oduller img { max-width: 100%; max-height: 84px; object-fit: contain; filter: grayscale(.2); transition: transform .4s var(--egri), filter .4s; }
.hk-oduller li:hover img { transform: scale(1.08); filter: none; }

/* davet */
.hk-davet { padding-top: 0; }
.hk-davet__kart { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 40px 70px -50px rgba(41, 55, 30, .6); }
.hk-davet__metin { padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.hk-davet__metin p:not(.hk-ust) { max-width: 56ch; color: #3C4650; line-height: 1.75; }
.hk-davet__dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.hk-davet__dugmeler .uye__dugme { width: auto; padding: 0 1.5rem; }
.hk-davet__kunye { display: grid; align-content: center; gap: 1.25rem; margin: 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(rgba(41, 55, 30, .94), rgba(41, 55, 30, .94)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 360px repeat; color: #fff; }
.hk-davet__kunye dt { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--yag); }
.hk-davet__kunye dt .ikon { width: 18px; height: 18px; }
.hk-davet__kunye dd { margin: .3rem 0 0; font-size: 1rem; line-height: 1.55; }
.hk-davet__kunye a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.hk-davet__kunye a:hover { border-color: var(--yag); }

/* görünür olunca yumuşak giriş (yalnız bir kez) */
.js .hk-gir { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--egri), transform .9s var(--egri); }
.js .hk-gir.is-gorunur { opacity: 1; transform: none; }

/* ================= SATIŞ NOKTALARI ================= */
.sn-duzen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
.sn-harita { position: relative; padding: .75rem; overflow: hidden; }
.sn-harita__svg { display: block; width: 100%; height: auto; border-radius: 14px; background: linear-gradient(170deg, #E3EBE9, #D3DFDD); }
.sn-harita__il { fill: #F1EFE3; stroke: #CFCAB4; stroke-width: .8; transition: fill .35s; }
.sn-harita__il.is-vurgu { fill: #E7E9D6; }
.sn-harita__il.is-secili { fill: #D9DDB8; }
.sn-harita__etiket { font-family: var(--f-metin); font-size: 13px; font-weight: 700; fill: rgba(41, 55, 30, .45); letter-spacing: .06em; text-anchor: middle; pointer-events: none; }
.sn-harita__etiket--deniz { font-family: var(--f-baslik); font-weight: 400; font-style: italic; font-size: 16px; letter-spacing: .25em; fill: rgba(41, 55, 30, .3); }
.sn-pin { cursor: pointer; outline: none; }
.sn-pin__govde { fill: var(--zeytin); stroke: #fff; stroke-width: 2; transition: fill .3s; }
.sn-pin__ic { fill: var(--yag); }
.sn-pin__halka { fill: rgba(41, 55, 30, .15); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s; }
.sn-pin > * { transition: transform .35s var(--egri); }
.sn-pin:hover > *, .sn-pin:focus-visible > *, .sn-pin.is-aktif > * { transform: scale(1.25); }
.sn-pin.is-aktif .sn-pin__govde { fill: var(--indirim); }
.sn-pin.is-aktif .sn-pin__halka { opacity: 1; animation: egeNabiz 1.8s ease-out infinite; }
.sn-pin:focus-visible .sn-pin__govde { stroke: var(--yag); stroke-width: 3; }
.sn-pin.is-yaklasik .sn-pin__govde { fill: #fff; stroke: var(--zeytin); stroke-dasharray: 3 2; }
.sn-pin.is-yaklasik .sn-pin__ic { fill: var(--zeytin); }
.sn-pin.is-soluk { opacity: .25; }
.sn-merkez circle { fill: var(--yag); stroke: var(--zeytin); stroke-width: 2; }
.sn-merkez .sn-merkez__halka { fill: rgba(201, 184, 74, .25); stroke: none; animation: egeNabiz 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.sn-merkez text { font-family: var(--f-baslik); font-size: 15px; fill: var(--zeytin); }
.sn-harita__lejant { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .85rem .5rem .25rem; font-size: .8rem; color: var(--metin-ikincil); }
.sn-harita__lejant span { display: inline-flex; align-items: center; gap: .45rem; }
.sn-harita__lejant i { width: 12px; height: 12px; border-radius: 50%; }
.sn-harita__lejant .is-pin { background: var(--zeytin); }
.sn-harita__lejant .is-merkez { background: var(--yag); box-shadow: 0 0 0 2px var(--zeytin) inset; }
.sn-harita__lejant .is-yaklasik { border: 1.5px dashed var(--zeytin); }
.sn-liste-kap { display: grid; gap: 1rem; }
.sn-arac { display: grid; gap: .75rem; }
.sn-arac .hs-ara input { width: 100%; }
.sn-liste { display: grid; gap: .75rem; max-height: none; }
.sn-kart { position: relative; display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; cursor: pointer; transition: border-color .3s, box-shadow .3s, transform .3s var(--egri); }
.sn-kart:hover, .sn-kart.is-aktif { border-color: var(--zeytin); box-shadow: 0 20px 34px -28px rgba(41, 55, 30, .6); }
.sn-kart.is-aktif { transform: translateX(4px); }
.sn-kart.is-aktif::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--indirim); }
.sn-kart[hidden] { display: none; }
.sn-kart__tur { justify-self: start; padding: .2rem .6rem; border-radius: 999px; background: #F2F0E4; font-size: .72rem; font-weight: 700; color: var(--yaprak); }
.sn-kart__ad { font-family: var(--f-baslik); font-weight: 400; font-size: 1.25rem; color: var(--gece); }
.sn-kart__adres { font-size: .88rem; line-height: 1.55; color: #3C4650; }
.sn-kart__not { font-size: .76rem; color: var(--metin-ikincil); font-style: italic; }
.sn-kart__alt { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .45rem; padding-top: .7rem; border-top: 1px dashed #E0DED2; }
.sn-kart__tel, .sn-kart__yon { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700; color: var(--zeytin); text-decoration: none; }
.sn-kart__tel .ikon, .sn-kart__yon .ikon { width: 16px; height: 16px; }
.sn-kart__tel:hover, .sn-kart__yon:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-kart__yon.is-pasif { color: var(--metin-ikincil); font-weight: 500; }
.sn-bayi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 24px; color: #fff; background: radial-gradient(80% 140% at 100% 0%, rgba(201, 184, 74, .22), transparent 55%), var(--zeytin); }
.sn-bayi h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.sn-bayi p { margin-top: .4rem; color: rgba(255, 255, 255, .78); }
.sn-bayi__d { display: flex; flex-wrap: wrap; gap: .6rem; }
.sn-bayi .uye__dugme { width: auto; padding: 0 1.5rem; background: var(--yag); color: var(--zeytin); }
.sn-bayi .uye__dugme::before { background: #D6C65C; }
.sn-bayi .uye__dugme .ikon { background: var(--zeytin); color: var(--yag); }
.sn-bayi .uye__dugme--cizgi { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.sn-bayi .uye__dugme--cizgi::before { background: rgba(255, 255, 255, .08); }
.sn-bayi .uye__dugme--cizgi .ikon { background: none; color: var(--yag); padding: 0; width: 18px; height: 18px; }

/* satış noktaları: harita + panel üstte, kartlar altta 3 sütun */
.sn-duzen { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: stretch; margin-bottom: 1.5rem; }
.sn-panel { display: grid; grid-template-rows: auto 1fr; gap: 1rem; min-width: 0; }
.sn-detay { position: relative; overflow: hidden; display: grid; align-content: start; }
.sn-detay::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(201, 184, 74, .35); pointer-events: none; }
.sn-detay__ikon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; background: var(--yag); color: var(--zeytin); box-shadow: 0 0 0 8px rgba(201, 184, 74, .18); }
.sn-detay__ikon .ikon { width: 24px; height: 24px; }
.sn-detay__ust { font-size: .8rem; font-weight: 700; color: var(--yaprak); }
.sn-detay__ad { margin: .25rem 0 .6rem; font-size: 1.7rem; line-height: 1.15; color: var(--zeytin); }
.sn-detay__metin { font-size: .9rem; line-height: 1.65; color: #3C4650; }
.sn-detay__liste { display: grid; gap: .75rem; }
.sn-detay__liste .sn-kart { cursor: default; box-shadow: none; transform: none; border-color: #ECEBE4; background: #FAFAF6; }
.sn-detay__liste .sn-kart::before { display: none; }
.sn-detay__kapat { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--metin-ikincil); }
.sn-detay__kapat .ikon { width: 15px; height: 15px; }
.sn-detay__kapat:hover { color: var(--zeytin); }
.sn-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sn-pin__rozet circle { fill: var(--yag); stroke: #fff; stroke-width: 2; }
.sn-pin__rozet text { font-family: var(--f-metin); font-size: 10px; font-weight: 700; fill: var(--zeytin); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 1099px) { .sn-duzen { grid-template-columns: minmax(0, 1fr); } .sn-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sn-liste { grid-template-columns: minmax(0, 1fr); } }

/* ================= HAVALE ================= */
.hv-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.hv-adimlar li { position: relative; display: flex; gap: .9rem; padding: 1.2rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; }
.hv-adimlar li + li::before { content: ""; position: absolute; left: -1rem; top: 50%; width: 1rem; border-top: 1px dashed #CFCAB4; }
.hv-adimlar span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zeytin); color: var(--yag); font-family: var(--f-baslik); font-size: 1.1rem; }
.hv-adimlar div { display: grid; gap: .15rem; }
.hv-adimlar b { color: var(--gece); }
.hv-adimlar small { font-size: .82rem; line-height: 1.45; color: var(--metin-ikincil); }
.hv-duzen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: start; }
.hv-banka { display: grid; gap: 1rem; }
.hv-kart {
  position: relative; overflow: hidden; display: grid; gap: 1.1rem; aspect-ratio: 1.586; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(201, 184, 74, .35), transparent 50%), linear-gradient(135deg, #34462A, #1F2A16);
  box-shadow: 0 40px 60px -34px rgba(20, 28, 14, .8), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .6s var(--egri);
}
.hv-kart:hover { transform: perspective(900px) rotateX(3deg) rotateY(-5deg); }
.hv-kart__ust { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hv-kart__banka { font-family: var(--f-baslik); font-size: 1.5rem; }
.hv-kart__sube { font-size: .78rem; color: rgba(255, 255, 255, .7); }
.hv-kart__cip { width: 44px; height: 34px; fill: #D8C774; stroke: rgba(80, 64, 10, .45); stroke-width: 1; }
.hv-kart__iban { align-self: end; font-family: var(--f-metin); font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.hv-kart__alt { display: grid; gap: .15rem; }
.hv-kart__alt span { font-size: .68rem; color: rgba(255, 255, 255, .6); }
.hv-kart__alt b { font-size: .74rem; font-weight: 600; line-height: 1.35; }
.hv-kart__dal { position: absolute; right: -30px; bottom: 36px; width: 240px; fill: none; stroke: rgba(201, 184, 74, .35); stroke-width: 1.2; pointer-events: none; }
.hv-kart__dal path + path { fill: rgba(201, 184, 74, .12); }
.hv-kopyalar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hv-kopya { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border-radius: 999px; background: #fff; border: 1px solid #DEDCD0; font-weight: 700; font-size: .86rem; color: var(--zeytin); transition: border-color .3s, background .3s, color .3s; }
.hv-kopya .ikon { width: 17px; height: 17px; }
.hv-kopya:hover { border-color: var(--zeytin); }
.hv-kopya.is-kopyalandi { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.hv-banka .hs-bilgi a { color: var(--zeytin); font-weight: 700; }
.hv-form__bas { font-family: var(--f-baslik); font-weight: 400; font-size: 1.45rem; color: var(--zeytin); }

/* ================= İLETİŞİM ================= */
.il-kanallar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.il-kanal { position: relative; overflow: hidden; display: grid; gap: .2rem; padding: 1.4rem 1.3rem 1.3rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; box-shadow: 0 24px 50px -44px rgba(41, 55, 30, .6); transition: transform .45s var(--egri), border-color .3s, box-shadow .45s; }
.il-kanal:hover { transform: translateY(-4px); border-color: var(--zeytin); box-shadow: 0 34px 60px -40px rgba(41, 55, 30, .6); }
.il-kanal__ikon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .75rem; border-radius: 50%; border: 1px solid #E0DED2; color: var(--zeytin); transition: background .35s, color .35s, border-color .35s; }
.il-kanal__ikon .ikon { width: 22px; height: 22px; }
.il-kanal:hover .il-kanal__ikon { background: var(--zeytin); border-color: var(--zeytin); color: var(--yag); }
.il-kanal--wp:hover .il-kanal__ikon { background: #1F8F4E; border-color: #1F8F4E; color: #fff; }
.il-kanal__et { font-size: .78rem; font-weight: 700; color: var(--yaprak); }
.il-kanal b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--gece); overflow-wrap: anywhere; }
.il-kanal small { font-size: .82rem; color: var(--metin-ikincil); }
.il-kanal__ok { position: absolute; right: 1.1rem; top: 1.4rem; color: var(--metin-ikincil); transition: transform .35s var(--egri), color .3s; }
.il-kanal__ok .ikon { width: 18px; height: 18px; }
.il-kanal:hover .il-kanal__ok { transform: translateX(3px); color: var(--zeytin); }
.il-duzen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
.il-konular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.il-konular label { position: relative; cursor: pointer; }
.il-konular input { position: absolute; opacity: 0; pointer-events: none; }
.il-konular span { display: grid; justify-items: center; gap: .4rem; padding: .9rem .5rem; border-radius: 14px; border: 1px solid #E0DED2; background: #FAFAF6; font-size: .85rem; font-weight: 600; color: #3C4650; text-align: center; transition: background .3s, border-color .3s, color .3s; }
.il-konular .ikon { width: 22px; height: 22px; color: var(--yaprak); transition: color .3s; }
.il-konular label:hover span { border-color: var(--zeytin); }
.il-konular input:checked + span { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.il-konular input:checked + span .ikon { color: var(--yag); }
.il-konular input:focus-visible + span { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.il-form .sp-ek__sayac { margin-top: 0; }
.il-yan { display: grid; gap: 1rem; }
.il-harita { padding: .6rem; }
.il-harita iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 14px; filter: saturate(.75) contrast(1.02); background: #E3EBE9; }
.il-kunye h2 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.15rem; line-height: 1.35; color: var(--zeytin); }
.il-kunye dl { display: grid; gap: .9rem; margin: 1rem 0 0; }
.il-kunye dt { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--yaprak); }
.il-kunye dt .ikon { width: 17px; height: 17px; }
.il-kunye dd { margin: .2rem 0 0; font-size: .92rem; line-height: 1.55; color: #3C4650; }
.il-kunye a { color: var(--gece); text-decoration: none; border-bottom: 1px solid #DAD8CC; }
.il-kunye a:hover { border-color: var(--zeytin); }
.il-sosyal { display: flex; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #ECEBE4; }
.il-sosyal a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #E0DED2; color: var(--zeytin); transition: background .3s, color .3s, border-color .3s; }
.il-sosyal a:hover { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.il-sosyal .ikon { width: 19px; height: 19px; }
.il-sn { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--zeytin); color: #fff; text-decoration: none; transition: transform .35s var(--egri); }
.il-sn:hover { transform: translateY(-2px); }
.il-sn > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yag); color: var(--zeytin); }
.il-sn .ikon { width: 20px; height: 20px; }
.il-sn div { flex: 1; display: grid; }
.il-sn small { color: rgba(255, 255, 255, .72); font-size: .82rem; }

@media (max-width: 1099px) {
  .il-kanallar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-duzen, .hv-duzen, .il-duzen { grid-template-columns: minmax(0, 1fr); }
  .hk-oduller { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .hk-yolculuk__ic, .hk-zeytinli__ic, .hk-uretim__ic, .hk-fuar__ic, .hk-davet__kart { grid-template-columns: minmax(0, 1fr); }
  .hk-degerler__liste { grid-template-columns: minmax(0, 1fr); }
  .hk-video { max-width: 520px; }
}
@media (max-width: 767px) {
  .hk-kahraman { min-height: min(88vh, 760px); padding-top: 5rem; }
  .hk-kahraman__asagi { display: none; }
  .hk-mozaik__damga { width: 110px; height: 110px; transform: translate(-40%, -50%); }
  .hk-mozaik__damga b { font-size: 1.2rem; }
  .hk-olgular li { flex-direction: column; gap: .15rem; }
  .hk-olgular span { text-align: left; }
  .hk-fuar__gorseller img:last-child { transform: translateY(1.25rem); }
  .hk-oduller { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1rem; }
  .hk-deger { padding: 1.75rem 1.5rem; }
  .hk-deger__harf { font-size: 8rem; bottom: -2rem; }
  .hv-adimlar { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .hv-adimlar li + li::before { display: none; }
  .hv-kopyalar { grid-template-columns: minmax(0, 1fr); }
  .il-kanallar { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .il-kanal { grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; padding: 1rem 1.1rem; }
  .il-kanal__ikon { grid-row: 1 / 4; margin: 0; align-self: center; }
  .il-kanal__ok { top: 50%; transform: translateY(-50%); }
  .il-kanal:hover .il-kanal__ok { transform: translate(3px, -50%); }
  .il-kanal b { font-size: 1.1rem; }
  .il-konular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-sayac b { font-size: 1.9rem; }
  .sn-kart__ad { font-size: 1.12rem; }
}

/* sayılar: Marcellus'ta 1 ile I karışıyor; sayı gösteren yerler metin fontunda */
.kr-sayac b, .sp-bas__sayac b, .hs-sayilar b, .il-kanal b, .ud-yol__no, .hv-adimlar span, .sp-adimlar span, .hk-mozaik__damga b { font-family: var(--f-metin); font-weight: 600; letter-spacing: -.01em; }
.il-kanal b { font-size: 1.15rem; }
/* form alanı stili kurumsal sayfalarda da (hesabım ile aynı) */
.hs-form-alan .alan input, .hs-form-alan .alan select, .hs-form-alan .alan textarea { width: 100%; min-height: 50px; padding: 0 .95rem; border-radius: 12px; background: #FAFAF6; border: 1px solid #DEDCD0; font-size: .98rem; transition: border-color .25s, background .25s; }
.hs-form-alan .alan textarea { padding: .8rem .95rem; resize: vertical; }
.hs-form-alan .alan select { appearance: none; background: #FAFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606B' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; padding-right: 2.5rem; }
.hs-form-alan .alan input:focus, .hs-form-alan .alan select:focus, .hs-form-alan .alan textarea:focus { outline: none; border-color: var(--zeytin); background-color: #fff; box-shadow: 0 0 0 1px var(--zeytin); }
.hs-form-alan .alan.is-hata input, .hs-form-alan .alan.is-hata select, .hs-form-alan .alan.is-hata textarea { border-color: var(--indirim); background-color: #FFF8F6; }
.il-harita { position: relative; }
.il-harita::before { content: "Harita yükleniyor…"; position: absolute; inset: .6rem; display: grid; place-items: center; border-radius: 14px; background: #E3EBE9; font-size: .85rem; color: var(--metin-ikincil); }
.il-harita iframe { position: relative; }
/* hv-kart mobil: kart oranı serbest, IBAN tek satır */
@media (max-width: 767px) {
  .hv-kart { aspect-ratio: auto; gap: .9rem; }
  .hv-kart__iban { font-size: .94rem; letter-spacing: .02em; white-space: nowrap; }
  .hv-kart__dal { bottom: 60px; }
}


/* 32  Sipariş takibi -----------------------------------------------------------
   Sorgu kartı: solda form, sağda Zeytinli → yolda → kapınızda rotası (SVG, kamyon rotada ilerler).
   Sonuç: künye şeridi, 5 adımlı ilerleme hattı (kamyon güncel adımda), kargo + hareket geçmişi,
   sipariş içeriği, eylemler. Altta üç yardım kartı. */
.st-sorgu { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; padding: 0; overflow: hidden; }
.st-form { display: grid; gap: 1rem; align-content: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.st-form__bas { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.1; color: var(--zeytin); }
.st-form__alt { margin-top: -.4rem; font-size: .9rem; line-height: 1.6; color: var(--metin-ikincil); }
.st-form .uye__dugme { margin-top: .25rem; }
.st-form__uye { font-size: .86rem; color: var(--metin-ikincil); }
.st-form__uye a { color: var(--zeytin); font-weight: 700; text-underline-offset: 3px; }
.st-form__ornek { padding: .7rem .9rem; border-radius: 12px; background: #F6F5EE; font-size: .8rem; color: var(--metin-ikincil); }
.st-form__ornek button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.st-form .uye__uyari[hidden] { display: none; }
.st-sahne { position: relative; display: grid; place-items: center; padding: 2rem; background: radial-gradient(90% 80% at 70% 30%, rgba(201, 184, 74, .22), transparent 60%), linear-gradient(rgba(41, 55, 30, .94), rgba(41, 55, 30, .94)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 380px repeat, var(--zeytin); }
.st-yol { width: 100%; max-width: 560px; height: auto; overflow: visible; color: var(--zeytin); }
.st-yol__golge { fill: none; stroke: rgba(0, 0, 0, .25); stroke-width: 18; stroke-linecap: round; transform: translateY(6px); filter: blur(6px); }
.st-yol__cizgi { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.st-yol__durak circle { fill: #fff; stroke: var(--yag); stroke-width: 2; }
.st-yol__durak--ara circle { fill: rgba(255, 255, 255, .92); }
.st-yol__durak--son circle { fill: var(--yag); stroke: #fff; }
.st-yol__yaprak { fill: var(--yaprak); }
.st-yol__arac circle { fill: var(--yag); stroke: var(--zeytin); stroke-width: 2; }
.st-yol text { font-family: var(--f-baslik); font-size: 17px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .st-yol__arac { display: none; } }

/* sonuç */
.st-sonuc { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.st-sonuc:focus { outline: none; }
.st-sonuc:not([hidden]) { animation: panelGir .5s var(--egri) both; }
.st-sonuc__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.st-ilerleme { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.st-ilerleme__durum { display: grid; gap: .2rem; }
.st-ilerleme__durum span { font-family: var(--f-baslik); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--zeytin); }
.st-ilerleme__durum small { font-size: .92rem; color: var(--metin-ikincil); }
.st-hat { position: relative; height: 6px; margin: 1.25rem 10% 0; border-radius: 6px; background: #ECEAE0; }
.st-hat__dolu { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yaprak), var(--yag)); transition: width 1.2s var(--egri); }
.st-hat__arac { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--zeytin); color: var(--yag); box-shadow: 0 0 0 6px rgba(201, 184, 74, .25), 0 10px 20px -8px rgba(41, 55, 30, .6); transition: left 1.2s var(--egri); }
.st-hat__arac .ikon { width: 22px; height: 22px; }
.st-adimlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: .5rem; }
.st-adimlar li { display: grid; justify-items: center; gap: .35rem; text-align: center; font-size: .86rem; color: var(--metin-ikincil); }
.st-adim__nokta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E0DED2; background: #fff; color: #A3A9AE; transition: background .4s, color .4s, border-color .4s; }
.st-adim__nokta .ikon { width: 20px; height: 20px; }
.st-adimlar b { font-weight: 600; color: var(--gece); }
.st-adimlar small { font-size: .78rem; }
.st-adimlar li.is-tamam .st-adim__nokta { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.st-adimlar li.is-simdi .st-adim__nokta { background: var(--zeytin); border-color: var(--zeytin); color: var(--yag); box-shadow: 0 0 0 6px rgba(201, 184, 74, .2); }
.st-adimlar li.is-simdi b { color: var(--zeytin); font-weight: 700; }
.st-ilerleme .hs-uyari a { font-weight: 700; color: var(--zeytin); text-underline-offset: 3px; }
.st-ilerleme .hs-uyari[hidden] { display: none; }

.st-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.st-bilgi { display: grid; margin: 0; }
.st-bilgi div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px dashed #DAD8CC; }
.st-bilgi div:last-child { border-bottom: 0; }
.st-bilgi dt { font-size: .84rem; color: var(--metin-ikincil); }
.st-bilgi dd { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0; font-size: .92rem; color: var(--gece); }
.st-bilgi b { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.st-olaylar { position: relative; display: grid; gap: 1.1rem; padding-left: 1.6rem; }
.st-olaylar::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: #ECEAE0; }
.st-olaylar li { position: relative; display: grid; gap: .1rem; }
.st-olaylar li::before { content: ""; position: absolute; left: -1.6rem; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--yaprak); }
.st-olaylar li:first-child::before { background: var(--yag); border-color: var(--zeytin); box-shadow: 0 0 0 4px rgba(201, 184, 74, .25); }
.st-olaylar time { font-size: .76rem; font-weight: 600; color: var(--metin-ikincil); }
.st-olaylar b { color: var(--gece); }
.st-olaylar small { font-size: .84rem; color: var(--metin-ikincil); }
.st-urunler__adet { font-size: .84rem; color: var(--metin-ikincil); }
.st-urunler .hs-urunler { margin-top: 0; }
.st-urunler .hs-kgorsel { width: 56px; height: 56px; border: 0; box-shadow: none; }
.st-eylemler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }

.st-yardim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.st-yardim a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; row-gap: .15rem; align-items: center; height: 100%; padding: 1.2rem 1.25rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; transition: border-color .3s, transform .35s var(--egri); }
.st-yardim a:hover { border-color: var(--zeytin); transform: translateY(-3px); }
.st-yardim span { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #E0DED2; color: var(--zeytin); }
.st-yardim .ikon { width: 22px; height: 22px; }
.st-yardim b { color: var(--gece); font-size: .98rem; }
.st-yardim small { font-size: .84rem; line-height: 1.5; color: var(--metin-ikincil); }

@media (max-width: 1023px) {
  .st-sorgu { grid-template-columns: minmax(0, 1fr); }
  .st-sahne { order: -1; padding: 1.25rem 1rem; }
  .st-yol { max-width: 420px; }
  .st-izgara, .st-yardim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .st-hat { margin-inline: 8%; }
  .st-hat__arac { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .st-adimlar li { font-size: .7rem; }
  .st-adimlar small { font-size: .66rem; }
  .st-adim__nokta { width: 34px; height: 34px; }
  .st-adim__nokta .ikon { width: 16px; height: 16px; }
  .st-bilgi div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .st-eylemler .hs-dugme { flex: 1 1 100%; }
}

/* ilerleme çizgisi adım dairelerinin ortasından geçer; ucunda parlayan nokta */
.st-izleme { position: relative; }
.st-izleme .st-hat { position: absolute; z-index: 0; top: 20px; left: 10%; right: 10%; margin: 0; height: 4px; }
.st-izleme .st-hat__arac { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--yag); box-shadow: 0 0 0 5px rgba(201, 184, 74, .3); }
.st-izleme .st-adimlar { position: relative; z-index: 1; margin-top: 0; }
@media (max-width: 767px) { .st-izleme .st-hat { top: 15px; } }


/* 33  404 ---------------------------------------------------------------------
   Üstte zeytin dalı; dalda boş kalmış bir sap. "404"ün sıfırı o daldan düşmüş zeytin:
   hafifçe sallanır, altında gölgesi. Ardından hızlı bağlantılar ve ürün önerileri. */
.h4-sahne {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(5.5rem, 4rem + 5vw, 8rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
  background: radial-gradient(60% 70% at 50% 40%, #FBFAF3 0%, rgba(245, 243, 230, 0) 70%), linear-gradient(rgba(245, 243, 230, .9), rgba(245, 243, 230, .9)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat, #F5F3E6;
}
.h4__dal { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(90px, 10vw, 140px); overflow: visible; }
.h4__sap { fill: none; stroke: #5B4A2E; stroke-width: 3.5; stroke-linecap: round; }
.h4__bos-sap { fill: none; stroke: #5B4A2E; stroke-width: 2.5; stroke-linecap: round; }
.h4__iz { fill: #5B4A2E; opacity: .5; }
.h4__yaprak { fill: var(--yaprak); }
.h4__yaprak:nth-of-type(even) { fill: #5E7F6E; }
.h4__zeytin { fill: #34431F; }
.h4-sahne__ic { position: relative; display: grid; justify-items: center; }
.h4__rakam { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.5rem, 1vw, 1.25rem); margin: 0; font-family: var(--f-baslik); font-size: clamp(7rem, 4rem + 14vw, 15rem); line-height: .8; color: var(--zeytin); }
.h4__rakam span { display: block; }
.h4__sifir { width: .74em; height: auto; margin-bottom: -.06em; overflow: visible; }
.h4__meyve { transform-box: fill-box; transform-origin: 50% 0%; animation: h4Salla 5.5s ease-in-out infinite; }
@keyframes h4Salla { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.h4__golge { transform-box: fill-box; transform-origin: center; animation: h4Golge 5.5s ease-in-out infinite; }
@keyframes h4Golge { 0%, 100% { transform: translateX(-6px) scaleX(.95); } 50% { transform: translateX(6px) scaleX(1.02); } }
@media (prefers-reduced-motion: reduce) { .h4__meyve, .h4__golge { animation: none; } }
.h4__ust { justify-content: center; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); color: var(--yaprak); }
.h4__baslik { margin: .5rem 0 .8rem; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: 1.1; color: var(--zeytin); }
.h4__metin { max-width: 48ch; font-size: 1.02rem; line-height: 1.65; color: #3C4650; }
.h4__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.h4__dugmeler .uye__dugme { width: auto; padding: 0 1.6rem; }
.h4__dugmeler .uye__dugme--cizgi .ikon { width: 18px; height: 18px; padding: 0; background: none; color: var(--zeytin); }

.h4-bag { margin-top: -1.5rem; position: relative; z-index: 1; }
.h4-bag__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.h4-bag a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: .9rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; box-shadow: 0 24px 50px -40px rgba(41, 55, 30, .6); transition: transform .4s var(--egri), border-color .3s; }
.h4-bag a:hover { transform: translateY(-3px); border-color: var(--zeytin); }
.h4-bag span { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #F2F0E4; color: var(--zeytin); transition: background .3s, color .3s; }
.h4-bag a:hover span { background: var(--zeytin); color: var(--yag); }
.h4-bag .ikon { width: 22px; height: 22px; }
.h4-bag b { font-size: 1rem; color: var(--gece); }
.h4-bag small { font-size: .82rem; color: var(--metin-ikincil); }
.h4-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h4-yardim { margin-top: 2rem; text-align: center; font-size: .9rem; color: var(--metin-ikincil); }
.h4-yardim a { color: var(--zeytin); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 768px) { .h4-oneri { padding-bottom: calc(var(--bolum) + 200px); } }
@media (max-width: 1023px) { .h4-bag__liste, .h4-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .h4-bag__liste { grid-template-columns: minmax(0, 1fr); gap: .6rem; } .h4-bag { margin-top: -1rem; } }


/* 34  Sözleşmeler / politikalar ------------------------------------------------
   Zeytin bandı (sağda güncelleme tarihi, okuma süresi, yazdır); solda gruplu belge menüsü,
   sağda belge kartı: "Kısaca" özet şeridi, numaralı içindekiler, numaralı maddeler.
   [[yer]] alanları kesik çerçeveli işaret olarak görünür. Yazdırılırken yalnız belge çıkar. */
@media (min-width: 768px) { .bs > .sp-govde { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + 220px); } }
.bs-meta { display: grid; gap: .6rem; justify-items: end; }
.bs-meta p { display: flex; align-items: baseline; gap: .6rem; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.bs-meta b { font-weight: 600; color: #fff; }
.bs-meta .hs-cikis { margin-top: .25rem; }

.bs-duzen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.bs-menu { display: grid; gap: .5rem; padding: .9rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 24px 50px -40px rgba(41, 55, 30, .5); }
.bs-menu__bas { padding: .4rem .6rem 0; font-family: var(--f-baslik); font-size: 1.3rem; color: var(--zeytin); }
.bs-menu__liste { display: grid; gap: .25rem; }
.bs-menu__grup p { padding: .8rem .6rem .3rem; font-size: .74rem; font-weight: 700; color: var(--yaprak); }
.bs-menu__grup ul { display: grid; gap: 2px; }
.bs-menu__oge { display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: 0 .75rem; border-radius: 12px; font-size: .9rem; color: #3C4650; text-decoration: none; transition: background .25s, color .25s; }
.bs-menu__oge .ikon { flex: none; width: 19px; height: 19px; color: var(--metin-ikincil); }
.bs-menu__oge:hover { background: #F6F5EE; color: var(--zeytin); }
.bs-menu__oge[aria-current="page"] { background: var(--zeytin); color: #fff; font-weight: 600; }
.bs-menu__oge[aria-current="page"] .ikon { color: var(--yag); }
.bs-menu__yardim { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; padding: .9rem; border-radius: 14px; background: #F6F5EE; font-size: .8rem; color: var(--metin-ikincil); text-decoration: none; transition: background .25s; }
.bs-menu__yardim:hover { background: #EFEDE2; }
.bs-menu__yardim .ikon { flex: none; width: 22px; height: 22px; color: var(--yaprak); }
.bs-menu__yardim b { display: block; font-size: .9rem; color: var(--gece); }

.bs-belge { min-width: 0; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -48px rgba(41, 55, 30, .55); }
.bs-ozet { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2.5vw, 3rem); background: linear-gradient(rgba(245, 243, 230, .92), rgba(245, 243, 230, .92)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 360px repeat; border-bottom: 1px solid #ECEBE4; }
.bs-ozet__bas { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; color: var(--yaprak); }
.bs-ozet__bas::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.bs-ozet ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.bs-ozet li { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid #ECEBE4; }
.bs-ozet b { font-family: var(--f-metin); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--zeytin); }
.bs-ozet span { font-size: .84rem; line-height: 1.45; color: var(--metin-ikincil); }
.bs-icindekiler { padding: 1.5rem clamp(1.25rem, 1rem + 2.5vw, 3rem) 0; }
.bs-icindekiler > p { font-size: .8rem; font-weight: 700; color: var(--metin-ikincil); }
.bs-icindekiler ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; margin-top: .6rem; padding-bottom: 1.5rem; border-bottom: 1px dashed #DAD8CC; }
.bs-icindekiler a { display: flex; align-items: baseline; gap: .75rem; padding: .4rem 0; font-size: .92rem; color: #3C4650; text-decoration: none; transition: color .25s; }
.bs-icindekiler a span { font-size: .78rem; font-weight: 700; color: var(--yag); font-variant-numeric: tabular-nums; }
.bs-icindekiler a:hover { color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.bs-metin { padding: .5rem clamp(1.25rem, 1rem + 2.5vw, 3rem) 1.5rem; }
.bs-madde { padding: 1.75rem 0; border-bottom: 1px solid #F0EFE8; scroll-margin-top: 140px; }
.bs-madde:last-child { border-bottom: 0; }
.bs-madde h2 { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1rem; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); line-height: 1.2; color: var(--zeytin); }
.bs-madde__no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--yag); font-family: var(--f-metin); font-size: .82rem; font-weight: 700; color: var(--zeytin); transform: translateY(-.2rem); }
.bs-madde p, .bs-liste { max-width: 72ch; color: #3C4650; line-height: 1.8; }
.bs-madde p + p, .bs-madde p + .bs-liste, .bs-liste + p, .bs-madde > * + * { margin-top: .9rem; }
.bs-madde a { color: var(--zeytin); font-weight: 600; text-underline-offset: 3px; }
.bs-madde > p > b:only-child { font-family: var(--f-baslik); font-weight: 400; font-size: 1.15rem; color: var(--gece); }
.bs-liste { display: grid; gap: .45rem; padding-left: 0; }
.bs-liste li { position: relative; padding-left: 1.4rem; }
.bs-liste li::before { content: ""; position: absolute; left: .2rem; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--yaprak); }
.bs-not { display: flex; gap: .7rem; padding: 1rem 1.2rem; border-radius: 14px; background: #FBF3E4; border-left: 3px solid var(--yag); color: #5A4413 !important; }
.bs-not .ikon { flex: none; width: 20px; height: 20px; margin-top: .2rem; }
.bs-yer { display: inline-block; padding: 0 .5rem; border-radius: 6px; border: 1px dashed rgba(74, 107, 92, .6); background: #F1F5F1; font-size: .88em; font-weight: 600; color: var(--yaprak); white-space: nowrap; }
.bs-kunye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: .5rem 0 0; max-width: 820px; }
.bs-kunye div { display: grid; gap: .15rem; padding: .75rem 0; border-bottom: 1px dashed #DAD8CC; }
.bs-kunye dt { font-size: .76rem; font-weight: 700; color: var(--metin-ikincil); }
.bs-kunye dd { margin: 0; font-size: .92rem; color: var(--gece); }
.bs-adimlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: .5rem; }
.bs-adimlar li { position: relative; display: grid; gap: .4rem; align-content: start; padding: 1.1rem; border-radius: 16px; background: #FAFAF6; border: 1px solid #ECEBE4; }
.bs-adimlar li + li::before { content: ""; position: absolute; left: -1rem; top: 36px; width: 1rem; border-top: 1px dashed #CFCAB4; }
.bs-adim__no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--zeytin); color: var(--yag); font-weight: 700; font-size: .9rem; }
.bs-adimlar b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.15rem; color: var(--zeytin); }
.bs-adimlar p { margin: 0 !important; font-size: .86rem; line-height: 1.55; }
.bs-tablo-kap { overflow-x: auto; margin-top: .5rem; border-radius: 16px; border: 1px solid #ECEBE4; }
.bs-tablo td, .bs-tablo th { padding: .9rem 1rem; }
.bs-tablo td { font-size: .88rem; line-height: 1.5; }
.bs-son { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.4rem clamp(1.25rem, 1rem + 2.5vw, 3rem); background: #FAFAF6; border-top: 1px solid #ECEBE4; }
.bs-son p { font-size: .82rem; line-height: 1.6; color: var(--metin-ikincil); }
.bs-son p b { color: var(--gece); }
.bs-son a:not(.hs-dugme) { color: var(--zeytin); }
.bs-son div { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 1023px) {
  .bs-duzen { grid-template-columns: minmax(0, 1fr); }
  .bs-menu { padding: .6rem; }
  .bs-menu__bas, .bs-menu__yardim { display: none; }
  .bs-menu__liste { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
  .bs-menu__liste::-webkit-scrollbar { display: none; }
  .bs-menu__grup { display: contents; }
  .bs-menu__grup p { display: none; }
  .bs-menu__grup ul { display: contents; }
  .bs-menu__oge { white-space: nowrap; border: 1px solid #ECEBE4; border-radius: 999px; }
  .bs-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-adimlar li + li::before { display: none; }
  .bs-meta { justify-items: start; }
}
@media (max-width: 767px) {
  .bs-ozet ul { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .bs-ozet li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .75rem; padding: .85rem 1rem; }
  .bs-ozet b { font-size: 1.2rem; }
  .bs-icindekiler ol { grid-template-columns: minmax(0, 1fr); }
  .bs-kunye { grid-template-columns: minmax(0, 1fr); }
  .bs-adimlar { grid-template-columns: minmax(0, 1fr); }
  .bs-madde h2 { gap: .7rem; }
  .bs-madde__no { width: 34px; height: 34px; font-size: .76rem; }
  .bs-yer { white-space: normal; }
  .bs-meta { grid-auto-flow: row; }
  .bs-son div { width: 100%; }
  .bs-son .hs-dugme { flex: 1; }
}
@media print {
  .duyuru, .ust, .menubar, .alt, .altnav, .bs-menu, .sp-bas nav, .bs-meta, .bs-son div, .cikinti, .bildirim, .perde { display: none !important; }
  .sp-bas { background: none !important; color: #000; border: 0; padding: 0 0 1rem; }
  .sp-bas__baslik { color: #000; font-size: 24pt; }
  .sp-bas__metin, .sp-bas__ust { color: #333 !important; }
  .bs-duzen { display: block; }
  .bs-belge { border: 0; box-shadow: none; border-radius: 0; }
  .bs-ozet { background: none; }
  .bs-madde { break-inside: avoid-page; }
  .sp-govde { padding: 0 !important; }
}


/* 35  Arama · Sipariş tamamlandı · Ödeme başarısız · Marka (Özel Hasat) ------------ */

/* ---------- ARAMA ---------- */
.ar-bas { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ar-bas .sp-bas__ust { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.ar-bas__baslik { max-width: 24ch; }
.ar-bas__baslik q { quotes: "“" "”"; color: var(--yag); }
.ar-bas__baslik small { display: block; margin-top: .6rem; font-family: var(--f-metin); font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, .75); }
.ar-form { position: relative; display: flex; align-items: center; max-width: 760px; margin-top: 1.5rem; padding: 6px 6px 6px 1.2rem; border-radius: 999px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.ar-form > .ikon { flex: none; width: 22px; height: 22px; color: var(--yaprak); }
.ar-form input { flex: 1; min-width: 0; height: 52px; padding: 0 .9rem; border: 0; background: none; font-size: 1.08rem; color: var(--gece); }
.ar-form input:focus { outline: none; }
.ar-form input::-webkit-search-cancel-button { display: none; }
.ar-form:focus-within { box-shadow: 0 0 0 3px rgba(201, 184, 74, .6), 0 20px 40px -24px rgba(0, 0, 0, .6); }
.ar-form__temizle { display: grid; place-items: center; width: 38px; height: 38px; margin-right: .3rem; border-radius: 50%; color: var(--metin-ikincil); }
.ar-form__temizle:hover { background: #F2F0E4; }
.ar-form__temizle .ikon { width: 16px; height: 16px; }
.ar-form__gonder { height: 52px; padding: 0 1.8rem; border-radius: 999px; background: var(--zeytin); color: #fff; font-weight: 700; transition: background .3s; }
.ar-form__gonder:hover { background: var(--zeytin-2); }
.ar-populer { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.ar-populer a { display: inline-flex; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .88); font-size: .84rem; text-decoration: none; transition: background .25s, border-color .25s; }
.ar-populer a:hover, .ar-populer a[aria-current] { background: rgba(255, 255, 255, .12); border-color: var(--yag); color: #fff; }
.ar-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.ar-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-izgara .kart { animation: kartGir .45s var(--egri) both; }
.ar-izgara mark, .ar-yazi mark { padding: 0 .1em; border-radius: 3px; background: rgba(201, 184, 74, .38); color: inherit; }
.ar-yazilar { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ar-yazilar__bas { margin-bottom: 1rem; font-size: var(--t-2); color: var(--zeytin); }
.ar-yazilar__bas span { font-family: var(--f-metin); font-size: .9rem; font-weight: 600; color: var(--metin-ikincil); }
.ar-yazi-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ar-yazi a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .75rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; transition: border-color .3s, transform .35s var(--egri); }
.ar-yazi a:hover { border-color: var(--zeytin); transform: translateY(-2px); }
.ar-yazi img { width: 110px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.ar-yazi b { display: block; font-family: var(--f-baslik); font-weight: 400; font-size: 1.05rem; line-height: 1.25; color: var(--gece); }
.ar-yazi small { display: -webkit-box; margin-top: .25rem; font-size: .8rem; line-height: 1.45; color: var(--metin-ikincil); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-bos { display: grid; justify-items: center; gap: .6rem; padding: 2rem 1rem 3rem; text-align: center; }
.ar-bos__resim { width: 200px; height: auto; margin-bottom: .5rem; }
.ar-bos__baslik { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--zeytin); }
.ar-bos__baslik span { color: var(--gece); }
.ar-bos__oneri { font-size: 1.05rem; color: var(--metin-ikincil); }
.ar-bos__oneri a { font-weight: 700; color: var(--zeytin); text-underline-offset: 3px; }
.ar-bos__ipuclari { display: grid; gap: .3rem; margin-top: .4rem; font-size: .9rem; color: var(--metin-ikincil); }
.ar-kesfet { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ar-kesfet__bas { margin-bottom: 1rem; font-size: var(--t-2); color: var(--zeytin); }
.ar-katlar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; }
.ar-katlar a { display: grid; justify-items: center; gap: .6rem; padding: 1.2rem .6rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; font-weight: 600; font-size: .9rem; color: var(--gece); text-align: center; text-decoration: none; transition: border-color .3s, transform .35s var(--egri); }
.ar-katlar a:hover { border-color: var(--zeytin); transform: translateY(-3px); }
.ar-katlar span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F2F0E4; color: var(--zeytin); transition: background .3s, color .3s; }
.ar-katlar a:hover span { background: var(--zeytin); color: var(--yag); }
.ar-katlar .ikon { width: 24px; height: 24px; }
@media (min-width: 768px) { .ar > .sp-govde { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + 220px); } }
@media (max-width: 1099px) { .ar-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ar-katlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ar-yazi-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ar-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .ar-form { padding-left: 1rem; }
  .ar-form input { height: 46px; font-size: 1rem; padding: 0 .6rem; }
  .ar-form__gonder { height: 46px; padding: 0 1.1rem; }
  .ar-populer { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); }
  .ar-populer::-webkit-scrollbar { display: none; }
  .ar-populer li { flex: none; }
  .ar-katlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-katlar a { grid-auto-flow: column; justify-content: start; padding: .8rem; text-align: left; }
  .ar-katlar span { width: 42px; height: 42px; }
  .ar-yazi-liste { grid-template-columns: minmax(0, 1fr); }
  .ar-arac .hs-filtreler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ar-arac .hs-filtre { flex: none; }
}

/* ---------- SİPARİŞ SONUÇ SAYFALARI ---------- */
.sp-adimlar--durum li.is-tamam { color: #fff; }
.sp-adimlar--durum li.is-tamam span { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.sp-adimlar--durum li.is-tamam + li::before, .sp-adimlar--durum li.is-tamam + li.is-tamam::before { background: var(--yaprak); }
.sp-adimlar--durum li.is-hata { color: #fff; }
.sp-adimlar--durum li.is-hata span { background: #C2554A; border-color: #C2554A; color: #fff; box-shadow: 0 0 0 6px rgba(194, 85, 74, .25); }
.sp-adimlar--durum span .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.so-bas { position: relative; overflow: hidden; padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.so-bas__ust { display: flex; justify-content: center; padding-top: .5rem; }
.so-kahraman { position: relative; z-index: 1; display: grid; justify-items: center; margin-top: clamp(1rem, .5rem + 2vw, 2rem); text-align: center; }
.so-kahraman__ust { justify-content: center; }
.so-kahraman__baslik { margin: .35rem 0 .75rem; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); }
.so-kahraman__metin { max-width: 54ch; font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.so-kahraman__metin b { color: #fff; }
.st-celenk { width: 148px; height: 148px; margin-bottom: .5rem; overflow: visible; }
.st-celenk__sap { fill: none; stroke: #C9B84A; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: celSap 1s var(--egri) .1s both; }
@keyframes celSap { from { stroke-dashoffset: 1; } }
.st-celenk__yaprak { fill: #8FAA8C; transform-box: fill-box; transform-origin: 100% 100%; animation: celYaprak .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.45s + var(--s) * .12s); }
.st-celenk__yaprak--ic { fill: #6F8E78; }
@keyframes celYaprak { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.st-celenk__zeytin { fill: var(--yag); transform-box: fill-box; transform-origin: center; animation: celYaprak .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.5s + var(--s) * .12s); }
.st-celenk__daire { fill: var(--yag); transform-box: fill-box; transform-origin: center; animation: celDaire .6s cubic-bezier(.3, 1.4, .5, 1) .2s both; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
@keyframes celDaire { from { transform: scale(0); } }
.st-celenk__tik { fill: none; stroke: var(--zeytin); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: celSap .5s var(--egri) .75s both; }
.so-no { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .55rem .55rem .55rem 1.3rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 184, 74, .5); }
.so-no > span { font-size: .8rem; color: rgba(255, 255, 255, .7); }
.so-no b { font-size: 1.15rem; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.so-no__kopya { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 1rem; border-radius: 999px; background: var(--yag); color: var(--zeytin); font-weight: 700; font-size: .82rem; }
.so-no__kopya .ikon { width: 16px; height: 16px; }
.so-yapraklar { position: absolute; inset: 0; pointer-events: none; }
.so-yaprak { position: absolute; top: -30px; width: 16px; height: 9px; border-radius: 0 100% 0 100%; background: #8FAA8C; opacity: 0; animation: yaprakDus var(--sure) ease-in var(--gecik) forwards; }
.so-yaprak:nth-child(3n) { background: var(--yag); width: 8px; height: 10px; border-radius: 50%; }
@keyframes yaprakDus { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), 420px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .so-yapraklar { display: none; } .st-celenk * { animation: none !important; } }

.so-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.so-ana { display: grid; gap: 1.25rem; min-width: 0; }
.so-yan { display: grid; gap: 1rem; }
.so-ana .hs-kart__bas h2, .so-yan .hs-kart__bas h2 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.4rem; color: var(--zeytin); }
.so-zaman__liste { position: relative; display: grid; gap: 0; }
.so-zaman__liste li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding-bottom: 1.4rem; }
.so-zaman__liste li:last-child { padding-bottom: 0; }
.so-zaman__liste li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: #ECEAE0; }
.so-zaman__liste li.is-tamam:not(:last-child)::before { background: var(--yaprak); }
.so-zaman__ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #E0DED2; background: #fff; color: #A3A9AE; }
.so-zaman__ikon .ikon { width: 22px; height: 22px; }
.is-tamam .so-zaman__ikon { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.is-simdi .so-zaman__ikon { background: var(--zeytin); border-color: var(--zeytin); color: var(--yag); box-shadow: 0 0 0 6px rgba(201, 184, 74, .2); }
.so-zaman__metin { display: grid; gap: .15rem; padding-top: .35rem; }
.so-zaman__metin b { font-size: 1rem; color: var(--gece); }
.so-zaman__metin small { font-size: .86rem; line-height: 1.5; color: var(--metin-ikincil); }
.so-zaman__tarih { padding: .3rem .75rem; margin-top: .45rem; border-radius: 999px; background: #F6F5EE; font-size: .8rem; font-weight: 700; color: var(--zeytin); white-space: nowrap; }
.is-simdi .so-zaman__tarih { background: var(--yag); }
.so-zaman__not { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed #DAD8CC; font-size: .82rem; color: var(--metin-ikincil); }
.so-bilgiler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.so-bilgi h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .84rem; font-weight: 700; color: var(--yaprak); }
.so-bilgi h3 .ikon { width: 18px; height: 18px; }
.so-bilgi p { font-size: .9rem; line-height: 1.6; color: #3C4650; }
.so-bilgi b { color: var(--gece); }
.so-bilgi small { font-size: .78rem; color: var(--metin-ikincil); }
.so-uye { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 22px; color: #fff; background: radial-gradient(80% 140% at 100% 0%, rgba(201, 184, 74, .22), transparent 55%), var(--zeytin); }
.so-uye h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.so-uye p { margin-top: .35rem; max-width: 52ch; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.so-uye .uye__dugme { width: auto; padding: 0 1.5rem; background: var(--yag); color: var(--zeytin); }
.so-uye .uye__dugme .ikon { background: var(--zeytin); color: var(--yag); }
.so-havale { border: 1px solid rgba(201, 184, 74, .6); background: linear-gradient(180deg, #FFFDF4, #fff 60%); }
.so-havale__ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.so-hv-kart { aspect-ratio: auto; min-height: 190px; }
.so-hv-kart .hv-kart__iban { font-size: 1.02rem; letter-spacing: .04em; white-space: nowrap; }
.so-havale__bilgi { display: grid; gap: .9rem; margin: 0; }
.so-havale__bilgi dt { font-size: .8rem; color: var(--metin-ikincil); }
.so-havale__bilgi dd { margin: .15rem 0 0; font-size: 1.2rem; color: var(--gece); }
.so-havale__d { display: flex; flex-wrap: wrap; gap: .5rem; }
.so-havale__d .hv-kopya { padding: 0 1.1rem; }
.so-ozet__adet { font-size: .84rem; color: var(--metin-ikincil); }
.so-ozet__liste { gap: .8rem !important; margin-top: 0 !important; }
.so-ozet__liste .hs-kgorsel { width: 54px; height: 54px; border: 0; box-shadow: none; }
.so-ozet__liste .hs-urun__ad { font-size: .86rem; }
.so-ozet__hesap { max-width: none !important; margin-top: 1.1rem !important; padding-top: 1rem; border-top: 1px dashed #DAD8CC; }
.so-ozet__hesap .hs-hesap__toplam dd { font-size: 1.25rem; color: #6E5B12; }
.so-ozet__duzenle { margin-top: 1rem; }
.so-eylemler { display: grid; gap: .6rem; }
.so-yardim { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; font-size: .84rem; color: var(--metin-ikincil); text-decoration: none; transition: border-color .3s; }
.so-yardim:hover { border-color: #1F8F4E; }
.so-yardim > .ikon { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: #E7F4EC; color: #1F8F4E; }
.so-yardim--tel > .ikon { background: #F2F0E4; color: var(--zeytin); }
.so-yardim--tel:hover { border-color: var(--zeytin); }
.so-yardim b { display: block; font-size: .95rem; color: var(--gece); }
.so-yardim i { font-style: normal; white-space: nowrap; }
@media (min-width: 768px) { .so > .sp-govde { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + 220px); } }

/* başarısız */
.so-bas--hata { background: radial-gradient(70% 90% at 50% 0%, rgba(194, 85, 74, .28), transparent 65%), linear-gradient(rgba(41, 55, 30, .95), rgba(41, 55, 30, .95)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat, var(--zeytin); border-bottom-color: #C2554A; }
.so-hata-rozet { display: grid; place-items: center; width: 116px; height: 116px; margin-bottom: .5rem; }
.so-hata-rozet svg { width: 100%; height: 100%; overflow: visible; }
.so-hata-rozet__daire { fill: #F6E4E0; stroke: #C2554A; stroke-width: 5; stroke-dasharray: 1; animation: celSap .7s var(--egri) .1s both; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); }
.so-hata-rozet__x { fill: none; stroke: #A63F34; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; animation: celSap .45s var(--egri) .7s both; }
.so-kahraman--hata .so-kahraman__ust { color: #F0B3AA; }
.so-kahraman--hata .so-kahraman__ust::before { background: #F0B3AA; }
.so-banka { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; border-left: 4px solid #C2554A; }
.so-banka__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #F8ECE9; color: var(--indirim); }
.so-banka__ikon .ikon { width: 26px; height: 26px; }
.so-banka__et { font-size: .78rem; font-weight: 700; color: var(--indirim); }
.so-banka h2 { margin: .15rem 0 .25rem; font-family: var(--f-baslik); font-weight: 400; font-size: 1.45rem; color: var(--gece); }
.so-banka__ic p:last-child { font-size: .9rem; color: var(--metin-ikincil); }
.so-banka__kunye { display: grid; gap: .5rem; margin: 0; padding: .9rem 1.1rem; border-radius: 14px; background: #FAFAF6; font-size: .8rem; }
.so-banka__kunye div { display: flex; justify-content: space-between; gap: 1.5rem; }
.so-banka__kunye dt { color: var(--metin-ikincil); }
.so-banka__kunye dd { margin: 0; font-weight: 700; color: var(--gece); font-variant-numeric: tabular-nums; }
.so-yollar__bas { margin-bottom: 1rem; font-size: var(--t-2); color: var(--zeytin); }
.so-yollar__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.so-yol { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-items: center; padding: 1.25rem 3rem 1.25rem 1.25rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-align: left; text-decoration: none; box-shadow: 0 20px 40px -38px rgba(41, 55, 30, .6); transition: border-color .3s, transform .4s var(--egri); }
.so-yol:hover { border-color: var(--zeytin); transform: translateY(-3px); }
.so-yol__ikon { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F2F0E4; color: var(--zeytin); transition: background .3s, color .3s; }
.so-yol:hover .so-yol__ikon { background: var(--zeytin); color: var(--yag); }
.so-yol__ikon .ikon { width: 24px; height: 24px; }
.so-yol b { font-size: 1.02rem; color: var(--gece); }
.so-yol small { font-size: .84rem; line-height: 1.45; color: var(--metin-ikincil); }
.so-yol__ok { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--metin-ikincil); transition: transform .35s var(--egri); }
.so-yol__ok .ikon { width: 18px; height: 18px; }
.so-yol:hover .so-yol__ok { transform: translate(3px, -50%); color: var(--zeytin); }
.so-yol[aria-expanded="true"] { border-color: var(--zeytin); }
.so-yol[aria-expanded="true"] .so-yol__ok { transform: translateY(-50%) rotate(180deg); }
.so-yol--ana { background: var(--zeytin); border-color: var(--zeytin); }
.so-yol--ana b { color: #fff; }
.so-yol--ana small { color: rgba(255, 255, 255, .75); }
.so-yol--ana .so-yol__ikon { background: var(--yag); color: var(--zeytin); }
.so-yol--ana .so-yol__ok { color: var(--yag); }
.so-yol--ana:hover .so-yol__ikon { background: #fff; }
.so-yol--wp:hover { border-color: #1F8F4E; }
.so-yol--wp:hover .so-yol__ikon { background: #1F8F4E; color: #fff; }
.so-hv-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 1rem; animation: panelGir .45s var(--egri) both; }
.so-hv-panel[hidden] { display: none; }
.so-hv-panel__metin { display: grid; gap: 1rem; font-size: .92rem; line-height: 1.6; color: #3C4650; }
.so-nedenler ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.so-nedenler li { display: flex; gap: .6rem; padding: .65rem .8rem; border-radius: 12px; font-size: .88rem; line-height: 1.5; color: #3C4650; transition: background .3s; }
.so-nedenler li .ikon { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--metin-ikincil); }
.so-nedenler li.is-olasi { background: #F8ECE9; color: var(--gece); font-weight: 600; }
.so-nedenler li.is-olasi .ikon { color: var(--indirim); }
.so-nedenler__not { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed #DAD8CC; font-size: .84rem; color: var(--metin-ikincil); }
.so-nedenler__not .ikon { flex: none; width: 20px; height: 20px; color: var(--yaprak); }

@media (max-width: 1099px) { .so-duzen { grid-template-columns: minmax(0, 1fr); } .so-bilgiler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .so-bilgiler, .so-havale__ic, .so-hv-panel, .so-yollar__izgara, .so-nedenler ul { grid-template-columns: minmax(0, 1fr); }
  .so-no { flex-wrap: wrap; justify-content: center; border-radius: 20px; padding: .8rem 1rem; gap: .5rem .8rem; }
  .so-banka { grid-template-columns: 48px minmax(0, 1fr); }
  .so-banka__ikon { width: 48px; height: 48px; }
  .so-banka__kunye { grid-column: 1 / -1; }
  .so-zaman__liste li { grid-template-columns: 44px minmax(0, 1fr); }
  .so-zaman__ikon { width: 44px; height: 44px; }
  .so-zaman__liste li:not(:last-child)::before { left: 21px; top: 44px; }
  .so-zaman__tarih { grid-column: 2; justify-self: start; margin-top: .2rem; }
  .so-hv-kart .hv-kart__iban { font-size: .9rem; letter-spacing: .02em; }
  .sp-adimlar--durum { width: 100%; }
}

/* ---------- MARKA: Özel Hasat ---------- */
.mr { background: var(--kirec); }
.mr-kahraman { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 1.25rem 0 0; background: radial-gradient(70% 90% at 75% 45%, #2E3F55 0%, #1D2835 55%, #141C26 100%); }
.mr-kahraman::after { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat; opacity: .05; mix-blend-mode: screen; }
.mr-kahraman__isik { position: absolute; z-index: -1; right: 8%; top: 12%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 184, 74, .28), transparent 70%); filter: blur(10px); animation: mrIsik 8s ease-in-out infinite; }
@keyframes mrIsik { 50% { transform: scale(1.1); opacity: .8; } }
.mr-kahraman__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem; align-items: center; min-height: min(78vh, 700px); }
.mr-kahraman .kat-yol { position: absolute; top: 1.25rem; }
.mr-kahraman__metin { padding-block: 4.5rem 3rem; }
.mr-seri { display: flex; align-items: center; gap: .7rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--yag); }
.mr-seri::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.mr-baslik { padding-top: .14em; margin: .3rem 0 .3rem; font-size: clamp(3.6rem, 2.2rem + 6vw, 7.8rem); line-height: .92; letter-spacing: -.01em; background: linear-gradient(180deg, #FFFFFF 30%, #E6D98A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mr-alt { font-family: var(--f-baslik); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: rgba(255, 255, 255, .85); }
.mr-soz { max-width: 44ch; margin-top: 1.25rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.mr-rozetler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.mr-rozetler li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; border: 1px solid rgba(201, 184, 74, .45); font-size: .84rem; color: #fff; background: rgba(255, 255, 255, .04); }
.mr-rozetler .ikon { width: 16px; height: 16px; color: var(--yag); }
.mr-rozetler .ikon use[href="#i-yaprak"], .mr-rozetler .ikon use[href="#i-yildiz"] { fill: currentColor; }
.mr-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.mr-dugmeler .uye__dugme { width: auto; padding: 0 1.5rem; }
.mr-dugme--altin { background: var(--yag) !important; color: var(--gece) !important; }
.mr-dugme--altin::before { background: #DCCB63 !important; }
.mr-dugme--altin .ikon { background: var(--gece) !important; color: var(--yag) !important; }
.mr-dugme--acik { color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; }
.mr-dugme--acik::before { background: rgba(255, 255, 255, .08) !important; }
.mr-dugme--acik .ikon { width: 18px; height: 18px; padding: 0; background: none; color: var(--yag); }
.mr-vitrin { position: relative; height: min(64vh, 560px); align-self: end; }
.mr-vitrin img { position: absolute; bottom: 64px; height: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); animation: mrGir 1s var(--egri) both; }
.mr-vitrin__5 { left: 36%; width: 34%; animation-delay: .15s !important; }
.mr-vitrin__3 { left: 6%; width: 36%; bottom: 58px !important; animation-delay: .3s !important; }
.mr-vitrin__1 { left: 66%; width: 22%; animation-delay: .45s !important; }
.mr-vitrin__05 { left: 84%; width: 11%; animation-delay: .6s !important; }
@keyframes mrGir { from { opacity: 0; transform: translateY(40px); } }
.mr-vitrin__zemin { position: absolute; left: -4%; right: -6%; bottom: 40px; height: 42px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.mr-kunye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .12); }
.mr-kunye li { display: grid; gap: .15rem; padding: 1.5rem 1rem 1.6rem 0; }
.mr-kunye li + li { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.mr-kunye b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.8rem; color: var(--yag); }
.mr-kunye span { font-size: .84rem; color: rgba(255, 255, 255, .65); }
.mr-hikaye { padding-block: var(--bolum); }
.mr-hikaye__ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.mr-hikaye__gorsel { position: relative; margin: 0; }
.mr-hikaye__gorsel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: 0 40px 70px -44px rgba(29, 40, 53, .7); }
.mr-hikaye__gorsel figcaption { position: absolute; left: 1.1rem; bottom: 1.1rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(29, 40, 53, .75); color: #fff; font-size: .82rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mr-isik { padding-block: var(--bolum); color: #fff; background: radial-gradient(60% 90% at 20% 30%, rgba(201, 184, 74, .16), transparent 60%), var(--gece); }
.mr-isik__ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.mr-isik__sema svg { width: 100%; height: auto; overflow: visible; }
.mr-isik__gunes circle { fill: var(--yag); }
.mr-isik__gunes path { stroke: var(--yag); stroke-width: 4; stroke-linecap: round; }
.mr-isik__isin { stroke: rgba(201, 184, 74, .75); stroke-width: 3; stroke-dasharray: 8 8; stroke-linecap: round; animation: isinAk 1.6s linear infinite; animation-delay: var(--g, 0s); }
@keyframes isinAk { to { stroke-dashoffset: -32; } }
.mr-isik__kalkan { fill: #fff; opacity: .9; }
.mr-isik__sema text { font-family: var(--f-metin); font-size: 12px; fill: rgba(255, 255, 255, .6); }
.mr-boylar { padding-block: var(--bolum); }
.mr-secim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 1.5rem; align-items: stretch; }
.mr-raf { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: .5rem; padding: 2rem 1.5rem 0; border-radius: 24px; background: linear-gradient(180deg, #fff 0%, #F6F5EE 100%); border: 1px solid #ECEBE4; min-height: 380px; }
.mr-raf::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 56px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #D8CFA8, #BBAE7A); box-shadow: 0 8px 14px -6px rgba(90, 70, 20, .4); }
.mr-raf li { display: flex; align-items: flex-end; height: 100%; }
.mr-raf__oge { position: relative; display: grid; justify-items: center; gap: 1.1rem; padding: 0 .25rem; transition: transform .45s var(--egri); }
.mr-raf__oge img { height: calc(var(--y) * 2.8px); width: auto; max-width: 150px; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(29, 40, 53, .25)); transition: transform .45s var(--egri), filter .45s; }
.mr-raf__et { display: grid; place-items: center; min-width: 58px; height: 34px; padding: 0 .8rem; margin-bottom: 12px; border-radius: 999px; background: #fff; border: 1px solid #E0DED2; font-weight: 700; font-size: .86rem; color: var(--gece); transition: background .3s, color .3s, border-color .3s; }
.mr-raf__oge:hover img { transform: translateY(-6px); }
.mr-raf__oge.is-secili img { transform: translateY(-14px) scale(1.04); filter: drop-shadow(0 26px 18px rgba(29, 40, 53, .35)); }
.mr-raf__oge.is-secili .mr-raf__et { background: var(--gece); border-color: var(--gece); color: var(--yag); }
.mr-raf__oge:focus-visible { outline: 2px solid var(--yaprak); outline-offset: 4px; border-radius: 12px; }
.mr-detay { display: grid; align-content: center; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.mr-detay__seri { font-size: .8rem; font-weight: 700; color: var(--yaprak); }
.mr-detay__ad { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); line-height: 1; color: var(--gece); }
.mr-detay__ad small { font-family: var(--f-metin); font-size: 1rem; color: var(--metin-ikincil); }
.mr-detay__kunye { display: grid; gap: .6rem; margin: 0; padding: 1rem 0; border-block: 1px dashed #DAD8CC; }
.mr-detay__kunye div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.mr-detay__kunye dt { color: var(--metin-ikincil); }
.mr-detay__kunye dd { margin: 0; font-weight: 700; color: var(--gece); letter-spacing: .02em; }
.mr-durum { display: inline-flex; align-items: center; gap: .4rem; color: #6E5B12 !important; }
.mr-durum .ikon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.mr-haber-form { display: grid; gap: .6rem; }
.mr-haber-form label { font-size: .88rem; font-weight: 600; color: var(--gece); }
.mr-haber-form__satir { display: flex; gap: .5rem; }
.mr-haber-form input { flex: 1; min-width: 0; height: 48px; padding: 0 1rem; border-radius: 999px; border: 1px solid #DEDCD0; background: #FAFAF6; font-size: .95rem; }
.mr-haber-form input:focus { outline: none; border-color: var(--zeytin); background: #fff; }
.mr-haber-form .alan__hata:empty { display: none; }
.mr-haber-form .hs-form__not[hidden] { display: none; }
.mr-teknik { padding-bottom: var(--bolum); }
.mr-teknik__ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.mr-teknik__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.mr-teknik__liste div { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid #ECEBE4; }
.mr-teknik__liste dt { font-size: .78rem; font-weight: 700; color: var(--yaprak); }
.mr-teknik__liste dd { margin: 0; font-size: .95rem; color: var(--gece); }
.mr-odul { padding-bottom: var(--bolum); }
.mr-odul__kart { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 26px; background: #fff; border: 1px solid #ECEBE4; }
.mr-odul__kart p:not(.hk-ust) { color: var(--metin-ikincil); }
.mr-odul__kart .baglanti { margin-top: .9rem; color: var(--zeytin); }
.mr-odul__kart ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.mr-odul__kart li { display: grid; place-items: center; aspect-ratio: 1; }
.mr-odul__kart img { max-height: 76px; max-width: 100%; object-fit: contain; }
.mr-haber { padding-bottom: calc(var(--bolum) + 200px); }
.mr-haber__kart { position: relative; overflow: hidden; display: grid; justify-items: center; gap: .75rem; padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem; border-radius: 30px; text-align: center; color: #fff; background: radial-gradient(60% 100% at 50% 0%, rgba(201, 184, 74, .25), transparent 60%), var(--gece); }
.mr-haber__ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--yag); color: var(--gece); box-shadow: 0 0 0 10px rgba(201, 184, 74, .18); }
.mr-haber__ikon .ikon { width: 28px; height: 28px; }
.mr-haber__kart h2 { max-width: 20ch; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.1; }
.mr-haber__kart > p { color: rgba(255, 255, 255, .72); }
.mr-haber-form--genis { width: min(560px, 100%); margin-top: .75rem; }
.mr-haber-form--genis input { height: 54px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.mr-haber-form--genis input::placeholder { color: rgba(255, 255, 255, .55); }
.mr-haber-form--genis input:focus { background: rgba(255, 255, 255, .12); border-color: var(--yag); }
.mr-haber-form--genis .uye__dugme { width: auto; padding: 0 1.4rem; }
.mr-haber-form--genis .hs-form__not { color: #B9D3BE; justify-content: center; }
.mr-seriler { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.mr-seriler h2 { margin-bottom: 1rem; }
.mr-seriler ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mr-seriler a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: .9rem 1.2rem .9rem .9rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; transition: border-color .3s, transform .35s var(--egri); }
.mr-seriler a:hover { border-color: var(--zeytin); transform: translateY(-3px); }
.mr-seri__gorsel { grid-row: 1 / 3; display: grid; place-items: center; width: 76px; height: 90px; border-radius: 14px; background: #FAFAF6; }
.mr-seri__gorsel img { max-height: 78px; max-width: 60px; object-fit: contain; }
.mr-seriler b { align-self: end; font-family: var(--f-baslik); font-weight: 400; font-size: 1.2rem; color: var(--gece); }
.mr-seriler small { align-self: start; font-size: .82rem; color: var(--metin-ikincil); }
.mr-seriler a > .ikon { grid-row: 1 / 3; grid-column: 3; width: 18px; height: 18px; color: var(--metin-ikincil); }
@media (max-width: 1023px) {
  .mr-kahraman__ic, .mr-hikaye__ic, .mr-isik__ic, .mr-secim, .mr-teknik__ic, .mr-odul__kart { grid-template-columns: minmax(0, 1fr); }
  .mr-kahraman__ic { min-height: 0; gap: 0; }
  .mr-kahraman__metin { padding-block: 4rem 1rem; }
  .mr-vitrin { height: 380px; max-width: 560px; width: 100%; justify-self: center; }
  .mr-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-kunye li:nth-child(3) { padding-left: 0; border-left: 0; }
  .mr-kunye li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .mr-isik__sema { max-width: 420px; }
  .mr-seriler ul { grid-template-columns: minmax(0, 1fr); }
  .mr-teknik__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mr-vitrin { height: 300px; }
  .mr-vitrin img { bottom: 48px; }
  .mr-vitrin__zemin { bottom: 28px; }
  .mr-raf { min-height: 300px; padding: 1.5rem .5rem 0; gap: 0; }
  .mr-raf::after { left: .5rem; right: .5rem; bottom: 50px; }
  .mr-raf__oge img { height: calc(var(--y) * 1.9px); max-width: 64px; }
  .mr-raf__et { min-width: 0; height: 30px; padding: 0 .55rem; font-size: .76rem; }
  .mr-odul__kart ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mr-haber-form__satir { flex-direction: column; }
  .mr-haber-form--genis .uye__dugme { width: 100%; }
  .mr-dugmeler .uye__dugme { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .mr-vitrin img, .mr-kahraman__isik, .mr-isik__isin { animation: none; } }


/* 36  Blog + yazı sayfası --------------------------------------------------------
   Liste: dergi kapağı başlığı (büyük Marcellus, silik dal çizimi), kategori çipleri, arama;
   öne çıkan yazı iki sütun genişliğinde, yanında iki orta kart, sonra üçlü ızgara.
   Yazı: okuma çizgisi, editoryal başlık + geniş kapak, yapışkan içindekiler/paylaş, 68ch metin
   (ilk harf büyük), zeytin yapraklı maddeler, galeri + büyütme, imza, komşu yazılar. */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: .8rem; color: var(--metin-ikincil); }
.bl-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.bl-meta .ikon { width: 15px; height: 15px; }
.bl-meta__kat { padding: .25rem .7rem; border-radius: 999px; background: #EEF3EE; color: var(--yaprak) !important; font-weight: 700; font-size: .74rem; }

/* ---- liste ---- */
.bl-bas { position: relative; overflow: hidden; padding: 1.25rem 0 2rem; background: linear-gradient(rgba(245, 243, 230, .88), rgba(245, 243, 230, .88)), url("../img/desen/zeytin-dali-acik.webp") 0 0 / 420px repeat, #F5F3E6; border-bottom: 1px solid #E6E2CC; }
.bl-bas__dal { position: absolute; right: -40px; top: 10px; width: min(640px, 55vw); height: auto; fill: none; stroke: #5B4A2E; stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.bl-bas__dal .y { fill: var(--yaprak); stroke: none; opacity: .8; }
.bl-bas__dal circle { fill: var(--zeytin); stroke: none; }
.bl-bas__ic { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; margin-top: clamp(2rem, 1rem + 3vw, 4rem); }
.bl-bas__ust { display: flex; align-items: center; gap: .6rem; font-size: var(--t-kucuk); font-weight: 700; color: var(--yaprak); }
.bl-bas__ust::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.bl-bas__baslik { margin-top: .8rem; font-size: clamp(3.2rem, 2rem + 5.5vw, 7rem); line-height: .92; letter-spacing: -.015em; color: var(--zeytin); }
.bl-bas__sag { display: grid; gap: 1.25rem; padding-bottom: .5rem; }
.bl-bas__metin { font-size: 1.05rem; line-height: 1.65; color: #3C4650; }
.bl-ara { position: relative; display: flex; align-items: center; }
.bl-ara .ikon { position: absolute; left: 1.1rem; width: 19px; height: 19px; color: var(--yaprak); pointer-events: none; }
.bl-ara input { width: 100%; height: 52px; padding: 0 1.2rem 0 3rem; border-radius: 999px; border: 1px solid #DAD6BE; background: #fff; font-size: .98rem; }
.bl-ara input:focus { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 1px var(--zeytin); }
.bl-cipler { position: relative; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #E0DBC2; }
.bl-cip { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .55rem 0 1.1rem; border-radius: 999px; background: #fff; border: 1px solid #E0DBC2; font-size: .88rem; font-weight: 600; color: #3C4650; transition: background .3s, color .3s, border-color .3s; }
.bl-cip span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #F2F0E4; font-size: .74rem; color: var(--zeytin); }
.bl-cip:hover { border-color: var(--zeytin); }
.bl-cip[aria-pressed="true"] { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.bl-cip[aria-pressed="true"] span { background: var(--yag); }

.bl-govde { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; }
.bl-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.bl-kart { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -52px rgba(41, 55, 30, .6); transition: transform .5s var(--egri), box-shadow .5s var(--egri); }
.bl-kart[hidden] { display: none; }
.bl-kart:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -46px rgba(41, 55, 30, .6); }
.bl-kart__gorsel { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #E8E6D8; }
.bl-kart__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--egri); }
.bl-kart:hover .bl-kart__img { transform: scale(1.05); }
.bl-kart__ic { display: grid; gap: .7rem; align-content: start; padding: 1.3rem 1.4rem 1.5rem; }
.bl-kart__baslik { font-size: 1.35rem; line-height: 1.22; color: var(--gece); }
.bl-kart__baslik a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--egri); }
.bl-kart:hover .bl-kart__baslik a { background-size: 100% 1px; }
.bl-kart__baslik a::after { content: ""; position: absolute; inset: 0; }
.bl-kart { position: relative; }
.bl-kart__ozet { display: -webkit-box; font-size: .92rem; line-height: 1.6; color: var(--metin-ikincil); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-kart__oku { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .86rem; font-weight: 700; color: var(--zeytin); text-decoration: none; }
.bl-kart__oku .ikon { width: 16px; height: 16px; transition: transform .35s var(--egri); }
.bl-kart:hover .bl-kart__oku .ikon { transform: translateX(4px); }
/* öne çıkan: iki sütun + iki satır */
.bl-izgara:not(.is-suzuldu) .bl-kart--one { grid-column: 1 / 3; grid-row: 1 / 3; grid-template-rows: 1fr auto; }
.bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__gorsel { aspect-ratio: auto; min-height: 360px; }
.bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__ic { padding: 1.75rem 2rem 2rem; }
.bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__baslik { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; }
.bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__ozet { font-size: 1rem; -webkit-line-clamp: 2; }
.bl-izgara:not(.is-suzuldu) .bl-kart--yan { grid-template-rows: auto 1fr; }
.bl-izgara:not(.is-suzuldu) .bl-kart--yan .bl-kart__ozet { -webkit-line-clamp: 2; }
/* düşük çözünürlüklü kapak: bulanık zemin üzerinde kendi boyunda */
.bl-kart__gorsel.is-kucuk .bl-kart__img { object-fit: cover; }
.bl-yok { padding: 3rem 1rem; text-align: center; color: var(--metin-ikincil); }
.bl-tat { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
@media (min-width: 768px) { .bl-tat, .bd-diger { padding-bottom: calc(var(--bolum) + 200px) !important; } }

/* ---- yazı ---- */
.bd-ilerleme { position: fixed; z-index: 45; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.bd-ilerleme i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--yaprak), var(--yag)); }
.bd-bas { padding-top: 1.25rem; background: linear-gradient(180deg, #F5F3E6 0%, #F5F3E6 70%, var(--kirec) 70%); }
.bd-bas__ic { display: grid; justify-items: center; text-align: center; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.bd-bas .kat-yol { justify-self: start; }
.bd-bas .kat-yol li:last-child span { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.bd-kat { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: .4rem 1rem; border-radius: 999px; background: #fff; border: 1px solid #DAD6BE; font-size: .82rem; font-weight: 700; color: var(--yaprak); text-decoration: none; transition: border-color .3s; }
.bd-kat:hover { border-color: var(--zeytin); }
.bd-baslik { max-width: 20ch; margin: 1rem 0 1.25rem; font-size: clamp(2.3rem, 1.6rem + 3vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em; color: var(--zeytin); text-wrap: balance; }
.bd-kunye { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.4rem; font-size: .88rem; color: var(--metin-ikincil); }
.bd-kunye span { display: inline-flex; align-items: center; gap: .45rem; }
.bd-kunye .ikon { width: 16px; height: 16px; }
.bd-yazar { font-weight: 700; color: var(--gece); }
.bd-yazar img { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: #fff; border: 1px solid #E0DED2; object-fit: contain; }
.bd-kapak { position: relative; margin: 0 auto; }
.bd-kapak__img { display: block; width: 100%; max-height: 640px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 26px; box-shadow: 0 40px 80px -56px rgba(41, 55, 30, .7); }
/* düşük çözünürlüklü kapak: aynı görselin bulanık, geniş zemini üzerinde çerçeveli */
.bd-kapak--kucuk { display: grid; place-items: center; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.bd-kapak__zemin { position: absolute; inset: 0 var(--kenar); overflow: hidden; border-radius: 26px; background: var(--zeytin); }
.bd-kapak__zemin img { width: 100%; height: 100%; object-fit: cover; filter: blur(34px) saturate(1.2); transform: scale(1.3); opacity: .7; }
.bd-kapak--kucuk .bd-kapak__img { position: relative; width: min(100%, 620px); max-height: none; aspect-ratio: 3 / 2; border: 8px solid #fff; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.bd-duzen { display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; gap: 3rem; align-items: start; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bd-yan { position: sticky; top: calc(var(--h-ust) + 90px); display: grid; gap: 1.5rem; }
.bd-yan > * > p { margin-bottom: .6rem; font-size: .78rem; font-weight: 700; color: var(--metin-ikincil); }
.bd-icindekiler ol { display: grid; gap: .15rem; border-left: 2px solid #E6E4DA; }
.bd-icindekiler a { display: block; margin-left: -2px; padding: .4rem 0 .4rem .9rem; border-left: 2px solid transparent; font-size: .86rem; line-height: 1.4; color: var(--metin-ikincil); text-decoration: none; transition: color .25s, border-color .25s; }
.bd-icindekiler a:hover { color: var(--zeytin); }
.bd-icindekiler a.is-aktif { border-color: var(--zeytin); color: var(--zeytin); font-weight: 600; }
.bd-paylas div { display: flex; gap: .45rem; }
.bd-paylas a, .bd-paylas button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #E0DED2; background: #fff; color: var(--zeytin); transition: background .3s, color .3s, border-color .3s; }
.bd-paylas a:hover, .bd-paylas button:hover { background: var(--zeytin); border-color: var(--zeytin); color: #fff; }
.bd-paylas .ikon { width: 18px; height: 18px; }
.bd-metin { min-width: 0; max-width: 68ch; }
.bd-metin > p, .bd-liste { font-size: 1.1rem; line-height: 1.85; color: #2E3A44; }
.bd-metin > p + p, .bd-metin > * + p, .bd-metin > p + .bd-liste { margin-top: 1.3rem; }
.bd-metin > h2 { scroll-margin-top: 140px; margin: 2.75rem 0 1rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; color: var(--zeytin); }
.bd-metin > h2::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: 1rem; background: var(--yag); }
.bd-giris { font-family: var(--f-baslik); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem) !important; line-height: 1.6 !important; color: var(--gece) !important; }
.bd-giris::first-letter { float: left; margin: .08em .12em 0 0; font-size: 4.2em; line-height: .8; color: var(--zeytin); }
.bd-metin b { color: var(--gece); font-weight: 700; }
.bd-liste { display: grid; gap: .85rem; margin-top: 1.3rem; }
.bd-liste li { position: relative; padding-left: 2rem; }
.bd-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 9px; border-radius: 0 100% 0 100%; background: var(--yaprak); transform: rotate(-25deg); }
.bd-uyari { display: flex; gap: .75rem; margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: #F6F5EE; border-left: 3px solid var(--yag); }
.bd-uyari .ikon { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: #8A7418; }
.bd-uyari p { font-size: .9rem; line-height: 1.6; color: #3C4650; }
.bd-galeri { margin-top: 3rem; }
.bd-galeri h2 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; font-size: 1.6rem; color: var(--zeytin); }
.bd-galeri h2 span { font-family: var(--f-metin); font-size: .9rem; font-weight: 600; color: var(--metin-ikincil); }
.bd-galeri__izgara { columns: 3 180px; column-gap: .75rem; }
.bd-galeri__izgara li { break-inside: avoid; margin-bottom: .75rem; }
.bd-galeri__oge { display: block; width: 100%; overflow: hidden; border-radius: 14px; cursor: zoom-in; }
.bd-galeri__oge img { display: block; width: 100%; height: auto; transition: transform .8s var(--egri); }
.bd-galeri__oge:hover img { transform: scale(1.05); }
.bd-imza { display: flex; gap: 1.1rem; align-items: center; margin-top: 3rem; padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; }
.bd-imza img { flex: none; width: 64px; height: 64px; padding: 8px; border-radius: 50%; border: 1px solid #E0DED2; object-fit: contain; }
.bd-imza b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.2rem; color: var(--gece); }
.bd-imza p { margin: .15rem 0 .35rem; font-size: .88rem; color: var(--metin-ikincil); }
.bd-imza .baglanti { color: var(--zeytin); padding-block: 0; }
.bd-komsular { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 1rem; }
.bd-komsu { display: flex; align-items: center; gap: 1rem; padding: .8rem; border-radius: 20px; background: #fff; border: 1px solid #ECEBE4; text-decoration: none; transition: border-color .3s, transform .35s var(--egri); }
.bd-komsu:hover { border-color: var(--zeytin); transform: translateY(-2px); }
.bd-komsu--sonraki { flex-direction: row-reverse; text-align: right; }
.bd-komsu__gorsel { flex: none; width: 96px; height: 72px; border-radius: 12px; overflow: hidden; }
.bd-komsu__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.bd-komsu small { display: block; font-size: .76rem; font-weight: 700; color: var(--yaprak); }
.bd-komsu b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.08rem; line-height: 1.3; color: var(--gece); }
.bd-urunler { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-bottom: 0; }
.bd-diger { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.bd-diger__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bd-diger a { display: grid; gap: .6rem; text-decoration: none; }
.bd-diger__gorsel { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; }
.bd-diger__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--egri); }
.bd-diger a:hover img { transform: scale(1.05); }
.bd-diger .bl-meta__kat { justify-self: start; }
.bd-diger b { font-family: var(--f-baslik); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--gece); }
.bd-diger small { font-size: .82rem; color: var(--metin-ikincil); }
.bd-isik { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 4rem 5rem; background: rgba(15, 20, 12, .94); }
.bd-isik[hidden] { display: none; }
.bd-isik img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.bd-isik__kapat, .bd-isik__ok { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .3s; }
.bd-isik__kapat:hover, .bd-isik__ok:hover { background: rgba(255, 255, 255, .22); }
.bd-isik__kapat { top: 1.25rem; right: 1.25rem; }
.bd-isik__ok--geri { left: 1.25rem; } .bd-isik__ok--ileri { right: 1.25rem; }
.bd-isik__sayac { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: .86rem; color: rgba(255, 255, 255, .75); }

@media (max-width: 1199px) {
  .bd-duzen { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .bl-bas__ic { grid-template-columns: minmax(0, 1fr); }
  .bl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-izgara:not(.is-suzuldu) .bl-kart--one { grid-row: auto; }
  .bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__gorsel { min-height: 0; aspect-ratio: 16 / 9; }
  .bd-duzen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bd-yan { position: static; order: 2; }
  .bd-icindekiler { display: none; }
  .bd-metin { max-width: none; }
  .bd-diger__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bl-bas__dal { width: 90vw; right: -30%; top: 0; opacity: .35; }
  .bl-izgara { grid-template-columns: minmax(0, 1fr); }
  .bl-izgara:not(.is-suzuldu) .bl-kart--one { grid-column: auto; }
  .bl-izgara:not(.is-suzuldu) .bl-kart--one .bl-kart__ic { padding: 1.3rem 1.4rem 1.5rem; }
  .bl-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); }
  .bl-cipler::-webkit-scrollbar { display: none; }
  .bl-cip { flex: none; }
  .bd-bas .kat-yol li:last-child span { max-width: 18ch; }
  .bd-kapak__img { border-radius: 18px; aspect-ratio: 4 / 3; }
  .bd-kapak--kucuk .bd-kapak__img { border-width: 5px; }
  .bd-kapak__zemin { border-radius: 18px; }
  .bd-metin > p, .bd-liste { font-size: 1.04rem; }
  .bd-komsular, .bd-diger__liste { grid-template-columns: minmax(0, 1fr); }
  .bd-isik { padding: 4rem .75rem; }
  .bd-isik__ok { top: auto; bottom: 1rem; }
}
@media print { .bd-ilerleme, .bd-yan, .bd-urunler, .bd-diger, .bd-komsular { display: none !important; } }


/* 37  Ödeme -------------------------------------------------------------------------
   Dikkat dağıtmayan kurgu: sade başlık (logo · adımlar · güvenli ödeme), sade alt bilgi.
   Sol: numaralı beyaz bloklar; tamamlanan blok zeytin yeşili tik alır. Sağ: yapışkan özet.
   Kart: canlı 3B önizleme (CVV'de döner). Mobil: özet açılır şerit, altta yapışkan onay çubuğu. */
.od { background: var(--kirec); }
.od-bas .sp-bas__ust .ikon { width: 16px; height: 16px; }
@media (min-width: 768px) { .od-duzen { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 5rem) + 220px) !important; } }
.od-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(3rem, 2rem + 3vw, 5rem); }
.od-duzen[hidden] { display: none; }
.od-ana { min-width: 0; display: grid; gap: 1.1rem; }
.od-giris { display: grid; gap: .8rem; }
.od-baslik { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1.05; color: var(--zeytin); }
.od-uye-serit { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-radius: 14px; background: #fff; border: 1px dashed #D5D2BF; font-size: .9rem; color: var(--metin-ikincil); }
.od-uye-serit .ikon { flex: none; width: 20px; height: 20px; color: var(--yaprak); }
.od-uye-serit button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.od-form { display: grid; gap: 1.1rem; }

/* blok */
.od-blok { border-radius: 22px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 1px 2px rgba(41, 55, 30, .04), 0 26px 50px -46px rgba(41, 55, 30, .55); transition: border-color .4s, box-shadow .4s; scroll-margin-top: 100px; }
.od-blok.is-hatali { border-color: rgba(154, 59, 46, .45); }
.od-blok__bas { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.6rem 0; }
.od-blok__bas h2 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--gece); }
.od-blok__bas p { font-size: .84rem; color: var(--metin-ikincil); }
.od-blok__no { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #DAD8CC; font-size: .95rem; color: var(--zeytin); transition: background .4s, border-color .4s, color .4s; }
.od-blok__no .ikon { position: absolute; width: 18px; height: 18px; stroke-width: 2.4; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.od-blok__no b { transition: opacity .2s; }
.od-blok.is-tamam .od-blok__no { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.od-blok.is-tamam .od-blok__no b { opacity: 0; }
.od-blok.is-tamam .od-blok__no .ikon { opacity: 1; transform: none; }
.od-blok__ic { display: grid; gap: 1.1rem; padding: 1.3rem 1.6rem 1.6rem 5.2rem; }
.od-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.od-tam { grid-column: 1 / -1; }
.od-alan { align-content: start; }
.od .alan label { font-size: .84rem; font-weight: 600; color: var(--gece); }
.od .alan input, .od .alan select, .od .alan textarea { width: 100%; min-height: 50px; padding: 0 .95rem; border-radius: 12px; background: #FAFAF6; border: 1px solid #DEDCD0; font-size: 1rem; color: var(--gece); transition: border-color .25s, background .25s, box-shadow .25s; }
.od .alan textarea { padding: .8rem .95rem; resize: vertical; min-height: 76px; }
.od .alan select { appearance: none; background: #FAFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606B' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; padding-right: 2.5rem; }
.od .alan select:disabled { opacity: .55; cursor: not-allowed; }
.od .alan input::placeholder, .od .alan textarea::placeholder { color: #A3A9AE; }
.od .alan input:focus, .od .alan select:focus, .od .alan textarea:focus { outline: none; border-color: var(--zeytin); background-color: #fff; box-shadow: 0 0 0 3px rgba(74, 107, 92, .15); }
.od .alan.is-gecerli input, .od .alan.is-gecerli select, .od .alan.is-gecerli textarea { border-color: #B9CDBE; background-color: #fff; }
.od .alan.is-hata input, .od .alan.is-hata select, .od .alan.is-hata textarea { border-color: var(--indirim); background-color: #FFF8F6; }
.od .alan__hata:empty { display: none; }
.od-ipucu { font-size: .78rem; color: var(--metin-ikincil); }
.od-oneri { font-size: .82rem; color: var(--metin-ikincil); }
.od-oneri button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.od-ayni { font-weight: 600; }
.od-fatura { display: grid; gap: 1rem; padding: 1.1rem; border-radius: 16px; background: #FAFAF6; border: 1px solid #ECEBE4; }
.od-fatura[hidden] { display: none; }
.od-fatura .alan input, .od-fatura .alan select, .od-fatura .alan textarea { background-color: #fff; }
.od-segment { justify-self: start; }

/* teslimat */
.od-kargo { position: relative; cursor: pointer; }
.od-kargo input { position: absolute; opacity: 0; }
.od-kargo__ic { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1.5px solid var(--zeytin); background: #FBFAF3; }
.od-kargo__ikon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--zeytin); color: var(--yag); }
.od-kargo__ikon .ikon { width: 22px; height: 22px; }
.od-kargo__metin { flex: 1; display: grid; gap: .1rem; }
.od-kargo__metin b { color: var(--gece); }
.od-kargo__metin small { font-size: .84rem; color: var(--metin-ikincil); }
.od-kargo__metin small b { color: var(--zeytin); }
.od-kargo__ucret { font-weight: 700; color: var(--yaprak); white-space: nowrap; }
.od-yol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.od-yol li { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .9rem .5rem; text-align: center; }
.od-yol li + li::before { content: ""; position: absolute; left: -30%; right: 70%; top: 32px; border-top: 1px dashed #CFCAB4; }
.od-yol span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .2rem; border-radius: 50%; background: #F2F0E4; color: var(--zeytin); }
.od-yol .ikon { width: 20px; height: 20px; }
.od-yol b { font-size: .86rem; color: var(--gece); }
.od-yol small { font-size: .76rem; color: var(--metin-ikincil); }
.od-not summary small { margin-left: auto; margin-right: .5rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--metin-ikincil); }
.od-not { box-shadow: none; }
.od-not textarea { width: 100%; padding: .75rem .9rem; border-radius: 12px; border: 1px solid #DEDCD0; background: #FAFAF6; font-size: .95rem; resize: vertical; }

/* ödeme yöntemi */
.od-yontemler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.od-yontem { position: relative; cursor: pointer; }
.od-yontem input { position: absolute; opacity: 0; }
.od-yontem > span { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .85rem; align-items: center; padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px solid #E0DED2; background: #FAFAF6; transition: border-color .3s, background .3s, box-shadow .3s; }
.od-yontem .ikon { grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #fff; border: 1px solid #E0DED2; color: var(--zeytin); transition: background .3s, color .3s; }
.od-yontem b { font-size: .95rem; color: var(--gece); }
.od-yontem small { font-size: .78rem; color: var(--metin-ikincil); }
.od-yontem:hover > span { border-color: rgba(41, 55, 30, .45); }
.od-yontem input:checked + span { border-color: var(--zeytin); background: #fff; box-shadow: 0 0 0 1px var(--zeytin), 0 16px 30px -24px rgba(41, 55, 30, .6); }
.od-yontem input:checked + span .ikon { background: var(--zeytin); border-color: var(--zeytin); color: var(--yag); }
.od-yontem input:focus-visible + span { outline: 2px solid var(--yaprak); outline-offset: 3px; }
.od-panel { display: grid; gap: 1.1rem; animation: panelGir .4s var(--egri) both; }
.od-panel[hidden] { display: none; }
.od-kart-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: center; }
.od-kartno { position: relative; display: block; }
.od-kartno input { padding-right: 70px !important; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.od-marka { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); height: 26px; min-width: 42px; display: grid; place-items: center; padding: 0 .4rem; border-radius: 6px; font: 800 .7rem/1 var(--f-metin); letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .3s, transform .3s; }
.od-marka.is-gorunur { opacity: 1; }
.od-marka[data-m="visa"] { background: #1A1F71; font-style: italic; font-size: .82rem; }
.od-marka[data-m="mastercard"] { background: #fff; border: 1px solid #E0DED2; }
.od-marka[data-m="mastercard"]::before { content: ""; width: 30px; height: 18px; background: radial-gradient(circle at 35% 50%, #EB001B 0 8px, transparent 8.5px), radial-gradient(circle at 65% 50%, #F79E1B 0 8px, transparent 8.5px); }
.od-marka[data-m="amex"] { background: #2E77BC; }
.od-marka[data-m="troy"] { background: #00A3AD; }
.od-soru { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: .3rem; border-radius: 50%; background: #F2F0E4; font-size: .7rem; font-weight: 800; color: var(--zeytin); vertical-align: 1px; }
.od-kart3b { perspective: 1100px; }
.od-kart3b__ic { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4, .2, .2, 1); }
.od-kart3b.is-arka .od-kart3b__ic { transform: rotateY(180deg); }
.od-kart3b__on, .od-kart3b__arka { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #fff; box-shadow: 0 30px 50px -28px rgba(20, 28, 14, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); background: radial-gradient(120% 90% at 100% 0%, rgba(201, 184, 74, .35), transparent 50%), linear-gradient(135deg, #34462A, #1F2A16); transition: background .6s; }
.od-kart3b[data-m="visa"] .od-kart3b__on, .od-kart3b[data-m="visa"] .od-kart3b__arka { background: radial-gradient(120% 90% at 100% 0%, rgba(120, 150, 255, .35), transparent 50%), linear-gradient(135deg, #22307A, #111845); }
.od-kart3b[data-m="mastercard"] .od-kart3b__on, .od-kart3b[data-m="mastercard"] .od-kart3b__arka { background: radial-gradient(120% 90% at 100% 0%, rgba(247, 158, 27, .35), transparent 50%), linear-gradient(135deg, #2B2B2B, #111); }
.od-kart3b[data-m="amex"] .od-kart3b__on, .od-kart3b[data-m="amex"] .od-kart3b__arka { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .3), transparent 50%), linear-gradient(135deg, #3B82C4, #1E4E80); }
.od-kart3b[data-m="troy"] .od-kart3b__on, .od-kart3b[data-m="troy"] .od-kart3b__arka { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .3), transparent 50%), linear-gradient(135deg, #0FA3AD, #0B5E64); }
.od-kart3b__arka { transform: rotateY(180deg); display: grid; align-content: start; }
.od-kart3b__on { display: grid; grid-template-rows: auto 1fr auto; padding: 1.1rem 1.2rem; }
.od-kart3b__isik { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); transform: translateX(-60%); animation: kartIsik 6s ease-in-out infinite; }
@keyframes kartIsik { 50% { transform: translateX(60%); } }
.od-kart3b__ust { position: relative; display: flex; justify-content: space-between; align-items: center; }
.od-kart3b__cip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #E8D98A, #B39A3A); box-shadow: inset 0 0 0 1px rgba(80, 64, 10, .4); }
.od-kart3b__marka { font: 800 .9rem/1 var(--f-metin); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.od-kart3b__no { position: relative; align-self: center; font: 600 1.05rem/1 var(--f-metin); letter-spacing: .1em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.od-kart3b__alt { position: relative; display: flex; justify-content: space-between; gap: 1rem; }
.od-kart3b__alt span { display: grid; min-width: 0; }
.od-kart3b__alt small { font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.od-kart3b__alt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.od-kart3b__dal { position: absolute; right: -20px; bottom: 26px; width: 200px; fill: none; stroke: rgba(201, 184, 74, .35); stroke-width: 1.2; }
.od-kart3b__dal path + path { fill: rgba(201, 184, 74, .12); }
.od-kart3b__serit { display: block; height: 38px; margin-top: 20px; background: #0E120B; }
.od-kart3b__imza { display: flex; align-items: center; gap: .6rem; margin: 1rem 1.2rem 0; }
.od-kart3b__imza span { flex: 1; height: 30px; border-radius: 4px; background: repeating-linear-gradient(135deg, #F4F1E4 0 6px, #E8E3CC 6px 12px); }
.od-kart3b__imza b { display: grid; place-items: center; min-width: 52px; height: 30px; border-radius: 4px; background: #fff; color: var(--gece); font-size: .9rem; letter-spacing: .12em; }
.od-kart3b__arka p { margin: .9rem 1.2rem 0; font-size: .64rem; opacity: .7; }
.od-kart-notlar { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 14px; background: #F6F5EE; }
.od-kart-notlar li { display: flex; gap: .6rem; font-size: .84rem; line-height: 1.5; color: #3C4650; }
.od-kart-notlar .ikon { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: var(--yaprak); }
.od-kart-notlar b { color: var(--gece); }
.od-havale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.od-hv-kart { aspect-ratio: auto; min-height: 180px; }
.od-hv-kart .hv-kart__iban { font-size: 1rem; letter-spacing: .04em; white-space: nowrap; }
.od-havale__adim { counter-reset: hv; display: grid; gap: .9rem; }
.od-havale__adim li { counter-increment: hv; position: relative; display: grid; gap: .15rem; padding-left: 2.6rem; font-size: .86rem; color: var(--metin-ikincil); }
.od-havale__adim li::before { content: counter(hv); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zeytin); color: var(--yag); font-weight: 700; font-size: .82rem; }
.od-havale__adim b { color: var(--gece); font-size: .92rem; }
.od-havale__adim .hs-bag { margin-top: .35rem; }

/* onay */
.od-sozlesme { font-size: .92rem; }
.od-sozlesme button { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.od-sozlesme.is-hata .uye__kutu { border-color: var(--indirim); box-shadow: 0 0 0 3px rgba(154, 59, 46, .15); }
.od-kvkk { font-size: .8rem; color: var(--metin-ikincil); }
.od-kvkk a { color: var(--zeytin); }
.od-hata-ozet { padding: 1rem 1.2rem; border-radius: 14px; background: #FBEFEC; border: 1px solid rgba(154, 59, 46, .3); color: var(--indirim); }
.od-hata-ozet[hidden] { display: none; }
.od-hata-ozet p { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.od-hata-ozet .ikon { width: 19px; height: 19px; }
.od-hata-ozet ul { display: grid; gap: .3rem; margin-top: .6rem; padding-left: 1.7rem; list-style: disc; font-size: .86rem; }
.od-hata-ozet a { color: var(--indirim); font-weight: 600; text-underline-offset: 3px; }
.od-onayla { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 64px; padding: 0 .6rem 0 1.6rem; border-radius: 999px; background: var(--zeytin); color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 20px 40px -22px rgba(41, 55, 30, .8); transition: transform .3s var(--egri); }
.od-onayla::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--zeytin-2), #4A5E33); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.65, 0, .25, 1); }
.od-onayla:hover::before { transform: scaleX(1); }
.od-onayla:active { transform: scale(.99); }
.od-onayla__metin { display: inline-flex; align-items: center; gap: .6rem; }
.od-onayla .ikon { width: 20px; height: 20px; color: var(--yag); }
.od-onayla b { display: grid; place-items: center; height: 50px; padding: 0 1.3rem; border-radius: 999px; background: var(--yag); color: var(--zeytin); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.od-onayla:disabled { opacity: .6; cursor: progress; }
.od-yukumluluk { text-align: center; font-size: .78rem; color: var(--metin-ikincil); }

/* yan özet */
.od-yan { position: relative; }
.od-yan__ic { display: grid; gap: 1rem; }
.od-ozet { display: grid; gap: 1rem; padding: 1.4rem; border-radius: 22px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -50px rgba(41, 55, 30, .6); }
.od-ozet__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.od-ozet__bas h2 { font-family: var(--f-baslik); font-weight: 400; font-size: 1.4rem; color: var(--zeytin); }
.od-ozet__liste { display: grid; gap: .85rem; }
.od-ozet__liste li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: .85rem; align-items: center; }
.od-ozet__gorsel { position: relative; width: 58px; height: 58px; border-radius: 12px; background: #FAFAF6; border: 1px solid #F0EFE8; }
.od-ozet__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: 12px; }
.od-ozet__gorsel.is-foto img { object-fit: cover; padding: 0; }
.od-ozet__gorsel i { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--zeytin); color: #fff; font: 700 .72rem/1 var(--f-metin); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.od-ozet__ad { display: grid; gap: .1rem; font-size: .88rem; line-height: 1.35; color: var(--gece); }
.od-ozet__ad small { font-size: .76rem; color: var(--metin-ikincil); }
.od-ozet__tutar { font-weight: 700; font-size: .9rem; color: var(--gece); font-variant-numeric: tabular-nums; }
.od-kupon { box-shadow: none; }
.od-ozet__hesap { display: grid; gap: .6rem; margin: 0; padding-top: 1rem; border-top: 1px dashed #DAD8CC; }
.od-ozet__hesap div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; color: #3C4650; }
.od-ozet__hesap dt small { color: var(--metin-ikincil); }
.od-ozet__hesap dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.od-ozet__hesap dd.is-ucretsiz { color: var(--yaprak); }
.od-ozet__toplam { padding-top: .75rem; border-top: 1px solid #ECEBE4; }
.od-ozet__toplam dt { font-weight: 700; color: var(--gece); }
.od-ozet__toplam dd { font-size: 1.8rem; font-weight: 700; color: #6E5B12; letter-spacing: -.01em; }
.od-ozet__kargo { display: grid; gap: .45rem; padding: .8rem .9rem; border-radius: 12px; background: #F6F5EE; font-size: .82rem; color: #3C4650; }
.od-ozet__kargo b { color: var(--zeytin); }
.od-guven { display: grid; gap: .1rem; padding: .4rem 1.1rem; border-radius: 18px; background: #fff; border: 1px solid #ECEBE4; }
.od-guven li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #F0EFE8; }
.od-guven li:last-child { border-bottom: 0; }
.od-guven .ikon { flex: none; width: 22px; height: 22px; color: var(--yaprak); }
.od-guven span { display: grid; font-size: .8rem; color: var(--metin-ikincil); }
.od-guven b { font-size: .88rem; color: var(--gece); }
.od-guven a { color: var(--zeytin); font-weight: 600; text-underline-offset: 2px; }
.od-logolar { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.od-logolar img { height: 24px; width: auto; }

/* fatura */
.od-ftip-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.od-ftip-sec label { position: relative; cursor: pointer; }
.od-ftip-sec input { position: absolute; opacity: 0; }
.od-ftip-sec label > span { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 14px; border: 1.5px solid #E0DED2; background: #FAFAF6; transition: border-color .3s, background .3s, box-shadow .3s; }
.od-ftip-sec .ikon { grid-row: 1 / 3; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #fff; border: 1px solid #E0DED2; color: var(--zeytin); transition: background .3s, color .3s; }
.od-ftip-sec b { font-size: .95rem; color: var(--gece); }
.od-ftip-sec small { font-size: .78rem; color: var(--metin-ikincil); }
.od-ftip-sec input:checked + span { border-color: var(--zeytin); background: #fff; box-shadow: 0 0 0 1px var(--zeytin); }
.od-ftip-sec input:checked + span .ikon { background: var(--zeytin); border-color: var(--zeytin); color: var(--yag); }
.od-ftip-sec input:focus-visible + span { outline: 2px solid var(--yaprak); outline-offset: 3px; }
.od-izgara[hidden] { display: none; }
.od-anahtar { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 14px; background: #F6F5EE; cursor: pointer; }
.od-anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.od-anahtar i { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #D5D2C2; transition: background .3s; }
.od-anahtar i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .35s var(--egri); }
.od-anahtar input:checked + i { background: var(--yaprak); }
.od-anahtar input:checked + i::after { transform: translateX(20px); }
.od-anahtar input:focus-visible + i { outline: 2px solid var(--yaprak); outline-offset: 2px; }
.od-anahtar span { display: grid; }
.od-anahtar b { font-size: .92rem; color: var(--gece); }
.od-anahtar small { font-size: .8rem; color: var(--metin-ikincil); }

/* sağ sütun: onay kartı */
.od-onay { display: grid; gap: .9rem; padding: 1.4rem; border-radius: 22px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 30px 60px -50px rgba(41, 55, 30, .6); }
.od-onay__bas { font-family: var(--f-baslik); font-weight: 400; font-size: 1.4rem; color: var(--zeytin); }
.od-onay__hepsi { padding: .85rem 1rem; border-radius: 14px; background: #F6F5EE; }
.od-onay__hepsi input:indeterminate + .uye__kutu { background: var(--zeytin); border-color: var(--zeytin); }
.od-onay__hepsi input:indeterminate + .uye__kutu::after { left: 4px; top: 8px; width: 9px; height: 0; border-width: 0 0 2px 0; transform: none; }
.od-onay__liste { display: grid; gap: .1rem; }
.od-onay__liste li { padding: .55rem .25rem; border-bottom: 1px solid #F0EFE8; }
.od-onay__liste li:last-child { border-bottom: 0; }
.od-onay__liste .uye__onay { align-items: flex-start; font-size: .86rem; }
.od-onay__liste .uye__onay > span:nth-of-type(2) { flex: 1; }
.od-onay__liste button, .od-onay__liste a { font-weight: 700; color: var(--zeytin); text-decoration: underline; text-underline-offset: 3px; }
.od-zorunlu { flex: none; align-self: center; padding: .15rem .5rem; border-radius: 999px; background: #F8ECE9; font-size: .68rem; font-weight: 700; color: var(--indirim); }
.od-onay .uye__onay.is-hata .uye__kutu { border-color: var(--indirim); box-shadow: 0 0 0 3px rgba(154, 59, 46, .15); }
.od-onay .alan__hata:empty { display: none; }
.od-onay .od-onayla { padding-left: 1.2rem; font-size: 1rem; }
.od-onay .od-onayla b { padding: 0 1rem; }

/* mobil özet + alt çubuk */
.od-mozet, .od-mozet-panel, .od-mbar { display: none; }

/* sözleşme penceresi */
.od-belge { width: min(860px, calc(100% - 2rem)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--gece); box-shadow: 0 40px 100px rgba(0, 0, 0, .35); }
.od-belge[open] { display: grid; grid-template-rows: auto 1fr auto; animation: belgeGir .4s var(--egri) both; }
@keyframes belgeGir { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.od-belge::backdrop { background: rgba(20, 28, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.od-belge__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.6rem; border-bottom: 1px solid #ECEBE4; }
.od-belge__bas h2 { font-size: 1.4rem; color: var(--zeytin); }
.od-belge__bas > div { display: flex; align-items: center; gap: 1rem; }
.od-belge__kapat { color: var(--gece) !important; border-color: #E0DED2 !important; }
.od-belge__ic { overflow-y: auto; padding: 1.25rem 1.6rem 1.6rem; overscroll-behavior: contain; }
.od-belge__not { display: flex; gap: .55rem; margin-bottom: .5rem; padding: .75rem 1rem; border-radius: 12px; background: #F1F5F1; font-size: .84rem; color: #2F5A45; }
.od-belge__not .ikon { flex: none; width: 18px; height: 18px; }
.od-belge .bs-madde { padding: 1.3rem 0; }
.od-belge .bs-madde h3 { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .8rem; font-size: 1.25rem; color: var(--zeytin); }
.od-belge .bs-madde p, .od-belge .bs-liste { font-size: .95rem; }
.od-belge .bs-yer.is-dolu { border-style: solid; background: #E4EFE6; color: #1F4632; }
.od-belge__alt { display: flex; justify-content: flex-end; padding: 1rem 1.6rem; border-top: 1px solid #ECEBE4; }
.od-belge__alt .uye__dugme { width: auto; padding: 0 1.4rem; }

/* işleniyor */
.od-isleniyor { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(245, 243, 230, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: panelGir .3s both; }
.od-isleniyor[hidden] { display: none; }
.od-isleniyor__kart { display: grid; justify-items: center; gap: 1.2rem; width: min(420px, 100%); padding: 2rem 1.75rem; border-radius: 26px; background: #fff; border: 1px solid #ECEBE4; box-shadow: 0 40px 80px -40px rgba(41, 55, 30, .6); text-align: center; }
.od-isleniyor__zeytin { width: 110px; height: 110px; overflow: visible; }
.od-isleniyor__halka { fill: none; stroke: var(--yag); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .28 .72; transform-origin: center; animation: halkaDon 1.1s linear infinite; }
@keyframes halkaDon { to { transform: rotate(360deg); } }
.od-isleniyor__adim { display: grid; gap: .55rem; width: 100%; text-align: left; }
.od-isleniyor__adim li { position: relative; padding-left: 2rem; font-size: .92rem; color: #A3A9AE; transition: color .3s; }
.od-isleniyor__adim li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #DAD8CC; transition: background .3s, border-color .3s; }
.od-isleniyor__adim li.is-simdi { color: var(--gece); font-weight: 600; }
.od-isleniyor__adim li.is-simdi::before { border-color: var(--yag); border-top-color: transparent; animation: halkaDon .8s linear infinite; }
.od-isleniyor__adim li.is-tamam { color: var(--yaprak); }
.od-isleniyor__adim li.is-tamam::before { background: var(--yaprak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--yaprak); }
.od-isleniyor__not { font-size: .8rem; color: var(--metin-ikincil); }
.od-bos { display: grid; justify-items: center; gap: .6rem; padding: 5rem 1rem; text-align: center; }
.od-bos[hidden] { display: none; }

@media (max-width: 1199px) {
  .od-duzen { grid-template-columns: minmax(0, 1fr) 360px; }
  .od-kart-duzen { grid-template-columns: minmax(0, 1fr); }
  .od-kart3b { max-width: 340px; order: -1; justify-self: center; width: 100%; }
}
@media (max-width: 1023px) {
  .od-duzen { grid-template-columns: minmax(0, 1fr); padding-bottom: 7rem; }
  .od-yan { order: 2; }
  .od-mozet-panel + .od-giris { margin-top: 0; }
  .od-mozet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid #ECEBE4; font-weight: 600; color: var(--gece); }
  .od-mozet > span { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
  .od-mozet b { white-space: nowrap; }
  .od-mozet small { font-weight: 500; color: var(--metin-ikincil); }
  .od-mozet b { margin-left: auto; font-size: 1.05rem; color: #6E5B12; }
  .od-mozet .ikon { width: 19px; height: 19px; color: var(--zeytin); }
  .od-mozet > .ikon:last-child { transition: transform .3s var(--egri); }
  .od-mozet[aria-expanded="true"] > .ikon:last-child { transform: rotate(180deg); }
  .od-mozet-panel:not([hidden]) { display: grid; gap: 1rem; animation: panelGir .35s var(--egri) both; }
  .od-mozet-panel .od-ozet__liste { max-height: none; }
  .od-mbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--kenar) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid #ECEBE4; box-shadow: 0 -12px 30px -20px rgba(41, 55, 30, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .od-mbar > span { display: grid; }
  .od-mbar small { font-size: .74rem; color: var(--metin-ikincil); }
  .od-mbar b { font-size: 1.2rem; color: #6E5B12; font-variant-numeric: tabular-nums; }
  .od-onayla--kucuk { width: auto; min-height: 50px; padding: 0 1.3rem; gap: .5rem; font-size: .95rem; }

}
@media (max-width: 420px) { .od-mozet small { display: none; } }
@media (max-width: 767px) {
  .od-blok__bas { padding: 1.1rem 1.1rem 0; gap: .8rem; }
  .od-blok__no { width: 36px; height: 36px; }
  .od-blok__bas h2 { font-size: 1.25rem; }
  .od-blok__ic { padding: 1.1rem; }
  .od-izgara, .od-havale { grid-template-columns: minmax(0, 1fr); }
  .od-yontemler { grid-template-columns: minmax(0, 1fr); }
  .od-yol li + li::before { display: none; }
  .od-yol { gap: .25rem; }
  .od-yol li { padding: .5rem .2rem; }
  .od-kargo__ic { flex-wrap: wrap; }
  .od-kargo__ucret { margin-left: calc(46px + 1rem); }
  .od-onayla { min-height: 60px; padding-left: 1.2rem; font-size: .98rem; }
  .od-onayla b { height: 46px; padding: 0 1rem; font-size: .98rem; }
  .od-hv-kart .hv-kart__iban { font-size: .9rem; letter-spacing: .02em; }
  .od-belge { width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
}
/* ödemede alt gezinme çubuğu gizli; yerine toplam + onay çubuğu */
@media (max-width: 1023px) { body:has(.od) .altnav { display: none; } }
@media (max-width: 767px) { .od-ftip-sec { grid-template-columns: minmax(0, 1fr); } }