/* =========================================================
   PRODUCT PAGE — FULL CSS (SIDE BY SIDE FIXED)
   ========================================================= */

/* Layout */
.container{
  padding:40px var(--spacing) 70px;
  max-width:1200px;
  margin:0 auto;
}

/* YAN YANA GARANTİ */
.product-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(340px,420px) !important; /* sol akışkan, sağ sabit */
  gap:22px;
  align-items:start;
}

/* Grid içindeki çocuklar (gallery / buy-card) genişlik yüzünden kırılmasın */
.product-grid > *{
  min-width:0;            /* taşmayı engeller */
  max-width:100%;
}

/* Gallery */
.gallery{
  border:1px solid rgba(15,23,42,.06);
  background:var(--secondary-bg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  width:100%;
}

.main-shot{
  position:relative;
  aspect-ratio: 4/5;
  background:#e9e9e9;
  overflow:hidden;
}
.main-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(0.16,1,0.3,1);
  transform:scale(1);
}
.gallery:hover .main-shot img{transform:scale(1.04)}

.shot-label{
  position:absolute;
  left:16px; bottom:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  padding:10px 12px;
  font-weight:500;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}

.thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:14px;
  background:#fff;
  border-top:1px solid rgba(15,23,42,.06);
}
.thumb{
  border:1px solid rgba(15,23,42,.08);
  background:var(--secondary-bg);
  aspect-ratio:1/1;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(0.16,1,0.3,1);
}
.thumb:hover img{transform:scale(1.06)}
.thumb[aria-current="true"]{
  outline:2px solid rgba(139,11,20,.55);
  outline-offset:2px;
}

/* Purchase Card */
.buy-card{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:var(--shadow-soft);
  padding:18px 16px;
  position:sticky;
  top:92px;
  width:100%;
}

.buy-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.price{
  font-family:'Syne',sans-serif;
  letter-spacing:-.8px;
  font-size:1.7rem;
  white-space:nowrap;
}
.sku{
  color:rgba(17,17,17,.60);
  font-size:.9rem;
  margin-top:6px;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.badge{
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  padding:7px 9px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.divider{
  margin:14px 0;
  border-top:1px solid rgba(15,23,42,.08);
}

.opt{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.label{
  font-weight:500;
  font-size:.95rem;
}

.size-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.size{
  border:1px solid rgba(15,23,42,.14);
  background:transparent;
  padding:10px 0;
  font:inherit;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  font-weight:500;
  text-transform:uppercase;
  font-size:.9rem;
}
.size:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.25)}
.size.is-active{
  border-color:rgba(139,11,20,.55);
  background:rgba(139,11,20,.06);
}

.qty-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.qty{
  width:110px;
  appearance:none;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  padding:12px 12px;
  font:inherit;
  outline:none;
}
.qty:focus{
  border-color:rgba(139,11,20,.55);
  box-shadow:0 0 0 4px rgba(139,11,20,.10)
}

.actions{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.btn{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  background:transparent;
  padding:12px 14px;
  font:inherit;
  font-weight:500;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.25)}
.btn.primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.btn.primary:hover{background:#a20d18}
.btn.wa{
  border-color:rgba(15,23,42,.14);
  background:#fff;
}

.mini-info{
  margin-top:14px;
  display:grid;
  gap:8px;
  color:rgba(17,17,17,.68);
  font-size:.93rem;
  line-height:1.45;
}
.mini-info .line{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.dot{
  width:8px;height:8px;
  background:#ff3b4b;
  display:inline-block;
  flex:0 0 8px;
  margin-top:6px;
}

/* Details sections */
.details{
  margin-top:26px;
  display:grid;
  gap:14px;
}
details{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  padding:14px 14px;
  box-shadow:var(--shadow-soft);
}
summary{
  cursor:pointer;
  font-weight:500;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
summary::-webkit-details-marker{display:none}
summary:after{
  content:"+";
  font-family:'Syne',sans-serif;
  font-size:1.1rem;
  opacity:.8;
}
details[open] summary:after{content:"—"}
details p, details ul{
  margin-top:10px;
  color:rgba(17,17,17,.70);
  line-height:1.7;
}
details ul{padding-left:18px}

/* Related (mini cards) */
.related{
  margin-top:40px;
  border-top:1px solid rgba(15,23,42,.06);
  padding-top:26px;
}
.rel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.rel-title{
  font-family:'Syne',sans-serif;
  font-size:1.6rem;
  letter-spacing:-.8px;
  line-height:1;
}
.rel-desc{
  color:rgba(17,17,17,.68);
  max-width:70ch;
  line-height:1.6
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.card-img{
  aspect-ratio:4/5;
  background:var(--secondary-bg);
  overflow:hidden;
}
.card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(0.16,1,0.3,1);
}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{
  padding:14px 14px 16px;
  display:grid;
  gap:10px;
}
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.card-title{font-weight:500;letter-spacing:.01em}
.meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:rgba(17,17,17,.62);
  font-size:.86rem
}
.mini-btn{
  border:1px solid rgba(15,23,42,.14);
  background:transparent;
  padding:10px 12px;
  font:inherit;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
  font-weight:500;
  width:max-content;
}
.mini-btn:hover{transform:translateY(-1px); border-color:rgba(15,23,42,.25)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  .product-grid{
    grid-template-columns:1fr !important; /* mobilde alt alta */
  }
  .buy-card{
    position:relative;
    top:auto;
  }
}

@media (max-width: 520px){
  .container{padding:26px var(--spacing) 60px}
  .size-grid{grid-template-columns:repeat(4,1fr)}
  .thumbs{grid-template-columns:repeat(4,1fr)}
}
.btn.wa{
  border-color:rgba(15,23,42,.14);
  background:#fff;
  color:#111;   /* ← yazıyı siyah yap */
}