/* ==========================================================================
   MotoWest klonu — mobil uyum yaması   (vibora.com.tr/motowest, 18 Ağu 2026)
   Tema CSS'inden SONRA yüklenir. Masaüstü görünümüne dokunmaz (>768px).
   ========================================================================== */

/* --- 1) Yatay taşma kilidi (her genişlikte) ------------------------------- */
html { overflow-x: hidden; overscroll-behavior-x: none; }
body { max-width: 100%; overscroll-behavior-x: none; }
img, video, iframe, canvas, svg { max-width: 100%; }
figure, figcaption, blockquote { margin: 0; }

@media (max-width: 768px) {

  /* --- 2) iOS'ta input'a dokununca sayfanın kendiliğinden yakınlaşması ----
     Safari 16px altı yazıya odaklanınca zoom yapar ve geri çıkmaz.          */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input, select, textarea, button, a, [role="button"] { touch-action: manipulation; }

  /* --- 3) Kırılamayan uzun metin taşırmasın ------------------------------ */
  h1, h2, h3, h4, h5, p, span, a, li, td, div { overflow-wrap: break-word; }
  .flex > *, .grid > * { min-width: 0; }

  /* --- 4) Dokunma hedefleri en az 44px ----------------------------------- */
  .header-icons-main ul > li > a,
  .header-icons-main ul > li > button {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .add-to-cart-overlay button,
  .add-to-cart-overlay .stock,
  .add-to-cart-overlay .out-of-stock { min-height: 44px !important; }
  .breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; }
  .slider-content a, a[class*="slider-"] { min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
  a.login, a.register, a.cursor-pointer { min-height: 44px; display: inline-flex; align-items: center; }
  /* Slider noktalari: GORUNUM aynen kalir (32x8 pil), sadece dokunma alani buyur */
  .slick-dots { display: flex !important; justify-content: center; align-items: center; flex-wrap: wrap; }
  .slick-dots li { height: 44px !important; margin: 0 1px !important;
                   display: inline-flex !important; align-items: center; justify-content: center; }
  .slick-dots li button { position: relative; }
  .slick-dots li button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 34px; height: 44px;
  }

  /* form alanlari: yazi 16px oldu, kutu da parmak boyu olsun (kutu/radyo haric) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { min-height: 44px; }
  textarea { min-height: 88px; }

  /* sayfalama, sosyal ikonlar, banner CTA'lari */
  [class*="pagination"] a, [class*="paginations"] a, li.page-active > a {
    min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center;
  }
  ul.social-links > li > a { min-width: 44px; min-height: 44px;
    display: inline-flex !important; align-items: center; justify-content: center; }
  div.content a, div.slider-content a, [class*="gallery__item"] a, a[class*="slider-"],
  .product-name-main > a, ul.footer-links > li > a {
    min-height: 44px;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  ul.footer-links > li > a { justify-content: flex-start; }
  .product-name-main > a { justify-content: flex-start; }

  /* --- 5) Çerez kutusu: ekranın ortasını kapatıyordu -> alt şerit --------- */
  .cookie-bar {
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
    font-size: 13px !important; line-height: 1.35 !important;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.28);
    background-color: #111 !important;   /* yari saydamdi, altindaki fiyat okunmuyordu */
    opacity: 1 !important;               /* asil sebep: temada .cookie-bar{opacity:.86} */
  }
  /* serit gorunurken sayfanin alti onun kadar bosluk birakir -> hicbir icerik gizlenmez */
  body:has(.cookie-bar) { padding-bottom: 150px; }
  .cookie-bar .cookie-close { min-height: 44px; display: inline-flex; align-items: center; }

  /* WhatsApp butonu çerez kutusunun üstüne çıksın, üst üste binmesin */
  a.float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  body:has(.cookie-bar) a.float { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

  /* --- 6) Ürün kartları: fotoğrafı olmayan üründe hizalama bozuluyordu --- */
  .product-list-item .product-no-image { aspect-ratio: 1 / 1; width: 100%; }
  .product-list-item { display: flex; flex-direction: column; }
  .product-list-item-info { margin-top: auto; }
}

/* --- 7) Dar telefonlar (320-360px): başlık ikonları ve filtre şeridi ------ */
@media (max-width: 380px) {
  header .header-icons-main ul { gap: 0 !important; }
  header .header-icons-main ul > li { margin-left: 4px !important; padding-left: 0 !important; padding-right: 0 !important; }
  header .header-icons-main ul > li > a,
  header .header-icons-main ul > li > button { min-width: 40px; }
  .container.flex > .flex { flex-wrap: wrap; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ==========================================================================
   VİBORA E-TİCARET DÜZENİ — 23 Ağu 2026 (Kaan onayı: "daha modern, daha güzel")
   Tema CSS'inden SONRA yüklenir. Mobil yama (yukarıdaki bloklar) korunur.
   Amaç: ürün-önce sıralama, yoğun ızgara, modern kart/tipografi.
   ========================================================================== */

:root{
  --vb-accent:#e30613;          /* markanın kırmızısı (duyuru şeridinden örneklendi) */
  --vb-accent-dark:#b30510;
  --vb-ink:#111318;
  --vb-muted:#6b7280;
  --vb-line:#e8eaed;
  --vb-r:14px;
  --vb-sh:0 1px 2px rgba(16,24,40,.05);
  --vb-sh-lg:0 14px 30px rgba(16,24,40,.13);
}

/* --- A) ÜRÜN KARTI (her genişlikte) -------------------------------------- */
.product-list-item, .product-container{
  border:1px solid var(--vb-line) !important;
  border-radius:var(--vb-r) !important;
  padding:10px !important;
  background:#fff !important;
  box-shadow:var(--vb-sh);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a:hover > .product-list-item, a:hover > .product-container,
a:hover .product-list-item, a:hover .product-container{
  transform:translateY(-4px);
  box-shadow:var(--vb-sh-lg);
  border-color:#d8dbe0 !important;
}
.product-slider-image-container, .product-no-image{
  border-radius:10px; overflow:hidden; background:#f6f7f8;
}
/* Fotoğrafı olmayan üründe kart boyu bozulmasın (kare yer tutucu) */
.product-list-item .product-no-image{ aspect-ratio:1/1; width:100%; }
.product-list-item{ display:flex; flex-direction:column; }
.product-list-item-info{ margin-top:auto; }
.category-products-image, .products-slider-image img, .product-slider-image-container img{
  transition:transform .4s ease;
}
a:hover .category-products-image, a:hover .product-slider-image-container img{ transform:scale(1.05); }

.brand-name, .product-list-item-info .brand{
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:.07em; text-transform:uppercase !important;
  color:#8b9098 !important; margin-bottom:2px !important;
}
/* Kart adı — SADECE listeleme/şerit kartlarında kısalır (ürün sayfasının h1'i hariç) */
.product-list-item .product-name,
.product-container .product-name{
  font-size:14px !important; font-weight:500 !important; line-height:1.35 !important;
  color:var(--vb-ink) !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.7em;
}
/* Ürün sayfasının başlığı büyük ve tam kalsın */
h1.product-name{
  font-size:26px !important; font-weight:700 !important; line-height:1.3 !important;
  letter-spacing:-.01em; color:var(--vb-ink) !important;
  display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important; min-height:0 !important;
}
.price-main{ height:auto !important; font-size:18px !important; align-items:baseline; gap:8px; }
.sell-price{ color:var(--vb-ink) !important; font-weight:800 !important; }
.price-main .line-through, .price-main [class*="line-through"]{
  color:#a4a9b0 !important; font-weight:500 !important; font-size:14px !important;
}
.add-to-cart-overlay{ margin-top:8px !important; }
.add-to-cart-overlay > .flex{ width:100%; }
.add-to-cart-overlay button{
  width:100%; height:40px; border:0 !important; border-radius:10px !important;
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.04em;
  background:var(--vb-ink) !important; color:#fff !important;
  transition:background .2s ease;
}
.add-to-cart-overlay button:hover{ background:var(--vb-accent) !important; }
.add-to-cart-overlay button.out-of-stock, .add-to-cart-overlay .out-of-stock{
  background:#f2f3f5 !important; color:#9aa0a6 !important;
}
/* Stok rozeti: köşeye yapışık gri yazı yerine modern hap */
.stock-status span{
  top:8px !important; right:8px !important;
  background:rgba(17,19,24,.86) !important; color:#fff !important;
  border-radius:999px !important; padding:4px 10px !important;
  font-size:0 !important; font-weight:600 !important; letter-spacing:.03em;
  line-height:1.4 !important;
}
/* Rozet yazısı "Tükendi" değil "STOKTA YOK" olsun (Kaan 23 Ağu) */
.stock-status span::after{
  content:"STOKTA YOK"; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff;
}
/* Tükenmiş ürün: solgun + listenin sonuna (ilk sayfayı stoklu ürünler doldursun) */
div[class*="grid-cols-"] > div.grid:has(.stock-status){ order:9; }
div.grid:has(.stock-status) .product-slider-image-container,
.slick-slide:has(.stock-status) .product-slider-image-container{ filter:grayscale(.6); opacity:.9; }
/* Stokta olmayan kartta fiyatın altına açık uyarı (buton yoksa da görünsün) */
.product-container:has(.stock-status) .product-list-item-info::after{
  content:"STOKTA YOK"; display:block; margin-top:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em; color:#9aa0a6;
}
.product-container:has(.stock-status):has(.add-to-cart-overlay) .product-list-item-info::after{ content:none; }

/* --- B) MASAÜSTÜ (≥769px): yoğun e-ticaret düzeni ------------------------- */
@media (min-width:769px){

  /* B1) Sabit üst çubuk — kırmızı duyuru yukarı kayar, menü ekranda kalır */
  body > div > div > [id="-1"]:first-child{
    position:sticky; top:-64px; z-index:60; background:#fff;
    box-shadow:0 1px 0 rgba(17,19,24,.07);
  }

  /* B2) Kategori ızgarası: 4 → 5 sütun (≥1200px) */
  div[class*="grid-cols-"]:has(> div.grid > a > .product-list-item){ gap:18px !important; }

  /* B3) Anasayfa ürün "slider"ları → gerçek ızgara (4 görünür yerine 12) */
  .products-slider-main .slick-list{ overflow:visible !important; }
  .products-slider-main .slick-track{
    width:100% !important; transform:none !important;
    display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px;
    grid-auto-rows:362px;              /* eşit yükseklikte kartlar        */
    max-height:742px; overflow:hidden; /* en fazla 2 sıra — kırpma TAM sıra */
  }
  .products-slider-main .slick-slide{
    width:auto !important; float:none !important; height:auto !important;
  }
  .products-slider-main .slick-slide > div{ height:100%; }
  .products-slider-main .slick-slide > div > a{ height:100%; display:block; }
  .products-slider-main .product-container{ height:100%; display:flex; flex-direction:column; }
  .products-slider-main .product-list-item-info{ margin-top:auto; }
  .products-slider-main .slick-cloned{ display:none !important; }
  /* slick'in clearfix ::before/::after'i ızgarada BOŞ HÜCRE açıyor — kapat */
  .products-slider-main .slick-track::before,
  .products-slider-main .slick-track::after{ content:none !important; display:none !important; }
  /* Tükenmiş ürün GİZLENMEZ (Kaan 23 Ağu): görünür kalır, sona atılır, "STOKTA YOK" yazar */
  .products-slider-main .slick-slide:has(.stock-status){ order:9; }
  .products-slider-main .slick-slide:nth-child(n+25){ display:none !important; }
  .products-slider-main .slick-arrow, .products-slider-main .slick-dots{ display:none !important; }
  .products-slider-main{ padding-top:28px !important; padding-bottom:28px !important; }

  /* B4) Bölüm başlıkları */
  .products-slider-title h2, .hero-image-banner-main h2, .text-view-main h2{
    font-size:26px !important; font-weight:800 !important; letter-spacing:-.02em;
  }
  .products-slider-title{ margin-bottom:18px; }
  .products-slider-title::after{
    content:""; display:block; width:44px; height:3px; margin-top:10px;
    background:var(--vb-accent); border-radius:3px;
  }

  /* B5) Hero: 648px → 440px */
  [id="1"] .slider-grid-main, [id="1"] .slider-grid, [id="1"] .desktop-image-slider{
    max-height:440px !important; overflow:hidden;
  }
  [id="1"] img.slider-image{ height:440px !important; object-fit:cover; object-position:center; }

  /* B6) Tanıtım metni: 341px → ~170px, ve sayfanın altına taşınır */
  .text-view-main{ padding-top:26px !important; padding-bottom:26px !important; }
  .text-view-main .content{ max-width:900px; font-size:15px !important; line-height:1.65 !important; }

  /* B7) Kategori görsel şeridi: 620px → ~330px */
  .category-image-slider-main .category-image-banner-main{
    max-height:330px !important; overflow:hidden; border-radius:var(--vb-r);
  }
  .category-image-slider-main .category-image-banner-main img{
    height:330px !important; object-fit:cover; transition:transform .5s ease;
  }
  .category-image-slider-main a:hover .category-image-banner-main img{ transform:scale(1.04); }

  /* B8) KOLEKSİYONLAR banner'ı: 929px → ~470px */
  .hero-image-banner-main{ padding-top:22px !important; padding-bottom:22px !important; }
  .hero-image-banner-main .container{ padding-top:22px !important; }
  .hero-image-main{
    max-height:380px !important; overflow:hidden; border-radius:16px; margin-top:20px !important;
  }
  .hero-image-main img{ height:380px !important; object-fit:cover; }

  /* B9) Kolaj: 776px → ~465px (satır yüksekliği küçültülür, KIRPILMAZ) */
  .gallery{ grid-template-rows:repeat(8,44px) !important; gap:16px !important; }
  .gallery img{ transition:transform .5s ease; }
  .gallery a:hover img{ transform:scale(1.04); }

  /* B10) Footer: 924px → ~520px */
  footer > .container{ min-height:0 !important; padding-top:26px !important; margin-bottom:10px !important; }
  footer .footer-title{ font-size:14px !important; margin-bottom:8px !important; }
  footer .footer-links a, footer .footer-links li{ font-size:13px !important; line-height:1.75 !important; }

  /* B11) Çerez şeridi: ekranın ortasındaki kutu → alt şerit (mobilde zaten yapılmıştı) */
  .cookie-bar{
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:none !important; transform:none !important;
    background:rgba(17,19,24,.96) !important; color:#fff !important;
    padding:14px 28px !important; border-radius:0 !important; z-index:9999 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:18px; text-align:center;
  }
  .cookie-bar a{ color:#fff !important; text-decoration:underline; }
  .cookie-bar p{ font-size:13px !important; margin:0 !important; }
  body:has(.cookie-bar){ padding-bottom:100px; }
  body:has(.cookie-bar) a.float{ bottom:112px !important; }

  /* B12) Tanıtım metni bloğu daha da toparlansın */
  .text-view-main{ padding-top:18px !important; padding-bottom:18px !important; }
  .text-view-main .content p{ margin-bottom:8px !important; }

  /* B13) Footer'ın üst boşlukları */
  footer .mb-5{ margin-bottom:12px !important; }
  footer .grid-cols-8{ gap:14px !important; }
  footer > .container{ padding-bottom:0 !important; }

  /* B14) Sayfalama: modern hap düğmeler */
  .pagination li, [class*="pagination"] li{ border-radius:8px !important; }
}

/* --- C) 5 sütunlu ızgara (geniş ekran) ----------------------------------- */
@media (min-width:1200px){
  div[class*="grid-cols-"]:has(> div.grid > a > .product-list-item){
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

/* --- D) ANASAYFA SIRALAMASI: ürünler yukarı, metin/banner aşağı ----------- */
/* Sadece anasayfada eşleşir (hero + ürün şeridi aynı ebeveynin altında).     */
/* Telefonda da geçerli — ürünler bannerların üstüne çıksın.                   */
  div:has(> [id="1"] .slider-grid-main):has(> [id="4"] .products-slider-main){
    display:flex !important; flex-direction:column;
  }
  div:has(> [id="1"] .slider-grid-main) > [id="-1"]:first-child{ order:0; }
  div:has(> [id="1"] .slider-grid-main) > [id="0"]{ order:1; }
  div:has(> [id="1"] .slider-grid-main) > [id="1"]{ order:2; }   /* hero          */
  div:has(> [id="1"] .slider-grid-main) > [id="4"]{ order:3; }   /* Haftanın Ür.  */
  div:has(> [id="1"] .slider-grid-main) > [id="3"]{ order:4; }   /* kategoriler   */
  div:has(> [id="1"] .slider-grid-main) > [id="9"]{ order:5; }   /* En Yeniler    */
  div:has(> [id="1"] .slider-grid-main) > [id="5"]{ order:6; }   /* KOLEKSİYONLAR */
  div:has(> [id="1"] .slider-grid-main) > [id="6"]{ order:7; }   /* kolaj         */
  div:has(> [id="1"] .slider-grid-main) > [id="7"]{ order:8; }   /* müşteri yorumu*/
  div:has(> [id="1"] .slider-grid-main) > [id="8"]{ order:9; }   /* güven rozeti  */
  div:has(> [id="1"] .slider-grid-main) > [id="2"]{ order:10; }  /* tanıtım metni */

/* --- E) FOOTER (23 Ağu 2026, Kaan) --------------------------------------- */
/* E1) Alt siyah şerit: içerik ortalanır (sağ taraf bomboş duruyordu) */
.footer-copyright .container{ justify-content:center !important; }
.footer-copyright .text-center{ text-align:center !important; }
/* E2) Telif satırı artık HTML'de düzeltildi (rewrite.py: ©2026, "Coded by" YOK).
       CSS yaması kaldırıldı — tek kaynak HTML.                                */
.footer-copyright p{ color:#efefef; font-size:13px; }
/* E3) Bağlantı sütunları tüm genişliği kullansın (8 sütunun 2'si boştu) */
@media (min-width:769px){
  footer .grid-cols-8 > .col-span-6{ grid-column:1 / -1 !important; }
}

/* ==========================================================================
   F) 26 Ağu 2026 — "ANASAYFADAKİ FOTOLAR YARIM" (Cemre/MotoWest bildirimi)
   Kök neden: 23 Ağu'da bölümleri kısaltırken KAPSAYICIYA max-height + overflow
   verilmişti; görsel eski boyunda kalıp ALTTAN KESİLİYORDU (yarım görünüyordu).
   Doğrusu: görsel kutuyu doldursun (object-fit:cover), kutunun en-boy oranı
   ürünün tamamını gösterecek kadar olsun. Ölçüm: kaynak görsellerde ürünün
   dikey kapladığı oran (parlaklık/doygunluk analizi):
     kategori şeridi  0.14–0.87  -> görünür pay >= %73  -> 9/10 oran
     KOLEKSİYONLAR    0.19–0.89  -> görünür pay >= %72  -> 25/12 oran
     kolaj (en dar)   0.16–0.80  -> satır 44px -> 64px
   ========================================================================== */

/* F1) Kategori şeridi (KASKLAR / MONTLAR / BOTLAR) — alttan kesilme bitti */
.category-image-slider-main .category-image-banner-main{
  max-height:none !important; height:auto !important;
  aspect-ratio:9 / 10; overflow:hidden; border-radius:var(--vb-r);
}
.category-image-slider-main .category-image-banner-main > span{
  display:block !important; width:100% !important; height:100% !important;
  position:relative !important; padding:0 !important;
}
.category-image-slider-main .category-image-banner-main img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center 50% !important;
  transition:transform .5s ease;
}
.category-image-slider-main .slick-track, .category-image-slider-main .slick-slide,
.category-image-slider-main .slick-slide > div, .category-image-slider-main .slick-slide a{
  height:auto !important;
}

/* F2) KOLEKSİYONLAR banner'ı — mont/pantolon alttan kesiliyordu */
.hero-image-main{
  max-height:none !important; height:auto !important;
  aspect-ratio:25 / 12; overflow:hidden; border-radius:16px;
}
.hero-image-main > span{
  display:block !important; width:100% !important; height:100% !important;
  position:relative !important; padding:0 !important;
}
.hero-image-main img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center 54% !important;
}

/* F3) Kolaj: satır yüksekliği 44 -> 64px (kask ve eldiven tam görünsün) */
@media (min-width:769px){
  .gallery{ grid-template-rows:repeat(8,64px) !important; }
}
.gallery img{ object-fit:cover !important; object-position:center 50% !important; }

/* F4) Üst kayan görsel (hero slider) da kapsayıcı kırpmasın */
[id="1"] .slider-grid-main{ overflow:hidden; }
[id="1"] img.slider-image{ width:100% !important; object-fit:cover !important; object-position:center 50% !important; }

/* F5) 26 Ağu — MOBİL DÜZELTME: kategori karosu sıfır boyuta düşüyordu.
   Sebep: mobil dokunma yaması bağlantıyı inline-flex yapıyor, genişliği içeriğe
   göre büzülüyor; F1'deki en-boy oranı 0 genişlikte 0 yükseklik veriyor.
   Çözüm: bağlantı ve karo tam genişlik olsun. */
.category-image-slider-main a{ display:block !important; width:100% !important; }
.category-image-slider-main .category-image-banner-main{ width:100% !important; }

/* ==========================================================================
   G) 27 Ağu 2026 — ÜRÜN GÖRSELİ MASAÜSTÜNDE DEV (Kaan bildirdi)
   Tema, ürün görselini sütun genişliğine göre kare açıyor: 1440 px'te 723×723.
   Küçük bir aksesuar (kask havalandırma parçası) ekranı kaplıyordu.
   Görsel kutusu 460 px ile sınırlandı, görsel kırpılmadan (contain) ortalanıyor.
   ========================================================================== */
@media (min-width:769px){
  /* Sutun orani 2:1 idi -> gorsel 900 px yer kapliyordu. 1:1'e cekildi. */
  /* 🧨 Cocuklar col-span-2 tasiyor; sadece sablonu degistirirsen gorsel tum
     satiri kaplayip detay kutusu ALTA duser. Span'lari da ezmek SART. */
  div:has(> .product-detail-page-slider-main){
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr) !important;
    gap:28px !important;
  }
  .product-detail-page-slider-main,
  .product-detail-page-detail-box{ grid-column:span 1 / span 1 !important; }
  .product-detail-page-slider-main .product-detail-page-slider,
  .product-detail-page-slider-main .variant-images-large,
  .product-detail-page-slider-main .slick-slide,
  .product-detail-page-slider-main .slick-list{
    max-height:430px !important;
  }
  .product-detail-page-slider-main .product-detail-page-slider img,
  .product-detail-page-slider-main .variant-images-large img{
    max-height:430px !important; object-fit:contain !important;
  }
  .product-detail-page-slider-main{ display:flex; align-items:flex-start; }
}


/* ==========================================================================
   H) 27 Ağu 2026 — ÜRÜN AÇIKLAMASI (Kaan: "çok amatör geldi")
   Açıklamalar tedarikçiden kopyalanmış; içinde inline `arial black / 18pt`
   başlık (ürün adının tekrarı) ve 14pt gövde var. Inline stiller eziliyor,
   tipografi sayfanın geri kalanıyla aynı hizaya geliyor.
   ========================================================================== */
.tab-content{ color:#25282e; }
.tab-content *{
  font-family:inherit !important;
  font-size:14.5px !important;
  line-height:1.75 !important;
  color:inherit !important;
  letter-spacing:normal !important;
}
/* Açıklamanın ilk satırı ürün adının tekrarı — başlık gibi durur, ezici olmaz */
.tab-content > span:first-child,
.tab-content > p:first-child > span:first-child{
  display:block; font-size:15.5px !important; font-weight:800 !important;
  letter-spacing:-.01em !important; margin-bottom:10px; color:#111318 !important;
}
.tab-content p{ margin:0 0 10px !important; }
.tab-content strong, .tab-content b{ font-weight:700 !important; color:#111318 !important; }
.tab-content img{ max-width:100% !important; height:auto !important; border-radius:10px; margin:12px 0; }
.tab-content table{ width:100% !important; border-collapse:collapse; margin:12px 0; }
.tab-content td, .tab-content th{ border:1px solid var(--vb-line); padding:9px 11px; }
.tab-content a{ color:var(--vb-accent) !important; text-decoration:underline; }
/* <br> yığınından üretilen özellik listesi */
.vb-oz-kap{ margin:6px 0 4px; }
.vb-oz-baslik{
  font-size:12px !important; font-weight:800 !important; letter-spacing:.06em;
  text-transform:uppercase; color:#6b7280 !important; margin:14px 0 8px;
}
ul.vb-ozellik{ list-style:none !important; margin:0 !important; padding:0 !important; }
ul.vb-ozellik li{
  position:relative; padding:0 0 0 20px; margin:0 0 7px !important;
  font-size:14.5px !important; line-height:1.65 !important;
}
ul.vb-ozellik li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--vb-accent);
}
/* Açıklama başlığı ("Ürün Açıklaması") bölüm başlığı gibi dursun */
.product-detail-tabs-main .tab-title, .product-detail-tabs-main [class*="tab-header"]{
  font-weight:700 !important; letter-spacing:.01em;
}
/* MotoWest — motosiklet bolumu
   Klon temasinin ustune biner; sadece .vb-motor ve menu ogeleri etkilenir. */

:root{
  --mw-lacivert:#00268a;
  --mw-kirmizi:#e30613;
  --mw-metin:#0d1117;
  --mw-soluk:#6b7280;
  --mw-cizgi:#e7e9ee;
  --mw-zemin:#f6f7f9;
}

.vb-motor{display:block;color:var(--mw-metin);}
.vb-motor *{box-sizing:border-box;}
.vb-kap{max-width:1280px;margin:0 auto;padding:0 20px;}
.vb-kap-dar{max-width:900px;}

/* ---------- ust menu: MOTOSIKLETLER acilir kutusu ---------- */
.vb-motor-li{position:relative;}
.vb-motor-li>a.parent{display:flex;align-items:center;}
.vb-motor-li .vb-motor-alt{
  padding:16px;position:absolute;top:40px;left:0;background:#fff;z-index:999;
  min-width:210px;visibility:hidden;opacity:0;margin-top:-10px;height:0;overflow:hidden;
  transition:opacity .18s ease,margin-top .18s ease;border-top:1px solid var(--mw-cizgi);
}
/* Tema, acilir kutuyu `header.header .nav-links .announcement-show.nav-links-sub-main`
   ile gizliyor (ozgulluk 0-4-1) ve React ile `.active` sinifi ekleyerek aciyor.
   Bizim hover kuralimiz (0-3-0) o kurali yenemedigi icin kutu hic acilmiyordu
   (29 Agu 2026, olculdu). !important sart; tema da `.active` kuralinda kullaniyor. */
.vb-motor-li:hover .vb-motor-alt,.vb-motor-li:focus-within .vb-motor-alt{
  visibility:visible!important;opacity:1!important;margin-top:0!important;
  height:auto!important;overflow:visible!important;
  box-shadow:0 10px 28px rgba(13,17,23,.13);
}
.vb-motor-li .vb-motor-alt .sub-main-div{padding-bottom:9px;min-width:170px;}
.vb-motor-li .vb-motor-alt .sub-link{font-size:13.5px;letter-spacing:.02em;}
.vb-motor-li .vb-motor-alt .sub-link:hover{color:var(--mw-kirmizi)!important;}
.vb-menu-ayrac{margin-top:9px;padding-top:11px;border-top:1px solid var(--mw-cizgi);}

/* ---------- ekmek kirintisi ---------- */
.vb-yol{border-bottom:1px solid var(--mw-cizgi);background:#fff;}
.vb-yol .vb-kap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  min-height:46px;font-size:12.5px;color:var(--mw-soluk);}
.vb-yol a{color:var(--mw-soluk);text-decoration:none;}
.vb-yol a:hover{color:var(--mw-kirmizi);}
.vb-yol i{font-style:normal;color:#c3c8d1;}
.vb-yol span{color:var(--mw-metin);font-weight:500;}

/* ---------- model hero ---------- */
.vb-hero{position:relative;background:#0d1117;overflow:hidden;}
.vb-hero-gorsel{position:relative;width:100%;aspect-ratio:16/7;min-height:320px;}
.vb-hero-gorsel img{width:100%;height:100%;object-fit:cover;display:block;}
.vb-hero-ic{position:absolute;inset:auto 0 0 0;padding:46px 0 34px;
  background:linear-gradient(to top,rgba(6,9,14,.93) 12%,rgba(6,9,14,.62) 55%,transparent);}
.vb-hero-marka{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--mw-kirmizi);
  padding:5px 11px;border-radius:4px;margin-bottom:12px;}
.vb-hero-ad{font-size:clamp(28px,4.4vw,50px);line-height:1.08;font-weight:800;
  color:#fff;margin:0 0 20px;letter-spacing:-.02em;}
.vb-hero-btn{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- butonlar ---------- */
.vb-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:8px;font-size:14.5px;font-weight:700;
  letter-spacing:.01em;text-decoration:none;transition:.16s;border:1.5px solid transparent;}
.vb-btn-ana{background:var(--mw-kirmizi);color:#fff;}
.vb-btn-ana:hover{background:#b8040f;color:#fff;transform:translateY(-1px);}
.vb-btn-ikincil{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.vb-btn-ikincil:hover{background:#fff;color:var(--mw-metin);border-color:#fff;}

/* ---------- bolum iskeleti ---------- */
.vb-bolum{padding:46px 0;}
.vb-bolum:nth-of-type(even){background:var(--mw-zemin);}
.vb-bolum-bas{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.vb-bolum-bas h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;margin:0;
  letter-spacing:-.01em;color:var(--mw-metin);}
.vb-tumu{font-size:13px;font-weight:600;color:var(--mw-kirmizi);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;}
.vb-tumu:hover{text-decoration:underline;color:var(--mw-kirmizi);}

/* ---------- genel bakis ---------- */
.vb-ozet h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;margin:0 0 14px;}
.vb-ozet p{font-size:16px;line-height:1.75;color:#374151;margin:0;}

/* ---------- marka seridi ---------- */
.vb-ms-serit{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  max-width:1280px;margin:0 auto;padding:22px 20px;}
.vb-ms{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:74px;padding:12px 8px;border:1px solid var(--mw-cizgi);
  border-radius:10px;background:#fff;text-decoration:none;transition:.16s;text-align:center;}
.vb-ms strong{font-size:14px;font-weight:750;color:var(--mw-metin);letter-spacing:-.01em;}
.vb-ms span{font-size:11.5px;color:var(--mw-soluk);}
.vb-ms:hover{border-color:var(--mw-kirmizi);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(13,17,23,.09);}
.vb-ms.aktif{border-color:var(--mw-kirmizi);background:#fff5f5;}
.vb-ms.aktif strong{color:var(--mw-kirmizi);}

/* ---------- model kartlari ---------- */
.vb-mk-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.vb-mk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mw-cizgi);
  border-radius:14px;overflow:hidden;text-decoration:none;transition:.18s;}
.vb-mk:hover{border-color:#d6dae1;transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,17,23,.10);}
.vb-mk-gorsel{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:10px;}
.vb-mk-gorsel img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease;}
.vb-mk:hover .vb-mk-gorsel img{transform:scale(1.045);}
.vb-mk-bilgi{padding:14px 16px 16px;border-top:1px solid var(--mw-cizgi);
  display:flex;flex-direction:column;gap:4px;flex:1;}
.vb-mk-marka{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mw-soluk);}
.vb-mk-ad{font-size:14.5px;font-weight:700;color:var(--mw-metin);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vb-mk-git{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:700;color:var(--mw-kirmizi);}

/* ---------- galeri ---------- */
.vb-g-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.vb-g-oge{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:#fff;border:1px solid var(--mw-cizgi);}
.vb-g-oge img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.vb-g-oge:hover img{transform:scale(1.05);}

/* ---------- teknik ozellikler ---------- */
.vb-tk-blok+.vb-tk-blok{margin-top:26px;}
.vb-tk-blok h3{font-size:15px;font-weight:750;margin:0 0 12px;color:var(--mw-metin);}
.vb-tk{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px;margin:0;
  background:#fff;border:1px solid var(--mw-cizgi);border-radius:12px;padding:6px 20px;}
.vb-tk-satir{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid #f1f3f6;}
.vb-tk-satir dt{font-size:13.5px;font-weight:600;color:var(--mw-soluk);margin:0;flex:0 0 44%;}
.vb-tk-satir dd{font-size:13.5px;color:var(--mw-metin);margin:0;text-align:right;flex:1;line-height:1.5;}

/* ---------- ekipman capraz bagi ---------- */
.vb-ekipman{background:var(--mw-zemin);}
.vb-ek-izgara{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.vb-ek{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mw-cizgi);
  border-radius:12px;overflow:hidden;text-decoration:none;transition:.16s;}
.vb-ek:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,17,23,.10);}
.vb-ek-gorsel{aspect-ratio:1/1;padding:8px;display:flex;align-items:center;justify-content:center;}
.vb-ek-gorsel img{width:100%;height:100%;object-fit:contain;}
.vb-ek-bilgi{padding:10px 12px 13px;border-top:1px solid var(--mw-cizgi);
  display:flex;flex-direction:column;gap:3px;flex:1;}
.vb-ek-marka{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mw-soluk);}
.vb-ek-ad{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--mw-metin);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vb-ek-fiyat{margin-top:auto;padding-top:6px;font-size:14px;font-weight:800;color:var(--mw-metin);}

/* ---------- marka / sayfa basligi ---------- */
.vb-marka-bas{padding:44px 0 30px;background:#fff;}
.vb-marka-bas h1{font-size:clamp(26px,3.6vw,42px);font-weight:800;margin:0 0 12px;
  letter-spacing:-.02em;color:var(--mw-metin);}
.vb-marka-bas p{font-size:15.5px;line-height:1.65;color:var(--mw-soluk);margin:0;max-width:760px;}
.vb-marka-bas .vb-hero-btn{margin-top:22px;}
.vb-marka-bas .vb-btn-ikincil{background:#fff;color:var(--mw-metin);border-color:#d2d6dd;}
.vb-marka-bas .vb-btn-ikincil:hover{border-color:var(--mw-metin);background:#fff;}

/* ---------- fiyat listesi ---------- */
.vb-pdf-liste{display:flex;flex-direction:column;gap:12px;}
.vb-pdf{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--mw-cizgi);
  border-radius:12px;padding:16px 18px;text-decoration:none;transition:.16s;min-height:76px;}
.vb-pdf:hover{border-color:var(--mw-kirmizi);box-shadow:0 8px 22px rgba(13,17,23,.08);}
.vb-pdf-ikon{flex:0 0 46px;height:46px;border-radius:9px;background:var(--mw-kirmizi);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;}
.vb-pdf-bilgi{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.vb-pdf-bilgi strong{font-size:15px;font-weight:750;color:var(--mw-metin);}
.vb-pdf-bilgi span{font-size:13px;color:var(--mw-soluk);}
.vb-pdf-bilgi em{font-size:11.5px;font-style:normal;color:#9aa1ac;}
.vb-pdf-git{font-size:13px;font-weight:700;color:var(--mw-kirmizi);white-space:nowrap;}

/* ---------- servis ---------- */
.vb-srv{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.vb-srv-blok{background:#fff;border:1px solid var(--mw-cizgi);border-radius:12px;padding:22px 24px;}
.vb-srv-blok h2{font-size:15.5px;font-weight:750;margin:0 0 9px;color:var(--mw-metin);}
.vb-srv-blok p{font-size:14px;line-height:1.68;color:#4b5563;margin:0;}

/* ---------- alt cagri seridi ---------- */
.vb-cta{background:var(--mw-metin);color:#fff;padding:34px 0;}
.vb-cta-ic{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.vb-cta-yazi{display:flex;flex-direction:column;gap:4px;}
.vb-cta-yazi strong{font-size:18px;font-weight:750;letter-spacing:-.01em;}
.vb-cta-yazi span{font-size:14px;color:#aeb6c2;}
.vb-cta-btn{display:flex;gap:11px;flex-wrap:wrap;}

/* ---------- duyarli ---------- */
@media (max-width:1199px){
  .vb-mk-izgara{grid-template-columns:repeat(3,1fr);}
  .vb-ek-izgara{grid-template-columns:repeat(4,1fr);}
  .vb-ms-serit{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .vb-g-izgara{grid-template-columns:repeat(3,1fr);}
  .vb-tk{grid-template-columns:1fr;gap:0;}
  .vb-srv{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .vb-kap{padding:0 16px;}
  .vb-bolum{padding:32px 0;}
  .vb-hero-gorsel{aspect-ratio:4/3;min-height:270px;}
  .vb-hero-ic{padding:30px 0 24px;}
  .vb-hero-btn .vb-btn{width:100%;}
  .vb-mk-izgara{grid-template-columns:repeat(2,1fr);gap:12px;}
  .vb-ek-izgara{grid-template-columns:repeat(2,1fr);gap:11px;}
  .vb-g-izgara{grid-template-columns:repeat(2,1fr);gap:9px;}
  .vb-ms-serit{grid-template-columns:repeat(2,1fr);padding:16px;}
  .vb-marka-bas{padding:30px 0 22px;}
  .vb-cta-ic{flex-direction:column;align-items:flex-start;}
  .vb-cta-btn{width:100%;}
  .vb-cta-btn .vb-btn{flex:1;}
  .vb-tk-satir{flex-direction:column;gap:3px;}
  .vb-tk-satir dd{text-align:left;}
  .vb-pdf{flex-wrap:wrap;}
  /* mobil menude acilir kutu her zaman acik dursun */
  .vb-motor-li .vb-motor-alt{position:static;visibility:visible;opacity:1;height:auto;
    overflow:visible;box-shadow:none;margin-top:0;border-top:0;padding:0 0 0 12px;}
}
@media (max-width:420px){
  .vb-mk-izgara,.vb-ek-izgara{grid-template-columns:repeat(2,1fr);gap:9px;}
  .vb-mk-bilgi{padding:11px 12px 13px;}
  .vb-mk-ad{font-size:13px;}
  .vb-hero-ad{font-size:26px;}
}

/* ---------- anasayfa marka seridi basligi ---------- */
.vb-ms-baslik{max-width:1280px;margin:0 auto;padding:26px 20px 0;
  font-size:12px;font-weight:800;letter-spacing:.16em;color:#6b7280;text-transform:uppercase;}
.vb-ms-anasayfa{padding-top:12px;}
@media (max-width:768px){
  .vb-ms-baslik{padding:18px 16px 0;font-size:11px;}
}


/* ---------- ust menu 12 ogeye sigsin (29 Agu 2026) ----------
   Basligin ic genisligi 1224 px; logo 200 + ikonlar 60 dusunce menuye
   ~960 px kaliyor. Tema her ogeye 15+15 px bosluk veriyordu: 12 oge =
   360 px sadece bosluk -> MOTOSIKLETLER eklenince satir tasiyordu.
   Menu yalnizca >=1101 px'te goruniyor, kural o araliga kapali.
   DIKKAT: nowrap VERME - tema uzun basliklari iki satira sariyor,
   tek satira zorlamak menuyu tam tersine genisletiyor (olculdu). */
@media (min-width:1101px){
  header .nav-links > ul > li{padding-left:7px!important;padding-right:7px!important;}
  header .nav-links > ul > li > a.parent{font-size:13px!important;letter-spacing:-.01em;}
}
@media (min-width:1400px){
  header .nav-links > ul > li{padding-left:10px!important;padding-right:10px!important;}
  header .nav-links > ul > li > a.parent{font-size:13.5px!important;}
}

/* etiketsiz uzun aciklama satiri: tabloya sikismasin */
.vb-tk-not{margin:14px 0 0;padding:16px 20px;background:#fff;border:1px solid var(--mw-cizgi);
  border-radius:12px;font-size:14px;line-height:1.7;color:#4b5563;}

/* ---------- statik sayfalarda logo olcusu ----------
   Magazada React logo kutusunu masaustunde 200x114,29'a buyutuyor (mobilde
   150x85,71 birakiyor). Bu sayfalarda React yok -> her zaman 150 kaliyordu.
   .vb-statik yalnizca motosiklet bolumunun sayfalarinda var; magaza etkilenmez. */
@media (min-width:1101px){
  .vb-statik header .logo-main{width:200px!important;height:114.286px!important;}
}

/* ---------- SERVIS sayfasi (31 Agu 2026, Yusuf Bey istegi) ----------
   Cemre: "yetkili servisi oldugumuz markalar" + "Whatsapptan yazsinlar".
   Marka kartlari SIMDILIK yazi tipiyle; resmi logolar site/img/servis-marka/
   altina birakilinca uret.py otomatik logoya geciyor (marka_logo). */
.vb-srv-bas .vb-srv-not{margin:12px 0 0;font-size:13px;color:var(--mw-soluk);}

.vb-sm-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.vb-sm{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mw-cizgi);
  border-radius:12px;overflow:hidden;transition:.16s;}
.vb-sm:hover{border-color:var(--mw-kirmizi);box-shadow:0 10px 26px rgba(13,17,23,.09);}
.vb-sm-gorsel{display:flex;align-items:center;justify-content:center;min-height:116px;
  padding:20px 16px;background:var(--mw-zemin);border-bottom:1px solid var(--mw-cizgi);}
/* Ducati kalkani gibi DIKEY logolar 56px tavanda kucucuk kaliyordu; geniş
   kelime-logolari zaten 150px genislikte sinirli, tavani yukseltmek yalnizca
   dikey olanlari buyutuyor -> optik denge. */
.vb-sm-gorsel img{max-width:150px;max-height:72px;width:auto;height:auto;
  object-fit:contain;display:block;}
.vb-sm-ad{font-size:clamp(18px,2vw,23px);font-weight:800;letter-spacing:-.015em;
  color:var(--mw-metin);text-align:center;line-height:1.15;}
.vb-sm-alt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;flex-wrap:wrap;}
.vb-sm-modeller,.vb-sm-modeller-yok{font-size:12.5px;font-weight:600;letter-spacing:.01em;}
.vb-sm-modeller{color:var(--mw-soluk);text-decoration:none;border-bottom:1px solid transparent;}
.vb-sm-modeller:hover{color:var(--mw-kirmizi);border-bottom-color:var(--mw-kirmizi);}
.vb-sm-modeller-yok{color:var(--mw-soluk);}
.vb-sm-rnd{display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  padding:0 14px;border:1.5px solid var(--mw-cizgi);border-radius:7px;font-size:13px;
  font-weight:700;color:var(--mw-metin);text-decoration:none;transition:.16s;
  margin-left:auto;}
.vb-sm-rnd:hover{background:var(--mw-metin);border-color:var(--mw-metin);color:#fff;}

/* randevu blogu */
.vb-rnd{background:var(--mw-zemin);padding:52px 0;}
.vb-rnd-bas{margin-bottom:26px;}
.vb-rnd-bas h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;margin:0 0 8px;
  letter-spacing:-.01em;color:var(--mw-metin);}
.vb-rnd-bas p{margin:0;font-size:14.5px;color:var(--mw-soluk);}
.vb-rnd-adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px;}
.vb-rnd-adim{background:#fff;border:1px solid var(--mw-cizgi);border-radius:12px;padding:20px 20px 18px;}
.vb-rnd-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--mw-kirmizi);color:#fff;font-size:13.5px;font-weight:800;
  margin-bottom:12px;}
.vb-rnd-adim strong{display:block;font-size:15.5px;font-weight:750;color:var(--mw-metin);
  margin-bottom:5px;letter-spacing:-.01em;}
.vb-rnd-adim p{margin:0;font-size:13.5px;line-height:1.65;color:var(--mw-soluk);}
.vb-rnd-btn{display:flex;gap:12px;flex-wrap:wrap;}
.vb-rnd-btn .vb-btn-ikincil{background:#fff;color:var(--mw-metin);border-color:#d2d6dd;}
.vb-rnd-btn .vb-btn-ikincil:hover{border-color:var(--mw-metin);background:#fff;}

@media (max-width:1199px){
  .vb-sm-izgara{grid-template-columns:repeat(3,1fr);gap:14px;}
}
@media (max-width:899px){
  .vb-sm-izgara{grid-template-columns:repeat(2,1fr);}
  .vb-rnd-adimlar{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .vb-sm-izgara{gap:12px;}
  .vb-sm-gorsel{min-height:84px;padding:18px 12px;}
  .vb-sm-alt{padding:10px 12px;gap:8px;}
  .vb-sm-rnd{min-height:34px;padding:0 11px;font-size:12.5px;}
  .vb-rnd{padding:36px 0;}
  .vb-rnd-btn{width:100%;}
  .vb-rnd-btn .vb-btn{flex:1;}
}
.vb-srv-bas .vb-srv-ust{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mw-kirmizi);margin-bottom:10px;}

/* ---------- servis -> magaza caprazi (31 Agu 2026, Kaan istegi) ---------- */
.vb-magaza .vb-mg-not{margin:-14px 0 18px;font-size:14.5px;color:var(--mw-soluk);max-width:720px;}
.vb-mg-kat-serit{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.vb-mg-kat{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1px solid var(--mw-cizgi);border-radius:999px;background:#fff;font-size:13px;
  font-weight:650;color:var(--mw-metin);text-decoration:none;transition:.16s;}
.vb-mg-kat:hover{border-color:var(--mw-kirmizi);color:var(--mw-kirmizi);}
.vb-mg-btn{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.vb-mg-btn .vb-btn-ikincil{background:#fff;color:var(--mw-metin);border-color:#d2d6dd;}
.vb-mg-btn .vb-btn-ikincil:hover{border-color:var(--mw-metin);background:#fff;}

/* WhatsApp'a basinca cikan magaza bildirimi — SOL alt (sag altta tema balonu var) */
/* 🧨 [hidden] display:none dusuk ozgullukte; .vb-bldr{display:flex} onu eziyordu
   -> bildirim sayfa acilir acilmaz gorunuyordu. Acik kural sart. */
.vb-bldr[hidden]{display:none!important;}
.vb-bldr{position:fixed;left:16px;bottom:16px;z-index:9998;width:min(330px,calc(100vw - 108px));
  background:#fff;border:1px solid var(--mw-cizgi);border-radius:14px;padding:16px 40px 16px 16px;
  box-shadow:0 16px 40px rgba(13,17,23,.18);display:flex;flex-direction:column;gap:6px;
  animation:vbBldrGir .28s ease-out;}
@keyframes vbBldrGir{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.vb-bldr strong{font-size:14.5px;font-weight:750;color:var(--mw-metin);letter-spacing:-.01em;}
.vb-bldr span{font-size:13px;line-height:1.55;color:var(--mw-soluk);}
.vb-bldr-git{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;
  min-height:38px;padding:0 16px;border-radius:8px;background:var(--mw-kirmizi);color:#fff;
  font-size:13.5px;font-weight:700;text-decoration:none;}
.vb-bldr-git:hover{background:#b8040f;color:#fff;}
.vb-bldr-kapat{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;
  background:transparent;color:var(--mw-soluk);font-size:21px;line-height:1;cursor:pointer;
  border-radius:8px;}
.vb-bldr-kapat:hover{background:var(--mw-zemin);color:var(--mw-metin);}
@media (max-width:600px){
  .vb-bldr{left:12px;bottom:12px;width:calc(100vw - 100px);padding:14px 36px 14px 14px;}
  .vb-magaza .vb-mg-not{margin:-10px 0 14px;font-size:13.5px;}
  .vb-mg-btn{width:100%;}
  .vb-mg-btn .vb-btn{flex:1;}
}

/* ---------- SEPET (31 Ağu 2026) — ikas sepetinin yerine kendi sepetimiz ---------- */
/* tema basligi z-index:999999999 kullaniyor; cekmece onun USTUNDE olmali */
.mw-cekmece{position:fixed;inset:0;z-index:2147483000;visibility:hidden;}
.mw-cekmece.acik{visibility:visible;}
.mw-cekmece-perde{position:absolute;inset:0;background:rgba(13,17,23,.45);opacity:0;transition:.22s;}
.mw-cekmece.acik .mw-cekmece-perde{opacity:1;}
.mw-cekmece-panel{position:absolute;right:0;top:0;height:100%;width:min(420px,100%);
  background:#fff;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.3,.8,.4,1);box-shadow:-18px 0 44px rgba(13,17,23,.16);}
.mw-cekmece.acik .mw-cekmece-panel{transform:none;}
.mw-cekmece-panel header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--mw-cizgi);}
.mw-cekmece-panel header strong{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.mw-kapat{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;
  color:var(--mw-soluk);width:36px;height:36px;border-radius:8px;}
.mw-kapat:hover{background:var(--mw-zemin);color:var(--mw-metin);}
.mw-cekmece-ic{flex:1;overflow-y:auto;padding:8px 20px;}
.mw-cekmece-alt{border-top:1px solid var(--mw-cizgi);padding:16px 20px;}
.mw-cekmece-alt .vb-btn{width:100%;margin-top:12px;}

.mw-satir{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--mw-cizgi);}
.mw-satir-gor{flex:0 0 66px;height:66px;background:var(--mw-zemin);border-radius:8px;overflow:hidden;}
.mw-satir-gor img{width:100%;height:100%;object-fit:contain;display:block;}
.mw-satir-bilgi{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.mw-satir-ad{font-size:13.5px;font-weight:700;color:var(--mw-metin);text-decoration:none;line-height:1.35;}
.mw-satir-ad:hover{color:var(--mw-kirmizi);}
.mw-satir-beden,.mw-satir-fiyat{font-size:12.5px;color:var(--mw-soluk);}
.mw-adet{display:inline-flex;align-items:center;border:1px solid var(--mw-cizgi);border-radius:8px;
  overflow:hidden;margin-top:5px;width:fit-content;}
.mw-adet button{border:0;background:#fff;width:30px;height:30px;font-size:16px;cursor:pointer;color:var(--mw-metin);}
.mw-adet button:hover:not(:disabled){background:var(--mw-zemin);}
.mw-adet button:disabled{color:#c8ccd4;cursor:default;}
.mw-adet span{min-width:34px;text-align:center;font-size:13.5px;font-weight:700;}
.mw-satir-sag{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.mw-satir-sag strong{font-size:14px;font-weight:800;white-space:nowrap;}
.mw-sil{border:0;background:transparent;color:var(--mw-soluk);font-size:12px;cursor:pointer;
  text-decoration:underline;padding:0;}
.mw-sil:hover{color:var(--mw-kirmizi);}

.mw-ozet{display:flex;flex-direction:column;gap:7px;}
.mw-ozet-satir{display:flex;justify-content:space-between;font-size:13.5px;color:var(--mw-soluk);}
.mw-ozet-satir.kalin{font-size:17px;font-weight:800;color:var(--mw-metin);
  border-top:1px solid var(--mw-cizgi);padding-top:10px;margin-top:4px;}
.mw-bos{color:var(--mw-soluk);text-align:center;padding:40px 0;font-size:14.5px;}
.mw-bekle{color:var(--mw-soluk);padding:30px 0;}
.mw-sepet-sayfa{max-width:760px;}
.mw-sepet-sayfa .mw-ozet{margin-top:20px;}
.mw-sepet-sayfa .mw-ode{margin-top:18px;}

/* seçili beden — tema React'i olmadan seçimi kendimiz gösteriyoruz */
.variant-types.secili{border-color:var(--mw-metin)!important;background:var(--mw-metin)!important;color:#fff!important;}

/* kısa uyarı balonu */
.mw-uyari{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:2147483001;
  background:var(--mw-metin);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;
  font-weight:600;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100vw - 40px);
  box-shadow:0 14px 34px rgba(13,17,23,.28);}
.mw-uyari.gorun{opacity:1;transform:translate(-50%,0);}

@media (max-width:600px){
  .mw-cekmece-panel{width:100%;}
  .mw-satir-gor{flex-basis:56px;height:56px;}
}

/* ---------- ödeme ekranı ---------- */
.mw-odeme{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start;}
.mw-odeme h2{font-size:16px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em;}
.mw-odeme-sol,.mw-odeme-sag{background:#fff;border:1px solid var(--mw-cizgi);border-radius:12px;padding:22px;}
.mw-odeme-sag{position:sticky;top:16px;}
.mw-odeme label{display:block;font-size:13px;font-weight:650;margin-bottom:14px;}
.mw-odeme input[type=text],.mw-odeme input:not([type]),.mw-odeme input[type=email],
.mw-odeme select,.mw-odeme textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;
  border:1px solid var(--mw-cizgi);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;}
.mw-ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mw-secim{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--mw-cizgi);
  border-radius:10px;padding:14px;margin-bottom:10px;cursor:pointer;}
.mw-secim:has(input:checked){border-color:var(--mw-metin);background:var(--mw-zemin);}
.mw-secim input{margin-top:3px;}
.mw-secim span{display:flex;flex-direction:column;gap:3px;font-weight:400;font-size:13px;color:var(--mw-soluk);}
.mw-secim strong{font-size:14.5px;font-weight:750;color:var(--mw-metin);}
.mw-onay{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-weight:400!important;font-size:13px;}
.mw-onay input{margin-top:2px;}
.mw-oz-satir{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--mw-cizgi);font-size:13px;}
.mw-oz-satir em{font-style:normal;color:var(--mw-soluk);}
.mw-oz-satir b{white-space:nowrap;font-weight:750;}
.mw-odeme-sag .mw-ozet{margin-top:14px;}
.mw-odeme-sag .vb-btn{width:100%;margin-top:16px;}
.mw-geri{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--mw-soluk);text-decoration:none;}
.mw-hata{background:#fdeaea;border:1px solid #f5c2c2;color:#8f0a12;padding:12px 15px;
  border-radius:10px;margin-bottom:12px;font-size:13.5px;}
.mw-tamam{background:#fff;border:1px solid var(--mw-cizgi);border-radius:12px;padding:24px;}
.mw-tamam h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mw-soluk);margin:22px 0 6px;}
.mw-tamam .vb-btn{margin-top:20px;}
@media (max-width:900px){ .mw-odeme{grid-template-columns:1fr;} .mw-odeme-sag{position:static;} }
@media (max-width:520px){ .mw-ikili{grid-template-columns:1fr;} }

/* stogu biten urunde sepet butonu — canli DB'ye gore isaretlenir */
button.add-to-cart.mw-kapali{background:#9aa1ab!important;cursor:not-allowed;}
.variant-types[data-mw-tukendi]{position:relative;}
