/* ==========================================================================
   PUAN MARKETİ v3 — referans (bonussoft12.com/market) ölçüleri, marka renkleri.
   Tokenlar nx-top-r.css :root'ta (--rs-*). Önek .mr-
   ========================================================================== */
.mr{max-width:1310px; margin:0 auto; font-family:var(--rs-f); color:#fff; font-weight:700}
.mr *{box-sizing:border-box}
:where(.mr, .mr-modal) a{color:inherit; text-decoration:none}
:where(.mr, .mr-modal) button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
.mr :focus-visible, .mr-modal :focus-visible{outline:2px solid var(--rs-vurgu); outline-offset:2px}
.mr img, .mr-modal img{display:block}

/* ---------- başlık (ref .lfb__head) ---------- */
.mr-bas{display:flex; align-items:center; gap:12px}
.mr-bas-i{width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(245,196,81,.12); color:var(--rs-vurgu); font-size:17px}
.mr-bas-tx{flex:1; min-width:0}
.mr-bas-tx h1{margin:0; font-size:17.2px; font-weight:800; line-height:21px; color:rgba(255,255,255,.95)}
.mr-bas-tx p{margin:3px 0 0; font-size:12px; font-weight:700; line-height:16px; color:rgba(255,255,255,.5)}
.mr-bakiye{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 6px; border-radius:11px; background:var(--rs-panel); border:1px solid var(--rs-cizgi)}
.mr-bakiye img{width:26px; height:26px; border-radius:50%; object-fit:cover}
.mr-bakiye span{display:flex; flex-direction:column; line-height:1.1}
.mr-bakiye small{font-size:10px; font-weight:600; color:rgba(255,255,255,.5)}
.mr-bakiye b{font-size:13px; color:var(--rs-vurgu); font-variant-numeric:tabular-nums}

/* ---------- araç çubuğu (ref .lfb__bar) ---------- */
.mr-cubuk{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px}
.mr-sekmeler{position:relative; display:flex; gap:2px; padding:4px; border-radius:12px; background:var(--rs-panel); border:1px solid var(--rs-cizgi)}
.mr-sekme-hap{position:absolute; left:4px; top:4px; bottom:4px; width:0; border-radius:9px; background:var(--rs-vurgu); box-shadow:0 2px 10px rgba(245,196,81,.28); transition:transform .25s cubic-bezier(.4,0,.2,1), width .25s}
.mr-sekme{position:relative; z-index:1; display:flex; align-items:center; gap:6px; height:33px; padding:7px 12px!important; border-radius:9px; font-size:12px!important; font-weight:600!important; color:rgba(255,255,255,.55)!important; white-space:nowrap; transition:color .2s}
.mr-sekme b{font-size:11px; font-weight:700; opacity:.7}
.mr-sekme.is-on{color:var(--rs-vurgu-yazi)!important}
.mr-sekme:not(.is-on):hover{color:#fff!important}
.mr-araclar{display:flex; align-items:center; gap:8px}
.mr-ara{position:relative; display:flex; align-items:center; width:40px; height:38px; border-radius:11px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); overflow:hidden; transition:width .25s}
.mr-ara.is-acik{width:220px}
.mr-ara-btn{width:38px; height:38px; flex:none; display:grid; place-items:center; color:rgba(255,255,255,.6)!important; font-size:13px}
.mr-ara input{flex:1; min-width:0; height:100%; padding:0 10px 0 0; background:transparent; border:0; outline:0; color:#fff; font:600 12px/1 var(--rs-f)}
.mr-ara input::placeholder{color:rgba(255,255,255,.4)}
.mr-ara input::-webkit-search-cancel-button{display:none}
.mr-sirala{position:relative}
.mr-sirala-btn{display:flex; align-items:center; gap:7px; height:38px; padding:0 12px!important; border-radius:11px; background:var(--rs-panel)!important; border:1px solid var(--rs-cizgi)!important; font-size:12px!important; font-weight:600!important; color:rgba(255,255,255,.75)!important; white-space:nowrap}
.mr-sirala-btn .fa-chevron-down{font-size:9px; opacity:.6}
.mr-sirala-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:200px; padding:6px; border-radius:11px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.mr-sirala-menu[hidden]{display:none}
.mr-sirala-menu button{display:block; width:100%; text-align:left; padding:9px 10px!important; border-radius:8px; font-size:12px!important; font-weight:600!important; color:rgba(255,255,255,.75)!important}
.mr-sirala-menu button:hover{background:rgba(255,255,255,.05)!important; color:#fff!important}
.mr-sirala-menu button[aria-selected="true"]{color:var(--rs-vurgu)!important}
.mr-sonuc{display:flex; justify-content:flex-end; margin-top:10px; font-size:11px; font-weight:600; line-height:16px; color:rgba(255,255,255,.45)}

/* ---------- bilgi kutusu (ref .market-alert) ---------- */
.mr-uyari{display:flex; gap:10px; margin:14px 0; padding:12px 14px; border-radius:10px; background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.12)}
.mr-uyari-i{color:#ffc107; font-size:18px; line-height:20px}
.mr-uyari-tx{display:flex; flex-direction:column; gap:2px}
.mr-uyari-tx b{font-size:12px; font-weight:700; line-height:16px; color:rgba(255,255,255,.85)}
.mr-uyari-tx span{font-size:11px; font-weight:700; line-height:15px; color:rgba(255,255,255,.45)}
.mr-uyari-tx button{color:var(--rs-vurgu)!important; font-size:11px!important; font-weight:700!important; text-decoration:underline; text-underline-offset:2px}

/* ---------- ürün kartları (ref .card.market: 274x454) ---------- */
.mr-izgara{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.mr-kart{display:flex; flex-direction:column; background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:12px; overflow:hidden; transition:transform .2s, border-color .2s}
.mr-kart:hover{transform:translateY(-2px); border-color:rgba(245,196,81,.35)}
.mr-kart[hidden]{display:none}
.mr-kart-gorsel{position:relative; display:block; width:100%; aspect-ratio:1; background:rgba(255,255,255,.04)!important; overflow:hidden}
.mr-kart-gorsel img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.mr-kart:hover .mr-kart-gorsel img{transform:scale(1.04)}
.mr-kart.is-tukendi .mr-kart-gorsel img{filter:grayscale(.85) brightness(.6)}
.mr-rozetler{position:absolute; left:6px; top:6px; right:6px; display:flex; flex-wrap:wrap; gap:3px}
.mr-rozet{display:inline-flex; align-items:center; height:18px; padding:3px 7px; border-radius:5px; font-size:8px; font-weight:700; line-height:12px; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 1px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
.r-kirmizi{background:rgba(255,0,0,.15); color:#ff5a5a}
.r-yesil{background:rgba(52,211,153,.18); color:#34d399}
.r-turuncu{background:rgba(251,146,60,.2); color:#fb923c}
.r-mavi{background:rgba(56,189,248,.18); color:#38bdf8}
.r-vurgu{background:rgba(245,196,81,.88); color:var(--rs-vurgu-yazi)}
.r-mor{background:#7c3aed; color:#fff}
.mr-kart-alt{flex:1; display:flex; flex-direction:column; padding:10px}
.mr-kart-alt h3{margin:0; font-size:15.6px; font-weight:700; line-height:24px; color:var(--rs-vurgu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mr-kart-acik{margin:5px 0 0; font-size:12px; font-weight:500; line-height:18px; color:rgba(255,255,255,.5); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px}
.mr-detay{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:5px; font-size:11px!important; font-weight:600!important; line-height:16px; color:var(--rs-vurgu)!important}
.mr-detay i{font-size:13px}
.mr-detay:hover span{text-decoration:underline}
.mr-aksiyon{display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:34px}
.mr-fiyat{display:flex; align-items:center; gap:5px; height:36px; padding:0 10px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); flex:none}
.mr-fiyat img{width:24px; height:24px; border-radius:50%; object-fit:cover}
.mr-fiyat span{display:flex; flex-direction:column; line-height:1.05}
.mr-fiyat b{font-size:12px; font-weight:700; color:var(--rs-vurgu); font-variant-numeric:tabular-nums}
.mr-fiyat small{font-size:8px; font-weight:700; color:rgba(255,255,255,.5)}
.mr-al{flex:1; min-width:0; height:40px; padding:9px 12px!important; border-radius:10px; font-size:12px!important; font-weight:700!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(135deg,#ffd66e,var(--rs-vurgu))!important; color:var(--rs-vurgu-yazi)!important; transition:filter .15s, transform .12s}
.mr-al:hover:not(:disabled){filter:brightness(1.08)}
.mr-al:active:not(:disabled){transform:scale(.98)}
.mr-al.is-pasif{background:rgba(245,196,81,.14)!important; color:rgba(245,196,81,.55)!important; cursor:not-allowed}
.mr-al.is-adres{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important; color:#fff!important}

.mr-bos{display:flex; flex-direction:column; align-items:center; gap:6px; padding:44px 16px; border-radius:12px; border:1px dashed var(--rs-cizgi); text-align:center}
.mr-bos i{font-size:26px; color:var(--rs-vurgu); margin-bottom:4px}
.mr-bos b{font-size:14px}
.mr-bos span{font-size:12px; font-weight:600; color:rgba(255,255,255,.5)}
.mr-bos[hidden]{display:none}
.mr-sonucyok{margin-top:10px}

/* ---------- detay penceresi ---------- */
.mr-modal{position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(6,3,16,.78); backdrop-filter:blur(6px); font-family:var(--rs-f); color:#fff; font-weight:700}
.mr-modal[hidden]{display:none}
.mr-modal-panel{position:relative; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; border-radius:14px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); box-shadow:0 30px 70px -20px rgba(0,0,0,.8); animation:mrmIn .22s ease-out}
@keyframes mrmIn{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
.mrm-kapat{position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:10px; background:rgba(0,0,0,.45)!important; display:grid; place-items:center}
.mrm-kapat:hover{background:rgba(0,0,0,.7)!important}
.mrm-gorsel{aspect-ratio:1; background:rgba(255,255,255,.04)}
.mrm-gorsel img{width:100%; height:100%; object-fit:cover}
.mrm-govde{padding:16px}
.mrm-rozet{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}
.mrm-govde h3{margin:0 0 6px; font-size:18px; font-weight:800; color:var(--rs-vurgu)}
.mrm-govde p{margin:0 0 12px; font-size:13px; font-weight:500; line-height:1.55; color:rgba(255,255,255,.65); white-space:pre-line}
.mrm-fiyat{display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
.mrm-fiyat img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.mrm-fiyat b{font-size:20px; color:var(--rs-vurgu)}
.mrm-fiyat small{font-size:11px; color:rgba(255,255,255,.5); align-self:flex-end; margin-bottom:3px}
.mrm-not{display:flex; gap:8px; margin-bottom:12px; padding:10px 12px; border-radius:10px; font-size:12px; font-weight:600; line-height:1.5; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2); color:#6ee7b7}
.mrm-not.is-uyari{background:rgba(255,193,7,.08); border-color:rgba(255,193,7,.2); color:#fcd34d}
.mrm-not i{margin-top:3px}
.mrm-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.mrm-bar span{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#ffd66e,var(--rs-vurgu))}
.mrm-bar-tx{display:flex; justify-content:space-between; margin-top:6px; font-size:11px; font-weight:600; color:rgba(255,255,255,.55)}
.mrm-bar-tx .ok{color:#34d399}
.mrm-bar-tx .eksik{color:#fb923c}
.mrm-btn{margin-top:14px; display:flex}
.mrm-btn .mr-al{height:44px}

/* =================== TABLET =================== */
@media (max-width:1200px){ .mr-izgara{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .mr-izgara{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =================== MOBİL (<768): yatay kart (ref mobil) =================== */
@media (max-width:767.98px){
  .mr-bas{flex-wrap:wrap}
  .mr-bas-tx h1{font-size:16px}
  .mr-bakiye{width:100%; order:3}
  .mr-cubuk{flex-direction:column; align-items:stretch; gap:10px}
  .mr-sekmeler .mr-sekme{flex:1; justify-content:center; padding:7px 6px!important}
  .mr-araclar{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .mr-ara, .mr-ara.is-acik{width:100%; height:44px}
  .mr-ara-btn{height:44px; pointer-events:none}
  .mr-sirala-btn{width:100%; height:44px; justify-content:space-between}
  .mr-sirala-btn span{flex:1; text-align:center}
  .mr-izgara{grid-template-columns:1fr; gap:10px}
  .mr-kart{flex-direction:row; align-items:stretch; padding:10px; gap:10px}
  .mr-kart-gorsel{width:110px; height:110px; flex:none; border-radius:10px}
  .mr-rozetler{left:4px; top:4px; right:4px}
  .mr-rozet{height:16px; padding:2px 5px; font-size:7.5px}
  .mr-kart-alt{padding:0; min-width:0}
  .mr-kart-alt h3{font-size:13px; line-height:18px}
  .mr-kart-acik{font-size:11px; line-height:15px; min-height:0; margin-top:3px}
  .mr-detay{margin-top:4px}
  .mr-aksiyon{padding-top:8px}
  .mr-fiyat{height:34px; padding:0 8px}
  .mr-al{height:34px; padding:6px 8px!important; font-size:11px!important}
}
@media (prefers-reduced-motion:reduce){ .mr-sekme-hap, .mr-ara, .mr-kart, .mr-kart-gorsel img, .mr-modal-panel{transition:none; animation:none} }