/* Tek eşya sayfası. Ray, çip, logo ve açılır detay biçimleri
   item-pazari.css'ten geliyor; burada yalnız bu sayfaya özel olanlar var. */

.it-kok { --ip-ray-yuk: 18px; }

/* ------------------------------------------------------------------ tepe */

.it-tepe {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(242, 179, 61, .08), transparent 58%),
    var(--ucuz-panel);
  box-shadow: var(--ic-isik);
}

.it-tepe-ikon { flex: 0 0 auto; }

.it-tepe-ikon img,
.it-ikon-yok {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
  box-shadow: inset 0 0 0 1px var(--ucuz-border);
}

.it-ikon-yok {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ucuz-pasif);
  font-size: 1.7rem;
}

.it-tepe-govde { flex: 1 1 auto; min-width: 0; }

.it-tepe h1 {
  font-family: var(--yt-baslik);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}

.it-rozetler { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }

.it-arti {
  background: rgba(242, 179, 61, .16);
  color: var(--ucuz-gold);
  box-shadow: inset 0 0 0 1px var(--ucuz-gold-cizgi);
  font-family: var(--yt-sayi);
}

.it-rozet {
  padding: 1px 8px 2px;
  border-radius: var(--r-tam);
  background: var(--ucuz-yukselti);
  border: 1px solid var(--ucuz-border);
  color: var(--ucuz-metin2);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.6;
}

.it-rozet--sonuk { background: none; color: var(--ucuz-sonuk2); }

.it-ozet {
  margin: 0;
  max-width: 78ch;
  font-size: .88rem;
  line-height: 1.68;
  color: var(--ucuz-sonuk);
}

.it-ozet strong { color: var(--ucuz-metin); font-weight: 600; }
.it-ozet .it-vurgu { color: var(--ucuz-gold); font-family: var(--yt-sayi); }

.it-ozet-band { margin-bottom: 22px; }

/* ---------------------------------------------------------------- bolumler */

.it-bolum { margin-bottom: 26px; }

.it-bolum-not {
  margin: -6px 0 12px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ucuz-sonuk);
}

.it-kutu {
  padding: 15px 17px 16px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-xl);
  background: var(--ucuz-panel);
  margin-bottom: 0;
}

.it-yan-yana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

/* ----------------------------------------------------------------- tablo */

.it-tablo th:nth-child(1) { width: 22%; }
.it-tablo th:nth-child(2) { width: 40%; }

.it-sunucu { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.it-ray .ip-ray-sar { max-width: none; }

/* GB karsiligi fiyatin altinda; bakan kisi TL'yi okuduktan sonra gozu buraya
   dusuyor, tersi degil. Fiyat blok, GB inline-block: noktali alt cizgi hucre
   boyunca degil yalniz yazinin altinda dursun. */
.it-tablo .ip-az .ip-fiyat { display: block; }

.it-gb {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--yt-sayi);
  font-size: .68rem;
  color: var(--ucuz-sonuk2);
  cursor: help;
  border-bottom: 1px dotted var(--ucuz-pasif);
  text-decoration: none;
}

.it-uyari {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 13px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-panel);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ucuz-sonuk);
}

.it-uyari .bi { color: var(--ucuz-gold); margin-top: 2px; }
.it-uyari strong { color: var(--ucuz-metin2); font-weight: 600; }

/* ---------------------------------------------------------------- grafik */

.it-grafik {
  padding: 12px 14px 10px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-xl);
  background: var(--ucuz-panel);
}

/* preserveAspectRatio="none" ile SVG kutuya yayiliyor; yuksekligi burada
   sabit tutuyoruz ki dar ekranda ezilmesin. */
.it-grafik-svg { display: block; width: 100%; height: 190px; }

.it-g-izgara { stroke: var(--ucuz-border); stroke-width: 1; }
.it-g-eksen { fill: var(--ucuz-sonuk2); font-family: var(--yt-sayi); font-size: 10px; }
.it-g-cizgi { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.it-g-uc { stroke: var(--ucuz-panel); stroke-width: 2; }

.it-grafik-lejant {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ucuz-border);
}

.it-g-etiket {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ucuz-sonuk);
}

.it-g-etiket::before {
  content: '';
  align-self: center;
  width: 9px; height: 3px;
  border-radius: 2px;
  background: var(--sv, var(--ucuz-sonuk2));
}

.it-g-etiket b {
  font-family: var(--yt-sayi);
  font-weight: 700;
  color: var(--ucuz-metin);
  font-variant-numeric: tabular-nums;
}

.it-g-degisim { font-style: normal; font-size: .68rem; font-weight: 700; }
.it-g-degisim.artti { color: var(--ucuz-red); }
.it-g-degisim.dustu { color: var(--ucuz-green); }

.it-grafik-bos {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  border: 1px dashed var(--ucuz-border);
  border-radius: var(--r-xl);
  background: var(--ucuz-panel);
}

.it-grafik-bos > .bi { color: var(--ucuz-pasif); font-size: 1.4rem; margin-top: 1px; }
.it-grafik-bos strong { font-size: .86rem; color: var(--ucuz-metin2); }
.it-grafik-bos p { margin: 4px 0 0; font-size: .78rem; line-height: 1.6; color: var(--ucuz-sonuk); }

/* ---------------------------------------------------------- oyun degerleri */

.it-oyun-aciklama {
  margin: -4px 0 12px;
  padding-left: 11px;
  border-left: 2px solid var(--ucuz-gold-cizgi);
  font-size: .82rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ucuz-sonuk);
}

.it-deger { display: grid; gap: 1px; margin: 0; background: var(--ucuz-border); border-radius: var(--r-md); overflow: hidden; }

.it-deger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  background: var(--ucuz-panel);
}

.it-deger dt { font-size: .8rem; font-weight: 500; color: var(--ucuz-sonuk); margin: 0; }

.it-deger dd {
  margin: 0;
  font-family: var(--yt-sayi);
  font-size: .86rem;
  font-weight: 700;
  color: var(--ucuz-metin);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.it-deger-ek { font-family: var(--yt-metin); font-size: .68rem; font-weight: 400; color: var(--ucuz-sonuk2); }

.it-kaynak-not { margin: 11px 0 0; font-size: .75rem; line-height: 1.6; color: var(--ucuz-sonuk2); }

/* -------------------------------------------------------------- merdiven */

.it-merdiven {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.it-merdiven-bag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 6px 9px 7px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-md);
  background: var(--ucuz-dark);
  text-decoration: none;
  color: var(--ucuz-metin2);
}

a.it-merdiven-bag:hover { border-color: var(--ucuz-gold-cizgi); background: var(--ucuz-yukselti); }

.it-merdiven li.bu .it-merdiven-bag {
  border-color: var(--ucuz-gold);
  background: var(--ucuz-gold-zayif);
  cursor: default;
}

.it-merdiven-arti { font-family: var(--yt-sayi); font-size: .84rem; font-weight: 700; color: var(--ucuz-metin); }
.it-merdiven li.bu .it-merdiven-arti { color: var(--ucuz-gold); }
.it-merdiven-fiyat { font-family: var(--yt-sayi); font-size: .68rem; color: var(--ucuz-sonuk2); font-variant-numeric: tabular-nums; }

/* Karsit merdiven ayni kutunun icinde ikinci liste olarak duruyor; cizgi iki
   listeyi ayirmasa "+11 normal" ile "+11 Rev" tek merdiven sanilirdi. */
.it-merdiven-alt {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ucuz-border);
  font-size: .84rem;
  font-weight: 700;
  color: var(--ucuz-metin2);
}

.it-merdiven-alt + .it-bolum-not { margin-top: 4px; }

.it-karsit { margin: 12px 0 0; font-size: .8rem; color: var(--ucuz-sonuk); }

/* ------------------------------------------------------------------ dar */

@media (max-width: 575.98px) {
  .it-tepe { padding: 14px 15px; gap: 13px; }
  /* Dar kolonda "…Rev fiyatı" tam kenara dayaniyordu; text-wrap:balance dar
     kutuda iyi kirmiyor, normal sarmaya birakildi. */
  .it-tepe h1 { font-size: 1.06rem; text-wrap: wrap; overflow-wrap: break-word; }
  .it-tepe-ikon img, .it-ikon-yok { width: 54px; height: 54px; }
  .it-ozet { font-size: .83rem; }

  /* item-pazari.css dar ekranda satirlari karta ceviriyor; burada da ayni
     duzen, ama kolonlar baska: sunucu ustte tam genislikte, ray ikinci
     satirda, fiyat ve ilan altta yan yana. */
  .it-tablo tbody tr.ip-satir { gap: 7px 12px; }
  .it-tablo .it-sunucu { flex: 1 1 100%; }
  .it-tablo .it-ray { flex: 1 1 100%; }
  .it-tablo .ip-az { flex: 1 1 auto; text-align: left; }
  .it-tablo .ip-derinlik { flex: 0 0 auto; }
  .it-gb { display: inline-block; margin: 0 0 0 8px; }
  .it-merdiven-bag { min-width: 54px; padding: 5px 7px 6px; }
  .it-grafik { padding: 10px 10px 8px; }
  .it-grafik-svg { height: 160px; }
}