/* Shared VV TABLO artwork detail experience */
body.vv-detail-open {
  overflow: hidden;
}

/* Tam ekran büyütme açıkken sayfa kaydırması kilitlenir. Modalın kilidiyle
   AYNI yöntem (sınıf) kullanılır; satır içi stil kullanılmaz — böylece bir
   katman kapanınca diğerinin kilidi body'de takılı kalmaz. */
body.vv-zoom-open {
  overflow: hidden;
}

.vv-detail-modal {
  /* R17 — İKİ SÜTUNUN ORTAK ÜST HİZASI.
     Soldaki görselin üst kenarı ile sağdaki metin bloğunun üst kenarı bu TEK
     değişkenden beslenir. Birini değiştirip diğerini unutmak mümkün olmasın
     diye elle yazılmış iki ayrı sayı KULLANILMAZ. */
  --vv-detail-top: 54px;

  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 14, 17, .72);
  backdrop-filter: blur(8px);
}

.vv-detail-modal.is-open {
  display: flex;
}

.vv-detail-dialog {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #faf8f4;
  color: #111110;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

.vv-detail-close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 16, .15);
  border-radius: 50%;
  background: rgba(250, 248, 244, .94);
  color: #111110;
  font: 300 27px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.vv-detail-close:hover,
.vv-detail-close:focus-visible {
  transform: rotate(5deg);
  background: #fff;
}

.vv-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr);
}

/* R17 — GÖRSEL ÜSTTEN HİZALANIR, ORTALANMAZ
   Önceden `justify-content:center` idi: sol sütun 710px yüksekliğindeydi ve
   görsel bu boşluğun ortasına oturuyordu. Ölçüldü — görselin üst kenarı,
   sağdaki başlığın 47px ALTINDA kalıyordu ve iki sütun birbirinden kopuk
   görünüyordu.

   Artık `justify-content:flex-start` ve üst dolgu, sağdaki panelin üst
   dolgusuyla AYNI değişkenden geliyor (--vv-detail-top). Böylece görselin
   üst kenarı ile panel içeriğinin (seri satırı + başlık) üst kenarı aynı
   çizgide başlar; sayı elle uydurulmaz, ikisi tek kaynaktan beslenir. */
.vv-detail-stage {
  min-height: min(720px, calc(100vh - 48px));
  padding: var(--vv-detail-top) 34px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .92), transparent 58%),
    linear-gradient(145deg, #e7e3da, #f4f1eb);
}

/* --------------------------------------------------------------------------
   YATAY / DİKEY GEÇİŞİ (R10)
   Yalnızca eserin İKİ varyantı da varsa görünür (art-detail.js, hidden
   niteliğini yönetir). Tek varyantlı eserlerde ekran R10 öncesiyle birebir
   aynıdır. Sahne (.vv-detail-stage) zaten dikey bir flex olduğu için çubuk
   görselin üstünde, ortalanmış olarak yerleşir.
   -------------------------------------------------------------------------- */
.vv-detail-orientation {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(17, 17, 16, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

.vv-detail-orientation[hidden] { display: none; }

.vv-orientation-option {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #6b6862;
  font: inherit;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.vv-orientation-option:hover { color: #111110; }

.vv-orientation-option.is-selected {
  background: #111110;
  color: #faf8f4;
}

.vv-orientation-option:focus-visible {
  outline: 1px solid #b7a17e;
  outline-offset: 2px;
}

.vv-orientation-option[hidden] { display: none; }

/* --------------------------------------------------------------------------
   EKSİK YÖNÜ OLUŞTUR (2026-08-13)
   Tek yönü olan eserde çubuk gizlenmek yerine, eksik yönün yerinde stüdyoya
   (/olustur/) giden bağlantı gösterilir. Işıltı animasyonu dikkat çekmek
   için; hareket azaltma tercihinde kapanır.
   -------------------------------------------------------------------------- */
.vv-orientation-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f3efe7;
  /* En açık durak #2e7257: #f3efe7 metinle 5,0:1 — 10px metinde AA (4,5:1)
     her karede korunur. Daha açık bir parlama şeridi kontrastı deler. */
  background: linear-gradient(115deg, #143f34 0%, #2e7257 50%, #143f34 100%);
  /* Desen periyodu %200; konum 0→%200 tam bir periyot kaydırır — döngü
     sonunda faz sıçraması (görünür atlama) olmaz. */
  background-size: 200% 100%;
  animation: vv-yon-parilti 3.2s linear infinite;
}

.vv-orientation-create:hover { color: #fff; }

.vv-orientation-create:focus-visible {
  outline: 1px solid #b7a17e;
  outline-offset: 2px;
}

.vv-orientation-create[hidden] { display: none; }

@keyframes vv-yon-parilti {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vv-orientation-create { animation: none; }
}

/* R17 — flex:1 + align-items:center idi; sahne yüksekliğinin tamamını kaplayıp
   görseli kendi içinde de ORTALIYORDU. Yani sahneyi üstten hizalamak tek
   başına yetmezdi, görsel yine aşağı kaçardı. Artık kutu içeriği kadar yer
   kaplar (flex:0 1 auto) ve görsel üstten başlar. */
.vv-detail-stage-visual {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.vv-detail-frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: calc(100vh - 88px);
  margin-inline: auto;
  align-self: center;
  justify-self: center;
  transition: padding .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.vv-detail-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 116px);
  object-fit: contain;
  margin: auto;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Alt büyük galeri: kapağın büyük hâli BİLEREK ilk sırada tekrar
   gösterilir (istenen davranış), ardından yalnızca gerçekten var olan
   detay görselleri (1-3) gelir — sabit dört kutu YOK, eksik alan için
   boş kutu oluşturulmaz. Küçük thumbnail DEĞİL, sayfada aşağı doğru
   akan büyük/premium eser görselleridir; üstteki ana görselden
   BAĞIMSIZDIR (tıklanamaz, ana görseli değiştirmez — bkz. assets/
   art-detail.js renderGallery()). .vv-detail-grid'in DIŞINDA, dialog
   genişliğinin tamamını kaplayacak şekilde yerleşir. */
/* R17 — ŞERİT ARTIK SOL SÜTUNUN İÇİNDE, BÜYÜK GÖRSELİN ALTINDA.
   Önceden .vv-detail-grid'in DIŞINDA, diyalog genişliğinin tamamını kaplayan
   ayrı bir bant olarak duruyordu; kendi üst çizgisi ve kendi zemini vardı,
   büyük görselle görsel bağı kopuktu. Artık sahnenin bir parçası: zemini
   sahneden devralır, üst çizgisi yoktur, genişliği görselin sütunu kadardır. */
.vv-detail-gallery {
  width: 100%;
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-top: 0;
  background: none;
}

.vv-detail-gallery[hidden] {
  display: none;
}

/* R9.3 — mobil uygulamadaki desen: altta KÜÇÜK RESİM ŞERİDİ.
   Büyük görüntü artık tam ekran katmanında açılıyor (sağ/sol geçişli),
   böylece sayfa derli toplu kalıyor ve müşteri eseri ekranın tamamında
   görebiliyor. */
.vv-detail-gallery-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: #7b7367;
  text-align: center;
}

.vv-detail-gallery-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.vv-detail-gallery-item {
  width: 86px;
  height: 108px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #e0dacd;
  background: #f2eee6;
  cursor: zoom-in;
  transition: border-color .15s ease, transform .15s ease;
}

.vv-detail-gallery-item:hover,
.vv-detail-gallery-item:focus-visible {
  border-color: #b8944f;
  transform: translateY(-2px);
}

/* R9.1: alt galeri görseli hem GENİŞLİK hem YÜKSEKLİK olarak ekrana
   sığdırılır. Önceki sürümde yalnızca genişlik sınırlanıyordu
   (width: 88vw, max-height: none); dikey bir görsel geniş olmayan bir
   dizüstü ekranında ekranı taşıyor ve müşteri eserin tamamını görmek
   için tarayıcıyı küçültmek (Ctrl -) zorunda kalıyordu.
   width/height: auto + iki max sınırı => görsel oranı korunarak
   daima ekrana sığar, kesilmez, letterbox boşluğu oluşmaz.
   Tamamını daha büyük görmek için görsele tıklanınca kiosk'taki gibi
   TAM EKRAN büyütme açılır (bkz. .vv-image-zoom). */
/* Şeritteki küçük görsel: kutuyu tamamen doldurur (kırpılarak), asıl
   eser tam ekran katmanında oranı korunarak gösterilir. */
.vv-detail-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Kapak görseli de aynı şekilde tıklanınca tam ekran büyür. */
.vv-detail-image {
  cursor: zoom-in;
}

/* --- Tam ekran büyütme (kiosk ile aynı davranış) ------------------- */
.vv-image-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: clamp(12px, 3vh, 40px);
  background: rgba(6, 20, 16, .94);
}

.vv-image-zoom.is-open {
  display: grid;
}

/* Ekranın neredeyse tamamı => hangi oranda olursa olsun TAMAMI görünür
   ve mümkün olan EN BÜYÜK boyutta gösterilir (satır içi galeriden daima
   daha büyük olmalı, aksi hâlde "büyütme" küçültme gibi hissedilir). */
.vv-image-zoom img {
  width: auto;
  height: auto;
  max-width: 98vw;
  max-height: 97vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  cursor: zoom-out;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.vv-image-zoom-close {
  position: absolute;
  right: clamp(12px, 2vw, 26px);
  top: clamp(12px, 2vw, 22px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(217, 199, 158, .5);
  background: rgba(10, 35, 28, .6);
  color: #f4f0e7;
  font: 300 30px/1 Georgia, serif;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.vv-image-zoom-close:hover {
  background: rgba(201, 167, 106, .3);
}

/* Sağ/sol geçiş düğmeleri (mobilde kaydırma da çalışır). */
.vv-image-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(217, 199, 158, .45);
  background: rgba(10, 35, 28, .55);
  color: #f4f0e7;
  font: 300 36px/1 Georgia, serif;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.vv-image-zoom-nav[hidden] {
  display: none;
}

.vv-image-zoom-nav:hover {
  background: rgba(201, 167, 106, .32);
}

.vv-image-zoom-prev {
  left: clamp(8px, 2vw, 28px);
}

.vv-image-zoom-next {
  right: clamp(8px, 2vw, 28px);
}

.vv-image-zoom-counter {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vh, 22px);
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(10, 35, 28, .6);
  color: #d9c79e;
  font-size: 12.5px;
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .vv-image-zoom-nav {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .vv-detail-gallery-item {
    width: 72px;
    height: 92px;
  }
}

.vv-detail-frame.frame-black {
  padding: 13px;
  background: #141414;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .26), inset 0 0 0 2px #373737;
}

/* Sahne de açık renk (bkz. .vv-detail-stage). Beyaz çerçeve arka planda
   kaybolmasın diye dış kenarına ince bir çizgi konuyor. */
.vv-detail-frame.frame-white {
  padding: 15px;
  background: linear-gradient(135deg, #f1eee8, #ffffff, #e4e0d7);
  box-shadow: 0 22px 42px rgba(60, 55, 45, .22),
              inset 0 0 0 2px rgba(255, 255, 255, .85),
              0 0 0 1px rgba(17, 17, 16, .12);
}

.vv-detail-frame.frame-oak {
  padding: 15px;
  background: linear-gradient(135deg, #704625, #b67d48, #684023);
  box-shadow: 0 22px 42px rgba(55, 32, 15, .25), inset 0 0 0 2px rgba(255, 220, 170, .22);
}

.vv-detail-frame.frame-glass {
  padding: 2px;
  background: transparent;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .18);
}

.vv-detail-panel {
  /* Üst dolgu, soldaki sahneyle AYNI değişkenden (bkz. .vv-detail-modal). */
  padding: var(--vv-detail-top) 46px 42px;
  border-left: 1px solid #e3dfd7;
  background: #faf8f4;
}

.vv-detail-series {
  padding-right: 42px;
  color: #a57d52;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1.55;
  text-transform: uppercase;
}

.vv-detail-title {
  margin: 14px 0 0;
  color: #111110;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.vv-detail-subtitle {
  margin-top: 9px;
  color: #716e67;
  font-size: 13px;
  line-height: 1.55;
}

.vv-detail-group {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #e3dfd7;
}

.vv-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.vv-detail-head h3 {
  margin: 0;
  color: #111110;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vv-detail-head span {
  color: #716e67;
  font-size: 11px;
}

.vv-frame-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.vv-frame-option {
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid #e3dfd7;
  background: transparent;
  color: #111110;
  cursor: pointer;
}

.vv-frame-option.is-selected {
  border-color: #111110;
}

.vv-frame-swatch {
  display: block;
  width: 34px;
  height: 42px;
  margin: 0 auto 7px;
  background: #ddd;
  border: 5px solid #111;
}

.vv-frame-option[data-frame="white"] .vv-frame-swatch {
  border-color: #fff;
  /* Açık zeminde beyaz kenar görünsün. */
  box-shadow: 0 0 0 1px rgba(17, 17, 16, .22);
}

.vv-frame-option[data-frame="oak"] .vv-frame-swatch {
  border-color: #8a5932;
}

.vv-frame-option[data-frame="glass"] .vv-frame-swatch {
  border: 1px solid #aaa;
}

.vv-frame-option small {
  display: block;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
}

.vv-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vv-size-option {
  min-width: 0;
  padding: 12px 6px;
  border: 1px solid #e3dfd7;
  background: transparent;
  color: #111110;
  font-size: 11px;
  cursor: pointer;
}

.vv-size-option.is-selected {
  border-color: #111110;
  background: #111110;
  color: #faf8f4;
}

.vv-purchase-row {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.vv-detail-price-label {
  color: #716e67;
  font-size: 10px;
}

.vv-detail-price {
  margin-top: 4px;
  color: #111110;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.65rem;
  font-weight: 300;
  white-space: nowrap;
}

.vv-buy-button {
  min-width: 158px;
  padding: 14px 20px;
  border: 1px solid #111110;
  background: #111110;
  color: #faf8f4;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.vv-share-row {
  margin-top: 18px;
  display: flex;
  gap: 9px;
}

.vv-share-button {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid #e3dfd7;
  background: transparent;
  color: #111110;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.vv-frame-option:focus-visible,
.vv-size-option:focus-visible,
.vv-buy-button:focus-visible,
.vv-share-button:focus-visible,
.vv-detail-close:focus-visible {
  outline: 2px solid #a57d52;
  outline-offset: 2px;
}

/* R5.3 + R9.1: mobilde galeri görseli ekran genişliğine göre (kenarlarda
   eşit küçük boşlukla) ölçeklenir. `width` YERİNE `max-width` kullanılır
   ki yükseklik sınırı (bkz. .vv-detail-gallery-image) burada da geçerli
   kalsın ve dikey görseller telefon ekranını taşırmasın. */

@media (max-width: 899px) {
  .vv-detail-modal {
    padding: 0;
    align-items: stretch;
  }

  .vv-detail-dialog {
    width: 100%;
    max-height: 100vh;
  }

  .vv-detail-grid {
    grid-template-columns: 1fr;
  }

  /* Tek sütuna inildiğinde sahne ve panel ALT ALTA gelir; artık hizalanacak
     bir yan sütun yoktur, bu yüzden sahnenin kendi üst boşluğu kullanılır
     (kapat düğmesinin altında kalması için 58px). */
  .vv-detail-stage {
    min-height: 440px;
    /* Yan 18px: uygulamanın screenPadding'i (2026-08-04). */
    padding: 58px 18px 30px;
  }

  .vv-detail-stage-visual {
    min-height: 330px;
  }

  .vv-detail-frame {
    max-height: 410px;
  }

  .vv-detail-image {
    max-height: 380px;
  }

  .vv-detail-panel {
    padding: 34px 18px 38px;
    border-top: 1px solid #e3dfd7;
    border-left: 0;
  }

  /* R17 — şerit artık sahnenin içinde; sahnenin yan dolgusu zaten var,
     buraya İKİNCİ bir dolgu eklenmez. */
  .vv-detail-gallery {
    margin-top: 16px;
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .vv-detail-stage {
    min-height: 360px;
    /* 18px: panel ve site geneliyle aynı hiza (uygulama ritmi). */
    padding-inline: 18px;
  }

  .vv-detail-stage-visual {
    min-height: 265px;
  }

  .vv-detail-frame {
    max-height: 330px;
  }

  .vv-detail-image {
    max-height: 300px;
  }

  .vv-detail-panel {
    padding-inline: 18px;
  }

  .vv-detail-gallery {
    margin-top: 14px;
    gap: 8px;
  }

  .vv-frame-options {
    gap: 5px;
  }

  .vv-frame-option {
    padding-inline: 2px;
  }

  .vv-purchase-row {
    align-items: stretch;
    flex-direction: column;
  }

  .vv-buy-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vv-detail-frame,
  .vv-detail-close {
    transition: none;
  }
}

/* Koleksiyon kartları artık <a> etiketi (gerçek bağlantı).
   <article> varsayılan olarak blok, <a> ise satır içidir — düzen bozulmasın
   diye blok davranışı ve miras alınan renk burada garanti edilir. */
a.card,
a.artwork-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Hızlı önizlemeden eserin kendi sayfasına giden bağlantı.
   Önizleme bir çıkmaz sokak olmamalı; paylaşılabilir adrese yol verir. */
.vv-detail-page-link {
  display: inline-block;
  margin: 10px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(184, 148, 79, .55);
  color: #8a6f3c;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.vv-detail-page-link[hidden] {
  display: none;
}

.vv-detail-page-link:hover,
.vv-detail-page-link:focus-visible {
  color: #111110;
  border-bottom-color: #111110;
}

/* ----------------------------------------------------------------------
   ESER RUHU + ÜRÜN ÖZELLİKLERİ (2026-08-06)
   Çerçeve seçicisinin yerine gelen kısa açıklama bloğu ve paylaş satırının
   altındaki açılır özellik listesi. Yazı stilleri mevcut dokuyla birebir:
   başlık .vv-detail-head h3 ile, metin .vv-detail-subtitle ile aynı. */
.vv-ruh-text {
  margin: 0;
  color: #716e67;
  font-size: 13px;
  line-height: 1.65;
}

.vv-specs {
  margin-top: 18px;
  border: 1px solid #e3dfd7;
}

.vv-specs-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: #111110;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.vv-specs-arrow {
  color: #716e67;
  font-size: 12px;
  transition: transform .25s ease;
}

.vv-specs.is-open .vv-specs-arrow {
  transform: rotate(180deg);
}

.vv-specs-body {
  padding: 2px 14px 14px;
  border-top: 1px solid #efece6;
}

.vv-specs-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: vv-ozellik;
  display: grid;
  gap: 9px;
}

.vv-specs-list li {
  position: relative;
  padding-left: 22px;
  color: #716e67;
  font-size: 12.5px;
  line-height: 1.6;
  counter-increment: vv-ozellik;
}

/* Verilen içerikteki gibi numaralı liste; numara bronz, metin dokusu
   mevcut alt metinlerle aynı. */
.vv-specs-list li::before {
  content: counter(vv-ozellik) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #B7A17E;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Kalın vurgular (kullanıcı metnindeki **...** aralıkları): ağırlık
   siteyle uyumlu tutulur, renk koyulaşarak vurgu verir. */
.vv-specs-list strong {
  font-weight: 500;
  color: #111110;
}

.vv-specs-toggle:focus-visible {
  outline: 2px solid #111110;
  outline-offset: 2px;
}