/* ==========================================================================
   ÜRÜN SEKMELERİ
   Çubuk yapışkan: 25 KB'lık açıklamayı okurken diğer sekmeye geçmek için
   başa dönmek gerekmiyor. Başlığın hemen altına oturuyor.
   ========================================================================== */

.wpt-usekme{ margin:34px 0 0 }

.wpt-usekme-cubuk{
  position:sticky; top:calc(var(--wpt-head-h) + var(--wpt-admin-h) - 6px); z-index:3;
  display:flex; gap:8px; align-items:center;
  min-height:var(--wpt-usekme-h);   /* bölüm rayı bu boya göre konumlanıyor */
  margin:0 0 26px; padding:9px 0;
  background:var(--wpt-paper);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.wpt-usekme-cubuk::-webkit-scrollbar{ display:none }

.wpt-usekme-btn{
  flex:0 0 auto;
  height:44px; padding:0 22px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface);
  font:inherit; font-size:14px; font-weight:600; white-space:nowrap;
  color:var(--wpt-ink-2); cursor:pointer;
  box-shadow:var(--wpt-golge-sm);
  transition:border-color var(--wpt-gecis), color var(--wpt-gecis),
             box-shadow var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-usekme-btn:hover{
  border-color:transparent; color:var(--wpt-brand);
  transform:translateY(-1px); box-shadow:var(--wpt-parilti);
}
.wpt-usekme-btn:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }

.wpt-usekme-btn.is-aktif{
  border-color:transparent;
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
             0 4px 14px -4px rgba(4,80,160,.55),
             0 14px 30px -14px rgba(4,80,160,.5);
}
.wpt-usekme-btn.is-aktif:hover{ color:var(--wpt-btn-ink); transform:none }

.wpt-upanel[hidden]{ display:none }
/* Panel odaklanabilir (tabindex="0") ama odak halkası bütün paneli
   çerçevelemesin; klavye kullanıcısı zaten sekmeden geliyor. */
.wpt-upanel:focus{ outline:none }

/* Sekme içindeki bölümler kendi başlıklarını tekrar etmesin:
   sekme adı zaten "Soru & Cevap" diyor. */
.wpt-upanel > .wpt-sorular{ margin-top:0 }
.wpt-upanel > .wpt-sorular > .wpt-sechead{ display:none }

/* Değerlendirme paneli — WooCommerce'in kendi işaretlemesi */
.wpt-upanel #reviews{ margin:0 }
.wpt-upanel #reviews h2,
.wpt-upanel #reviews h3{ font-size:19px; letter-spacing:var(--wpt-track-m) }
.wpt-upanel .woocommerce-Reviews-title{ margin:0 0 18px }
.wpt-upanel .commentlist{ margin:0 0 26px; padding:0; list-style:none; display:grid; gap:12px }
.wpt-upanel .commentlist .comment_container{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-grad-kagit); box-shadow:var(--wpt-golge-sm);
}
.wpt-upanel .commentlist img.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
}
.wpt-upanel .woocommerce-review__author{ font-weight:700; color:var(--wpt-ink) }
.wpt-upanel .woocommerce-review__published-date{
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); color:var(--wpt-ink-3);
}
.wpt-upanel .woocommerce-noreviews{
  margin:0 0 22px; padding:22px;
  border:1px dashed var(--wpt-line-2); border-radius:var(--wpt-r);
  background:var(--wpt-surface); text-align:center; color:var(--wpt-ink-3);
}
/* Yorum formu — tema form dilinde */
.wpt-upanel #review_form_wrapper{
  padding:24px; border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r); background:var(--wpt-surface-2);
}
.wpt-upanel .comment-form input[type="text"],
.wpt-upanel .comment-form input[type="email"],
.wpt-upanel .comment-form textarea{
  width:100%; padding:12px 15px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-sm); font-size:14.5px; color:var(--wpt-ink);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.wpt-upanel .comment-form input[type="text"]:focus,
.wpt-upanel .comment-form input[type="email"]:focus,
.wpt-upanel .comment-form textarea:focus{
  border-color:var(--wpt-brand); outline:none;
  box-shadow:0 0 0 4px var(--wpt-brand-soft);
}
.wpt-upanel .comment-form label{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--wpt-ink-2);
}
.wpt-upanel .comment-form p{ margin:0 0 14px }
/* ⚠ TEXTAREA VARSAYILAN 8 SATIRDI ve panelin yarısını kaplıyordu. */
.wpt-upanel .comment-form textarea{ min-height:120px; resize:vertical }
/* Ad ve e-posta yan yana — alt alta iki tam genişlik alan gereksiz yer yiyor. */
@media (min-width:640px){
  .wpt-upanel .comment-form-author,
  .wpt-upanel .comment-form-email{ display:inline-block; width:calc(50% - 7px) }
  .wpt-upanel .comment-form-author{ margin-right:14px }
}
.wpt-upanel .comment-form-cookies-consent{
  display:flex; align-items:flex-start; gap:9px;
  font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3);
}
.wpt-upanel .comment-form-cookies-consent input{ margin-top:2px; flex:0 0 auto }
.wpt-upanel .comment-form-cookies-consent label{ margin:0; font-weight:400 }
.wpt-upanel .comment-notes{
  margin:0 0 16px; font-size:var(--wpt-fs-sm); line-height:1.6; color:var(--wpt-ink-3);
}
.wpt-upanel .comment-form .required{ color:var(--wpt-amber-ink) }
.wpt-upanel .comment-form .submit:hover{ filter:brightness(1.06) }
.wpt-upanel .comment-form .submit{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--wpt-btn-buyuk); padding:0 26px;
  border:0; border-radius:var(--wpt-r-hap);
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  font-size:15px; font-weight:600; cursor:pointer;
  box-shadow:0 3px 10px -3px rgba(4,80,160,.55);
}
/* ⚠ YILDIZLAR HAM METİN OLARAK ÇIKIYORDU: "1/5 yıldız 2/5 yıldız …".
   Sebep, WooCommerce'in yıldız ikon fontunu `woocommerce-general` stilinin
   taşıması — o stil temada bilerek kuyruktan çıkarılmış durumda. Yani widget
   hiç çizilmiyor, yalnızca bağlantı metinleri görünüyordu.
   Yıldızlar burada sıfırdan kuruluyor. */
.wpt-upanel .comment-form-rating{ margin-bottom:18px }
.wpt-upanel .stars{
  display:flex; align-items:center; gap:4px; margin:0;
}
.wpt-upanel .stars > span{ display:inline-flex; gap:4px }
.wpt-upanel .stars a{
  /* Metin gizlenir, yerine yıldız çizilir. `font-size:0` ekran okuyucudan
     GİZLEMEZ — bağlantı metni erişilebilir ağaçta duruyor. */
  font-size:0; line-height:1; text-decoration:none;
  color:var(--wpt-line-2);
  transition:color var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-upanel .stars a::before{
  content:"★"; font-size:27px; line-height:1; display:block;
}
.wpt-upanel .stars a:hover{ transform:scale(1.12) }

/* Fare üstündeyken: hepsi amber, İMLEÇTEN SONRAKİLER geri griye döner.
   "Öncekileri boya" seçilemediği için tersi yapılıyor. */
.wpt-upanel .stars > span:hover a{ color:var(--wpt-amber) }
.wpt-upanel .stars a:hover ~ a{ color:var(--wpt-line-2) }

/* Seçildikten sonra: WooCommerce `.selected` ve `.active` sınıflarını ekler. */
.wpt-upanel .stars.selected a{ color:var(--wpt-amber) }
.wpt-upanel .stars.selected a.active ~ a{ color:var(--wpt-line-2) }
.wpt-upanel .stars a:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:3px }

/* TESLİMAT PANELİ
   ⚠ Dört başlık ve dört paragraftı; hepsi aynı puntoda, ayrımsız. "Garanti
   kaç yıl" diye bakan kişi metin duvarını okumak zorundaydı. Artık kart
   ızgarası: ikon, başlık, KISA CEVAP, sonra ayrıntı. */
.wpt-kargo-sekme{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--wpt-gap);
}
.wpt-kargo-kart{
  position:relative; overflow:hidden;
  padding:20px 22px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-grad-kagit);
  box-shadow:var(--wpt-golge-sm);
}
.wpt-kargo-kart::before{
  content:""; position:absolute; left:0; top:0; height:var(--wpt-tick); width:56px;
  background:var(--wpt-amber);
}
.wpt-kargo-kart header{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px; padding-bottom:12px;
  border-bottom:1px solid var(--wpt-line);
}
.wpt-kargo-ikon{
  flex:0 0 auto; display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--wpt-r-sm);
  background:var(--wpt-brand-soft); color:var(--wpt-brand);
}
.wpt-kargo-kart h3{
  margin:0; font-size:var(--wpt-fs-md); font-weight:700;
  letter-spacing:var(--wpt-track-m); color:var(--wpt-ink);
}
/* Kısa cevap — kartın en çok bakılan satırı. */
.wpt-kargo-kart header b{
  display:block; margin-top:2px;
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-amber-ink);
}
.wpt-upanel .wpt-kargo-sekme p{
  margin:0 0 9px; font-size:var(--wpt-fs-sm); line-height:1.66; color:var(--wpt-ink-2);
}
.wpt-upanel .wpt-kargo-sekme p:last-child{ margin-bottom:0 }
.wpt-kargo-bag a{ font-weight:600; color:var(--wpt-brand) }

@media (max-width:640px){
  .wpt-usekme-cubuk{ top:calc(var(--wpt-head-h) + var(--wpt-admin-h) - 14px); gap:6px }
  .wpt-usekme-btn{ height:40px; padding:0 16px; font-size:13px }
}
@media (prefers-reduced-motion: reduce){
  .wpt-usekme-btn{ transition:none }
}

/* ==========================================================================
   DEĞERLENDİRMELER — özet paneli ve yorum kartları

   ⚠ WOOCOMMERCE'İN KENDİ GÖRÜNÜMÜ HİÇ YÜKLENMİYOR. Tema
   `woocommerce-general.css`i kuyruktan çıkarıyor; o dosya gitmeden yıldızlar
   `star` yazı tipiyle çiziliyordu. Yıldız artık SVG, liste de burada.

   Düzen Trendyol/Hepsiburada mantığında (kullanıcının isteği): önce toplu
   sayı, sonra tek tek yorumlar. Ziyaretçi "kaç puan / kaç kişi" sorusunu
   tek bakışta yanıtlayıp okumaya karar veriyor.
   ========================================================================== */

.wpt-puan-panel{
  display:grid; gap:clamp(16px,2.4vw,30px);
  grid-template-columns:1fr;
  align-items:center;
  margin:0 0 var(--wpt-gap);
  padding:clamp(18px,2.4vw,26px);
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-lg);
}
@media (min-width:640px){
  .wpt-puan-panel{ grid-template-columns:auto minmax(0,1fr) auto }
}
/* Yazma düğmesi panelin sağ ucunda; dar ekranda kendi satırına iniyor. */
.wpt-puan-yaz{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--wpt-btn); padding:0 18px;
  border:1px solid var(--wpt-brand); border-radius:var(--wpt-r-hap);
  color:var(--wpt-brand); background:var(--wpt-surface);
  font-size:var(--wpt-fs-sm); font-weight:700; white-space:nowrap;
  transition:background var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-puan-yaz:hover{
  background:var(--wpt-brand); color:var(--wpt-btn-ink); text-decoration:none;
}
.wpt-puan-yaz:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }

.wpt-puan-buyuk{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding-right:clamp(16px,2.4vw,30px);
}
@media (min-width:640px){
  .wpt-puan-buyuk{ border-right:1px solid var(--wpt-line) }
}
.wpt-puan-buyuk b{
  font-size:clamp(38px,5vw,52px); font-weight:800; line-height:1;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink);
  font-variant-numeric:tabular-nums;
}
.wpt-puan-buyuk span{
  font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3); white-space:nowrap;
}

/* --- Dağılım çubukları --- */
.wpt-puan-dagilim{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.wpt-puan-dagilim li{
  display:grid; grid-template-columns:34px minmax(0,1fr) 40px;
  align-items:center; gap:10px;
}
.wpt-puan-dagilim-et{
  font-size:var(--wpt-fs-sm); font-weight:600; color:var(--wpt-ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.wpt-puan-cubuk{
  display:block; height:8px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface-2); overflow:hidden;
}
.wpt-puan-dolu{
  display:block; height:100%; border-radius:inherit;
  background:var(--wpt-amber);
}
.wpt-puan-dagilim-sayi{
  font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3); text-align:right;
  font-variant-numeric:tabular-nums;
}
/* ⚠ GENİŞLİKLER SINIF OLARAK HAZIR. `style="width:%"` satır içi CSS
   olurdu ve temanın "ön yüzde 0 KB" kuralını bozardı. Yüzde 5'lik
   basamağa yuvarlanıyor — göz farkı okumuyor. */
.wpt-puan-dolu.is-y0{ width:0% }
.wpt-puan-dolu.is-y5{ width:5% }
.wpt-puan-dolu.is-y10{ width:10% }
.wpt-puan-dolu.is-y15{ width:15% }
.wpt-puan-dolu.is-y20{ width:20% }
.wpt-puan-dolu.is-y25{ width:25% }
.wpt-puan-dolu.is-y30{ width:30% }
.wpt-puan-dolu.is-y35{ width:35% }
.wpt-puan-dolu.is-y40{ width:40% }
.wpt-puan-dolu.is-y45{ width:45% }
.wpt-puan-dolu.is-y50{ width:50% }
.wpt-puan-dolu.is-y55{ width:55% }
.wpt-puan-dolu.is-y60{ width:60% }
.wpt-puan-dolu.is-y65{ width:65% }
.wpt-puan-dolu.is-y70{ width:70% }
.wpt-puan-dolu.is-y75{ width:75% }
.wpt-puan-dolu.is-y80{ width:80% }
.wpt-puan-dolu.is-y85{ width:85% }
.wpt-puan-dolu.is-y90{ width:90% }
.wpt-puan-dolu.is-y95{ width:95% }
.wpt-puan-dolu.is-y100{ width:100% }

/* --- Yorum listesi --- */
.wpt-upanel .commentlist,
.wpt-upanel ol.commentlist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--wpt-gap-sm);
}
.wpt-yorum-kart{ margin:0; padding:0; list-style:none }
.wpt-yorum-govde{
  padding:16px 18px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r);
  transition:border-color var(--wpt-gecis);
}
.wpt-yorum-govde:hover{ border-color:var(--wpt-line-2) }

.wpt-yorum-ust{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-bottom:9px;
}
/* Ad baş harfi — 14 yorumun 14'ünde aynı boş gri Gravatar siluetinin
   yerine. Dış istek de yok. */
.wpt-yorum-harf{
  flex:0 0 auto;
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%;
  background:var(--wpt-brand-soft); color:var(--wpt-brand);
  font-size:16px; font-weight:800; line-height:1;
}
.wpt-yorum-kim{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.wpt-yorum-kim b{ font-size:var(--wpt-fs-md); font-weight:700; color:var(--wpt-ink) }
.wpt-yorum-kim time{ font-size:var(--wpt-fs-xs); color:var(--wpt-ink-3) }
.wpt-yorum-puan{ margin-left:auto; display:inline-flex }

.wpt-yorum-metin p{
  margin:0 0 8px; font-size:var(--wpt-fs-md); line-height:1.68;
  color:var(--wpt-ink-2); max-width:78ch;
}
.wpt-yorum-metin p:last-child{ margin-bottom:0 }
.wpt-yorum-bekliyor{
  margin:9px 0 0; padding:7px 11px;
  background:var(--wpt-uyari-soft); color:var(--wpt-uyari);
  border-radius:var(--wpt-r-sm);
  font-size:var(--wpt-fs-sm);
}

/* ⚠ ÇEKİRDEĞİN BAŞLIĞI GİZLENMİYOR, BİÇİMLENDİRİLİYOR.
   "… için 14 değerlendirme" satırı ekran okuyucu için de anlamlı; yalnızca
   özet panelinin altında ikinci kez rakam vermesin diye küçültülüyor. */
.wpt-upanel #reviews h2,
.wpt-upanel .woocommerce-Reviews-title{
  margin:0 0 12px; font-size:var(--wpt-fs-md); font-weight:700;
  color:var(--wpt-ink-2);
}
.wpt-upanel .woocommerce-noreviews{
  margin:0; padding:14px 16px;
  background:var(--wpt-surface-2); border-radius:var(--wpt-r);
  font-size:var(--wpt-fs-sm); color:var(--wpt-ink-2);
}

/* --- Değerlendirme formu ---
   ⚠ ÇEKİRDEĞİN FORMU DA TASARIMSIZ DÜŞÜYORDU (aynı sebep: dequeue edilen
   `woocommerce-general.css`). Alanlar sitenin form diline bağlanıyor;
   puan seçici zaten site geneli `select` taban kuralını alıyor. */
#review_form_wrapper{
  margin-top:var(--wpt-gap);
  padding:clamp(18px,2.4vw,26px);
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-lg);
  /* Çapayla gelindiğinde yapışkan başlığın altında kalmasın. */
  scroll-margin-top:calc(var(--wpt-head-h) + var(--wpt-usekme-h) + 20px);
}
#review_form_wrapper .comment-reply-title{
  display:block; margin:0 0 6px;
  font-size:var(--wpt-fs-lg); font-weight:800;
  letter-spacing:var(--wpt-track-m); color:var(--wpt-ink);
}
#review_form_wrapper .comment-notes{
  margin:0 0 16px; font-size:var(--wpt-fs-sm); color:var(--wpt-ink-3);
}
#review_form_wrapper .comment-form{
  display:flex; flex-direction:column; gap:14px;
}
#review_form_wrapper .comment-form > p,
#review_form_wrapper .comment-form-rating{ margin:0 }
#review_form_wrapper label{
  display:block; margin-bottom:6px;
  font-size:var(--wpt-fs-sm); font-weight:600; color:var(--wpt-ink);
}
#review_form_wrapper .required{ color:var(--wpt-kotu) }
#review_form_wrapper input[type=text],
#review_form_wrapper input[type=email],
#review_form_wrapper textarea{
  width:100%; padding:11px 13px;
  font-family:inherit; font-size:var(--wpt-fs-md); color:var(--wpt-ink);
  background-color:var(--wpt-paper);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  transition:border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
#review_form_wrapper textarea{ line-height:1.6; resize:vertical; min-height:120px }
#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus{
  outline:none; border-color:var(--wpt-brand);
  box-shadow:0 0 0 3px var(--wpt-brand-soft);
}
#review_form_wrapper .comment-form-cookies-consent{
  display:flex; align-items:flex-start; gap:9px;
  font-size:var(--wpt-fs-sm); color:var(--wpt-ink-2);
}
#review_form_wrapper .comment-form-cookies-consent label{ margin:0; font-weight:400 }
#review_form_wrapper .form-submit{ margin:0 }
#review_form_wrapper input[type=submit]{
  min-height:var(--wpt-btn-buyuk); padding:0 26px;
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  border:0; border-radius:var(--wpt-r-hap);
  box-shadow:var(--wpt-golge-btn);
  font-family:inherit; font-size:var(--wpt-fs-md); font-weight:700;
  cursor:pointer;
  transition:filter var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
#review_form_wrapper input[type=submit]:hover{
  filter:brightness(1.07); box-shadow:var(--wpt-golge-btn-h);
}
#review_form_wrapper input[type=submit]:focus-visible{
  outline:2px solid var(--wpt-brand); outline-offset:3px;
}
@media (max-width:639px){
  .wpt-puan-yaz{ width:100% }
}

/* --- Değerlendirme formu: ad ve e-posta yan yana ---
   ⚠ SIRA PHP'DE, HİZA CSS'TE. `comment_form_fields` alanları
   author → email → comment olarak diziyor; burada ilk ikisi aynı satıra
   alınıyor. `:has()` yerine doğrudan sınıflar kullanılıyor — WordPress
   bu alanlara sabit `comment-form-author` / `comment-form-email`
   sınıflarını basıyor. */
@media (min-width:620px){
  #review_form_wrapper .comment-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px 16px;
    align-items:start;
  }
  #review_form_wrapper .comment-form > *{ grid-column:1 / -1 }
  #review_form_wrapper .comment-form-author{ grid-column:1 / 2 }
  #review_form_wrapper .comment-form-email{ grid-column:2 / 3 }
}
