/* ============================================================
   05-urun-detay.css — Ürün Detay Sayfası (PDP) — Sephora 1:1
   Flatsome / WooCommerce single-product sınıflarını hedefler.

   GERÇEK ÖLÇÜ — YENİDEN ÖLÇÜLDÜ (sephora.com.tr canlı PDP, Chrome DOM
   computed-style, 2026-06-01 17:44, vw1920, "Outrageous Plump Effect Gloss"
   dudak parlatıcısı PDP /p/...P4023130; önceki 10:24 OIL INFUSION ile teyit):
     • Düzen (içerik kabı ~1392, ORTALI): galeri kolonu (~%54, ana görsel
       l345→r1005) + BOŞLUK ~80px + bilgi kolonu 564px (~%46, l1085→r1649).
     • Galeri ana görsel : 660×660, radius 0 (keskin), ZEMİN ŞEFFAF, cover
     • Küçük resimler     : 5-6 adet, **46×46, radius 4px** (eski 40×40/r2px
                            DÜZELTİLDİ), SOL DİKEY RAY, **dikey adım 56px / gap
                            10px** (eski 53px/13px DÜZELTİLDİ), aktif thumb vurgulu
     • Marka (h1>span)    : 16/400 / lh24 / ls .4px / #000 / içerik BÜYÜK-HARF
     • Ürün adı (h1>span) : 24/700 / lh32 / ls .6px / #000
     • Puan SATIRI (TEK SATIR, başlık altı y336): "Açıklamaya bak" 16/400 #000
                            (ALTÇİZGİSİZ — canlı td:none, eski altçizgi DÜZELTİLDİ) +
                            yıldız 24×24 + skor "4.1/5" 16/400 + "(476 Yorumlar)"
                            16/500 ALTÇİZGİLİ — hepsi aynı satır (y336)
     • Fiyat (güncel)     : `<p>` 24/700 / lh32 / ls .6px / #000 ("699,00 TL")
                            indirimli → KIRMIZI 24/700, üstü çizili 16/400 gri
     • Uzman görüşü pill  : "Uzmanlarımızın görüşü" h56 (YENİ → .bks-expert-pill)
     • Varyant etiketi    : "Ürünün farklı renklerini keşfet:" 16/500 / ls.4
     • Varyant SEÇİCİ     : TAM-GENİŞLİK satır h56 radius8 beyaz + chevron sağ
                            (YENİ → .bks-variant-select)
     • **SEPETE EKLE (DÜZELTME) : SİYAH DOLGU** bg #000 / metin #f2f2f2 /
                            2px solid #000 / radius8 / **h52** / 16/400 / ls.4 /
                            pad 10/18 / ortalı — (eski "BEYAZ outline" YANLIŞTI →
                            canlı Sephora SİYAH dolgu; 08/09 dil birliği) hover Bisso
     • İstek listesi kalp : 52×52 beyaz / 2px #1a1a1a / radius8 (ATC ile aynı h52)
     • PDP'de adet seçici GÖRÜNMEZ (doğrulandı)
     • Yorum başlığı (H2) : "Ürün yorumu" 24/700 / lh32 / ls .6px
     • Öneri başlığı (H2) : "Görünümünü tamamla" 32/700 / lh40 / ls .8px (doğrulandı)
     • Öneri kart markası : 14/700 / lh20 / ls .35px (H3, kart tipografisi)
     • Yıldız             : Sephora siyah → Bisso KURALI gold #f1a000
   ============================================================ */

/* === DÜZEN === galeri ~%54 / BOŞLUK 80px / bilgi %46 (564) === */
.single-product div.product{ margin-top:24px; align-items:flex-start; }
.single-product div.product .product-gallery,
.single-product div.product .product-images{ width:54% !important; }
.single-product div.product .product-info,
.single-product div.product .summary.entry-summary{
  width:46% !important; padding-left:80px; /* 80px iç boşluk → görünür kolon-arası boşluk */
}
@media (max-width:849px){
  .single-product div.product .product-gallery,
  .single-product div.product .product-images,
  .single-product div.product .product-info,
  .single-product div.product .summary.entry-summary{
    width:100% !important; max-width:none; padding-left:0;
  }
}

/* === GALERİ === ana görsel 660 keskin (radius 0) ŞEFFAF zemin; SOL DİKEY küçük-resim rayı === */
.single-product .woocommerce-product-gallery{ margin:0; position:relative; }
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img{
  border-radius:0 !important; background:transparent; object-fit:cover;
}
/* masaüstü: küçük resimler görselin SOLUNDA dikey ray (GERÇEK 46px, adım 56px) */
@media (min-width:850px){
  .single-product .woocommerce-product-gallery{
    display:flex; flex-direction:row; align-items:flex-start; gap:40px;
  }
  .single-product .woocommerce-product-gallery .flex-control-thumbs{
    order:0; flex:0 0 46px; display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none;
  }
  .single-product .woocommerce-product-gallery > a,
  .single-product .woocommerce-product-gallery > figure,
  .single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{
    order:1; flex:1 1 auto; margin:0; min-width:0;
  }
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{ width:46px !important; height:46px; margin:0; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img{
  width:46px !important; height:46px; border:1px solid var(--bks-line); border-radius:4px !important; opacity:.7;
  transition:opacity var(--bks-t-fast),border-color var(--bks-t-fast);
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs .flex-active img{ opacity:1; border-color:var(--bks-black); }
/* mobil: küçük resimler yatay, görsel altında */
@media (max-width:849px){
  .single-product .woocommerce-product-gallery .flex-control-thumbs{
    display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; margin-top:12px; padding:0; list-style:none;
  }
}
/* Galeri köşe favori (kalp) — GERÇEK Sephora 32×32 glif, görsel sağ-üst === */
.single-product .bks-fav-gallery{
  position:absolute; top:16px; right:16px; z-index:3; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.single-product .bks-fav-gallery svg{ width:24px; height:24px; stroke:var(--bks-black); fill:none; transition:.15s; }
.single-product .bks-fav-gallery.is-active svg,
.single-product .bks-fav-gallery:hover svg{ stroke:var(--bks-red); fill:var(--bks-red); }

/* === MARKA (başlık üstü) === GERÇEK: 16/400 lh24 ls.4px, içerik büyük-harf === */
.single-product .product-info .product_meta .posted_in,
.single-product .product-info .product_meta .posted_in a,
.single-product .bks-brand-link,
.single-product .product-brand,
.single-product .product-brand a{
  display:block; font-size:16px !important; font-weight:400 !important; letter-spacing:.4px;
  line-height:24px; text-transform:uppercase; color:var(--bks-black) !important;
  margin:0 0 4px; text-decoration:none;
}
.single-product .bks-brand-link:hover,
.single-product .product-brand a:hover{ color:var(--bks-red) !important; }

/* === BAŞLIK (ürün adı, h1) === GERÇEK: 24/700 lh32 ls.6px === */
.single-product .product-title,
.single-product h1.product_title,
.single-product .product-info h1{
  font-size:24px !important; font-weight:700 !important; letter-spacing:.6px;
  line-height:32px !important; margin:0 0 8px !important; color:var(--bks-black); text-transform:none;
}

/* === PUAN SATIRI === TEK SATIR: açıklama-toggle + yıldız + skor + yorum sayısı ===
   GERÇEK: hepsi başlık altı tek satır y304; 16px; yıldız ALTIN (Bisso kuralı) === */
.single-product .woocommerce-product-rating,
.single-product .bks-rating-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:2px 0 14px; font-size:16px; line-height:24px; letter-spacing:.4px;
}
/* "Açıklamaya bak" — sol, GERÇEK Sephora: ALTÇİZGİSİZ 16/400 #000 (eski
   underline DÜZELTİLDİ → canlı td:none/border-bottom:0); hover'da affordans için
   kırmızı + altçizgi (yorum-sayısı linki ayrı: O underline kalır) */
.single-product .bks-desc-toggle{
  font-size:16px; font-weight:400; line-height:24px; letter-spacing:.4px;
  color:var(--bks-black); text-decoration:none; background:none; border:0; padding:0; cursor:pointer; margin-right:auto;
}
.single-product .bks-desc-toggle:hover{ color:var(--bks-red); text-decoration:underline; }
/* sayısal skor "2.8/5" 16/400 #000 */
.single-product .bks-rating-score{ font-size:16px; font-weight:400; letter-spacing:.4px; color:var(--bks-black); }
/* yorum sayısı linki "(43 Yorumlar)" 16/500 ALTÇİZGİLİ */
.single-product .woocommerce-product-rating .woocommerce-review-link,
.single-product .bks-review-count{
  color:var(--bks-black); font-size:16px; font-weight:500; letter-spacing:.4px; text-decoration:underline;
}
.single-product .woocommerce-product-rating .woocommerce-review-link:hover,
.single-product .bks-review-count:hover{ color:var(--bks-red); }
/* yıldız 24px ALTIN */
.single-product .woocommerce-product-rating .star-rating,
.single-product .bks-rating-row .star-rating{ font-size:20px; }
.single-product .star-rating:before,
.single-product .star-rating span:before{ color:var(--bks-gold) !important; }
.single-product .bks-rating-row svg.bks-star{ width:24px; height:24px; fill:var(--bks-gold); }

/* === FİYAT === GERÇEK güncel 24/700 lh32 ls.6 siyah; indirimli KIRMIZI === */
.single-product .summary .price,
.single-product .price{
  font-size:24px !important; font-weight:700 !important; line-height:32px !important; letter-spacing:.6px;
  color:var(--bks-black) !important; margin:6px 0 16px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.single-product .price del,
.single-product .price del .amount{
  color:var(--bks-mid) !important; font-weight:400 !important; font-size:16px !important; text-decoration:line-through; letter-spacing:.4px;
}
.single-product .price ins,
.single-product .price ins .amount{
  color:var(--bks-red) !important; text-decoration:none !important; font-weight:700 !important; font-size:24px !important;
}
/* indirim yüzdesi rozeti — kırmızı pill */
.single-product .bks-discount-badge,
.single-product .summary .onsale{
  display:inline-block; background:var(--bks-red); color:#fff; border-radius:var(--bks-r-pill);
  font-size:12px; font-weight:700; line-height:1; padding:5px 10px; margin:0;
  position:static; top:auto; left:auto; right:auto;
}

/* === UZMAN GÖRÜŞÜ PILL === GERÇEK: "Uzmanlarımızın görüşü" h56 satır (YENİ) === */
.single-product .bks-expert-pill{
  display:flex; align-items:center; gap:14px; min-height:56px; padding:8px 16px;
  border:1px solid var(--bks-line); border-radius:var(--bks-r-card); background:#fff; margin:0 0 18px;
}
.single-product .bks-expert-pill .bks-expert-play{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--bks-black); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.single-product .bks-expert-pill .bks-expert-title{ font-size:16px; font-weight:500; line-height:20px; color:var(--bks-black); letter-spacing:.4px; }
.single-product .bks-expert-pill .bks-expert-sub{ font-size:14px; font-weight:400; line-height:18px; color:var(--bks-charcoal); }

/* === KISA AÇIKLAMA === gövde 16/400 lh24 (Sephora PDP gövde tipografisi) === */
.single-product .product-short-description,
.single-product .woocommerce-product-details__short-description{
  color:var(--bks-charcoal); font-size:16px; line-height:24px; margin:0 0 20px;
}

/* === VARYANT ETİKETİ + TAM-GENİŞLİK SEÇİCİ + SWATCH === */
/* etiket "Ürünün farklı renklerini keşfet:" 16/500 ls.4 */
.single-product .variations label,
.single-product .bks-variant-label{
  font-size:16px !important; font-weight:500; letter-spacing:.4px; line-height:24px;
  color:var(--bks-black); margin:0 0 10px; display:block;
}
/* GERÇEK: tam-genişlik h56 radius8 beyaz seçici satır + chevron (YENİ) */
.single-product .bks-variant-select{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:56px; padding:0 18px; margin:0 0 14px;
  background:#fff; border:1.5px solid var(--bks-line); border-radius:var(--bks-r-card);
  font-size:16px; font-weight:400; letter-spacing:.4px; color:var(--bks-black); cursor:pointer;
  transition:border-color var(--bks-t-fast);
}
.single-product .bks-variant-select:hover{ border-color:var(--bks-black); }
.single-product .bks-variant-select .bks-variant-chevron{ flex:0 0 auto; width:20px; height:20px; stroke:var(--bks-black); }
.single-product .variations{ border:0; margin:0 0 18px; width:100%; }
.single-product .variations td,
.single-product .variations th{ border:0; padding:6px 0; display:block; text-align:left; }
/* GERÇEK: swatch hücresi 40×40, yatay gap 8px (ölçülen adım 48px) — eski 32px DÜZELTİLDİ */
ul.bks-swatches{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:6px 0 0; padding:0; }
.bks-swatch{
  min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--bks-line); border-radius:8px; font-size:14px; cursor:pointer; background:#fff; color:var(--bks-black);
  transition:border-color var(--bks-t-fast),transform var(--bks-t-fast);
}
.bks-swatch.is-color{ width:40px; height:40px; padding:0; border-radius:50%; }
.bks-swatch:hover{ border-color:var(--bks-black); transform:translateY(-1px); }
.bks-swatch.is-selected{ border-color:var(--bks-black); box-shadow:0 0 0 1.5px var(--bks-black) inset; }
.bks-swatch.is-disabled{ opacity:.35; pointer-events:none; text-decoration:line-through; }

/* === SEPETE EKLE === GERÇEK Sephora (DÜZELTİLDİ): SİYAH DOLGU, #f2f2f2 metin,
   2px #000, h52, radius8, 16/400, ls.4, pad 10/18, ortalı; hover Bisso kırmızı === */
.single-product form.cart{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin:6px 0 22px; }
.single-product form.cart .quantity{
  border:1.5px solid var(--bks-line); border-radius:8px; height:52px; display:inline-flex; align-items:center; overflow:hidden;
}
.single-product form.cart .quantity input.qty{
  border:0; height:50px; width:56px; text-align:center; font-size:15px; background:transparent; color:var(--bks-black);
}
.single-product button.single_add_to_cart_button{
  flex:1; min-width:240px; height:52px !important; border-radius:8px !important;
  background:var(--bks-black) !important; color:#f2f2f2 !important; border:2px solid var(--bks-black) !important;
  text-transform:none !important; letter-spacing:.4px; font-weight:400 !important; font-size:16px !important;
  line-height:24px !important; padding:10px 18px !important; display:flex; align-items:center; justify-content:center;
  transition:background var(--bks-t),color var(--bks-t),border-color var(--bks-t) !important;
}
.single-product button.single_add_to_cart_button:hover{
  background:var(--bks-red) !important; border-color:var(--bks-red) !important; color:#fff !important;
}
.single-product button.single_add_to_cart_button.disabled,
.single-product button.single_add_to_cart_button.is-outofstock{
  background:#fff !important; border-color:var(--bks-line) !important; color:var(--bks-mid) !important; cursor:not-allowed;
}
/* Favori (kalp) — ATC yanında, GERÇEK 52×52 beyaz / 2px #1a1a1a / radius8 === */
.single-product .bks-fav-btn{
  width:52px; height:52px; border:2px solid #1a1a1a; background:#fff; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; flex:0 0 auto;
}
.single-product .bks-fav-btn svg{ width:22px; height:22px; stroke:var(--bks-black); fill:none; }
.single-product .bks-fav-btn.is-active svg,
.single-product .bks-fav-btn:hover svg{ stroke:var(--bks-red); fill:var(--bks-red); }
.single-product .bks-fav-btn:hover{ border-color:var(--bks-red); }

/* Stok / kargo notu */
.single-product .bks-stock-notice{ font-size:14px; color:var(--bks-red); font-weight:500; margin:0 0 14px; letter-spacing:.4px; }
.single-product .bks-ship-notice{ font-size:14px; color:var(--bks-charcoal); margin:0 0 14px; letter-spacing:.4px; }

/* === SEKME / AKORDEON === Sephora düz-yazı; bölüm başlığı 24/700 === */
.single-product .woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--bks-line); padding:0; margin:30px 0 0; display:flex; gap:0; }
.single-product .woocommerce-tabs ul.tabs:before,
.single-product .woocommerce-tabs ul.tabs:after{ display:none; }
.single-product .woocommerce-tabs ul.tabs li{ background:transparent; border:0; margin:0 28px 0 0; padding:0; }
.single-product .woocommerce-tabs ul.tabs li:before,
.single-product .woocommerce-tabs ul.tabs li:after{ display:none; }
.single-product .woocommerce-tabs ul.tabs li a{
  padding:14px 0 !important; font-size:16px; font-weight:400; text-transform:none; letter-spacing:.4px;
  color:var(--bks-mid); border-bottom:2px solid transparent;
  transition:color var(--bks-t-fast),border-color var(--bks-t-fast);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover{ color:var(--bks-black); border-bottom-color:var(--bks-black); font-weight:700; }
.single-product .woocommerce-tabs .panel{ padding-top:22px; font-size:16px; line-height:24px; color:var(--bks-charcoal); }
.single-product .woocommerce-tabs .panel h2,
.single-product .woocommerce-Reviews h2,
.single-product #reviews .woocommerce-Reviews-title,
.single-product .bks-section-title{
  font-size:24px !important; font-weight:700 !important; line-height:32px; letter-spacing:.6px; color:var(--bks-black); margin:0 0 16px; text-transform:none;
}
/* "Açıklamaya bak" gibi metin-toggle linkleri: 16/400 altçizgili === */
.single-product .bks-readmore-toggle{
  background:none; border:0; padding:0; font-size:16px; font-weight:400; line-height:24px; letter-spacing:.4px;
  color:var(--bks-black); text-decoration:underline; cursor:pointer;
}
.single-product .bks-readmore-toggle:hover{ color:var(--bks-red); }

/* === ÖNERİ / İLGİLİ ÜRÜNLER BÖLÜM BAŞLIĞI === GERÇEK: "Görünümünü tamamla" 32/700 lh40 ls.8px === */
.single-product .related > h2,
.single-product .up-sells > h2,
.single-product .related h2.product-section-title,
.single-product .product-section-title,
.single-product .bks-pdp-section-title{
  font-size:32px !important; font-weight:700 !important; line-height:40px !important; letter-spacing:.8px;
  color:var(--bks-black); margin:0 0 24px; text-transform:none;
}
/* öneri kart markası (H3) — GERÇEK 14/700 lh20 ls.35 (kart tipografisi) */
.single-product .related .product-small .name.product-title,
.single-product .up-sells .product-small .name.product-title,
.single-product .related .product-small .category.product-cat,
.single-product .bks-rec-brand{
  font-size:14px; line-height:20px; letter-spacing:.35px;
}
.single-product .related .product-small .category.product-cat,
.single-product .bks-rec-brand{ font-weight:700; text-transform:uppercase; color:var(--bks-black); }

/* === STICKY SEPETE-EKLE BARI === */
#bks-sticky-cart,.bks-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--bks-z-sticky,100);
  background:#fff; border-top:1px solid var(--bks-line); box-shadow:0 -2px 16px rgba(0,0,0,.08);
  transform:translateY(100%); transition:transform var(--bks-t);
}
#bks-sticky-cart.is-visible,.bks-sticky-bar.is-visible{ transform:translateY(0); }
.bks-sticky-inner{ max-width:var(--bks-maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; }
.bks-sticky-meta{ display:flex; align-items:center; gap:14px; min-width:0; }
.bks-sticky-meta .bks-sticky-name{ font-size:16px; font-weight:400; color:var(--bks-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.bks-sticky-meta .bks-sticky-price{ font-size:24px; font-weight:700; letter-spacing:.6px; color:var(--bks-black); }
.bks-sticky-meta .bks-sticky-price.is-sale{ color:var(--bks-red); }
/* Sticky CTA — GERÇEK ATC ile aynı SİYAH dolgu dili, hover kırmızı === */
.bks-sticky-btn{
  height:52px; padding:0 34px; background:var(--bks-black); color:#f2f2f2; border:2px solid var(--bks-black); border-radius:8px;
  text-transform:none; font-weight:400; font-size:16px; letter-spacing:.4px; cursor:pointer;
  transition:background var(--bks-t),color var(--bks-t),border-color var(--bks-t);
}
.bks-sticky-btn:hover{ background:var(--bks-red); border-color:var(--bks-red); color:#fff; }
@media (max-width:549px){
  .bks-sticky-meta .bks-sticky-name{ display:none; }
  .bks-sticky-btn{ flex:1; padding:0; }
}

/* === ERİŞİLEBİLİRLİK === klavye :focus-visible Bisso-kırmızı odak halkası
   (06-liste / 07-markalar kalıbıyla tutarlı; eleman kendi border-radius'unu korur;
   fareyle temiz, klavyede görünür) === */
.single-product button.single_add_to_cart_button:focus-visible,
.single-product .bks-fav-btn:focus-visible,
.single-product .bks-fav-gallery:focus-visible,
.single-product .bks-variant-select:focus-visible,
.single-product .bks-desc-toggle:focus-visible,
.single-product .woocommerce-product-rating .woocommerce-review-link:focus-visible,
.single-product .bks-review-count:focus-visible,
.single-product .bks-readmore-toggle:focus-visible,
.single-product .woocommerce-tabs ul.tabs li a:focus-visible,
.bks-swatch:focus-visible,
.bks-sticky-btn:focus-visible{
  outline:2px solid var(--bks-red); outline-offset:2px;
}