/* =================================================
   DEMIRATLILAR MOTOR AKSESUAR
   PREMIUM SIYAH & KIRMIZI
   URUN DETAY CSS V6
   ================================================= */

/* 1. MARKA RENKLERI */
:root {
  --dm-red: #d92332;
  --dm-red-hover: #b71928;
  --dm-dark: #171b22;
  --dm-text: #242933;
  --dm-muted: #747c88;
  --dm-border: #e5e8ed;
  --dm-light: #f6f7f9;
}

/* 2. URUN ADI */
.urun_detay_orta h1.urun_ismi {
  color: var(--dm-dark) !important;
  font-size: clamp(22px, 2.2vw, 29px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.35px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

/* 3. SATIS FIYATI */
.urun_detay_orta .urun_fiyati,
.urun_detay_orta .urun_fiyati span {
  color: var(--dm-red) !important;
  font-size: clamp(26px, 2.7vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* 4. FIYAT ALANI */
.urun_detay_orta .proPriceCont {
  margin-bottom: 12px;
}

/* 5. HAVALE FIYATI */
.urun_detay_orta .havale_indirim_secenkeleri {
  display: block;
  color: #555e6c;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
}

/* 6. SECENEKLER */
.urun_secenekleri {
  margin-top: 15px;
  margin-bottom: 16px;
}

/* 7. BEDEN / RENK SECIMI */
.urun_secenekleri select {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 13px;

  background: #ffffff;
  color: var(--dm-text);
  border: 1px solid #cfd5dd;
  border-radius: 8px;

  font-size: 14px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

/* 8. SECIM ODAK EFEKTI */
.urun_secenekleri select:focus {
  outline: none;
  border-color: var(--dm-red);
  box-shadow: 0 0 0 3px rgba(217,35,50,.12);
}

/* 9. SECENEK BASLIKLARI */
.urun_secenekleri label,
.urun_secenekleri th {
  color: var(--dm-dark);
  font-size: 13px;
  font-weight: 700;
}

/* 10. ADET SECIMI */
.miktar_container input {
  border: 1px solid var(--dm-border);
  border-radius: 7px;
  color: var(--dm-text);
  text-align: center;
}

/* 11. ADET BUTONLARI */
.miktar_container button {
  border-radius: 7px;
  transition:
    border-color .2s ease,
    background-color .2s ease;
}

/* 12. SEPETE EKLE BUTONU */
#sepete_ekle_buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 50px;
  padding: 13px 20px;

  background: var(--dm-red) !important;
  border: 1px solid var(--dm-red) !important;
  border-radius: 9px;

  color: #ffffff !important;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

/* 13. BUTON HOVER */
#sepete_ekle_buton:hover {
  background: var(--dm-red-hover) !important;
  border-color: var(--dm-red-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(217,35,50,.22);
}

/* 14. BUTON KLAVYE ODAK */
#sepete_ekle_buton:focus-visible {
  outline: 2px solid var(--dm-dark);
  outline-offset: 3px;
}

/* 15. SATIN ALMA KAPSAYICISI */
.urun_sepete_ekle {
  max-width: 100%;
}

/* 16. BILGI / TABLO SECENEKLERI */
.tab_content .tekcekim-havale {
  color: var(--dm-text);
  line-height: 1.7;
}

/* 17. SECENEK TABLOLARI */
.urun_secenekleri table {
  max-width: 100%;
}

/* 18. URUN GORSEL GALERISI
   Genel seciciler yerine mevcut
   galeri yapisini koruyoruz.
   Sadece resimlerin tasmasini onluyoruz. */
.urun_detay img {
  max-width: 100%;
  height: auto;
}

/* 19. MOBIL GORUNUM */
@media (max-width: 768px) {

  .urun_detay_orta h1.urun_ismi {
    font-size: 22px;
  }

  .urun_detay_orta .urun_fiyati,
  .urun_detay_orta .urun_fiyati span {
    font-size: 28px !important;
  }

  .urun_secenekleri select {
    min-height: 44px;
    font-size: 14px;
  }

  #sepete_ekle_buton {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
    padding: 12px;
  }

  .urun_detay_orta
  .havale_indirim_secenkeleri {
    font-size: 12px;
  }
}

/* 20. HAREKET HASSASIYETI */
@media (prefers-reduced-motion: reduce) {
  #sepete_ekle_buton,
  .urun_secenekleri select,
  .miktar_container button {
    transition: none;
  }
}

/* ==========================================
   DEMIRATLILAR MOTOR
   URUN DETAY SON DOKUNUSLAR V6.1
   ========================================== */

/* Havale fiyati */
.urun_detay_orta .havale_indirim_secenkeleri {
  color: #475160;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Taksit bilgileri */
.urun_detay_orta :is(
  .installment-info,
  .taksitBilgisi,
  .taksit-secenekleri
) {
  color: #505b69;
  font-size: 13px;
  line-height: 1.6;
}

/* Beden secimi */
.urun_secenekleri select {
  border-radius: 8px;
  min-height: 46px;
}

/* Sepete Ekle son gorunum */
#sepete_ekle_buton {
  border-radius: 9px !important;
  min-height: 50px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Mobil */
@media (max-width: 768px) {
  .urun_detay_orta .havale_indirim_secenkeleri {
    font-size: 12px !important;
  }
}