.fxg{
  /* Site renklerine uyumlu: koyu zemin + mavi vurgu */
  --fxg-card:#22232e;
  --fxg-thumb:#15161d;
  --fxg-line:rgba(255,255,255,.10);
  --fxg-text:#ffffff;
  --fxg-soft:#d9dbe6;
  --fxg-muted:#9a9cac;
  --fxg-accent:#3d7eea;
  --fxg-link:#8db0ff;
  --fxg-badge:#e5484d;
  --fxg-cols:4;
  --fxg-gap:12px;
  --fxg-radius:12px;
  --fxg-img:84px;
  font-family:inherit;
  color:var(--fxg-text);
  margin:32px 0;
  box-sizing:border-box;
  content-visibility:auto;contain-intrinsic-size:auto 300px;
}
/* JS bölümü doğru yere taşıyana kadar yer kaplamasın (kayma/CLS olmasın) */
.fxg:not(.fxg-ready){visibility:hidden;height:0;overflow:hidden;margin:0;padding:0}
.fxg *,.fxg *::before,.fxg *::after{box-sizing:border-box}
.fxg a{text-decoration:none;color:inherit}
.fxg h2,.fxg h3,.fxg p{margin:0;padding:0;border:0;text-transform:none;letter-spacing:normal}
.fxg img{max-width:100%;height:auto}

.fxg button{margin:0;box-shadow:none;text-transform:none;letter-spacing:normal}

/* Bölüm başlığı */
.fxg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fxg-title{font-size:24px;line-height:1.2;font-weight:700;color:var(--fxg-text)}
.fxg-all{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--fxg-line);border-radius:999px;font-size:14px;font-weight:600;color:var(--fxg-link);white-space:nowrap}
.fxg-all:hover{border-color:var(--fxg-accent);color:#fff}

/* Sekmeler: hepsi görünür, sığmazsa alt satıra geçer (kaydırma yok) */
.fxg-tabs{display:flex;flex-wrap:wrap;gap:8px}
.fxg-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;max-width:100%;padding:5px 16px 5px 6px;background:var(--fxg-card);border:1px solid var(--fxg-line);border-radius:999px;color:var(--fxg-soft);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.fxg-tab img{width:30px;height:30px!important;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--fxg-thumb)}
.fxg-tab:not(:has(img)){padding-left:16px}
.fxg-tab:hover{border-color:var(--fxg-accent);color:#fff}
.fxg-tab.is-active{background:var(--fxg-accent);border-color:var(--fxg-accent);color:#fff}

/* Seçili sekmenin içeriği */
.fxg-panel{display:none;margin-top:16px}
.fxg-panel.is-active{display:block}
.fxg-panel-foot{display:flex;justify-content:flex-end;margin-top:6px}
.fxg-panel-link{display:inline-flex;align-items:center;min-height:40px;font-size:15px;font-weight:600;color:var(--fxg-link)}
.fxg-panel-link:hover{color:#fff;text-decoration:underline}

/* Ürün kartları: kompakt yatay kart (küçük görsel solda, ad + fiyat sağda) */
.fxg-grid{display:grid;grid-template-columns:repeat(var(--fxg-cols),minmax(0,1fr));gap:var(--fxg-gap)}
.fxg-card{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:10px;background:var(--fxg-card);border:1px solid var(--fxg-line);border-radius:var(--fxg-radius);transition:border-color .15s,background .15s}
.fxg-card:hover{border-color:var(--fxg-accent);background:#272936}
.fxg-thumb{position:relative;flex:0 0 var(--fxg-img);width:var(--fxg-img);height:var(--fxg-img);border-radius:9px;overflow:hidden;background:var(--fxg-thumb)}
.fxg-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.fxg-badge{position:absolute;top:4px;left:4px;z-index:1;padding:1px 6px;border-radius:999px;background:var(--fxg-badge);color:#fff;font-size:11px;font-weight:700;line-height:1.4}
.fxg-info{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:1;min-width:0;padding:0}
.fxg-name{font-size:14px;line-height:1.3;font-weight:600;color:#eceef6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fxg-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.fxg-price b{font-size:16px;font-weight:800;color:#fff}
.fxg-price s{font-size:12px;color:var(--fxg-muted)}

/* Klavye ile gezenler için net odak çerçevesi */
.fxg a:focus-visible,.fxg button:focus-visible{outline:3px solid #9bbcff;outline-offset:2px}

/* Tablet: 3 sütun, 6 ürün */
@media (max-width:991px){
  .fxg{--fxg-cols:3}
  .fxg-grid .fxg-card:nth-child(n+7){display:none}
}

/* Küçük tablet: 2 sütun, 6 ürün */
@media (max-width:767px){
  .fxg{--fxg-cols:2}
}

/* Telefon: tek sütun, 4 ürün */
@media (max-width:575px){
  .fxg{--fxg-cols:1;--fxg-gap:8px;--fxg-img:72px;margin:24px 0}
  .fxg-grid .fxg-card:nth-child(n+5){display:none}
  .fxg-title{font-size:21px}
  .fxg-all{min-height:38px;padding:0 14px;font-size:13px}
  .fxg-tabs{gap:6px}
  .fxg-tab{min-height:40px;font-size:13px;padding-right:13px}
  .fxg-panel-link{font-size:14px;min-height:36px}
}

@media (prefers-reduced-motion:reduce){
  .fxg-card,.fxg-tab{transition:none}
}