/* ====================================================================
   sell-duyarli.css — SELL TUM CIHAZLAR (2026-10-13, kullanici: "sell kismini
   tum cihazlara gore uygun yap tablet, telefon vb.") — index.php'de EN SON.
     laptop (981-1199) : sepet 300px
     tablet + telefon  : sepet ALTTA MAVI CUBUK (bosken yok); dokununca liste acilir
     telefon           : arac cubugu 2 satir, hesaplar yatay kayar
     her boyut         : dar kartta fiyat ile R$ alt alta (ust uste binmesin)
   ==================================================================== */

/* dar kart: fiyat + R$ alt alta */
.izgara .kart { container-type:inline-size; }
@container (max-width:152px) {
  .kart .alt { flex-direction:column; align-items:flex-start; gap:1px; }
  .kart .rbx { padding:0; }
  .kart .sol { width:100%; }
}

.sepet-kol { display:none; }

@media (min-width:981px) and (max-width:1199px) {
  .calisma { grid-template-columns:minmax(0,1fr) 300px; }
}

/* ------------------------------------------------ TABLET + TELEFON */
@media (max-width:980px) {
  body { padding-bottom:124px !important; }
  body.sepet-bos { padding-bottom:24px !important; }

  /* kapali: yalniz mavi cubuk */
  .sepet { left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); top:auto; height:auto; max-height:none; padding:0;
    border-radius:20px; border:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; overflow:visible;
    animation:sepetGel .38s cubic-bezier(.2,.9,.3,1.1) both; }
  @keyframes sepetGel { from { transform:translateY(130%); } }
  body.sepet-bos .sepet { display:none; }
  .sepet .sepet-ust, .sepet .sepet-liste { display:none; }
  body.sc-21 .sepet-alt, .sepet-alt { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"kol kol" "tut btn" "rbx btn";
    column-gap:14px; margin:0 !important; padding:8px 12px 12px !important; border-radius:18px;
    box-shadow:0 18px 40px -14px rgba(30,64,175,.75); }
  .sepet-alt .sepet-sat, .sepet-alt .alirsin, #sepet-ozet, #sepet-nadir { display:none !important; }
  .sepet-kol { grid-area:kol; display:flex; align-items:center; justify-content:space-between; height:30px; margin:0 -2px 4px; padding:0 2px;
    background:none; border:0; border-bottom:1px solid rgba(255,255,255,.2); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82);
    -webkit-tap-highlight-color:transparent; }
  .sepet-kol b { color:#fff; font-weight:800; }
  .sepet-kol svg { width:17px; height:17px; transition:transform .3s cubic-bezier(.3,1.2,.4,1); }
  body.sc-21 .sepet-tut, .sepet-tut { grid-area:tut; align-self:end; margin-top:4px; }
  body.sc-21 .sepet-tut b, .sepet-tut b { font-size:24px; }
  body.sc-21 .sepet-rbx, .sepet-rbx { grid-area:rbx; margin:0 !important; }
  .sepet-alt .sat-btn { grid-area:btn; align-self:center; width:auto; min-width:140px; height:50px; padding:0 18px; border-radius:13px; margin-top:4px; }
  .sepet .guven { display:none; }

  /* acik: liste gorunur, cam kart */
  body.sepet-acik .sepet { padding-top:2px; border:1px solid var(--kd-kenar, rgba(255,255,255,.85)); background:rgba(var(--kd-cam, 255,255,255), .96);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 -12px 44px -12px rgba(15,42,86,.4); }
  body.sepet-acik .sepet .sepet-ust { display:flex; }
  body.sepet-acik .sepet .sepet-liste { display:block; max-height:46vh; overflow-y:auto; animation:sepetListe .3s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sepetListe { from { opacity:0; transform:translateY(10px); } }
  body.sepet-acik.sc-21 .sepet-alt, body.sepet-acik .sepet-alt { margin:0 10px 10px !important; }
  body.sepet-acik .sepet-kol svg { transform:rotate(180deg); }
  body.sepet-acik::after { content:""; position:fixed; inset:0; z-index:55; background:rgba(15,30,60,.22); animation:sepetPerde .25s ease both; }
  @keyframes sepetPerde { from { opacity:0; } }

  /* izgara: tabletlerde 3-4 sutun, kart araligi */
  .izgara { gap:10px; }
}
@media (max-width:767px) and (min-width:561px) { .izgara { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }

/* ------------------------------------------------ TELEFON */
@media (max-width:560px) {
  .sol-kol { padding:12px 12px 10px !important; border-radius:18px; }
  /* hesaplar: tek satir, yatay kayar */
  .hesaplar { flex-wrap:nowrap; overflow-x:auto; margin:0 -12px 10px; padding:0 12px 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hesaplar::-webkit-scrollbar { display:none; }
  .hesaplar > * { flex:0 0 auto; }
  .hesaplar .bosluk { display:none; }
  /* arac: 1. satir arama + Filters + siralama (yalniz ikon), 2. satir tur sekmeleri tam genislik */
  .arac { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-bottom:10px; }
  .arac .ara { grid-row:1; grid-column:1; min-width:0; flex:none; }
  .arac .sh-filtre { grid-row:1; grid-column:2; }
  .arac [data-sira] { grid-row:1; grid-column:3; }
  .arac .seg[data-tur] { grid-row:2; grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arac .seg[data-tur] button { justify-content:center; padding:0 6px; }
  .arac .ara input { height:40px; }
  .arac .dugme { height:40px; padding:0 11px; font-size:0; gap:0; }
  .arac .dugme svg { width:17px; height:17px; }
  .arac .dugme .ok, .arac [data-sira] [data-etiket] { display:none; }
  .arac .dugme em { font-size:11px; margin-left:5px; }
  .arac .menu-ac { right:0; left:auto; max-width:calc(100vw - 40px); }
  .hizli { margin-bottom:10px; }
  .izgara { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; }
  .sepet-alt .sat-btn { min-width:126px; }
}
@media (prefers-reduced-motion: reduce) { .sepet, body.sepet-acik .sepet .sepet-liste, body.sepet-acik::after { animation:none !important; } }

/* sepet tasarimi 21 listeyi #secilenler (ID) ile grid yapiyor: kapaliyken ID secicisiyle gizle */
@media (max-width:980px) {
  html body:not(.sepet-acik) .sepet #secilenler { display:none !important; }
  html body.sepet-acik.sc-21 .sepet #secilenler { display:grid; }
}

/* ====================================================================
   MOBIL 3 (2026-10-13)
   ==================================================================== */
/* kart: fiyat + R$ yan yana (sag taraf bos kalmasin); yalniz cok darda alt alta */
@container (max-width:152px) {
  .kart .alt { flex-direction:row !important; align-items:flex-end !important; gap:6px !important; }
  .kart .sol { width:auto !important; }
  .kart .rbx { padding-bottom:2px !important; }
}
@container (max-width:124px) {
  .kart .alt { flex-direction:column !important; align-items:flex-start !important; gap:1px !important; }
}
@media (max-width:560px) {
  .kart .fiyat { font-size:15.5px; }
  .kart .rbx { font-size:10.5px; }
}

/* Filters icindeki Type (eski All / Guns / Knives) */
.sh-filtre-tur { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 6px 10px; }
.sh-filtre-tur button { justify-content:center; height:32px; }
.fi-kaydir { width:17px !important; height:17px !important; }

/* telefon arac cubugu: tur sekmesi kalkti -> tek satir: arama + Filters + siralama */
@media (max-width:560px) {
  .arac { grid-template-columns:minmax(0,1fr) auto auto; }
  .arac .sh-filtre .dugme { font-size:0; }
}

/* --------------------------------------------------- SEPET AC / KAPA v2
   kapali: mavi cubuk (ustunde "N items in your cart"); acik: beyaz sayfa, kol yazisi YUKARIDA
   (Sale cart basliginin yerinde, ok asagi), Clear sagda, liste, en altta AYNI BOYUTTA mavi kart. */
@media (max-width:980px) {
  body.sepet-acik .sepet { overflow:hidden; padding:0 !important; border-radius:20px; }
  body.sepet-acik.sc-21 .sepet-alt, body.sepet-acik .sepet-alt { margin:0 !important; border-radius:18px;
    grid-template-areas:"tut btn" "rbx btn"; padding:12px 12px 12px !important; }
  body.sepet-acik .sepet .sepet-ust { display:flex !important; align-items:center; gap:10px; height:52px; padding:0 14px 0 16px; border-bottom:1px solid var(--cizgi); }
  body.sepet-acik .sepet .sepet-ust > b { display:none; }
  .sepet-ust .sepet-kol { flex:1; height:52px; margin:0; padding:0; border:0; color:var(--ink-2); font-size:13.5px; }
  .sepet-ust .sepet-kol b { color:var(--ink); }
  .sepet-ust .sepet-kol svg { order:-1; margin-right:8px; color:var(--ink-3); transform:rotate(180deg); }
  .sepet-ust .sepet-kol { justify-content:flex-start; }
  body.sepet-acik .sepet .sepet-liste { max-height:min(46vh, 420px); }
  body.sepet-acik .sepet-kol svg { transform:rotate(180deg); }
}

/* MAVI KART AYNI BOY (2026-10-13, kullanici: "boyutu kuculmesin"): acikken kol yazisi yukari tasindi;
   yerini "You receive" satiri alir -> kart acik/kapali BIREBIR ayni boy; sayfa kenarligi yerine halka (genislik ayni) */
@media (max-width:980px) {
  body.sepet-acik .sepet { border:0 !important; box-shadow:0 0 0 1px var(--kd-halka, rgba(255,255,255,.85)), 0 -12px 44px -12px rgba(15,42,86,.4) !important; }
  body.sepet-acik.sc-21 .sepet-alt, body.sepet-acik .sepet-alt { grid-template-areas:"al al" "tut btn" "rbx btn" !important; padding:8px 12px 12px !important; }
  body.sepet-acik .sepet .sepet-alt .alirsin { display:flex !important; grid-area:al; align-items:center; height:30px; margin:0 -2px 4px; padding:0 2px;
    border-bottom:1px solid rgba(255,255,255,.2);   /* mavi panelde her temada beyaz (koyu --kd-kenar koyu cizgi yapiyordu, 2026-10-15) */ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.75); animation:sepetEtiket .35s ease both; }
  @keyframes sepetEtiket { from { opacity:0; transform:translateY(6px); } }
}

/* ====================================================================
   OPEN TRADES MOBIL (2026-10-13) — yalniz <=560px, kaydirmali kart (eski ?at=3; digerleri 2026-10-14 silindi); masaustu eski serit.
   ==================================================================== */
.at-p { display:none; }
@media (max-width:560px) {
  .at { margin:0 0 10px; }
  .at-k { position:relative; overflow:hidden; }
  .at-p { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--buz); }
  .at-p::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#2563EB,#60A5FA); transform-origin:left; transform:scaleX(var(--o,0)); }
  .at-liste::-webkit-scrollbar { display:none; }

  /* KAYDIRMALI KART: tek ince kart, coklu takasta yana kaydir (snap), bir sonraki ucu gorunur */
  .at-v3 .at-bas { display:none; }
  .at-v3 .at-liste { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .at-v3 .at-k { flex:0 0 100%; scroll-snap-align:start; height:58px; padding:0 10px 0 6px; }
  .at-v3 .at-liste:has(.at-k + .at-k) .at-k { flex-basis:calc(100% - 28px); }
  .at-v3 .at-g img { width:36px; height:36px; }
  .at-v3 .at-m b { font-size:13px; }
  .at-v3 .at-ok { width:28px; height:28px; }
  .at-v3 .at-p { display:block; }

}

/* ====================================================================
   SELL 4 (2026-10-13)
   ==================================================================== */
/* sepet ac/kapa v2: renk gecisi + kapanirken karartma solar; liste yalniz solar (kayma yok) */
.sepet-kol, .sepet-kol b, .sepet-kol svg { transition:color .35s ease, transform .35s cubic-bezier(.32,.72,0,1); }
.sepet-kol.sk-beyaz, .sepet-kol.sk-beyaz b, .sepet-kol.sk-beyaz svg { color:#fff !important; }
@media (max-width:980px) {
  .sepet { will-change:clip-path; }
  body.sepet-acik .sepet .sepet-liste { animation:sepetSol .3s ease both !important; }
  @keyframes sepetSol { from { opacity:0; } }
  body.sepet-kapaniyor::after { animation:sepetPerdeGit .42s ease forwards !important; }
  @keyframes sepetPerdeGit { to { opacity:0; } }
  body.sepet-acik .sepet .sepet-alt .alirsin { animation:none !important; }
}

/* kart hizasi: telefon/tablette izgaranin sag ic boslugu kaydirma cubugu icindi (orada cubuk yok) -> simetrik */
@media (max-width:980px) {
  .izgara-sar { margin:0 !important; padding:2px 0 10px !important; scrollbar-gutter:auto !important; }
}

/* Filters > Type: StarPETS gibi ikonlu kutular */
.sh-filtre-tur.ft { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 6px 12px; padding:0; background:none; }
.ft button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:78px; padding:6px 4px; border-radius:12px;
  background:var(--kd-basik, #F4F7FB); border:0; color:var(--ink-3); transition:background-color .2s ease, box-shadow .2s ease, color .2s ease; }
.ft .ft-g { position:relative; display:grid; place-items:center; height:32px; }
.ft .ft-g img { width:32px; height:32px; object-fit:contain; filter:grayscale(1) contrast(.9); opacity:.5; transition:filter .25s ease, opacity .25s ease, transform .25s ease; }
.ft .ft-cift img { width:28px; height:28px; } .ft .ft-cift img + img { margin-left:-12px; }
.ft .ft-cift { display:flex; }
.ft b { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ft em { font-style:normal; font-size:10.5px; font-weight:700; color:var(--ink-3); }
.ft button.on { background:var(--kd-yuzey, #fff); color:var(--ink); box-shadow:inset 0 2px 7px rgba(15,42,86,.12), inset 0 0 0 1px rgba(15,42,86,.08); }
.ft button.on .ft-g img { filter:none; opacity:1; transform:scale(1.06); }
.ft button.on em { color:var(--mavi); }
.sh-filtre-mob, .sh-filtre-goster { display:none; }

/* TELEFON: Filters TAM EKRAN (StarPETS gibi) */
@media (max-width:560px) {
  /* sol panelin cam efekti position:fixed'i hapsediyordu -> telefonda opak zemin */
  .sol-kol { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(var(--kd-cam, 255,255,255), .22) !important; }   /* .86 -> .22 (2026-10-15): arka plan esya duvari kartlarin arkasinda gorunsun (masaustu .72 + bulaniklik) */
  [data-ana-filtre].acik .sh-filtre-pen { position:fixed; inset:0; z-index:95; width:auto; max-width:none; max-height:none; margin:0; border-radius:0;
    display:flex; flex-direction:column; padding:0 16px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; background:var(--kd-yuzey, #fff);
    box-shadow:none; animation:ftTam .32s cubic-bezier(.32,.72,0,1) both; }
  @keyframes ftTam { from { transform:translateY(24px); opacity:0; } }
  body:has([data-ana-filtre].acik) { overflow:hidden; }
  .sh-filtre-mob { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; height:58px; margin:0 -16px 6px; padding:0 12px 0 16px;
    background:var(--kd-yuzey, #fff); border-bottom:1px solid var(--cizgi); }
  .sh-filtre-mob b { font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .sh-filtre-mob button { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--inci); border:1px solid var(--cizgi); color:var(--ink-2); }
  .sh-filtre-mob button svg { width:18px; height:18px; }
  [data-ana-filtre].acik .sh-filtre-bas { margin-top:10px; }
  .sh-filtre-tur.ft { margin:0 0 6px; gap:8px; }
  .ft button { height:88px; }
  .ft .ft-g img { width:38px; height:38px; }
  [data-ana-filtre].acik .sh-filtre-liste { max-height:none; }
  [data-ana-filtre].acik .sh-nr { height:48px; }
  [data-ana-filtre].acik .sh-filtre-sifirla { margin-top:auto; }
  .sh-filtre-goster { display:flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; height:52px; margin-top:10px; border-radius:14px; color:#fff; font-size:15px; font-weight:800;
    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); }
}
/* GOSTER YAZI (2026-10-13): "Show N items" koyu gorunuyordu */
.sh-filtre-goster, .sh-filtre-goster span { color:#fff !important; -webkit-text-fill-color:#fff; opacity:1 !important; }

/* ====================================================================
   SELL 5 (2026-10-13)
   ==================================================================== */
@media (max-width:980px) {
  /* kapanis: kol yazisi "You receive" satirina inerken o satir once solar (ust uste binme yok); acilista geri gelir */
  body.sepet-kapaniyor .sepet .sepet-alt .alirsin { animation:sepetAlGit .18s ease forwards !important; }
  @keyframes sepetAlGit { to { opacity:0; } }
  body.sepet-acik:not(.sepet-kapaniyor) .sepet .sepet-alt .alirsin { animation:sepetAlGel .3s ease .12s both !important; }
  @keyframes sepetAlGel { from { opacity:0; } }
  /* kartlarda pikselli kareler: blur(19px) parilti + seciliyken transform telefonda karo karo ciziliyordu.
     Ayni parilti filtresiz radial gradyanla; secili kart itilmez (ice basik golge yeter). */
  .kart figure::before { filter:none !important; inset:0 4% !important; opacity:.2 !important;
    background:radial-gradient(closest-side, var(--nadir,var(--common)), transparent) !important; }
  .kart.secili { transform:none !important; }
}
/* Filters: "Show N items" daha kalin */
@media (max-width:560px) {
  .sh-filtre-goster { height:60px !important; border-radius:15px !important; font-size:16.5px !important; margin-top:12px !important; }
}
/* acik takas kartlari: mavi cerceve + golge yok (telefon duzenleri dahil) */
.at-k, .at .at-k { border-color:transparent !important; }
@media (max-width:980px) { .at-k { box-shadow:0 1px 2px rgba(15,42,86,.05), 0 3px 10px rgba(15,42,86,.06) !important; } html[data-tema="koyu"] .at-k { box-shadow:none !important; } }

/* SAFARI-FLEX (2026-10-15, kullanici iPhone): .izgara-sar { flex:1; min-height:0 } yuksekligi belirsiz kolonda Safaride 0a
   cokuyordu -> panel ustte bos kutu, kartlar / "Connect Roblox" ekrani panelin DISINA tasiyordu (Chrome icerik kadar uzatir). */
@media (max-width:980px) {
  .sol-kol > .izgara-sar { flex:0 0 auto !important; min-height:auto !important; }
}

/* AD-GENIS (2026-10-15, kullanici: "yer var neden ... konmus"): ad R$ ile ayni satirda degil, o yuzden .alt'in tum genisligini kullanir */
.kart .alt { container-type:inline-size; }
.kart .ad { width:max-content; max-width:100cqw; }

/* HIZLI-V2 (2026-10-15, kullanici): Quick select = tek parca ikili; mavi hover YOK, secim/basma = iceri gomulme */
.hizli > button { height:28px; padding:0 13px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:-.005em;
  color:var(--ink-2); background:var(--kd-yuzey, #fff); border:1px solid var(--cizgi-2, var(--cizgi));
  box-shadow:0 1px 1px rgba(15,42,86,.05); transition:transform .1s ease, box-shadow .1s ease, background-color .1s ease; }
.hizli > button:hover { color:var(--ink-2); background:var(--kd-yuzey, #fff); border-color:var(--cizgi-2, var(--cizgi)); }
.hizli > button:active { transform:translateY(1px); background:var(--kd-basik, #F3F5F9); box-shadow:inset 0 1px 3px rgba(15,42,86,.16); }
.hizli > button[data-toplu="all"] { border-radius:8px 0 0 8px; }
.hizli > button[data-toplu="clear"] { border-radius:0 8px 8px 0; margin-left:-9px; }
.hizli > button[data-toplu]:focus-visible { outline:2px solid var(--mavi-ln); outline-offset:1px; position:relative; z-index:1; }
html[data-tema="koyu"] .hizli > button { box-shadow:none; }
html[data-tema="koyu"] .hizli > button:active { box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }