/* css/sayfa/urun-detay.css — genel/urun-detay.blade.php içindeki gömülü <style>'dan taşındı (2026-09-30, aciklama.md #11).
   Bu dosya artık TEK kaynak: stili burada değiştirin. */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, sans-serif; }
:root {
  --mor:#A621D8; --magenta:#E6358F; --sari:#FFD23F; --gri:#f7f7f7;
  --koyu:#1a1a1a; --beyaz:#fff; --golge:0 4px 20px rgba(166,33,216,.12);
  --gradient:linear-gradient(135deg,var(--mor),var(--magenta));
}
body { background:var(--gri); color:var(--koyu); line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1280px; margin:0 auto; padding:0 20px; }

/* HEADER */
header {
  background:var(--beyaz); padding:14px 0; box-shadow:var(--golge);
  position:sticky; top:0; z-index:100;
}
.header-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; }
.logo { font-size:28px; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; }
.logo span { color:var(--sari); -webkit-text-fill-color:var(--sari); }
.search-box { justify-self:center; width:100%; position:relative; max-width:520px; }
.search-box input {
  width:100%; padding:11px 48px 11px 18px; border:2px solid #eee;
  border-radius:12px; font-size:14px; outline:none; background:var(--gri);
}
.search-box input:focus { border-color:var(--mor); background:var(--beyaz); }
.search-box button {
  position:absolute; right:4px; top:4px; bottom:4px; width:38px;
  background:var(--gradient); border:none; border-radius:50%; color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.header-icons { display:flex; gap:8px; align-items:center; margin-left:auto; }
.icon-btn {
  position:relative; background:none; border:none; cursor:pointer;
  color:var(--koyu); width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.icon-btn:hover { background:var(--gri); color:var(--mor); }
.icon-btn svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn .badge {
  position:absolute; top:2px; right:2px; background:var(--magenta);
  color:#fff; font-size:10px; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.header-divider { width:1px; height:28px; background:#e0e0e0; margin:0 4px; }
.header-user {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:6px 14px 6px 6px; border-radius:12px; border:1.5px solid #eee; transition:.3s;
}
.header-user:hover { border-color:var(--mor); background:#faf5fc; }
.header-user-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--gradient);
  display:flex; align-items:center; justify-content:center;
}
.header-user-avatar svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.header-user-text { font-size:13px; font-weight:600; }
.btn-guest { padding:9px 18px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-guest.outline { background:none; border:1.5px solid var(--mor); color:var(--mor); }
.btn-guest.outline:hover { background:#faf5fc; }
.btn-guest.filled { background:var(--gradient); border:none; color:#fff; }

/* BREADCRUMB */
.breadcrumb {
  max-width:1280px; margin:20px auto; padding:0 20px;
  font-size:13px; color:#888; display:flex; flex-wrap:wrap; gap:6px;
}
.breadcrumb a { color:var(--mor); transition:.3s; }
.breadcrumb a:hover { color:var(--magenta); }
.breadcrumb span.sep { color:#ccc; }

/* ÜRÜN DETAY — 3 GERÇEK grid item: galeri-wrap / bilgi-aksiyon / kampanya-satıcı
   (Trendyol tarzı düzen, kullanıcı referansı 2026-09-07). DİKKAT: grid-template-columns
   ile item sayısı birebir eşleşmeli — aradaki thumb-col+gallery ayrı item olursa
   otomatik yerleşim 4. item'ı (product-info) yanlış sütuna kaydırır (bulundu/düzeltildi
   2026-09-07: masaüstünde bile product-info dar sağ sütuna sıkışıyordu). Bu yüzden
   thumb-col + gallery burada TEK bir .gallery-wrap içinde birleştirildi. */
.product-detail {
  max-width:1280px; margin:0 auto 40px; padding:0 20px;
  display:grid; grid-template-columns:1fr 1.25fr 300px; gap:24px; align-items:start;
}
/* Galeri sütunu, ürün bilgisi sütunuyla (ortadaki) AYNI yükseklikte olacak
   şekilde germe (kullanıcı talebi 2026-09-08: "ana resmi uzat, alt sıradaki
   küçük resimler Sepete Ekle/Şimdi Al ile aynı hizada olsun") — sadece bu
   sütun stretch, sağ sütun (satıcı kutusu) kendi doğal boyutunda kalıyor. */
.gallery-wrap { display:flex; flex-direction:column; gap:12px; position:sticky; top:100px; align-self:stretch; z-index:5; }

/* GALERİ — ana görsel üstte + küçük resimler ALTINDA yatay şerit (gerekirse
   2 satıra sarar), kullanıcı talebi 2026-09-07: sol dikey şerit değil. */
.thumb-col {
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px; order:2;
}
.gallery { min-width:0; order:1; display:flex; flex-direction:column; flex:1; position:relative; }
.main-image {
  width:100%; flex:1; min-height:420px; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#f0e6f7,#fce4f0);
  margin-bottom:15px; position:relative; cursor:zoom-in;
}
.main-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.main-image:hover img { transform:scale(1.05); }
.main-image .discount-badge {
  position:absolute; top:20px; left:20px; background:var(--magenta);
  color:#fff; padding:8px 16px; border-radius:12px; font-weight:700; font-size:14px;
}
.main-image .fav-btn {
  position:absolute; top:20px; right:20px; width:44px; height:44px;
  background:rgba(255,255,255,.95); border:none; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.3s; backdrop-filter:blur(4px);
}
.main-image .fav-btn:hover { background:var(--magenta); }
.main-image .fav-btn:hover svg { stroke:#fff; }
.main-image .fav-btn svg { width:22px; height:22px; stroke:#666; fill:none; stroke-width:2; transition:.3s; }
.main-image .fav-btn.liked svg { stroke:var(--magenta); fill:var(--magenta); }
.thumbnails { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.thumb {
  aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; transition:.3s; background:#f0e6f7; flex-shrink:0;
}
.thumb-col .thumb { width:100%; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb.active, .thumb:hover { border-color:var(--magenta); }

/* BÜYÜTEÇ — ana görsele tıklayınca sağında büyütülmüş halini gösteren panel
   (kullanıcı talebi 2026-09-08: tıkla, mouse hareketiyle mercek gibi gezdir;
   tekerlek/wheel ile de galeri resimleri arasında geçiş yapılabilir). Sadece
   1024px üstünde anlamlı (dar ekranda sağda yer yok) — bkz. media query. */
.zoom-panel {
  position:absolute; top:0; left:calc(100% + 20px); width:420px; height:100%;
  background-repeat:no-repeat; background-size:220%; border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,.25); z-index:50; background-color:#fff;
  pointer-events:none; border:1px solid #eee;
}
@media (max-width:1024px) {
  .zoom-panel { display:none; }
}

/* SAĞ SÜTUN — kampanya + satıcı kutusu (Trendyol'un sağ dar sütunu) */
.right-col { display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
.right-box { background:var(--beyaz); border-radius:12px; padding:18px; box-shadow:var(--golge); }
.right-box h5 { font-size:13px; font-weight:700; color:var(--mor); margin-bottom:10px; }
.campaign-item { display:flex; align-items:center; gap:10px; font-size:12.5px; color:#555; padding:8px 0; border-bottom:1px solid #f0f0f0; }
.campaign-item:last-child { border-bottom:none; }
.campaign-item svg { width:18px; height:18px; stroke:var(--mor); fill:none; stroke-width:2; flex-shrink:0; }
.kupon-banner {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; color:var(--mor); font-weight:700; font-size:13.5px;
  border:1.5px dashed var(--mor);
}
.kupon-banner:hover { background:#faf5fc; }
.kupon-banner .kupon-badge {
  background:var(--sari); color:var(--koyu); font-size:11.5px; font-weight:800;
  padding:2px 9px; border-radius:12px;
}
.seller-box-v2 .seller-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.seller-box-v2 .seller-header-left { display:flex; align-items:center; gap:12px; }
.seller-box-v2 .seller-logo { margin:0; width:46px; height:46px; font-size:17px; flex-shrink:0; }
.seller-box-v2 h5 { font-size:15px; margin-bottom:2px; }
.seller-box-v2 .seller-meta { color:#888; font-size:11.5px; }
.seller-box-v2 .seller-puan { display:inline-flex; align-items:center; gap:4px; background:#f0e6f7; color:var(--mor); font-weight:700; font-size:12px; padding:3px 10px; border-radius:12px; flex-shrink:0; }
.seller-box-v2 .seller-btn { width:100%; margin-top:10px; padding:11px; border:none; border-radius:10px; font-weight:700; cursor:pointer; color:#fff; font-size:13.5px; transition:.2s; }
.seller-box-v2 .seller-btn:hover { opacity:.9; }
.seller-box-v2 .btn-takip { background:linear-gradient(135deg,var(--magenta),var(--mor)); }
.seller-box-v2 .btn-takip.takipte { background:var(--gri); color:var(--koyu); }
.seller-box-v2 .btn-soru { background:var(--mor); }
.seller-box-v2 .seller-visit { background:var(--gradient); }

/* ÜRÜN INFO */
.product-info { padding:10px 0; }
.product-brand {
  display:inline-block; padding:5px 12px; background:#f0e6f7;
  color:var(--mor); border-radius:12px; font-size:12px; font-weight:600;
  margin-bottom:12px;
}
.product-title { font-size:22px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.product-rating { display:flex; align-items:center; gap:10px; margin-bottom:15px; font-size:14px; }
.stars { color:var(--sari); font-size:16px; }
.rating-count { color:#888; }
/* Ürün videosu linki (kullanıcı talimatı 2026-09-24) */
.urun-video-link { display:inline-flex; align-items:center; gap:8px; margin:-4px 0 15px; padding:7px 14px 7px 8px; border-radius:12px; background:#fdf0f7; color:var(--magenta); font-weight:700; font-size:13.5px; text-decoration:none; border:1.5px solid #f7c6df; transition:.2s; }
.urun-video-link:hover { background:var(--magenta); color:#fff; border-color:var(--magenta); }
.urun-video-ikon { width:24px; height:24px; border-radius:50%; background:var(--magenta); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; padding-left:2px; }
.urun-video-link:hover .urun-video-ikon { background:#fff; color:var(--magenta); }
.rating-count a { color:var(--mor); }
.product-price-box {
  background:linear-gradient(135deg,#fce4f0,#f0e6f7); border-radius:12px;
  padding:20px; margin-bottom:20px;
}
.price-row { display:flex; align-items:baseline; gap:12px; margin-bottom:5px; }
.price-old { text-decoration:line-through; color:#999; font-size:18px; }
.price-new { color:var(--magenta); font-size:32px; font-weight:800; }
.price-discount {
  display:inline-block; background:var(--magenta); color:#fff;
  padding:3px 10px; border-radius:12px; font-size:12px; font-weight:700;
}
.installment { font-size:13px; color:#666; margin-top:5px; }

/* SEÇENEKLER */
.option-group { margin-bottom:20px; }
.option-label {
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; font-weight:600; margin-bottom:10px;
}
.option-label a { color:var(--mor); font-size:12px; font-weight:500; }
.color-options { display:flex; gap:10px; flex-wrap:wrap; }
.color-btn {
  width:44px; height:44px; border-radius:50%; border:2px solid #eee;
  cursor:pointer; transition:.3s; position:relative;
}
.color-btn:hover { transform:scale(1.1); }
.color-btn.selected { border-color:var(--magenta); box-shadow:0 0 0 3px rgba(230,53,143,.2); }
.color-btn::after {
  content:attr(data-name); position:absolute; bottom:-20px; left:50%;
  transform:translateX(-50%); font-size:11px; color:#666; white-space:nowrap;
  opacity:0; transition:.3s;
}
.color-btn:hover::after { opacity:1; }

.size-options { display:flex; gap:8px; flex-wrap:wrap; }
.size-btn {
  min-width:50px; padding:10px 14px; border:2px solid #eee; border-radius:10px;
  background:var(--beyaz); cursor:pointer; font-size:14px; font-weight:600;
  transition:.3s; text-align:center;
}
.size-btn:hover { border-color:var(--mor); }
.size-btn.selected { border-color:var(--magenta); background:#fce4f0; color:var(--magenta); }
.size-btn.out { opacity:.4; cursor:not-allowed; text-decoration:line-through; }

.quantity-box {
  display:flex; align-items:center; gap:15px; background:var(--gri);
  padding:8px 15px; border-radius:12px; width:fit-content;
  border:1px solid #d0d0d0;
}
/* Kargo Tercihi açılır kutusu: çerçevesiz qty-input stilini alıyordu, alan belli olmuyordu */
.qty-input.kargo-secim {
  border:1px solid #d0d0d0; border-radius:12px; background:var(--beyaz); cursor:pointer;
}
.qty-input.kargo-secim:focus { border-color:var(--mor); }
.qty-btn {
  width:32px; height:32px; border:none; background:var(--beyaz);
  border-radius:8px; cursor:pointer; font-size:18px; font-weight:700;
  color:var(--mor); transition:.3s;
}
.qty-btn:hover { background:var(--mor); color:#fff; }
.qty-input {
  width:50px; text-align:center; border:none; background:transparent;
  font-size:16px; font-weight:700; outline:none;
}

/* AKSİYON BUTONLARI */
.action-buttons { display:flex; gap:10px; margin:25px 0; }
.btn-cart {
  flex:1; padding:15px; background:var(--gradient); color:#fff;
  border:none; border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; transition:.3s; display:flex; align-items:center;
  justify-content:center; gap:8px;
}
.btn-cart { white-space:nowrap; } /* "Kargo Bedava" rozeti yanındayken "Sepete Ekle" yazısı iki satıra bölünmesin */
.btn-cart:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(166,33,216,.3); }
.btn-buy {
  flex:1; padding:15px; background:var(--sari); color:var(--koyu);
  border:none; border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; transition:.3s; order:-1; display:flex; align-items:center;
  justify-content:center; gap:6px;
}
.btn-buy:hover { filter:brightness(.95); transform:translateY(-2px); }
/* PAZARLIK YAP (2026-09-19) — sadece pazarlığa açık ürünlerde render edilir */
.btn-pazarlik {
  width:100%; margin:-12px 0 20px; padding:14px; background:var(--beyaz); color:var(--mor);
  border:2px solid var(--mor); border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; transition:.3s; font-family:inherit;
}
.btn-pazarlik:hover { background:var(--mor); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(166,33,216,.25); }
.pzr-overlay {
  position:fixed; inset:0; background:rgba(26,26,46,.55); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.pzr-overlay.acik { display:flex; }
.pzr-kutu {
  background:#fff; border-radius:12px; width:100%; max-width:460px; max-height:92vh;
  overflow-y:auto; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.25); position:relative;
}
.pzr-kapat {
  position:absolute; top:12px; right:14px; width:32px; height:32px; border:none; border-radius:50%;
  background:var(--gri); font-size:18px; cursor:pointer; color:#666;
}
.pzr-kutu h3 { font-size:18px; margin-bottom:4px; color:var(--koyu); padding-right:30px; }
.pzr-urun { font-size:13px; color:#666; margin-bottom:14px; }
.pzr-urun b { color:var(--mor); }
.pzr-alan { margin-bottom:12px; }
.pzr-alan label { display:block; font-size:12.5px; font-weight:700; margin-bottom:4px; color:var(--koyu); }
.pzr-alan input, .pzr-alan textarea {
  width:100%; padding:11px 12px; border:1.5px solid #e2e2e8; border-radius:10px;
  font-size:14px; font-family:inherit; outline:none; background:#fff;
}
.pzr-alan input:focus, .pzr-alan textarea:focus { border-color:var(--mor); }
.pzr-alan textarea { resize:vertical; min-height:70px; }
.pzr-iki { display:grid; grid-template-columns:110px 1fr; gap:10px; }
.pzr-ipucu { font-size:11.5px; color:#888; margin-top:3px; }
.pzr-bilgi {
  background:#f6e9fc; border-radius:10px; padding:10px 12px; font-size:12.5px;
  color:#5a1a7a; margin:4px 0 14px; line-height:1.5;
}
.pzr-hata { display:none; background:#fde8e8; color:#b3261e; border-radius:10px; padding:9px 12px; font-size:12.5px; margin-bottom:12px; }
.pzr-gonder {
  width:100%; padding:14px; background:var(--gradient); color:#fff; border:none; border-radius:12px;
  font-weight:700; font-size:15px; cursor:pointer; font-family:inherit;
}
.pzr-gonder:disabled { opacity:.6; cursor:not-allowed; }
/* Renk/beden seçmeden Pazarlık Yap'a basınca seçeneklerin altında çıkan yumuşak uyarı (2026-11-08) */
.pzr-secim-uyari { background:#fff4e5; color:#7a4300; border:1.5px solid #f3d29a; border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600; line-height:1.5; margin:-4px 0 16px; }
.pzr-secim-uyari[hidden] { display:none; }
/* Stokta yok: haber ver önerisi (2026-11-08) */
.pzr-haber { background:#fff4e5; color:#7a4300; border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.55; margin-bottom:12px; }
.pzr-haber[hidden], .pzr-haber-dugmeler[hidden], .pzr-haber-sonuc[hidden] { display:none; }
.pzr-haber p { margin:0; }
.pzr-haber-dugmeler { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pzr-haber-dugmeler button { flex:1 1 140px; min-height:44px; padding:10px 14px; border-radius:10px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.pzr-haber-evet { background:var(--mor); color:#fff; border:2px solid var(--mor); }
.pzr-haber-evet:disabled { opacity:.6; cursor:not-allowed; }
.pzr-haber-vazgec { background:#fff; color:var(--mor); border:2px solid var(--mor); }
.pzr-haber-sonuc { margin-top:10px !important; color:#1b7a3d; font-weight:700; }
.pzr-haber-sonuc.hata { color:#b3261e; }
/* Kişiye özel alanlar (ürün sayfasındaki sepet formunun kutusuyla aynı görünüm) */
.pzr-kisiye-ozel { border:1.5px solid #e6c7f2; background:#fbf5fe; border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.pzr-kisiye-ozel .pzr-alan { margin-top:10px; margin-bottom:0; }
.pzr-ko-baslik { color:var(--mor); font-weight:800; font-size:13.5px; }
.pzr-zorunlu { color:#c0392b; }
.pzr-istege-bagli { color:#888; font-weight:400; }
.pzr-alan input[type=file] { padding:8px; font-size:13px; }
.pzr-ko-uyari { margin-top:12px; background:#fff4e5; color:#7a4300; border-radius:10px; padding:9px 12px; font-size:12.5px; line-height:1.55; }
@media (max-width:480px) {
  /* Telefon (2026-11-08): pencere kaydırma gerektirmeden ekrana sığsın — sıkı boşluk, kısa alanlar */
  .pzr-overlay { padding:6px; }
  .pzr-kutu { padding:14px 14px 12px; max-height:98vh; max-height:98dvh; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* en küçük telefonlarda içerik taşarsa pencere İÇİNDE kayar, arka sayfa kaymaz */
  .pzr-kapat { top:8px; right:10px; width:36px; height:36px; }
  .pzr-kutu h3 { font-size:16px; margin-bottom:2px; }
  .pzr-urun { font-size:12.5px; margin-bottom:8px; line-height:1.4; }
  .pzr-alan { margin-bottom:8px; }
  .pzr-alan label { font-size:12px; margin-bottom:3px; }
  .pzr-alan input, .pzr-alan textarea { padding:8px 11px; min-height:40px; }
  .pzr-alan textarea { min-height:44px; }
  .pzr-alan input[type=file] { padding:5px 8px; }
  .pzr-ipucu { line-height:1.35; }
  .pzr-iki { grid-template-columns:90px 1fr; gap:8px; }
  .pzr-ipucu { margin-top:2px; }
  .pzr-bilgi { padding:7px 10px; font-size:12px; line-height:1.4; margin:2px 0 8px; }
  .pzr-gonder { padding:12px; min-height:46px; }
  .pzr-kisiye-ozel { padding:8px 10px; margin-bottom:8px; }
  .pzr-ko-uyari { margin-top:8px; padding:6px 10px; font-size:12px; line-height:1.4; }
  .pzr-hata { padding:7px 10px; margin-bottom:8px; }
  .pzr-haber { padding:9px 12px; margin-bottom:8px; }
}

.urun-sikayet-satiri { text-align:center; margin:-4px 0 14px; }
.urun-sikayet-link { background:none; border:none; padding:6px 8px; font-family:inherit; font-size:12.5px; font-weight:600; color:#999; cursor:pointer; text-decoration:none; }
.urun-sikayet-link:hover { color:#b3261e; text-decoration:underline; }
.urun-sikayet-link.bekliyor { color:#a97a10; }
.pzr-alan select { width:100%; padding:11px 12px; border:1.5px solid #e2e2e8; border-radius:10px; font-size:14px; font-family:inherit; outline:none; background:#fff; }
.pzr-alan select:focus { border-color:var(--mor); }
.usk-gonder { background:#e74c3c; }

.kargo-bedava-rozet { display:inline-block; background:var(--sari); color:var(--koyu); font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle; }

/* ÖZET PANEL — teslimat/özellik bilgisini TEK beyaz kart içinde birleştirir
   (kullanıcı referansı 2026-09-07: solda teslimat, sağda öne çıkan
   özellikler, ortada ince ayraç, zemin beyaz).
   ÖNEMLİ: bu panel ARTIK .product-detail grid'inin İÇİNDE değil, ondan
   SONRA gelen ayrı bir kardeş <div> (bkz. .ozet-panel-wrap) — eskiden
   grid-column:1/-1 ile aynı grid'in 2. satırı yapılmıştı, ama bu durumda
   .gallery-wrap/.right-col'daki position:sticky'nin "sticky sınırı"
   (containing block) tüm grid'e (2 satıra) yayılıyor, sticky kutu
   serbest kalırken tam bu panelin/altındaki sekmelerin ÜZERİNE biniyordu
   (kullanıcı bulgusu 2026-09-08 — aşağı kaydırınca "Mağazaya Git" butonu
   Ürün Açıklaması kartının üzerinde asılı kalıyordu). Ayrı kardeş element
   olunca .product-detail sadece 3 sütunlu TEK satır oluyor, sticky sınırı
   o satırın kendi yüksekliğiyle sınırlanıyor, çakışma imkansız hale geliyor. */
.ozet-panel-wrap { max-width:1280px; margin:0 auto 40px; padding:0 20px; }
/* Sol/sağ genişlik: varsayılan %50-%50; bir taraf az bilgi taşıyorsa o taraf
   daralır, diğeri genişler (en fazla 2'ye 1). Oran Blade'de iki taraftaki
   öğe sayısından hesaplanıp --ozet-kolonlar değişkeniyle verilir — inline
   grid-template-columns değil DEĞİŞKEN, yoksa mobil media query'yi ezerdi
   (kullanıcı talimatı 2026-09-28). */
.ozet-panel {
  display:grid; grid-template-columns:var(--ozet-kolonlar, minmax(0,1fr) minmax(0,1fr)); gap:30px; align-items:start;
  padding:24px; background:var(--beyaz);
  border-radius:12px; box-shadow:var(--golge);
}
.ozet-panel .features { border-right:1px solid #eee; padding-right:30px; min-width:0; }
.ozet-panel .highlight-specs { min-width:0; }
/* Tek taraf varsa (öne çıkan özellik yoksa) ayraç çizgisi gereksiz. */
.ozet-panel.tek-taraf .features { border-right:none; padding-right:0; }
/* Panel içinde iç ızgaralar sabit sütun sayısı yerine ayrılan genişliğe
   göre kendini doldurur — dar tarafta alt satıra iner, geniş tarafta yan yana. */
.ozet-panel .features { grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); }
.ozet-panel .highlight-specs-grid { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }

/* ÖZELLİKLER (teslimat/ödeme bilgisi) */
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature-item { display:flex; align-items:center; gap:10px; font-size:13px; min-width:0; }
.feature-item span { min-width:0; }
.feature-item svg { width:20px; height:20px; stroke:var(--mor); fill:none; stroke-width:2; flex-shrink:0; }

/* ÖNE ÇIKAN ÖZELLİKLER — özet kart grid (Trendyol'daki ürün özeti bloğu) */
.highlight-specs { margin:0; }
.highlight-specs-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.highlight-specs-head h5 { font-size:14px; color:var(--koyu); }
.highlight-specs-head button { background:none; border:none; color:var(--mor); font-size:12.5px; font-weight:600; cursor:pointer; }
.highlight-specs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.spec-kart { background:var(--gri); border-radius:10px; padding:10px 14px; }
.ozet-panel .spec-kart { background:none; padding:0; }
.spec-kart small { display:block; color:#888; font-size:11px; margin-bottom:3px; }
.spec-kart strong { font-size:13px; color:var(--koyu); }

/* SATICI KUTUSU */
.seller-box {
  background:var(--beyaz); border-radius:12px; padding:18px;
  box-shadow:var(--golge); margin:20px 0;
  display:flex; align-items:center; gap:15px;
}
.seller-logo {
  width:56px; height:56px; border-radius:12px; background:var(--gradient);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px; flex-shrink:0;
}
.seller-info { flex:1; }
.seller-info h5 { font-size:15px; margin-bottom:3px; }
.seller-info small { color:#888; font-size:12px; }
.seller-info .seller-stars { color:var(--sari); font-size:12px; margin-top:3px; }
.seller-visit {
  padding:8px 16px; background:var(--gri); border:none; border-radius:12px;
  font-size:12px; font-weight:600; cursor:pointer; color:var(--mor); transition:.3s;
}
.seller-visit:hover { background:#f0e6f7; }

/* TABS */
.tabs-section {
  max-width:1280px; margin:50px auto; padding:0 20px;
  background:var(--beyaz); border-radius:12px; box-shadow:var(--golge);
  overflow:hidden;
}
.tabs-header {
  display:flex; border-bottom:2px solid var(--gri); overflow-x:auto; overflow-y:hidden;
}
.tab-btn {
  padding:18px 25px; background:none; border:none; cursor:pointer;
  font-size:14px; font-weight:600; color:#888; white-space:nowrap;
  position:relative; transition:.3s;
}
.tab-btn:hover { color:var(--mor); }
.tab-btn.active { color:var(--magenta); }
.tab-btn.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:3px; background:var(--gradient); border-radius:3px 3px 0 0;
}
.tab-content { padding:25px; display:none; }
.tab-content.active { display:block; }

/* AÇIKLAMA + EK BİLGİLER (Trendyol referansı — 2 sütun) */
.description-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:35px; }
.description h3, .ek-bilgiler h3 { font-size:18px; margin-bottom:12px; }
.description p { font-size:14px; color:#555; line-height:1.8; margin-bottom:12px; }
.aciklama-liste { list-style:none; padding:0; }
.aciklama-liste li { font-size:14px; color:#555; line-height:1.7; padding-left:18px; position:relative; margin-bottom:8px; }
.aciklama-liste li::before { content:'—'; position:absolute; left:0; color:var(--mor); }
.ek-bilgiler-liste { list-style:none; padding:16px; background:var(--gri); border-radius:12px; }
.ek-bilgiler-liste li { font-size:13px; color:#555; line-height:1.6; padding:9px 0; border-bottom:1px solid #eaeaea; }
.ek-bilgiler-liste li:last-child { border-bottom:none; }
.ek-bilgiler-liste a { color:var(--mor); font-weight:600; text-decoration:underline; }
@media (max-width:768px) { .description-grid { grid-template-columns:1fr; } }

/* ÖZELLİKLER — kart grid (Trendyol'daki gri kutucuklar) */
.spec-kart-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.spec-table { width:100%; border-collapse:collapse; margin-top:15px; }
.spec-table tr { border-bottom:1px solid #eee; }
.spec-table td { padding:12px 10px; font-size:14px; }
.spec-table td:first-child { font-weight:600; color:#666; width:35%; }
@media (max-width:768px) { .spec-kart-grid { grid-template-columns:repeat(2,1fr); } }

/* YORUMLAR */
.rating-summary {
  display:grid; grid-template-columns:1fr 2fr; gap:30px;
  padding:25px; background:var(--gri); border-radius:12px; margin-bottom:25px;
}
.rating-big {
  text-align:center; padding:20px; background:var(--beyaz);
  border-radius:12px;
}
.rating-big .num { font-size:48px; font-weight:800; color:var(--magenta); line-height:1; }
.rating-big .stars { font-size:20px; margin:8px 0; }
.rating-big small { color:#888; font-size:13px; }
.rating-bars { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.bar-row { display:flex; align-items:center; gap:10px; font-size:13px; }
.bar-row .label { width:50px; color:#666; }
.bar-track { flex:1; height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; background:var(--gradient); border-radius:4px; }
.bar-row .count { width:30px; text-align:right; color:#888; font-size:12px; }

.comment {
  padding:18px 0; border-bottom:1px solid #eee;
}
.comment:last-child { border-bottom:none; }
.comment-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.comment-avatar {
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; object-fit:cover;
}
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-user h5 { font-size:14px; }
.comment-user small { color:#888; font-size:12px; }
.comment-stars { color:var(--sari); font-size:13px; margin-left:auto; }
.comment-text { font-size:14px; color:#555; line-height:1.7; margin-bottom:8px; }
.comment-photos { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.comment-photos img { width:64px; height:64px; object-fit:cover; border-radius:10px; cursor:pointer; }
.comment-yanit-blok { margin-top:10px; padding:10px 14px; background:var(--gri); border-radius:10px; border-left:3px solid var(--mor); font-size:13px; }
.comment-meta { display:flex; gap:15px; font-size:12px; color:#888; margin-top:10px; }
.comment-meta button {
  background:none; border:none; cursor:pointer; color:#888;
  font-size:12px; display:flex; align-items:center; gap:4px; transition:.3s;
}
.comment-meta button:hover { color:var(--mor); }
.comment-meta button.aktif { color:var(--mor); }
.comment-meta button.aktif svg { fill:var(--mor); }

/* YORUM YAZ */
.write-comment {
  margin-top:25px; padding:20px; background:var(--gri); border-radius:12px;
}
.write-comment h4 { margin-bottom:15px; font-size:16px; }
.write-comment .foto-input-label { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#666; padding:8px 14px; border:1.5px dashed #ddd; border-radius:10px; cursor:pointer; margin-bottom:12px; background:var(--beyaz); }
.write-comment .foto-input-label:hover { border-color:var(--mor); color:var(--mor); }
.write-comment input[type=file] { display:none; }
.write-comment .foto-onizleme { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.write-comment .foto-onizleme img { width:60px; height:60px; object-fit:cover; border-radius:10px; }
.stars-input { display:flex; gap:5px; margin-bottom:15px; }
.stars-input span {
  font-size:28px; cursor:pointer; color:#ddd; transition:.2s;
}
.stars-input span.active { color:var(--sari); }
.comment-textarea {
  width:100%; padding:12px; border:1px solid #ddd; border-radius:10px;
  font-family:inherit; font-size:14px; resize:vertical; min-height:100px;
  outline:none; background:var(--beyaz);
}
.comment-textarea:focus { border-color:var(--mor); }
.submit-comment {
  margin-top:12px; padding:12px 30px; background:var(--gradient);
  color:#fff; border:none; border-radius:12px; font-weight:600; cursor:pointer;
  transition:.3s;
}
.submit-comment:hover { transform:translateY(-2px); }

/* ÜRÜN GRID */
.section-title {
  display:flex; justify-content:space-between; align-items:center;
  margin:45px auto 20px; max-width:1280px; padding:0 20px;
}
.section-title h2 { font-size:24px; padding-left:18px; position:relative; }
.section-title h2::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:24px; background:var(--gradient); border-radius:3px;
}
.section-title a { color:var(--mor); font-weight:600; font-size:14px; }
.products-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  max-width:1280px; margin:0 auto 40px; padding:0 20px;
}
.product-card {
  background:var(--beyaz); border-radius:12px; overflow:hidden;
  box-shadow:var(--golge); transition:.3s; position:relative; cursor:pointer;
}
.product-card:hover { transform:translateY(-5px); }
.product-card:hover .product-img img { transform:scale(1.08); }
.product-img { height:260px; overflow:hidden; position:relative; background:#f5f0f8; }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.product-badge {
  position:absolute; top:12px; left:12px; background:var(--magenta);
  color:#fff; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:700; z-index:2;
}
.product-fav {
  position:absolute; top:12px; right:12px; width:36px; height:36px;
  background:rgba(255,255,255,.92); border-radius:50%; display:flex;
  align-items:center; justify-content:center; cursor:pointer; border:none;
  transition:.3s; z-index:2;
}
.product-fav svg { width:18px; height:18px; stroke:#666; fill:none; stroke-width:2; }
.product-info-card { padding:15px; }
.product-info-card h4 { font-size:14px; margin-bottom:6px; height:38px; overflow:hidden; font-weight:600; }
.product-info-card .shop { font-size:12px; color:var(--mor); margin-bottom:6px; }
.product-info-card .stars { color:var(--sari); font-size:12px; margin-bottom:8px; }
.product-info-card .stars span { color:#999; margin-left:4px; }
.product-info-card .price { color:var(--magenta); font-weight:800; font-size:18px; }

/* KOMBİN ÖNERİ */
.combine-suggest {
  max-width:1280px; margin:40px auto; padding:0 20px;
  background:linear-gradient(135deg,#FFD23F,#E6358F); border-radius:12px;
  padding:30px; color:#fff; display:flex; align-items:center; gap:25px;
  position:relative; overflow:hidden;
}
.combine-suggest::before {
  content:''; position:absolute; right:-40px; top:-40px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.1);
}
.combine-suggest-icon { font-size:60px; }
.combine-suggest-text { flex:1; }
.combine-suggest-text h3 { font-size:22px; margin-bottom:5px; }
.combine-suggest-text p { font-size:14px; opacity:.95; }
.combine-suggest-btn {
  padding:12px 25px; background:var(--beyaz); color:var(--magenta);
  border:none; border-radius:12px; font-weight:700; cursor:pointer;
  transition:.3s; white-space:nowrap;
}
.combine-suggest-btn:hover { transform:translateY(-2px); }

/* FOOTER */
footer { background:var(--koyu); color:#ccc; padding:50px 0 20px; margin-top:60px; }
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:32px;
  max-width:1280px; margin:0 auto; padding:0 20px 30px;
}
.footer-col h4 { color:#fff; margin-bottom:18px; font-size:16px; }
.footer-col p { font-size:13px; line-height:1.8; margin-bottom:15px; }
.footer-col a { display:block; font-size:13px; margin-bottom:10px; transition:.3s; }
.footer-col a:hover { color:var(--sari); }
.footer-logo {
  font-size:28px; font-weight:800; margin-bottom:15px;
  background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.social-icons { display:flex; gap:10px; margin-top:15px; }
.social-icons a {
  width:38px; height:38px; background:rgba(255,255,255,.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.social-icons a:hover { background:var(--gradient); }
.social-icons a svg { width:18px; height:18px; fill:#fff; }
.footer-bottom {
  max-width:1280px; margin:0 auto; padding:20px 20px 0;
  border-top:1px solid rgba(255,255,255,.1); text-align:center; font-size:13px;
}
.footer-yasal { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 14px; margin-bottom:14px; font-size:12.5px; }
.footer-yasal a { display:inline; margin-bottom:0; color:#aaa; }
.footer-yasal a:hover { color:var(--sari); }
.footer-yasal .ayirac { color:#555; }

/* TOAST — "Pazarlık yapmak için giriş yapmalısın", "Teklifiniz iletildi" vb. bildirimler (2026-10-06, kullanıcı talebi:
   kategori sayfasındaki "sepete eklendi" bildirimi gibi ince olsun). İnce koyu şerit + solda yeşil onay yuvarlağı;
   uzun mesaj kesilmesin diye en fazla iki satır. */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px);
  width:max-content; max-width:min(440px, calc(100vw - 24px));
  background:rgba(26,26,46,.94); color:#fff; padding:7px 14px 7px 8px; border-radius:12px;
  font-size:13px; font-weight:600; line-height:1.3; z-index:2000; opacity:0; transition:opacity .25s, transform .25s;
  box-shadow:0 8px 22px rgba(26,26,46,.25); display:flex; align-items:center; gap:9px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.toast:not(.show){pointer-events:none} /* gizliyken altındaki düğmelere dokunmayı engellemesin (2026-10-03) */
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast svg { width:22px; height:22px; padding:4px; border-radius:50%; background:#22a565; stroke:#fff; fill:none; stroke-width:3.5; flex-shrink:0; }
.toast #toastText { min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.toast-action { margin-right:-8px; padding:6px 12px; background:var(--sari); color:var(--koyu); border-radius:12px; font-size:12px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.toast-action[hidden] { display:none; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .rating-summary { grid-template-columns:1fr; }
  .ozet-panel { grid-template-columns:1fr; gap:16px; }
  .ozet-panel .features { border-right:none; padding-right:0; border-bottom:1px solid #eee; padding-bottom:16px; }
  .highlight-specs-grid, .ozet-panel .highlight-specs-grid { grid-template-columns:repeat(2,1fr); }
  /* 3 sütunlu galeri/bilgi/kampanya düzeni sadece geniş ekranda anlamlı —
     dar/orta ekranda karışık grid yerine hepsi net sırayla alt alta gelsin
     (kullanıcı bulgusu 2026-09-07: dar sütun ürün bilgisini eziyordu). */
  .product-detail { grid-template-columns:1fr; gap:25px; }
  .gallery-wrap { position:static; }
  .thumb-col { grid-template-columns:repeat(5,1fr); }
  .right-col { flex-direction:row; position:static; }
  .right-col .right-box { flex:1; }
  .footer-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .features, .ozet-panel .features { grid-template-columns:1fr; }
  .highlight-specs-grid, .ozet-panel .highlight-specs-grid { grid-template-columns:1fr; }
  .description-grid { grid-template-columns:1fr; }
  .right-col { flex-direction:column; }
  .search-box { display:none; }
  .header-user-text { display:none; }
  .product-title { font-size:19px; }
  .price-new { font-size:26px; }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-img { height:200px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:25px; }
  .combine-suggest { flex-direction:column; text-align:center; padding:25px 20px; }
  .combine-suggest-icon { font-size:48px; }
  .tab-btn { padding:15px 18px; font-size:13px; }
  .action-buttons { flex-wrap:wrap; }
  .btn-cart, .btn-buy { flex:1 1 45%; }
}
@media (max-width:480px) {
  .thumbnails { grid-template-columns:repeat(4,1fr); }
  .products-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .product-img { height:180px; }
  .header-icons { gap:4px; }
  .icon-btn { width:38px; height:38px; }
}

/* USER DROPDOWN */
.header-user-wrapper { position:relative; }
.header-user { display:flex; align-items:center; gap:10px; cursor:pointer; padding:6px 14px 6px 6px; border-radius:12px; border:1.5px solid var(--mor); background:#faf5fc; transition:.3s; }
.header-user:hover { background:#f0e6f7; }
.header-user-avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; }
.header-user-avatar img { width:100%; height:100%; object-fit:cover; }
.header-user-text { font-size:13px; font-weight:600; }
.user-chevron { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; transition:.3s; }
.header-user.open .user-chevron { transform:rotate(180deg); }
.user-dropdown { position:absolute; top:calc(100% + 12px); right:0; width:320px; background:var(--beyaz); border-radius:12px; box-shadow:0 15px 50px rgba(0,0,0,.18); padding:10px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .25s ease; z-index:200; border:1px solid #eee; max-height:calc(100vh - 100px); overflow-y:auto; }
.user-dropdown.active { opacity:1; visibility:visible; transform:translateY(0); }
.user-dropdown::before { content:''; position:absolute; top:-6px; right:24px; width:12px; height:12px; background:var(--beyaz); border-left:1px solid #eee; border-top:1px solid #eee; transform:rotate(45deg); }
.dropdown-user-info { display:flex; align-items:center; gap:12px; padding:14px; background:linear-gradient(135deg,#f0e6f7,#fce4f0); border-radius:12px; margin-bottom:8px; }
.dropdown-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; border:2px solid var(--beyaz); flex-shrink:0; }
.dropdown-avatar img { width:100%; height:100%; object-fit:cover; }
.dropdown-user-info h5 { font-size:14px; margin-bottom:2px; }
.dropdown-user-info small { font-size:11px; color:#888; }
.dropdown-level { display:inline-block; padding:2px 8px; background:var(--gradient); color:#fff; border-radius:10px; font-size:10px; font-weight:700; margin-top:4px; }
.dropdown-divider { height:1px; background:#eee; margin:6px 0; }
.dropdown-section-title { font-size:10px; color:#999; text-transform:uppercase; letter-spacing:1px; padding:8px 12px 4px; font-weight:700; }
.dropdown-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:.2s; font-size:13px; color:var(--koyu); }
.dropdown-item:hover { background:var(--gri); color:var(--mor); }
.dropdown-item svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.dropdown-item .dd-badge { margin-left:auto; padding:2px 8px; background:var(--magenta); color:#fff; border-radius:10px; font-size:10px; font-weight:700; }
.dropdown-item.logout { color:var(--kirmizi); }
.dropdown-item.logout:hover { background:#fde8e8; }

/* ===== MOBIL ALT MENU (P0 - proje-yonetimi/05-faz-plani.md Modul 4b) ===== */
.mobil-alt-menu{display:none}
@media(max-width:767px){
  .mobil-alt-menu{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;background:#fff;border-top:1px solid #eee;box-shadow:0 -2px 14px rgba(26,26,46,.1);padding:8px 4px calc(6px + env(safe-area-inset-bottom))}
  .mobil-alt-menu .man-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding-top:2px;color:var(--text-hafif,#666680);font-family:'Nunito',sans-serif;font-size:.62rem;font-weight:700;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobil-alt-menu .man-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .mobil-alt-menu .man-item span{pointer-events:none}
  .mobil-alt-menu .man-item.aktif{color:var(--mor,#A621D8)}
  .mobil-alt-menu .man-item.aktif svg.man-kalp-svg{fill:var(--mor,#A621D8)}
  .mobil-alt-menu .man-item.aktif::before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:22px;height:3px;border-radius:0 0 4px 4px;background:var(--mor,#A621D8)}
}
@media(max-width:767px){
}
/* Dar telefonlarda (360px vb.) üst bölümdeki Üye Ol / Giriş Yap düğmeleri taşmasın (2026-10-03) */
@media(max-width:400px){.header-inner{gap:10px}.btn-guest{padding:8px 12px}}

/* HABER VER (2026-10-03, canli_duzelt.md 7.2) — tükenmiş seçenek, "Stoğa Gelince Haber Ver",
   fiyat alarmı zili ve köşe bildirimi. JS hidden özniteliğiyle aç/kapa yapar; display
   veren sınıfların (.action-buttons flex vb.) onu ezmemesi için: */
.product-info [hidden], .hv-toast[hidden] { display:none !important; }
.size-btn.tukendi { color:#bbb; background:#fafafa; border-style:dashed; position:relative; }
.size-btn.tukendi::after { content:''; position:absolute; left:6px; right:6px; top:50%; border-top:1.5px solid #ccc; transform:rotate(-18deg); }
.size-btn.tukendi.selected { border-color:var(--magenta); color:var(--magenta); background:#fff; }
.color-btn.tukendi { opacity:.45; }
.color-btn.tukendi::before { content:''; position:absolute; left:4px; right:4px; top:50%; border-top:2px solid #888; transform:rotate(-35deg); }
.tukendi-yazi { font-size:13px; color:var(--magenta); font-weight:700; margin:6px 0 12px; }
.haber-ver-kutu { margin:10px 0 22px; }
.haber-btn { width:100%; padding:15px; border-radius:12px; border:none; background:var(--koyu); color:#fff; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; transition:.2s; }
.haber-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.haber-ok { padding:12px 14px; background:#e8f8ee; border-radius:12px; font-size:13.5px; color:#1a7a3c; line-height:1.5; }
.haber-ok a { color:#1a7a3c; font-weight:700; text-decoration:underline; }
.haber-bekleyen { font-size:12px; color:#888; margin-top:8px; }
.haber-bekleyen:empty { display:none; }
.fiyat-zil-sarici { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fiyat-zil-sarici .price-row { margin-bottom:0; }
.zil-sarici { position:relative; }
.fiyat-zil { width:38px; height:38px; border-radius:50%; border:1.5px solid #f39c12; background:#fff; font-size:17px; cursor:pointer; line-height:1; transition:.2s; }
.fiyat-zil:hover { background:#fff4e0; }
.fiyat-zil.dolu { background:#f39c12; }
.zil-kutu { position:absolute; top:46px; left:50%; transform:translateX(-50%); width:280px; background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:14px; z-index:50; }
.zil-kutu-baslik { font-size:13.5px; font-weight:700; margin-bottom:10px; color:var(--koyu); }
.zil-kutu-tutar { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.zil-kutu-tutar input { flex:1; min-width:0; padding:9px 10px; border:1.5px solid #eee; border-radius:9px; font-size:14px; font-family:inherit; }
.zil-kutu-tutar span { font-weight:700; color:#666; }
.zil-kutu select { width:100%; padding:8px 10px; border:1.5px solid #eee; border-radius:9px; font-size:13px; margin-bottom:10px; font-family:inherit; background:#fff; }
.zil-kutu-dugmeler { display:flex; gap:8px; }
.zil-kaydet { flex:1; padding:9px 12px; border:none; border-radius:9px; background:var(--gradient); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; }
.zil-kaldir { padding:9px 12px; border:none; border-radius:9px; background:var(--gri); color:#555; font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit; }
.zil-kutu-not { font-size:11.5px; color:#888; margin-top:8px; line-height:1.5; }
.hv-toast { position:fixed; right:20px; bottom:20px; max-width:380px; background:var(--koyu); color:#fff; border-radius:12px; padding:14px 40px 14px 16px; font-size:13.5px; line-height:1.55; box-shadow:0 8px 30px rgba(0,0,0,.25); z-index:2100; overflow:hidden; }
.hv-toast a { color:var(--sari); font-weight:700; }
.hv-toast-kapat { position:absolute; top:8px; right:10px; background:none; border:none; color:#fff; opacity:.7; cursor:pointer; font-size:14px; }
.hv-toast-cubuk { position:absolute; left:0; bottom:0; height:3px; background:var(--gradient); width:100%; }
@media (max-width:600px) {
  .hv-toast { left:16px; right:16px; max-width:none; }
  .zil-kutu { left:auto; right:-10px; transform:none; width:min(280px, calc(100vw - 40px)); }
}

/* ===================================================================================================
   TELEFON GÖRÜNÜMÜ (5d, 2026-10-06, kullanıcı talebi) — sadece 767px ve altı; bilgisayar görünümü değişmez.
   Sıra: logo + arama → yol satırı → kaydırmalı görseller → ad → puan → (video, kampanya/paket) → seçenekler →
   adet/kargo → ilave özellikler (avantajlar + öne çıkanlar) → Şimdi Al → mağaza kutusu → akordeonlar →
   kombin → Benzer Ürünler / Bunları da Seveceksiniz (yana kayar, ekranda 2 ürün) → footer.
   Alt sabit çubuk: solda fiyat + zil, sağda Sepete Ekle, pazarlığa açıksa altında Pazarlık Yap.
   Taşıma (fiyat/zil, pazarlık düğmesi, ilave özellikler) urun-detay.blade.php'deki "TELEFON yerleşimi" kodunda.
   =================================================================================================== */
.ud-mobil-ust, .ud-kaydir, .ud-noktalar, .ud-akordeon-baslik, .ud-tumunu-gor, .ud-alt-cubuk { display:none; }
/* Soru-Cevap'taki baş harf yuvarlağı (yorumlardakiyle aynı görünüm; önceden arka plansız çıplak harfti) — 2026-10-06 */
#tab-qa .comment-avatar { display:flex; align-items:center; justify-content:center; background:var(--gradient); color:#fff; font-weight:700; font-size:15px; }

@media (max-width:767px) {
  body { padding-bottom:calc(var(--ud-alt, 72px) + env(safe-area-inset-bottom)); }

  /* Üst: solda logo, yanında arama (ortak header ve 5'li alt menü bu sayfada telefonda yok) */
  body > header, .mobil-alt-menu { display:none !important; }
  .ud-mobil-ust { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:200; background:var(--beyaz); padding:10px 16px; box-shadow:0 1px 0 #eee; }
  .ud-logo { flex-shrink:0; font-size:23px; font-weight:800; color:var(--mor); line-height:1; }
  .ud-logo span { color:var(--magenta); }
  .ud-arama { flex:1; min-width:0; display:flex; align-items:center; background:#f3f3f7; border-radius:12px; border:1.5px solid transparent; }
  .ud-arama:focus-within { border-color:var(--mor); }
  .ud-arama input { flex:1; min-width:0; border:none; background:none; padding:9px 4px 9px 14px; font-size:13.5px; outline:none; font-family:inherit; }
  .ud-arama button { width:38px; height:36px; border:none; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
  .ud-arama svg { width:18px; height:18px; stroke:var(--mor); fill:none; stroke-width:2.4; stroke-linecap:round; }

  /* Yol satırı: tek satır, uzunsa yana kayar */
  .breadcrumb { flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; margin:10px auto; padding:0 16px; font-size:12px; }
  .breadcrumb::-webkit-scrollbar { display:none; }

  /* Galeri: parmakla sağa sola kaydırılan görseller + noktalar; küçük resim şeridi ve tek ana görsel gizli */
  .product-detail { padding:0 16px; gap:16px; margin-bottom:20px; }
  .thumb-col, #mainImg { display:none; }
  .main-image { min-height:0; aspect-ratio:4/5; margin-bottom:0; cursor:default; border-radius:12px; }
  .main-image:hover img { transform:none; }
  .ud-kaydir { display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .ud-kaydir::-webkit-scrollbar { display:none; }
  .ud-kaydir img { flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:start; }
  .ud-noktalar { display:flex; gap:6px; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); }
  .ud-noktalar span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.08); transition:.2s; }
  .ud-noktalar span.aktif { width:18px; border-radius:4px; background:var(--beyaz); }
  .main-image .discount-badge { top:12px; left:12px; padding:5px 12px; font-size:12px; }
  .main-image .fav-btn { top:12px; right:12px; width:38px; height:38px; }

  /* Bilgi: ad, puan; fiyat kutusu alttaki çubuğa taşındığı için sayfada sadece kampanya/paket bilgisi kalır */
  .product-title { font-size:18px; line-height:1.3; margin-bottom:6px; }
  .product-price-box { background:none; padding:0; margin-bottom:10px; }
  .product-price-box:not(:has(#fiyatKampanyaEtiketiKutu > *, .installment)) { display:none; }
  .action-buttons { margin:16px 0 0; }
  .action-buttons .btn-cart { display:none; }          /* Sepete Ekle alttaki çubukta */
  .action-buttons .btn-buy { flex:1 1 100%; }          /* Şimdi Al sayfada kalır (kullanıcı kararı) */

  /* İlave özellikler (avantajlar + öne çıkanlar) — seçeneklerin altına taşınır */
  .product-detail > .ozet-panel-wrap { padding:0; margin:0; }
  .ozet-panel { padding:16px; gap:14px; }
  .ozet-panel .highlight-specs-grid, .spec-kart-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .spec-kart { padding:8px 10px; }
  .spec-kart small { margin-bottom:1px; }

  /* Mağaza kutusu: minimal */
  .right-col { gap:10px; }
  .seller-box-v2 { padding:14px; display:grid; grid-template-columns:1fr 1fr; column-gap:8px; }
  .seller-box-v2 .seller-header, .seller-box-v2 .seller-visit { grid-column:1 / -1; }
  .seller-box-v2 .seller-logo { width:40px; height:40px; font-size:15px; }
  .seller-box-v2 .seller-btn { padding:9px 6px; font-size:12.5px; }
  .seller-box-v2 .seller-visit { margin-top:8px; }
  .urun-sikayet-satiri { margin:0; }
  .kupon-banner { padding:12px 14px; }

  /* Sekmeler → alt alta akordeon */
  .tabs-section { margin:20px 16px; padding:0; border-radius:12px; }
  .tabs-header { display:none; }
  .tab-content, .tab-content.active { display:block; padding:0; border-bottom:1px solid #f0f0f0; }
  .tab-content:last-child { border-bottom:none; }
  .tab-content:not(.ud-acik) > :not(.ud-akordeon-baslik) { display:none; }
  .tab-content.ud-acik { padding-bottom:16px; }
  .tab-content.ud-acik > :not(.ud-akordeon-baslik) { margin-left:16px; margin-right:16px; }
  .ud-akordeon-baslik { display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 16px; background:none; border:none; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--koyu); text-align:left; cursor:pointer; }
  .ud-akordeon-baslik::after { content:""; width:8px; height:8px; border-right:2px solid #999; border-bottom:2px solid #999; transform:rotate(45deg); transition:transform .2s; margin-right:4px; }
  .ud-acik > .ud-akordeon-baslik { color:var(--magenta); }
  .ud-acik > .ud-akordeon-baslik::after { transform:rotate(-135deg); }
  #tab-desc .description > h3:first-child { display:none; }   /* akordeon başlığıyla aynı, tekrar etmesin */
  .rating-summary { grid-template-columns:96px 1fr; gap:12px; padding:12px; align-items:center; margin-bottom:6px; }
  .rating-big { padding:10px 4px; }
  .rating-big .num { font-size:30px; }
  .rating-big .stars { font-size:13px; margin:4px 0; }
  .rating-big small { font-size:11px; }
  .bar-row { gap:6px; font-size:11.5px; }
  .bar-row .label { width:28px; }
  .bar-row .count { width:16px; }
  .tab-content:not(.ud-hepsi) .comment.ud-fazla { display:none; }
  .ud-tumunu-gor { display:block; width:calc(100% - 32px); margin:10px 16px 4px; padding:10px; background:var(--gri); border:none; border-radius:10px; font-family:inherit; font-size:13px; font-weight:700; color:var(--mor); cursor:pointer; }

  /* Kombin önerisi */
  .combine-suggest { margin:20px 16px; }

  /* Benzer Ürünler / Bunları da Seveceksiniz: 8 ürün, ekranda 2 tane, yana kayar */
  .section-title { margin:26px auto 12px; padding:0 16px; }
  .section-title h2 { font-size:17px; }
  .products-grid { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:16px; scrollbar-width:none; padding:2px 16px 8px; margin-bottom:20px; }
  .products-grid::-webkit-scrollbar { display:none; }
  .products-grid > * { flex:0 0 calc((100% - 10px) / 2); min-width:0; scroll-snap-align:start; }

  /* Alt sabit çubuk */
  .ud-alt-cubuk { display:block; position:fixed; left:0; right:0; bottom:0; z-index:250; background:var(--beyaz); border-top:1px solid #eee; box-shadow:0 -4px 16px rgba(26,26,46,.08); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .ud-alt-satir { display:flex; align-items:center; gap:10px; }
  .ud-alt-fiyat { flex:1; min-width:0; }
  .ud-alt-fiyat .fiyat-zil-sarici { flex-wrap:nowrap; gap:10px; }
  .ud-alt-fiyat .price-row { flex-direction:column; align-items:flex-start; gap:0; margin:0; }
  .ud-alt-fiyat .price-old { font-size:12px; line-height:1.2; }
  .ud-alt-fiyat .price-new { font-size:20px; line-height:1.15; white-space:nowrap; }
  .ud-alt-fiyat .price-discount { display:none; }
  .ud-alt-fiyat .fiyat-zil { width:36px; height:36px; font-size:16px; flex-shrink:0; }
  .ud-alt-fiyat .zil-kutu { top:auto; bottom:46px; left:-60px; right:auto; transform:none; width:min(280px, calc(100vw - 32px)); }
  .ud-alt-sepet { flex-shrink:0; padding:13px 26px; border:none; border-radius:12px; background:var(--gradient); color:#fff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(166,33,216,.28); }
  .ud-alt-pazarlik:empty { display:none; }
  .ud-alt-pazarlik .btn-pazarlik { width:100%; margin:8px 0 0; padding:11px; }

  /* Bildirimler alttaki çubuğun üstünde çıksın */
  .toast { bottom:calc(var(--ud-alt, 72px) + 12px); font-size:12.5px; }
  .hv-toast { right:12px; left:12px; bottom:calc(var(--ud-alt, 72px) + 12px); max-width:none; }
}

/* ===================================================================================================
   BİLGİSAYAR — Trendyol tarzı ürün alanı (2026-10-28, kullanıcı referans görseli)
   Sadece 768px ve üstü; telefon görünümüne (onaylı yapı) dokunulmaz. Renkler butimor paleti (mor/magenta).
   Eski haline dönmek için: bu bölümü silmek yeterli (yedek: arsiv/urun-detay-trendyol-oncesi-2026-10-28).
   =================================================================================================== */
.ud-ok, .ud-kampanya-serit, .ud-kalp-btn, .ud-son-urun { display:none; }
@media (min-width:768px) {
  .product-detail { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 290px; gap:28px; }

  /* GALERİ: beyaz çerçeveli kart, görsel kırpılmaz; küçük resimler altta tek sıra */
  .gallery-wrap { background:#fff; border:1px solid #e6e6e6; border-radius:8px; gap:0; padding-bottom:14px; }
  .main-image { background:#fff; border-radius:8px 8px 0 0; margin-bottom:0; min-height:460px; }
  .main-image img { object-fit:contain; }
  .main-image:hover img { transform:none; }
  .main-image .fav-btn { display:none; }
  .main-image .discount-badge { top:12px; left:12px; border-radius:4px; padding:5px 10px; font-size:12px; }
  .thumb-col { display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px 0; justify-content:center; }
  .thumb-col .thumb { width:52px; height:52px; border-radius:6px; border:1px solid #ddd; background:#fff; }
  .thumb-col .thumb.active, .thumb-col .thumb:hover { border:2px solid var(--magenta); }
  .thumb img { object-fit:cover; }
  .ud-ok {
    display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border:none; border-radius:50%; background:#fff; color:#333; font-size:26px; line-height:1;
    box-shadow:0 2px 10px rgba(0,0,0,.2); cursor:pointer; z-index:3; padding-bottom:3px;
  }
  .ud-ok:hover { background:var(--mor); color:#fff; }
  .ud-ok-sol { left:10px; }
  .ud-ok-sag { right:10px; }
  .ud-kampanya-serit {
    display:block; position:absolute; left:10px; right:10px; bottom:10px; z-index:3; padding:9px 14px; border-radius:6px;
    background:var(--gradient); color:#fff; font-size:13px; font-weight:700; pointer-events:none;
  }

  /* BAŞLIK: marka kalın + ürün adı normal, aynı satırda */
  .product-brand { display:inline; padding:0; background:none; border-radius:0; margin:0 6px 0 0; font-size:20px; font-weight:700; color:var(--koyu); }
  .product-title { display:inline; font-size:20px; font-weight:400; line-height:1.4; margin:0; }
  .product-rating { margin:10px 0 12px; font-size:13px; }
  .ud-son-urun {
    display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px;
    background:#fdecef; color:#c0173b; font-size:12.5px; font-weight:700;
  }

  /* FİYAT: renkli kutu yok, çizgiyle ayrılmış; eski fiyat altta üstü çizili */
  .product-price-box { background:none; padding:0 0 16px; margin-bottom:18px; border-bottom:1px solid #e6e6e6; border-radius:0; }
  .price-row { display:grid; grid-template-columns:auto auto 1fr; column-gap:10px; align-items:center; }
  .price-new { grid-row:1; grid-column:1; font-size:30px; font-weight:800; color:var(--magenta); }
  .price-discount { grid-row:1; grid-column:2; justify-self:start; border-radius:4px; }
  .price-old { grid-row:2; grid-column:1 / -1; font-size:15px; color:#888; }

  /* SEÇENEKLER: köşeli kutular, seçilen çerçeveli */
  .option-label { font-size:14px; font-weight:400; }
  .option-label strong { font-weight:600; }
  .size-options { gap:8px; }
  .size-btn { min-width:56px; padding:9px 12px; border:1px solid #d6d6d6; border-radius:6px; font-weight:500; }
  .size-btn:hover { border-color:var(--mor); }
  .size-btn.selected { border:1.5px solid var(--magenta); background:#fff; color:var(--magenta); }

  /* BUTONLAR (2026-10-30, kullanıcı: "iki gün önce böyle değildi, neyse o gözüksün"): Şimdi Al / Sepete Ekle 28 Ekim öncesi
     görünümüne döndü (sarı Şimdi Al + gradyan Sepete Ekle, bkz. yukarıdaki genel .btn-buy / .btn-cart). Yanındaki kalp kutusu kaldı. */
  .action-buttons { align-items:stretch; }
  .ud-kalp-btn {
    display:flex; align-items:center; justify-content:center; flex:0 0 52px; border:1px solid #d6d6d6; border-radius:8px;
    background:#fff; cursor:pointer; transition:.2s; order:3;
  }
  .ud-kalp-btn svg { width:24px; height:24px; stroke:#555; fill:none; stroke-width:1.8; }
  .ud-kalp-btn:hover { border-color:var(--magenta); }
  .ud-kalp-btn:hover svg { stroke:var(--magenta); }
  .ud-kalp-btn.liked svg { stroke:var(--magenta); fill:var(--magenta); }
  .btn-pazarlik { border-radius:8px; }

  /* SAĞ SÜTUN: düz beyaz çerçeveli satıcı kartı */
  .right-box { border:1px solid #e6e6e6; border-radius:8px; box-shadow:none; }
  .seller-box-v2 .seller-logo { border-radius:8px; }
  .seller-box-v2 .seller-btn { background:#fff; color:var(--koyu); border:1px solid #e0e0e0; border-radius:6px; font-weight:600; }
  .seller-box-v2 .seller-btn:hover { background:#faf5fc; opacity:1; }
  .seller-box-v2 .btn-takip.takipte { background:var(--gri); }
  .seller-box-v2 .seller-visit { background:#fff; color:var(--mor); border-color:var(--mor); text-transform:uppercase; letter-spacing:.4px; font-size:12px; }
}

/* 2026-10-28 — fiyat alarmı zili (bilgisayar): fiyatın SOLUNDA, satırın başında */
@media (min-width:768px) {
  .fiyat-zil-sarici { flex-wrap:nowrap; }
  .fiyat-zil-sarici .zil-sarici { order:-1; }
  .zil-kutu { left:0; transform:none; }
}
@media (min-width:768px) {
  .fiyat-zil-sarici { align-items:flex-start; }
  .fiyat-zil-sarici .zil-sarici { margin-top:2px; }
  .btn-pazarlik { margin:0 0 20px; }
}
.yorum-iade-notu { font-size:11.5px; color:#888; margin-top:4px; }