/* Ulaş Usta — Demo 1 "Çekirdek". Un beyazı zemin, buğday altını tek vurgu, Schibsted Grotesk + Newsreader italik. */

:root {
  --zemin: #FBF7EF;
  --zemin-2: #F4ECDD;
  --beyaz: #FFFDF9;
  --altin: #C8912E;
  --altin-acik: #EBD3A0;
  --altin-metin: #9A6614;          /* altının metin sürümü: #FBF7EF üstünde 4.6:1 */
  --kraft: #D8BB8E;
  --kraft-koyu: #B8915E;
  --kenar: clamp(20px, 5.6vw, 84px);
  --ust-h: 100px;              /* kapsül menü için ayrılan üst alan */
  --kapsul-h: 68px;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", ui-serif, serif;
  --display: var(--sans);   /* büyük başlık yazı tipi: seçim tek yerden */
  --display-w: 700;
  --yay: cubic-bezier(.22, 1, .36, 1);
  /* Köz'den taşınan bölümlerin belirteçleri */
  --koz: #E4572E;                 /* yalnız kibrit/kor halkası (ateş nesnesi) */
  --kul-gri: #8E8780;
  --cizgi: rgba(85, 50, 17, .11);
  --cizgi-2: rgba(85, 50, 17, .18);
  --celik-a: #E4E0DB;
  --celik-b: #B3ADA6;
  --celik-c: #7C766F;
  --r-kart: 24px;
  --r-medya: 28px;
  --ust-kisa: 80px;           /* kısalmış menü yüksekliği: yapışkan film şeridinin üst payı */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-sis: cubic-bezier(.65, 0, .35, 1);
  --golge-yumusak: 0 1px 2px rgba(58, 34, 12, .06), 0 14px 34px -18px rgba(58, 34, 12, .32);
}

html { background: var(--zemin); overflow-x: clip; font-synthesis: none; }
body {
  background: var(--zemin);
  color: var(--uu-murekkep);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
}
em { font-style: normal; }

.atla {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--uu-kahve); color: var(--beyaz); font-weight: 600; text-decoration: none; transition: top .2s;
}
.atla:focus { top: 12px; }

/* ---------- ortak tipografi ---------- */
.ust-etiket {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--uu-kahve); line-height: 1.2;
}
.ust-etiket::before {
  content: ""; width: 9px; height: 15px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Cpath d='M9 1C14 1 17 9 17 16S14 29 9 29 1 23 1 16 4 1 9 1Z' fill='%23C8912E'/%3E%3Cpath d='M9.6 4.5C11 11 8 17 9.6 26' fill='none' stroke='%23553211' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: rotate(-14deg);
}
.bolum-baslik {
  font-family: var(--display); font-size: clamp(34px, 3.5vw, 52px); line-height: 1.02; letter-spacing: -.032em; font-weight: var(--display-w);
  color: var(--uu-murekkep); text-wrap: balance;
}
.bolum-baslik em, .vurgu {
  font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.012em;
  color: var(--altin-metin);
}
.giris-metin { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--uu-gri); max-width: 58ch; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ---------- düğmeler ---------- */
.dugme {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.dugme .ikon, .dugme .ok { flex: none; }
.dugme .ok, .dugme .ok-metin { transition: transform .3s var(--yay); }
.dugme:hover .ok, .dugme:hover .ok-metin { transform: translateX(4px); }
.dugme--kahve { background: var(--uu-kahve); color: var(--beyaz); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 22px -14px rgba(58, 34, 12, .7); }
.dugme--kahve:hover { background: var(--uu-kahve-koyu); }
.dugme--cizgi { color: var(--uu-kahve); border: 1.5px solid rgba(85, 50, 17, .26); background: transparent; }
.dugme--cizgi:hover { border-color: var(--uu-kahve); background: rgba(85, 50, 17, .04); }
.dugme--metin { padding: 0 6px; color: var(--uu-kahve); position: relative; }
.dugme--metin::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 11px; height: 1.5px; background: currentColor;
  transform: scaleX(.35); transform-origin: left; transition: transform .35s var(--yay);
}
.dugme--metin:hover::after { transform: scaleX(1); }
.dugme--buyuk { --h: 56px; padding: 0 28px; font-size: 16.5px; }
.dugme-no { font-weight: 500; opacity: .78; padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255, 253, 249, .3); }

/* ---------- üst menü: yüzen kapsül (sayfadan ayrışır; tam genişlik bulanıklık YOK) ---------- */
.ust {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  padding: 0 clamp(12px, 2.4vw, 32px); pointer-events: none;
  transition: top .45s var(--yay);
}
.ust-kap {
  pointer-events: auto; position: relative;
  height: var(--kapsul-h); max-width: 1320px; margin: 0 auto; padding: 0 9px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 253, 249, .97); border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(85, 50, 17, .08), 0 1px 2px rgba(58, 34, 12, .05), 0 22px 46px -28px rgba(58, 34, 12, .5);
  transition: height .45s var(--yay), max-width .6s var(--yay), box-shadow .3s ease;
}
.ust--kisa { top: 10px; }
.ust--kisa .ust-kap { height: calc(var(--kapsul-h) - 10px); max-width: 1200px; box-shadow: 0 0 0 1px rgba(85, 50, 17, .1), 0 1px 2px rgba(58, 34, 12, .06), 0 18px 40px -24px rgba(58, 34, 12, .55); }

/* logo: usta rozeti + yazı kilidi */
.ust-logo { display: flex; align-items: center; gap: 10px; flex: none; padding: 4px 14px 4px 4px; border-radius: 999px; text-decoration: none; }
.ust-rozet {
  position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #FFF7E8 0%, #F3DFB6 62%, #E6C88E 100%);
  box-shadow: inset 0 0 0 2px rgba(200, 145, 46, .6), 0 4px 10px -6px rgba(58, 34, 12, .5);
  transition: width .45s var(--yay), height .45s var(--yay);
}
.ust-rozet img { position: absolute; width: 168%; max-width: none; height: auto; left: -37%; top: 3px; transition: transform .55s var(--yay); }
.ust-yazi { width: auto; height: 34px; transition: height .45s var(--yay); }
.ust--kisa .ust-rozet { width: 42px; height: 42px; }
.ust--kisa .ust-yazi { height: 29px; }
@media (hover: hover) and (pointer: fine) { .ust-logo:hover .ust-rozet img { transform: translateY(-3px) rotate(-5deg); } }

/* gezinme: yazı yuvarlanır, altında kayan buğday tanesi bölümü gösterir */
.ust-nav { position: relative; margin-inline: auto; }
.ust-nav ul { display: flex; gap: 2px; }
.ust-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; color: var(--uu-murekkep); text-decoration: none; border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
.nav-k { position: relative; display: inline-block; overflow: hidden; line-height: 1.45; vertical-align: top; }
.nav-k > span { display: block; transition: transform .5s var(--yay); }
.nav-k::after {
  content: attr(data-k) / ""; position: absolute; left: 0; top: 0; width: 100%; white-space: nowrap;
  color: var(--uu-kahve); transform: translateY(105%); transition: transform .5s var(--yay);
}
@media (hover: hover) and (pointer: fine) {
  .ust-nav a:hover { background: rgba(200, 145, 46, .1); }
  .ust-nav a:hover .nav-k > span { transform: translateY(-105%); }
  .ust-nav a:hover .nav-k::after { transform: translateY(0); }
}
.ust-nav a[aria-current="true"] { color: var(--uu-kahve); }
.nav-tane {
  position: absolute; left: 0; bottom: -3px; width: 9px; height: 15px; pointer-events: none;
  opacity: 0; transform: translateX(var(--tane-x, 0px)) rotate(-14deg);
  transition: transform .55s var(--yay), opacity .3s ease;
}
.nav-tane svg { display: block; width: 9px; height: 15px; fill: var(--altin); --tane-yarik: #553211; }
.ust-nav[data-tane] .nav-tane { opacity: 1; }

/* sağ grup */
.ust-sag { display: flex; align-items: center; gap: 6px; flex: none; }
.ust-dijital {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--uu-kahve); text-decoration: none; transition: background-color .25s ease;
}
.ust-dijital svg { flex: none; color: var(--altin-metin); }
@media (hover: hover) and (pointer: fine) { .ust-dijital:hover { background: rgba(200, 145, 46, .12); } }
.dugme--ust { --h: 50px; padding: 0 22px 0 18px; font-size: 15px; }
@keyframes cal { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-16deg); } 36% { transform: rotate(13deg); } 54% { transform: rotate(-9deg); } 72% { transform: rotate(5deg); } }
@media (hover: hover) and (pointer: fine) { .dugme--ust:hover .ikon { animation: cal .75s ease; } }

/* mobil düğmeler */
.ust-ikon {
  display: none; width: 44px; height: 44px; flex: none; border-radius: 50%; align-items: center; justify-content: center;
  color: var(--uu-kahve); -webkit-tap-highlight-color: transparent;
}
.ust-ara { margin-left: auto; background: var(--uu-kahve); color: var(--beyaz); box-shadow: 0 8px 16px -10px rgba(58, 34, 12, .8); }
.ust-menu { flex-direction: column; gap: 5px; background: #F4E6CB; }
.ust-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--yay); }
.ust-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.ust-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- mobil menü: hamburgerden dairesel açılan un beyazı sayfa ---------- */
.mobil-menu {
  position: fixed; inset: 0; z-index: 49; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--kagit) 0 0 / 180px, radial-gradient(120% 70% at 100% 0%, #FFF8EC 0%, var(--zemin) 55%, var(--zemin-2) 100%);
  padding: calc(var(--ust-h) + 14px) 22px calc(18px + var(--uu-guvenli-alt));
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  clip-path: circle(0 at calc(100% - 46px) 41px); visibility: hidden;
  transition: clip-path .7s var(--yay), visibility 0s .7s;
}
.mobil-menu[data-acik] { clip-path: circle(150vmax at calc(100% - 46px) 41px); visibility: visible; transition: clip-path .75s var(--yay); }
.mm-g { opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .7s var(--yay); }
.mobil-menu[data-acik] .mm-g { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .055s); }
.mm-liste { list-style: none; margin: 0; padding: 0; }
.mm-liste a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  min-height: 70px; padding: 6px 0; border-bottom: 1px solid var(--uu-tel); text-decoration: none; color: var(--uu-murekkep);
  -webkit-tap-highlight-color: transparent;
}
.mm-no { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--altin-metin); font-variant-numeric: tabular-nums; }
.mm-ad { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(32px, 9vw, 42px); line-height: 1.08; letter-spacing: -.032em; }
.mm-ok { width: 22px; height: 22px; color: var(--altin-metin); transition: transform .35s var(--yay); }
.mm-liste a[aria-current="true"] .mm-ad { color: var(--uu-kahve); }
.mm-liste a:active .mm-ok { transform: translateX(5px); }
.mm-alt { display: grid; gap: 14px; position: relative; }
.mm-ara {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 12px 18px 12px 12px; border-radius: 22px; text-decoration: none;
  background: var(--uu-kahve); color: var(--beyaz); box-shadow: 0 14px 28px -16px rgba(58, 34, 12, .8);
}
.mm-ara-ikon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .12); }
.mm-ara small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.mm-ara strong { display: block; margin-top: 3px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mm-ara .ok { width: 20px; height: 20px; opacity: .8; }
.mm-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-ikili a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 18px; padding: 0 12px;
  font-size: 15px; font-weight: 600; color: var(--uu-kahve); text-decoration: none;
  background: rgba(255, 253, 249, .85); box-shadow: inset 0 0 0 1.5px rgba(85, 50, 17, .18);
}
.mm-ikili svg { flex: none; color: var(--altin-metin); }
.mm-son { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 96px; }
.mm-son p { font-size: 13.5px; line-height: 1.45; color: var(--uu-gri); max-width: 20ch; padding-bottom: 8px; }
.mm-son p strong { display: block; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 22px; line-height: 1.1; color: var(--uu-kahve); margin-bottom: 4px; }
.mm-usta {
  width: min(44vw, 190px); height: auto; margin: 0 -22px -18px 0; align-self: flex-end; pointer-events: none;
  transform: translateY(45%) rotate(5deg); opacity: 0; transform-origin: 70% 100%;
  transition: transform .9s var(--yay), opacity .5s ease;
}
.mobil-menu[data-acik] .mm-usta { transform: none; opacity: 1; transition-delay: .32s; }

/* ---------- menü kırılımları ---------- */
@media (max-width: 1240px) { .dugme-no { display: none; } .ust-nav a { padding: 0 10px; font-size: 15px; } .ust-dijital { padding: 0 12px; } }
@media (max-width: 1080px) { .ust-dijital span { display: none; } .ust-yazi { height: 30px; } }
@media (max-width: 899px) {
  :root { --ust-h: 80px; --kapsul-h: 60px; }
  .ust { top: 10px; padding: 0 12px; }
  .ust--kisa { top: 8px; }
  .ust-kap { padding: 0 7px; gap: 6px; }
  .ust--kisa .ust-kap { height: var(--kapsul-h); max-width: none; }
  .ust-logo { padding: 3px 10px 3px 3px; gap: 8px; }
  .ust-rozet, .ust--kisa .ust-rozet { width: 44px; height: 44px; }
  .ust-yazi, .ust--kisa .ust-yazi { height: 28px; }
  .ust-nav, .ust-sag { display: none; }
  .ust-ikon { display: inline-flex; }
}
@media (min-width: 900px) { .mobil-menu { display: none; } }
@media (max-height: 700px) { .mm-usta { display: none; } .mm-son { min-height: 0; } .mm-liste a { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .mobil-menu, .mobil-menu[data-acik] { transition: none; }
  .mm-g, .mm-usta { transition: none; }
  .nav-k > span, .nav-k::after, .nav-tane { transition: none; }
}

/* ---------- HERO ---------- */
.hero { position: relative; }
.hero-kap {
  position: relative; max-width: 1440px; margin: 0 auto;
  padding: var(--ust-h) var(--kenar) 0;
  min-height: max(700px, 100svh);
  display: flex; align-items: center;
}
.hero-metin { position: relative; z-index: 3; width: min(54%, 740px); padding: 36px 0 72px; }
.hero-baslik {
  margin-top: 26px;
  font-family: var(--display); font-size: clamp(50px, 8.5vw, 124px); line-height: .9; letter-spacing: -.045em; font-weight: var(--display-w);
  color: var(--uu-murekkep);
}
.hero-baslik .hs { display: block; }
.hero-baslik em {
  font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.025em;
  color: var(--altin-metin); font-size: 1.1em; line-height: .86;
  padding-right: .06em;
}
.hero-alt { margin-top: 30px; max-width: 31ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--uu-gri); }
.hero-dugmeler { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

.hero-sahne {
  position: absolute; z-index: 2;
  right: 1%; bottom: 0; top: calc(var(--ust-h) + 10px); width: 63%;
  --ax: .62; --ay: 1; --olcek: 1;
}
.zerre-tuval { display: block; pointer-events: none; }
.zerre-tuval--sabit { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-sahne .zerre-tuval { position: absolute; inset: 0; width: 100%; height: 100%; }

.yer { position: absolute; pointer-events: none; transition: opacity 1s ease; }
.yer-tohum { inset: 0; width: 100%; height: 100%; opacity: .62; }
.yer-usta {
  width: calc(var(--olcek) * 100%); max-width: none; height: auto;
  left: calc((100% - var(--olcek) * 100%) * var(--ax)); bottom: 0;
  opacity: 0;
  -webkit-mask: radial-gradient(circle at center, #000 0 1.3px, transparent 1.8px) 0 0 / 4.5px 4.5px;
  mask: radial-gradient(circle at center, #000 0 1.3px, transparent 1.8px) 0 0 / 4.5px 4.5px;
  filter: sepia(.45) saturate(1.15) contrast(1.05);
}
.sahne-hazir .yer { opacity: 0; }
.webgl-yok:not(.sahne-hazir) .yer-tohum { display: none; }
.webgl-yok:not(.sahne-hazir) .yer-usta { opacity: .95; }

.hero-ipucu {
  position: absolute; z-index: 3; right: 0; top: 16%;
  display: flex; align-items: center; gap: 9px; max-width: 200px;
  font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--uu-gri);
  transition: opacity .8s ease;
}
.hero-ipucu svg { flex: none; color: var(--altin); }
.ipucu-dokun { display: none; }
@media (hover: none) { .ipucu-masa { display: none; } .ipucu-dokun { display: inline; } }
.js .hero-ipucu { opacity: 0; }
.js .ipucu-acik .hero-ipucu, .ipucu-acik .hero-ipucu { opacity: 1; }
.webgl-yok .hero-ipucu { display: none; }

/* titreme kalkanı: GSAP devralana kadar gizli; zaman aşımında kendiliğinden görünür */
.js .hero-etiket, .js .hero-baslik, .js .hero-alt, .js .hero-dugmeler { visibility: hidden; }
.js-zaman .hero-etiket, .js-zaman .hero-baslik, .js-zaman .hero-alt, .js-zaman .hero-dugmeler { visibility: visible; }

@media (max-width: 899px) {
  .hero-kap { flex-direction: column; align-items: stretch; min-height: 0; padding-top: var(--ust-h); }
  .hero-sahne {
    position: relative; inset: auto; order: -1; width: auto; height: 46svh; min-height: 300px; max-height: 470px;
    margin: 0 calc(var(--kenar) * -1); --ax: .6; --olcek: 1.16;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  }
  .hero-metin { width: auto; padding: 6px 0 44px; }
  .hero-baslik { margin-top: 6px; font-size: clamp(46px, 13.4vw, 60px); line-height: .92; }
  .hero-alt { margin-top: 18px; font-size: 17px; }
  .hero-dugmeler { margin-top: 26px; }
  .hero-ipucu { top: 14px; right: 16px; max-width: 132px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .yer-tohum { display: none; }
  .yer-usta { opacity: .7; }
  .hero-ipucu { display: none; }
}

/* ---------- ortak bölüm düzeni ---------- */
.kap { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 0 var(--kenar); }
.bolum-bas { display: grid; gap: 18px; max-width: 760px; }
.bolum-bas .giris-metin { margin-top: 6px; }
.bolum-bas--orta { margin: 0 auto; text-align: center; justify-items: center; }
.satir-mask { padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.bolum-baslik--buyuk { font-size: clamp(40px, 5.1vw, 78px); line-height: .98; letter-spacing: -.04em; }
.sayi { font-variant-numeric: tabular-nums; }
.svg-depo { position: absolute; width: 0; height: 0; overflow: hidden; }

:root {
  --kagit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .05 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  --lif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .07 0 0 0 .32 -.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23l)'/%3E%3C/svg%3E");
  --zikzak-ust: conic-gradient(from 135deg at 50% 0, #000 0 90deg, #0000 0) 50% 0 / 14px 100% repeat-x;
  --zikzak-alt: conic-gradient(from -45deg at 50% 100%, #000 0 90deg, #0000 0) 50% 100% / 14px 100% repeat-x;
}

/* ---------- ÜRÜNLERİMİZ: kese kâğıdı ---------- */
.urunler { padding: clamp(84px, 9vw, 140px) 0 clamp(90px, 10vw, 150px); }
.urunler-bas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px clamp(32px, 5vw, 90px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.urunler-bas .giris-metin { padding-bottom: 6px; }
.urunler-izgara { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(32px, 4.6vw, 76px); }
ul.torbalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px clamp(22px, 2.6vw, 40px); padding-top: 92px; align-self: start; }
.torba:nth-child(even) { margin-top: 150px; }

.torba { position: relative; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.torba-sahne { position: relative; aspect-ratio: 4 / 5; container-type: inline-size; }
.torba-sahne::after {
  content: ""; position: absolute; z-index: -1; left: 7%; right: 7%; bottom: -16px; height: 30px;
  background: radial-gradient(closest-side, rgba(58, 34, 12, .3), rgba(58, 34, 12, 0));
}
.torba-arka {
  position: absolute; z-index: 0; left: 4%; right: 4%; top: 0; bottom: 4%;
  background: var(--kagit), linear-gradient(180deg, #9C7242 0%, #B38955 30%, #C29C69 100%);
  -webkit-mask: var(--zikzak-ust); mask: var(--zikzak-ust);
}
.torba-urun {
  position: absolute; z-index: 1; left: 50%; top: var(--ust, -8%); width: var(--gen, 80%);
  transform: translate3d(-50%, 0, 0); transition: transform .85s var(--yay);
}
.torba-urun img { width: 100%; height: auto; }
.torba-urun--disk img { border-radius: 50%; box-shadow: 0 14px 26px -14px rgba(58, 34, 12, .55); }
.torba-on { position: absolute; z-index: 2; left: 0; right: 0; top: 16%; bottom: 0; perspective: 900px; perspective-origin: 50% 0; }
.torba-kapak {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 17%;
  transform-origin: 50% 100%; transform-style: preserve-3d; transition: transform .85s var(--yay);
}
.kapak-yuz { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kapak-on {
  background: var(--kagit), var(--lif), linear-gradient(90deg, rgba(85, 50, 17, .12), rgba(85, 50, 17, 0) 9%, rgba(255, 253, 249, .1) 50%, rgba(85, 50, 17, 0) 91%, rgba(85, 50, 17, .14)), var(--kraft);
  -webkit-mask: var(--zikzak-ust); mask: var(--zikzak-ust);
}
.kapak-ic {
  background: var(--kagit), linear-gradient(180deg, #B48D5B, #C9A574);
  transform: rotateX(180deg);
  -webkit-mask: var(--zikzak-alt); mask: var(--zikzak-alt);
}
.torba-govde {
  position: absolute; z-index: 1; left: 0; right: 0; top: 17%; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 9% 9%;
  background: var(--kagit), var(--lif), linear-gradient(90deg, rgba(85, 50, 17, .12), rgba(85, 50, 17, 0) 9%, rgba(255, 253, 249, .1) 50%, rgba(85, 50, 17, 0) 91%, rgba(85, 50, 17, .14)), var(--kraft);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 34px 46px -36px rgba(58, 34, 12, .6);
}
.torba-govde::after { /* dip katlama izi */
  content: ""; position: absolute; left: 0; right: 0; bottom: 7%; height: 1px; background: rgba(85, 50, 17, .16);
  box-shadow: 0 1px 0 rgba(255, 253, 249, .25);
}
.muhur {
  position: absolute; left: 50%; top: 24%; width: 31%; height: auto;
  transform: translateX(-50%) rotate(var(--don, -6deg));
  color: var(--uu-kahve); opacity: .8; filter: url(#murekkep); font-family: var(--sans);
  transition: transform .85s var(--yay);
}
.torba-ad { position: relative; font-size: clamp(19px, 1.85vw, 27px); line-height: 1.1; letter-spacing: -.022em; font-weight: 700; color: var(--uu-murekkep); }
.torba-not { position: relative; margin-top: 7px; font-size: 15px; line-height: 1.42; color: #47331F; }
.torba-puf { position: absolute; z-index: 3; left: 50%; top: 16%; width: 0; height: 0; pointer-events: none; }
.torba-puf i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #E9D3A6; opacity: 0; }

.torba.acik .torba-kapak { transform: rotateX(-176deg); }
.torba.acik .torba-urun { transform: translate3d(-50%, -17cqw, 0) scale(1.05); }
.torba.acik .muhur { transform: translateX(-50%) rotate(calc(var(--don, -6deg) * -1)); }
.torba:focus-visible .torba-govde { outline: 2px solid var(--uu-kahve); outline-offset: 5px; }

.urunler-sahne-sutun { position: relative; }
.urunler-sahne {
  position: sticky; top: calc(66px + 4vh); height: calc(92vh - 66px);
  display: flex; flex-direction: column;
}
.sahne-capa { flex: 1; min-height: 0; --ax: .5; --ay: .55; --olcek: .9; }
.sahne-alt { display: grid; justify-items: center; gap: 6px; padding: 8px 0 14px; text-align: center; }
.sahne-etiket { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--uu-gri); }
.sahne-ad { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.015em; color: var(--altin-metin); min-height: 1.1em; }
.sahne-taneler { display: flex; gap: 9px; margin-top: 8px; }
.sahne-taneler span {
  width: 8px; height: 13px; border-radius: 50% / 50%; border: 1.4px solid var(--altin);
  transform: rotate(-14deg); transition: background-color .35s, transform .35s var(--yay);
}
.sahne-taneler span.aktif { background: var(--altin); transform: rotate(-14deg) scale(1.25); }
.urunler-not { margin-top: clamp(56px, 6vw, 90px); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 16.5px; color: var(--uu-gri); }

/* ---------- HAKKIMIZDA: ateşin dili (Köz'den taşındı: yapışkan hikâye + kaydırmayla yatay akan gerçek döngüler) ---------- */
/* =====================================================================
   HAKKIMIZDA: ATEŞİN DİLİ
   ===================================================================== */
.hakkimizda { position: relative; margin-inline: 16px; border-radius: 40px; background: var(--zemin-2); }
.film-yapiskan { position: relative; }
.film-ic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-block: 104px; }
.hikaye { grid-column: 1 / 6; position: relative; z-index: 2; }
.hikaye > p { margin-top: 22px; font-size: 17.5px; color: var(--uu-murekkep); max-width: 52ch; }
.fitil { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.fitil li { position: relative; display: grid; grid-template-columns: 40px auto 1fr; align-items: center; column-gap: 12px; min-height: 46px; }
.fitil li + li::before {   /* fitil: noktaları bağlayan çizgi */
  content: ""; position: absolute; left: 13px; top: -14px; height: 28px; width: 2px; background: repeating-linear-gradient(180deg, #C9BFB4 0 4px, transparent 4px 7px);
}
.fitil-no {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--uu-kahve); background: var(--zemin); box-shadow: inset 0 0 0 1.5px rgba(85, 50, 17, .35);
}
.fitil li:last-child .fitil-no { background: var(--altin); color: var(--uu-murekkep); box-shadow: 0 0 0 5px rgba(200, 145, 46, .18), 0 0 18px rgba(200, 145, 46, .42); }
.fitil-ad { font-weight: 600; font-size: 17px; }
.fitil-yer { font-size: 16px; color: var(--uu-gri); }
.soz { margin: 30px 0 0; }
.soz p { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.018em; color: var(--uu-kahve); }

.serit-pencere { grid-column: 6 / 13; position: relative; z-index: 1; }
.serit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.film-kare { min-width: 0; }
.film-cerceve { position: relative; border-radius: 22px; overflow: hidden; background: #3A2E27; aspect-ratio: 9 / 14; box-shadow: 0 24px 40px -28px rgba(31, 25, 21, .6); }
.film-cerceve video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-alt { margin-top: 10px; font-size: 14.5px; line-height: 1.4; color: var(--uu-gri); }
.film-alt strong { color: var(--uu-murekkep); font-weight: 600; }

/* masaüstü + hareket: yapışkan sahne, şerit kaydırmayla yatay akar */
.film-aktif .film-yapiskan { position: sticky; top: var(--ust-kisa); height: calc(100vh - var(--ust-kisa)); height: calc(100svh - var(--ust-kisa)); display: flex; align-items: center; overflow: hidden; border-radius: 40px; }
.film-aktif .film-ic { padding-block: 0; width: 100%; }
.film-aktif .serit-pencere { clip-path: inset(-60px -100vw -60px 0); }
.film-aktif .serit-pencere::before { content: ""; position: absolute; z-index: 2; left: -1px; top: -60px; bottom: -60px; width: 72px; pointer-events: none; background: linear-gradient(90deg, var(--zemin-2) 10%, rgba(244, 236, 221, 0)); }
.film-aktif .serit { display: flex; gap: 20px; width: max-content; will-change: transform; }
.film-aktif .film-kare { flex: none; width: calc(var(--film-h, 520px) * var(--en) / var(--boy)); }
.film-aktif .film-cerceve { aspect-ratio: auto; height: var(--film-h, 520px); }

/* ---------- VİZYON & MİSYON: elek ---------- */
.vizyon { padding: clamp(96px, 10vw, 160px) 0 clamp(70px, 8vw, 120px); background: var(--zemin-2); overflow-x: clip; }
.elek-sahne { position: relative; width: min(100%, 1160px); margin: clamp(44px, 5vw, 72px) auto 0; }
.elek { position: relative; width: min(100%, 660px); aspect-ratio: 1; margin: 0 auto 250px; }
.elek-cizim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.elek-yari { position: absolute; top: 30%; width: 34%; display: grid; gap: 14px; align-content: start; text-align: center; }
.elek-yari--sol { left: 13%; }
.elek-yari--sag { right: 13%; }
.elek-baslik { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.015em; color: var(--altin-metin); line-height: 1; }
.elek-yari p { font-size: 16.5px; line-height: 1.55; color: var(--uu-murekkep); }
.degerler { position: absolute; inset: 0; pointer-events: none; }
.deger {
  position: absolute; display: inline-flex; align-items: center; gap: 12px; pointer-events: auto;
  font-size: clamp(18px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.015em; color: var(--uu-murekkep);
}
.deger-tane { width: 20px; height: 33px; fill: var(--altin); --tane-yarik: var(--uu-kahve); transform: rotate(-16deg); transition: transform .5s var(--yay); flex: none; }
.deger:hover .deger-tane { transform: rotate(14deg) scale(1.12); }
.deger--1, .deger--3 { right: calc(50% + 286px); flex-direction: row-reverse; }
.deger--2, .deger--4 { left: calc(50% + 286px); }
.deger--1, .deger--2 { top: 96px; }
.deger--3, .deger--4 { top: 520px; }
.deger--2 .deger-tane { transform: rotate(18deg); }
.deger--4 .deger-tane { transform: rotate(10deg); }
.elek-akis { position: absolute; left: 0; right: 0; top: calc(100% - 38px); height: 290px; --ax: .5; --ay: .5; --olcek: 1; }
.akis-zerre {
  position: absolute; top: 18px; width: 3px; height: 3px; border-radius: 50%; background: var(--altin); opacity: 0;
  animation: un-dus 2.6s linear infinite;
}
.akis-zerre:nth-child(1) { left: 42%; animation-delay: 0s; }
.akis-zerre:nth-child(2) { left: 47%; animation-delay: .7s; }
.akis-zerre:nth-child(3) { left: 51%; animation-delay: 1.3s; }
.akis-zerre:nth-child(4) { left: 55%; animation-delay: .35s; }
.akis-zerre:nth-child(5) { left: 45%; animation-delay: 1.9s; }
.akis-zerre:nth-child(6) { left: 58%; animation-delay: 1.1s; }
.akis-zerre:nth-child(7) { left: 49%; animation-delay: 2.2s; }
.akis-zerre:nth-child(8) { left: 53%; animation-delay: 1.6s; }
.elek-akis::after {
  content: ""; position: absolute; left: 50%; bottom: 26px; width: 46%; height: 70px; transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(226, 196, 142, .9), rgba(235, 211, 160, .4) 55%, rgba(235, 211, 160, 0) 75%);
}
.sahne-sabit .akis-zerre, .sahne-sabit .elek-akis::after { display: none; }
@keyframes un-dus {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .75; }
  85% { opacity: .5; }
  100% { transform: translateY(var(--dus, 210px)); opacity: 0; }
}

/* ---------- FRANCHISE + QR (Köz'den taşındı: kibrit CTA + kor halkaları; çelik QR standı + telefon) ---------- */
/* =====================================================================
   FRANCHISE: ATEŞİ SİZ YAKIN
   ===================================================================== */
.franchise { padding: 112px 0 132px; }
.fr-ust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.fr-metin { grid-column: 1 / 6; }
.fr-metin h2 { margin-top: 16px; }
.fr-metin p:not(.ust-etiket) { margin-top: 20px; color: var(--uu-gri); max-width: 40ch; }
.kibrit-alan { grid-column: 6 / 13; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.kibrit {
  position: relative; display: flex; align-items: flex-end; width: min(100%, 700px); height: 168px;
  text-decoration: none; color: var(--uu-murekkep); -webkit-tap-highlight-color: transparent;
}
.kibrit-cop {
  position: relative; flex: 1; height: 52px; margin: 0 -30px 14px 0; border-radius: 5px 3px 3px 5px;
  display: flex; align-items: center; gap: 12px; padding: 0 44px 0 30px;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  background:
    repeating-linear-gradient(180deg, rgba(140, 92, 36, 0) 0 7px, rgba(140, 92, 36, .09) 7px 8px, rgba(140, 92, 36, 0) 8px 15px, rgba(140, 92, 36, .06) 15px 16px),
    linear-gradient(180deg, #F5E2C0 0%, #EACD9C 52%, #D8B27A 100%);
  box-shadow: inset 5px 0 0 rgba(170, 118, 52, .22), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(120, 78, 28, .18), 0 18px 26px -16px rgba(85, 50, 17, .55);
  transition: box-shadow .3s ease;
}
.kibrit-cop .ok { transition: transform .25s var(--ease-out); }
.kibrit-bas { position: relative; z-index: 2; flex: none; width: 120px; height: 168px; }
.kibrit-svg { position: absolute; left: 0; bottom: 0; width: 120px; height: 160px; overflow: visible; }
.kb-alev { transform-box: view-box; transform-origin: 46px 118px; opacity: 0; transform: scale(.35) translateY(16px); transition: opacity .25s ease, transform .45s var(--ease-out); }
.kb-alev-dis { transform-box: view-box; transform-origin: 46px 112px; }
.kb-yanik { opacity: 0; transition: opacity .9s ease .15s; }
.kb-kivilcim { transform-box: view-box; transform-origin: 46px 120px; opacity: 0; }
.kibrit-yanik .kb-alev { opacity: 1; transform: none; transition-delay: .12s; }
.kibrit-yanik .kb-alev-dis { animation: titre 1.1s ease-in-out infinite alternate; }
.kibrit-yanik .kb-yanik { opacity: 1; }
.kibrit-cak .kb-kivilcim { animation: cak .55s var(--ease-out) both; }
.kibrit-yanik .kibrit-cop { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(120, 78, 28, .18), 0 18px 30px -14px rgba(228, 87, 46, .55); }
@media (hover: hover) and (pointer: fine) { .kibrit:hover .kibrit-cop .ok { transform: translateX(4px); } }
.kibrit:active .kibrit-cop { transform: scale(.985); }
@keyframes titre {
  0% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(.97, 1.06) skewX(-3deg); }
  60% { transform: scale(1.02, .95) skewX(2deg); }
  100% { transform: scale(.99, 1.04) skewX(-1deg); }
}
@keyframes cak {
  0% { opacity: 1; transform: scale(.45); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.3); }
}
.bizi-arayin { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--uu-murekkep); text-decoration: underline; text-decoration-color: rgba(31, 25, 21, .25); text-underline-offset: .32em; margin-right: 120px; }
.bizi-arayin .sayi { font-weight: 500; color: var(--uu-gri); }
@media (hover: hover) and (pointer: fine) { .bizi-arayin:hover { text-decoration-color: var(--altin); } }

.halkalar { --halka: 72px; list-style: none; margin: 104px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; position: relative; }
.halkalar::before, .halkalar::after {
  content: ""; position: absolute; top: calc(var(--halka) / 2 - 1px); height: 2px;
  left: calc(var(--halka) / 2); right: calc((100% - 96px) / 5 - var(--halka) / 2);
}
.halkalar::before { background: repeating-linear-gradient(90deg, #D3CBC2 0 6px, transparent 6px 11px); }
.halkalar::after { background: linear-gradient(90deg, #7A1A0A, #E4572E 45%, #FFB45E); transform-origin: left center; transform: scaleX(var(--ilerleme, 0)); }
.halka { position: relative; z-index: 1; }
.halka-daire {
  position: relative; width: var(--halka); height: var(--halka); border-radius: 50%; display: grid; place-items: center;
  background: var(--zemin); font-size: 18px; font-weight: 600; color: var(--kul-gri);
  transition: color .5s ease, background-color .6s ease, box-shadow .7s ease;
}
.halka-daire::before, .halka-daire::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .7s ease;
}
.halka-daire::after { padding: 2.5px; background: repeating-conic-gradient(#CFC6BC 0 7deg, transparent 7deg 13deg); }   /* soğuk: kesik kül halkası */
.halka-daire::before { opacity: 0; background: conic-gradient(from 210deg, #7A1A0A, #C83E1C 18%, #FFB45E 34%, #E4572E 50%, #FFC46B 64%, #B8361A 82%, #7A1A0A); }   /* sıcak: köz halkası */
.halka[data-sicak] .halka-daire { background: #FFF2E8; color: var(--uu-murekkep); box-shadow: 0 0 0 7px rgba(228, 87, 46, .09), 0 10px 26px -8px rgba(228, 87, 46, .55); }
.halka[data-sicak] .halka-daire::before { opacity: 1; }
.halka[data-sicak] .halka-daire::after { opacity: 0; }
.halka h3 { font-size: 20px; font-weight: 600; letter-spacing: -.018em; margin-top: 24px; }
.halka p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--uu-gri); max-width: 24ch; }

/* =====================================================================
   QR MENÜ
   ===================================================================== */
.qr { padding: 0 0 140px; }
.qr-masa {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  padding: 64px 64px; border-radius: 44px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
    linear-gradient(165deg, #EFEDEA 0%, #E2DFDB 55%, #D8D4CF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(31, 25, 21, .06), 0 30px 60px -50px rgba(31, 25, 21, .5);
}
.qr-metin { grid-column: 1 / 6; position: relative; z-index: 2; }
.qr-metin p { margin-top: 18px; color: var(--uu-gri); max-width: 36ch; }
.qr-metin .dugme { margin-top: 28px; }
.qr-sahne { grid-column: 6 / 13; position: relative; height: 430px; }
.stand { position: absolute; left: 8%; bottom: 8px; width: 236px; z-index: 1; }
.stand-kart {
  position: relative; margin: 0 auto; width: 216px; padding: 18px 18px 14px; border-radius: 16px; text-align: center;
  background: #FFFDF9;
  box-shadow: 0 0 0 5px #D9D5D0, 0 0 0 6px #B9B3AC, 0 24px 34px -18px rgba(31, 25, 21, .45);
}
.stand-logo { width: 150px; margin: 0 auto 12px; }
.stand-qr { position: relative; width: 150px; margin: 0 auto; }
.stand-qr img { width: 100%; height: auto; }
.tarama { position: absolute; left: -10px; right: -10px; top: 0; height: 3px; border-radius: 2px; background: var(--altin); box-shadow: 0 0 14px 3px rgba(200, 145, 46, .45); opacity: 0; }
.qr-okut .tarama { animation: tara 1.6s var(--ease-io) 2 alternate; }
@keyframes tara { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.stand-yazi { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--uu-kahve); }
.stand-ayak { display: block; width: 168px; height: 14px; margin: 4px auto 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #CFCAC4, #9F9891); box-shadow: 0 16px 18px -10px rgba(31, 25, 21, .4); }
.telefon {
  position: absolute; right: 6%; top: 6px; z-index: 2; width: 214px; height: 418px; padding: 9px; border-radius: 40px;
  background: #1F1915; transform: rotate(5deg);
  box-shadow: inset 0 0 0 1.5px #4A3F37, 0 44px 60px -34px rgba(31, 25, 21, .6);
}
.telefon-ekran { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #FFFDF9; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.te-ust { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--uu-murekkep); }
.te-ust img { width: 30px; height: auto; }
.te-kategori { display: flex; gap: 6px; }
.te-kategori span { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--zemin-2); color: var(--uu-gri); }
.te-kategori span[data-aktif] { background: var(--uu-murekkep); color: var(--zemin); }
.te-urun { display: grid; gap: 2px; padding: 10px; border-radius: 16px; background: var(--zemin); }
.te-urun img { width: 100%; height: 96px; object-fit: contain; margin-bottom: 6px; }
.te-urun strong { font-size: 13px; font-weight: 600; color: var(--uu-murekkep); }
.te-urun span { font-size: 11px; color: var(--uu-gri); }
.te-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--zemin); }
.te-satir img { width: 52px; height: 44px; object-fit: contain; }
.te-satir strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--uu-murekkep); }
.te-satir em { font-style: normal; font-size: 11px; color: var(--uu-gri); }
.js .qr-masa:not(.qr-acik) :is(.te-urun, .te-satir) { opacity: 0; transform: translateY(14px); }
.te-urun, .te-satir { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.te-satir { transition-delay: .14s; }

/* ---------- ŞUBELER & İLETİŞİM: un çuvalı etiketleri ---------- */
.iletisim { padding: clamp(84px, 9vw, 140px) 0 clamp(90px, 10vw, 140px); }
.iletisim-ust { display: grid; gap: 18px; max-width: 980px; }
.cuvallar { margin-top: clamp(48px, 6vw, 84px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 38px); align-items: start; }
.cuval {
  position: relative; display: grid; justify-items: center; text-align: center;
  padding: 58px 30px 36px;
  background:
    var(--kagit),
    repeating-linear-gradient(0deg, rgba(120, 82, 40, .06) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    repeating-linear-gradient(90deg, rgba(120, 82, 40, .06) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    linear-gradient(180deg, #F3E8D2, #EADAB9);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M6 9Q2 3 9 2Q22 6 50 6Q78 6 91 2Q98 3 94 9Q99 60 96 112Q95 118 89 118L11 118Q5 118 4 112Q1 60 6 9Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M6 9Q2 3 9 2Q22 6 50 6Q78 6 91 2Q98 3 94 9Q99 60 96 112Q95 118 89 118L11 118Q5 118 4 112Q1 60 6 9Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 0;
  transition: transform .6s var(--yay);
}
.cuval::before { /* ağız dikişi */
  content: ""; position: absolute; left: 11%; right: 11%; top: 30px; height: 0;
  border-top: 2px dashed rgba(85, 50, 17, .38);
}
.cuval:hover { transform: rotate(-.8deg); }
.cuval-no {
  display: block; font-size: clamp(110px, 10vw, 150px); line-height: .78; font-weight: 700; letter-spacing: -.04em;
  color: var(--uu-kahve); opacity: .88;
  -webkit-mask: linear-gradient(#000 0 34%, transparent 34% 40%, #000 40% 63%, transparent 63% 69%, #000 69%);
  mask: linear-gradient(#000 0 34%, transparent 34% 40%, #000 40% 63%, transparent 63% 69%, #000 69%);
  filter: url(#murekkep-hafif);
}
.cuval-etiket { margin-top: 22px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--altin-metin); }
.cuval-ad { margin-top: 8px; font-size: clamp(23px, 2vw, 29px); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--uu-murekkep); }
.cuval-adres { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: #4C3925; max-width: 30ch; min-height: 3em; }
.cuval-dugmeler { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 300px; }
.cuval-dugmeler .dugme { --h: 46px; padding: 0 14px; }
.cuval--yeni .cuval-no { color: var(--altin-metin); }

.iletisim-hat {
  margin-top: clamp(48px, 6vw, 80px); padding-top: 34px; border-top: 1px solid var(--uu-tel);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end;
}
.hat-tel { display: grid; gap: 6px; text-decoration: none; color: var(--uu-murekkep); justify-self: start; }
.hat-etiket { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--uu-kahve); }
.hat-no { font-size: clamp(34px, 3.6vw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1; transition: color .25s; }
.hat-tel:hover .hat-no { color: var(--uu-kahve); }
.hat-oge { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--uu-murekkep); min-height: 52px; }
.hat-oge svg { flex: none; color: var(--altin); }
.hat-oge span { display: grid; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hat-oge small { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--uu-gri); }
.hat-oge:hover span { color: var(--uu-kahve); }

/* ---------- ALT BİLGİ ---------- */
.alt { position: relative; overflow: hidden; padding: clamp(60px, 7vw, 100px) 0 30px; border-top: 1px solid var(--uu-tel); background: var(--zemin); }
.alt-filigran { position: absolute; left: 50%; bottom: -14%; width: min(1500px, 120%); max-width: none; transform: translateX(-50%); opacity: .032; pointer-events: none; }
.alt-kapanis { display: grid; justify-items: center; text-align: center; }
.son-sahne { position: relative; width: min(100%, 300px); height: clamp(220px, 22vw, 300px); --ax: .5; --ay: .5; --olcek: .92; }
.son-tohum { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.sahne-sabit .son-tohum { display: none; }
.alt-slogan { margin-top: 18px; font-family: var(--display); font-size: clamp(30px, 3.4vw, 50px); line-height: 1; font-weight: var(--display-w); letter-spacing: -.035em; color: var(--uu-murekkep); }
.alt-slogan em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.015em; color: var(--altin-metin); }
.alt-kap { margin-top: clamp(56px, 6vw, 90px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.alt-marka { display: flex; align-items: center; gap: 18px; }
.alt-marka img { width: 84px; height: auto; }
.alt-marka p { font-size: 15.5px; line-height: 1.5; color: var(--uu-gri); }
.alt-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.alt-nav a, .alt-iletisim a {
  display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; font-weight: 500; color: var(--uu-murekkep); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1.5px no-repeat; transition: background-size .35s var(--yay), color .2s;
}
.alt-nav a:hover, .alt-iletisim a:hover { color: var(--uu-kahve); background-size: 100% 1.5px; }
.alt-iletisim { display: grid; justify-items: start; }
.alt-son { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--uu-tel); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--uu-gri); }
.alt-imza a { color: var(--uu-kahve); font-weight: 600; text-decoration: none; }
.alt-imza a:hover { text-decoration: underline; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  ul.torbalar { gap: 52px 22px; }
  .torba-not { font-size: 14px; }
}

/* ---------- mobil / dar ekran: yapışkan sahneler yok ---------- */
@media (max-width: 899px) {
  body { font-size: 17px; }
  .urunler-izgara { grid-template-columns: 1fr; }
  .urunler-bas { grid-template-columns: 1fr; }
  .urunler-sahne-sutun { display: none; }
  ul.torbalar { gap: 34px 14px; padding-top: 64px; }
  .torba:nth-child(even) { margin-top: 64px; }
  .torba-sahne { aspect-ratio: 4 / 6; }
  .torba-govde { padding: 0 9% 10%; }
  .muhur { top: 19%; width: 27%; left: auto; right: 7%; transform: rotate(var(--don, -6deg)); }
  .torba.acik .muhur { transform: rotate(calc(var(--don, -6deg) * -1)); }
  .torba-ad { font-size: 17.5px; }
  .torba-not { font-size: 13.5px; line-height: 1.38; margin-top: 5px; }
  .masaustu { display: none; }
  .torba.acik .torba-urun { transform: translate3d(-50%, -14cqw, 0) scale(1.04); }


  .elek { aspect-ratio: auto; width: 100%; margin-bottom: 0; }
  .elek-cizim { position: relative; inset: auto; width: min(78vw, 320px); height: auto; aspect-ratio: 1; margin: 0 auto; }
  .elek-yari { position: static; transform: none; width: auto; text-align: left; margin-top: 30px; }
  .degerler { position: absolute; inset: auto; left: 50%; top: calc(min(78vw, 320px) / 2 - 46px); width: min(62vw, 250px); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px; pointer-events: auto; }
  .deger { position: static; font-size: 15px; gap: 8px; flex-direction: row; justify-content: center; }
  .deger-tane { width: 14px; height: 23px; }
  .elek-ortu { opacity: .3; }
  .elek-akis { position: relative; top: auto; display: block; height: 130px; margin-top: -10px; --dus: 90px; }
  .elek-akis::after { bottom: 4px; height: 40px; width: 56%; }
  .elek-yari--sol { margin-top: 12px; }



  .cuvallar { grid-template-columns: 1fr; gap: 22px; }
  .cuval { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 20px; padding: 46px 24px 28px; }
  .cuval-no { grid-row: span 4; font-size: 100px; margin-top: 4px; }
  .cuval-etiket { margin-top: 2px; }
  .cuval-adres { min-height: 0; }
  .cuval-dugmeler { grid-column: 1 / -1; max-width: none; }
  .iletisim-hat { grid-template-columns: 1fr; gap: 14px; }

  .alt-kap { grid-template-columns: 1fr; gap: 28px; }
  .alt-son { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .torba-urun, .torba-kapak, .muhur, .telefon, .cuval { transition: none; }
  .akis-zerre { display: none; }
}

/* ---------- taşınan bölümler: Köz kırılımları (film şeridi masaüstünde ≥1081px yapışkan akar) ---------- */
@media (max-width: 1080px) {
  .film-ic { display: block; padding-block: 80px; }
  .hikaye { max-width: 680px; margin-bottom: 44px; }
  .serit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .franchise { padding: 96px 0 104px; }
  .fr-ust { display: block; }
  .kibrit-alan { align-items: flex-start; margin-top: 30px; }
  .bizi-arayin { margin-right: 0; }
  .qr-masa { display: block; padding: 48px 36px; }
  .qr-sahne { margin-top: 40px; height: 420px; max-width: 560px; }
}
@media (max-width: 760px) {
  .hakkimizda { margin-inline: 8px; border-radius: 30px; }
  .film-ic { padding-block: 60px; }
  .serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; row-gap: 22px; }
  .film-cerceve { border-radius: 18px; }
  .soz p { font-size: 21px; }
  .franchise { padding: 80px 0 88px; }
  .kibrit { height: 150px; }
  .kibrit-cop { height: 50px; font-size: 16.5px; padding: 0 34px 0 18px; gap: 8px; margin-right: -24px; margin-bottom: 7px; }
  .kibrit-bas { width: 96px; height: 150px; }
  .kibrit-svg { width: 96px; height: 128px; }
  .halkalar { --halka: 56px; display: grid; grid-template-columns: 1fr; row-gap: 26px; margin-top: 64px; }
  .halkalar::before, .halkalar::after { top: calc(var(--halka) / 2); bottom: calc(var(--halka) / 2 + 40px); left: calc(var(--halka) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .halkalar::before { background: repeating-linear-gradient(180deg, #D3CBC2 0 6px, transparent 6px 11px); }
  .halkalar::after { background: linear-gradient(180deg, #7A1A0A, #E4572E 45%, #FFB45E); transform-origin: center top; transform: scaleY(var(--ilerleme, 0)); }
  .halka { display: grid; grid-template-columns: var(--halka) minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .halka-daire { grid-row: 1 / 3; font-size: 16px; }
  .halka h3 { margin-top: 4px; font-size: 19px; }
  .halka p { margin-top: 4px; }
  .qr { padding-bottom: 88px; }
  .qr-masa { padding: 40px 20px 28px; border-radius: 32px; }
  .qr-sahne { height: 360px; }
  .stand { left: -6px; width: 160px; bottom: 6px; }
  .stand-kart { width: 148px; padding: 12px 12px 10px; border-radius: 12px; }
  .stand-logo { width: 104px; margin-bottom: 8px; }
  .stand-qr { width: 104px; }
  .stand-yazi { font-size: 9.5px; letter-spacing: .08em; }
  .stand-ayak { width: 118px; }
  .telefon { right: -4px; top: 4px; width: 160px; height: 322px; border-radius: 30px; padding: 7px; }
  .telefon-ekran { border-radius: 24px; padding: 12px 9px; gap: 8px; }
  .te-ust { font-size: 11.5px; }
  .te-ust img { width: 24px; }
  .te-kategori span { font-size: 9.5px; padding: 4px 7px; }
  .te-urun img { height: 70px; }
  .te-satir { grid-template-columns: 40px minmax(0, 1fr); gap: 7px; padding: 6px; }
  .te-satir img { width: 40px; height: 34px; }
  .te-satir strong { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kibrit-yanik .kb-alev-dis { animation: none; }
  .kibrit-cak .kb-kivilcim { animation: none; }
}

/* ---------- YÜZEN ÖĞELER: Online Sipariş sekmesi + panel, WhatsApp, yukarı çık ---------- */
.yuzen { position: relative; z-index: 45; transition: opacity .3s ease, visibility 0s; }
.mobil-menu[data-acik] ~ .yuzen { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }

/* sola yapışık sekme */
.siparis-sekme {
  position: fixed; left: 0; top: 50%; z-index: 45; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 46px; padding: 16px 0 18px; border-radius: 0 18px 18px 0;
  background: linear-gradient(180deg, #6B411A 0%, var(--uu-kahve) 60%, #46280C 100%); color: var(--beyaz);
  box-shadow: inset -1px 0 0 rgba(255, 253, 249, .08), 0 16px 30px -14px rgba(58, 34, 12, .7);
  overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease, box-shadow .25s ease;
}
.siparis-sekme::after {   /* ara sıra geçen ışık süpürmesi */
  content: ""; position: absolute; left: -10%; right: -10%; height: 60px; top: -70px;
  background: linear-gradient(180deg, rgba(255, 236, 200, 0), rgba(255, 236, 200, .32), rgba(255, 236, 200, 0));
  transform: skewY(-24deg); animation: sekme-isik 6.5s ease-in-out 2.5s infinite;
}
@keyframes sekme-isik { 0%, 70% { top: -70px; } 92%, 100% { top: 110%; } }
.sekme-ikon { width: 22px; height: 22px; flex: none; color: #F3DDB1; }
.sekme-yazi { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .siparis-sekme:hover { box-shadow: inset -1px 0 0 rgba(255, 253, 249, .1), 0 20px 34px -12px rgba(58, 34, 12, .8); }
  .siparis-sekme:hover .sekme-ikon { animation: sekme-salla .7s ease; }
}
@keyframes sekme-salla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }

/* panel: masaüstünde soldan çekmece, mobilde alttan sayfa */
.siparis-ortu { position: fixed; inset: 0; z-index: 59; background: rgba(36, 23, 12, .34); opacity: 0; transition: opacity .45s ease; }
.siparis-ortu[data-acik] { opacity: 1; }
.siparis-panel {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--kagit) 0 0 / 180px, linear-gradient(180deg, #FFFDF9 0%, var(--zemin) 100%);
  border-radius: 0 32px 32px 0; box-shadow: 30px 0 60px -30px rgba(36, 23, 12, .55);
  padding: 30px 28px calc(28px + var(--uu-guvenli-alt));
  transform: translateX(-104%); transition: transform .55s var(--yay);
}
.siparis-panel[data-acik] { transform: none; }
.sp-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sp-baslik { margin-top: 12px; font-size: 32px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; color: var(--uu-murekkep); }
.sp-alt { margin-top: 10px; font-size: 16px; color: var(--uu-gri); }
.sp-kapa { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--uu-kahve); background: #F1E3C6; transition: background-color .2s ease; }
.sp-kapa:hover { background: #EAD6AE; }
.sp-liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-secenek {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 22px; align-items: center; column-gap: 14px;
  padding: 12px 16px 12px 12px; border-radius: 22px; text-decoration: none; color: var(--uu-murekkep);
  background: #FFFDF9; box-shadow: 0 0 0 1px rgba(85, 50, 17, .09), 0 10px 24px -18px rgba(58, 34, 12, .5);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.sp-secenek:hover, .sp-secenek:focus-visible { box-shadow: 0 0 0 1.5px rgba(200, 145, 46, .55), 0 14px 28px -16px rgba(58, 34, 12, .55); }
.sp-karo { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; }
.sp-karo svg { width: 26px; height: 26px; }
.sp-karo--wa { background: linear-gradient(160deg, #2EE07A, #1DAA55); }
.sp-karo--tel { background: linear-gradient(160deg, #7A4A1E, var(--uu-kahve)); }
.sp-karo--ys { background: linear-gradient(160deg, #FF2D6F, #E6004C); }
.sp-karo--gelal { background: linear-gradient(160deg, #E2B25A, #B9862C); }
.sp-metin strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
.sp-metin span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--uu-gri); line-height: 1.35; }
.sp-ok { width: 22px; height: 22px; color: var(--altin-metin); transition: transform .3s var(--yay); }
.sp-secenek:hover .sp-ok { transform: translateX(4px); }
.sp-menu { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px; font-weight: 600; color: var(--uu-kahve); text-decoration: none; }
.sp-menu:hover { text-decoration: underline; text-underline-offset: .25em; }
.sp-g { opacity: 0; transform: translateX(-18px); transition: opacity .4s ease, transform .6s var(--yay); }
.siparis-panel[data-acik] .sp-g { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .06s); }

/* sol alt: WhatsApp */
.wa-kose { position: fixed; left: 22px; bottom: calc(22px + var(--uu-guvenli-alt)); z-index: 45; display: flex; align-items: flex-end; gap: 12px; }
.wa-dugme {
  position: relative; width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3CEB86 0%, #25D366 46%, #19B354 100%); color: #fff;
  box-shadow: 0 14px 26px -10px rgba(18, 140, 70, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-tap-highlight-color: transparent;
}
.wa-dugme::before, .wa-dugme::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .55);
  animation: wa-nabiz 2.6s cubic-bezier(.2, .7, .3, 1) infinite; pointer-events: none;
}
.wa-dugme::after { animation-delay: 1.3s; }
@keyframes wa-nabiz { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.75); opacity: 0; } }
.wa-dugme svg { width: 31px; height: 31px; animation: wa-salla 7s ease-in-out 4s infinite; transform-origin: 50% 55%; }
@keyframes wa-salla { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } 91% { transform: rotate(12deg); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(4deg); } }
@media (hover: hover) and (pointer: fine) { .wa-dugme:hover { box-shadow: 0 18px 30px -10px rgba(18, 140, 70, .85), inset 0 1px 0 rgba(255, 255, 255, .4); } }
.wa-balon-bag { display: block; color: inherit; text-decoration: none; }
.wa-balon {
  position: relative; margin-bottom: 8px; max-width: 250px; padding: 12px 34px 12px 14px; border-radius: 18px 18px 18px 6px;
  background: #FFFDF9; color: var(--uu-murekkep); text-decoration: none; font-size: 14.5px; line-height: 1.4;
  box-shadow: 0 0 0 1px rgba(85, 50, 17, .08), 0 16px 32px -18px rgba(36, 23, 12, .55);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 0 100%; transition: opacity .35s ease, transform .5s var(--yay);
}
.wa-balon[data-acik] { opacity: 1; transform: none; }
.wa-balon strong { display: block; font-size: 13px; font-weight: 700; color: #128C4A; margin-bottom: 2px; }
.wa-noktalar { display: inline-flex; gap: 4px; padding: 6px 2px; }
.wa-noktalar i { width: 6px; height: 6px; border-radius: 50%; background: #9C8F82; animation: wa-yaz 1s ease-in-out infinite; }
.wa-noktalar i:nth-child(2) { animation-delay: .15s; } .wa-noktalar i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-yaz { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-mesaj { display: none; }
.wa-balon[data-yazdi] .wa-noktalar { display: none; }
.wa-balon[data-yazdi] .wa-mesaj { display: block; }
.wa-balon-kapa { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--uu-gri); }
.wa-balon-kapa:hover { background: #F3E8D6; }

/* sağ alt: yukarı çık (çevresinde sayfa ilerleme halkası) */
.yukari {
  position: fixed; right: 22px; bottom: calc(22px + var(--uu-guvenli-alt)); z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--uu-kahve);
  background: #FFFDF9; box-shadow: 0 0 0 1px rgba(85, 50, 17, .08), 0 14px 28px -14px rgba(36, 23, 12, .6);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .45s var(--yay), visibility 0s .45s, background-color .2s ease;
}
.yukari[data-gorunur] { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .45s var(--yay), background-color .2s ease; }
.yukari-halka { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.yukari-halka circle { fill: none; stroke-width: 2.5; }
.yukari-halka circle:first-child { stroke: rgba(200, 145, 46, .18); }
.yukari-halka circle:last-child { stroke: var(--altin); stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.yukari-ok { width: 22px; height: 22px; transition: transform .3s var(--yay); }
@media (hover: hover) and (pointer: fine) { .yukari:hover { background: #FBF2E2; } .yukari:hover .yukari-ok { transform: translateY(-3px); } }

@media (max-width: 899px) {
  .siparis-sekme { width: 38px; gap: 10px; padding: 13px 0 14px; border-radius: 0 14px 14px 0; top: 56%; }
  .sekme-ikon { width: 19px; height: 19px; }
  .sekme-yazi { font-size: 12.5px; }
  .siparis-panel {
    top: auto; right: 0; width: 100%; max-height: 88svh; border-radius: 28px 28px 0 0;
    padding: 12px 18px calc(22px + var(--uu-guvenli-alt)); transform: translateY(104%);
    box-shadow: 0 -24px 50px -26px rgba(36, 23, 12, .6);
  }
  .siparis-panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(85, 50, 17, .2); margin: 0 auto 14px; }
  .sp-baslik { font-size: 27px; }
  .sp-g { transform: translateY(14px); }
  .wa-kose { left: 14px; bottom: calc(14px + var(--uu-guvenli-alt)); gap: 10px; }
  .wa-dugme { width: 52px; height: 52px; }
  .wa-dugme svg { width: 27px; height: 27px; }
  .wa-balon { max-width: 214px; font-size: 13.5px; padding: 10px 32px 10px 12px; }
  .yukari { right: 14px; bottom: calc(14px + var(--uu-guvenli-alt)); width: 48px; height: 48px; }
  .yukari-ok { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .siparis-sekme::after, .wa-dugme::before, .wa-dugme::after, .wa-dugme svg, .wa-noktalar i { animation: none; }
  .wa-dugme::before, .wa-dugme::after { display: none; }
  .siparis-panel, .siparis-ortu, .sp-g, .wa-balon, .yukari { transition: none; }
}

/* ---------- mobil: Online Sipariş sol kenardan alınır, altta ortada hap olur (başlığı/kartları örtmesin) ---------- */
@media (max-width: 899px) {
  .siparis-sekme {
    top: auto; bottom: calc(14px + var(--uu-guvenli-alt)); left: 50%; transform: translateX(-50%);
    flex-direction: row; width: auto; height: 52px; padding: 0 22px 0 18px; gap: 9px; border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 253, 249, .1), 0 14px 26px -12px rgba(58, 34, 12, .75);
  }
  .siparis-sekme::after { top: 0; bottom: 0; height: auto; left: -80px; right: auto; width: 56px; transform: skewX(-22deg); animation-name: sekme-isik-yatay; }
  .sekme-yazi { writing-mode: horizontal-tb; transform: none; font-size: 15px; letter-spacing: -.005em; }
  .wa-kose { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .wa-balon { margin-bottom: 0; }
  .alt { padding-bottom: calc(92px + var(--uu-guvenli-alt)); }
}
@keyframes sekme-isik-yatay { 0%, 70% { left: -80px; } 92%, 100% { left: 110%; } }
@media (max-width: 899px) {
  .yuzen .siparis-sekme, .yuzen .wa-kose { transition: opacity .35s ease, transform .55s var(--yay), visibility 0s; }
  .yuzen[data-hero] .siparis-sekme { opacity: 0; visibility: hidden; transform: translate(-50%, 28px); transition: opacity .25s ease, transform .4s var(--yay), visibility 0s .4s; }
  .yuzen[data-hero] .wa-kose { opacity: 0; visibility: hidden; transform: translateY(28px); transition: opacity .25s ease, transform .4s var(--yay), visibility 0s .4s; }
}

/* ---------- SEO METNİ (alt bilgi üstü): sakin, okunur; mobilde "Devamını oku" ---------- */
.seo { padding: clamp(72px, 8vw, 116px) 0 clamp(64px, 7vw, 96px); border-top: 1px solid var(--uu-tel); background: linear-gradient(180deg, var(--zemin-2) 0%, var(--zemin) 100%); }
.seo-kap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(40px, 5vw, 88px); align-items: start; }
.seo-bas { position: sticky; top: calc(var(--ust-h) + 20px); display: grid; gap: 16px; }
.seo-baslik { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; color: var(--uu-murekkep); text-wrap: balance; }
.seo-giris { font-size: 16.5px; line-height: 1.65; color: var(--uu-gri); }
.seo-sutunlar { columns: 2; column-gap: clamp(32px, 3.4vw, 56px); }
.seo-sutunlar article { break-inside: avoid; margin-bottom: 28px; }
.seo-sutunlar h3 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.012em; color: var(--uu-murekkep); margin-bottom: 8px; }
.seo-sutunlar p { font-size: 15.5px; line-height: 1.72; color: var(--uu-gri); }
.seo-sutunlar a { color: var(--uu-kahve); font-weight: 600; text-decoration-color: rgba(200, 145, 46, .55); text-underline-offset: .2em; }
.seo-devam { display: none; }

/* en alttaki imza (Kirpisoft standardı) */
.ks-imza { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: inherit; opacity: .78; font-size: 13.5px; transition: opacity .2s ease; }
.ks-imza b { font-weight: 700; transition: color .2s ease; }
.ks-imza svg { flex: none; transition: transform .35s var(--yay); }
.ks-imza:hover { opacity: 1; }
.ks-imza:hover b { color: #E3531E; }
.ks-imza:hover svg { transform: rotate(-12deg); }

@media (max-width: 899px) {
  .seo-kap { grid-template-columns: 1fr; }
  .seo-bas { position: static; }
  .seo-sutunlar { columns: 1; }
  .seo-govde { position: relative; max-height: 340px; overflow: hidden; transition: max-height .6s var(--yay); }
  .seo-govde::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(251, 247, 239, 0), var(--zemin)); transition: opacity .3s ease; }
  .seo-govde[data-acik] { max-height: 3000px; }
  .seo-govde[data-acik]::after { opacity: 0; }
  .seo-devam { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15.5px; color: var(--uu-kahve); }
  .seo-devam svg { transition: transform .3s var(--yay); }
  .seo-devam[aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* alt bilgi son satırı yüzen düğmelerin üstünde kalsın; en alta inince WhatsApp balonu çekilir */
.alt { padding-bottom: calc(108px + var(--uu-guvenli-alt)); }
.yuzen[data-alt] .wa-balon[data-acik] { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); transition: opacity .25s ease, transform .35s var(--yay), visibility 0s .35s; }
/* WhatsApp köşesinin boş alanı alttaki düğmelerin dokunuşunu yutmasın: yalnız düğme ve balon tıklanır */
.wa-kose { pointer-events: none; }
.wa-kose > * { pointer-events: auto; }

/* anasayfa bölümlerinden iç sayfalara geçiş bağlantısı */
.bolum-devam-kap { margin-top: 40px; text-align: center; }
.bolum-devam { margin-top: 22px; margin-left: -6px; }