/* Odadan Sepete atölyesi: inspora referanslarından üretilen ekranlar.
   Taban dil /yeni/stil.css (Verterra cam levha, koyu kapsül + beyaz hap, tek altın). Burada yalnız yeni bileşenler var.
   Malzemeler: fırçalanmış pirinç (altın düğme), traverten / meşe / pirinç numune plakası, termal kâğıt, aydınger, opal cam. */

@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --isik{syntax:"<number>";inherits:true;initial-value:.55}

:root{--ease-d:cubic-bezier(.2,.8,.2,1);--yay:cubic-bezier(.34,1.56,.64,1);--bas:90ms;--donus:420ms}

/* ---------- Masa ve cihaz ---------- */
body.atolye{padding:0;height:100svh;overflow:hidden;background:#0c0e11}
.masa{display:flex;justify-content:center;align-items:center;gap:44px;height:100svh}
.cihaz{position:relative;width:100vw;height:100svh;overflow:hidden;background:#0f1114;transform:translateZ(0);container-type:size}
@media (min-width:760px){
  .cihaz{width:390px;height:min(844px,calc(100svh - 40px));border-radius:46px;flex:none;
    box-shadow:0 0 0 9px #17191d,0 0 0 10px #2b2e34,0 50px 90px -30px rgba(0,0,0,.9)}
}
.ekran{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.ekran[hidden]{display:none!important}
.ekran.gir{animation:ekran-gir .32s var(--ease-d) both}
@keyframes ekran-gir{from{opacity:0;transform:scale(.985)}}
.ust-bar{display:grid;grid-template-columns:2.5rem 1fr 2.5rem;align-items:center;gap:.5rem;padding:calc(12px + env(safe-area-inset-top)) 12px 10px;text-align:center;font-size:1rem;font-weight:800;letter-spacing:-.01em;flex:none}
.kaydir-alan{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.25rem 1.125rem 1.5rem;display:grid;grid-auto-rows:max-content;gap:1rem;align-content:start;scrollbar-width:none}
.kaydir-alan::-webkit-scrollbar{display:none}
.alt-cubuk{flex:none;padding:.75rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.ara-b{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.atolye-not{font-size:.75rem;color:var(--ink-3);border-left:2px solid var(--sale-c);padding-left:.5rem}
.tutamak{width:38px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto .125rem}

/* Atölye yan paneli (uygulamanın parçası değil) */
.yan{width:300px;max-height:calc(100svh - 40px);overflow-y:auto;color:#c9ccd1;font-size:.875rem;display:grid;gap:1rem;align-content:start;scrollbar-width:thin}
.yan-ust b{display:block;color:#f4f4f2;font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.375rem}
.yan-ust p{color:#9a9ea5;font-size:.8125rem}
.yan-liste{display:grid;gap:4px}
.yan-liste button{display:grid;grid-template-columns:1.5rem 1fr;gap:.125rem .5rem;text-align:left;padding:.5rem .625rem;border:0;border-radius:12px;background:transparent;color:#d9dbdf}
.yan-liste button:hover{background:rgba(255,255,255,.06)}
.yan-liste button[aria-current=true]{background:rgba(255,255,255,.1)}
.yan-liste .s{grid-row:span 2;font-weight:800;color:#c9a96e;font-variant-numeric:tabular-nums}
.yan-liste b{font-weight:700;color:#f4f4f2}
.yan-liste small{color:#8f939a;font-size:.75rem;line-height:1.35}
.yan-not{font-size:.8125rem;color:#aeb2b8;line-height:1.5;padding:.75rem .875rem;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.yan-not:empty{display:none}
.yan-not b{color:#f0e2c2}
.yan-kapat{display:none}
.ekranlar-d{display:none}
@media (max-width:759px){
  .masa{display:block}
  .yan{position:fixed;inset:auto 0 0 0;z-index:200;width:auto;max-height:78svh;padding:1rem 1.125rem calc(1rem + env(safe-area-inset-bottom));background:#15171b;border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.7);transform:translateY(105%);transition:transform .35s var(--ease-d)}
  .yan.acik{transform:none}
  .yan-kapat{display:inline-flex;color:#f4f4f2;background:rgba(255,255,255,.08)}
  .ekranlar-d{display:inline-flex;align-items:center;gap:.375rem;position:absolute;z-index:90;top:calc(10px + env(safe-area-inset-top));right:10px;height:2rem;padding:0 .75rem 0 .625rem;border:0;border-radius:999px;
    background:rgba(12,13,16,.55);color:#e9eaec;font-size:.75rem;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
}

/* ---------- Sıvı pirinç halka (ref 6, 7, 10): krom değil pirinç, yalnız üç anda döner ---------- */
.sivi{position:relative;isolation:isolate}
.sivi-halka{position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--a),#6f4d1d 0deg,#b88a47 50deg,#fff4d8 78deg,#e8c98a 96deg,#7a5522 150deg,#5c3f16 190deg,#c79a55 250deg,#fffaf0 282deg,#b48743 312deg,#6f4d1d 360deg);
  -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)}
.sivi-halka.ince{inset:-1.5px;padding:1.5px}
.sivi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,250,236,.55) 46%,rgba(255,255,255,.75) 50%,rgba(255,250,236,.4) 54%,transparent 70%) -120% 0/250% 100% no-repeat}
.sivi.tur .sivi-halka{animation:tur .9s cubic-bezier(.4,0,.2,1)}
.sivi.tur::after{animation:parilti .9s cubic-bezier(.4,0,.2,1)}
.sivi.calisiyor .sivi-halka{animation:tur 2.4s linear infinite}
@keyframes tur{from{--a:0deg}to{--a:360deg}}
@keyframes parilti{0%{opacity:1;background-position:-120% 0}100%{opacity:1;background-position:220% 0}}
.altin.sivi{overflow:visible}
.altin:active{transform:scale(.97)}
.altin .etiket,.altin>svg.i{position:relative;z-index:2}

/* Seçili hapın kenarında ışık bir kez süzülür (ref 7) */
.seg button{position:relative}
.seg button.pah::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 62%,rgba(255,255,255,.95) 74%,rgba(214,181,118,.95) 80%,transparent 90%);
  -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);
  animation:tur .75s var(--ease-d) both}

/* ---------- Alt levha (sheet) ---------- */
.karartma{position:absolute;inset:0;z-index:29;background:rgba(6,7,9,.5);animation:sol .25s both}
@keyframes sol{from{opacity:0}}
.alt-levha{position:absolute;left:8px;right:8px;bottom:8px;z-index:30;display:grid;gap:.875rem;padding:.625rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom));border-radius:30px;animation:yukari .42s var(--ease-d) both}
@keyframes yukari{from{transform:translateY(105%)}}
.alt-levha.cik{animation:asagi .3s ease-in both}
@keyframes asagi{to{transform:translateY(110%)}}

/* ---------- 2. Oda hakkı: yuvadan sarkan numune plakası (ref 3), antet + mühür (ref 4) ---------- */
#e-hak{background:radial-gradient(120% 55% at 50% 0%,#262a30,#121417 72%)}
.yuva-alan{position:relative;height:262px;margin:0 -1.125rem}
.yuva{position:absolute;z-index:3;left:50%;top:4px;width:min(300px,80%);height:20px;margin-left:calc(min(300px,80%) / -2);border-radius:10px;
  background:linear-gradient(#08090a,#1d1f23);box-shadow:inset 0 2px 5px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.09),0 1px 0 rgba(255,255,255,.07),0 14px 30px -12px rgba(0,0,0,.8)}
.yuva i{position:absolute;left:7%;right:7%;top:9px;height:4px;border-radius:2px;background:#000;box-shadow:0 1px 0 rgba(255,255,255,.07)}
.plaka-kafes{position:absolute;left:0;right:0;top:14px;bottom:0;overflow:hidden;display:grid;justify-items:center;align-items:start}
.plaka{position:relative;width:156px;height:214px;margin-top:-26px;border-radius:12px 12px 16px 16px;display:grid;justify-items:center;align-content:center;gap:.125rem;color:#3b3226;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.35),0 26px 40px -18px rgba(0,0,0,.85);
  transform-origin:50% 0;animation:sark 1.3s var(--yay) both}
.plaka.sallan{animation:sark-2 1.1s var(--yay) both}
@keyframes sark{from{transform:translateY(-105%)}55%{transform:translateY(5%) rotate(1.5deg)}75%{transform:rotate(-.8deg)}}
@keyframes sark-2{0%{transform:translateY(-6%)}40%{transform:translateY(3%) rotate(2deg)}70%{transform:rotate(-1deg)}}
.plaka-delik{position:absolute;top:42px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#16181b;box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.5)}
.odometre{position:relative;display:block;height:4.75rem;overflow:hidden;font-size:4.5rem;font-weight:800;line-height:4.75rem;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-top:1.25rem;
  color:rgba(58,46,30,.86);text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.28)}
.odometre span{display:block;text-align:center}
.odometre span.cikan{position:absolute;inset:0;animation:od-cik .5s var(--ease-d) both}
.odometre span.giren{animation:od-gir .5s var(--ease-d) both}
@keyframes od-cik{to{transform:translateY(-100%);opacity:0}}
@keyframes od-gir{from{transform:translateY(100%);opacity:0}}
.plaka-alt{font-size:.8125rem;font-weight:700;color:rgba(58,46,30,.75)}
.hak-tanim{font-size:.875rem;color:var(--ink-2);line-height:1.5;text-wrap:pretty}

/* Malzemeler */
.traverten{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .44 0 0 0 0 .33 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(170deg,#ece3d3,#ddd0ba 60%,#d3c4ab)}
.mese{color:#2c1d10;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .007' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .11 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(175deg,#d2ad80,#bf9466 55%,#a97f52)}
.pirinc{color:#2a1c08;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
  linear-gradient(118deg,#8a6830,#e8d29e 28%,#b48b4b 50%,#f2e2b8 68%,#9a7536 92%)}
.mese .odometre,.mese .plaka-alt{color:rgba(44,29,16,.85)}
.pirinc .odometre,.pirinc .plaka-alt{color:rgba(42,28,8,.85)}

.paketler{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.paket{display:grid;justify-items:center;gap:.5rem;padding:.625rem .25rem .75rem;border:0;border-radius:18px;background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink);text-align:center;transition:transform .22s var(--yay),box-shadow .2s}
.paket .mini{width:62px;height:82px;border-radius:8px 8px 10px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -8px rgba(0,0,0,.8);display:grid;place-items:center;font-size:1.75rem;font-weight:800;letter-spacing:-.04em}
.paket b{font-size:.875rem;font-weight:800}
.paket small{font-size:.75rem;color:var(--ink-3);font-weight:600;line-height:1.3}
.paket[aria-checked=true]{transform:translateY(-4px);box-shadow:var(--inner-sh),0 0 0 2px #c9a96e,0 14px 24px -12px rgba(201,169,110,.55)}
.paket:active{transform:scale(.96)}

/* Kartuş: pafta anteti gibi */
.kartus{position:relative;overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2)}
.kartus-satir{display:grid;grid-template-columns:7.25rem 1fr;border-top:1px solid var(--line)}
.kartus-satir:first-child{border-top:0}
.kartus-satir>span{padding:.5rem .75rem;font-size:.75rem;font-weight:600;color:var(--ink-3);border-right:1px solid var(--line);display:flex;align-items:center}
.kartus-satir>b{padding:.5rem .75rem;font-size:.875rem;font-weight:700;min-width:0}
.kartus-satir.buyuk>b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tutar small{font-size:.6em;font-weight:700;opacity:.5}
.imza-satir{min-height:3.25rem}
.imza-satir .paraf.buyuk{width:100%;height:2.75rem;padding:.25rem .5rem;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.imza-satir .paraf.buyuk{opacity:0}
.imza-satir.cizildi .paraf.buyuk{opacity:1}
.imza-satir .paraf.buyuk path{stroke-dasharray:1;stroke-dashoffset:1}
#onay-damga{top:auto;bottom:-14px;margin-top:0;right:10px}
.imza-satir.cizildi .paraf.buyuk path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.imza-satir.cizildi .paraf.buyuk path+path{transition-delay:.75s;transition-duration:.35s}

/* Pirinç mühür damgası */
.muhur-damga{position:absolute;right:12px;top:50%;width:104px;height:104px;margin-top:-52px;opacity:0;pointer-events:none;color:#d4b47a}
.muhur-damga svg{width:100%;height:100%;overflow:visible}
.muhur-damga.basildi{animation:damga .75s cubic-bezier(.2,.9,.2,1) both}
@keyframes damga{0%{opacity:0;transform:scale(1.6) rotate(-24deg)}55%{opacity:1;transform:scale(.94) rotate(-11deg)}100%{opacity:.92;transform:scale(1) rotate(-12deg)}}

/* Ödeme düğmesinin içinde mühür çizilir: iki gerçek olay (istek gitti → yarısı, banka onayladı → tamamı) */
.muhurlu .muhur-cizim{position:relative;z-index:2;width:26px;height:26px;margin-left:-.25rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:none}
.muhurlu .muhur-cizim *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.muhurlu.muhur-acik .muhur-cizim{display:block}
.muhurlu.yarim .muhur-cizim .m1,.muhurlu.tamam .muhur-cizim .m1{stroke-dashoffset:0}
.muhurlu.tamam .muhur-cizim .m2{stroke-dashoffset:0;transition-delay:.15s}
.muhurlu.geri-sil .muhur-cizim *{transition-duration:.3s}
.sars{animation:sars .36s ease-in-out}
@keyframes sars{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.banka-ozet{display:flex;justify-content:space-between;align-items:baseline;padding:.875rem 1rem;border-radius:var(--r-m);background:var(--inner);box-shadow:var(--inner-sh)}
.banka-ozet b{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.ucan-plaka{position:absolute;z-index:25;border-radius:8px 8px 10px 10px;pointer-events:none;box-shadow:0 20px 30px -12px rgba(0,0,0,.8)}

.foto-kutu{position:relative;width:100%;height:52cqh;border-radius:22px;overflow:hidden;background:#1a1c20;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.foto-ic{position:absolute;left:0;right:0;top:50%;width:100%;aspect-ratio:3/4;transform:translateY(-50%);transition:transform .45s var(--ease-d)}
.foto-ic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kutu-katman{position:absolute;inset:0;pointer-events:none}
.kutu-katman .kose-kutu b{position:absolute;left:6px;top:6px;display:grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .3rem;border-radius:999px;background:rgba(17,18,21,.72);color:#fff;font-size:.6875rem;font-weight:800}
.adimlar button.simdi{background:var(--pill-bg);color:var(--pill-ink);box-shadow:var(--pill-sh)}

/* ---------- 4. Sonuç ---------- */
/* Fotoğraf sahnedir: kenardan kenara, üstten levhanın altına kadar. Levha küçükken ekranın ~%83'ü fotoğraf. */
@property --mx{syntax:"<length>";inherits:false;initial-value:0px}
@property --my{syntax:"<length>";inherits:false;initial-value:0px}
#e-sonuc{background:#0f1114;--peek:150px;--ortusme:30px;--kamera:.64s cubic-bezier(.2,.7,.2,1);--otur:cubic-bezier(.2,.7,.2,1)}
.s-sahne{position:absolute;inset:0;z-index:1;padding:0}
.s-sahne .foto-kutu{position:absolute;left:0;right:0;top:0;width:auto;height:calc(100% - var(--peek) + var(--ortusme));border-radius:0;box-shadow:none;background:#15171b;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
/* foto-ic kadrajı JS'te kapla (cover) hesabıyla piksel olarak yazılır; kamera yalnız transform ile oynar */
#s-ic{top:0;left:0;right:auto;width:100%;height:100%;aspect-ratio:auto;transform:none;transform-origin:0 0;transition:transform var(--kamera);will-change:transform}
#s-ic img{-webkit-user-drag:none}
.s-sonra-kap{position:absolute;inset:0}
.s-sonra-kap img{width:100%;height:100%;object-fit:cover}
#e-sonuc[data-mod=kiyas] .s-sonra-kap{clip-path:inset(0 0 0 var(--kp,50%))}
#e-sonuc[data-mod=okuma] .s-sonra-kap{opacity:0}
#e-sonuc:not([data-mod=okuma]) .firsat-k{display:none}
#e-sonuc:not([data-mod=tasarim]) #s-pimler .pim{display:none}
.pim-katman{position:absolute;inset:0;z-index:3}
.pim-katman .kose-kutu b{position:absolute;left:6px;top:6px;display:grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .3rem;border-radius:999px;background:rgba(17,18,21,.72);color:#fff;font-size:.6875rem;font-weight:800}
.pim-katman .kose-kutu span{position:absolute;left:2.125rem;top:6px;width:max-content;max-width:12rem;padding:.1875rem .4375rem;border-radius:7px;background:rgba(17,18,21,.62);font-size:.6875rem;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}
.pim-katman .kose-kutu.sag span{left:auto;right:6px;top:2rem}
.pim-katman .kose-kutu b,.pim-katman .kose-kutu span{translate:var(--kx,0px) 0}
.s-karartma{position:absolute;inset:0;z-index:9;background:#07080a;opacity:0;pointer-events:none}
.s-karartma.tiklanir{pointer-events:auto}
.s-karartma.oturuyor{transition:opacity .3s var(--otur)}
.surum-cip{position:absolute;z-index:6;top:calc(16px + env(safe-area-inset-top));left:16px;display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .75rem 0 .625rem;border:0;border-radius:var(--r-p);font-size:.8125rem;font-weight:800;color:var(--ink)}
.surum-cip svg.i{width:14px;height:14px}
.eski-uyari{position:absolute;z-index:7;left:12px;right:12px;top:calc(58px + env(safe-area-inset-top));display:flex;align-items:center;gap:.375rem;padding:.375rem .375rem .375rem .875rem;border-radius:var(--r-p);font-size:.8125rem;font-weight:700}
.eski-uyari span{flex:1;min-width:0}
.eski-uyari .tb{height:2rem;padding:0 .75rem;font-size:.8125rem}
.s-et{top:calc(58px + env(safe-area-inset-top))}
#e-sonuc:not([data-mod=kiyas]) .s-et{display:none}

/* Ürün işaretleri (eski numune boncuğu) 14 Eki v3: birlesik/numune.css */

/* Odak merceği: bulanıklık değil, ürünün çevresinde açık kalan çok yumuşak bir vinyet. Kamerayla birlikte kayar. */
.mercek{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle 15.5rem at var(--mx) var(--my),rgba(7,8,10,0) 0,rgba(7,8,10,0) 30%,rgba(7,8,10,.14) 58%,rgba(7,8,10,.4) 100%);
  transition:opacity .45s var(--ease-d),--mx var(--kamera),--my var(--kamera)}
.mercek.acik{opacity:1}

/* Basılı tut: bütün katmanlar söner, yalnız çizim kalır */
#s-foto .pim-katman,.surum-cip,.eski-uyari,.s-et,.kesit,.etiket-kat,.cark{transition:opacity .2s}
#e-sonuc.temiz :is(.pim-katman,.mercek,.surum-cip,.eski-uyari,.s-et,.kesit,.etiket-kat,.cark,.binici){opacity:0!important;pointer-events:none!important}
.cihaz:has(#e-sonuc.temiz:not([hidden])) .ekranlar-d{opacity:0;pointer-events:none}
/* fiş açıkken başlığın sağındaki "Fişlerim" sayacının üstüne binmesin; fiş X ile kapanınca geri gelir */
.cihaz:has(#e-sonuc:not([hidden]) #fis-kat:not([hidden])) .ekranlar-d{opacity:0;pointer-events:none}
/* ada (kalan açılar sürerken) üstte ortada açılır; Ekranlar düğmesi sayacının ve geniş adanın üstüne binmesin */
.cihaz:has(#ada:not([data-hal=gizli])) .ekranlar-d{opacity:0;pointer-events:none}
.ekranlar-d{transition:opacity .2s}
.temiz-ipucu{display:inline-flex;align-items:center;height:1.75rem;padding:0 .75rem;border-radius:999px;font-size:.75rem;font-weight:700;color:#f4f4f2;
  background:rgba(12,13,16,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  animation:ipucu 4.2s var(--ease-d) both;pointer-events:none}
@keyframes ipucu{0%{opacity:0;transform:translateY(6px)}10%,82%{opacity:1;transform:none}100%{opacity:0}}

/* Özet levhası: üç durak (küçük, yarım, tam). Parmağı 1:1 izler, bırakınca hıza göre en yakın durağa oturur. */
.s-levha{position:absolute;z-index:20;left:0;right:0;bottom:0;height:calc(100% - 56px);margin:0;padding:0;display:flex;flex-direction:column;
  border-radius:28px 28px 0 0;overscroll-behavior:contain;transform:translate3d(0,100%,0);will-change:transform}
.s-levha.oturuyor{transition:transform .3s var(--otur)}
.levha-bas{flex:none;display:grid;gap:.5rem;padding:0 0 .75rem;touch-action:none;cursor:grab}
@media (min-width:760px){.levha-bas{padding-bottom:1.125rem}} /* masaüstü çerçevesinin yuvarlak alt köşelerinden uzak dursun */
.s-levha.suruklu .levha-bas,.s-levha.suruklu{cursor:grabbing}
.tutamak-d{display:grid;place-items:center;width:100%;height:1.375rem;padding:0;border:0;border-radius:28px 28px 0 0;background:transparent;cursor:grab;touch-action:none}
.tutamak-d .tutamak{margin:0;transition:width .25s var(--ease-d),background .2s}
.tutamak-d:hover .tutamak,.tutamak-d:focus-visible .tutamak{width:46px;background:var(--ink-3)}
.tutamak-d:focus-visible{outline-offset:-4px}
.levha-satir{display:flex;align-items:center;gap:.75rem;padding:0 1rem 0 1.25rem}
.levha-ozet{flex:1;min-width:0;display:grid;line-height:1.25}
.levha-ozet b{font-size:1rem;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.levha-ozet span{font-size:.75rem;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.altin.kompakt{flex:none;height:2.5rem;padding:0 1rem 0 .875rem;font-size:.8125rem}
.altin.kompakt svg.i{width:15px;height:15px}

/* Fiyat şeridi: ortadaki çip odaktır; en başta toplam durur (odak yok, genel görünüm) */
.fiyat-serit{position:relative;display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;
  padding:.125rem calc(50% - 4.75rem) .1875rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 1.75rem,#000 calc(100% - 1.75rem),transparent);mask:linear-gradient(90deg,transparent,#000 1.75rem,#000 calc(100% - 1.75rem),transparent)}
.fiyat-serit::-webkit-scrollbar{display:none}
.fiyat-serit.fare-surukle{scroll-snap-type:none;cursor:grabbing}
.fs-c{flex:none;width:9.5rem;height:3.25rem;scroll-snap-align:center;display:flex;align-items:center;gap:.5rem;padding:0 .875rem 0 .375rem;border:0;border-radius:999px;text-align:left;
  background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink);transition:background .25s,box-shadow .25s,color .25s,opacity .25s}
.fs-c.toplam{justify-content:center;padding:0 .875rem;text-align:center}
.fs-c.toplam .fs-y{justify-items:center}
.fs-g{position:relative;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fs-g img{width:100%;height:100%;padding:3px;border-radius:50%;object-fit:contain}
.fs-g i{position:absolute;left:-3px;top:-3px;min-width:1.0625rem;height:1.0625rem;padding:0 .25rem;border-radius:999px;background:#1d1e21;color:#fff;font:800 .5625rem/1.0625rem Figtree,sans-serif;text-align:center;font-style:normal;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.fs-y{display:grid;min-width:0;line-height:1.15}
.fs-y small{font-size:.6875rem;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-y b{font-size:.9375rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fs-c[aria-pressed=true]{background:var(--pill-bg);color:var(--pill-ink);box-shadow:var(--pill-sh)}
.fs-c[aria-pressed=true] small{color:#4b4e54}
.fs-c:focus-visible{outline-offset:2px}
.fs-c.sirada .fs-g{box-shadow:0 0 0 2px #c9a96e}
.fs-c.kalkacak{opacity:.5}
.fs-c.kalkacak b{text-decoration:line-through;text-decoration-thickness:1.5px}

.levha-govde{flex:1;min-height:0;display:grid;grid-auto-rows:max-content;gap:.875rem;align-content:start;padding:.25rem 1.125rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.levha-govde::-webkit-scrollbar{display:none}
.s-levha:not([data-durak=tam]) .levha-govde{overflow:hidden;touch-action:none}
.duvar-sec button{font-size:.8125rem}

/* Cümleye gömülü çipler (ref 2); levhada ikinci planda, bir boy küçük */
.ozet-cumle{font-size:1.125rem;font-weight:700;line-height:1.6;letter-spacing:-.015em;text-wrap:pretty}
.cip-i{display:inline-flex;align-items:center;gap:.3125rem;height:1.75rem;padding:0 .625rem 0 .3125rem;margin:0 .0625rem;border:0;border-radius:var(--r-p);vertical-align:.1em;
  background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink);font-size:.875rem;font-weight:800;line-height:1;white-space:nowrap}
.cip-i:active{transform:scale(.96)}
.cip-i.yazi{padding:0 .625rem}
.cip-i .yigin{display:inline-flex}
.cip-i .yigin img{width:1.25rem;height:1.25rem;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1.5px #2a2c31}
.cip-i .yigin img+img{margin-left:-.5rem}
.cip-i .disk{width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;background:#1d1e21;color:#f6f6f4}
.cip-i .disk svg.i{width:12px;height:12px}
.cip-i .kosecik{width:1.125rem;height:1.125rem;margin-left:.1875rem;--c:currentColor;--l:5px;--t:1.5px;
  background:linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat}

/* Mimara not çubuğu (ref 10) */
.not-cubuk{display:flex;align-items:center;gap:.25rem;padding:.3125rem .3125rem .3125rem .25rem;border-radius:var(--r-p);background:var(--cap);box-shadow:var(--cap-sh);color:var(--cap-ink);--focus:#fff}
.not-cubuk .ic{color:var(--cap-ink-2)}
.not-cubuk input{flex:1;min-width:0;height:2.5rem;border:0;background:transparent;color:inherit;font-size:.9375rem;outline:none}
.not-cubuk input::placeholder{color:var(--cap-ink-2);opacity:.75}
.not-cubuk:focus-within{box-shadow:var(--cap-sh),0 0 0 2px var(--focus)}
.gonder-d{position:relative;flex:none;width:2.625rem;height:2.625rem;border:0;border-radius:50%;display:grid;place-items:center;color:#f6f2e8;
  background:radial-gradient(circle at 50% 30%,#3d3f45,#17181b 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.5)}
.gonder-d svg.i{width:18px;height:18px;stroke-width:1.9;position:relative;z-index:2}
.notlar-sira{display:grid;gap:.375rem}
.notlar-sira:empty{display:none}
.not-k{display:flex;gap:.5rem;align-items:flex-start;padding:.625rem .75rem;border-radius:14px;background:var(--inner);box-shadow:var(--inner-sh);font-size:.8125rem;line-height:1.4;animation:olay-gir .3s var(--ease-d) both}
.not-k svg.i{margin-top:.125rem;color:var(--ink-3)}

/* Binici: dok, değişiklik çubuğu ve ipucu; levhanın üst kenarına yapışık */
.binici{position:absolute;z-index:18;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-bottom:10px;pointer-events:none;transform:translate3d(0,calc(-1 * var(--peek)),0)}
.binici>*{pointer-events:auto}
.binici.oturuyor{transition:transform .3s var(--otur),opacity .25s}
.binici.sonuk>*{pointer-events:none}
.binici .temiz-ipucu{pointer-events:none}
/* Dok: kapsül + düzenle; düzenle → araç tepsisi (ref 1) */
.s-dok{position:relative;align-self:stretch;display:flex;justify-content:center;align-items:center;gap:.5rem;pointer-events:none}
.s-dok>*{pointer-events:auto}
.s-dok>.seg{box-shadow:var(--cap-sh),0 14px 30px -10px rgba(0,0,0,.75);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:filter .16s,opacity .22s,transform var(--donus) var(--ease-d)}
.s-dok.acik>.seg{filter:blur(8px);opacity:0;transform:scale(.9);pointer-events:none}
.duzen-d{position:relative;z-index:2;width:3.25rem;height:3.25rem;border:0;border-radius:50%;display:grid;place-items:center;background:var(--pill-bg);color:var(--pill-ink);
  box-shadow:var(--pill-sh),0 14px 30px -10px rgba(0,0,0,.75);transition:transform var(--donus) var(--ease-d)}
.duzen-d svg.i{width:22px;height:22px;stroke-width:1.8;transition:transform var(--donus) var(--yay)}
.duzen-d[aria-expanded=true] svg.i{transform:rotate(135deg)}
.duzen-d:active{transform:scale(.94)}
.tepsi{position:absolute;left:10px;right:10px;bottom:calc(100% + 10px);display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.875rem;border-radius:30px;
  clip-path:circle(var(--r,150%) at var(--ox,85%) var(--oy,110%));transition:clip-path var(--donus) var(--ease-d)}
.tepsi.kapali{--r:22px}
.arac{display:grid;justify-items:center;align-content:center;gap:.4375rem;min-height:4.75rem;padding:.625rem .25rem;border:0;border-radius:18px;background:var(--inner);box-shadow:var(--inner-sh);color:var(--ink);font-size:.75rem;font-weight:700;position:relative;
  animation:arac-gir .38s var(--yay) both;animation-delay:calc(var(--i) * 22ms + 80ms)}
.arac svg.i{width:21px;height:21px;stroke-width:1.6}
.arac:active{transform:scale(.95)}
.arac .yakinda{position:absolute;top:6px;right:6px;font-size:.5625rem;font-weight:800;padding:.0625rem .3125rem;border-radius:999px;background:var(--sel);color:var(--ink-3)}
@keyframes arac-gir{from{opacity:0;transform:translateY(10px) scale(.9)}}
.binici:has(.s-dok.acik) .secim-cubuk-a,.binici:has(.s-dok.acik) .temiz-ipucu{opacity:0;pointer-events:none}
.secim-cubuk-a{position:relative;width:calc(100% - 24px);transition:opacity .2s;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.375rem .375rem .375rem 1rem;border-radius:var(--r-p);font-size:.875rem;font-weight:800;animation:sol .3s var(--ease-d) both}

/* Numune plakası (eski ipli karton etiket) 14 Eki v3: birlesik/numune.css */
.etiket-kat{position:absolute;inset:0;z-index:15;pointer-events:none}

/* Sürüm çarkı (ref 2; kullanıcı notu: eski sürümler). Fotoğraf yerinde ve kenardan kenara kalır;
   aydınger paftalar onun üstünde, sağ kenarda kavisli akar. Okunsun diye sağa doğru hafif koyu degrade. */
#s-sahne.cark-acik #s-pimler .pim,.s-sahne.cark-acik .eski-uyari,.s-sahne.cark-acik .s-et,.s-sahne.cark-acik .mercek{display:none}
/* Eski sürüm: işaretler ve okuma kutuları güncel görsele göre ölçüldü, eski görselde boşlukta kalırdı */
#e-sonuc.eski-surum #s-pimler.pim-katman :is(.pim.boncuk,.pim,.odak-cerceve,.kose-kutu),#e-sonuc.eski-surum .mercek{display:none}
.s-sahne.cark-acik .foto-kutu::after{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,rgba(10,11,13,0) 28%,rgba(10,11,13,.38) 58%,rgba(10,11,13,.7));pointer-events:none;animation:sol .3s both}
.cark{position:absolute;z-index:8;top:calc(58px + env(safe-area-inset-top));bottom:calc(var(--peek) + 70px);right:0;width:60%;touch-action:none;overflow:hidden}
.rev{position:absolute;right:16px;top:50%;width:7.25rem;padding:.3125rem .3125rem 1.5rem;margin-top:-5.6rem;border:0;border-radius:4px;
  background:linear-gradient(rgba(250,248,241,.94),rgba(240,236,226,.94));color:#3e382d;text-align:left;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 30px -12px rgba(0,0,0,.85);will-change:transform}
.rev img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.rev .ant{position:absolute;left:.3125rem;right:.3125rem;bottom:.25rem;display:flex;justify-content:space-between;gap:.25rem;font-size:.625rem;font-weight:700;line-height:1.1;border-top:1px solid rgba(62,56,45,.3);padding-top:.1875rem}
.rev .ant b{font-weight:800;color:#1f1c17}
.rev.secili{box-shadow:0 0 0 2px #d4b47a,0 18px 30px -12px rgba(0,0,0,.85)}
.rev.guncel .ant b::after{content:" güncel";font-weight:600;color:#8a7a5a}
.cark-yazi{position:absolute;left:12px;right:16px;bottom:6px;text-align:right;font-size:.75rem;font-weight:700;color:#f6f6f4;text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* Kartela yelpazesi (Değiştir): üç aday kartı yelpaze gibi açılır. Ön kart parmağı izler,
   bırakınca yaylanarak yerine oturur. "Önerileri yenile" eski yelpazeyi toplar, sonraki üçü dağıtır. */
.yelpaze-kat{position:absolute;inset:0;z-index:35;display:flex;flex-direction:column;gap:.75rem;padding:calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 45%,rgba(26,28,32,.94),rgba(8,9,11,.96) 70%);color:#f6f6f4;overflow:hidden;animation:sol .25s both}
@media (max-width:759px){.yelpaze-kat{padding-top:calc(54px + env(safe-area-inset-top))}}
.yelpaze-ust{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.yelpaze-ust small{display:block;font-size:.75rem;font-weight:700;color:#aeb2b8;margin-bottom:.125rem}
.yelpaze-ust b{display:block;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.yelpaze-kat .ic.kuyu{flex:none;color:#f4f4f2;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* 32 px'lik Kapat / Geri simgelerinde dokunma alanı 44 px; görünüş aynı */
#yelpaze-kapat,#e-hak .ust-bar .ic{position:relative}
#yelpaze-kapat::after,#e-hak .ust-bar .ic::after{content:"";position:absolute;inset:-6px}
.yelpaze{position:relative;flex:1;min-height:21rem;touch-action:none;cursor:grab;border-radius:22px;outline:none}
/* klavye odağı yelpazenin tamamına değil, öndeki karta çizilir */
.yelpaze:focus-visible .kartela.on{box-shadow:0 0 0 2px #d4b47a,0 0 0 5px rgba(255,255,255,.92),0 30px 50px -16px rgba(0,0,0,.95)}
.yelpaze.suruklu{cursor:grabbing}
.kartela{position:absolute;left:50%;top:50%;width:12.75rem;height:19rem;margin:-10rem 0 0 -6.375rem;border-radius:16px;padding:.5rem .5rem 0;display:flex;flex-direction:column;gap:.1875rem;overflow:hidden;text-align:left;
  background:#f6f3ec;color:#1d1b17;transform-origin:50% 165%;will-change:transform;-webkit-user-select:none;user-select:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 40px -16px rgba(0,0,0,.9);transition:box-shadow .25s}
.kartela .kt-g{display:block;flex:none;height:9.75rem;border-radius:10px;background:#fff;overflow:hidden}
.kartela img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.kartela .m{font-size:.6875rem;font-weight:700;color:#7a705f;margin-top:.375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kartela b{font-size:.875rem;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kartela .alt{margin-top:auto;padding-bottom:.4375rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.75rem;color:#5d554a}
.kartela .alt strong{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;color:#1d1b17;font-variant-numeric:tabular-nums}
.kartela .fark{font-weight:800;font-variant-numeric:tabular-nums}
.kartela .renkler{display:flex;flex:none;height:1.625rem;margin:0 -.5rem;overflow:hidden;border-top:1px solid rgba(29,27,23,.1)}
.kartela .renkler i+i{box-shadow:inset 1px 0 0 rgba(29,27,23,.08)}
.kartela .renkler i{flex:1}
.kartela.on{box-shadow:0 0 0 2px #d4b47a,0 30px 50px -16px rgba(0,0,0,.95)}
.yelpaze-alt{display:grid;gap:.625rem}
.yelpaze-sayfa{display:flex;align-items:center;gap:.625rem;font-size:.8125rem;font-weight:700;color:#d9dbdf;font-variant-numeric:tabular-nums}
.yelpaze-sayfa #yelpaze-konum{flex:1}
.yelpaze-nokta{display:inline-flex;gap:5px}
.yelpaze-nokta i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.28);transition:width .25s var(--ease-d),background .25s}
.yelpaze-nokta i.on{width:16px;background:#f4f4f2}
.yelpaze-kat .tb.kuyu{color:#f4f4f2;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.yelpaze-kat .tb.kuyu:hover{background:rgba(255,255,255,.14)}
.yelpaze-kat .tb.kuyu svg.i{transition:transform .5s var(--ease-d)}
.yelpaze-kat .tb.kuyu.donuyor svg.i{transform:rotate(180deg)}
.tb.beyaz{background:var(--pill-bg);color:var(--pill-ink);box-shadow:var(--pill-sh);font-weight:800}
.tb.beyaz:hover{background:#fff;color:var(--pill-ink)}
.yelpaze-kat :focus-visible{outline-color:#fff}
.yelpaze-ipucu{color:#aeb2b8;text-align:center}

/* Paraf: düğmenin içinde çizilir (ref 4) */
.parafli{position:relative;overflow:hidden}
.parafli .etiket{display:inline-flex;align-items:center;gap:.4375rem;transition:opacity .18s,transform .18s}
.parafli .paraf{position:absolute;left:12%;top:12%;width:76%;height:76%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;overflow:visible}
.parafli .paraf path{stroke-dasharray:1;stroke-dashoffset:1}
.parafli.ciziyor .etiket{opacity:0;transform:translateY(-8px)}
.parafli.ciziyor .paraf{opacity:1}
.parafli.ciziyor .paraf path{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}

/* ---------- Alışveriş fişi (ref 8) ---------- */
.fis-kat{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;background:radial-gradient(100% 50% at 50% 0%,#202328,#0b0c0e 70%);animation:sol .25s both}
.fis-ust{display:grid;grid-template-columns:2.5rem 1fr 2.5rem;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 12px 6px;text-align:center;color:#f6f6f4;font-weight:800}
.fislerim{display:inline-grid;grid-auto-flow:column;align-items:center;gap:.125rem;justify-self:end;font-size:.75rem;font-weight:800;color:#d4b47a}
.fislerim.vur{animation:vur .5s var(--yay)}
@keyframes vur{40%{transform:scale(1.35)}}
.yazici{position:relative;z-index:3;flex:none;height:30px;margin:6px 12px 0;border-radius:15px;background:linear-gradient(#2c2f34,#131417);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.6),0 10px 22px -8px rgba(0,0,0,.9)}
.yazici i{position:absolute;left:4%;right:4%;bottom:8px;height:6px;border-radius:3px;background:#000;box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.07)}
.yazici::after{content:"";position:absolute;left:8%;right:8%;bottom:9px;height:2px;border-radius:2px;background:rgba(238,214,164,0);transition:background .3s,box-shadow .3s}
.fis-kat.basiyor .yazici::after{background:rgba(238,214,164,.8);box-shadow:0 0 10px rgba(238,214,164,.8)}
.fis-kuyu{position:relative;flex:1;margin:-16px 22px 0;padding:0 0 8.5rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask:linear-gradient(transparent 0,#000 12px);mask:linear-gradient(transparent 0,#000 12px)}
.fis-kuyu::-webkit-scrollbar{display:none}
.fis-kat.basiyor .fis-kuyu{overflow:hidden}
.fis{position:relative;padding:1.75rem 1rem 2.25rem;color:#1f1d1a;font:500 12.5px/1.55 "IBM Plex Mono",ui-monospace,monospace;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(#fbf9f4,#f3efe6);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;
  transform:translateY(var(--cik,0px));will-change:transform;touch-action:pan-y}
.fis.kopuyor{transition:transform .55s cubic-bezier(.5,0,.9,.5),opacity .55s;transform:translateY(120%) rotate(3deg);opacity:0}
.fis.geri{transition:transform .4s var(--yay)}
.fis .f-antet{display:grid;justify-items:center;gap:.125rem;text-align:center;margin-bottom:.75rem}
.fis .f-antet svg{width:30px;height:30px;stroke:#1f1d1a;stroke-width:1.3;fill:none;margin-bottom:.25rem}
.fis .f-antet b{font:800 1.0625rem/1.1 Figtree,sans-serif;letter-spacing:-.02em}
.fis .f-antet span{font-size:11px;color:rgba(31,29,26,.65)}
.fis .f-meta{display:grid;grid-template-columns:1fr auto;font-size:11.5px;color:rgba(31,29,26,.75)}
.fis .kesik{border-top:1.5px dashed rgba(31,29,26,.4);margin:.625rem 0}
.fis .magaza{display:flex;justify-content:space-between;align-items:baseline;margin-top:.25rem;font-weight:600}
.fis .magaza b{font:800 .875rem/1.3 Figtree,sans-serif;letter-spacing:-.01em}
.fis .magaza span{font-size:11px;color:rgba(31,29,26,.6)}
.fis .satir{display:grid;grid-template-columns:1fr auto;gap:0 .75rem;margin-top:.4375rem}
.fis .satir .ad{font-weight:500}
.fis .satir .tl{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fis .satir .ek{grid-column:1/-1;font-size:11px;color:rgba(31,29,26,.58)}
.fis .ara{display:flex;justify-content:space-between;margin-top:.375rem;padding-top:.25rem;border-top:1px solid rgba(31,29,26,.18);font-size:11.5px;color:rgba(31,29,26,.72);font-variant-numeric:tabular-nums}
.fis .delikli{height:12px;margin:.875rem -1rem .625rem;background:radial-gradient(circle at 7px 6px,#16171a 2.6px,transparent 3.2px) 0 0/14px 12px repeat-x;opacity:.9}
.fis .toplam{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5rem;padding-top:.5rem;border-top:2px solid #1f1d1a}
.fis .toplam span{font-weight:600}
.fis .toplam b{font:800 1.375rem/1.1 Figtree,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fis .butce{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(31,29,26,.7);margin-top:.25rem}
.fis .f-not{margin-top:.875rem;font-size:11.5px;line-height:1.5}
.fis .f-not b{display:block;font:800 .8125rem/1.3 Figtree,sans-serif;margin-bottom:.125rem}
.fis .f-qr{display:grid;grid-template-columns:5.5rem 1fr;gap:.75rem;align-items:center;margin-top:.875rem}
.fis .f-qr .qr{width:5.5rem;height:5.5rem;background:#fff;padding:4px;border-radius:4px}
.fis .f-qr .qr img,.fis .f-qr .qr canvas{width:100%!important;height:100%!important}
.fis .f-qr span{font-size:11.5px;line-height:1.45}
.fis .f-son{text-align:center;margin-top:1rem;font-size:11px;color:rgba(31,29,26,.6)}
.fis-toplam-yuzen{position:absolute;z-index:6;left:50%;bottom:calc(5.25rem + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:.625rem;align-items:baseline;padding:.4375rem .875rem;border-radius:999px;
  background:rgba(246,243,236,.96);color:#1f1d1a;font-size:.75rem;font-weight:700;box-shadow:0 10px 24px -8px rgba(0,0,0,.8);animation:yukari .3s var(--ease-d) both;white-space:nowrap}
.fis-toplam-yuzen b{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.fis-eylem{position:absolute;z-index:6;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.375rem;padding:.375rem;border-radius:var(--r-p);
  background:var(--cap);box-shadow:var(--cap-sh),0 14px 30px -10px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fis-eylem .tb{height:2.625rem;padding:0 .5rem;color:var(--cap-ink)}
.fis-eylem .tb.kuyu{background:rgba(255,255,255,.08);box-shadow:none}
.fis-eylem .tb.ana{background:var(--pill-bg);color:var(--pill-ink);box-shadow:var(--pill-sh)}
.cekme-ipucu{position:absolute;z-index:5;left:50%;top:5.25rem;transform:translateX(-50%);font-size:.75rem;font-weight:700;color:#c8cacd;opacity:0;transition:opacity .3s;pointer-events:none}
.fis-kat.cekiliyor .cekme-ipucu{opacity:1}
.altin.agiz{animation:agiz .42s var(--ease-d) both}
@keyframes agiz{to{transform:scaleY(.12) scaleX(1.04);opacity:.4;filter:brightness(.4)}}