/* ====================================================================
   tarama-pop.css — "Scan items"a basinca acilan TARAMA PENCERESI
   (StarPETS akisi, bizim tasarimimizla) — 2026-10-12
   1) Finding a free bot  2) Inventory scan (sure, bot, Join server / Add friend)
   3) Scanning -> Scan complete. Karemsi, hover YOK.
   Adim gecisinde PENCERE SOLMAZ (eski "beyazlama" dersi): yalniz icerik kayar,
   boy WAAPI ile yumusak degisir (tarama-pop.js).
   ==================================================================== */
.tpp-arka { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:rgba(15,42,86,.38); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease; }
.tpp-arka[hidden] { display:none; }
.tpp-arka.acik { opacity:1; }
.tpp { position:relative; width:min(460px, 100%); border-radius:20px; background:var(--kd-yuzey, #fff); overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(15,42,86,.45), 0 0 0 1px rgba(15,42,86,.04);
  transform:translateY(12px) scale(.97); transition:transform .26s cubic-bezier(.2,.9,.3,1.15); }
.tpp-arka.acik .tpp { transform:none; }
.tpp-x { position:absolute; right:14px; top:14px; z-index:3; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--cizgi); background:#fff; color:var(--ink-3); }
.tpp-x svg { width:15px; height:15px; }
.tpp-adim { padding:26px 26px 24px; }
.tpp-adim[hidden] { display:none; }
.tpp-adim.gir > * { animation:tppGir .3s cubic-bezier(.2,.8,.2,1) both; }
.tpp-adim.gir > :nth-child(2) { animation-delay:.03s; } .tpp-adim.gir > :nth-child(3) { animation-delay:.06s; }
.tpp-adim.gir > :nth-child(4) { animation-delay:.09s; } .tpp-adim.gir > :nth-child(n+5) { animation-delay:.12s; }
@keyframes tppGir { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

/* 1 · bot araniyor */
.tpp-adim[data-a="ara"] { padding:34px 30px 30px; text-align:center; }
.tpp-cerceve { position:relative; width:96px; height:96px; margin:0 auto 18px; }
.tpp-halka { position:absolute; inset:0; border-radius:26px; padding:4px;
  background:conic-gradient(from var(--tpp-aci,0deg), #2563EB 0 32%, #93C5FD 40%, var(--buz) 41% 100%);
  -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:tppHalka 1.4s linear infinite; }
@property --tpp-aci { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes tppHalka { to { --tpp-aci:360deg; } }
.tpp-cerceve .tpp-av { position:absolute; inset:12px; width:auto; height:auto; border-radius:18px; }
.tpp-adim[data-a="ara"] h3 { margin:0 0 6px; font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.tpp-adim[data-a="ara"] p { margin:0 0 18px; font-size:13.5px; color:var(--ink-2); }
.tpp-cubuk { width:180px; height:5px; margin:0 auto; border-radius:3px; background:var(--buz); overflow:hidden; }
.tpp-cubuk i { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#2563EB,#60A5FA); }
.tpp-cubuk.dolu i { width:100%; transition:width var(--tpp-sure,2s) cubic-bezier(.4,0,.2,1); }

/* avatar (karemsi) */
.tpp-av { flex:0 0 auto; width:46px; height:46px; border-radius:13px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--buz), #fff); box-shadow:inset 0 0 0 1px var(--cizgi); }
.tpp-av img { width:100%; height:100%; object-fit:cover; }

/* 2 · bekleniyor */
.tpp-bas h3 { margin:0; padding-right:44px; font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.tpp-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:18px 0 14px; }
.tpp-seg i { height:5px; border-radius:3px; background:var(--buz); position:relative; overflow:hidden; }
.tpp-seg i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#2563EB,#60A5FA);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.tpp-seg i.on::after { transform:scaleX(1); }
.tpp-sure { display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:14px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.tpp-sure svg { width:15px; height:15px; color:var(--ink-3); }
.tpp-sure b { color:var(--ink); font-variant-numeric:tabular-nums; min-width:38px; text-align:left; }
.tpp-bot { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; border:1px solid var(--cizgi); background:#FBFCFE; margin-bottom:16px; }
.tpp-bot-ad { flex:1; min-width:0; display:flex; flex-direction:column; }
.tpp-bot-ad b { font-size:14.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpp-bot-ad small { font-size:12px; font-weight:600; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.tpp-bot-ad small i { width:7px; height:7px; border-radius:2px; background:#16A34A; animation:tppNabiz 1.6s ease-in-out infinite; }
@keyframes tppNabiz { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
.tpp-profil { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:9px;
  background:var(--mavi); color:#fff; font-size:12.5px; font-weight:750; text-decoration:none; }
.tpp-profil svg { width:13px; height:13px; }
.tpp-btn { width:100%; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:15.5px; font-weight:800; letter-spacing:-.01em; transition:transform .12s ease; }
.tpp-btn:active { transform:scale(.985); }
.tpp-btn + .tpp-btn { margin-top:10px; }
.tpp-btn svg { width:18px; height:18px; }
.tpp-btn em { font-style:normal; height:22px; padding:0 8px; border-radius:6px; display:inline-grid; place-items:center; font-size:11px; font-weight:800; }
.tpp-btn.ana { color:#fff; background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  box-shadow:0 12px 24px -12px rgba(37,99,235,.85); }
.tpp-btn.ana em { background:#fff; color:var(--mavi-koyu); }
.tpp-btn.ikinci { color:var(--mavi-koyu); background:var(--buz); border:1px solid var(--mavi-ln); }
.tpp-btn.ikinci em { background:#fff; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--cizgi); }
.tpp-not { margin:12px 0 0; text-align:center; font-size:11.5px; color:var(--ink-3); }

/* 3 · taraniyor / bitti */
.tpp-tara { position:relative; height:120px; border-radius:16px; overflow:hidden; margin:2px 0 16px;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#60A5FA); }
.tpp-tara-iz { position:absolute; left:0; top:0; bottom:0; display:flex; gap:10px; padding:16px; animation:tppBant 9s linear infinite; width:max-content; }
.tpp-tara-iz img { width:86px; height:86px; object-fit:contain; padding:8px; border-radius:12px; background:rgba(255,255,255,.92); }
@keyframes tppBant { to { transform:translateX(-50%); } }
.tpp-tara::after { content:""; position:absolute; top:0; bottom:0; left:-30%; width:30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:tppSupur 1.6s ease-in-out infinite; }
@keyframes tppSupur { to { left:100%; } }
.tpp-durum { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; font-weight:700; color:var(--ink); }
.tpp-durum span { color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums; }
.tpp-bitti { text-align:center; padding:8px 0 4px; }
.tpp-tik { width:58px; height:58px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; color:#fff; background:#16A34A;
  box-shadow:0 14px 26px -12px rgba(22,163,74,.9); animation:tppTik .4s cubic-bezier(.2,.9,.3,1.35) both; }
.tpp-tik svg { width:28px; height:28px; }
@keyframes tppTik { from { transform:scale(.4) rotate(-20deg); opacity:0; } to { transform:none; opacity:1; } }
.tpp-bitti h3 { margin:0 0 6px; font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.tpp-bitti p { margin:0 0 18px; font-size:13.5px; color:var(--ink-2); }

@media (max-width:520px) { .tpp-adim { padding:22px 18px 18px; } .tpp-btn { height:50px; font-size:15px; } }
@media (prefers-reduced-motion: reduce) { .tpp *, .tpp-arka { animation:none !important; transition:none !important; } }
.tpp-av svg { width:100%; height:100%; display:block; }
.tpp-av:has(svg) { background:none; box-shadow:none; }
/* son adim: basligi yok, seg cubugu kapatma dugmesinin altina girmesin */
.tpp-adim[data-a="bitti"] .tpp-seg { margin:6px 46px 4px 0; }
/* Scan complete: kutusuz, yalniz MAVI tik — cizilerek belirir (kullanici istegi 2026-10-12) */
.tpp-tik { width:64px; height:64px; margin:0 auto 10px; border-radius:0; background:none; box-shadow:none; color:var(--mavi); animation:none; }
.tpp-tik svg { width:64px; height:64px; filter:drop-shadow(0 8px 14px rgba(37,99,235,.35)); }
.tpp-tik path { stroke-dasharray:1; stroke-dashoffset:1; }
.tpp-adim.gir .tpp-tik svg { animation:tppTikBuyu .5s cubic-bezier(.2,.9,.3,1.35) .05s both; }
.tpp-adim.gir .tpp-tik path { animation:tppCiz .55s cubic-bezier(.65,0,.35,1) .18s forwards; }
@keyframes tppCiz { to { stroke-dashoffset:0; } }
@keyframes tppTikBuyu { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .tpp-tik path { stroke-dashoffset:0; } }

/* GERCEK TARAMA (2026-10-15): hata adimi (bot yok / sunucuda gorulmedi / sure doldu) — ayni isaret, kirmizi */
.tpp-tik.hata { color:#DC2626; }
.tpp-tik.hata svg { filter:drop-shadow(0 8px 14px rgba(220,38,38,.3)); }
.tpp-durum.belirsiz span { display:none; }
a.tpp-btn { text-decoration:none; box-sizing:border-box; }

/* BEKLEME: NOKTA IZGARASI + BUYUTEC (2026-10-16, secim 19) — tarama-pop.js mercekBasla / mercekBul */
.tpm { position:relative; display:grid; grid-template-columns:repeat(7, 9px); gap:6px; width:max-content; margin:4px auto 22px; }
.tpm i { width:9px; height:9px; border-radius:3px; background:#2563EB; opacity:.22; transition:opacity .2s, transform .2s; }
.tpm-lens { position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; border:3px solid #2563EB; background:rgba(37,99,235,.12);
  box-shadow:0 4px 14px rgba(15,23,42,.25); pointer-events:none; transition:left .6s cubic-bezier(.45,0,.25,1), top .6s cubic-bezier(.45,0,.25,1), transform .35s, opacity .35s; z-index:2; }
.tpm-lens::after { content:""; position:absolute; right:-12px; bottom:-12px; width:16px; height:4px; border-radius:2px; background:#2563EB; transform:rotate(45deg); }
.tpm-bot { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:16px; overflow:hidden; z-index:3; opacity:0; transform:scale(.3);
  box-shadow:0 0 0 4px rgba(37,99,235,.25), 0 10px 26px rgba(37,99,235,.35); transition:opacity .3s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.tpm-bot img, .tpm-bot svg { display:block; width:100%; height:100%; object-fit:cover; }
.tpm.bulundu i { opacity:.08 !important; transform:scale(.7) !important; }
.tpm.bulundu .tpm-lens { transform:scale(1.6); opacity:0; }
.tpm.bulundu .tpm-bot { opacity:1; transform:none; }