/* ═══════════════════════════════════════════════════════════════════════════
   ÜYE DENEYİMİ KATMANI (2026-10-30) — QR menü, tüm Resta.Run mağazaları
   3) Üye Kartı (uyk): 3D, eğilen, hologramlı üyelik kartı + avantajlar
   4) Giriş kutlaması (uyk-kutla) + ürün fiyatı çevirme (uyk-flip)
   5) Üye fiyatı rozeti parıltısı + sepet sayaç vurgusu
   Renkler --brand'den türetilir (her mağaza kendi renginde). Sınıflar önekli —
   mevcut menü CSS'iyle çakışmaz. Bu dosya menü CSS'inden SONRA yüklenir.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --uyk-gold-1:#fff1c1;
  --uyk-gold-2:#f3c969;
  --uyk-gold-3:#c8952e;
  --uyk-gold-ink:#7a4b06;
  --uyk-ink:#0b1512;
  --uyk-ease:cubic-bezier(.16,1,.3,1);
}

/* ── 3 · ÜYE KARTI ─────────────────────────────────────────────────────── */
.uyk{
  --uyk-b:var(--brand,#0f766e);
  position:relative; margin:16px 16px 6px; display:grid; justify-items:center;
}
.uyk[hidden]{ display:none }
/* Ürün listesi açıkken kart yer kaplamaz (yalnız keşfet/kategori görünümünde) */
main:has(#viewProducts:not(.hidden)) > .uyk{ display:none }

/* Sahne + süzülme */
/* container-type ve opaklık animasyonu SAHNEDE (3D bağlamın DIŞINDA): WebKit'te preserve-3d öğesindeki
   containment/opaklık 3D'yi düzleştirip arka yüzü bozuyordu (iOS PWA bildirimi). */
.uyk__stage{ position:relative; width:min(100%,430px); perspective:1100px; padding:4px 0 18px; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:22px; outline:none; container-type:inline-size }
.uyk__stage:focus-visible .uyk__card{ box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--uyk-b) 60%,transparent); border-radius:20px }
.uyk.is-uye .uyk__stage{ cursor:default }
.uyk__float{ transform-style:preserve-3d; animation:uykFloat 7s ease-in-out infinite }
@keyframes uykFloat{
  0%,100%{ transform:translateY(0) rotateY(-7deg) rotateX(3deg) }
  50%    { transform:translateY(-7px) rotateY(7deg) rotateX(-2deg) }
}
.uyk__shadow{
  position:absolute; left:12%; right:12%; bottom:2px; height:18px; border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--uyk-b) 45%,rgba(0,0,0,.5)),transparent);
  filter:blur(6px); opacity:.55; animation:uykShadow 7s ease-in-out infinite;
}
@keyframes uykShadow{ 0%,100%{ transform:scaleX(1); opacity:.55 } 50%{ transform:scaleX(.86); opacity:.38 } }

/* Kart */
.uyk__card{
  --rx:0deg; --ry:0deg; --mx:30%; --my:20%;
  position:relative; width:100%; aspect-ratio:1.586; border-radius:20px;
  transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip,0deg)));
  transition:transform .7s var(--uyk-ease);
  outline:none; will-change:transform;
}
.uyk__card.is-tilting{ transition:transform .08s linear }
.uyk__card:focus-visible{ box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--uyk-b) 60%,transparent) }
.uyk__face{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  color:#fff;
}
.uyk__face--front{
  background:
    radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--uyk-b) 70%,#ffffff 22%) 0%,transparent 52%),
    radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--uyk-b) 40%,#000) 0%,transparent 70%),
    linear-gradient(140deg,color-mix(in srgb,var(--uyk-b) 82%,#000) 0%,color-mix(in srgb,var(--uyk-b) 34%,#041411) 58%,#030807 100%);
  box-shadow:0 24px 44px -20px color-mix(in srgb,var(--uyk-b) 70%,#000),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28);
}
/* Güvenlik baskısı deseni (guilloche) */
.uyk__face--front::before{
  content:""; position:absolute; inset:-20%; pointer-events:none; opacity:.16;
  background:
    repeating-radial-gradient(circle at 85% 18%,rgba(255,255,255,.9) 0 1px,transparent 1px 7px),
    repeating-radial-gradient(circle at 10% 110%,rgba(255,255,255,.7) 0 1px,transparent 1px 9px);
  mask-image:linear-gradient(120deg,transparent 10%,#000 45%,transparent 90%);
  -webkit-mask-image:linear-gradient(120deg,transparent 10%,#000 45%,transparent 90%);
}
/* Hologram + parlama (eğime göre kayar) */
.uyk__holo{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.55;
  background:linear-gradient(115deg,transparent 28%,rgba(255,222,140,.55) 40%,rgba(120,255,226,.45) 48%,rgba(255,150,222,.4) 56%,transparent 68%);
  background-size:260% 260%;
  background-position:var(--hx,40%) var(--hy,40%);
  animation:uykHolo 6s ease-in-out infinite;
}
.uyk__card.is-tilting .uyk__holo{ animation:none }
@keyframes uykHolo{ 0%,100%{ background-position:20% 30% } 50%{ background-position:80% 70% } }
.uyk__shine{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.75),rgba(255,255,255,0) 46%);
}
.uyk__in{ position:absolute; inset:0; padding:16px 18px; display:grid; grid-template-rows:auto 1fr auto; pointer-events:none }
.uyk__top{ display:flex; align-items:center; gap:9px; min-width:0 }
.uyk__logo{ width:30px; height:30px; border-radius:9px; background:#fff; object-fit:contain; padding:2px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.25) }
.uyk__logo--ph{ display:grid; place-items:center; color:var(--uyk-b); font-weight:900; font-size:12px }
.uyk__club{ font-size:10.5px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.uyk__crown{ margin-left:auto; color:var(--uyk-gold-2); font-size:17px; filter:drop-shadow(0 0 6px rgba(243,201,105,.6)) }
.uyk__mid{ display:flex; align-items:center; gap:10px; align-self:center; min-width:0 }
.uyk__chip{
  width:38px; height:29px; border-radius:7px; flex-shrink:0;
  background:
    linear-gradient(90deg,transparent 31%,rgba(122,75,6,.55) 32% 34%,transparent 35% 65%,rgba(122,75,6,.55) 66% 68%,transparent 69%),
    linear-gradient(0deg,transparent 46%,rgba(122,75,6,.55) 47% 53%,transparent 54%),
    linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2) 45%,var(--uyk-gold-3));
  box-shadow:inset 0 0 0 1px rgba(122,75,6,.35),0 1px 2px rgba(0,0,0,.3);
}
.uyk__big{
  font-size:clamp(38px,12vw,50px); font-weight:900; letter-spacing:-.04em; line-height:.9;
  background:linear-gradient(180deg,#fff7dc 0%,var(--uyk-gold-2) 55%,var(--uyk-gold-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35));
  font-variant-numeric:tabular-nums;
}
.uyk__lbl{ font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; line-height:1.4; color:rgba(255,255,255,.82); white-space:nowrap; min-width:0 }
@container (min-width:0px){
  .uyk__big{ font-size:clamp(34px,14.5cqw,54px) }
  .uyk__lbl{ font-size:clamp(8.5px,2.9cqw,11px) }
  .uyk__chip{ width:clamp(28px,10.5cqw,40px); height:clamp(21px,8cqw,30px) }
  .uyk__in{ padding:clamp(12px,4.6cqw,18px) clamp(14px,5.2cqw,20px) }
  /* Dar kartta (cüzdan, küçük telefon) ad ve etiket sığsın: harf aralığı ve boyut kapla ölçeklenir */
  .uyk__name{ font-size:clamp(10.5px,3.3cqw,12.5px); letter-spacing:clamp(.8px,.5cqw,2.4px) }
  .uyk__pill{ font-size:clamp(8.5px,2.5cqw,9.5px); letter-spacing:clamp(.6px,.4cqw,1.6px); padding:4px clamp(7px,2.4cqw,10px) }
}
.uyk__bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px }
.uyk__name{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-shadow:0 1px 0 rgba(0,0,0,.4) }
.uyk__pill{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:9.5px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; color:var(--uyk-gold-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)); box-shadow:0 2px 8px rgba(0,0,0,.25) }
.uyk__pill i{ font-size:9px }
.uyk:not(.is-uye) .uyk__pill{ animation:uykPill 2.8s ease-in-out 1.4s infinite }
@keyframes uykPill{ 0%,100%{ box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 0 rgba(243,201,105,.55) } 50%{ box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 7px rgba(243,201,105,0) } }
.uyk.is-uye .uyk__pill{ color:#064e3b; background:linear-gradient(135deg,#d1fae5,#6ee7b7) }
.uyk.is-uye .uyk__pill.is-yildiz{ color:var(--uyk-gold-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)) }

/* Sıradaki ödüle ilerleme (girişli üye + yıldız): etiketin altında ince altın çizgi */
.uyk__ilerle{ display:block; height:4px; margin-top:6px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; width:min(100%,120px) }
.uyk__ilerle b{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--uyk-gold-2),var(--uyk-gold-1)); box-shadow:0 0 8px rgba(243,201,105,.7) }
/* Ayrı yıldız kartı birleşik kart varken gizli */
.uyk-on #loyaltyBanner.uyk-gizli{ display:none }
/* Ön yüzün tamamı görünmez düğme: dokunuş / klavye → Club cüzdanı */
.uyk__ac{ position:absolute; inset:0; z-index:2; margin:0; padding:0; border:0; background:transparent; border-radius:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
.uyk__ac:focus-visible{ outline:3px solid #fff; outline-offset:-6px }
/* Dokunuşta kart hafifçe içe basılır (uygulama düğmesi hissi) */
.uyk__card.is-basili{ transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(.965); transition:transform .18s var(--uyk-ease) }

/* Giriş animasyonu (görünür olunca) */
.uyk.is-armed .uyk__stage{ opacity:0 }
.uyk.is-armed .uyk__float{ transform:translateY(26px) rotateY(-42deg) rotateX(14deg) scale(.92) }
.uyk.is-in .uyk__stage{ animation:uykFade .55s ease both }
.uyk.is-in .uyk__float{ animation:uykEnter 1s var(--uyk-ease) both, uykFloat 7s ease-in-out 1s infinite }
@keyframes uykFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes uykEnter{ from{ transform:translateY(26px) rotateY(-42deg) rotateX(14deg) scale(.92) } to{ transform:translateY(0) rotateY(-7deg) rotateX(3deg) } }
.uyk:not(.is-vis) .uyk__float, .uyk:not(.is-vis) .uyk__shadow, .uyk:not(.is-vis) .uyk__holo, .uyk:not(.is-vis) .uyk__pill{ animation-play-state:paused }

/* Kupon şeridinde üye kuponu kart varken gizlenir */
.uyk-on .qrcpn[data-promo-type="member"], .uyk-on .qrcpn.uyk-gizli{ display:none }

/* ── 4 · GİRİŞ KUTLAMASI ───────────────────────────────────────────────── */
.uyk-kutla{
  position:fixed; inset:0; z-index:100500; display:grid; place-items:center; padding:24px;
  background:radial-gradient(70% 50% at 50% 40%,color-mix(in srgb,var(--brand,#0f766e) 35%,rgba(3,8,7,.6)),rgba(3,8,7,.72));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .35s ease;
}
.uyk-kutla.is-open{ opacity:1 }
.uyk-kutla{ --uyk-b:var(--brand,#0f766e) }
.uyk-kutla .uyk__pill{ color:#064e3b; background:linear-gradient(135deg,#d1fae5,#6ee7b7) }
.uyk-kutla .uyk__float{ animation:none }
.uyk-kutla__box{ display:grid; gap:18px; justify-items:center; text-align:center; width:min(100%,360px) }
.uyk-kutla .uyk__stage{ cursor:default; perspective:1200px }
.uyk-kutla__flip{ transform-style:preserve-3d; animation:kutlaIn 1.25s cubic-bezier(.2,1.25,.35,1) both }
.uyk-kutla .uyk__stage{ animation:uykFade .45s ease both }
@keyframes kutlaIn{
  0%  { transform:translateY(42vh) rotateY(-540deg) rotateX(25deg) scale(.55) }
  100%{ transform:none }
}
.uyk-kutla__t{ margin:0; font-size:24px; font-weight:900; letter-spacing:-.6px; color:#fff; opacity:0; animation:kutlaTxt .6s var(--uyk-ease) .85s both }
.uyk-kutla__s{ margin:0; font-size:14.5px; font-weight:700; color:rgba(255,255,255,.86); line-height:1.45; opacity:0; animation:kutlaTxt .6s var(--uyk-ease) 1s both }
.uyk-kutla__s b{ color:var(--uyk-gold-2) }
.uyk-kutla__btn{ border:0; border-radius:14px; padding:12px 22px; font:inherit; font-weight:900; font-size:14.5px; color:var(--uyk-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)); box-shadow:0 10px 24px -10px rgba(243,201,105,.8); cursor:pointer; opacity:0; animation:kutlaTxt .6s var(--uyk-ease) 1.15s both }
@keyframes kutlaTxt{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.uyk-kutla__p{
  position:absolute; left:50%; top:42%; width:0; height:0; pointer-events:none;
  color:var(--c,var(--uyk-gold-2)); font-size:var(--fs,14px);
  animation:kutlaBurst 1.3s cubic-bezier(.15,.85,.35,1) var(--dl,.75s) both;
}
.uyk-kutla__p i{ display:block; transform:translate(-50%,-50%) }
@keyframes kutlaBurst{
  0%  { opacity:0; transform:translate(0,0) scale(.3) rotate(0) }
  15% { opacity:1 }
  100%{ opacity:0; transform:translate(var(--tx),var(--ty)) scale(1) rotate(var(--rt,180deg)) }
}

/* Ürün kartında fiyatın çevrilmesi (girişte) */
.mprice.uyk-flip{ animation:uykFlip .8s var(--uyk-ease) var(--d,0s) both; transform-origin:50% 50%; backface-visibility:hidden }
@keyframes uykFlip{
  0%  { transform:perspective(320px) rotateX(0) }
  45% { transform:perspective(320px) rotateX(90deg) }
  46% { transform:perspective(320px) rotateX(-90deg) }
  100%{ transform:perspective(320px) rotateX(0); box-shadow:0 0 0 0 rgba(16,185,129,0) }
}
.mprice.uyk-flip{ box-shadow:0 0 0 4px rgba(16,185,129,.18) }

/* ── 5 · ROZET PARILTISI + SEPET SAYACI ─────────────────────────────────── */
/* Rozet kelime kelime bölünmesin: etiket ve fiyat birer bütün, sığmazsa alt satıra */
.card .mprice{ flex-wrap:wrap; white-space:nowrap; row-gap:1px; max-width:100% }
/* Girişli üye: altın üye fiyatı + küçük çizili eski fiyat tek satırda; rozet tek satır altın.
   Kart yüksekliği misafir görünümüyle aynı — giriş yapınca içerik aşağı kaymaz. */
.card.is-member-price .price.uyk-uye-fiyat{
  text-decoration:none; opacity:1; font-size:inherit;
  display:flex; align-items:baseline; flex-wrap:nowrap; column-gap:7px; min-width:0;
}
.uyk-mp{
  font-weight:800; white-space:nowrap; flex-shrink:0;
  background:linear-gradient(180deg,#c08a1e 0%,#8a5a00 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.uyk-mp small{ -webkit-text-fill-color:#9a6608; color:#9a6608 }
.uyk-eski{ font-size:.6em; font-weight:600; color:#94a3b8; text-decoration-thickness:1.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.card.is-member-price .mprice{
  cursor:default; white-space:nowrap;
  color:#92400e; background:linear-gradient(135deg,#fff8e1,#fde9b0); border-color:#f3c969;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.card.is-member-price .mprice i{ color:#c8952e }
/* Sepette üye fiyatı da altın (tutarlı dil) */
.mprice-cart{ color:#8a5a00 }
.mprice-cart i{ color:#c8952e }
.card:not(.is-member-price) .mprice{ position:relative; overflow:hidden; isolation:isolate }
.card:not(.is-member-price) .mprice::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  transform:translateX(-130%); animation:mpShine 5.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * 140ms + 1.5s);
}
@keyframes mpShine{ 0%{ transform:translateX(-130%) } 22%,100%{ transform:translateX(130%) } }
.card:not(.is-member-price) .mprice i{ display:inline-block; animation:mpCrown 5.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * 140ms + 1.5s) }
@keyframes mpCrown{ 0%,14%,100%{ transform:none } 5%{ transform:rotate(-14deg) scale(1.18) } 9%{ transform:rotate(10deg) scale(1.1) } }
#cartMemberTeaserVal.uyk-say, #cartMemberLineVal.uyk-say{ display:inline-block; animation:uykSay .5s var(--uyk-ease) }
@keyframes uykSay{ 0%{ transform:scale(1) } 35%{ transform:scale(1.18); color:#b45309 } 100%{ transform:scale(1) } }
.cart-member-teaser .fa-crown{ display:inline-block; animation:mpCrown 4.4s ease-in-out 1s infinite }

/* ── 3b · CLUB CÜZDANI (uyc) ───────────────────────────────────────────────
   Alttan açılan tam ekran sayfa. Katman: başlık(80) < cüzdan(85) < modallar(90).
   Zemin menünün beyazından ayrışsın diye marka renginden çok hafif tonlanır;
   bölümler beyaz "grup" kutuları (mobil uygulama ayar ekranı dili). */
.uyc{
  --uyk-b:var(--brand,#0f766e);
  --uyc-zemin:color-mix(in srgb,var(--uyk-b) 5%,#f4f5f4);
  --uyc-yazi:#101614; --uyc-soluk:#5f6b67; --uyc-cizgi:rgba(16,22,20,.08);
  --uyc-alt-h:0px;
  position:fixed; inset:0; z-index:85; display:flex; flex-direction:column; justify-content:flex-end;
}
.uyc[hidden]{ display:none }
.uyc.has-alt{ --uyc-alt-h:calc(76px + env(safe-area-inset-bottom,0px)) }
html.uyc-acik, html.uyc-acik body{ overflow:hidden }
.uyc__perde{ position:absolute; inset:0; background:rgba(6,12,10,.5); backdrop-filter:blur(6px) saturate(1.2); -webkit-backdrop-filter:blur(6px) saturate(1.2); touch-action:none }
.uyc__sayfa{
  position:relative; display:flex; flex-direction:column;
  height:calc(100% - max(28px, env(safe-area-inset-top,0px) + 14px)); max-height:860px;
  width:100%; max-width:560px; margin:0 auto;
  background:var(--uyc-zemin); color:var(--uyc-yazi);
  border-radius:28px 28px 0 0; overflow:hidden;
  box-shadow:0 -18px 60px -20px rgba(0,0,0,.45);
  will-change:transform;
}
@media (min-width:680px){ .uyc__sayfa{ border-radius:28px; margin-bottom:24px; height:min(860px, calc(100% - 48px)) } }
/* Baş: marka tonlu zemin üstünde kart; aşağı çekilebilir alan */
.uyc__bas{
  position:relative; flex-shrink:0; padding:12px 20px 4px; touch-action:none; cursor:grab;
  background:
    radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--uyk-b) 34%,transparent) 0%,transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--uyk-b) 16%,var(--uyc-zemin)) 0%,var(--uyc-zemin) 100%);
}
.uyc__sayfa.is-cekiliyor .uyc__bas{ cursor:grabbing }
.uyc__tutamak{ display:block; width:38px; height:5px; border-radius:99px; background:rgba(16,22,20,.22); margin:0 auto 8px }
.uyc__kapat{
  position:absolute; top:10px; right:12px; z-index:2; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; color:var(--uyc-yazi);
  background:rgba(255,255,255,.72); box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 10px rgba(0,0,0,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer;
}
.uyc__kapat:focus-visible{ outline:3px solid color-mix(in srgb,var(--uyk-b) 60%,#fff); outline-offset:2px }
.uyc__kartyer{ display:grid; justify-items:center; pointer-events:none }
.uyk.uyc__uyk{ margin:0; width:min(100% - 48px,340px) }   /* kapat düğmesine binmez */
.uyk.uyc__uyk .uyk__stage{ width:100%; padding:2px 0 16px; cursor:default }
/* Uçan kopya (paylaşılan öğe geçişi) */
.uyk.uyc__ucan{ position:fixed; margin:0; display:block; z-index:3; pointer-events:none; perspective:1100px; transform-origin:50% 50% }
.uyk.uyc__ucan .uyk__stage{ width:100%; padding:0; perspective:none; cursor:default }

/* Gövde: kendi içinde kayar; alt eylem çubuğu için yer bırakır */
.uyc__govde{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:6px 16px calc(var(--uyc-alt-h) + 24px); display:grid; align-content:start; gap:18px;
  /* Kayan içerik kartın altına sert kesilmeden, yumuşakça girer */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px); mask-image:linear-gradient(180deg,transparent 0,#000 18px);
}
.uyc__baslik{ text-align:center; padding:2px 8px 0 }
.uyc__t{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.6px; line-height:1.15; text-wrap:balance }
.uyc__st{ margin:4px 0 0; font-size:14px; font-weight:600; color:var(--uyc-soluk) }
.uyc__bt{ margin:0 0 8px 4px; font-size:13px; font-weight:700; color:var(--uyc-soluk) }

/* Grup kutusu + satır */
.uyc__grup{ list-style:none; margin:0; padding:4px 0; background:#fff; border-radius:18px; box-shadow:0 1px 0 rgba(16,22,20,.04),0 6px 20px -14px rgba(16,22,20,.25) }
.uyc__satir{ display:flex; align-items:center; gap:13px; padding:11px 16px; min-height:56px }
/* Ayırıcı simgeden sonra başlar (içerik hizası bozulmaz) */
.uyc__satir, .uyc__liste li{ position:relative }
.uyc__satir + .uyc__satir::before, .uyc__liste li + li::before{ content:""; position:absolute; top:0; left:63px; right:0; border-top:1px solid var(--uyc-cizgi) }
.uyc__simge{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:14px;
  color:var(--uyk-b); background:color-mix(in srgb,var(--uyk-b) 11%,#fff);
}
.uyc__satir.is-altin .uyc__simge{ color:var(--uyk-gold-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)) }
.uyc__satir-m{ display:grid; gap:2px; min-width:0 }
.uyc__satir-m b{ font-size:15.5px; font-weight:700; letter-spacing:-.2px; line-height:1.25 }
.uyc__satir-m span{ font-size:13px; font-weight:500; color:var(--uyc-soluk); line-height:1.35 }
.uyc__liste{ padding:0 }
.uyc__git{ width:100%; display:flex; align-items:center; gap:13px; padding:10px 16px; min-height:54px; text-align:left; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:inherit }
.uyc__git b{ flex:1; font-size:15.5px; font-weight:600; letter-spacing:-.2px }
.uyc__ok{ color:#b4bcb9; font-size:12px }
.uyc__git:active{ background:rgba(16,22,20,.04) }
.uyc__git:focus-visible{ outline:3px solid color-mix(in srgb,var(--uyk-b) 55%,#fff); outline-offset:-3px }

/* Yıldız halkası */
.uyc__yildiz{
  display:flex; align-items:center; gap:16px; padding:16px; border-radius:20px; color:#fff;
  background:
    radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--uyk-b) 70%,#fff 10%) 0%,transparent 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--uyk-b) 78%,#000) 0%,color-mix(in srgb,var(--uyk-b) 30%,#06100d) 100%);
  box-shadow:0 14px 34px -18px color-mix(in srgb,var(--uyk-b) 80%,#000);
}
.uyc__halka{ position:relative; width:92px; height:92px; flex-shrink:0 }
.uyc__halka svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.uyc__iz{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:8 }
.uyc__dol{
  fill:none; stroke:var(--uyk-gold-2); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--oran,0) * 100);
  filter:drop-shadow(0 0 6px rgba(243,201,105,.55));
  transition:stroke-dashoffset .9s var(--uyk-ease);
}
.uyc__halka-i{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1 }
.uyc__sayi{ font-size:30px; font-weight:900; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:#fff7dc }
.uyc__halka-i small{ margin-top:3px; font-size:11px; font-weight:700; color:rgba(255,255,255,.75) }
.uyc__yildiz-m{ display:grid; gap:4px; min-width:0 }
.uyc__yildiz-m b{ font-size:17px; font-weight:800; letter-spacing:-.3px; line-height:1.25; text-wrap:balance }
.uyc__yildiz-m span{ font-size:13px; font-weight:600; color:rgba(255,255,255,.78); line-height:1.35 }
.uyc__yildiz.is-hazir .uyc__dol{ stroke:var(--uyk-gold-1); animation:uycNabiz 2.4s ease-in-out 1.2s infinite }
@keyframes uycNabiz{ 0%,100%{ filter:drop-shadow(0 0 4px rgba(243,201,105,.5)) } 50%{ filter:drop-shadow(0 0 12px rgba(255,229,160,.95)) } }

/* Ödüller: yatay kaydırma, kenardan kenara */
.uyc__oduller{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 8px; scrollbar-width:none; overscroll-behavior-x:contain }
.uyc__oduller::-webkit-scrollbar{ display:none }
.uyc__odul{
  flex:0 0 148px; scroll-snap-align:start; display:grid; grid-template-rows:auto 1fr auto auto; gap:6px;
  padding:14px; min-height:168px; border-radius:18px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:#fff; box-shadow:0 1px 0 rgba(16,22,20,.04),0 6px 20px -14px rgba(16,22,20,.25);
  -webkit-tap-highlight-color:transparent; transition:transform .18s var(--uyk-ease);
}
.uyc__odul:active{ transform:scale(.97) }
.uyc__odul:focus-visible{ outline:3px solid color-mix(in srgb,var(--uyk-b) 55%,#fff); outline-offset:2px }
.uyc__odul-s{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:15px; color:var(--uyc-soluk); background:#eef1f0 }
.uyc__odul-a{ font-size:14.5px; font-weight:700; line-height:1.25; letter-spacing:-.2px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.uyc__odul-m{ font-size:12.5px; font-weight:700; color:var(--uyc-soluk) }
.uyc__odul-m i{ color:var(--uyk-gold-3); font-size:11px }
.uyc__odul-p{ display:grid; gap:5px }
.uyc__odul-p i{ display:block; height:5px; border-radius:99px; background:#e9edeb; overflow:hidden; position:relative }
.uyc__odul-p i::after{ content:""; position:absolute; inset:0; width:calc(var(--p,0) * 100%); border-radius:inherit; background:linear-gradient(90deg,var(--uyk-gold-3),var(--uyk-gold-2)) }
.uyc__odul-p em{ font-style:normal; font-size:12px; font-weight:600; color:var(--uyc-soluk) }
.uyc__odul-k{ justify-self:start; padding:6px 14px; border-radius:99px; font-size:13px; font-weight:800; color:var(--uyk-gold-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)) }
.uyc__odul.is-hazir{ background:linear-gradient(160deg,#fffaf0 0%,#fff 60%); box-shadow:0 0 0 1.5px #f1d48a inset,0 10px 26px -14px rgba(200,149,46,.55) }
.uyc__odul.is-hazir .uyc__odul-s{ color:var(--uyk-gold-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2)) }
.uyc__odul[aria-disabled="true"]{ cursor:default }
.uyc__odul.is-salla{ animation:uycSalla .4s ease }
@keyframes uycSalla{ 0%,100%{ transform:none } 25%{ transform:translateX(-5px) } 50%{ transform:translateX(4px) } 75%{ transform:translateX(-2px) } }

/* Seviye */
.uyc__seviye{ padding:16px }
.uyc__seviye-r{ display:flex; align-items:center; gap:10px }
.uyc__rozet{ flex-shrink:0; padding:5px 11px; border-radius:99px; font-size:12.5px; font-weight:800; color:#fff; background:var(--uyk-b) }
.uyc__rozet.is-sonraki{ color:var(--uyc-soluk); background:#eef1f0 }
.uyc__seviye-c{ flex:1; height:6px; border-radius:99px; background:#e9edeb; overflow:hidden }
.uyc__seviye-c b{ display:block; height:100%; width:calc(var(--sp,0) * 100%); border-radius:inherit; background:var(--uyk-b); transition:width .9s var(--uyk-ease) }
.uyc__tepe{ color:var(--uyk-gold-3) }
.uyc__seviye-t{ margin:12px 0 0; display:grid; gap:3px }
.uyc__seviye-t b{ font-size:15px; font-weight:700; letter-spacing:-.2px }
.uyc__seviye-t span{ font-size:13px; color:var(--uyc-soluk) }

/* Alt eylem çubuğu */
.uyc__alt{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; gap:4px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,color-mix(in srgb,var(--uyc-zemin) 0%,transparent),var(--uyc-zemin) 26%);
}
.uyc__alt[hidden]{ display:none }
.uyc__ana{
  height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:16.5px; font-weight:800; letter-spacing:-.2px; color:#fff; cursor:pointer;
  background:color-mix(in srgb,var(--uyk-b) 88%,#000); box-shadow:0 12px 26px -12px color-mix(in srgb,var(--uyk-b) 85%,#000);
  -webkit-tap-highlight-color:transparent; transition:transform .16s var(--uyk-ease);
}
.uyc:not(.is-uye) .uyc__ana{ color:var(--uyk-ink); background:linear-gradient(135deg,var(--uyk-gold-1),var(--uyk-gold-2) 60%,#e9b04a); box-shadow:0 12px 26px -12px rgba(200,149,46,.8) }
.uyc__ana:active{ transform:scale(.98) }
.uyc__ikincil{ height:40px; font:inherit; font-size:14.5px; font-weight:700; color:color-mix(in srgb,var(--uyk-b) 85%,#000); cursor:pointer }
.uyc__ana:focus-visible, .uyc__ikincil:focus-visible{ outline:3px solid color-mix(in srgb,var(--uyk-b) 55%,#fff); outline-offset:2px; border-radius:16px }

/* Kademeli giriş (yalnız açılışta; sonraki yazımlarda oynamaz) */
.uyc.is-kademe:not(.is-durgun) .uyc__govde > *, .uyc.is-kademe:not(.is-durgun) .uyc__alt{ animation:uycGir .55s var(--uyk-ease) both }
.uyc.is-kademe:not(.is-durgun) .uyc__govde > :nth-child(1){ animation-delay:.16s }
.uyc.is-kademe:not(.is-durgun) .uyc__govde > :nth-child(2){ animation-delay:.22s }
.uyc.is-kademe:not(.is-durgun) .uyc__govde > :nth-child(3){ animation-delay:.28s }
.uyc.is-kademe:not(.is-durgun) .uyc__govde > :nth-child(4){ animation-delay:.34s }
.uyc.is-kademe:not(.is-durgun) .uyc__govde > :nth-child(n+5){ animation-delay:.4s }
.uyc.is-kademe:not(.is-durgun) .uyc__alt{ animation-delay:.3s }
@keyframes uycGir{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.uyc.is-kademe:not(.is-durgun) .uyc__dol{ animation:uycHalka 1.1s var(--uyk-ease) .3s both }
@keyframes uycHalka{ from{ stroke-dashoffset:100 } }
.uyc.is-kademe:not(.is-durgun) .uyc__odul{ animation:uycKay .6s var(--uyk-ease) both }
.uyc.is-kademe:not(.is-durgun) .uyc__odul:nth-child(2){ animation-delay:.06s }
.uyc.is-kademe:not(.is-durgun) .uyc__odul:nth-child(3){ animation-delay:.12s }
.uyc.is-kademe:not(.is-durgun) .uyc__odul:nth-child(n+4){ animation-delay:.18s }
@keyframes uycKay{ from{ transform:translateX(40px) } }

/* Dokunmatik cihaz: hologram sabit, eğim yok — çevirme ve süzülme akıcı kalsın */
@media (hover:none){
  .uyk__holo{ animation:none; background-position:40% 40% }
}

/* ── Hareket azaltma: içerik aynen, hareket yok ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .uyk__float, .uyk__shadow, .uyk__holo, .uyk__pill,
  .card:not(.is-member-price) .mprice::after, .card:not(.is-member-price) .mprice i,
  .cart-member-teaser .fa-crown, .uyk-kutla__p{ animation:none !important }
  .uyk-kutla__p{ display:none }
  .uyk.is-armed .uyk__stage{ opacity:1 }
  .uyk.is-armed .uyk__float{ transform:none }
  .uyk-kutla .uyk__stage{ animation:none }
  .uyk-kutla__flip, .uyk-kutla__t, .uyk-kutla__s, .uyk-kutla__btn, .mprice.uyk-flip, .uyk-say{ animation:none !important; opacity:1 }
  .uyc__govde > *, .uyc__alt, .uyc__dol, .uyc__odul, .uyc__yildiz.is-hazir .uyc__dol{ animation:none !important }
  .uyc__dol, .uyc__seviye-c b, .uyk__card.is-basili{ transition:none }
}