/* ============================================================
   Oyuneks Item Kartı (KO + Rise) — GD PNG kartların HTML/CSS karşılığı.
   Model: ItemCardService JSON'u. Blade partial (_shared/item-card.blade.php)
   ve item-card.js aynı DOM'u üretir; bu dosya tek stil kaynağıdır.

   Hibrit renk: kabuk Oyuneks (koyu zemin, 12px köşe, #80F1B1 vurgu,
   #343891 rozet); satır renkleri oyunun nadirlik/stat dili — GD kaynak
   renklerinden koyu zeminde okunurluğa göre kalibre edilmiş tonlar.
   ============================================================ */

.oyx-item-card {
  --ic-bg: #131524;
  --ic-bg-soft: #1a1d31;
  --ic-border: #272b45;
  --ic-muted: #8b90ad;
  --ic-accent: #80f1b1;
  --ic-badge: #343891;

  --ic-white: #f1f3f7;
  --ic-yellow: #e4d468;
  --ic-lightGray: #c6cfce;
  --ic-red: #ed7a7a;

  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--ic-bg-soft) 0%, var(--ic-bg) 55%);
  border: 1px solid var(--ic-border);
  color: var(--ic-white);
  font-family: "Wix Madefor Display", sans-serif;
  font-size: 13px;
  line-height: 1.35;
  box-sizing: border-box;
}

.oyx-item-card *,
.oyx-item-card *::before,
.oyx-item-card *::after {
  box-sizing: border-box;
}

/* KO satır paleti (GD: white/reverse/reverseNorm/unique/upgrade/rare/green/lightGreen/blue/red/infoFirst) */
.oyx-item-card[data-game="knight"] {
  --ic-reverse: #ffb55f;
  --ic-reverseNorm: #ff95b5;
  --ic-unique: #e7d18b;
  --ic-upgrade: #db97da;
  --ic-rare: #f4f968;
  --ic-green: #b6f45a;
  --ic-lightGreen: #96ec8f;
  --ic-blue: #74dbec;
  --ic-infoFirst: #cbbdb5;
}

/* Rise satır paleti (GD: power/green/normGreen/lightGreen/blue/unique/info + kalite) */
.oyx-item-card[data-game="rise"] {
  --ic-power: #dbd1ac;
  --ic-green: #46cd80;
  --ic-normGreen: #82be80;
  --ic-lightGreen: #55b393;
  --ic-blue: #86bdb4;
  --ic-unique: #ebbe2e;
  --ic-info: #a8a89e;

  --ic-q-basic: #46cd80;
  --ic-q-rare: #8a90ff;
  --ic-q-epic: #c973e8;
  --ic-q-unique: #ebbe2e;
  --ic-q-none: #cfd5b2;
}

/* ---- Renk anahtarı → ton eşlemesi (model 'color' alanı) ---- */
.oyx-item-card [data-color="white"] { color: var(--ic-white); }
.oyx-item-card [data-color="yellow"] { color: var(--ic-yellow); }
.oyx-item-card [data-color="lightGray"] { color: var(--ic-lightGray); }
.oyx-item-card [data-color="red"] { color: var(--ic-red); }
.oyx-item-card [data-color="green"] { color: var(--ic-green); }
.oyx-item-card [data-color="lightGreen"] { color: var(--ic-lightGreen); }
.oyx-item-card [data-color="blue"] { color: var(--ic-blue); }
.oyx-item-card [data-color="reverse"] { color: var(--ic-reverse); }
.oyx-item-card [data-color="reverseNorm"] { color: var(--ic-reverseNorm); }
.oyx-item-card [data-color="unique"] { color: var(--ic-unique); }
.oyx-item-card [data-color="upgrade"] { color: var(--ic-upgrade); }
.oyx-item-card [data-color="rare"] { color: var(--ic-rare); }
.oyx-item-card [data-color="infoFirst"] { color: var(--ic-infoFirst); }
.oyx-item-card [data-color="power"] { color: var(--ic-power); }
.oyx-item-card [data-color="normGreen"] { color: var(--ic-normGreen); }
.oyx-item-card [data-color="info"] { color: var(--ic-info); }

/* Kalite/nadirlik ana rengi (isim + rozet) */
.oyx-item-card [data-quality="basic"] { color: var(--ic-q-basic); }
.oyx-item-card [data-quality="rare"] { color: var(--ic-q-rare); }
.oyx-item-card [data-quality="epic"] { color: var(--ic-q-epic); }
.oyx-item-card [data-quality="unique"] { color: var(--ic-q-unique); }
.oyx-item-card [data-quality="none"] { color: var(--ic-q-none); }

/* ---- Üst bölüm ---- */
.oyx-item-card__eyebrow {
  margin-bottom: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-muted);
}

.oyx-item-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oyx-item-card__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(52, 56, 145, 0.18);
  border: 1px solid var(--ic-border);
}

.oyx-item-card__icon img {
  max-width: 45px;
  max-height: 45px;
  image-rendering: pixelated;
}

.oyx-item-card__title {
  flex: 1 1 auto;
  min-width: 0;
}

.oyx-item-card__name {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: break-word;
}

.oyx-item-card__meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ic-muted);
}

.oyx-item-card__meta [data-race="highlight"] { color: var(--ic-red); }

.oyx-item-card__badge {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(52, 56, 145, 0.35);
  border: 1px solid rgba(52, 56, 145, 0.7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---- Gövde / satırlar ---- */
.oyx-item-card__body {
  margin-top: 12px;
}

.oyx-item-card__hr {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--ic-border) 18%, var(--ic-border) 82%, transparent);
}

.oyx-item-card__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2.5px 0;
}

.oyx-item-card__label { color: var(--ic-muted); }
.oyx-item-card__value { font-weight: 600; text-align: right; }

/* Ortalanan satırlar: Rise Attack Power, KO Item Grade, bilgi/koleksiyon satırları */
.oyx-item-card__line[data-kind="center"],
.oyx-item-card__line[data-kind="grade"],
.oyx-item-card__line[data-kind="radiant"],
.oyx-item-card__line[data-kind="finish"],
.oyx-item-card__line[data-kind="info"],
.oyx-item-card__line[data-kind="material"] {
  justify-content: center;
  text-align: center;
}

.oyx-item-card__line[data-kind="center"] .oyx-item-card__value {
  font-size: 15px;
  font-weight: 700;
}

.oyx-item-card__line[data-kind="center"] .oyx-item-card__label,
.oyx-item-card__line[data-kind="grade"] .oyx-item-card__label {
  color: inherit;
  font-weight: 600;
}

.oyx-item-card__line[data-kind="grade"],
.oyx-item-card__line[data-kind="radiant"] {
  font-size: 12px;
}

.oyx-item-card__line[data-kind="info"],
.oyx-item-card__line[data-kind="material"] {
  font-size: 12px;
  font-weight: 400;
}

.oyx-item-card__line[data-kind="info"] .oyx-item-card__value,
.oyx-item-card__line[data-kind="material"] .oyx-item-card__value,
.oyx-item-card__line[data-kind="radiant"] .oyx-item-card__value,
.oyx-item-card__line[data-kind="finish"] .oyx-item-card__value {
  font-weight: 400;
}

/* ---- Dayanıklılık / süre barı ---- */
.oyx-item-card__line[data-kind="durability"],
.oyx-item-card__line[data-kind="duration"] {
  align-items: center;
}

.oyx-item-card__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--ic-bg-soft);
  border: 1px solid var(--ic-border);
  overflow: hidden;
}

.oyx-item-card__bar-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ic-badge), var(--ic-accent));
}

/* ---- Rune satırı ---- */
.oyx-item-card__rune {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.oyx-item-card__rune-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(52, 56, 145, 0.18);
  border: 1px solid var(--ic-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oyx-item-card__rune-icon img {
  max-width: 26px;
  max-height: 26px;
}

/* Detay sayfaları: kart montaj alanı (advert-detail + product-detail).
   Bant/boşluk bırakmamak için padding yok; kart kapsayıcıyı tam doldurur. */
.detailItemCardMount {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.detailItemCardMount .oyx-item-card {
  max-width: 100%;
}

/* Ürün detayı: kart varken 4/5 görsel oranı ve siyah zemin dayatılmaz —
   kutu kartın doğal yüksekliğini alır, üst/alt/yan siyah bant kalmaz.
   min-height: item değişiminde (galeri şeridi ile kart yenilenirken)
   yükseklik zıplamasını ve dokunma kaymasını engeller. */
.productImage.hasItemCard {
  aspect-ratio: auto;
  height: auto;
  min-height: 340px;
  background: transparent;
  display: flex;
  align-items: center;
}

/* Çoklu-item ilanlarda sağdaki galeri şeridi (galleryItemList.detail)
   kartın değer kolonunu örtmesin — karta şerit genişliği kadar sağ boşluk */
.productImage.hasItemStrip .oyx-item-card {
  padding-right: 64px;
}

@media (max-width: 576px) {
  .productImage.hasItemCard { min-height: 300px; }
  .productImage.hasItemStrip .oyx-item-card { padding-right: 56px; }
}

/* ---- Listeleme ürün kartı içinde KOMPAKT mod ----
   Dar grid hücresinde eyebrow/rozet yer çalmaz, isim rahat kırılır,
   satırlar sıkışır; nadirlik bilgisi isim renginde zaten taşınır. */
.productCardItemCard .oyx-item-card {
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.3;
}
.productCardItemCard .oyx-item-card__eyebrow,
.productCardItemCard .oyx-item-card__badge {
  display: none;
}
.productCardItemCard .oyx-item-card__head { gap: 8px; }
.productCardItemCard .oyx-item-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.productCardItemCard .oyx-item-card__icon img {
  max-width: 30px;
  max-height: 30px;
}
.productCardItemCard .oyx-item-card__name { font-size: 12px; }
.productCardItemCard .oyx-item-card__meta { font-size: 10px; margin-top: 1px; }
.productCardItemCard .oyx-item-card__body { margin-top: 8px; }
.productCardItemCard .oyx-item-card__line { padding: 1.5px 0; gap: 8px; }
.productCardItemCard .oyx-item-card__hr { margin: 5px 0; }
.productCardItemCard .oyx-item-card__line[data-kind="center"] .oyx-item-card__value { font-size: 13px; }
.productCardItemCard .oyx-item-card__bar { display: none; }
.productCardItemCard .oyx-item-card__rune { padding: 3px 0; gap: 6px; }
.productCardItemCard .oyx-item-card__rune-icon { width: 24px; height: 24px; }
.productCardItemCard .oyx-item-card__rune-icon img {
  max-width: 20px;
  max-height: 20px;
}

/* Dar kapsayıcılar (ilan grid hücresi vb.) */
@media (max-width: 400px) {
  .oyx-item-card { padding: 12px; }
  .oyx-item-card__name { font-size: 14px; }
}