/* ======================================================
   GENEL KONTENER
====================================================== */
.detay-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: "Poppins", sans-serif;
}

/* ======================================================
   ÜRÜN ANA BOX
====================================================== */
#product {
    display: flex;
    gap: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
}

/* ======================================================
   SOL TARAF (FOTOĞRAF)
====================================================== */
.left {
    flex: 1;
}

#p-image {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: #f8f8f8;
    border-radius: 14px;
    padding: 10px;
}

/* 📸 Thumbnail Galeri Kutusu */
.thumb-gallery {
    margin-top: 15px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px;
    background: #ffffff;
    border: 2px solid #e8dfd6;         /* Premium açık kahve çerçeve */
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* 📌 Tek Tek Küçük Fotoğraflar */
.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.25s ease;
    flex-shrink: 0;
}

/* 📌 Hover & Aktif Efekti */
/* 📌 Hover & Aktif Efekti – PIXEL YOK */
.thumb:hover,
.thumb.active-thumb {
    border-color: #b79d83;

    /* ❌ scale YOK */
    transform: none;

    box-shadow: 
      0 0 0 2px rgba(183,157,131,0.45),
      0 6px 14px rgba(0,0,0,0.15);
}



/* ======================================================
   SAĞ TARAF
====================================================== */
.right {
    flex: 1;
}

#p-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

#p-desc {
    margin: 10px 0 20px;
    font-size: 15px;
    color: #555;
    line-height: 1.65;
}

/* ======================================================
   FİYAT KUTUSU
====================================================== */
.fiyat-kutu {
    margin: 20px 0;
    position: relative;
}
.fiyatlar {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.eski-fiyat {
    text-decoration: line-through;
    color: #b7a99a;
    font-size: 17px;
}
.yeni-fiyat {
    color: #b79d83;
    font-size: 34px;
    font-weight: 700;
}
/**KARGO FALAN FİLAN*/
.product-trust {
  margin-top: 8px;
  font-size: 13.5px;
  color: #3c2a1e;
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.product-trust span {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.9;
}

@media (max-width: 768px) {

  /* Fiyat altı güven cümlesi */
  .product-trust {
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 13px;
    margin-top: 10px;
  }

  .product-trust span {
    width: auto;
    font-weight: 600;
  }

  /* Satın al butonu altı mikro ikna */
  .buy-note {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.4;
    text-align: left;
  }

  /* Stok / aciliyet metni */
  .stock-info {
    font-size: 12.5px;
    margin-top: 6px;
  }

}

/* ======================================================
   EBATLAR
====================================================== */
.ebat-kutu {
    background: #fff8f0;
    border: 1px solid #e5d5c5;
    padding: 15px 18px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.ebat-kutu label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

/* MASAÜSTÜ — Kutulu ebat */
.ebat-kutu-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ebat-btn {
    padding: 10px 14px;
    border: 2px solid #c9b49a;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    background: #fff;
    transition: .2s;
}
.ebat-btn:hover {
    border-color: #b79d83;
    background: #f6eee6;
}
.ebat-btn.selected {
    background: #b79d83;
    color: #fff;
    border-color: #b79d83;
}

/* MOBİL — dropdown */
.mobil {
    margin-top: 12px;
    display: none;
}
.mobil select {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #c9b49a;
    padding: 10px;
    font-size: 15px;
    background: #fff;
}

/* ======================================================
   SEPETE EKLE
====================================================== */
.add-to-cart {
    width: 100%;
    background: #a67c52;
    padding: 14px 25px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}
.add-to-cart:hover {
    background: #cba875;
    transform: translateY(-3px);
}

/* ======================================================
   ÖNERİLEN ÜRÜNLER
====================================================== */
.onerilen-wrapper {
    width: 100%;
    background: #fff;
    padding: 25px 20px;
    margin-top: 40px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.onerilen-wrapper h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

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

.onerilen-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #222;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
    transition: .25s;
    position: relative;
}
.onerilen-item:hover {
    transform: translateY(-5px);
}

.onerilen-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.onerilen-item h4 {
    font-size: 15px;
    padding: 10px;
    min-height: 35px;
}

.fiyat {
    text-align: center;
    padding-bottom: 15px;
}

.indirim-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #d62828;
    color: #fff;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
}
.genel-stok-kutu {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
}

.genel-stok-kutu span {
  padding: 4px 10px;
  border-radius: 8px;
}

.stok-var {
  background: #e8f5e9;
  border-left: 4px solid #43a047;
  color: #2e7d32;
}

.stok-az {
  background: #fff3cd;
  border-left: 4px solid #ffb300;
  color: #b67d00;
}

.stok-yok {
  background: #ffebee;
  border-left: 4px solid #c62828;
  color: #c62828;
}
.ebat-stok-kutu {
  font-size: 14px;
  margin-top: 4px;
  color: #8b5e34;
  font-weight: 600;
}

.stok-yok { color: #c62828; font-weight: 700; }
.stok-az { color: #d88c13; font-weight: 700; }
.stok-var { color: #2e7d32; font-weight: 700; }


/* ✅ ÖNERİLEN ÜRÜNLER – MİNİ PREMIUM İNDİRİM ROZETİ */
.onerilen-item{
  position: relative;
}

.onerilen-mini-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #111, #2b2b2b);
  color: #ffd36b;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 8px;
  z-index: 20;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Mobil */
@media(max-width:768px){
  .onerilen-mini-badge{
    font-size: 10px;
    padding: 4px 8px;
    top: 8px;
    left: 8px;
  }
}

/* ✅ ÜRÜN FOTOĞRAFI REFERANS */
.detay-container #product .left{
  position: relative !important;
  overflow: visible !important;
  z-index: 5;
}

/* ✅ GENEL WRAPPER */
.indirim-etiket-wrap{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ✅ % BALONCUK */
.indirim-yuzde-bubble{
  background: linear-gradient(135deg, #111, #2b2b2b);
  color: #ffd36b;
  font-size: 16px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* ✅ İNDİRİMDE BANTI */
.indirim-text-bant{
  background: linear-gradient(135deg, #48a870, #2d714f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 6px 0 6px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* ✅ HOVER PARLAMA */
.left:hover .indirim-yuzde-bubble,
.left:hover .indirim-text-bant{
  filter: brightness(1.12);
}

/* ✅ MOBİL */
@media (max-width:768px){
  .indirim-etiket-wrap{
    top: 8px;
    right: 8px;
  }

  .indirim-yuzde-bubble{
    font-size: 14px;
    padding: 6px 10px;
  }

  .indirim-text-bant{
    font-size: 10px;
    padding: 5px 10px;
  }
}




/* =========================================================
   📱 MOBİL ÜRÜN DETAY (0–768px)
========================================================= */
@media (max-width: 768px) {

    /* GENEL KAPSAYICI */
    .detay-container {
        padding: 0 12px;
    }

    /* SOL-SAĞ YAN YANA OLAN YAPI TEK KOLON OLSUN */
    #product {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ANA ÜRÜN FOTOĞRAFI */
    .left img#p-image {
        width: 100%;
        height: auto;
        border-radius: 12px;
        object-fit: cover;
    }

    /* Thumbnail Galeri */
    .thumb-gallery {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .thumb-gallery .thumb {
        width: 70px;
        height: 70px;
        border-radius: 10px;
        object-fit: cover;
        cursor: pointer;
        border: 2px solid transparent;
        flex-shrink: 0;
    }

    .thumb-gallery .thumb.active-thumb {
        border-color: #b79d83;
    }

    /* SAĞ TARAF ARTIK ALTTA */
    .right {
        width: 100%;
    }

    /* ÜRÜN BAŞLIK */
    .right h1 {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 8px;
    }

    /* AÇIKLAMA */
    #p-desc {
        font-size: 15px;
        line-height: 21px;
        color: #5e5247;
        margin-bottom: 15px;
    }

    /* FİYAT ALANI */
    .fiyat-kutu {
        background: #f8f5f1;
        padding: 12px 15px;
        border-radius: 12px;
        margin-bottom: 18px;
    }

    .fiyatlar {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .eski-fiyat {
        font-size: 14px !important;
    }

    .yeni-fiyat {
        font-size: 20px !important;
        font-weight: 700;
        color: #a07145;
    }
    /* Sepete ekle butonu */
    .add-to-cart {
        width: 100%;
        background: #b79d83;
        color: #fff;
        padding: 14px;
        border-radius: 10px;
        font-size: 18px;
        margin-top: 20px;
    }

    /* ÖNERİLEN ÜRÜNLER */
    .onerilen-wrapper h3 {
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 12px;
    }

    .onerilen-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .onerilen-item img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 10px;
    }

    .onerilen-item h4 {
        font-size: 14px;
        margin-top: 5px;
    }

    .onerilen-item .yeni-fiyat {
        font-size: 15px;
    }

    .onerilen-item .eski-fiyat {
        font-size: 12px;
    }
}
/* 📱 Mobilde detay alanının butona çarpmaması için boşluk */
@media (max-width: 768px) {
    .right {
        padding-bottom: 140px !important; /* sepete ekle butonundan kaçmak için */
    }
}

/* 📱 Mobilde sepete ekle sabit olsun */
@media (max-width: 768px) {
    .add-to-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 18px;
        font-size: 20px;
        z-index: 9999;
        border-radius: 0;
    }

    .right {
        padding-bottom: 140px !important;
    }
}
/* 🖥️ Masaüstünde normal davranış */
@media (min-width: 769px) {
    .add-to-cart {
        position: static !important;
        width: auto;
        padding: 14px 20px;
        border-radius: 12px;
    }
}
/* ✅ MOBİL – EBAT KUTUSU %100 GENİŞLİK, TAŞMA YOK */
@media (max-width: 768px){

  .ebat-kutu{
    width: 100%;              /* ✅ 100vw KULLANMIYORUZ → taşma biter */
    margin: 0;                /* ✅ sağ-sol boşluk sıfır */
    padding: 10px 8px;        /* ✅ ince görünüm */
    border-radius: 0;        /* ✅ flat modern */
    box-sizing: border-box;  /* ✅ hesap hatası olmaz */
  }

  .ebat-btn-wrapper{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);  
    gap: 6px;
    width: 100%;
  }

  .ebat-btn{
    width: 100%;
    padding: 7px 0;          
    font-size: 12px;
    border-radius: 8px;
    line-height: 1.1;
  }

  .stok-yazi{
    font-size: 9px;
    margin-top: 1px;
  }

}
.product-image-wrapper{
    max-width:520px;
    margin:auto;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
}

.product-image-wrapper img{
    width:100%;
    height:auto;
    display:block;
}




/* MODAL */
.image-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* İç sahne */
.modal-stage{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}

/* Görsel */
#modalImage{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  cursor: grab;

  /* ✅ İlk açılışta sığdır */
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

#modalImage.dragging{
  cursor: grabbing;
}

.modal-close{
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 34px;
  color: #fff;
  cursor: pointer;
  z-index: 10000;
}

.modal-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 44px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 14px;
  opacity: .95;
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.modal-nav:hover{
  background: rgba(255,255,255,.14);
}

.modal-prev{ left: 18px; }
.modal-next{ right: 18px; 
 
  margin: 18px 0 12px;
  text-align: center;
}



.tasarla-note {
  margin-top: 6px;
  font-size: 12px;
  color: #5a244a;
}

.neden-blok{
  margin:18px 0;
  background:#f8f5f1;
  padding:14px 16px;
  border-radius:12px;
}

.neden-blok h3{
  font-size:16px;
  margin-bottom:8px;
}

.neden-blok ul{
  margin:0;
  padding-left:18px;
}

.neden-blok li{
  margin:4px 0;
  font-size:14px;
}
.ebat-rehber{
  margin-top:12px;
  background:#f6f2ed;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
}

.ebat-rehber strong{
  display:block;
  margin-bottom:6px;
}

.ebat-rehber ul{
  margin:0;
  padding-left:16px;
}

.ebat-rehber li{
  margin:2px 0;
}

.ebat-yardim{
  margin-top:6px;
  font-size:12px;
  color:#7a6a58;
}
.tasarla-mini{
  font-size:12px;
  color:#7a6a58;
  margin-top:6px;
}

/* ===== Salon Tasarla Bloğu ===== */

.tasarla-preview{
  margin:16px 0;
  padding:14px;
  background:#f5efe8;
  border:1px solid #e2d6c8;
  border-radius:12px;
  text-align:center;

  position:relative;
  z-index:10;              /* üstte kalsın */
}

.tasarla-btn{
  display:inline-block;
  padding:12px 18px;
  background:#a08467;
  color:#fff;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  font-size:14px;

  transition:0.2s;

  position:relative;
  z-index:11;              /* tıklama garantisi */
  pointer-events:auto;     /* click garanti */
}

.tasarla-btn:hover{
  background:#8f7358;
  transform:translateY(-1px);
}

.tasarla-mini{
  margin-top:8px;
  font-size:12px;
  color:#7a6a58;
}
.teknik-ozellikler{
  margin-top:18px;
  padding:18px;
  border-radius:10px;
  background:#fafafa;
  border:1px solid #e6e0d6;
}

.teknik-ozellikler h3{
  font-size:16px;
  margin-bottom:10px;
  color:#3e3328;
  font-weight:600;
}

.teknik-ozellikler ul{
  list-style-type: disc;
  margin-left:18px;
}

.teknik-ozellikler li{
  font-size:14px;
  margin-bottom:6px;
  line-height:1.5;
  color:#4a3f35;
}
.cift-btn{
  background: linear-gradient(135deg,#c8a97e,#a08467);
  color:#fff;
}