/* ====================================================================
   hesap-bar.css — TELEFON HESAP SERIDI, 5 TASARIM (2026-10-13), ?hb=1..5 (assets/js/hesap-bar.js)
   Sorun: tek satir yatay kaydirmada 2 hesap ekrani dolduruyordu; kaydirilmiyor gibi gorunuyor,
   Add account / Share / My items - All items saga tasip hic gorunmuyordu.
     1 Secici + alt sayfa   2 Izgara karolar   3 Genisleyen cip   4 Liste satirlari   5 Kaydirmali + gosterge
   Hepsinde Share ve My/All her zaman gorunur. Yalniz telefonda (<=560px).
   ==================================================================== */
.hb-kay { display:contents; }
.hb-nokta { display:none; }
.hb-sayfa, .hb-perde { display:none; }

@media (max-width:560px) {
  body[class*="hb-"] .hesaplar { margin:0 0 10px; padding:0; overflow:visible; flex-wrap:wrap; }
  body[class*="hb-"] .hesaplar .bosluk { display:none; }
  body[class*="hb-"] .hesaplar .seg[data-sekme] { display:flex; }
  body[class*="hb-"] .hesaplar .seg[data-sekme] button { flex:1; justify-content:center; }
  body[class*="hb-"] .hesap span { min-width:0; }
  body[class*="hb-"] .hesap b, body[class*="hb-"] .hesap small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------------- 1 · SECICI + ALT SAYFA: secili hesap tam genislik, dokununca hesap listesi alttan */
  body.hb-1 .hesaplar { display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:8px; }
  body.hb-1 .hesap:not(.on), body.hb-1 .hesaplar > .hesap-ek { display:none; }
  body.hb-1 .hesap.on { grid-column:1; height:52px; padding:0 10px 0 8px; transform:none; background:var(--inci);
    box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); }
  body.hb-1 .hesap.on img { width:36px; height:36px; border-radius:10px; }
  body.hb-1 .hesap.on b { font-size:14px; } body.hb-1 .hesap.on small { font-size:12px; }
  body.hb-1 .hesap.on::after { content:attr(data-hb-say); margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:4px; height:30px; padding:0 30px 0 9px;
    border-radius:9px; font-size:11.5px; font-weight:800; color:var(--ink-2); background:var(--buz) no-repeat right 9px center / 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  body.hb-1 .shp-btn { grid-column:2; width:52px; height:52px; padding:0; justify-content:center; font-size:0; gap:0; border-radius:13px; }
  body.hb-1 .shp-btn svg { width:19px; height:19px; }
  body.hb-1 .seg[data-sekme] { grid-column:1 / -1; }

  /* ---------------- 2 · IZGARA: hesaplar 2 sutun karo, "Add account" kesik cizgili karo, Share + sekme altta */
  body.hb-2 .hesaplar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body.hb-2 .hesap { height:58px; padding:0 10px 0 8px; }
  body.hb-2 .hesap img { width:36px; height:36px; border-radius:10px; }
  body.hb-2 .hesaplar > .hesap-ek { width:auto; height:58px; display:flex; gap:7px; justify-content:center; background:transparent; box-shadow:none;
    border:1.5px dashed var(--cizgi-2); color:var(--ink-2); font-size:12.5px; font-weight:700; }
  body.hb-2 .hesaplar > .hesap-ek::after { content:"Add account"; }
  body.hb-2 .shp-btn { height:44px; justify-content:center; border-radius:12px; }
  body.hb-2 .seg[data-sekme] { grid-column:1 / -1; }

  /* ---------------- 3 · GENISLEYEN CIP: secili hesap acik (ad + deger), digerleri kare avatar; Share kare */
  body.hb-3 .hesaplar { display:flex; gap:8px; }
  body.hb-3 .hesap { flex:0 0 44px; min-width:0; padding:0 0 0 7px; overflow:hidden; transition:flex .38s cubic-bezier(.32,.72,0,1), box-shadow var(--gecis), background var(--gecis); }
  body.hb-3 .hesap span { opacity:0; transition:opacity .2s ease; }
  body.hb-3 .hesap.on { flex:1 1 0; padding-right:12px; }
  body.hb-3 .hesap.on span { opacity:1; transition-delay:.12s; }
  body.hb-3 .shp-btn { flex:0 0 44px; height:44px; padding:0; justify-content:center; font-size:0; gap:0; border-radius:13px; }
  body.hb-3 .shp-btn svg { width:18px; height:18px; }
  body.hb-3 .seg[data-sekme] { flex:1 0 100%; }

  /* ---------------- 4 · LISTE: hesaplar tam genislik satir (deger sagda), secili isaretli */
  body.hb-4 .hesaplar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; }
  body.hb-4 .hesap { grid-column:1 / -1; height:52px; padding:0 12px 0 8px; }
  body.hb-4 .hesap img { width:36px; height:36px; border-radius:10px; }
  body.hb-4 .hesap span { flex:1; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
  body.hb-4 .hesap b { font-size:14px; } body.hb-4 .hesap small { font-size:12px; font-weight:600; }
  body.hb-4 .hesap::after { content:""; flex:0 0 auto; width:20px; height:20px; border-radius:6px; box-shadow:inset 0 0 0 1.5px var(--cizgi-2); }
  body.hb-4 .hesap.on::after { box-shadow:none; background:var(--mavi) no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  body.hb-4 .hesaplar > .hesap-ek { grid-column:1 / -1; width:auto; height:42px; display:flex; gap:7px; justify-content:center; background:transparent; box-shadow:none;
    border:1.5px dashed var(--cizgi-2); color:var(--ink-2); font-size:12.5px; font-weight:700; }
  body.hb-4 .hesaplar > .hesap-ek::after { content:"Add account"; }
  body.hb-4 .seg[data-sekme] { order:10; grid-column:1; }
  body.hb-4 .shp-btn { order:11; grid-column:2; height:36px; align-self:center; }

  /* ---------------- 5 · KAYDIRMALI + GOSTERGE: kart %80 genislik (sonraki gorunur), mıknatisli, alt gosterge */
  body.hb-5 .hesaplar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  body.hb-5 .hb-kay { grid-column:1 / -1; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -12px; padding:0 12px 2px;
    scroll-padding:0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  body.hb-5 .hb-kay::-webkit-scrollbar { display:none; }
  body.hb-5 .hb-kay > .hesap { flex:0 0 80%; height:58px; scroll-snap-align:start; padding:0 12px 0 8px; }
  body.hb-5 .hb-kay > .hesap img { width:38px; height:38px; border-radius:10px; }
  body.hb-5 .hb-kay > .hesap b { font-size:14px; } body.hb-5 .hb-kay > .hesap small { font-size:12px; }
  body.hb-5 .hb-kay > .hesap-ek { flex:0 0 58px; height:58px; scroll-snap-align:start; }
  body.hb-5 .hb-nokta { grid-column:1 / -1; display:flex; justify-content:center; gap:5px; margin:-2px 0 2px; }
  body.hb-5 .hb-nokta i { width:12px; height:4px; border-radius:2px; background:var(--cizgi-2); transition:width .3s cubic-bezier(.32,.72,0,1), background-color .3s ease; }
  body.hb-5 .hb-nokta i.on { width:22px; background:var(--mavi); }
  body.hb-5 .seg[data-sekme] { order:10; grid-column:1; }
  body.hb-5 .shp-btn { order:11; grid-column:2; height:36px; align-self:center; }

  /* ---------------- 1'in alt sayfasi */
  .hb-perde { display:block; position:fixed; inset:0; z-index:140; background:rgba(15,30,60,.32); }
  .hb-sayfa { display:block; position:fixed; left:0; right:0; bottom:0; z-index:141; max-height:80vh; overflow-y:auto; padding:6px 16px calc(16px + env(safe-area-inset-bottom));
    background:var(--kd-yuzey, #fff); border-radius:20px 20px 0 0; box-shadow:0 -14px 44px -12px rgba(15,42,86,.4); }
  .hb-sayfa-bas { display:flex; align-items:center; justify-content:space-between; height:56px; }
  .hb-sayfa-bas b { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .hb-sayfa-bas button { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--inci); border:1px solid var(--cizgi); color:var(--ink-2); }
  .hb-sayfa-bas svg { width:17px; height:17px; }
  .hb-satir { display:flex; align-items:center; gap:11px; width:100%; height:60px; padding:0 12px 0 8px; margin-bottom:6px; border:0; border-radius:13px; text-align:left;
    background:var(--inci); box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06); }
  .hb-satir.on { background:var(--kd-basik, #FAFBFC); box-shadow:inset 0 2px 8px rgba(15,42,86,.14), inset 0 0 0 1px rgba(15,42,86,.09); }
  .hb-satir img { width:40px; height:40px; border-radius:11px; object-fit:cover; background:var(--buz); flex:0 0 auto; }
  .hb-satir span { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
  .hb-satir b { font-size:14.5px; font-weight:700; color:var(--ink); }
  .hb-satir small { font-size:12px; font-weight:600; color:var(--ink-3); }
  .hb-satir i { flex:0 0 auto; width:22px; height:22px; border-radius:7px; box-shadow:inset 0 0 0 1.5px var(--cizgi-2); }
  .hb-satir.on i { box-shadow:none; background:var(--mavi) no-repeat center / 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .hb-satir.ek { justify-content:center; height:48px; background:transparent; box-shadow:none; border:1.5px dashed var(--cizgi-2); color:var(--ink-2); font-size:13.5px; font-weight:700; gap:7px; }
  .hb-satir.ek svg { width:16px; height:16px; }
}
/* rotus: yazilar sola hizali; 2'de deger iki satira inebilir; 1'de sayi kisa */
@media (max-width:560px) {
  body[class*="hb-"] .hesap span { text-align:left; align-items:flex-start; }
  body.hb-4 .hesap span { align-items:center; }
  body.hb-2 .hesap b { font-size:13px; }
  body.hb-2 .hesap small { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:11px; line-height:1.25; }
  body.hb-1 .hesap.on::after { padding:0 28px 0 10px; }
}

/* ====================================================================
   3 VARSAYILAN (2026-10-13): en fazla 3 hesap. 3 hesapta "+" yok (her genislikte);
   telefonda secili cip genis (ad + deger), digerleri kare avatar; 3 hesapta da Share sigar.
   ==================================================================== */
.hesaplar[data-hb-n="3"] .hesap-ek { display:none !important; }
@media (max-width:560px) {
  body.hb-3 .hesaplar { flex-wrap:wrap; }
  body.hb-3 .hesap.on { min-width:0; }
  body.hb-3 .hesap.on img { width:32px; height:32px; }
  body.hb-3 .hesap.on b { font-size:13px; }
  body.hb-3 .hesap.on small { font-size:11px; }
  body.hb-3 .hesap:not(.on) img { width:32px; height:32px; }
  /* 3 hesapta cipler biraz daralir: secili ~200px, avatar 44, Share 44 */
  body.hb-3 .hesaplar[data-hb-n="3"] .hesap:not(.on) { flex-basis:44px; }
}
/* HESAP KALDIRMA (2026-10-13): kare cop kutusu (ilk hesapta yok), Undo seridi */
.hesap-sil { flex:0 0 auto; width:26px; height:26px; margin-left:2px; border-radius:7px; display:grid; place-items:center; color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--cizgi); }
.hesap-sil svg { width:13px; height:13px; }
.hesap-sil:active { transform:scale(.9); background:var(--buz); }
@media (max-width:560px) { body.hb-3 .hesap:not(.on) .hesap-sil { display:none; } body.hb-3 .hesap.on .hesap-sil { margin-left:auto; } }
.hesap-geri { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; margin:-2px 0 10px; padding:6px 6px 6px 12px; border-radius:12px;
  background:#0F172A; color:rgba(255,255,255,.8); font-size:12.5px; animation:hesapGeriGel .28s cubic-bezier(.2,.9,.3,1) both; }
.hesap-geri b { color:#fff; }
.hesap-geri button { flex:0 0 auto; height:30px; padding:0 12px; border-radius:9px; font-size:12.5px; font-weight:800; color:#0F172A; background:#fff; border:0; cursor:pointer; }
@keyframes hesapGeriGel { from { opacity:0; transform:translateY(-4px); } }
html[data-tema="koyu"] .hesap-geri { background:#E6EDF8; color:#334155; }
html[data-tema="koyu"] .hesap-geri b { color:#0F172A; }
html[data-tema="koyu"] .hesap-geri button { background:#0F172A; color:#fff; }

/* UNDO v2 (2026-10-13): siyah serit yerine sitenin acik kart dili; altta 5 sn'lik sure cizgisi (karemsi) */
.hesap-geri, .rw-geri-al { position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; min-height:46px; padding:6px 6px 6px 8px; border-radius:12px;
  background:var(--inci) !important; color:var(--ink-2) !important; font-size:12.5px; box-shadow:0 1px 2px rgba(15,42,86,.05), 0 6px 18px -8px rgba(15,42,86,.25), inset 0 0 0 1px var(--cizgi) !important;
  animation:geriGel .32s cubic-bezier(.2,.9,.3,1) both; }
.hesap-geri b, .rw-geri-al b { color:var(--ink) !important; font-weight:800; }
.hesap-geri .hg-ik { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-3); background:var(--buz); }
.hesap-geri .hg-ik svg { width:14px; height:14px; }
.hesap-geri .hg-y, .rw-geri-al > span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hesap-geri button, .rw-geri-al button { flex:0 0 auto; height:34px; padding:0 14px; border-radius:10px; border:0; cursor:pointer; font-size:13px; font-weight:800;
  color:var(--mavi-koyu) !important; background:var(--mavi-sis) !important; box-shadow:inset 0 0 0 1px var(--mavi-ln); }
.hesap-geri button:active, .rw-geri-al button:active { transform:scale(.96); }
.hesap-geri .hg-sure, .rw-geri-al::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--mavi); transform-origin:0 50%;
  animation:geriSure 5s linear forwards; }
@keyframes geriSure { to { transform:scaleX(0); } }
@keyframes geriGel { from { opacity:0; transform:translateY(-6px); } }
.rw-geri-al { margin-bottom:6px; padding-left:12px; }
/* telefon: secili cipte yazi copun altina girmesin -> yazi kisalir (...) */
@media (max-width:560px) { body.hb-3 .hesap.on > span { flex:1 1 auto; min-width:0; overflow:hidden; } body.hb-3 .hesap.on .hesap-sil { margin-left:4px; } }
/* COP HIZA (2026-10-13): cop kutusu cipin sag kenarina, avatarla ayni bosluk (7px) ve dikey ortada; yazi altina girmez */
.hesap:has(.hesap-sil) { padding-right:7px; gap:10px; }
.hesap:has(.hesap-sil) > span { flex:1 1 auto; min-width:0; }
.hesap .hesap-sil { align-self:center; width:30px; height:30px; margin:0 0 0 2px; border-radius:9px; background:var(--buz); box-shadow:none; color:var(--ink-3); }
.hesap .hesap-sil svg { width:14px; height:14px; }
@media (max-width:560px) { body.hb-3 .hesap.on:has(.hesap-sil) { padding-right:7px; } body.hb-3 .hesap.on .hesap-sil { margin-left:auto; } }
/* COP 32 (2026-10-13): cop kutusu avatarla ayni boy (32px) -> iki yanda ve ustte/altta ayni bosluk */
.hesap .hesap-sil { width:32px !important; height:32px !important; }

/* ====================================================================
   COP v3 (2026-10-13, kullanici: "tum cihazlara gore uygun degil"): cipin sag ucunda TAM YUKSEKLIK bolum,
   solunda ince ayirici; ayri kutucuk yok. Cip kenari ile ayni kose. Telefon / tablet / PC hep ayni.
   ==================================================================== */
.hesap:has(.hesap-sil) { padding-right:0 !important; gap:10px; }
.hesap:has(.hesap-sil) > span { flex:1 1 auto; min-width:0; }
.hesap .hesap-sil { align-self:stretch; flex:0 0 auto; width:38px !important; height:auto !important; margin:0 0 0 2px !important; padding:0;
  display:grid; place-items:center; border-radius:0 13px 13px 0 !important; background:transparent !important; box-shadow:inset 1px 0 0 var(--cizgi) !important;
  color:var(--ink-3); transition:color .2s ease, background-color .2s ease; }
.hesap .hesap-sil svg { width:15px; height:15px; }
.hesap .hesap-sil:active { background:var(--buz) !important; color:var(--ink); transform:none; }
@media (max-width:560px) { body.hb-3 .hesap.on .hesap-sil { margin-left:auto !important; } body.hb-3 .hesap.on:has(.hesap-sil) { padding-right:0 !important; } }
html[data-tema="koyu"] .hesap .hesap-sil { box-shadow:inset 1px 0 0 rgba(255,255,255,.07) !important; }
html[data-tema="koyu"] .hesap .hesap-sil:active { background:rgba(255,255,255,.05) !important; }
/* cop v3b: telefonda cip metin kurali (span: sola + yukari) cop kutusunu da etkiliyordu -> ikon tam ortada */
body .hesaplar .hesap .hesap-sil, body[class*="hb-"] .hesaplar .hesap .hesap-sil { display:grid !important; place-items:center !important; align-items:center !important;
  justify-items:center !important; text-align:center !important; opacity:1 !important; flex-direction:initial !important; }
/* cop v3c: metin kurali (> span flex:1) cop bolumunu de sikistiriyordu -> sabit 38px */
body .hesaplar .hesap > .hesap-sil { flex:0 0 38px !important; width:38px !important; min-width:38px !important; }