/* ====================================================================
   tarama.css — "HESAP BAGLI DEGIL" EKRANI (StarPETS instantsell tarzi)
   2026-10-12, kullanici istegi: Scan items kutusunun YERINE.
   --------------------------------------------------------------------
   Izgara alaninda: arkada SOLUK, surekli yukari kayan kart seridi
   (bizim .kart'lar, 38 sn), ortada beyaz bir isik lekesi, onun ustunde
   beyaz kart: kayan 3 sayfalik anlatim (bizim gorseller, CSS animasyonu),
   kare sayfa noktalari, mavi "Connect Roblox" dugmesi.
   StarPETS'in maskot cizimleri KULLANILMADI — gorseller kendi esyalarimiz.
   KURAL: yuvarlak yok, karemsi. Animasyonlar transform/opacity.
   ==================================================================== */
.tp { position:relative; height:100%; min-height:540px; border-radius:18px; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; }
.tp[hidden] { display:none; }

/* arka: kayan soluk kartlar (iki ozdes blok = kesintisiz dongu) */
.tp-hayalet { position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.tp-iz { opacity:.5; animation:tpKay 14s linear infinite; will-change:transform; }   /* sure JS'te blok boyundan (80 px/sn) */
.tp-iz .izgara { padding-bottom:11px; }
.tp-iz .kart { cursor:default; content-visibility:visible; }
/* ASAGI dogru akar: ikinci blok yukaridan iner, -50%'den 0'a (kesintisiz dongu) */
@keyframes tpKay { from { transform:translateY(-50%); } to { transform:translateY(0); } }
/* ortadaki beyaz isik lekesi: kartlar ortada solar */
.tp::before { content:""; position:absolute; left:50%; top:50%; width:720px; height:560px; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(46% 42% at 50% 50%, rgba(var(--kd-cam, 255,255,255), 1) 0, rgba(var(--kd-cam, 255,255,255), 1) 42%, rgba(var(--kd-cam, 255,255,255), .97) 58%,
             rgba(var(--kd-cam, 255,255,255), .78) 72%, rgba(var(--kd-cam, 255,255,255), .38) 84%, rgba(var(--kd-cam, 255,255,255), 0) 96%); }

/* kart */
.tp-kart { width:min(340px, calc(100% - 32px)); padding:18px 18px 18px; border-radius:18px; background:var(--kd-yuzey, #fff);
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 18px 50px -18px rgba(15,42,86,.28); text-align:center; }
.tp-sayfalar { position:relative; height:262px; overflow:hidden; }
.tp-sayfa { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateX(26px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.tp-sayfa.on { opacity:1; transform:none; pointer-events:auto; }
.tp-sayfa.cik { opacity:0; transform:translateX(-26px); }
.tp-sayfa h3 { margin:16px 0 6px; font-size:19px; font-weight:750; letter-spacing:-.02em; color:var(--ink); line-height:1.2; }
.tp-sayfa p { margin:0; max-width:270px; font-size:13px; line-height:1.5; color:var(--ink-2); }

/* gorsel sahnesi */
.tp-sahne { position:relative; width:220px; height:156px; border-radius:18px; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#60A5FA);
  box-shadow:0 18px 34px -18px rgba(37,99,235,.85); }
.tp-sahne::before { content:""; position:absolute; inset:-60%; z-index:-1;
  background:repeating-conic-gradient(from 0deg, rgba(var(--kd-cam, 255,255,255), .09) 0 9deg, transparent 9deg 22deg); animation:tpDon 30s linear infinite; }
.tp-yildiz { position:absolute; width:12px; height:12px; background:var(--kd-yuzey, #fff); z-index:3;
  clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation:tpPar 2.6s ease-in-out infinite; }
.tp-yildiz.y2 { width:8px; height:8px; animation-delay:1.1s; }
.tp-yildiz.y3 { width:10px; height:10px; animation-delay:.5s; }

/* sahne 1: uc mini kart yelpaze + fiyat etiketi */
.tp-yelpaze { position:absolute; left:50%; bottom:-14px; width:0; height:0; }
.tp-mk { position:absolute; left:-36px; bottom:0; width:72px; height:96px; border-radius:12px; background:var(--kd-yuzey, #fff); padding:7px;
  box-shadow:0 10px 22px -10px rgba(15,23,80,.55); transform-origin:50% 120%; display:flex; flex-direction:column; align-items:center; }
.tp-mk img { width:58px; height:58px; object-fit:contain; margin-top:4px; }
.tp-mk i { display:block; width:40px; height:5px; border-radius:2px; background:var(--buz-2); margin-top:6px; }
.tp-mk.m1 { transform:rotate(-17deg) translateX(-34px); animation:tpYel1 3.4s ease-in-out infinite; }
.tp-mk.m2 { z-index:2; transform:translateY(-10px); animation:tpYel2 3.4s ease-in-out infinite; }
.tp-mk.m3 { transform:rotate(17deg) translateX(34px); animation:tpYel3 3.4s ease-in-out infinite; }
.tp-etiket { position:absolute; right:16px; top:16px; z-index:3; height:26px; padding:0 9px; border-radius:7px; background:var(--kd-yuzey, #fff);
  color:#16A34A; font-size:12px; font-weight:800; display:flex; align-items:center; gap:4px; box-shadow:0 8px 18px -8px rgba(15,23,80,.5);
  animation:tpSuz 3s ease-in-out infinite; }

/* sahne 2: vizor + tarama cizgisi */
.tp-esya { position:absolute; left:50%; top:50%; width:104px; height:104px; object-fit:contain; transform:translate(-50%,-50%);
  filter:drop-shadow(0 12px 14px rgba(15,23,80,.45)); animation:tpSuz2 3.2s ease-in-out infinite; z-index:1; }
.tp-vizor { position:absolute; left:50%; top:50%; width:132px; height:118px; margin:-59px 0 0 -66px; z-index:2; animation:tpOdak 2.4s ease-in-out infinite;
  background:
    linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 0 0/16px 3px no-repeat, linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 0 0/3px 16px no-repeat,
    linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 100% 0/16px 3px no-repeat, linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 100% 0/3px 16px no-repeat,
    linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 0 100%/16px 3px no-repeat, linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 0 100%/3px 16px no-repeat,
    linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 100% 100%/16px 3px no-repeat, linear-gradient(var(--kd-yuzey, #fff),var(--kd-yuzey, #fff)) 100% 100%/3px 16px no-repeat; }
.tp-cizgi { position:absolute; left:44px; right:44px; height:2px; z-index:2; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--kd-yuzey, #fff) 20%, var(--kd-yuzey, #fff) 80%, transparent); box-shadow:0 0 12px 2px var(--kd-halka, rgba(255,255,255,.55));
  animation:tpTara 2.2s ease-in-out infinite alternate; }

/* sahne 3: cuzdan karti + USDT + tik */
.tp-cuzdan { position:absolute; left:50%; top:50%; width:132px; height:88px; margin:-44px 0 0 -66px; z-index:1; border-radius:14px;
  background:linear-gradient(160deg,var(--kd-yuzey, #fff),var(--kd-mavi, #E7EFFB)); box-shadow:0 14px 26px -12px rgba(15,23,80,.6); padding:12px 14px; text-align:left;
  animation:tpSuz2 3.4s ease-in-out infinite; }
.tp-cuzdan small { display:block; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--ink-3); }
.tp-cuzdan b { display:block; margin-top:6px; font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--ink); }
.tp-cuzdan em { font-style:normal; font-size:11px; font-weight:700; color:#16A34A; }
.tp-tik { position:absolute; right:44px; top:24px; z-index:3; width:30px; height:30px; border-radius:9px; background:#16A34A; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 18px -8px rgba(22,163,74,.9); animation:tpTik 3.4s ease-in-out infinite; }
.tp-tik svg { width:16px; height:16px; }
.tp-para { position:absolute; z-index:0; width:22px; height:22px; border-radius:6px; background:rgba(var(--kd-cam, 255,255,255), .9); color:#16A34A;
  font-size:12px; font-weight:900; display:grid; place-items:center; animation:tpYuksel 3.4s ease-in infinite; }
.tp-para.p2 { animation-delay:1.1s; } .tp-para.p3 { animation-delay:2.2s; }

/* sayfa noktalari (kare) */
.tp-noktalar { display:flex; justify-content:center; gap:5px; margin:14px 0 16px; }
.tp-noktalar button { width:6px; height:6px; padding:0; border-radius:2px; background:var(--buz-2); transition:width .35s ease, background .35s ease; }
.tp-noktalar button.on { width:22px; background:var(--mavi); }

/* dugme */
.tp-btn { width:100%; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  color:#fff; font-size:15.5px; font-weight:800; letter-spacing:-.01em; box-shadow:0 12px 24px -12px rgba(37,99,235,.85); transition:transform .12s ease; }
.tp-btn:active { transform:scale(.98); }
.tp-btn svg { width:18px; height:18px; }

/* yeniden tara (hesap bagliyken, Quick select satirinda) */
.hizli .hizli-tara { margin-left:auto; display:inline-flex; align-items:center; gap:6px; border-radius:8px; }
.hizli .hizli-tara svg { width:13px; height:13px; }
.hizli .hizli-tara.donuyor svg { animation:tpDon .9s linear infinite; }

@keyframes tpDon   { to { transform:rotate(360deg); } }
@keyframes tpPar   { 0%, 100% { opacity:.25; transform:scale(.6) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(45deg); } }
@keyframes tpSuz   { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes tpSuz2  { 0%, 100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes tpYel1  { 0%, 100% { transform:rotate(-17deg) translateX(-34px); } 50% { transform:rotate(-21deg) translateX(-40px) translateY(-3px); } }
@keyframes tpYel2  { 0%, 100% { transform:translateY(-10px); } 50% { transform:translateY(-16px); } }
@keyframes tpYel3  { 0%, 100% { transform:rotate(17deg) translateX(34px); } 50% { transform:rotate(21deg) translateX(40px) translateY(-3px); } }
@keyframes tpOdak  { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.08); opacity:.6; } }
@keyframes tpTara  { 0% { top:22px; } 100% { top:132px; } }
@keyframes tpTik   { 0%, 20% { transform:scale(0) rotate(-30deg); } 32%, 88% { transform:none; } 100% { transform:scale(0); } }
@keyframes tpYuksel{ 0% { transform:translateY(40px); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(-70px); opacity:0; } }

@media (max-width:980px) { .tp { min-height:520px; } }
@media (prefers-reduced-motion: reduce) {
  .tp *, .tp::before, .tp *::before { animation:none !important; transition:none !important; }
}

/* hesap bagli degilken: izgara yerine bu ekran; arac satirlari soluk ve tiklanmaz */
body.hesapsiz #izgara { display:none; }
/* hesap yokken arama/filtre/siralama ve Quick select anlamsiz: tamamen gizli */
body.hesapsiz .arac, body.hesapsiz .hizli { display:none; }
body.hesapsiz .hizli .hizli-tara { display:none; }

/* SEPET (StarPETS gibi): icerik bulanik, ustunde "Connect your Roblox account" karti */
.tp-sepet { position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:16px; }
.tp-sepet[hidden] { display:none; }
body.hesapsiz .sepet { position:relative; }
/* 2026-10-14 (kullanici): bulanik sepet de gorunmesin -> icerik tamamen gizli (yer korunur, Connect karti ortada kalir) */
body.hesapsiz .sepet > :not(.tp-sepet) { visibility:hidden !important; pointer-events:none; user-select:none; }
.tp-sepet-kart { width:100%; max-width:300px; padding:22px 18px 18px; border-radius:18px; background:var(--kd-yuzey, #fff); text-align:center;
  box-shadow:0 1px 2px rgba(15,42,86,.05), 0 18px 44px -18px rgba(15,42,86,.3); }
.tp-sepet-ik { width:46px; height:46px; margin:0 auto 12px; border-radius:13px; display:grid; place-items:center;
  background:var(--buz); color:var(--mavi-koyu); }
.tp-sepet-ik svg { width:21px; height:21px; }
.tp-sepet-kart h4 { margin:0 0 6px; font-size:17px; font-weight:750; letter-spacing:-.02em; color:var(--ink); }
.tp-sepet-kart p { margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.tp-sepet-btn { width:100%; height:44px; border-radius:12px; background:var(--kd-yuzey, #fff); border:1px solid var(--cizgi-2);
  font-size:14px; font-weight:750; color:var(--ink); transition:transform .12s ease; }
.tp-sepet-btn:active { transform:scale(.98); }
@media (max-width:980px) { body.hesapsiz .sepet { min-height:300px; } }

/* hesap yokken: hesap cipleri, +, Share, My items / All items GIZLI; yerine sade baslik */
.tp-baslik { display:none; margin:2px 2px 12px; font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
/* body.hesapsiz .tp-baslik: "Your inventory" yazisi KALDIRILDI (2026-10-15, kullanici: hesap bagli degilken anlamsiz) */
body.hesapsiz .hesaplar { display:none !important; }   /* !important: mobilde hesap-bar.css (body.hb-N .hesaplar) ayni guclu kuralla eziyordu -> demo hesap cipleri gorunuyordu (2026-10-15) */
body.hesapsiz .shp-btn, body.hesapsiz .seg[data-sekme], body.hesapsiz [data-sekme] { display:none !important; }

/* SAFARI-KIRP (2026-10-15): Safari overflow+border-radius ile isik lekesini (.tp::before 720px) kirpmiyordu -> panel disinda koyu alan */
.tp { -webkit-clip-path:inset(0 round 18px); clip-path:inset(0 round 18px); }

/* SAFARI-SADE (2026-10-15, kullanici iPhone: "cizgi kalmis, yukarisi duzelmedi"): telefonda Safari isik lekesini (.tp::before) ve
   maskeli kayan katmani duz kenarli koyu kutu olarak ciziyordu. Telefonda ikisi yok: kayan kartlar duz soluk, kenarlar panelde kirpilir. */
@media (max-width:980px) {
  .tp::before { display:none !important; }
  .tp-hayalet { -webkit-mask-image:none !important; mask-image:none !important; }
  .tp-iz { opacity:.26; }
  html[data-tema="koyu"] .tp-iz { opacity:.3; }
  /* ust/alt kenarda yumusak solma (maske yerine duz katman: Safari icin guvenli) */
  .tp::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgb(243,246,252) 0, rgba(243,246,252,0) 14%, rgba(243,246,252,0) 86%, rgb(243,246,252) 100%); }
  html[data-tema="koyu"] .tp::after { background:linear-gradient(180deg, var(--zemin) 0, rgba(var(--kd-zemin-rgb),0) 14%, rgba(var(--kd-zemin-rgb),0) 86%, var(--zemin) 100%); }
}