/* =========================================================
   🌿 GENEL LAYOUT — SOL AÇIKLAMA / SAĞ ÜRÜNLER
========================================================= */

.kategori-layout {
  width: 95%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 310px 1fr; /* Sol açıklama – sağ ürünler */
  gap: 35px;
  align-items: flex-start;
}

.kategori-baslik {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 20px;
}

.kategori-baslik h2 {
  position: relative;
  padding-bottom: 16px;
}

.kategori-baslik h2::after {
  content: "";
  width: 80px;
  height: 6px;
  background: linear-gradient(to right, #b79d83, #e8d8c8, #b79d83);
  margin: 10px auto 0 auto;
  display: block;
  border-radius: 12px;
}

/* =========================================================
   🌟 PREMIUM SOL AÇIKLAMA BOX
========================================================= */

.kategori-info-box {
  background: #ffffff;
  width: 310px;
  padding: 28px 24px;
  border-radius: 18px;

  /* Gold premium kenarlar */
  border-left: 6px solid #c5a88a;
  border-top: 2px solid rgba(197,168,138,0.35);
  border-right: 2px solid rgba(197,168,138,0.25);
  border-bottom: 2px solid rgba(197,168,138,0.15);

  /* Güçlü showroom gölgesi */
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);

  color: #3f322a;
  line-height: 1.75;
  font-size: 15.5px;

  position: sticky;
  top: 130px;
}

/* Başlık */
.kategori-info-title {
  font-size: 24px;
  font-weight: 800;
  color: #3b2d22;
  margin-bottom: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Açıklama metni */
.kategori-info-text {
  color: #4c3f36;
  font-size: 15.5px;
  line-height: 1.8;
}

/* =========================================================
   🛒 ÜRÜN GRID (MASAÜSTÜ)
========================================================= */

.kategori-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

/* ÜRÜN KARTI */
.kategori-item {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.kategori-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

.kategori-title {
  font-size: 15px;
  color: #333;
  margin-top: 8px;
  height: 40px;
}

.kategori-item{
  position:relative;
}
.kategori-item{
  position:relative;
  overflow:hidden;
}

/* ALTIN IŞIK ŞERİDİ */
.gold-line-discount{
  position:absolute;
  top:12px;
  left:-45px;
  width:190px;
  height:32px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    #d4af37 40%,
    #fff2b0 50%,
    #d4af37 60%,
    transparent 100%
  );
  transform: rotate(-10deg);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  animation: goldFlow 2.6s linear infinite;
  z-index:50;
}

/* % YÜZDE */
.gold-line-discount .gold-yuzde{
  color:#111;
  font-weight:900;
  font-size:13px;
  background:rgba(255,255,255,0.92);
  padding:3px 9px;
  border-radius:20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

/* İNDİRİMDE YAZISI (AYRI CLASS) */
.gold-line-discount .gold-indirim-text{
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  color:#2a1f0a;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  opacity:0.95;
}

/* AKIŞ */
@keyframes goldFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* ✅ MOBİL */
@media(max-width:768px){
  .gold-line-discount{
    height:26px;
    width:145px;
    top:8px;
    left:-35px;
  }

  .gold-line-discount .gold-yuzde{
    font-size:11px;
    padding:2px 7px;
  }

  .gold-line-discount .gold-indirim-text{
    font-size:8px;
    letter-spacing:1.4px;
  }
}





.kategori-price-box {
  margin-top: 8px;
}

.kategori-old-price {
  text-decoration: line-through;
  color: #777;
  font-size: 13px;
  margin-right: 6px;
}

.kategori-new-price {
  font-size: 18px;
  font-weight: 700;
  color: #b79d83;
}

/* Ürün Detay butonu */
.kategori-btn {
  display: block;
  margin-top: 10px;
  padding: 10px 0;
  background: #b79d83;
  color: white;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
}

/* =========================================================
   📱 MOBİL TASARIM — 2’Lİ GRID + BUTON KALKAR
========================================================= */

@media (max-width: 900px) {

  /* Layout tek sütun */
  .kategori-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Açıklama kutusu alta iner */
  .kategori-info-box {
    order: 10;
    width: 100%;
    padding: 20px 18px;
    border-radius: 14px;
    position: relative;
    top: 0;
  }

  .kategori-info-title {
    font-size: 20px;
    text-align: center;
  }

  .kategori-info-text {
    font-size: 15px;
    text-align: center;
  }

  /* ürün grid 2'li */
  .kategori-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .kategori-img {
    height: 180px !important;
  }

  /* Ürün detay butonunu mobilde kaldır */
  .kategori-btn {
    display: none !important;
  }

  .kategori-title {
    font-size: 13px;
    text-align: center;
  }
}
/* 🔴 ÜRÜN DURUM ROZETLERİ */
.urun-badge{
    position:absolute;
    top:12px;
    right:12px;   /* 🔥 SOL yerine SAĞ */
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
    border-radius:8px;
    color:#fff;
    z-index:6;
    display:flex;
    align-items:center;
    gap:6px;
}


.badge-yok{
    background:#b22222;
}

.badge-tukendi{
    background:#8b7d6b;
}
.badge-yok{
    background:#b22222;
    box-shadow:0 4px 12px rgba(178,34,34,.35);
}