/* ===== Product Detail (PDP) ===== */
:root{
  --bg: #f6f8fb;
  --card: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #ef4444;
  --primary-ink: #fff;
  --accent: #0ea5e9;
  --success: #10b981;
  --danger: #dc2626;
  --border: #e5e7eb;
  --ring: rgba(239,68,68,.2);
  --shadow: 0 12px 32px rgba(2,8,23,.06), 0 2px 8px rgba(2,8,23,.04);
}

/* Sayfanın arka planını ürün sayfasında değiştiriyoruz */
body { background: var(--bg); }

/* === SADECE ÜRÜN SAYFASI İÇİN === */
.pdp-page .page-section { padding: 8px 16px 24px; }

.pdp-page .breadcrumbs{
  color: var(--muted);
  font-size: 14px;
}
.pdp-page .breadcrumbs a{ color: inherit; text-decoration: none; }
.pdp-page .breadcrumbs .sep{ margin: 0 6px; }

/* Kart stili sadece bu sayfada geçerli olsun */
.pdp-page .card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* PDP iki kolon grid */
.pdp{ /* bu zaten sayfa özel sınıf, kalabilir */
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

/* Media */
.pdp-media{ padding: 10px; }
.pdp-media__img{ border-radius: 12px; overflow: hidden; border: 1px solid #f1f5f9; background: #fff; }
.pdp-media__img img{ width: 100%; height: auto; display:block; transition: transform .35s ease; }
.pdp-media__img:hover img{ transform: scale(1.02); }

/* Info */
.pdp-info{ padding: 16px; position: sticky; top: 84px; align-self: start; }
.pdp-title{ margin: 0; font-size: 22px; letter-spacing: -0.01em; }

/* ===== Price v2 ===== */
.pdp-price.v2{ display: grid; gap: 6px; margin: 10px 0 12px; }
.price-current{ font-size: 28px; font-weight: 900; color: var(--danger); letter-spacing: -0.01em; }
.price-sub{ display:flex; align-items:center; gap:10px; }
.price-old{ color: var(--muted); text-decoration: line-through; font-size: 14px; }
.price-badge{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; font-size:12px; padding:4px 10px; border-radius:999px; font-weight:800; }

/* Description */
.pdp-desc{ color: var(--text); opacity:.92; font-size:14px; line-height:1.55; background:#fafbfc; border:1px solid var(--border); border-radius:12px; padding:10px 12px; }

/* Buy form */
.pdp-buy{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px; /* biraz daha ferah */
}
.qty-label{ font-size:12px; color:var(--muted); }
.qty{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; padding:6px; background:#fff; width:fit-content; }
.qty-btn{ width:32px; height:32px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:18px; line-height:1; cursor:pointer; transition: box-shadow .2s ease, transform .05s ease; }
.qty-btn:hover{ box-shadow: 0 2px 8px rgba(2,8,23,.08); }
.qty-btn:active{ transform: translateY(1px); }
.qty-input{ width:56px; border:none; text-align:center; font-weight:700; font-size:16px; outline:none; }

/* !!! BUTONLARI SADECE BU SAYFADA STİLLE !!! */
.pdp-page .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; border:1px solid transparent;
  background:#fff; color:var(--text); font-weight:800; cursor:pointer; text-decoration:none;
}
.pdp-page .btn.primary{
  background: var(--primary); color: var(--primary-ink);
  box-shadow: 0 8px 18px rgba(239,68,68,.25);
}

/* Adet kutusunu da tam genişlik ve aynı yükseklik yap */
.pdp-buy .qty{
  width:100%;
  height:48px;
  padding:0;                 /* iç boşluğu butonla hizalamak için sıfırla */
  border-radius:12px;
  overflow:hidden;           /* köşeler temiz dursun */
  display:grid;
  grid-template-columns: 56px 1fr 56px; /* - [input] + */
  align-items: stretch;
}

/* - ve + tuşları buton yüksekliğinde olsun */
.pdp-buy .qty-btn{
  width:100%;
  height:100%;
  border:0;                  /* kenar çizgileri kutuya geçti */
  border-right:1px solid var(--border);
  background:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition: background-colors .15s ease, transform .05s ease;
}
.pdp-buy .qty-btn:last-child{
  border-right:0;
  border-left:1px solid var(--border);
}
.pdp-buy .qty-btn:hover{ background:#f8fafc; }
.pdp-buy .qty-btn:active{ transform: translateY(1px); }

/* sayı alanı tam ortalı ve butonla aynı yükseklikte */
.pdp-buy .qty-input{
  width:100%;
  height:100%;
  border:0;
  text-align:center;
  font-weight:700;
  font-size:16px;
  outline:none;
  appearance: textfield;              /* Modern standart */
  -moz-appearance: textfield;         /* Firefox için */
  -webkit-appearance: none;           /* Safari & Chrome için */
}
.pdp-buy .qty-input::-webkit-outer-spin-button,
.pdp-buy .qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Buton tam genişlik & sabit yükseklik */
.pdp-page .btn.primary.btn-add{
  width:100%;
  height:48px;
  border-radius:12px;
}
.pdp-page .btn.primary:hover{ filter: brightness(1.03); }
.pdp-page .btn.primary:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }

/* ===== Trust list v3 (modern) ===== */
.trust.v3{ list-style:none; padding:12px 0 0; margin:14px 0 0; border-top:1px dashed var(--border); display:grid; gap:8px; }
.trust-item{ display:grid; grid-template-columns:32px 1fr; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; transition: background-color .2s ease, box-shadow .2s ease, transform .06s ease; }
.trust-item:hover{ background-color:#fff; background: linear-gradient(0deg, #fff, #fff) padding-box; box-shadow:0 4px 10px rgba(0,0,0,.1); }
.trust-icon{ width:32px; height:32px; display:grid; place-items:center; border-radius:999px; background:#eef9ff; color:var(--accent); border:1px solid #d7eefb; }
.trust-icon svg{ width:18px; height:18px; }
.trust-text{ font-size:14px; color:var(--text); }

/* ===== Similar ===== */
.similar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.similar-head h3{ margin:0; font-size:18px; }
.similar-head .link{ color:var(--accent); text-decoration:none; font-weight:700; }

.similar-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.sim-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:10px; display:grid; gap:8px; transition: transform .06s ease, box-shadow .2s ease; }
.sim-card:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(2,8,23,.08); }
.sim-imgwrap{ display:block; }
.sim-img{ position:relative; border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fff; }
.sim-img img{ width:100%; height:auto; display:block; }
.sim-badge{ position:absolute; left:8px; top:8px; background:#fee2e2; color:#991b1b; border:1px solid #fecaca; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.sim-name{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:36px; font-size:14px; color:var(--text); text-decoration:none; font-weight:600;
}
.sim-name:hover{ text-decoration:underline; }
.sim-price{ display:flex; align-items:baseline; gap:8px; }
.sim-price__curr{ font-weight:900; color:var(--danger); }
.sim-price__old{ font-size:12px; color:var(--muted); text-decoration:line-through; }
.sim-actions{ margin-top:2px; }
.pdp-page .btn.tiny{ padding:8px 10px; font-size:12px; border-radius:10px; }

/* Responsive */
@media (max-width: 960px){
  .pdp{ grid-template-columns: 1fr; }
  .pdp-info{ position: static; }
  .similar-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .similar-grid{ grid-template-columns: 1fr; }
}

/* Ürün detay görseli üzerinde Tükendi rozeti */
.pdp-media__img { position: relative; }
.badge-soldout{
  position:absolute; left:12px; top:12px;
  background:#b91c1c; color:#fff; font-weight:800;
  padding:6px 10px; border-radius:10px; font-size:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* Benzer ürün kartı üzerinde rozet */
.sim-img { position:relative; }
.sim-badge{
  position:absolute; left:8px; top:8px; z-index:2;
  background:#0a8a4b; color:#fff; font-weight:700;
  padding:4px 8px; border-radius:8px; font-size:12px;
}
.sim-badge.soldout{ background:#b91c1c; }

/* Disabled state zaten var ama tekrar hatırlatalım */
.btn.disabled{ opacity:.6; cursor:not-allowed; }
.btn.full{ width:100%; }

/* (Opsiyonel) Stok yoksa kartı biraz soluk göster */
.sim-card.is-soldout .sim-img img{ filter:grayscale(20%) brightness(.96); }

/* ===========================
   Ürün Detay Sayfası
=========================== */

/* Genel */
.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 16px;
}

/* Ürün Görsel Alanı */
.pdp-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pdp-media__img {
  position: relative;
  max-width: 100%;
  padding: 12px;
}

.pdp-media__img img {
  max-width: 100%;
  border-radius: 12px;
}

/* TÜKENDİ Badge */
.badge-soldout {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ef4444;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Ürün Bilgi Alanı */
.pdp-info {
  display: flex;
  flex-direction: column;
}

.pdp-head {
  margin-bottom: 16px;
}

.pdp-title {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fiyat Alanı */
.pdp-price.v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.price-current {
  font-size: 24px;
  font-weight: bold;
  color: #16a34a;
}

.price-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-old {
  text-decoration: line-through;
  font-size: 16px;
  color: #9ca3af;
}

.price-badge {
  background: #f43f5e;
  color: #fff;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
}

/* Sepet Butonları */
.pdp-buy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  border: none;
}

.btn.primary {
  background: #dc2626;
  color: #fff;
}

.btn.primary:hover {
  background: #b91c1c;
}

.btn.disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Adet Butonları */
.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 36px;
  height: 36px;
  background: #f3f4f6;
  color: #111;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s ease;
}

.qty-btn:hover {
  background: #e5e7eb;
}

.qty-input {
  width: 60px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px;
  text-align: center;
  font-size: 16px;
}

/* Benzer Ürünler */
.similar {
  margin-top: 48px;
}

.similar-head {
  margin-bottom: 16px;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.sim-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
  position: relative;
}

.sim-card:hover {
  transform: translateY(-4px);
}

.sim-imgwrap {
  display: block;
  position: relative;
  margin-bottom: 8px;
}

.sim-img img {
  width: 100%;
  border-radius: 8px;
}

/* TÜKENDİ Benzer Ürünlerde */
.sim-card.is-soldout .sim-img img {
  opacity: 0.4;
}

.sim-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #f43f5e;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
}

.sim-badge.soldout {
  background: #9ca3af;
}

/* Benzer Ürün Adı */
.sim-name {
  font-weight: 600;
  font-size: 15px;
  margin: 8px 0;
  color: #111;
  text-align: center;
  display: block;
}

.sim-price {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.sim-price__curr {
  color: #16a34a;
  font-weight: 700;
}

.sim-price__old {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 13px;
}

/* Sepete Ekle Butonu Benzer Ürün */
.sim-actions {
  width: 100%;
}

.btn.tiny {
  font-size: 13px;
  padding: 6px 8px;
  width: 100%;
}

/* PDP Ana Yapı */
.pdp {
  display: grid;
  grid-template-columns: 520px 1fr;  /* Görsel + Bilgi */
  gap: 32px;
  align-items: flex-start;
}

.pdp-media {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
  overflow: hidden;
  max-height: 520px;
}

.pdp-media__img {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 480px;
  overflow: hidden;
}

.pdp-media__img img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  transition: transform .25s ease-in-out;
}

.pdp-media__img img:hover {
  transform: scale(1.04);
}

/* Benzer ürünler */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.sim-imgwrap {
  display: block;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 8px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.sim-imgwrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sim-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  overflow: hidden;
  background: #f8fafc;
}

.sim-img img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  transition: transform .25s ease;
}

.sim-img img:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 992px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pdp-media {
    max-height: 400px;
  }

  .pdp-media__img img {
    max-height: 360px;
  }
}

@media (max-width: 600px) {
  .similar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .sim-img {
    height: 120px;
  }

  .sim-img img {
    max-height: 100px;
  }
}