/* =========================================================
   Impossible Foods ana sayfa - birebir kopya
   Renkler, tipografi olculeri ve bosluklar orijinal sitenin
   kendi CSS degiskenlerinden alindi.
   ========================================================= */

/* ---------- 1) YAZI TIPI: sans-meat (3 genislik x 2 kalinlik) ---------- */
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-proportional-bold.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:normal;font-display:swap}
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-proportional-regular.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:normal;font-display:swap}
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-compressed-bold.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:condensed;font-display:swap}
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-compressed-regular.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:condensed;font-display:swap}
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-wide-bold.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:expanded;font-display:swap}
@font-face{font-family:sans-meat;src:url(varliklar/font/sansmeat-wide-regular.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:expanded;font-display:swap}

/* ---------- 2) DEGISKENLER ---------- */
:root{
  /* ham renkler - Arda Kafe: koyu yesil zemin, acik kahve vurgu */
  --kahve:#c08a4a;        /* vurgu: dugmeler, dev yazi, ust menu */
  --kahve-koyu:#9a6a2f;   /* vurgu uzerine gelince */
  --yesil:#143026;        /* sayfa zemini */
  --yesil-koyu:#0a1c15;   /* panel ve kartlar */
  --krem:#efdfc5;         /* ikincil metin, acik yuzeyler */
  --yesil-10:#1c4433;
  --yesil-25:#2b5c43;
  --yesil-50:#5c8c74;
  --yesil-75:#9cbfab;
  --white:#fff;
  --black:#000;
  --gri-50:#c3cfc7;
  --gri-75:#6e8579;

  /* tema eslemesi */
  --sayfa:var(--yesil);
  --dolgu:var(--yesil-koyu);
  --metin:var(--white);
  --metin-ikincil:var(--krem);
  --metin-buyuk:var(--kahve);
  --dugme-birincil:var(--kahve);
  --dugme-metin:var(--yesil-koyu);   /* acik kahve uzerinde koyu yazi okunur */
  --dugme-ikincil:var(--yesil-koyu);
  --sekme-aktif-zemin:var(--krem);
  --sekme-aktif-metin:var(--yesil);
  --rozet-zemin:var(--krem);
  --rozet-metin:var(--yesil);

  /* akiskan olcu birimi: orijinal sitenin formulu */
  --f:calc((100vw - 360px) / 1080);

  /* izgara */
  --kolon-sayisi:31;
  --kenar:max(20px, calc(20px + 80 * var(--f)));
  --kol:calc((100vw - 2 * var(--kenar)) / 31);
  --urun-bosluk:max(16px, calc(16px + 63 * var(--f)));

  /* tipografi olcegi */
  --govde-kucuk:max(12px, calc(12px + 2 * var(--f)));
  --govde:max(16px, calc(16px + 2 * var(--f)));
  --govde-buyuk:max(20px, calc(20px + 2 * var(--f)));
  --govde-xl:max(22px, calc(22px + 10 * var(--f)));
  --serit:max(14px, calc(14px + 6 * var(--f)));
  --h6:max(11px, calc(11px + 1 * var(--f)));
  --h5:max(18px, calc(18px + 2 * var(--f)));
  --h4:max(22px, calc(22px + 2 * var(--f)));
  --h3:max(26px, calc(26px + 2 * var(--f)));
  --h2:max(32px, calc(32px + 8 * var(--f)));
  --h1:max(40px, calc(40px + 8 * var(--f)));

  /* dinamik baslik yiginin azami genisligi */
  --yigin-en:max(332px, calc(332px + 191 * var(--f)));

  --sure-cok-hizli:200ms;
  --sure-hizli:300ms;
  --sure-orta:600ms;
  --sure-yavas:800ms;
  --ease-in-out-sine:cubic-bezier(.445,.05,.55,.95);
  --ease-out-sine:cubic-bezier(.39,.575,.565,1);
  --ease-out-back:cubic-bezier(.175,.885,.32,1.275);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --gecis:.3s var(--ease-in-out-sine);
}

/* ---------- 3) TEMEL ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sayfa);
  color:var(--metin);
  font-family:sans-meat,"Arial Narrow",sans-serif;
  font-stretch:condensed;
  font-size:var(--govde);
  line-height:1.4;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.svg-tanim{position:absolute;width:0;height:0;overflow:hidden}

/* icerik genisligi */
.kap{padding-inline:var(--kenar);margin-inline:auto;width:100%}
.orta{max-width:var(--yigin-en);margin-inline:auto;text-align:center}

/* ---------- 4) ORTAK PARCALAR ---------- */

/* 4a) serit (ribbon): iki yaninda damla/catal-bicak ikonu olan kucuk yazi */
.serit{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-size:var(--serit);font-weight:700;font-stretch:expanded;
  text-transform:uppercase;line-height:1.7;letter-spacing:0;
  color:var(--metin-buyuk);
}
.serit svg{width:.85em;height:.85em;fill:currentColor;flex:none}
.serit .ters{transform:scaleX(-1)}
.serit--acik{color:var(--metin-ikincil)}
.serit--koyu{color:var(--yesil)}

/* 4b) dev baslik (A105 DynamicText): genislige gore JS ile buyutulur */
.dev{
  display:block;width:100%;margin:0;
  text-transform:uppercase;font-weight:700;line-height:.75;
  font-stretch:normal;color:var(--metin-buyuk);
  white-space:nowrap;
}
.dev>span{display:inline-block}
.dev.genis{font-stretch:expanded}
.dev.dar{font-stretch:condensed;line-height:.73}
.dev.acik{color:var(--metin-ikincil)}
.dev.koyu{color:var(--yesil)}

/* 4c) dugmeler: kose egrisi orijinalin "rounded-button-shape" formu */
.dgm{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:0 max(18px, calc(18px + 9 * var(--f)));
  block-size:max(38px, calc(38px + 9.6 * var(--f)));
  font-size:var(--h6);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;line-height:1;
  border-radius:19px/24px;
  background:var(--dugme-birincil);color:var(--dugme-metin);
  transition:background var(--gecis),color var(--gecis);
  white-space:nowrap;
}
.dgm svg{width:.85em;height:.85em;fill:currentColor;flex:none}
.dgm .ters{transform:scaleX(-1)}
.dgm:hover{background:var(--kahve-koyu);color:var(--white)}
.dgm--hayalet{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.dgm--hayalet:hover{background:var(--white);color:var(--yesil)}
.dgm--koyu{background:var(--dugme-ikincil);color:var(--krem)}
.dgm--koyu:hover{background:var(--yesil-koyu)}
.dgm--acik{background:var(--yesil);color:var(--krem)}
.dgm--kucuk{block-size:max(30px, calc(30px + 6 * var(--f)));font-size:var(--h6);padding:0 max(14px, calc(14px + 6 * var(--f)))}

/* 4d) sivri kenar (peaked1) - koyu panel / banner / alt bilgi ust kenari */
.tepe{display:block;width:100%;height:max(24px, calc(24px + 40 * var(--f)));position:absolute;left:0}
.tepe--ust{bottom:100%}
.tepe--alt{top:100%;transform:rotate(180deg)}
.tepe path{fill:inherit}

/* 4e) maskeli gorsel */
.maske{display:block;width:100%;height:100%;object-fit:cover}
.m-portrait1{clip-path:url(#m-portrait1)}
.m-square1{clip-path:url(#m-square1)}
.m-square7{clip-path:url(#m-square7)}
.m-square9{clip-path:url(#m-square9)}
.m-violators6{clip-path:url(#m-violators6)}

/* 4f) bolum ust yazisi */
.bolum-yazi{
  text-align:center;color:var(--metin-ikincil);
  font-size:var(--govde);font-weight:400;font-stretch:condensed;
  margin:0 0 max(20px, calc(20px + 14 * var(--f)));
}

section{position:relative}

/* ---------- 5) UST MENU ---------- */
.ustmenu{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  padding:max(12px, calc(12px + 11.3 * var(--f)));
  pointer-events:none;
}
.ustmenu__bar{
  pointer-events:auto;
  display:flex;align-items:center;
  block-size:max(42px, calc(42px + 5.2 * var(--f)));
  padding-inline:max(14px, calc(14px + 10 * var(--f)));
  background:var(--kahve);
  border-radius:20px;
}
/* Yazi markasi: ayni yazi tipiyle, genis kesim */
.ustmenu__logo{
  display:flex;align-items:center;flex:none;
  font-size:max(16px, calc(16px + 8 * var(--f)));
  font-weight:700;font-stretch:expanded;
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
  color:var(--yesil-koyu);
}
.ustmenu__orta{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:max(18px, calc(18px + 22 * var(--f)));
}
.ustmenu__sag{display:flex;align-items:center;gap:max(8px, calc(8px + 6 * var(--f)))}
.ustmenu a,.ustmenu button{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--h6);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;color:var(--yesil-koyu);
  white-space:nowrap;
}
.ustmenu__orta a:hover{color:var(--white)}
.ustmenu svg.ok{width:.6em;height:.6em;fill:currentColor}
.ustmenu a.ustmenu__dgm,.ustmenu button.ustmenu__dgm{color:var(--krem)}
.ustmenu__dgm{
  background:var(--yesil);color:var(--krem);border-radius:15px;
  block-size:max(28px, calc(28px + 4 * var(--f)));
  padding-inline:max(12px, calc(12px + 5 * var(--f)));
}
.ustmenu a.ustmenu__dgm:hover,.ustmenu button.ustmenu__dgm:hover{background:var(--yesil-koyu);color:var(--white)}

/* ---------- 6) HERO ---------- */
/* Orijinalde hero 100vh + 400px yuksekliginde; ic sarmal yapiskan durur,
   sayfa kayarken icerik yerinde kalip cozulur (C101ParallaxHero).        */
.hero{block-size:calc(100vh + 400px);overflow:clip}
.hero__sarmal{
  position:sticky;inset-block-start:0;
  min-block-size:100vh;
  display:flex;align-items:center;justify-content:center;
  padding-block:max(80px, calc(80px + 37 * var(--f))) max(60px, calc(60px + 40 * var(--f)));
  overflow:hidden;
}
.hero__ic{
  position:relative;z-index:2;
  width:100%;max-width:var(--yigin-en);margin-inline:auto;text-align:center;
}
.hero__etiket{
  margin:0 0 max(20px, calc(20px + 17.4 * var(--f)));
  font-size:var(--h3);font-weight:400;font-stretch:condensed;line-height:1.1;
  color:var(--metin-ikincil);
}
.hero__ic .serit{margin:0 0 max(4px, calc(4px + 3.5 * var(--f)))}
.hero__yigin{position:relative}
.hero__tabak-yuva{
  position:absolute;z-index:3;left:50%;top:50%;
  translate:-50% -50%;
  width:23.7%;
}
.hero__tabak{width:100%;display:block;aspect-ratio:1;object-fit:cover;clip-path:url(#m-violators6)}
.hero__dgmler{
  display:flex;justify-content:center;gap:max(10px, calc(10px + 8 * var(--f)));
  margin-block-start:max(24px, calc(24px + 19 * var(--f)));
}
/* dagilan yemek fotograflari */
.hero__foto{position:absolute;z-index:1}
.foto-maske{width:100%;height:100%;overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.f-sol-ust{inset-inline-start:13%;inset-block-start:16%;width:11.2vw;aspect-ratio:310/416;rotate:-4deg}
.f-sag-ust{inset-inline-start:80.5%;inset-block-start:21%;width:11.7vw;aspect-ratio:1}
.f-sol-alt{inset-inline-start:5.7%;inset-block-start:71%;width:15.1vw;aspect-ratio:1}
.f-sag-alt{inset-inline-start:80.2%;inset-block-start:66%;width:15.1vw;aspect-ratio:1}

/* ---------- 7) URUN BOLUMU ---------- */
.urunler{padding-block:max(60px, calc(60px + 60 * var(--f)))}
.urun-sekmeler{
  display:flex;justify-content:center;align-items:flex-start;
  gap:max(20px, calc(20px + 23 * var(--f)));
  margin-block-end:max(26px, calc(26px + 24 * var(--f)));
}
.urun-sekme{
  position:relative;display:inline-flex;align-items:flex-start;gap:.25em;
  font-size:max(24px, calc(24px + 7 * var(--f)));font-weight:700;font-stretch:condensed;line-height:1;
  text-transform:uppercase;color:var(--metin-ikincil);
  padding-block-end:.18em;
}
.urun-sekme .sayi{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:1.55em;block-size:1.55em;border-radius:38%;
  font-size:.32em;font-stretch:normal;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px currentColor;
  translate:0 .15em;
}
.urun-sekme[aria-selected=true]{color:var(--white)}
.urun-sekme[aria-selected=true]::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;
  block-size:2px;background:var(--white);
}
.urun-sekme[aria-selected=true] .sayi{background:var(--white);color:var(--yesil);box-shadow:none}

.karusel{position:relative;margin-inline-start:var(--kol);margin-inline-end:calc(-1 * var(--kenar))}
.karusel__ray{
  display:flex;gap:var(--urun-bosluk);
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block-end:6px;
}
.karusel__ray::-webkit-scrollbar{display:none}
.urun{
  flex:0 0 calc((100% - 3 * var(--urun-bosluk)) / 4);
  scroll-snap-align:start;text-align:center;
}
/* will-change: kart acilisinda kutu 0.6->1, gorsel 0.4->1 olcekleniyor (GSAP, her kare).
   Katman yoksa maskeli (clip-path url) icerik HER KAREDE yeniden ciziliyordu:
   telefon kipi (dpr 2.75, cpu 1/4) 106-144 ms kare @y~800 -> 44-78 ms (4/4 kosu).
   Acilis bitince piksel ayni (SSIM 1.0). Arda 2026-09-27: "kafenin animasyonlari kasiyor". */
.urun__kutu{position:relative;aspect-ratio:1;clip-path:url(#m-square1);will-change:transform}
.urun__zemin{position:absolute;inset:0;background:var(--yesil-koyu)}
.urun__hover-zemin{position:absolute;inset:0;background:var(--kahve);opacity:0}
.urun__hover-gorsel{position:absolute;inset-inline:0;inset-block-end:0;width:100%;height:auto;opacity:0}
.urun__gorsel{position:absolute;inset-inline-start:50%;inset-block-start:50%;width:68%;height:68%;object-fit:cover;transform:translate(-50%,-50%);clip-path:url(#m-violators6);will-change:transform}
.urun__ad{
  margin:max(12px, calc(12px + 8 * var(--f))) 0 max(10px, calc(10px + 6 * var(--f)));
  font-size:var(--h3);font-weight:700;font-stretch:condensed;line-height:.9;
  text-transform:uppercase;color:var(--white);
}
.urun__dgmler{display:flex;justify-content:center;align-items:center;gap:max(10px, calc(10px + 10 * var(--f)))}
.urun__bul{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:var(--h6);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;color:var(--white);
}
.urun__bul svg{width:1em;height:1em;fill:currentColor}
.karusel__ok{
  position:absolute;top:calc((100% - 3 * var(--urun-bosluk)) / 8);translate:0 -50%;z-index:4;
  inline-size:max(28px, calc(28px + 17 * var(--f)));
  block-size:max(28px, calc(28px + 17 * var(--f)));
  display:grid;place-items:center;border-radius:50%;
  background:var(--kahve);color:var(--white);
}
.karusel__ok svg{width:45%;height:45%;fill:currentColor}
.karusel__ok--sol{inset-inline-start:calc(-1 * var(--kol) - var(--kenar) + max(10px, calc(10px + 43 * var(--f))))}
.karusel__ok--sag{inset-inline-end:max(10px, calc(10px + 43 * var(--f)))}
.karusel__ok:disabled{opacity:.25;cursor:default}
.noktalar{display:flex;justify-content:center;gap:10px;margin-block-start:max(18px, calc(18px + 14 * var(--f)))}
.noktalar button{inline-size:9px;block-size:9px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--krem)}
.noktalar button[aria-current=true]{background:var(--krem)}

/* ---------- 8) TARIF BOLUMU ---------- */
.tarifler{padding-block:max(60px, calc(60px + 60 * var(--f)))}
.hap-sekmeler{
  display:flex;justify-content:center;gap:max(8px, calc(8px + 6 * var(--f)));
  margin-block-end:max(40px, calc(40px + 50 * var(--f)));
}
.hap{
  padding:0 max(16px, calc(16px + 10 * var(--f)));
  block-size:max(30px, calc(30px + 8 * var(--f)));
  display:inline-flex;align-items:center;border-radius:15px;
  font-size:var(--h6);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--yesil-koyu);color:var(--krem);
  transition:background var(--gecis),color var(--gecis);
}
.hap[aria-selected=true]{background:var(--sekme-aktif-zemin);color:var(--sekme-aktif-metin)}
.tarif-panel[hidden]{display:none}
.tarif-baslik{margin-block-end:max(30px, calc(30px + 30 * var(--f)))}
.tarif-izgara{
  display:grid;grid-template-columns:515fr 675fr;
  column-gap:max(20px, calc(20px + 57 * var(--f)));
  row-gap:max(30px, calc(30px + 40 * var(--f)));
  align-items:start;
  margin-inline-start:var(--kol);
  max-width:max(320px, calc(320px + 832 * var(--f)));
}
.tarif{text-align:center}

.tarif__gorsel{width:100%;aspect-ratio:1;overflow:hidden}
.tarif__gorsel>img{width:100%;height:100%;object-fit:cover}
.tarif__gorsel img{width:100%;height:100%;object-fit:cover}
.tarif__etiket{
  display:inline-flex;align-items:center;border-radius:15px;
  padding:0 .9em;block-size:2.1em;margin-block:max(14px, calc(14px + 8 * var(--f))) .6em;
  font-size:var(--govde-kucuk);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--white);box-shadow:inset 0 0 0 1px var(--yesil-50);
}
.tarif__ad{
  margin:0 0 .5em;font-size:var(--h3);font-weight:700;font-stretch:condensed;
  line-height:.9;text-transform:uppercase;color:var(--white);
}
.tarif__bilgi{
  display:flex;justify-content:center;gap:max(14px, calc(14px + 12 * var(--f)));
  font-size:var(--govde);font-stretch:condensed;color:var(--white);
  margin-block-end:max(14px, calc(14px + 10 * var(--f)));
}
.tumu{
  display:flex;align-items:center;gap:max(16px, calc(16px + 20 * var(--f)));
  margin-block-start:max(40px, calc(40px + 40 * var(--f)));
}
.tumu::before,.tumu::after{content:"";flex:1;block-size:1px;background:var(--yesil-50)}

/* ---------- 9) MISYON ---------- */
.misyon{padding-block:max(60px, calc(60px + 70 * var(--f)));text-align:center}
.misyon__metin{
  max-width:max(320px, calc(320px + 340 * var(--f)));
  margin:max(30px, calc(30px + 30 * var(--f))) auto max(18px, calc(18px + 8 * var(--f)));
  font-size:var(--govde-buyuk);font-stretch:condensed;line-height:1.4;color:var(--white);
}
.misyon__kim{
  font-size:var(--govde-kucuk);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;color:var(--krem);
}

/* ---------- 10) DIKEY SEKMELI KOYU PANEL ---------- */
.panel-sarmal{position:relative;margin-block:max(60px, calc(60px + 60 * var(--f)))}
.panel{
  position:relative;background:var(--yesil-koyu);fill:var(--yesil-koyu);
  padding:max(30px, calc(30px + 30 * var(--f))) 0;
  margin-inline:var(--kenar);
}
.panel__ic{
  display:grid;
  grid-template-columns:331fr 544fr 302fr;gap:0;align-items:start;
  padding-inline:max(16px, calc(16px + 90 * var(--f)));
}
.dikey-sekmeler{display:flex;flex-direction:column;gap:6px;padding-block-start:max(20px, calc(20px + 30 * var(--f)))}
.dikey-sekme{
  width:72%;
  display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:0 max(12px, calc(12px + 6 * var(--f)));
  block-size:max(30px, calc(30px + 8 * var(--f)));border-radius:15px;
  font-size:var(--h6);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--krem);text-align:start;
  transition:background var(--gecis),color var(--gecis);
}
.dikey-sekme svg{width:.7em;height:.7em;fill:currentColor;flex:none}
.dikey-sekme[aria-selected=true]{background:var(--sekme-aktif-zemin);color:var(--sekme-aktif-metin)}
.panel-icerik[hidden]{display:none}
.panel-icerik{max-width:85%}
.panel-icerik h3{
  margin:0 0 max(16px, calc(16px + 10 * var(--f)));
  font-size:var(--h3);font-weight:400;font-stretch:normal;line-height:1.2;color:var(--white);
}
.panel-icerik p{
  margin:0 0 max(18px, calc(18px + 10 * var(--f)));
  font-size:var(--govde-kucuk);font-stretch:condensed;line-height:1.5;color:var(--white);
}
.panel__gorsel{width:100%;aspect-ratio:310/416;overflow:hidden}
.panel__gorsel img{width:100%;height:100%;object-fit:cover}

/* ---------- 11) SSS ---------- */
.sss{padding-block:max(60px, calc(60px + 60 * var(--f)));text-align:center}
.sss__aciklama{
  max-width:max(320px, calc(320px + 340 * var(--f)));
  margin:max(26px, calc(26px + 20 * var(--f))) auto max(34px, calc(34px + 30 * var(--f)));
  font-size:var(--govde-buyuk);font-stretch:condensed;line-height:1.4;
}
.akordiyon{max-width:max(320px, calc(320px + 258 * var(--f)));margin-inline:auto;text-align:start}
.akordiyon__oge{background:var(--yesil-koyu);border-radius:20px;margin-block-end:max(10px, calc(10px + 6 * var(--f)));overflow:hidden}
.akordiyon__bas{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:max(14px, calc(14px + 8 * var(--f))) max(16px, calc(16px + 8 * var(--f)));
  font-size:var(--h4);font-weight:700;font-stretch:condensed;line-height:1.1;
  text-transform:uppercase;text-align:start;color:var(--white);
}
.akordiyon__bas svg{width:1em;height:1em;fill:var(--white);flex:none;transition:transform var(--sure-hizli) cubic-bezier(1,0,0,1)}
.akordiyon__oge.acik .akordiyon__bas svg{transform:rotate(180deg)}
.akordiyon__govde{display:block;height:0;overflow:hidden}
.akordiyon__govde-ic{padding:0 max(16px, calc(16px + 8 * var(--f))) max(18px, calc(18px + 10 * var(--f)))}
.akordiyon__govde p{margin:0 0 .8em;font-size:var(--govde-kucuk);font-stretch:condensed;line-height:1.5}
.akordiyon__govde ul{margin:0 0 .8em;padding-inline-start:1.1em;list-style:disc}
.akordiyon__govde li{font-size:var(--govde-kucuk);font-stretch:condensed;line-height:1.5;margin-block-end:.35em}
.akordiyon__govde a{color:var(--krem);text-decoration:underline}

/* ---------- 12) HALA SORUN VAR MI ---------- */
.sorular{padding-block:max(50px, calc(50px + 50 * var(--f)));text-align:center}
.sorular p{margin:max(20px, calc(20px + 12 * var(--f))) 0 max(16px, calc(16px + 10 * var(--f)));font-size:var(--govde-buyuk);font-stretch:condensed}

/* ---------- 13) LOCATOR BANNER ---------- */
.banner-sarmal{position:relative;margin-block:max(50px, calc(50px + 50 * var(--f)))}
.banner{
  position:relative;background:var(--krem);fill:var(--krem);color:var(--yesil);
  max-width:max(332px, calc(332px + 516 * var(--f)));margin-inline:auto;
  text-align:center;
}
.banner__yazi{padding:max(26px, calc(26px + 24 * var(--f))) max(20px, calc(20px + 30 * var(--f))) max(18px, calc(18px + 14 * var(--f)))}
.banner__yazi p{
  max-width:max(280px, calc(280px + 180 * var(--f)));margin:max(14px, calc(14px + 8 * var(--f))) auto 0;
  font-size:var(--govde);font-stretch:condensed;line-height:1.4;
}
.banner__harita{position:relative;overflow:hidden}
.banner__harita img{width:100%;height:max(90px, calc(90px + 110 * var(--f)));object-fit:cover;object-position:center 35%}
.banner__harita .dgm{position:absolute;left:50%;top:50%;translate:-50% -50%}

/* ---------- 14) BULTEN ---------- */
.bulten{padding-block:max(40px, calc(40px + 40 * var(--f))) max(60px, calc(60px + 50 * var(--f)))}
.bulten__ic{display:grid;grid-template-columns:528fr 572fr;gap:max(20px, calc(20px + 58 * var(--f)));align-items:start;
  margin-inline-start:calc(2 * var(--kol));max-width:max(320px, calc(320px + 756 * var(--f)))}
.bulten h2{
  margin:0;font-size:var(--h2);font-weight:700;font-stretch:condensed;line-height:.95;
  text-transform:uppercase;color:var(--white);
}
.bulten__form{display:flex;background:var(--white);border-radius:42px;padding:max(8px, calc(8px + 4 * var(--f)));align-items:center}
.bulten__alan{flex:1;padding-inline:max(14px, calc(14px + 8 * var(--f)))}
.bulten__alan span{display:block;font-size:11px;font-stretch:condensed;color:var(--gri-75)}
.bulten__alan input{width:100%;border:0;outline:0;font-family:inherit;font-stretch:condensed;font-size:var(--govde);color:var(--yesil);background:none}
.bulten__onay{display:flex;gap:.7em;margin-block-start:max(12px, calc(12px + 8 * var(--f)))}
.bulten__onay span[aria-hidden]{
  flex:none;inline-size:18px;block-size:18px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--yesil-50);
}
.bulten__onay p{margin:0;font-size:var(--govde-kucuk);font-stretch:condensed;line-height:1.4;color:var(--white)}
.bulten__onay a{text-decoration:underline}

/* ---------- 15) ALT BILGI ---------- */
.altbilgi-sarmal{position:relative;margin-block-start:max(50px, calc(50px + 50 * var(--f)))}
.altbilgi{
  position:relative;background:var(--yesil-koyu);fill:var(--yesil-koyu);
  padding-block:max(40px, calc(40px + 30 * var(--f))) max(30px, calc(30px + 20 * var(--f)));
}
.altbilgi__ic{display:grid;grid-template-columns:573fr 277fr 277fr 237fr;gap:0}
.altbilgi h3{
  margin:0 0 max(12px, calc(12px + 8 * var(--f)));
  font-size:var(--govde-kucuk);font-weight:400;font-stretch:condensed;color:var(--white);
}
.altbilgi li{margin-block-end:max(8px, calc(8px + 6 * var(--f)))}
.altbilgi li a{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--h5);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.04em;color:var(--white);
}
.altbilgi li a svg{width:.55em;height:.55em;fill:currentColor}
.sosyal{display:flex;gap:8px;margin-block-end:max(16px, calc(16px + 10 * var(--f)))}
.sosyal a{
  inline-size:26px;block-size:26px;display:grid;place-items:center;border-radius:5px;
  background:var(--krem);
}
.sosyal svg{width:14px;height:14px;fill:var(--yesil-koyu)}
.telif{margin:0 0 max(16px, calc(16px + 10 * var(--f)));font-size:var(--govde-kucuk);font-stretch:condensed;color:var(--white);max-width:34ch}
.gizlilik{display:flex;align-items:center;gap:.6em;font-size:var(--h5);font-weight:700;font-stretch:condensed;text-transform:uppercase;letter-spacing:.04em}
.gizlilik svg{width:26px;height:14px;fill:var(--krem)}
.bolge{display:flex;align-items:center;gap:.5em;margin-block:max(16px, calc(16px + 10 * var(--f))) .8em;font-size:var(--govde-kucuk);font-stretch:condensed}
.bolge svg{width:15px;height:15px;fill:var(--white)}
.altbilgi__yasal{
  display:grid;grid-template-columns:573fr 277fr 277fr 237fr;gap:0;
  margin-block-start:max(26px, calc(26px + 24 * var(--f)));
}
.altbilgi__yasal a{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--govde-kucuk);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.04em;
}
.altbilgi__yasal svg{width:.55em;height:.55em;fill:currentColor}

/* ---------- 16) KUCUK EKRAN ---------- */
@media (max-width:900px){
  .ustmenu__orta{display:none}
  .hero__foto{display:none}
  .urun{flex:0 0 calc((100% - max(16px, calc(16px + 71 * var(--f)))) / 2)}
  .tarif-izgara{grid-template-columns:1fr}
  .tarif:nth-child(even){margin-block-start:0}
  .panel__ic{grid-template-columns:1fr}
  .dikey-sekmeler{flex-direction:row;flex-wrap:wrap;padding-block-start:0}
  .bulten__ic,.altbilgi__ic,.altbilgi__yasal{grid-template-columns:1fr}
  .banner{margin-inline:20px}
}

/* =========================================================
   17) ANIMASYON
   Baslangic durumlari ve CSS ile yapilan hareketler.
   JS kapaliysa .anim-acik hic eklenmez, sayfa tamamen gorunur kalir.
   ========================================================= */

.anim-acik [data-anim-gizli]{opacity:0}

/* 17a) Dugme uzerine gelince: etiket yukari yuvarlanip alttan geri gelir,
        ikonlar buyur. (orijinal: label-transform + scale(1.2))            */
.dgm{overflow:hidden;position:relative}
.dgm__etiket{display:inline-block;will-change:transform}
@keyframes etiket-donusu{
  0%{transform:translateY(0)}
  50%{transform:translateY(calc(var(--etiket-boyu) * -1))}
  50.01%{transform:translateY(var(--etiket-boyu))}
  100%{transform:translateY(0)}
}
.dgm svg{transition:transform var(--sure-orta) var(--ease-out-back)}
@media (hover:hover) and (pointer:fine){
  .dgm:hover .dgm__etiket{
    --etiket-boyu:max(38px, calc(38px + 9.6 * var(--f)));
    animation:etiket-donusu var(--sure-hizli) var(--ease-out-sine);
  }
  .dgm:hover svg{transform:scale(1.2)}
  .dgm:hover svg.ters{transform:scaleX(-1) scale(1.2)}
  .urun__bul:hover{color:var(--krem)}
  .karusel__ok:hover{background:var(--kahve-koyu)}
}

/* 17b) Karusel oklari ilk gorunduklerinde kenardan girer */
@keyframes soldan-gir{0%{opacity:0;transform:translateX(-100%)}75%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes sagdan-gir{0%{opacity:0;transform:translateX(100%)}75%{opacity:1}100%{transform:translateX(0)}}
.karusel__ok--sol{animation:soldan-gir var(--sure-orta) var(--ease-out-sine)}
.karusel__ok--sag{animation:sagdan-gir var(--sure-orta) var(--ease-out-sine)}

/* 17c) "See all recipes" cizgileri iki yandan acilir */
.tumu{--cizgi:1}
.anim-acik .tumu{--cizgi:0}
.tumu::before{transform:scaleX(var(--cizgi));transform-origin:right}
.tumu::after{transform:scaleX(var(--cizgi));transform-origin:left}

/* 17d) Kucuk gecisler */
.ustmenu__orta a,.ustmenu__dgm,.urun__bul,.altbilgi a,.hap,.dikey-sekme,.urun-sekme{
  transition:color var(--sure-hizli) var(--ease-in-out-sine),
             background-color var(--sure-hizli) var(--ease-in-out-sine);
}
.dgm{transition:background-color var(--sure-hizli) var(--ease-in-out-sine),
                color var(--sure-hizli) var(--ease-in-out-sine)}
@media (prefers-reduced-motion:reduce){
  .anim-acik [data-anim-gizli]{opacity:1}
  .anim-acik .tumu{--cizgi:1}
}

/* =========================================================
   TELEFONDA OKUNABILIRLIK VE DOKUNMA (2026-09-12)

   Arda: "mobilden bakanlar icin de guzel bir sekilde boyutlarini
   ayarla, mobil icinde guzellestir."

   NEDEN BURASI OZEL: bu sitenin olculeri orijinalin akiskan
   formuluyle kuruluyor -- --f:calc((100vw - 360px)/1080). 375px'te
   --f = 0.0139, yani PRATIKTE SIFIR: butun olculer max() tabanina
   dusuyor. Olculdu (375x812):
       --h6 tabani 11px   -> dugme yazilari 11.0139px
       .dgm tabani 38px   -> dugmeler 38px yuksek
       .ustmenu__logo     -> 38x11 (!)
       .urun-sekme        -> 29px
       .karusel__ok       -> 28x28
       karusel noktalari  -> 12x9
     54 dokunma hedefi 44px'in altindaydi.

   COZUM: PC formuluna HIC dokunmuyoruz -- yalniz TELEFON TABANLARINI
   yukseltiyoruz. 900px ustunde --f buyudugu icin bu kurallar zaten
   devrede degil; masaustu goruntusu birebir korunuyor.
   ========================================================= */
@media (max-width:900px){
  :root{
    /* Yalniz taban degerler buyuyor; formulun kendisi duruyor. */
    --h6:max(12.5px, calc(11px + 1 * var(--f)));
    --govde-kucuk:max(12.5px, calc(12px + 2 * var(--f)));
  }

  /* Dugmeler: 38 -> 46 (animasyondaki hafif olcek payiyla 44'un ustunde) */
  .dgm{ block-size:max(46px, calc(38px + 9.6 * var(--f))); }

  /* Ust menu: logo 11px yuksekti, dugmeler 28px. */
  .ustmenu__logo{ min-block-size:44px; display:inline-flex; align-items:center; }
  .ustmenu__dgm{ min-block-size:44px; display:inline-flex; align-items:center; }

  /* Urun sekmeleri (Cekirdek / Icecek / Tatli) 29px'ti. */
  .urun-sekme{ min-block-size:46px; padding-block:12px; box-sizing:border-box; }

  /* Karusel oklari 28x28 -- parmakla isabet etmiyordu. */
  .karusel__ok{ inline-size:46px; block-size:46px; }

  /* Karusel noktalari 12x9'du. Nokta GORSEL olarak kucuk kalsin diye
     dolguyla buyutuluyor: gorunen daire ayni, basilan alan 3 kat. */
  #urun-noktalar button, .karusel__nokta, .karusel__noktalar button{
    min-inline-size:28px; min-block-size:28px;
    padding:10px; box-sizing:content-box; background-clip:content-box;
  }

  /* Bultendeki alan etiketi 11px'ti. */
  .bulten__alan span{ font-size:12.5px; }
  .hap{ min-block-size:44px; }

  /* Dikey sekmeler (Cekirdek Secimi / Kavurma / ...) 30px'ti;
     900px altinda bunlar YATAY siraya giriyor (yukaridaki
     .dikey-sekmeler kurali), yani yan yana ince seritler oluyordu. */
  .dikey-sekme{ min-block-size:46px; padding-block:12px; box-sizing:border-box; }

  /* Bulten girisi 23px yuksekti -- yazi yazilacak alan. */
  .bulten__alan input, .bulten input{ min-block-size:46px; box-sizing:border-box; }

  /* Alt bilgi bag listeleri 25px yuksekti (Toptan satis, Kurumsal
     siparis, Tarifler...). Telefonda alt bilgi uzun bir bag yigini;
     her satir parmak olcusune cikiyor. */
  .altbilgi li > a,
  .altbilgi__ic a,
  .altbilgi__yasal a,
  a.gizlilik{ display:inline-flex; align-items:center; min-block-size:44px; }

  /* Alt bilgideki sosyal simgeler 26x26. */
  .sosyal a{ inline-size:44px; block-size:44px;
             display:inline-flex; align-items:center; justify-content:center; }
}