.product-detail{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:80vh;
padding:32px 0 32px 0;
background:#f7f7f7;
box-sizing:border-box;
}

.product-grid{
display:grid;
grid-template-columns:260px 1fr 380px;
gap:40px;
align-items:flex-start;
}


/* SOL MENÜ */
/* SOL MENÜ KART */

.products-sidebar{
background:#fff;
padding:12px 0 12px 0;
border-radius:12px;
box-shadow:0 2px 12px rgba(30,32,38,0.07);
border:1.5px solid #e5e5e5;
margin:0;
width:260px;

}
/* liste sıfırlama */

.sidebar-menu{
list-style:none;
margin:0;
padding:0 18px;
}

/* başlıklar */

.sidebar-title{
font-size:1.08rem;
font-weight:700;
margin-top:10px;
margin-bottom:4px;
border-bottom:2px solid #e5e5e5;
padding-bottom:4px;
display:flex;
align-items:center;
gap:8px;
}

.sidebar-title:first-child{
margin-top:0;
}

/* başlık link */

.sidebar-title a{
text-decoration:none;
color:#23242a;
display:block;
font-weight:900;
font-size:1.12rem;
display:flex;
align-items:center;
gap:8px;
padding:0;
border:none;
background:none;
transition:color .16s;
}

/* aktif */

.sidebar-title a.active{
color:#eab216 !important;
}

/* alt menü */

.sidebar-submenu{
list-style:none;
margin:0 0 0 8px;
padding:0 0 0 4px;
}

.sidebar-submenu li{
margin-bottom:12px;
}

/* alt link */

.sidebar-submenu a{
text-decoration:none;
color:#23242a;
font-size:1rem;
display:block;
padding:4px 0 4px 8px;
border-radius:4px;
transition:background .14s, color .14s;
}

.sidebar-submenu a:hover{
background:#eab21622;
color:#eab216;
}

/* BİLGİ */

.product-info h1{
font-size:28px;
margin-bottom:20px;
}

.product-specs{
list-style:none;
padding:0;
margin:0;
max-width:320px;
}

.product-specs li{
display:flex;
gap:8px;
margin-bottom:4px;
font-size:16px;
}

.product-specs b{
white-space:nowrap;
font-weight:700;
}

.product-colors{
display:flex;
gap:10px;
margin:15px 0;
}

.color{
width:35px;
height:35px;
border-radius:4px;
border:1px solid #ccc;
cursor:pointer;
}

.chrome{background:linear-gradient(90deg,#eee,#bbb);}
.black{background:#111;}
.gold{background:#d4af37;}
.gray{background:#999;}
.rose{background:#d89c8b;}
@media(max-width:1000px){

.product-grid{
grid-template-columns:1fr;
}

.products-sidebar{
max-width:100%;
margin:auto;
}

.product-gallery{
order:1;
}

.product-info{
order:3;
}

}
@media(max-width:768px){

.sidebar-title.has-sub{
display:flex;
align-items:center;
justify-content:space-between;
}

}
/* Ürün Detay Sayfası - Görseldeki gibi */
.urun-detay-main, .product-grid {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 32px 32px 32px;
  margin: 0;
}
.product-gallery {
  flex: 0 0 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.main-image {
  width: 440px;
  height: 340px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}

.img-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.4);
color:#fff;
border:none;
font-size:26px;
width:40px;
height:40px;
cursor:pointer;
border-radius:50%;
}

.img-nav.prev{
left:10px;
}

.img-nav.next{
right:10px;
}

.img-nav:hover{
background:#eab216;
}
.main-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.thumbs {
  display: flex;
  gap: 12px;
  margin-top: 0;
}
.thumb{
cursor:pointer;
opacity:0.7;
}

.thumb.active{
opacity:1;
border:2px solid #eab216;
}
.thumbs img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 0;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: border-color .16s, background .16s;
  background: #fff;
}
.thumbs img.active, .thumbs img:focus, .thumbs img:hover {
  border-color: #bdbdbd;
  background: #eaeaea;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 0;
}
.product-info h1 {
  font-size: 2rem;
  font-weight: 500;
  color: #23242a;
  margin-bottom: 18px;
}
.product-specs b {
  font-weight: 700;
  min-width: 90px;
  display: inline-block;
}
.product-colors {
  display: flex;
  gap: 8px;
  margin: 8px 0 18px 0;
}
.color {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  border: 1.5px solid #ccc;
  display: inline-block;
}
.color.chrome { background: #e6e6e6; }
.color.black { background: #222; }
.color.gold { background: #eab216; }
.color.gray { background: #bdbdbd; }
.color.rose { background: #c49a85; }
.product-btn{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 32px;
background:#eab216;
color:#fff;
text-decoration:none;
font-weight:700;
font-size:1.18rem;
border-radius:12px;
margin-top:22px;
box-shadow:0 4px 18px #eab21633;
transition:background 0.22s, color 0.22s, box-shadow 0.22s;
}

.product-btn i{
font-size:1.25em;
margin-right:6px;
}

.product-btn:hover{
background:#fff;
color:#eab216;
box-shadow:0 6px 24px #eab21655;
border:2px solid #eab216;
}

.small-btn {
  padding: 7px 18px !important;
  font-size: 1rem !important;
  border-radius: 7px !important;
  min-width: 0 !important;
  box-shadow: 0 2px 8px #eab21622 !important;
  margin-top: 0 !important;
}
@media (max-width: 1000px) {
  .urun-detay-main, .product-grid {
    flex-direction: column;
    gap: 0;
    padding: 12px 4px 12px 4px;
  }
  .product-gallery {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
  }
  .main-image {
    width: 100%;
    max-width: 100%;
    height: 220px;
  }
}

@media (max-width: 900px) {
  .product-detail {
    padding: 0 !important;
    min-height: auto !important;
    background: #fff !important;
    justify-content: flex-start;
    width: 100% !important;
  }

  .urun-detay-main, .product-grid {
    flex-direction: column;
    gap: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    width: 100vw !important;
    max-width: 100% !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .products-sidebar {
    margin: 0 !important;
    float: none !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(30,32,38,0.07);
  }

  .product-gallery {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  /* MOBIL SABIT ORTA BOY ANA GÖRSEL */
  .main-image {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    overflow: hidden !important;
  }

  .main-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  .thumbs {
    gap: 8px !important;
    margin-top: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* MOBIL SABIT EŞİT THUMB */
  .thumbs img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 2px solid #ddd !important;
    background: #fff !important;
    margin: 0 !important;
  }

  .product-info {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .product-info h1 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
  }

  .product-specs {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    display: inline-block !important;
  }

  .product-specs li {
    margin-bottom: 4px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  .product-specs b {
    min-width: 80px !important;
    display: inline-block !important;
    font-weight: 700 !important;
  }

  .product-colors {
    display: flex !important;
    gap: 8px !important;
    margin: 8px 0 18px 0 !important;
    justify-content: center !important;
  }

  .color {
    width: 32px !important;
    height: 22px !important;
    border-radius: 4px !important;
    border: 1.5px solid #ccc !important;
    display: inline-block !important;
  }

  .product-btn-wrap {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .product-btn.small-btn {
    margin: 0 auto !important;
    display: flex !important;
  }

  .social-fixed {
    right: 10px !important;
    left: auto !important;
    bottom: 18px !important;
    top: auto !important;
    border-radius: 24px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    padding: 8px 4px !important;
    gap: 8px !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .product-detail,
  .urun-detay-main,
  .product-grid,
  .main-image,
  .products-sidebar,
  .product-info {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Daha küçük mobil için biraz daha kompakt */
@media (max-width: 480px) {
  .main-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
  }

  .thumbs img {
    width: 64px !important;
    height: 64px !important;
  }
}