/* KOR 3D QR menü: çevrilen menü defteri + sayfadan taşan hologram ürün görseli */

:root {
  --kagit: #f3e9d6;
  --murekkep: #2b1d13;
  --soluk: #6b5443;
  --altin: #c9a25a;
  --kor: #c8501c;
  --holo: 125, 225, 255;
  --doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --deri-doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Manrope, system-ui, sans-serif;
  color: #f3e9d8;
  background:
    radial-gradient(90% 60% at 50% 42%, rgba(200, 80, 28, .16), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, #2a1c13 0%, #130c08 55%, #070504 100%);
  background-color: #0d0907;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sahne {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}

/* ---------- Kategori sekmeleri ---------- */
.sekmeler {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  transition: opacity .5s, transform .5s;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler.kapali { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.sekme {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(243, 233, 216, .75);
  border: 1px solid rgba(201, 162, 90, .28);
  background: rgba(20, 13, 9, .55);
  transition: background .3s, color .3s, border-color .3s;
}
.sekme.aktif { background: var(--altin); color: #1b120b; border-color: var(--altin); }

/* ---------- Defter ---------- */
.defter-alani {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px; /* sayfadan taşan görsele yer */
  min-height: 0;
}

.defter {
  --w: min(90vw, 420px, calc((100dvh - 150px) / 1.62)); /* oran her ekranda korunur */
  --ds: 0;
  --tx: 0;
  --ty: 0;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.62);
  container-type: size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .8s cubic-bezier(.22, .7, .2, 1);
}

/* sağ kenarda sayfa yığını */
.defter::before {
  content: "";
  position: absolute;
  top: 1.2%; bottom: 1.2%; right: -7px;
  width: 9px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(90deg, #efe4cf 0 1px, #c9b896 1px 2px);
  box-shadow: 2px 0 6px rgba(0, 0, 0, .35);
}
/* masadaki gölge */
.defter::after {
  content: "";
  position: absolute;
  left: 4%; right: -4%; bottom: -5%;
  height: 10%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent);
  filter: blur(6px);
  z-index: -1;
}

/* çevrilen sayfanın alttaki sayfaya düşen gölgesi */
.alt-golge {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(90deg, rgba(25, 12, 4, .5), rgba(25, 12, 4, .12) 45%, transparent 75%);
  opacity: var(--ds);
}

.yaprak {
  --flip: 0;
  --s: 0;
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: perspective(1700px) rotateY(calc(var(--flip) * -180deg));
  transform-style: preserve-3d;
}
.yaprak.uyku { visibility: hidden; }

.yuz {
  position: absolute;
  inset: 0;
  overflow: visible;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px 10px 10px 3px;
  background-color: var(--kagit);
  background-image:
    linear-gradient(90deg, rgba(70, 45, 20, .3), rgba(70, 45, 20, .06) 5%, transparent 10%),
    var(--doku);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .18), 0 1px 2px rgba(0, 0, 0, .3);
}
.yuz.arka {
  transform: rotateY(180deg);
  border-radius: 10px 3px 3px 10px;
  background-image:
    linear-gradient(270deg, rgba(70, 45, 20, .3), rgba(70, 45, 20, .06) 5%, transparent 10%),
    var(--doku);
  background-color: #eee2cc;
}

/* sayfa kalkarken oluşan ışık/gölge */
.isik {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--s);
  z-index: 50;
}
.on > .isik { background: linear-gradient(90deg, rgba(255, 248, 235, .15), rgba(30, 15, 5, .38) 85%); }
.arka > .isik { background: linear-gradient(270deg, rgba(255, 248, 235, .1), rgba(30, 15, 5, .42) 90%); }

.sayfa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 5cqw 6cqw 4.5cqw 8.5cqw;
  color: var(--murekkep);
}
.arka .sayfa { padding: 5cqw 8.5cqw 4.5cqw 6cqw; }

.sayfa-ust {
  display: flex;
  align-items: center;
  gap: 3cqw;
  font-size: 2.9cqw;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--soluk);
}
.sayfa-ust::before, .sayfa-ust::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107, 84, 67, .45), transparent);
}

.sayfa-no {
  margin-top: auto;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 4cqw;
  color: var(--soluk);
}

/* ---------- Kapak ---------- */
.yuz.deri {
  background-color: #3b1611;
  background-image:
    radial-gradient(110% 80% at 30% 20%, rgba(255, 170, 120, .12), transparent 60%),
    linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 7%),
    var(--deri-doku);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 30px rgba(0, 0, 0, .55);
}
.kapak {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10cqw 8cqw;
}
.dikis {
  position: absolute;
  inset: 4.5cqw 4.5cqw 4.5cqw 7cqw;
  border: 1.5px dashed rgba(201, 162, 90, .45);
  border-radius: 2cqw;
}
.amblem { width: 18cqw; margin-bottom: 4cqw; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.marka {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 30cqw;
  line-height: .85;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #f1d697 0%, #c9a25a 45%, #8a6630 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
.slogan {
  margin-top: 3cqw;
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: .42em;
  color: var(--altin);
}
.kur {
  margin-top: 2cqw;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 4.4cqw;
  color: rgba(241, 214, 151, .7);
}
.ac {
  position: absolute;
  bottom: 11cqw;
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(241, 214, 151, .85);
  animation: nabiz-yazi 2.2s ease-in-out infinite;
}
@keyframes nabiz-yazi { 50% { opacity: .45; transform: translateX(1.5cqw); } }

/* iç kapak */
.yuz.ic-kapak {
  background-color: #2a110d;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(201, 162, 90, .12) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, rgba(201, 162, 90, .12) 0 2px, transparent 3px),
    linear-gradient(270deg, rgba(0, 0, 0, .45), transparent 8%);
  background-size: 9cqw 9cqw, 9cqw 9cqw, auto;
}
.ic-kapak-yazi {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 6cqw;
  color: rgba(241, 214, 151, .75);
  padding: 10cqw;
}

/* ---------- İçindekiler ---------- */
.icindekiler { justify-content: flex-start; }
.icindekiler .sus { margin-top: 6cqw; text-align: center; color: var(--altin); font-size: 5cqw; }
.icindekiler h1 {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 14cqw;
  line-height: 1;
}
.icindekiler .alt {
  text-align: center;
  margin-top: 1.5cqw;
  font-size: 3.3cqw;
  color: var(--soluk);
}
.icindekiler ul { list-style: none; margin-top: 8cqw; display: grid; gap: 6cqw; }
.icindekiler li button { display: flex; align-items: baseline; gap: 2cqw; width: 100%; text-align: left; }
.icindekiler .ad { font-family: "Cormorant Garamond", serif; font-size: 7.4cqw; font-weight: 600; }
.icindekiler .nokta { flex: 1; border-bottom: 1.5px dotted rgba(107, 84, 67, .55); transform: translateY(-1cqw); }
.icindekiler .no { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 6cqw; color: var(--kor); }
.icindekiler small { display: block; margin-top: 1cqw; font-size: 3.3cqw; color: var(--soluk); }

/* ---------- Ürün sayfası ---------- */
.vitrin {
  position: relative;
  flex: 0 0 54%;
  margin-top: 3.5cqw;
  border-radius: 3.5cqw;
  background:
    radial-gradient(70% 55% at 50% 88%, rgba(200, 80, 28, .38), transparent 72%),
    radial-gradient(60% 50% at 50% 30%, rgba(var(--holo), .07), transparent 70%),
    linear-gradient(180deg, #1d140f, #0e0906);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .35), 0 10px 22px -12px rgba(40, 20, 5, .6);
}

/* kıvılcımlar */
.kivilcim {
  position: absolute;
  bottom: 12%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffb36b;
  box-shadow: 0 0 6px 1px rgba(255, 140, 60, .8);
  opacity: 0;
  animation: kivilcim 4.5s linear infinite;
}
@keyframes kivilcim {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--kx, 10px), -46cqw) scale(.3); }
}

/* hologram platformu */
.platform {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 74%;
  aspect-ratio: 1;
  transform: translateX(-50%) scaleY(.27);
  transform-origin: 50% 100%;
  opacity: .12;
  transition: opacity .8s;
}
.platform i { position: absolute; border-radius: 50%; }
.platform .zemin { inset: 6%; background: radial-gradient(closest-side, rgba(var(--holo), .35), rgba(var(--holo), .05) 70%, transparent); }
.platform .halka { inset: 0; border: 2px solid rgba(var(--holo), .8); box-shadow: 0 0 14px rgba(var(--holo), .7), inset 0 0 14px rgba(var(--holo), .5); }
.platform .halka.ic { inset: 20%; border-width: 1.5px; opacity: .7; animation: halka-nabiz 2.6s ease-in-out infinite; }
.platform .don {
  inset: -5%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--holo), .95) 80%, transparent 82%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 97%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 97%, transparent 99%);
  animation: don 3.2s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
@keyframes halka-nabiz { 50% { transform: scale(1.08); opacity: .35; } }

/* platformdan yükselen ışık */
.isin {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 66%;
  height: 70%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px),
    linear-gradient(0deg, rgba(var(--holo), .3), rgba(var(--holo), 0) 88%);
  clip-path: polygon(16% 100%, 84% 100%, 100% 0, 0 0);
  opacity: 0;
  transition: opacity .8s;
  pointer-events: none;
}

.tabak-golge {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 52%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  transform: translateX(-50%) translateX(calc(var(--tx) * 2.5cqw));
  opacity: 0;
  transition: opacity .8s;
}

/* 1. aşama: menüye basılmış fotoğraf */
.baski {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.baski img {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translateX(-50%) scale(.8);
  filter: saturate(.9) contrast(1.04) drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
  transition: opacity .25s, filter .6s;
}
/* fotoğraf havalandıktan sonra yerinde kalan hologram izi */
.baski::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(var(--holo), .09) 0 1px, transparent 1px 3px);
  opacity: 0;
  transition: opacity .8s .3s;
}

/* 2. aşama: ürün fotoğraftan sökülüp öne çıkar */
.tabak {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 100%;
  aspect-ratio: 1;
  transform-origin: 50% 85%;
  perspective: 900px;
  perspective-origin: 50% 60%;
  transform:
    translateX(-50%)
    translate(calc(var(--tx) * -3.2cqw), calc(var(--ty) * -2.2cqw))
    perspective(900px)
    rotateY(calc(var(--tx) * 10deg))
    rotateX(calc(var(--ty) * -7deg));
  opacity: 0;
  pointer-events: none;
}
.tabak-kalk {
  position: absolute;
  inset: 0;
  transform: translateZ(0) scale(.8);
}
.tabak-yuzer { position: absolute; inset: 0; }
.tabak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(var(--holo), .6));
}
/* ürünün üstünden süzülen ışık (yalnızca ürünün şekli içinde) */
.parilti {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--img, linear-gradient(transparent, transparent)) center / contain no-repeat;
  mask: var(--img, linear-gradient(transparent, transparent)) center / contain no-repeat;
  background: linear-gradient(112deg, transparent 45%, rgba(200, 245, 255, .35) 49%, rgba(255, 255, 255, .6) 50%, rgba(200, 245, 255, .3) 51%, transparent 55%);
  background-size: 300% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  opacity: .7;
}
@keyframes parilti { 0%, 30% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }

/* fotoğrafın üstünden geçen tarama çizgisi */
.tarama {
  position: absolute;
  left: 4%; right: 4%;
  bottom: 6%;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--holo), 1);
  box-shadow: 0 0 14px 4px rgba(var(--holo), .75), 0 0 40px 8px rgba(var(--holo), .3);
  opacity: 0;
  pointer-events: none;
}

/* buhar */
.buhar { position: absolute; left: 50%; top: 22%; width: 40%; height: 40%; transform: translateX(-50%); pointer-events: none; }
.buhar i {
  position: absolute;
  bottom: 0;
  width: 26%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent);
  filter: blur(6px);
  opacity: 0;
}
.buhar i:nth-child(1) { left: 15%; }
.buhar i:nth-child(2) { left: 40%; animation-delay: 1.4s !important; }
.buhar i:nth-child(3) { left: 62%; animation-delay: 2.8s !important; }
@keyframes buhar {
  0% { opacity: 0; transform: translateY(20%) scale(.6); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-80%) scale(1.5) rotate(12deg); }
}

/* uyanış: platform yanar, tarama geçer, ürün döne döne yükselir */
.vitrin.uyanik .baski img {
  opacity: .16;
  transition: opacity .5s .55s, filter .5s .55s;
  filter: grayscale(1) brightness(1.7) sepia(1) hue-rotate(160deg) saturate(4);
}
.vitrin.uyanik .baski::after { opacity: 1; }
.vitrin.uyanik .tarama { animation: tarama .75s cubic-bezier(.4, 0, .3, 1) both; }
.vitrin.uyanik .platform { opacity: 1; animation: atesle .9s ease-out both; }
.vitrin.uyanik .isin { opacity: .75; animation: isin-buyu .9s .2s ease-out both, titre 3.4s 1.1s ease-in-out infinite; }
.vitrin.uyanik .tabak-golge { opacity: .9; transition-delay: .5s; }
.vitrin.uyanik .tabak { opacity: 1; }
.vitrin.uyanik .tabak-kalk { animation: yuksel 1.9s .15s cubic-bezier(.25, .8, .25, 1) both, salin 9s 2.05s ease-in-out infinite; }
.vitrin.uyanik .tabak-yuzer { animation: parla 1.4s .15s ease-out both; }
.vitrin.uyanik .tabak img { animation: yuz 5.5s 2.05s ease-in-out infinite; }
.vitrin.uyanik .parilti { animation: parilti 5s 1.4s ease-in-out infinite; }
.vitrin.uyanik .buhar i { animation: buhar 4.2s 1.6s ease-out infinite; }

@keyframes tarama {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-78cqw); }
}
@keyframes atesle {
  0% { opacity: .2; transform: translateX(-50%) scaleY(.27) scale(.55); }
  45% { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 1; transform: translateX(-50%) scaleY(.27) scale(1); filter: brightness(1); }
}
@keyframes isin-buyu { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; } 100% { opacity: .75; transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; } }
@keyframes yuksel {
  0% { transform: translateZ(0) scale(.8) rotateY(0deg); }
  30% { transform: translateZ(14px) translateY(-1.5%) scale(.87) rotateY(-32deg); }
  62% { transform: translateZ(40px) translateY(-3%) scale(1.03) rotateY(14deg); }
  82% { transform: translateZ(46px) translateY(-2%) scale(.99) rotateY(-5deg); }
  100% { transform: translateZ(45px) translateY(-2%) scale(1) rotateY(0deg); }
}
@keyframes salin {
  0%, 100% { transform: translateZ(45px) translateY(-2%) rotateY(0deg); }
  25% { transform: translateZ(45px) translateY(-2%) rotateY(-17deg); }
  75% { transform: translateZ(45px) translateY(-2%) rotateY(17deg); }
}
@keyframes parla {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.9) saturate(.6) drop-shadow(0 0 18px rgba(var(--holo), .95)); }
  100% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(var(--holo), 0)); }
}
@keyframes yuz { 50% { translate: 0 -2.2cqw; } }
@keyframes titre { 0%, 100% { opacity: .75; } 47% { opacity: .55; } 50% { opacity: .85; } 53% { opacity: .6; } }

/* buz düşüşü (yalnızca limonata) */
.buz-sahne { --kenar: 25%; position: absolute; inset: 0; pointer-events: none; }
.buz-dusus {
  position: absolute;
  left: 0; right: 0;
  top: -45%;
  height: calc(45% + var(--kenar));
  overflow: hidden; /* buz bardak ağzından aşağı geçince kaybolur */
}
.buz {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 13%;
  aspect-ratio: 1;
  margin-left: -6.5%;
  background: url("gorseller/buz.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  opacity: 0;
  transform: translateY(-260%) rotate(-25deg);
}
.halkacik {
  position: absolute;
  left: 50%;
  top: var(--kenar);
  width: 34%;
  height: 4%;
  margin: -2% 0 0 -17%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 0 8px rgba(255, 255, 255, .6);
  opacity: 0;
}
.damla {
  position: absolute;
  left: 50%;
  top: var(--kenar);
  width: calc(2% * var(--b));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, rgba(240, 225, 120, .9) 45%, rgba(190, 150, 40, .85));
  box-shadow: 0 1px 3px rgba(60, 40, 0, .45), 0 0 6px rgba(255, 240, 160, .6);
  opacity: 0;
}
.vitrin.uyanik .buz { animation: buz-dus .5s 2.3s cubic-bezier(.55, 0, .9, .5) both; }
.vitrin.uyanik .halkacik { animation: halkacik .7s 2.78s ease-out both; }
.vitrin.uyanik .damla { animation: damla .85s 2.76s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes buz-dus {
  0% { opacity: 0; transform: translateY(-260%) rotate(-25deg); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translateY(110%) rotate(18deg); }
}
@keyframes halkacik {
  0% { opacity: .9; transform: scale(.25); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes damla {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: 1; }
  45% { opacity: 1; transform: translate(calc(var(--dx) * .75), var(--dy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -.15)) scale(.6); }
}

/* görsel henüz yoksa */
.yer-tutucu {
  position: absolute;
  inset: 14% 18% 22%;
  display: none;
  place-content: center;
  text-align: center;
  border: 1.5px dashed rgba(var(--holo), .5);
  border-radius: 50%;
  font-size: 3cqw;
  line-height: 1.5;
  color: rgba(var(--holo), .85);
}
.vitrin.bos .yer-tutucu { display: grid; }
.vitrin.bos .tabak, .vitrin.bos .baski { display: none; }

/* bilgi alanı */
.bilgi { padding-top: 5cqw; }
.baslik-satir { display: flex; align-items: baseline; gap: 2cqw; }
.baslik-satir h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 8.6cqw;
  line-height: 1.02;
}
.baslik-satir .nokta { flex: 1; min-width: 4cqw; border-bottom: 1.5px dotted rgba(107, 84, 67, .55); transform: translateY(-1.2cqw); }
.fiyat {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 8cqw;
  color: var(--kor);
  white-space: nowrap;
}
.fiyat small { font-family: Manrope, sans-serif; font-size: .62em; font-weight: 700; margin-left: .12em; }
.aciklama { margin-top: 2.4cqw; font-size: 3.75cqw; line-height: 1.5; color: #4a382b; }
.etiketler { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 3cqw; }
.etiket {
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .9cqw 2.4cqw;
  border-radius: 99px;
  border: 1px solid rgba(107, 84, 67, .35);
  color: var(--soluk);
}

/* ürün arkası ve son sayfa */
.filigran {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3cqw;
  opacity: .14;
}
.filigran svg { width: 34cqw; }
.filigran span { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 9cqw; letter-spacing: .3em; color: var(--murekkep); }

.son { justify-content: center; align-items: center; text-align: center; }
.son .ust { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13cqw; line-height: 1; }
.son p { margin-top: 3cqw; font-size: 3.6cqw; color: var(--soluk); line-height: 1.55; max-width: 62cqw; }
.cta {
  margin-top: 8cqw;
  padding-top: 6cqw;
  border-top: 1px solid rgba(107, 84, 67, .25);
  display: grid;
  justify-items: center;
  gap: 3cqw;
  width: 100%;
}
.cta-baslik { margin: 0 !important; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 6cqw !important; color: var(--murekkep) !important; }
.cta-dugme {
  display: inline-block;
  padding: 3.2cqw 7cqw;
  border-radius: 99px;
  background: #1f7a4d;
  color: #fff;
  font-size: 3.8cqw;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(20, 80, 50, .6);
}
.cta-site { font-size: 2.8cqw; letter-spacing: .16em; font-weight: 700; color: var(--soluk); text-decoration: none; text-transform: uppercase; }

/* ---------- İpucu ---------- */
.ipucu {
  margin-top: 12px;
  min-height: 18px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(243, 233, 216, .55);
  transition: opacity .6s;
}
.ipucu.gizli { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .buz-sahne { display: none; }
  .vitrin.uyanik .tabak img, .vitrin.uyanik .parilti, .vitrin.uyanik .tabak-kalk, .buz-sahne, .kivilcim, .buhar i, .platform .don, .platform .halka.ic, .ac { animation: none !important; }
}