/* ============================================================
 * features/wallet.css — bakiye kartı + yükleme sihirbazı + ekstre
 * (JS karşılığı: js/features/wallet/)
 * ============================================================ */

/* Bakiye kartı — TEK kimlik (2026-07-19: card/card--hero yığını öldü,
   ALTIN KURAL K1). Zemin = accent-soft (kullanıcı 2026-07-24 3. tur;
   gölge yok). İçerik dikey+yatay ORTALI (2026-07-05). Pay + köşe + zemin
   = profil kartıyla SİMETRİK (profile-card ikizi). */
.balance-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border-radius: var(--card-r); padding: var(--card-pad); min-height: 150px;
  background: var(--accent-soft);
  backdrop-filter: var(--shellbar-blur); -webkit-backdrop-filter: var(--shellbar-blur);
}
/* Yenile = kartın sağ üst köşesi. Zemin = eski HOVER reçetesi
   (accent-soft + accent glif): kullanıcı 2026-07-20 "hover hali daha
   uyumlu, normal o olsun" — chat bar gönder (.cb-main) deseninin eşi,
   hover yalnız parlar. Dokununca döner. Profil'deki .profile-gear ile
   AYNI mimari — uygulama içi ikon butonları tutarlı. */
.balance-refresh {
  position: absolute; top: 12px; right: 12px;
  width: var(--circle-md); height: var(--circle-md); border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  transition: background var(--tr-fast), color var(--tr-fast), filter var(--tr-fast);
}
.balance-refresh:hover { filter: brightness(1.15); }
.balance-refresh.is-spinning i { animation: spin .6s linear infinite; }
.balance-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.balance-amount {
  font-size: 38px; font-weight: 700; letter-spacing: -.03em;
  margin: 2px 0 10px; font-variant-numeric: tabular-nums;
}
.balance-meta {
  font-size: 12px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
/* Yükle — zemin+renk YOK (kullanıcı 2026-07-20 3. tur: kart zemini
   accent-soft olunca buton kendi zeminini/rengini bıraktı; base.css
   button reset'iyle şeffaf, metin kalıttan; pulse halkası sistem geneli
   accent, components.css). TEK kimlik: eski "btn btn--primary"
   yığınından bağımsızlaştı (ALTIN KURAL K1/K4). Sihirbaz içindeki
   eşi .tp-go DÜZ accent kaldı (sheet'in son CTA'sı — bilinçli fark). */
.wl-topup {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--accent-strong);
  font-weight: 700; font-size: 14px; line-height: 1.2;
  user-select: none; white-space: nowrap;
  transition: filter var(--tr-fast), transform var(--tr-fast), opacity var(--tr-fast);
}
.wl-topup:hover { filter: brightness(1.15); }
.wl-topup:active { transform: scale(.97); }
.wl-topup:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pkg-card {
  position: relative; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid transparent;
  cursor: pointer; transition: border-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.pkg-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pkg-name { font-weight: 600; font-size: 13px; color: var(--text-2); }
.pkg-price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.pkg-bonus { font-size: 12px; color: var(--ok); font-weight: 600; margin-top: 3px; }
.pkg-badge {
  position: absolute; top: -8px; right: 10px;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--accent-strong); color: var(--on-accent); font-size: 10.5px; font-weight: 700;
}

/* Yükleme sihirbazı popup boyu (data-pp="topup"; eski components.css
   sheet--topup blokları buraya indi — boyut kararı sihirbazın kendi
   dosyasında yaşar). Gövde overflow VISIBLE (2026-07-20): hidden,
   ileri okunun (tp-next) ve adım içi pulse'ların 20px halkasını
   kesiyordu — gövde zaten scroll etmez (kaydırma .wiz-step'te). */
.pp[data-pp="topup"] { --pp-body-ov: visible; }
@media (max-width: 719px) { .pp[data-pp="topup"] { --pp-max-h: 76svh; } }
@media (min-width: 720px) {
  /* genişlik sabit, yükseklik adım içeriğine göre değişir (kullanıcı
     kararı 2026-07-05: "slider değişince yükseklik değişmeli") */
  .pp[data-pp="topup"] { --pp-w: min(560px, 92vw); --pp-max-h: min(70svh, 640px); }
}

/* Yükleme sihirbazı (topup popup'ı içinde, 3 adım) — kayan şerit DEĞİL,
   display geçişi: hiçbir overflow kırpması yok → pulse dalgaları
   serbestçe yayılır (kullanıcı şartı 2026-07-05) */
.tp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 10px; flex: 0 0 auto;
}
.tp-head h3 { flex: 1; font-size: 16px; }
/* Geri/ileri okları — TEK kimlik (2026-07-19: .icon-btn primitifini
   torun seçiciyle ezme öldü, ALTIN KURAL K1/K2; reçete kopyalandı).
   HER ZAMAN zeminli (yalnız hover'da değil — kullanıcı kararı
   2026-07-05). */
.tp-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle-md); height: var(--circle-md); border-radius: var(--r-full); flex: 0 0 auto;
  color: var(--text-2); background: var(--surface-2);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.tp-back:hover { background: var(--surface-3); color: var(--text); }
.tp-back:disabled { opacity: .4; cursor: not-allowed; }
.tp-back i { font-size: 16px; }
.tp-next {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle-md); height: var(--circle-md); border-radius: var(--r-full); flex: 0 0 auto;
  color: var(--text-2); background: var(--surface-2);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.tp-next:hover { background: var(--surface-3); color: var(--text); }
.tp-next:disabled { opacity: .4; cursor: not-allowed; }
.tp-next i { font-size: 16px; }
/* Nabız hâli (tüm sözleşmeler onaylanınca): pulse ACCENT okunmalı
   (kullanıcı 2026-07-20) — halka zaten sistem geneli accent
   (components.css). 2026-07-22: daire accent-soft'tan DOLU accent'e
   çıktı, ok --text-3 kademesine indi — nabız kaçırılmayacak kadar
   baskın olsun. */
.tp-next.pulse-attn { background: var(--accent); color: var(--text-3); }
/* Sihirbaz adım 1 Yükle'si — .wl-topup'ın ikizi (kendi bloğu, K2) */
.tp-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-full);
  font-weight: 700; font-size: 14px; line-height: 1.2;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-1);
  user-select: none; white-space: nowrap;
  transition: filter var(--tr-fast), transform var(--tr-fast), opacity var(--tr-fast);
}
.tp-go:hover { filter: brightness(1.12); }
.tp-go:active { transform: scale(.97); }
.tp-go:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wiz-amount { flex: 1; text-align: center; }
.wiz-amount .lbl { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; }
.wiz-amount b { font-size: 18px; letter-spacing: -.01em; }
/* Adım 1 dipnotu: kart markası ikon şeridi — tam ORTALI (sağa/sola
   yaslanmaz), en silik kademe (muted-4), süs amaçlı (aria-hidden).
   Üst payı adım 1'in diğer iki dipnotuyla EŞİT (12px, kullanıcı
   2026-07-22: 8/4/6 karması üçünü birleşik gösteriyordu). */
.pay-brands {
  margin-top: 12px;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 6px 12px;
}
.pay-brands i { font-size: 22px; }
.wiz { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wiz-step { display: none; padding: 4px 2px; }
.wiz-title { font-weight: 700; margin-bottom: 10px; }   /* adım başlığı */
/* KIRPMA TAMPONU (2026-07-20; 2. tur aynı gün): adım scroller'ı
   Yükle/ccheck pulse halkasını (20px box-shadow) kesiyordu. İlk tampon
   (20/-16/-18) halkadan KÜÇÜKTÜ — üst kenarda hâlâ düz kesik kalıyordu
   (kullanıcı raporu; z-index çare DEĞİL, overflow kırpması katman
   dinlemez). Şimdi pay ≥ halka: 24px padding + eş(e yakın) negatif
   marj — net iç paylar aynı kalır (T/B 4, L/R 2), kırpma kutusu her
   yönde 20px+ genişler (chats.css .conv-list deseni). Scrollbar GİZLİ
   (galeri/cüzdan emsali). */
.wiz[data-step="1"] .wiz-step:nth-of-type(1),
.wiz[data-step="2"] .wiz-step:nth-of-type(2),
.wiz[data-step="3"] .wiz-step:nth-of-type(3) {
  display: block; animation: pop-in var(--tr-med);
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px; margin: -20px -22px;
  scrollbar-width: none;
}
.wiz-step::-webkit-scrollbar { width: 0; height: 0; }
.tp-or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px; font-size: 12px; color: var(--text-3); font-weight: 600;
}
.tp-or::before, .tp-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.amount-row { display: flex; gap: 10px; }
.amount-wrap { position: relative; flex: 1; }
.amount-wrap .input { padding-right: 54px; font-size: 17px; font-weight: 700; }
.amount-ccy {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.contract-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--r-full);
  background: var(--surface-2);
  margin-bottom: 8px; cursor: pointer; transition: background var(--tr-fast);
}
.contract-row:hover { background: var(--surface-3); }
.contract-row input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.contract-row .ci { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.contract-row .ci .sub { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.provider-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid transparent;
  margin-bottom: 8px; cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.provider-row:hover { border-color: var(--accent); }
.provider-ic {
  width: var(--circle-md); height: var(--circle-md); border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 16px;
  background: var(--surface-3); color: var(--text-2); overflow: hidden;
}
.provider-ic img { width: 100%; height: 100%; object-fit: contain; }
.provider-name { font-weight: 700; font-size: 14px; }
.provider-sub { font-size: 12px; color: var(--text-3); }

/* Ekstre kartı — zeminsiz/çizgisiz çerçeve (kullanıcı kararı
   2026-07-05: background YOK); bakiye kartının altında 12px nefes
   (aralığın sahibi eski .card+.card komşu seçicisi değil, kartın
   kendisi). */
.stmt-card {
  border-radius: var(--card-r); padding: var(--card-pad);
  margin-top: 12px;
}
.stmt-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 14px;
}

/* Yükleme iskeleti + hata kartı — kart çerçevesi (iç pay + köşe) */
.wallet-skel { border-radius: var(--card-r); padding: var(--card-pad); }
.wallet-err  { border-radius: var(--card-r); padding: var(--card-pad); }

/* Ekstre — tablo değil, satır satır liste: sol zaman · orta açıklama ·
   sağda tutar+bakiye üst üste ("tür" gösterilmez, 2026-07-05) */
.stmt-list { display: flex; flex-direction: column; }
.stmt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
}
.stmt-row + .stmt-row { border-top: 1px solid var(--border); }
.stmt-time { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); width: 96px; }
.stmt-note {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stmt-amts { flex: 0 0 auto; text-align: right; }
.stmt-amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stmt-bal { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Özet çipleri — grid: dar ekranda bile 3'ü yan yana simetrik sığar
   (mobilde 2+1 sarması şikâyeti, 2026-07-06); auto-fit ile 3'ten
   fazla varsa eşit paylarla alt satıra iner. */
.sum-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.sum-chip {
  padding: 11px 12px; border-radius: var(--r-md); min-width: 0;
  background: var(--surface-2);
  backdrop-filter: var(--shellbar-blur); -webkit-backdrop-filter: var(--shellbar-blur);
}
.sum-chip b { display: block; font-size: 12.5px; }
.sum-chip .val { font-size: 16px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.sum-chip .sub { font-size: 11px; color: var(--text-3); }