/* ============================================================
   YATAY KART (LİSTE GÖRÜNÜMÜ) — <x-product-row>  (görev 26a2fbe3)

   Liste sayfalarında ızgara/liste geçişi. Satır: 80px görsel · 1fr bilgi ·
   236px türe özel orta alan · 140px fiyat · 244px eylem; gap 16; padding
   12 16 12 12; r14; hover zemin #252632 + çerçeve #4E4F5C.
   "us" öneki yalnız bu bileşene ve geçiş anahtarına aittir.
   Handoff: tasarim-uygulama/handoff_yatay_kart (24.09.2026).
   ============================================================ */

body{
  --usKart:#20212B;
  --usKartHover:#252632;
  --usZemin2:#111117;
  --usZemin3:#272834;
  --usZemin4:#1C1D26;
  --usCizgi:#333444;
  --usCizgiKuvvetli:#4E4F5C;
  --usBaslik:#EDEEF2;
  --usInk:#C8C9D8;
  --usSoluk:#ABACB5;
  --usSessiz:#8B8C99;
  --usAccent:#80F1B1;
  --usAccentInk:#181820;
  --usAccentTint:rgba(128,241,177,.10);
  --usAccentLine:rgba(128,241,177,.30);
  --usAccentTint2:rgba(128,241,177,.06);
  --usAccentLine2:rgba(128,241,177,.24);
  --usAltin:#E8B24C;
  --usAltinLine:rgba(232,178,76,.34);
  --usAltinTint:rgba(232,178,76,.12);
  --usAmber:#FFBE48;
  --usAmberInk:#1A1405;
  --usAmberTint:rgba(255,190,72,.12);
  --usAmberLine:rgba(255,190,72,.38);
  --usAmberMetin:#FFBE48;
  --usMor:#343891;
  --usMorHover:#3F44A8;
  --usMorCizgi:#484CA8;
  --usMorTint:rgba(52,56,145,.30);
  --usMorLine:rgba(52,56,145,.70);
  --usMorMetin:#9FA3F0;
  --usKirmizi:#F0908A;
  --usKirmiziLine:rgba(224,85,63,.38);
  --usKirmiziTint:rgba(224,85,63,.10);
  --usVitrin:#E8C268;
  --usGolge:0 18px 40px rgba(0,0,0,.6);
  --usRozetZemin:rgba(24,24,32,.78);
}
body.light{
  --usKart:#FFFFFF;
  --usKartHover:#FAF9F5;
  --usZemin2:#FAF9F5;
  --usZemin3:#F0EEE6;
  --usZemin4:#F5F4EE;
  --usCizgi:#E3E1D9;
  --usCizgiKuvvetli:#C7C5BC;
  --usBaslik:#1F1E1D;
  --usInk:#1F1E1D;
  --usSoluk:#6B6A65;
  --usSessiz:#5F5E58;
  --usAccent:#137E4C;
  --usAccentInk:#FFFFFF;
  --usAccentTint:rgba(19,126,76,.08);
  --usAccentLine:rgba(19,126,76,.45);
  --usAccentTint2:rgba(19,126,76,.05);
  --usAccentLine2:rgba(19,126,76,.30);
  --usAltin:#8A5D0A;
  --usAltinLine:rgba(138,93,10,.40);
  --usAltinTint:rgba(138,93,10,.08);
  --usAmber:#C98E2A;
  --usAmberInk:#FFFFFF;
  --usAmberTint:rgba(201,142,42,.10);
  --usAmberLine:rgba(201,142,42,.40);
  --usAmberMetin:#7A5F0E;
  --usMor:#343891;
  --usMorHover:#3F44A8;
  --usMorCizgi:#484CA8;
  --usMorTint:rgba(52,56,145,.10);
  --usMorLine:rgba(52,56,145,.40);
  --usMorMetin:#343891;
  --usKirmizi:#B3402C;
  --usKirmiziLine:rgba(179,64,44,.40);
  --usKirmiziTint:rgba(179,64,44,.08);
  --usVitrin:#8A5D0A;
  --usGolge:0 18px 40px rgba(31,30,29,.18);
}

/* ── liste modu kabı: Bootstrap .row sütunlarını tek sütuna düşürür ── */
.usListeModu{display:flex;flex-direction:column;gap:14px;--bs-gutter-x:0;--bs-gutter-y:0;margin:0}
.usListeModu > .col{width:100%;max-width:none;flex:none;padding:0}
.usListeModu > .customAlert,.usListeModu > .alertMessage{width:100%}

/* ── satır kabuğu ─────────────────────────────────────────── */
.usSatir{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) 236px 140px 244px;gap:16px;align-items:center;
  padding:12px 16px 12px 12px;background:var(--usKart);border:1px solid var(--usCizgi);border-radius:14px;
  color:var(--usInk);font-family:inherit;transition:background .16s,border-color .16s}
.usSatir:hover{background:var(--usKartHover);border-color:var(--usCizgiKuvvetli)}
/* Sol 3px şerit: nadirlik (skin, inline style) ya da amber (Açık Teklif) */
.usSatir.usKenarAmber{box-shadow:inset 3px 0 0 var(--usAmber)}
.usSatir.usKapali{opacity:.72}
/* Vitrin: dikey kartın dönen sarı çerçevesinin sakin karşılığı — altın çerçeve */
.usSatir.usVitrin{border-color:var(--usAltinLine)}
.usSatir a{text-decoration:none}
.usSatir a:not(.usBtn){color:inherit} /* NOT: (0,2,1) ozgullukte; renkli baglantilar (.usAltBaslik, .usSatici) bunu yenmek icin .usSatir a.… ile yazilir */

/* ── 1 · görsel 80×80 ─────────────────────────────────────── */
.usGorsel{position:relative;width:80px;height:80px;border-radius:11px;background:var(--usZemin2);border:1px solid var(--usCizgi);
  display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;flex:none}
.usGorsel img{display:block}
.usGorselKapak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.usGorselSkin img{width:92%;height:92%;object-fit:contain}
.usGorselIkon img{width:64%;height:64%;object-fit:contain}
/* Karakter ikonu mockup'ta %72, item ikonu %64 */
.us-ilan.usKarakterSatirKart .usGorselIkon img{width:72%;height:72%}
.usGorselSayi{position:absolute;left:5px;top:5px;height:20px;padding:0 7px;display:flex;align-items:center;border-radius:999px;
  background:rgba(24,24,32,.82);border:1px solid #4E4F5C;font-size:10.5px;font-weight:800;color:#EDEEF2}
.usGoz{position:absolute;right:5px;bottom:5px;width:22px;height:22px;border-radius:999px;background:var(--usRozetZemin);border:1px solid #4E4F5C;
  display:flex;align-items:center;justify-content:center;color:#C8C9D8}
.usGoz svg{display:block}

/* ── 2 · bilgi ────────────────────────────────────────────── */
.usBilgi{min-width:0;display:flex;flex-direction:column;gap:5px}
.usPiller{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.usPil{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap;background:var(--usZemin3);border:1px solid var(--usCizgiKuvvetli);color:var(--usSoluk)}
.usPil svg{display:block;flex:none}
.usPil-accent{background:var(--usAccentTint);border-color:var(--usAccentLine);color:var(--usAccent)}
.usPil-amber{background:var(--usAmberTint);border-color:var(--usAmberLine);color:var(--usAmberMetin)}
.usPil-mor{background:var(--usMorTint);border-color:var(--usMorLine);color:var(--usMorMetin)}
.usPil-altin{background:rgba(232,194,104,.12);border-color:rgba(232,194,104,.38);color:var(--usVitrin)}
body.light .usPil-altin{background:rgba(138,93,10,.08);border-color:rgba(138,93,10,.40)}
.usBaslik{display:block;min-width:0;cursor:pointer}
.usBaslik h2{margin:0;font-size:14px;font-weight:700;line-height:1.3;color:var(--usBaslik);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usBaslik:hover h2{color:var(--usAccent)}
.usAltSatir{display:flex;align-items:center;gap:10px;min-width:0}
.usSatir a.usAltBaslik{flex:none;font-size:11.5px;color:var(--usAccent);white-space:nowrap}
.usAyrac{flex:none;color:var(--usCizgiKuvvetli)}
.usSatir a.usSatici{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--usSoluk)}
.usSaticiNokta{flex:none;width:7px;height:7px;border-radius:50%;background:var(--usSessiz)}
.usSaticiNokta.online{background:var(--usAccent)}
.usSaticiAd{font-weight:700;color:var(--usInk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usSatici:hover .usSaticiAd{color:var(--usAccent)}
.usSaticiSeviye{flex:none;color:var(--usSessiz);white-space:nowrap}

/* ── 3 · orta alan ────────────────────────────────────────── */
.usOrta{min-width:0;display:flex;flex-direction:column;gap:6px;position:relative}
.usEtiketK{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--usSessiz)}
.usNot{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--usSoluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usNot b{color:var(--usInk);font-weight:700;font-variant-numeric:tabular-nums}
.usNot svg{flex:none;display:block}
.usNotSoluk{color:var(--usSessiz)}

/* adet seçici + toplam */
.usAdetSatir{display:flex;align-items:center;gap:8px;min-width:0}
.usAdetKolon{flex:none;display:flex;flex-direction:column;gap:3px}
.usAdet{flex:none;display:flex;align-items:center;height:36px;border-radius:10px;border:1px solid var(--usCizgi);background:var(--usZemin2);overflow:hidden;transition:border-color .16s,box-shadow .16s}
.usAdet.hata{border-color:var(--usKirmiziLine);box-shadow:0 0 0 3px var(--usKirmiziTint)}
.usAdetEksi,.usAdetArti{width:30px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  font:inherit;font-size:15px;color:var(--usSoluk);cursor:pointer}
.usAdetEksi:hover,.usAdetArti:hover{background:var(--usZemin3);color:var(--usInk)}
.usAdetGirdi{width:50px;height:34px;border:0;background:transparent;text-align:center;font:inherit;font-size:13px;font-weight:700;color:var(--usInk);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;outline:0;padding:0}
.usAdetGirdi::-webkit-outer-spin-button,.usAdetGirdi::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.usAdetNot{font-size:10.5px;color:var(--usSessiz);white-space:nowrap}
.usAdetNot.hata{color:var(--usKirmizi);font-weight:700}
.usAdetNot.al{color:var(--usAccent);font-weight:700}
.usAdetNot.sat{color:var(--usAltin);font-weight:700}
.usToplam{visibility:hidden;flex:1;min-width:0;height:36px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 9px;border-radius:8px;
  background:var(--usAccentTint2);border:1px solid var(--usAccentLine2)}
.usToplam.acik{visibility:visible}
.usToplam span{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--usSoluk);white-space:nowrap}
.usToplam b{font-size:13px;font-weight:800;color:var(--usAccent);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* GB toplamları (yalnız adet > adım iken görünür) */
.usGbToplamlar{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;visibility:hidden}
.usGbToplamlar.acik,.usGbToplamlar.duzenleniyor{visibility:visible}
.usGbToplam{display:flex;align-items:center;gap:6px;height:28px;position:relative}
.usGbToplam b{flex:1;min-width:0;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.usGbToplam b.al,.usFiyatCift b.al{color:var(--usAccent)}
.usGbToplam b.sat,.usFiyatCift b.sat{color:var(--usAltin)}
.usKalem{flex:none;width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--usKart);
  border:1px solid var(--usAccentLine);color:var(--usAccent);cursor:pointer;padding:0}
.usKalem.sat{border-color:var(--usAltinLine);color:var(--usAltin)}
.usKalem:hover{background:var(--usZemin3)}
.usKalem svg{display:block}
/* yerinde tutar düzenleyici */
.usDuzenleyici{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:28px;border-radius:8px;background:var(--usZemin2);
  border:1px solid var(--usAccentLine);box-shadow:0 0 0 3px var(--usAccentTint)}
.usDuzenleyici.sat{border-color:var(--usAltinLine);box-shadow:0 0 0 3px var(--usAltinTint)}
.usDuzenleyici.hata{border-color:var(--usKirmiziLine)}
.usDuzenleyici input{width:100%;min-width:0;height:100%;padding:0 28px 0 6px;background:transparent;border:0;outline:0;font:inherit;font-size:13px;font-weight:800;
  color:var(--usAccent);text-align:right;font-variant-numeric:tabular-nums}
.usDuzenleyici.sat input{color:var(--usAltin)}
.usDuzenleyiciOk{position:absolute;right:2px;top:2px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:0;
  background:var(--usAccent);color:var(--usAccentInk);cursor:pointer;padding:0}
.usDuzenleyici.sat .usDuzenleyiciOk{background:var(--usAltin);color:#1A1405}
.usDuzenleyiciOk svg{display:block}

/* skin: float + sticker */
.usFloatBas{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.usFloatBas b{font-size:12px;font-weight:800;color:var(--usInk);font-variant-numeric:tabular-nums;white-space:nowrap}
.usFloatBas b span{font-weight:600;color:var(--usSessiz)}
.usFloatBar{position:relative;height:6px;border-radius:999px;display:flex;overflow:visible}
.usFloatBar i{display:block;height:100%}
.usFloatBar i:first-child{border-radius:999px 0 0 999px}
.usFloatBar i:last-of-type{border-radius:0 999px 999px 0}
.usFloatBar .fn{width:7%;background:#4CAF50}
.usFloatBar .mw{width:8%;background:#8BC34A}
.usFloatBar .ft{width:23%;background:#E8B24C}
.usFloatBar .ww{width:7%;background:#E08A3F}
.usFloatBar .bs{width:55%;background:#C4442F}
.usFloatOk{position:absolute;top:-3px;width:3px;height:12px;border-radius:2px;background:#FFFFFF;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.usStickerlar{display:flex;align-items:center;gap:4px}
.usSticker{position:relative;width:24px;height:24px;border-radius:5px;background:var(--usZemin4);border:1px solid var(--usCizgi);display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;transform-origin:50% 100%;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.usSticker img{width:100%;height:100%;object-fit:contain;display:block}
.usSticker:hover,.usSticker:focus-visible{transform:scale(1.8);z-index:20;border-color:var(--usCizgiKuvvetli);box-shadow:0 8px 22px rgba(0,0,0,.55);outline:0}
.usStickerSayi{font-size:10.5px;color:var(--usSessiz);margin-left:4px;white-space:nowrap}

/* karakter: dikey karttaki üç satır */
.usKarakter{display:flex;flex-direction:column;gap:2px}
.usKarakterSatir{display:flex;align-items:center;justify-content:space-between;gap:10px;height:20px;font-size:12.5px;font-weight:700;color:var(--usInk);font-variant-numeric:tabular-nums;white-space:nowrap}
.usKarakterSatir span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.usKarakterBar{display:flex;align-items:center;gap:8px;height:20px}
.usKarakterBar i{flex:1;height:5px;border-radius:999px;background:var(--usZemin3);overflow:hidden;display:block}
.usKarakterBar i b{display:block;height:100%;border-radius:999px;background:var(--usAccent)}
.usKarakterBar span{flex:none;font-size:12.5px;font-weight:700;color:var(--usInk);font-variant-numeric:tabular-nums}

/* ilan: çoklu item şeridi + paket */
/* Şerit static: paketin konum kabı orta sütun (.usOrta) olsun, sütunun dikey ortasına otursun. */
.usItemSerit{position:static;display:flex;gap:6px;align-items:center}
.usSeritIkon{flex:none;width:40px;height:40px;border-radius:9px;background:var(--usZemin2);border:1px solid var(--usCizgi);display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.usSeritIkon img{width:70%;height:70%;object-fit:contain;display:block}
.usSeritIkon:hover,.usSeritIkon:focus-visible{border-color:var(--usAccentLine);outline:0}
.usSeritFazla{flex:none;width:40px;height:40px;border-radius:9px;background:var(--usZemin3);border:1px solid var(--usCizgiKuvvetli);display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:12px;font-weight:800;color:var(--usBaslik);cursor:pointer;padding:0}
.usSeritFazla:hover,.usSeritFazla[aria-expanded="true"]{border-color:var(--usAccent)}
/* Kalan itemler: kartın üstünde, dikey ortalı, sola doğru açılan şerit; sağ kenar "+N"in sağına hizalı */
/* Handoff prototip: right 2px, top 50%, zemin #1C1D26, çerçeve #4E4F5C, r12, padding 10 12, gap 10,
   gölge 0 16 36 rgba(0,0,0,.55), giriş: 6px sağdan + scale .98, ikonlar 18 ms arayla (JS). */
.usSeritPaket{position:absolute;right:2px;top:50%;z-index:60;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:var(--usZemin4);border:1px solid var(--usCizgiKuvvetli);box-shadow:0 16px 36px rgba(0,0,0,.55);white-space:nowrap;
  opacity:0;pointer-events:none;transform:translateY(-50%) translateX(6px) scale(.98);transform-origin:100% 50%;
  transition:opacity .18s ease-out,transform .22s cubic-bezier(.2,.8,.2,1)}
body.light .usSeritPaket{box-shadow:0 16px 36px rgba(31,30,29,.18)}
.usSeritPaket.acik{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
.usSeritPaketIkonlar{display:flex;gap:6px;align-items:center}
.usSeritPaket .usSeritIkon{opacity:0;transform:translateX(4px);transition:opacity .16s ease-out,transform .16s ease-out}
.usSeritPaket.acik .usSeritIkon{opacity:1;transform:none}
/* Etiket iki satır: "+N" 15/800 üstte, "İTEM" 9.5/800 altta; solda ayraç çizgisi */
.usSeritPaketEtiket{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-left:10px;border-left:1px solid var(--usCizgi)}
.usSeritPaketEtiket b{font-size:15px;font-weight:800;color:var(--usBaslik);line-height:1.1}
.usSeritPaketEtiket small{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--usSessiz);line-height:1.1}

/* Açık Teklif sayacı */
.usSayacKutu{align-self:flex-start;display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:8px;
  background:rgba(255,190,72,.08);border:1px solid rgba(255,190,72,.30);color:var(--usAmberMetin);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
body.light .usSayacKutu{background:rgba(201,142,42,.08);border-color:rgba(201,142,42,.30)}
.usSayacKutu svg{flex:none;display:block}
.usSayacKutu.yok{font-size:11.5px;font-weight:700}
.usSayacKutu.son{background:var(--usKirmiziTint);border-color:var(--usKirmiziLine);color:var(--usKirmizi)}
.usSayacKutu.usSayacSatir{height:auto;padding:0;background:transparent;border:0;font-size:11.5px}

/* ── 4 · fiyat ────────────────────────────────────────────── */
.usFiyat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.usEskiFiyat{font-size:11.5px;color:var(--usSessiz);text-decoration:line-through;font-variant-numeric:tabular-nums;white-space:nowrap}
.usFiyatAna{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--usAccent);font-variant-numeric:tabular-nums;white-space:nowrap}
.usFiyatAna.amber{color:var(--usAmberMetin)}
.usFiyatNot{font-size:11px;color:var(--usSessiz);white-space:nowrap}
.usFiyatCift{display:flex;align-items:center;gap:6px}
.usFiyatCift b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 5 · eylem ────────────────────────────────────────────── */
.usEylem{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:7px}
.usBtn{flex:1 1 0;min-width:0;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border-radius:10px;
  border:1px solid transparent;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:filter .16s,background .16s,border-color .16s}
.usBtn svg{flex:none;display:block}
.usBtnGenis{flex:none;width:150px}
.usBtnAna{background:var(--usAccent);border-color:var(--usAccent);color:var(--usAccentInk)}
.usBtnAna:hover{filter:brightness(1.08)}
.usBtnAmber{background:var(--usAmber);border-color:var(--usAmber);color:var(--usAmberInk)}
.usBtnAmber:hover{filter:brightness(1.08)}
.usBtnMor{background:var(--usMor);border-color:var(--usMorCizgi);color:#FFFFFF}
.usBtnMor:hover{background:var(--usMorHover)}
.usBtnAltin{background:var(--usKart);border-color:var(--usAltin);color:var(--usAltin)}
.usBtnAltin:hover{background:var(--usAltinTint)}
.usBtnGhost{background:var(--usKart);border-color:var(--usCizgiKuvvetli);color:var(--usInk)}
.usBtnGhost:hover{background:var(--usZemin3);border-color:var(--usAccent)}
.usBtnKapali{background:var(--usZemin4);border-color:var(--usCizgi);color:var(--usSessiz);cursor:not-allowed}
.usBtn:disabled{cursor:not-allowed}
/* ikon düğmeleri ana düğmenin SOLUNDA (order:-1) */
.usIkon,.usIkonZil{order:-1;flex:none}
.usIkon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--usCizgi);background:var(--usKart);color:var(--usSoluk);
  font-size:14px;cursor:pointer;padding:0;transition:background .16s,border-color .16s,color .16s}
.usIkon:hover{background:var(--usZemin3);border-color:var(--usAccent);color:var(--usAccent)}
.usIkon.usFav.aktif{color:var(--usKirmizi)}
.usIkon.usFav.misafir{color:var(--usSessiz)}
/* zil: mevcut x-ui.product-notify-button bileşeni; düğmesi satır diline çekilir, paneli düğmenin altına açılır */
.usIkonZil{position:relative}
.usIkonZil .productNotifyWrapper.usZil{position:relative;top:auto}
.usIkonZil .productNotifyButton{width:36px;height:36px;border-radius:10px;background:var(--usKart);backdrop-filter:none;box-shadow:none;border:1px solid var(--usCizgi);color:var(--usSoluk);font-size:14px;position:relative;top:auto;right:auto}
.usIkonZil .productNotifyButton:hover{background:var(--usZemin3);border-color:var(--usAccent);color:var(--usAccent);opacity:1}
.usIkonZil .productNotifyPanel{width:230px;bottom:auto;top:calc(100% + 8px);right:0;margin:0;z-index:70;background:var(--usKart);backdrop-filter:none;border-color:var(--usCizgiKuvvetli);box-shadow:var(--usGolge);border-radius:12px}

/* item stat kartı balonu (hover): mevcut .oyx-item-card burada çizilir */
.usItemKart{position:fixed;z-index:80;width:245px;height:306px;overflow:hidden;border-radius:20px;background:#101426;border:1px solid #333444;box-shadow:var(--usGolge);pointer-events:none}
.usItemKart .productCardItemCard,.usItemKart .oyx-item-card{width:100%;height:100%}
.usItemKart img{max-width:100%}

/* ── ızgara / liste anahtarı (üst bar) ───────────────────── */
.usGorunum{flex:none;display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--usZemin4);border:1px solid var(--usCizgi)}
.usGorunumSec{height:30px;padding:0 11px;display:flex;align-items:center;gap:6px;border-radius:7px;border:0;background:transparent;color:var(--usSessiz);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .14s,color .14s}
.usGorunumSec svg{display:block;flex:none}
.usGorunumSec:hover{color:var(--usInk)}
.usGorunumSec.aktif{background:var(--usAccent);color:var(--usAccentInk);font-weight:800}

/* ── mobil (≤767): liste görünümü YALNIZ masaüstünde (Özgür 25.09). Anahtar gizli; mobil UA sunucuda
   hep ızgara alır, dar masaüstü penceresi JS ile ızgaraya döner. Aşağıdaki tek sütun satır kuralları
   yalnız yedek (JS kapalı / geçiş anına kadar) ───────────────── */
@media (max-width:767.98px){
  .usGorunum{display:none}
  /* 1. sütun auto: görsel 64px, alt satırdaki fiyat sığdığı kadar (sabit 64px fiyatı kesiyordu) */
  .usSatir{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"gorsel bilgi" "orta orta" "fiyat eylem";gap:10px 12px;padding:12px;align-items:start}
  .usGorsel{grid-area:gorsel;width:64px;height:64px;border-radius:9px}
  .usBilgi{grid-area:bilgi}
  .usBaslik h2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  .usOrta{grid-area:orta}
  .usOrta:empty{display:none}
  .usFiyat{grid-area:fiyat;align-items:flex-start;justify-content:center;align-self:center}
  .usEylem{grid-area:eylem;justify-content:flex-end}
  .usBtn{height:44px;flex:1 1 auto}
  .usBtnGenis{width:auto;flex:1 1 auto}
  .usIkon,.usIkonZil .productNotifyButton{width:44px;height:44px}
  .usAdetEksi,.usAdetArti{width:40px;height:40px}
  .usAdet{height:40px}
  .usAdetGirdi{width:40px;height:38px}
  .usToplam{height:40px}
  .usAltBaslik{white-space:normal}
  .usSeritPaket{right:auto;left:0;top:calc(100% + 8px);transform:none;flex-wrap:wrap;max-width:100%;white-space:normal}
  .usSeritPaketIkonlar{flex-wrap:wrap}
  .usSeritPaket.acik{transform:none}
  .usItemKart{width:220px;height:275px}
  .usListeModu{gap:10px}
}
@media (min-width:768px) and (max-width:1199.98px){
  .usSatir{grid-template-columns:72px minmax(0,1fr) 200px 120px 200px;gap:12px}
  .usGorsel{width:72px;height:72px}
  .usBtnGenis{width:130px}
}

/* favori durumu: favoriteAction() dugmenin icini fa-heart-broken ile degistirir; renk ikon sinifindan gelir */
.usFav .fa-heart-broken,.usFav .fas.fa-heart-broken{color:var(--usKirmizi)}

/* ── ızgara ↔ liste geçişi: yeni kartlar gelene kadar kap soluk + yükleniyor ── */
.categoryItem.usGeciyor{position:relative;opacity:.45;pointer-events:none;transition:opacity .16s}
.categoryItem.usGeciyor::after{content:"";position:absolute;left:50%;top:96px;width:30px;height:30px;margin-left:-15px;border-radius:50%;
  border:3px solid var(--usCizgiKuvvetli);border-top-color:var(--usAccent);animation:usDon .7s linear infinite}
@keyframes usDon{to{transform:rotate(360deg)}}